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

/* =========================================================
  FV / 中央コピー型：スマホ調整
  ---------------------------------------------------------
  スマホでは中央コピーを保ちつつ、
  文字サイズ・ボタン幅・信頼要素の並びを調整します。
========================================================= */

@media (max-width: 768px) {

  /* -------------------------------------------------------
    FV全体
    -------------------------------------------------------
    スマホでは高さを固定しすぎず、
    中身に合わせて自然に伸びるようにします。
  ------------------------------------------------------- */
  .fv-center {
    min-height: auto;
    padding: 88px 0 64px;
  }


  /* -------------------------------------------------------
    背景オーバーレイ
    -------------------------------------------------------
    スマホでは背景画像の主張を少し抑えて、
    文字を読みやすくします。
  ------------------------------------------------------- */
  .fv-center::before {
    background:
      linear-gradient(
        180deg,
        rgba(252, 254, 254, 0.94) 0%,
        rgba(252, 254, 254, 0.88) 52%,
        rgba(252, 254, 254, 0.96) 100%
      );
  }


  /* -------------------------------------------------------
    補足ラベル
    -------------------------------------------------------
    スマホでは少し小さく、1行で収まりやすくします。
  ------------------------------------------------------- */
  .fv-center__label {
    margin-bottom: 20px;
    font-size: 0.8rem;
  }


  /* -------------------------------------------------------
    メインコピー
    -------------------------------------------------------
    スマホでは大きすぎると読みにくいので、
    画面幅に合わせて小さくします。
  ------------------------------------------------------- */
  .fv-center__title {
    font-size: clamp(2.3rem, 10vw, 3.4rem);
    line-height: 1.32;
    letter-spacing: 0.03em;
  }


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


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


  /* -------------------------------------------------------
    CTAボタンエリア
    -------------------------------------------------------
    スマホでは横並びだと狭いので縦並びにします。
  ------------------------------------------------------- */
  .fv-center__buttons {
    display: grid;
    width: 100%;
    gap: 14px;
    margin-top: 34px;
  }


  /* -------------------------------------------------------
    FV内ボタン
    -------------------------------------------------------
    common.css の .c-btn はスマホで width:100% になるため、
    最小幅だけ解除します。
  ------------------------------------------------------- */
  .fv-center__btn {
    min-width: auto;
  }


  /* -------------------------------------------------------
    信頼・補足要素
    -------------------------------------------------------
    スマホでは3列のままだと窮屈なので縦並びにします。
  ------------------------------------------------------- */
  .fv-center__trust {
    grid-template-columns: 1fr;
    width: 100%;
    margin-top: 40px;
    padding: 0;
    overflow: hidden;
  }


  /* -------------------------------------------------------
    信頼要素1つ分
    -------------------------------------------------------
    スマホでは横並び風にして、情報を読みやすくします。
  ------------------------------------------------------- */
  .fv-center__trust-item {
    grid-template-columns: 48px 1fr;
    grid-template-areas:
      "icon label"
      "icon value";
    justify-items: start;
    align-items: center;
    column-gap: 14px;
    padding: 18px 20px;
    text-align: left;
  }


  /* -------------------------------------------------------
    区切り線
    -------------------------------------------------------
    PCでは縦線でしたが、スマホでは横線に変更します。
  ------------------------------------------------------- */
  .fv-center__trust-item + .fv-center__trust-item {
    border-left: none;
    border-top: 1px solid rgba(31, 122, 122, 0.12);
  }


  /* -------------------------------------------------------
    アイコン位置
  ------------------------------------------------------- */
  .fv-center__trust-icon {
    grid-area: icon;
    width: 46px;
    height: 46px;
    font-size: 1.1rem;
  }


  /* -------------------------------------------------------
    ラベル位置
  ------------------------------------------------------- */
  .fv-center__trust-label {
    grid-area: label;
    font-size: 0.82rem;
  }


  /* -------------------------------------------------------
    数値位置
  ------------------------------------------------------- */
  .fv-center__trust-value {
    grid-area: value;
    font-size: 1rem;
  }
}


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

@media (max-width: 430px) {

  /* -------------------------------------------------------
    FV全体の余白を少し詰める
  ------------------------------------------------------- */
  .fv-center {
    padding: 72px 0 56px;
  }


  /* -------------------------------------------------------
    メインコピーを少しだけ小さく
  ------------------------------------------------------- */
  .fv-center__title {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
}
/* =========================================================
   Variation B：チェックリストレイアウト / SP
========================================================= */

@media (max-width: 768px) {

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

  /* リスト全体 */
  .problem-b__list {
    width: 100%;
    gap: 14px;
    margin-top: 28px;
    padding: 28px 20px;
  }

  /* チェック1行 */
  .problem-b__item {
    grid-template-columns: 28px 1fr;
    gap: 10px;
  }

  /* チェックアイコン */
  .problem-b__icon {
    width: 23px;
    height: 23px;
    font-size: 0.8rem;
  }

  /* チェック本文 */
  .problem-b__text {
    font-size: 0.92rem;
  }

  /* CTA */
  .problem-b__cta {
    margin-top: 26px;
  }
}
/* =========================================================
   Variation B：番号ステップ型 / SP
========================================================= */

@media (max-width: 768px) {

  .reason-b__heading {
    margin-bottom: 36px;
  }

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

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

  /* 3列 → 縦並び */
  .reason-b__steps {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* SPでは横の点線を消す */
  .reason-b-step:not(:last-child)::after {
    display: none;
  }

  .reason-b-step {
    padding: 28px 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
  }

  .reason-b-step__number {
    top: 24px;
    left: 24px;
    width: 40px;
    height: 40px;
  }

  .reason-b-step__icon {
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
    font-size: 1.5rem;
  }

  .reason-b-step__text {
    width: 100%;
    font-size: 0.9rem;
  }
}
/* =========================================================
   Variation B：サービス内容をカードで紹介 / SP
========================================================= */

@media (max-width: 768px) {

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

  /* 2カラム → 縦並び */
  .price-b__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

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

  /* リンク群 */
  .price-b__links {
    margin-top: 28px;
  }

  /* メインリンクを幅いっぱいに */
  .price-b__main-link {
    width: 100%;
  }

  /* カードを縦並び */
  .price-b__cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* カード */
  .price-b-card {
    min-height: auto;
    padding: 28px 22px 18px;
  }

  /* カード説明 */
  .price-b-card__text {
    min-height: auto;
    font-size: 0.9rem;
  }

  /* ボタン */
  .price-b-card__btn {
    margin-top: 22px;
  }
}
/* =========================================================
   Variation B：縦並びステップ・タイムライン / SP
========================================================= */

@media (max-width: 768px) {

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

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

  /* タイムラインの縦線位置をスマホ用に調整 */
  .flow-b__timeline::before {
    left: 19px;
  }

  /* ステップ1行 */
  .flow-b__item {
    grid-template-columns: 40px 64px 1fr;
    gap: 14px;
    padding: 18px 0;
  }

  /* 丸数字 */
  .flow-b__number {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  /* アイコン枠 */
  .flow-b__icon {
    width: 58px;
    height: 58px;
    font-size: 1.45rem;
  }

  /* 見出し */
  .flow-b__title {
    font-size: 1rem;
  }

  /* 本文 */
  .flow-b__text {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {

  /* 狭いスマホではアイコンを上にし、読みやすくする */
  .flow-b__item {
    grid-template-columns: 40px 1fr;
    grid-template-areas:
      "number icon"
      "number content";
    align-items: start;
  }

  .flow-b__number {
    grid-area: number;
  }

  .flow-b__icon {
    grid-area: icon;
  }

  .flow-b__content {
    grid-area: content;
  }
}
/* =========================================================
   Variation B：2カラムQ&Aカード / SP
========================================================= */

@media (max-width: 768px) {

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

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

  /* 2列 → 1列 */
  .faq-b__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* カード余白 */
  .faq-b-card {
    padding: 22px 18px;
  }

  /* Q/A行 */
  .faq-b-card__row {
    grid-template-columns: 32px 1fr;
    gap: 10px;
  }

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

  /* 質問 */
  .faq-b-card__question {
    font-size: 0.95rem;
  }

  /* 回答 */
  .faq-b-card__answer {
    font-size: 0.9rem;
  }
}
/* =========================================================
   Variation B：画像＋フォームの分割CTA / SP
========================================================= */

@media (max-width: 768px) {

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

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

  /* 2カラム → 縦並び */
  .cta-b__inner {
    grid-template-columns: 1fr;
  }

  /* 画像エリア */
  .cta-b__visual {
    min-height: 260px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  /* 実画像 */
  .cta-b__img {
    min-height: 260px;
  }

  /* 仮画像 */
  .cta-b__placeholder {
    min-height: 260px;
    padding: 28px;
  }

  /* フォームエリア */
  .cta-b__form-area {
    padding: 34px 20px;
  }

  /* フォーム見出し */
  .cta-b__form-title {
    font-size: 1.45rem;
  }

  /* フォーム説明文 */
  .cta-b__form-lead {
    font-size: 0.9rem;
  }

  /* フォーム1行を縦並びに */
  .cta-b-form__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  /* ラベル */
  .cta-b-form__label {
    font-size: 0.9rem;
  }

  /* 送信ボタン */
  .cta-b-form__submit {
    width: 100%;
  }
}