/* =========================================================
  FV / スマホ調整
  ---------------------------------------------------------
  スマホでは2カラムをやめて、上から順に
  コピー → CTA → 特徴 → 画像
  の縦積みにします。
========================================================= */

/* =========================================================
  FV / スマホ調整
  ---------------------------------------------------------
  スマホでは2カラムをやめて、上から順に
  コピー → CTA → 特徴 → 画像
  の縦積みにします。
========================================================= */

@media (max-width: 768px) {

  /* -------------------------------------------------------
    FV全体
    -------------------------------------------------------
    スマホでは上下余白を少し減らします。
  ------------------------------------------------------- */
  .fv {
    padding: 64px 0 56px;
  }


  /* -------------------------------------------------------
    FV内側レイアウト
    -------------------------------------------------------
    1カラムに変更。
    画像は下に回ります。
  ------------------------------------------------------- */
  .fv__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }


  /* -------------------------------------------------------
    左側コンテンツ
    -------------------------------------------------------
    スマホでは中央寄せにするとLPらしくまとまりやすいです。
    ただし本文が長い場合は左寄せでもOK。
  ------------------------------------------------------- */
  .fv__content {
    text-align: center;
  }


  /* -------------------------------------------------------
    補足ラベル
    -------------------------------------------------------
    スマホでは少し小さめにします。
  ------------------------------------------------------- */
  .fv__label {
    margin-bottom: 18px;
    font-size: 0.82rem;
  }


  /* -------------------------------------------------------
    メインコピー
    -------------------------------------------------------
    スマホでは大きすぎると読みにくいので調整。
  ------------------------------------------------------- */
  .fv__title {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.35;
    letter-spacing: 0.03em;
  }


  /* -------------------------------------------------------
    リード文
    -------------------------------------------------------
    スマホで読みやすい行間・文字サイズにします。
  ------------------------------------------------------- */
  .fv__lead {
    margin-top: 22px;
    font-size: 0.95rem;
    line-height: 1.9;
  }


  /* -------------------------------------------------------
    PC専用改行を無効化
    -------------------------------------------------------
    スマホでは幅が狭いため、自然改行に任せます。
  ------------------------------------------------------- */
  .u-pc {
    display: none;
  }


  /* -------------------------------------------------------
    特徴・ベネフィット一覧
    -------------------------------------------------------
    スマホでは3つを横並びにすると窮屈なので、
    3カラム風を保ちつつ小さめに調整します。
  ------------------------------------------------------- */
  .fv__points {
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
  }


  /* -------------------------------------------------------
    特徴1つ分
    -------------------------------------------------------
    横幅を詰めて、スマホ画面に収めます。
  ------------------------------------------------------- */
  .fv__point {
    min-width: 0;
    width: 31%;
    gap: 8px;
  }


  /* -------------------------------------------------------
    特徴アイコン
    -------------------------------------------------------
    スマホでは少し小さくします。
  ------------------------------------------------------- */
  .fv__point-icon {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }


  /* -------------------------------------------------------
    特徴テキスト
    -------------------------------------------------------
    スマホで折り返しても読みやすいサイズにします。
  ------------------------------------------------------- */
  .fv__point-text {
    font-size: 0.78rem;
    line-height: 1.45;
  }


  /* -------------------------------------------------------
    CTAエリア
    -------------------------------------------------------
    スマホではボタンを画面幅いっぱいにして押しやすくします。
  ------------------------------------------------------- */
  .fv__buttons {
    justify-items: stretch;
    gap: 14px;
    margin-top: 34px;
  }


  /* -------------------------------------------------------
    メインCTAボタン
    -------------------------------------------------------
    common.css側の .c-btn もスマホでは width:100% になります。
    ここではFV用の最小幅だけ解除します。
  ------------------------------------------------------- */
  .fv__main-btn {
    min-width: auto;
  }


  /* -------------------------------------------------------
    サブ導線リンク
    -------------------------------------------------------
    中央寄せにして、ボタン下の補助導線として見せます。
  ------------------------------------------------------- */
  .fv__text-link {
    justify-self: center;
    font-size: 0.92rem;
  }


  /* -------------------------------------------------------
    メインビジュアル枠
    -------------------------------------------------------
    スマホでは縦長すぎると下に長くなるため、
    画像比率を少し横長寄りにします。
  ------------------------------------------------------- */
  .fv__image-frame,
  .fv__image-placeholder {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-m);
  }
}


/* =========================================================
  さらに小さいスマホ用
========================================================= */

@media (max-width: 430px) {

  /* -------------------------------------------------------
    特徴3つが窮屈な場合の調整
    -------------------------------------------------------
    3列のまま、さらにアイコンと文字を小さくします。
  ------------------------------------------------------- */
  .fv__points {
    gap: 10px;
  }

  .fv__point-icon {
    width: 44px;
    height: 44px;
  }

  .fv__point-text {
    font-size: 0.72rem;
  }
}
/* =========================================================
   Variation A：カード3列レイアウト / SP
========================================================= */

@media (max-width: 768px) {

  /* 見出し下の説明文 */
  .problem-a__lead {
    font-size: 0.92rem;
  }

  /* カードを1列に変更 */
  .problem-a__cards {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 28px;
  }

  /* カードの余白調整 */
  .problem-a-card {
    min-height: auto;
    padding: 28px 22px;
  }

  /* アイコンを少し小さく */
  .problem-a-card__icon {
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
    font-size: 1.35rem;
  }

  /* カードタイトル */
  .problem-a-card__title {
    font-size: 1.02rem;
  }

  /* カード本文 */
  .problem-a-card__text {
    font-size: 0.9rem;
  }

  /* CTA */
  .problem-a__cta {
    margin-top: 28px;
  }
}
/* =========================================================
   Variation A：アイコンカード型 / SP
========================================================= */

@media (max-width: 768px) {

  .reason-a__heading {
    margin-bottom: 32px;
  }

  .reason-a__title {
    font-size: 1.65rem;
  }

  .reason-a__lead {
    font-size: 0.92rem;
  }

  /* 4列 → 1列 */
  .reason-a__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .reason-a-card {
    min-height: auto;
    padding: 28px 22px;
  }

  .reason-a-card__icon {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
    font-size: 1.45rem;
  }

  .reason-a-card__text {
    font-size: 0.9rem;
  }
}
/* =========================================================
   Variation A：3プランの料金テーブル / SP
========================================================= */

@media (max-width: 768px) {

  /* ラベルを折り返し可能にする */
  .price-a__top-labels {
    flex-wrap: wrap;
    margin-bottom: 28px;
  }

  /* 左テキスト + 右カードを縦並びにする */
  .price-a__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* 見出し */
  .price-a__title {
    font-size: 1.6rem;
  }

  /* リード文 */
  .price-a__lead {
    margin-top: 16px;
    font-size: 0.92rem;
  }

  /* 料金カードを縦並びにする */
  .price-a__plans {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* SPではおすすめカードの上ずらしを解除 */
  .price-a-card--featured {
    transform: none;
  }

  /* カード上部 */
  .price-a-card__head {
    padding: 28px 20px 18px;
  }

  /* 価格 */
  .price-a-card__price {
    font-size: 1.9rem;
  }

  /* 機能リスト */
  .price-a-card__list {
    padding: 22px 20px 26px;
  }

  /* 比較リンク */
  .price-a__compare {
    margin-top: 24px;
  }
}
/* =========================================================
   Variation A：横並びステップ・水平フロー / SP
========================================================= */

@media (max-width: 768px) {

  /* 見出し下の説明文 */
  .flow-a__lead {
    font-size: 0.92rem;
  }

  /* ラベルはスマホで折り返せるようにする */
  .flow-a__top-labels {
    flex-wrap: wrap;
    margin-bottom: 32px;
  }

  /* 5列 → 1列 */
  .flow-a__list {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* ステップカード化 */
  .flow-a__item {
    padding: 28px 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
  }

  /* 横矢印はスマホでは非表示 */
  .flow-a__item:not(:last-child)::after {
    display: none;
  }

  /* 丸数字 */
  .flow-a__number {
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    font-size: 1.2rem;
  }

  /* アイコン枠 */
  .flow-a__icon {
    width: 76px;
    height: 76px;
    margin-bottom: 16px;
    font-size: 1.8rem;
  }

  /* 本文 */
  .flow-a__text {
    font-size: 0.9rem;
  }
}
/* =========================================================
   Variation A：アコーディオン型FAQ / SP
========================================================= */

@media (max-width: 768px) {

  /* 見出し下の説明文 */
  .faq-a__lead {
    font-size: 0.92rem;
  }

  /* ラベルを折り返せるようにする */
  .faq-a__top-labels {
    flex-wrap: wrap;
    margin-bottom: 24px;
  }

  /* 質問行 */
  .faq-a__question {
    grid-template-columns: 34px 1fr 20px;
    gap: 10px;
    min-height: 56px;
    padding: 12px 14px;
  }

  /* Q/Aアイコン */
  .faq-a__q-icon,
  .faq-a__a-icon {
    width: 28px;
    height: 28px;
    font-size: 0.88rem;
  }

  /* 質問テキスト */
  .faq-a__q-text {
    font-size: 0.92rem;
  }

  /* 回答行 */
  .faq-a__answer {
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 0 14px 16px;
  }

  /* 回答テキスト */
  .faq-a__a-text {
    font-size: 0.9rem;
  }
}
/* =========================================================
   Variation A：シンプルなCTAバンド / SP
========================================================= */

@media (max-width: 768px) {

  /* 見出し下の説明文 */
  .cta-a__lead {
    font-size: 0.92rem;
  }

  /* ラベルを折り返し可能にする */
  .cta-a__top-labels {
    flex-wrap: wrap;
    margin-bottom: 24px;
  }

  /* CTA本体 */
  .cta-a__box {
    padding: 40px 20px;
  }

  /* CTA見出し */
  .cta-a__title {
    font-size: 1.55rem;
  }

  /* CTA説明文 */
  .cta-a__text {
    margin-top: 14px;
    font-size: 0.92rem;
  }

  /* CTAボタン */
  .cta-a__btn {
    width: 100%;
    min-width: auto;
    margin-top: 26px;
  }
}