@charset 'utf-8';

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

   ・土台は /newcss/fv_zoudai.css を共有し、長茎で異なる値だけをここで上書きする。
     そのため choukei.html では fv_zoudai.css → fv_choukei.css の順で読み込むこと。
   ・ブロックには id="zoudaiFv" と class="fvChoukei" の両方を付与する。
     （id は共通スタイル適用のため、class は長茎用の差分適用のため）
   ・単位は cqw（#zoudaiFv の幅の1%）。元の rem 値は 1rem = 2.564cqw で換算。
   ================================================== */

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

    /* テキスト群の総高さ 約92cqw。動画は正方形(100cqw)なので top は8cqw未満に収める */
    #zoudaiFv.fvChoukei .topVisualTexts {
        /* LP は 2rem(5.13cqw) だが、「切らない」を削除して1行減った分を
           下げて中央寄りに配置する。5.03cqw ≒ 20px（幅398px時）を加算 */
        top: 10.16cqw;
    }

    #zoudaiFv.fvChoukei .topViewHeading {
        font-size: calc(8.21cqw * var(--fvScale));
        /* LP: 3.2rem */
    }

    /* 長茎はサイズ指定なし＝見出しの文字サイズを継承する */
    #zoudaiFv.fvChoukei .minchoText {
        margin-top: 0;
        font-size: inherit;
    }

    /* 「2」「8」「長く」の強調 */
    #zoudaiFv.fvChoukei .mediumText {
        font-size: calc(10.26cqw * var(--fvScale));
        /* LP: 4rem */
    }

    #zoudaiFv.fvChoukei .minchoText.mtext {
        font-size: calc(6.15cqw * var(--fvScale));
        /* LP: 2.4rem */
    }

    /* 「長茎術」3文字。字詰めは不要なので通常の字間に戻す */
    #zoudaiFv.fvChoukei .topViewHeading .bigText {
        /* 「長く」との間隔。旧マークアップの空行（約41px相当）を削除したうえで、
           その半分の約20px（幅398px時）を上マージンで確保する。
           5cqw = FV幅の5%。画面幅に比例して伸縮する */
        margin: 5cqw auto 1.28cqw;
        font-size: 20.5cqw;
        /* LP: 8rem */
        letter-spacing: normal;
    }
}