/* 嬢プラス SP用メインビジュアル修正 2026-11-04
   元の css/top/styles.css と css/price/styles.css の後で読み込んでください。
   PCは原則そのまま、SPのみ位置調整。
*/
.jo-mv__desktop { display: contents; }
.jo-mv__mobile { display: none; }

@media (max-width: 600px) {
  .jo-mv .jo-mv__desktop { display: none !important; }
  .jo-mv .jo-mv__mobile { display: block !important; width: 100%; }

  /* 親の元CSSにある高さ制限と絶対配置をクリア */
  .hero.jo-mv {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .hero.jo-mv .jo-mv__stage {
    position: relative !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 0 18px !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* 最上部：MENUの下ではなく、横にロゴが見えるよう上方向へ詰める */
  .jo-mv .jo-mv__mobile-head {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    margin: -43px auto 12px;
    padding: 0 9px;
    text-align: center;
    pointer-events: none;
  }
  .jo-mv .jo-mv__mobile-brand {
    display: block !important;
    position: static !important;
    width: min(66vw, 296px) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: contain;
    transform: none !important;
  }
  .jo-mv .jo-mv__mobile-tagline {
    position: relative;
    z-index: 1;
    margin-top: -2px;
    color: #171717;
    font-family: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-weight: 800;
    line-height: 1.3;
  }
  .jo-mv .jo-mv__mobile-tagline p {
    margin: 0 !important;
    padding: 0;
    font-size: clamp(12px, 3.65vw, 17px);
    line-height: 1.3;
    letter-spacing: -.025em;
  }
  .jo-mv .jo-mv__mobile-tagline p:nth-child(2) {
    font-size: clamp(16px, 4.4vw, 21px);
    line-height: 1.35;
  }
  .jo-mv .jo-mv__mobile-tagline p:nth-child(3) {
    margin-top: 5px !important;
    font-size: clamp(11px, 3.15vw, 15px);
  }
  .jo-mv .jo-mv__mobile-tagline p:nth-child(4) {
    font-size: clamp(12px, 3.5vw, 17px);
    white-space: nowrap;
  }
  .jo-mv .jo-mv__pink { color: #f72b87; }
  .jo-mv .jo-mv__blue { color: #2197e0; }

  /* 画像を写真のラッパー基準に配置し、説明文から独立させる */
  .jo-mv .jo-mv__mobile-visual {
    position: relative !important;
    box-sizing: border-box;
    width: calc(100% - 54px);
    max-width: 430px;
    margin: 0 auto;
    padding: 0;
    transform: none !important;
    isolation: isolate;
  }
  .jo-mv .jo-mv__mobile-photo.jo-mv__inner {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .jo-mv .jo-mv__mobile-photo > .jo-mv__photo {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
  }

  .jo-mv .jo-mv__mobile-text {
    display: block !important;
    position: absolute !important;
    z-index: 4;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: none;
  }
  .jo-mv .jo-mv__mobile-text--left {
    top: 2%;
    left: -3%;
    width: 48% !important;
  }
  .jo-mv .jo-mv__mobile-text--right {
    right: -3.5%;
    bottom: 5.8%;
    width: 46% !important;
  }

  /* Aタグを固定幅にし、アニメーションはリンクにかける。
     元CSSが親spanのanimation / transformを上書きしても影響を受けない */
  .jo-mv .jo-mv__mobile-present {
    display: block !important;
    position: absolute !important;
    z-index: 5;
    left: -2.5%;
    top: 46%;
    width: clamp(85px, 29vw, 132px) !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
    transform: translate3d(0,0,0);
    animation: jo-plus-mv-bob-20261104 2.35s ease-in-out infinite !important;
  }
  .jo-mv .jo-mv__mobile-present > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  @keyframes jo-plus-mv-bob-20261104 {
    0%, 100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-11px,0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .jo-mv .jo-mv__mobile-present { animation: none !important; }
}