@charset 'utf-8';

/* ==================================================
   i-zoudai.html FV 差し替え（SPのみ / テスト用）
   移植元: support-clinic.jp /lp/_partials/fv_zoudai.php + fv_zoudai.css
           support-clinic.jp /lp/zoudai/style.css (#topView 部分)

   ・SP( max-width:780px )のみ有効。PCは既存の <picture> をそのまま表示。
   ・LP側の #topView は公式サイト index.css の #topView と衝突するため
     #zoudaiFv にリネーム。
   ・LP側の CSS 変数(--blueColor 等)は公式サイトに存在しないため実値で記述。

   ▼サイズ指定について▼
   #zoudaiFv 自身を「コンテナ」にし、内部のサイズは全て cqw
   （= #zoudaiFv の幅の1%）で指定している。
   このためFVの幅が 100vw でも 500px でも、中身の比率は常に一定に保たれる。
   元CSSの rem 値は 1rem = 2.564vw = 2.564cqw で換算済み
   （公式サイトの :root font-size が 2.564vw のため）。
   ================================================== */

/* ---------- PC( min-width:781px )：新FVを非表示・既存FVを表示 ---------- */
#zoudaiFv {
    display: none;
}

/* ---------- SP( max-width:780px ) ---------- */
@media screen and (max-width: 780px) {

    /* 既存の <picture> FV を隠す */
    .imgHeadingWrap .mainContentsHeading.onImg .zoudaiFvPc {
        display: none;
    }

    .mainContents .imgHeadingWrap:has(#zoudaiFv) {
        border: none;
    }

    #zoudaiFv {
        --fvScale: 1;
        /* 文字サイズの一括調整用。大きくしたい場合のみ 1.05 等に */
        --fvMax: 100vw;
        /* FVの最大幅。100vw=全幅。左右に余白を出したい場合は
           92vw（左右4%ずつ＝合計8%の余白）のように vw で指定する */
        --fvBlue: #0D19C0;
        --fvRed: #ff0000;
        --fvGray: #f8f8f8;
        --fvWhite: #fff;

        /* 幅は「画面いっぱい、ただし --fvMax まで」。
           親 main.contentsWrapper の 94% 幅を打ち消しつつ画面中央に配置する */
        width: min(100vw, var(--fvMax));
        margin-inline: calc(50% - min(50vw, var(--fvMax) / 2));
        margin-block: 0;
        padding: 0;

        container-type: inline-size;
        display: block;
        background-color: var(--fvGray);
        /* 元LPは 'Noto Sans JP' 指定だが公式サイトでは廃止したため、
           サイト共通のゴシック（html の 'メイリオ'）を継承させる */
        overflow: hidden;
    }

    #zoudaiFv .topVisualWrap {
        position: relative;
    }

    /* PCムダ読み防止で追加した <picture> の打ち消し。2つの副作用に対応する。
       (1) <picture> は既定で display:inline のため、子 <img> の width:% が
           縮んだ箱を基準にしてしまう
       (2) i-zoudai.html 内の既存インラインCSS
           `.contentsWrapper .imgHeadingWrap picture` （元FVの全幅表示用）が
           このFV内の <picture> にも当たり、margin-left:50% で幅が半減する
       .blueBand は flex なので flex-basis も明示しておく */
    #zoudaiFv .topVisualTexts>picture,
    #zoudaiFv .blueBand>picture {
        width: 100%;
        max-width: none;
        margin-left: 0;
        transform: none;
        flex: 1 1 100%;
        display: block;
    }

    #zoudaiFv .topImg video {
        width: 100%;
        height: auto;
        display: block;
    }

    /* テキスト群の総高さは約 90cqw。動画は正方形(100cqw)なので
       top は 10cqw 未満に収める必要がある（超えるとスタンプが青帯にはみ出す） */
    #zoudaiFv .topVisualTexts {
        width: 94%;
        margin: auto;
        position: absolute;
        top: 7.7cqw;
        left: 0;
        right: 0;
    }

    #zoudaiFv .topViewHeading {
        margin-bottom: 3.85cqw;
        line-height: 1.25;
        font-size: calc(6.4cqw * var(--fvScale));
        font-weight: bold;
        text-align: center;
        letter-spacing: -0.4cqw;
        text-shadow:
            0 0 1.03cqw var(--fvWhite), 0 0 1.03cqw var(--fvWhite),
            0 0 1.03cqw var(--fvWhite), 0 0 1.03cqw var(--fvWhite),
            0 0 1.03cqw var(--fvWhite), 0 0 1.03cqw var(--fvWhite),
            0 0 1.03cqw var(--fvWhite), 0 0 1.03cqw var(--fvWhite),
            0 0 1.03cqw var(--fvWhite), 0 0 1.03cqw var(--fvWhite),
            0 0 1.03cqw var(--fvWhite);
    }

    /* 公式サイトの .mainContents .minchoText / .redText を上書き */
    #zoudaiFv .minchoText {
        margin-top: 1.28cqw;
        display: inline-block;
        font-family: 'Noto Serif JP', var(--yumincho);
        font-weight: bold;
        font-size: calc(6.4cqw * var(--fvScale));
    }

    #zoudaiFv .minchoText.mtext {
        font-size: calc(8cqw * var(--fvScale));
    }

    #zoudaiFv .redText {
        color: var(--fvRed);
    }

    /* 「ペニス増大術」6文字を必ず1行に収める。
       6文字 × (16cqw - 0.05em) ≒ 91cqw で FV幅(94%)に収まる */
    #zoudaiFv .topViewHeading .bigText {
        margin: 3.85cqw auto;
        display: block;
        line-height: 1;
        font-size: 16cqw;
        letter-spacing: -0.05em;
        white-space: nowrap;
    }

    #zoudaiFv .fvCopyImg {
        width: 96%;
        height: auto;
        margin: 2.56cqw auto 0;
        display: block;
    }

    #zoudaiFv .blueBand {
        margin-top: -0.51cqw;
        padding: 2.56cqw 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--fvBlue);
    }

    #zoudaiFv .blueBand img {
        width: 96%;
        height: auto;
        margin: 0 auto;
        padding: 2.56cqw;
        display: block;
    }

    #zoudaiFv+* {
        margin-top: 0;
    }
}