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

/* =========================================================
  FV / テキスト左・フォーム右型：SP
  ---------------------------------------------------------
  スマホでは2カラムをやめて、
  コピー → ベネフィット → 導入事例リンク → フォーム
  の順番で縦に並べます。
========================================================= */

@media (max-width: 768px) {

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


  /* -------------------------------------------------------
    背景装飾
    -------------------------------------------------------
    スマホでは装飾が邪魔になりやすいので、
    サイズを小さくして薄くします。
  ------------------------------------------------------- */
  .fv-contact::before {
    right: -240px;
    bottom: -240px;
    width: 440px;
    height: 440px;
    opacity: 0.65;
  }


  /* -------------------------------------------------------
    FV内側レイアウト
    -------------------------------------------------------
    1カラムに変更します。
  ------------------------------------------------------- */
  .fv-contact__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }


  /* -------------------------------------------------------
    左側コンテンツ
    -------------------------------------------------------
    スマホでは中央寄せにするとFVらしくまとまります。
  ------------------------------------------------------- */
  .fv-contact__content {
    text-align: center;
  }


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


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


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


  /* -------------------------------------------------------
    PC専用改行
    -------------------------------------------------------
    スマホでは自然な折り返しに任せます。
  ------------------------------------------------------- */
  .u-pc {
    display: none;
  }


  /* -------------------------------------------------------
    ベネフィットリスト
    -------------------------------------------------------
    スマホでは横幅いっぱいにして、読みやすくします。
  ------------------------------------------------------- */
  .fv-contact__benefits {
    width: 100%;
    margin-top: 30px;
    padding: 18px;
    gap: 12px;
    text-align: left;
  }


  /* -------------------------------------------------------
    ベネフィット1項目
    -------------------------------------------------------
    チェックと文章を横並びにします。
  ------------------------------------------------------- */
  .fv-contact__benefit {
    align-items: flex-start;
    gap: 10px;
  }


  /* -------------------------------------------------------
    チェックアイコン
    -------------------------------------------------------
    スマホでは少し小さめにします。
  ------------------------------------------------------- */
  .fv-contact__benefit-icon {
    width: 26px;
    height: 26px;
    margin-top: 2px;
    font-size: 0.82rem;
  }


  /* -------------------------------------------------------
    ベネフィット本文
    -------------------------------------------------------
    折り返しても読みやすいサイズにします。
  ------------------------------------------------------- */
  .fv-contact__benefit-text {
    font-size: 0.9rem;
    line-height: 1.6;
  }


  /* -------------------------------------------------------
    サブ導線リンク
    -------------------------------------------------------
    中央寄せにして、ボタンほど強くないリンクとして見せます。
  ------------------------------------------------------- */
  .fv-contact__text-link {
    margin-top: 24px;
    font-size: 0.92rem;
  }


  /* -------------------------------------------------------
    フォームカード
    -------------------------------------------------------
    スマホでは左右の余白を減らして、
    画面幅を有効に使います。
  ------------------------------------------------------- */
  .fv-contact__form-card {
    padding: 26px 20px;
    border-radius: var(--radius-m);
  }


  /* -------------------------------------------------------
    フォームタイトル
    -------------------------------------------------------
    スマホでは少し小さめにします。
  ------------------------------------------------------- */
  .fv-contact__form-title {
    font-size: 1.35rem;
  }


  /* -------------------------------------------------------
    フォーム補足文
    -------------------------------------------------------
    読みやすいサイズに調整します。
  ------------------------------------------------------- */
  .fv-contact__form-lead {
    font-size: 0.88rem;
  }


  /* -------------------------------------------------------
    入力項目
    -------------------------------------------------------
    スマホでは少し間隔を詰めます。
  ------------------------------------------------------- */
  .fv-contact__field {
    margin-top: 14px;
  }


  /* -------------------------------------------------------
    入力欄
    -------------------------------------------------------
    指でタップしやすい高さを確保します。
  ------------------------------------------------------- */
  .fv-contact__input {
    min-height: 46px;
    font-size: 0.95rem;
  }


  /* -------------------------------------------------------
    送信ボタン
    -------------------------------------------------------
    common.css側で .c-btn はスマホ時 width:100% になります。
    ここでは余白だけ調整します。
  ------------------------------------------------------- */
  .fv-contact__submit {
    margin-top: 22px;
  }


  /* -------------------------------------------------------
    安心表記
    -------------------------------------------------------
    小さくなりすぎないように調整します。
  ------------------------------------------------------- */
  .fv-contact__note {
    font-size: 0.74rem;
  }
}


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

@media (max-width: 430px) {

  /* FV全体の余白をさらに少し詰める */
  .fv-contact {
    padding: 52px 0 48px;
  }

  /* メインコピーを小さめにする */
  .fv-contact__title {
    font-size: clamp(1.8rem, 9vw, 2.6rem);
  }

  /* フォームカードの余白を微調整 */
  .fv-contact__form-card {
    padding: 24px 18px;
  }
}
/* =========================================================
   Variation C：テキスト左＋画像右レイアウト / SP
========================================================= */

@media (max-width: 768px) {

  /* 2カラムを縦並びにする */
  .problem-c__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  /* 見出し */
  .problem-c__title {
    font-size: 1.6rem;
    line-height: 1.55;
  }

  /* 説明文 */
  .problem-c__lead {
    margin-top: 14px;
    font-size: 0.92rem;
  }

  /* リスト */
  .problem-c__list {
    gap: 11px;
    margin-top: 24px;
  }

  /* リスト1行 */
  .problem-c__item {
    grid-template-columns: 26px 1fr;
    gap: 10px;
  }

  /* 本文 */
  .problem-c__text {
    font-size: 0.92rem;
  }

  /* ボタンまわり */
  .problem-c__buttons {
    display: grid;
    gap: 16px;
    margin-top: 30px;
  }

  /* メインボタン */
  .problem-c__btn {
    width: 100%;
    min-width: auto;
  }

  /* サブリンク */
  .problem-c__link {
    justify-content: center;
  }

  /* 画像エリア */
  .problem-c__image {
    min-height: 250px;
  }

  /* 実画像 */
  .problem-c__img {
    min-height: 250px;
  }

  /* 仮画像 */
  .problem-c__placeholder {
    min-height: 250px;
    padding: 28px;
  }

  /* 仮画像アイコン */
  .problem-c__placeholder-icon {
    font-size: 2.6rem;
  }
}
/* =========================================================
   Variation C：画像＋特徴リスト型 / SP
========================================================= */

@media (max-width: 768px) {

  /* 2カラム → 縦並び */
  .reason-c__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  /* 画像エリア */
  .reason-c__placeholder {
    min-height: 240px;
  }

  .reason-c__img {
    height: 240px;
  }

  .reason-c__caption {
    font-size: 0.88rem;
  }

  /* 見出し */
  .reason-c__title {
    font-size: 1.65rem;
  }

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

  /* リスト */
  .reason-c__list {
    margin-top: 24px;
  }

  /* リスト1行 */
  .reason-c__item {
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 15px 0;
  }

  /* チェックアイコン */
  .reason-c__icon {
    width: 30px;
    height: 30px;
    font-size: 0.86rem;
  }

  .reason-c__item-title {
    font-size: 0.98rem;
  }

  .reason-c__item-text {
    font-size: 0.9rem;
  }
}
/* =========================================================
   Variation C：おすすめプラン強調 + 比較表 / SP
========================================================= */

@media (max-width: 768px) {

  /* ラベル折り返し */
  .price-c__top-labels {
    flex-wrap: wrap;
    margin-bottom: 28px;
  }

  /* 左おすすめ + 右表を縦並び */
  .price-c__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* プラン名 */
  .price-c__title {
    font-size: 1.65rem;
  }

  /* リード文 */
  .price-c__lead {
    font-size: 0.92rem;
  }

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

  /* ボタン */
  .price-c__btn {
    width: 100%;
  }

  /* 表は横スクロール前提 */
  .price-c__table-wrap {
    width: 100%;
    overflow-x: auto;
    padding-top: 30px;
  }

  /* 表の最低幅 */
  .price-c-table {
    min-width: 680px;
  }

  /* 表セル */
  .price-c-table th,
  .price-c-table td {
    padding: 13px 10px;
    font-size: 0.84rem;
  }

  /* 表内おすすめバッジ */
  .price-c-table__badge {
    top: -28px;
    font-size: 0.74rem;
  }
}
/* =========================================================
   Variation C：カード型ステップ・カードリスト / SP
========================================================= */

@media (max-width: 768px) {

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

  /* ラベル折り返し */
  .flow-c__top-labels {
    flex-wrap: wrap;
    margin-bottom: 28px;
  }

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

  /* カード */
  .flow-c-card {
    min-height: auto;
    padding: 28px 22px;
  }

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

  /* アイコン */
  .flow-c-card__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    font-size: 1.55rem;
  }

  /* 本文 */
  .flow-c-card__text {
    font-size: 0.9rem;
  }
}
/* =========================================================
   Variation C：シンプルリスト型FAQ / SP
========================================================= */

@media (max-width: 768px) {

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

  /* ラベル折り返し */
  .faq-c__top-labels {
    flex-wrap: wrap;
    margin-bottom: 24px;
  }

  /* FAQ 1行を縦並びに */
  .faq-c__item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 0;
  }

  /* 質問・回答 */
  .faq-c__question,
  .faq-c__answer {
    grid-template-columns: 32px 1fr;
    gap: 10px;
  }

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

  /* 質問 */
  .faq-c__question-text {
    font-size: 0.94rem;
  }

  /* 回答 */
  .faq-c__answer-text {
    font-size: 0.9rem;
  }

  /* CTA枠 */
  .faq-c__contact {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 18px;
    text-align: center;
  }

  /* CTA左側 */
  .faq-c__contact-text {
    justify-content: center;
    flex-direction: column;
    gap: 10px;
  }

  /* ボタン */
  .faq-c__contact-btn {
    width: 100%;
    min-width: auto;
  }
}
/* =========================================================
   Variation C：コンパクトお問い合わせボックス / SP
========================================================= */

@media (max-width: 768px) {

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

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

  /* CTAボックスを縦並びに */
  .cta-c__box {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 30px 20px;
  }

  /* 左側メッセージ */
  .cta-c__message {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
    text-align: center;
  }

  /* アイコン */
  .cta-c__icon {
    width: 62px;
    height: 62px;
    font-size: 1.7rem;
  }

  /* 見出し */
  .cta-c__title {
    font-size: 1.35rem;
  }

  /* 本文 */
  .cta-c__text {
    font-size: 0.9rem;
  }

  /* 右側アクション */
  .cta-c__action {
    padding-left: 0;
    padding-top: 24px;
    border-left: none;
    border-top: 1px solid var(--color-border);
    text-align: center;
  }

  /* 電話番号 */
  .cta-c__tel {
    justify-content: center;
    font-size: 1.35rem;
  }
}