/* 自動生成（static/ → wordpress/build_theme.py）。このファイルは直接直さず、static/ を直して作り直す */
/* =========================================================
   伴走サポートの詳細ページ（bansou.html）
   detail.css（LP制作）・detail_ec.css（2枚のカード）・detail_line.css（区切った白い箱）の後に読み、違うところだけ上書きする。
   Figma：80_詳細伴走_1440 を基準に、1024／768／375／425／320／2560
   ========================================================= */

/* ---------- 01 ページ冒頭：写真と、「最初の3ヶ月 無料」 ---------- */
.page-bansou .dt-top__bg {
  background-image:
    linear-gradient(rgba(253, 252, 250, 0) calc(100% - 160px), #fdfcfa),
    radial-gradient(ellipse 71.43% 55.56% at 50% 50%, rgba(252, 252, 250, 0.95), rgba(252, 252, 250, 0.88) 60%, rgba(252, 252, 250, 0.6)),
    url("../assets/images/bansou_hero.webp");
}

.page-bansou .dt-top__underline {
  width: calc(100% + 8px);
}

.page-bansou .dt-fact:last-child .dt-fact__value,
.page-bansou .dt-fact:last-child .dt-fact__num {
  font-size: 36px;
}

.page-bansou .dt-fact__sub {
  font-size: 18px;
}

/* ---------- 03 含まれるもの：1枚のカードを2つに区切る（伴走サポート／伴走サポート＋で加わるもの） ---------- */
.dt-incp--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- 04 料金プラン：オプションがないので、注記の下は96（1023px以下は48） ---------- */
.page-bansou .dt-plan {
  padding-bottom: 96px;
}

/* ---------- 07 よくある質問：1440px以上は左に1〜3問目、右に4〜7問目 ---------- */
@media (min-width: 1024px) {
  .faq__list--bansou {
    grid-template-areas: "a c" "b c";
    grid-template-rows: auto 1fr;
    gap: 16px 24px;
  }

  .faq__list--bansou .faq__col--a { grid-area: a; }
  .faq__list--bansou .faq__col--b { grid-area: b; }
  .faq__list--bansou .faq__col--c { grid-area: c; }

  /* 進め方：説明が2行になるので中央ぞろえ */
  .page-bansou .dt-step__desc {
    text-align: center;
  }
}

/* 1024〜1439px：左に1・2問目、右に3〜7問目 */
@media (min-width: 1024px) and (max-width: 1439px) {
  .faq__list--bansou {
    grid-template-areas: "a b" "a c";
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* 中間CTA：文の列をLP制作と同じ幅にして、Figmaと同じ位置に（見出しが短いと真ん中に寄ってしまうため） */
  .page-bansou .dt-mid__band {
    grid-template-columns: 315px 260px;
  }

  .page-bansou .dt-step__desc {
    text-align: center;
  }
}

/* =========================================================
   1023px以下
   ========================================================= */
@media (max-width: 1023px) {
  .page-bansou .dt-plan {
    padding-bottom: 48px;
  }

  .page-bansou .dt-top__underline {
    left: -3px;
    width: calc(100% + 6px);
  }
}

/* =========================================================
   スマホ（〜767px）
   ========================================================= */
@media (max-width: 767px) {
  .page-bansou .dt-fact__num,
  .page-bansou .dt-fact:last-child .dt-fact__num,
  .page-bansou .dt-fact__value,
  .page-bansou .dt-fact:last-child .dt-fact__value {
    font-size: 26px;
  }

  .page-bansou .dt-fact__sub {
    font-size: 13px;
  }

  /* 行の高さをFigmaの箱の高さ（小数を切り上げた値）にそろえる。そろえないと下が1pxずつ上にずれる */
  .page-bansou .dt-plan__lead,
  .page-bansou .dt-guide__title {
    line-height: 26px;
  }

  .page-bansou .dt-mid__title {
    line-height: 38px;
  }
}

/* =========================================================
   Figma 320（〜374px）：「最初の3ヶ月」と「無料」を2行に
   ========================================================= */
@media (max-width: 374px) {
  /* 見出し「伴走サポート」は52だと幅280に入らないので44（デザイン制作と同じ） */
  .page-bansou .dt-top__title {
    font-size: 44px;
  }

  .page-bansou .dt-top__underline {
    top: 76px;
  }

  .page-bansou .dt-fact__num,
  .page-bansou .dt-fact__value {
    font-size: 20px;
  }

  .page-bansou .dt-fact__unit {
    font-size: 12px;
  }

  .page-bansou .dt-fact:last-child .dt-fact__value {
    height: 55px;
  }

  .page-bansou .dt-fact:last-child .dt-fact__value > span {
    display: block;
    line-height: 30px;
  }

  .page-bansou .dt-fact:last-child .dt-fact__sub {
    line-height: 25px;
  }

  .dt-plans--bansou .dt-pcard__price-value {
    font-size: 18px;
  }

  .dt-plans--bansou .dt-pcard__price-value small {
    font-size: 10px;
  }

  /* 最終CTA：見出しが3行・説明が2行なので、ボタンの下を8詰めてフッターの位置をそろえる（ほかの詳細ページは30） */
  .page-bansou .underwater .btn-line--md {
    margin-bottom: 22px;
  }
}