/*
 * tokens.css — design.md §2 / §3 と同期
 *
 * ⚠️ ここに無い色・サイズは Figma から都度読む。トークンを増やしすぎない。
 *    Figma と食い違ったら Figma が正。気づいたら design.md §8 に記録して相談する。
 */
:root {
  /* --- color (Figma Variables) --- */
  --c-primary:  #3C00FF;   /* 不動産primary      強調見出しの青紫 */
  --c-accent:   #FF2185;   /* 不動産_アクセント   数字強調・CTAのマゼンタ */
  --c-sky:      #2FAEE5;   /* color/ui/secondry  ラベル帯・表ヘッダ */
  --c-line:     #5DE61D;   /* color/ui/line      「LINE」表記の緑 ※LINE公式緑ではない。この値で正 */
  --c-text:     #3B3B3B;   /* text_color         本文・見出し */
  --c-text-sub: #474747;   /* color/text/default 補足テキスト */
  --c-gray:     #5C5C5C;   /* color/ui/black     グレー系UI */
  --c-white:    #FFFFFF;

  /* --- shadow --- */
  --shadow-1: 2px 2px 1px rgba(0, 0, 0, 0.15);   /* Figma: shadow1 */

  /* --- typography (PC基準。SP値は都度Figmaから読む) --- */
  --ff-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;

  --fz-h-xl:      40px;  /* heading/xl    700 / 1.5 */
  --fz-h-lg:      30px;  /* heading/lg    700 / 1.3 */
  --fz-h-md:      24px;  /* heading/md    700 / 1.5 */
  --fz-body-lg:   18px;  /* body/lg       500 / 1.7  (bold版は 700) */
  --fz-body-md:   14px;  /* body/md       500 / 1.7  (regular版は 400) */
  --fz-caption:   12px;  /* caption/md    400 / 1.3 */

  --lh-heading-tight: 1.3;
  --lh-heading:       1.5;
  --lh-body:          1.7;

  /* --- layout --- */
  --w-container: 1280px;      /* PCアートボード幅 = コンテンツ最大幅 */
  --pad-inline-sp: 16px;
  --pad-inline-pc: 40px;      /* 実値はFigmaの左右余白に合わせて調整 */
}

/*
 * ブレークポイントは 768px 単一（design.md §1）。
 * メディアクエリではCSS変数が使えないため、@media には直接 768px を書く。
 */

/* base.css — リセット + 全体ベース */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* CTAボタン → #contact のジャンプを滑らかに。
     prefers-reduced-motion: reduce では下の共通ブロックが auto に戻す */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ff-base);
  font-size: var(--fz-body-md);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: 700;
  line-height: var(--lh-heading);
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg, picture, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* セクションのガワ。背景はビューポート全幅、中身は .u-container で1280px中央寄せ */
section { position: relative; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* utilities.css — design.md §1 / §4 */

/*
 * コンテナ: 背景は各セクションが全幅で持ち、中身だけをこれで 1280px 中央寄せする。
 */
.u-container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--pad-inline-sp);
}

@media (min-width: 768px) {
  .u-container { padding-inline: var(--pad-inline-pc); }
}

/* --- PC/SP 出し分け（block要素用） --- */
.only-sp { display: block; }
.only-pc { display: none; }

@media (min-width: 768px) {
  .only-sp { display: none; }
  .only-pc { display: block; }
}

/* --- PC/SP 出し分け（<br> / inline要素用） --- */
br.only-sp,
.only-sp--inline { display: inline; }
br.only-pc,
.only-pc--inline { display: none; }

@media (min-width: 768px) {
  br.only-sp,
  .only-sp--inline { display: none; }
  br.only-pc,
  .only-pc--inline { display: inline; }
}

/* --- flex/grid を維持したまま出し分けたい場合 --- */
.only-sp--flex { display: flex; }
.only-pc--flex { display: none; }

@media (min-width: 768px) {
  .only-sp--flex { display: none; }
  .only-pc--flex { display: flex; }
}

/* --- a11y: 視覚的に隠すがスクリーンリーダーには読ませる --- */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== c-btn.css ===== */
/*
 * c-btn — グラデーションpillボタン（共通部品 / design.md §5）
 *
 * Figma実測: 角丸26 / linear-gradient #9b8dff → #e5a9ff（左→右） / shadow 2px 2px 6px rgba(0,0,0,.15)
 * Figma上のフォントは Zen Kaku Gothic New Bold だが、日本語フォントの二重読み込みを避けるため
 * Noto Sans JP Bold で代用する（ユーザー判断 / design.md §8 #7）。
 */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  border-radius: 26px;
  background: linear-gradient(to right, #9b8dff 0%, #e5a9ff 100%);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
  color: var(--c-white);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.c-btn:hover,
.c-btn:focus-visible {
  opacity: 0.85;
}

/* --- ヘッダー内のサイズ（Figma: 184x24 / 14px / line-height 17px） --- */
.c-btn--header {
  width: 184px;
  height: 24px;
  padding-inline: 14px;
  font-size: 14px;
  line-height: 17px;
}

/* --- FV内のサイズ（Figma: h50 / r26 / padding 17-25 / gap4 / 20px / 背景は単色 #FF2185） --- */
.c-btn--fv {
  gap: 4px;
  height: 50px;
  padding: 17px 25px;
  background: var(--c-accent);      /* ヘッダーの紫グラデとは別。FVはマゼンタ単色 */
  font-size: 20px;
  line-height: 17px;
}

.c-btn__icon {
  flex-shrink: 0;
}

/* ===== c-cmp.css ===== */
/*
 * c-cmp — 比較表（11-compare-line / 12-compare-ma で共有）
 *
 * 画像ではなく <table> で組む（ユーザー指定 / design.md §8 #14）。
 * PC: 通常の表（列ヘッダーは thead）
 * SP: 項目名を全幅バーにし、その下に3セルを並べる。列ヘッダーは各セルの
 *     ::before に data-label を出して再現する（DOMは1つのまま）。
 *
 * Figma実測
 *   PC 行高44 / ヘッダー25 / 枠線1px #D4D4D4 / 行ヘッダー背景 #EBF6F9
 *   SP 項目名バー330x29(2行は44) / セル110・112・110 / 高さは行ごとに異なる
 */

.c-cmp {
  width: 100%;
  border-collapse: collapse;
  color: #3b3b3b;
  text-align: center;
}

/* ALL GRIT列だけ文字色を変える（Figma実測 #3C00FF） */
.c-cmp tbody td:first-of-type { color: #3c00ff; }

.c-cmp th,
.c-cmp td {
  border: 1px solid #d4d4d4;
}

/* --- 記号 -----------------------------------------------------------
 *
 * ◎○×△ はすべて「高さ28pxの箱 + CSS mask + currentColor」で描く。
 *
 * ⚠️ フォントのグリフ(◎○)と画像(×△)を混在させないこと。
 *    グリフの中心は行ボックス内でフォントのメトリクス依存に決まるため、
 *    画像側を padding で経験的に合わせても環境が変われば必ずずれる
 *    （Chromeでは0.5px以内に揃うのに iOS実機でだけ1〜2pxずれた）。
 *    maskなら全記号が同じ箱の幾何中心に置かれ、環境差が原理的に出ない。
 *
 * 色は currentColor なので、ALL GRIT列の紫(#3C00FF)がそのまま乗る。
 * 文字は読み上げ用にDOMへ残し、font-size:0 で視覚的にだけ消している。
 */

/*
 * ⚠️ SPでは中身を縦積みにするので必ず block にすること。
 *    inline のままだと「inline の中に block」という不正な入れ子になり、
 *    ブラウザが匿名ブロックを補って解釈する。補い方はブラウザで違う。
 */
.c-cmp__cell { display: block; }

.c-cmp__mark {
  display: block;
  height: 28px;
  margin-inline: auto;
  font-size: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  mask-mode: alpha;
}

/* サイズはFigma実測（SP）。◎○ 20x20 / × 15x15 / △ 17x14 */
.c-cmp__mark--dcircle {
  width: 20px;
  -webkit-mask-image: url("./img/icon-mark-dcircle.svg");
  mask-image: url("./img/icon-mark-dcircle.svg");
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}

.c-cmp__mark--circle {
  width: 20px;
  -webkit-mask-image: url("./img/icon-mark-circle.svg");
  mask-image: url("./img/icon-mark-circle.svg");
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}

.c-cmp__mark--cross {
  width: 15px;
  -webkit-mask-image: url("./img/icon-cross.svg");
  mask-image: url("./img/icon-cross.svg");
  -webkit-mask-size: 15px 15px;
  mask-size: 15px 15px;
}

.c-cmp__mark--triangle {
  width: 17px;
  -webkit-mask-image: url("./img/icon-triangle.svg");
  mask-image: url("./img/icon-triangle.svg");
  -webkit-mask-size: 17px 14px;
  mask-size: 17px 14px;
}

/* PCの△だけFigmaは一回り大きい（20x17） */
@media (min-width: 1024px) {
  .c-cmp__mark--triangle {
    width: 20px;
    -webkit-mask-size: 20px 17px;
    mask-size: 20px 17px;
  }
}

.c-cmp__note {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.c-cmp__sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
}

/* SPだけの改行（ユーティリティは768px境なのでこの表専用に持つ） */
.c-cmp__br-sp { display: inline; }

@media (min-width: 1024px) {
  .c-cmp__br-sp { display: none; }
}

/* =====================================================================
 * SP（〜1023px）: 項目名バー → 列ヘッダー → セル の縦積み
 * ===================================================================== */
@media (max-width: 1023px) {
  /* SPでは列ヘッダー（ALL GRIT/A社/B社）は各セルの ::before で出すので隠し、
     「比較項目」だけ表全体の見出しバーとして残す */
  .c-cmp thead,
  .c-cmp thead tr { display: block; }

  .c-cmp thead th:not(.c-cmp__corner) { display: none; }

  .c-cmp__corner {
    display: block;
    height: 46px;
    border: 0;
    background: #92dae7;
    border-radius: 8px 8px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 46px;
  }

  .c-cmp tbody,
  .c-cmp tr { display: block; }

  .c-cmp tr {
    display: grid;
    grid-template-columns: 110fr 112fr 110fr;
  }

  /* 項目名は全幅のバー */
  .c-cmp tbody th {
    grid-column: 1 / -1;
    min-height: 29px;
    padding: 4px;
    background: #ebf6f9;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
  }

  .c-cmp td {
    padding: 0 0 4px;
    border-top: 0;
  }

  /* 各セルの上に列ヘッダーを出す */
  .c-cmp td::before {
    content: attr(data-label);
    display: block;
    /* 負のマージンで隣へはみ出すとセル間の罫線(#D4D4D4)を塗り潰し、
       A社とB社のラベルの境目が消える（Figmaは1pxの罫線が入る） */
    margin: 0 0 8px;
    padding: 3px 0;
    background: #909090;
    color: var(--c-white);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
  }

  .c-cmp td:first-of-type::before {
    background: linear-gradient(to right, #7070ff 0%, #82f7ff 100%);
  }

  .c-cmp__note { padding-inline: 6px; }

  /* Figma: 3行目B社は文量が多いので一段小さくして3行に収める */
  .c-cmp tbody tr:nth-child(3) td:nth-child(4) .c-cmp__note {
    padding-inline: 4px;
    font-size: 10px;
    line-height: 15px;
  }
}

/* =====================================================================
 * PC（1024px〜）: 通常の表
 * ===================================================================== */
@media (min-width: 1024px) {
  .c-cmp {
    table-layout: fixed;
    width: 753px;
    margin-inline: auto;
  }

  .c-cmp thead th {
    height: 25px;
    padding: 0;
    /* 罫線があると角丸の外に矩形の線が残るので、ヘッダーは背景色だけで見せる */
    border: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
  }

  .c-cmp__corner {
    background: #92dae7;
    border-radius: 4px 5px 0 0;
    font-size: 12px;
    font-weight: 400;
  }

  .c-cmp thead th:nth-child(2) {
    background: linear-gradient(to right, #7070ff 0%, #82f7ff 100%);
    border-radius: 4px 4px 0 0;
    color: var(--c-white);
  }

  .c-cmp thead th:nth-child(n + 3) {
    background: #909090;
    border-radius: 4px 4px 0 0;
    color: var(--c-white);
  }

  .c-cmp tbody th {
    width: 200px;
    color: #3b3b3b;
    height: 44px;
    padding: 0 8px;
    background: #ebf6f9;
    border-left: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }

  .c-cmp tbody td {
    height: 44px;
    padding: 0;
    background: var(--c-white);
  }

  /* 記号と注記は横並び。Figmaのpadding20pxだと注記が入りきらないので10pxにする */
  .c-cmp tbody td > * {
    vertical-align: middle;
  }

  .c-cmp__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    padding-inline: 10px;
  }

  /* auto margin はフレックスの余白を食って記号を端に寄せてしまうので打ち消す */
  .c-cmp tbody td .c-cmp__mark {
    flex-shrink: 0;
    margin-inline: 0;
  }

  .c-cmp tbody td .c-cmp__note {
    text-align: left;
  }

  /* Figma: 3行目B社の注記だけ10px（文量が多く2行に収めるため） */
  .c-cmp tbody tr:nth-child(3) td:nth-child(4) .c-cmp__note {
    font-size: 10px;
    line-height: 13px;
  }
}

/* =====================================================================
 * .c-cmp--ma : 12-compare-ma 用の差分
 *
 * 11との違い
 *   - 列が3つ（比較項目 / ALL GRIT / C社）。列幅 200 / 185 / 185
 *   - PCでも記号と注記を「縦積み」にする（11は横並び）
 *   - 記号が一回り小さい（Figma実測 PC ◎19x19・△19x16 / SP ◎20x20・△18x16）
 *   - 行ヘッダーの文字色が #5C5C5C（11は #3B3B3B）
 *   - 1行目だけ記号がなく、チャネル名のテキストが入る
 * ===================================================================== */

.c-cmp--ma tbody th { color: #5c5c5c; }

/* チャネル名（LINE / メール＋SMS）。記号の代わりに入る 14px のテキスト */
.c-cmp__ch {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}

@media (max-width: 1023px) {
  .c-cmp--ma tr { grid-template-columns: 164fr 167fr; }

  /* 記号の下に注記が縦に積まれるぶん、箱を詰めないと行が高くなる */
  .c-cmp--ma .c-cmp__mark { height: 22px; }

  .c-cmp--ma .c-cmp__mark--triangle {
    width: 18px;
    -webkit-mask-size: 18px 16px;
    mask-size: 18px 16px;
  }
}

@media (min-width: 1024px) {
  .c-cmp--ma { width: 570px; }

  .c-cmp--ma tbody th { width: 200px; }

  /* PCも縦積みなので、行高44pxに 記号+gap4+注記16 が収まるよう箱を20pxにする */
  .c-cmp--ma .c-cmp__mark { height: 20px; }

  /* PCでも縦積み。11は横並びなので方向だけ変える */
  .c-cmp--ma .c-cmp__cell {
    flex-direction: column;
    gap: 4px;
    padding-inline: 20px;
  }

  .c-cmp--ma .c-cmp__mark--dcircle,
  .c-cmp--ma .c-cmp__mark--circle {
    width: 19px;
    -webkit-mask-size: 19px 19px;
    mask-size: 19px 19px;
  }

  .c-cmp--ma .c-cmp__mark--triangle {
    width: 19px;
    -webkit-mask-size: 19px 16px;
    mask-size: 19px 16px;
  }
}

/* ===== c-faq.css ===== */
/*
 * c-faq — FAQカード（13-faq）
 *
 * Figma実測
 *   カード  bg #F6F6F6 / radius 8 / PC padding 30px・gap 23 / SP padding 20px 30px・gap 16
 *   質問    18px Bold #3B3B3B、行24px（Figma 1.33em）。Qはぶら下げインデント
 *   Qの字   42dot Sans Bold 24px #2FAEE5（このLPで唯一この書体を使う箇所）
 *   答え箱  白 / radius 8 / PC padding 10 ・SP padding 14px 15px
 *   答え文  14px Regular / 行24px / text-align: justify（Figma JUSTIFIED）
 */

.c-faq {
  /* 下だけ広い。Figmaのフレーム実測が31〜39pxで、指定の20pxより広く取られている */
  padding: 20px 30px 30px;
  background: #f6f6f6;
  border-radius: 8px;
}

/*
 * Qを行頭にぶら下げる。質問が折り返しても2行目以降が本文の左端に揃う。
 * flex を使わないのは、テキストノードと <span> を並べたときの崩れを避けるため。
 */
.c-faq__q {
  padding-left: 22px;
  color: var(--c-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  text-indent: -22px;
}

.c-faq__q-mark {
  display: inline-block;
  width: 22px;
  color: #2faee5;
  font-family: "42dot Sans", sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-indent: 0;
}

.c-faq__a {
  margin-top: 16px;
  padding: 14px 15px;
  background: var(--c-white);
  border-radius: 8px;
}

.c-faq__a-text {
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: justify;
}

@media (min-width: 1024px) {
  .c-faq { padding: 30px; }

  .c-faq__q {
    padding-left: 29px;
    text-indent: -29px;
  }

  .c-faq__q-mark { width: 29px; }

  .c-faq__a {
    margin-top: 23px;
    padding: 10px;
  }

  /* Figmaは箱いっぱいではなく669px幅で中央に置かれている */
  .c-faq__a-text {
    max-width: 669px;
    margin-inline: auto;
  }
}

/* ===== c-reason-label.css ===== */
/*
 * c-reason-label — 「訪問査定アポが獲得できる仕組み1〜4」の水色ラベル帯
 * 04〜07 の4セクションで共通（design.md §5）
 *
 * Figma実測: PC 480x56 / SP 350x41、padding 10px 14px、radius 16、#2FAEE5
 */
.c-reason-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 350px;
  height: 41px;
  padding: 10px 14px;
  background: var(--c-sky);
  border-radius: 16px;
  color: var(--c-white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 768px) {
  .c-reason-label {
    width: 480px;
    max-width: 100%;
    height: 56px;
    font-size: 24px;
  }
}

/* ===== 00-cta.css ===== */
/*
 * cta-document  中間CTA帯（資料ダウンロード）
 * ページ内3箇所で共有（03-voice後 / 09-roadmap後 / 13-faq後）
 *
 * Figma実測
 *   PC 1280x350 / SP 390x560
 *   背景 linear-gradient(140deg, rgba(63,224,253,.3) 0%, rgba(101,170,255,.3) 46%, rgba(215,172,241,.3) 100%)
 *   PC: 左に資料画像・右に「見出し / 白カード / 注記 / ボタン」
 *   SP: 縦積み（資料画像 → 見出し → 白カード → 注記 → ボタン）
 *   資料画像は2枚重ね（前面にshadow 3px 3px 6px rgba(0,0,0,.2)）
 */

.s-cta {
  background: linear-gradient(140deg,
    rgba(63, 224, 253, 0.3) 0%,
    rgba(101, 170, 255, 0.3) 46%,
    rgba(215, 172, 241, 0.3) 100%);
}

.s-cta__inner {
  max-width: var(--w-container);
  margin-inline: auto;
  padding: 24px 20px 36px;
}

/* --- 資料画像（2枚重ね） --------------------------------------------- */
/* SP: グループ (20,24) 343.37x203。前面(0,0) 329.06x186.39 / 背面(14.19,17.39) */
.s-cta__docs {
  position: relative;
  width: 343.37px;
  max-width: 100%;
  aspect-ratio: 343.37 / 203;
  margin-inline: auto;
}

.s-cta__doc {
  position: absolute;
  width: 95.83%;                    /* 329 / 343.37 */
  height: auto;
}

.s-cta__doc--front {
  left: 0;
  top: 0;
  z-index: 1;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

.s-cta__doc--back {
  left: 4.13%;                      /* 14.19 / 343.37 */
  top: 8.57%;                       /* 17.39 / 203 */
}

/* --- 本文側 --------------------------------------------------------- */
.s-cta__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 見出し SP: (59,245) 270x68 センター */
.s-cta__title {
  margin-top: 18px;
  color: var(--c-primary);
  font-size: 30px;
  font-weight: 700;
  line-height: 34px;                /* Figma: 2行で68px */
  text-align: center;
}

/* 白カード SP: (25,327) 幅340 / padding 10px 17px / radius 6 */
.s-cta__card {
  width: 340px;
  max-width: 100%;
  margin-top: 14px;
  padding: 10px 17px;
  background: var(--c-white);
  border-radius: 6px;
}

.s-cta__list {
  display: flex;
  flex-direction: column;
}

.s-cta__list li {
  position: relative;
  padding-left: 27px;
  color: var(--c-text);
  font-size: 18px;
  font-weight: 500;
  line-height: 31px;                /* Figma: 3行で93px */
}

.s-cta__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  background: url("./img/icon-check.svg") no-repeat center / contain;
}

/* 注記 SP: (154,440) 210x24 */
.s-cta__note {
  width: 340px;
  max-width: 100%;
  margin-top: 0;                    /* Figma: 白カードの下端 = 注記の上端 */
  padding-right: 0;
  color: var(--c-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-align: right;
}

/* ボタン SP: (27,474) 338x50 */
.s-cta__btn {
  width: 338px;
  max-width: 100%;
  margin-top: 10px;
}

/* =====================================================================
 * PC (>= 1024px)  ※Figma 1280基準
 *
 * 2カラム（資料画像442 + gap35 + 本文340 = 817px）は 768px では収まらず
 * 横スクロールが発生するため、1024px未満はSPと同じ縦積みにする。design.md §7
 * ===================================================================== */
@media (min-width: 1024px) {
  .s-cta__inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 35px;                      /* 画像右端672 → 見出し左707 */
    padding: 42px 24px;
    min-height: 350px;
  }

  /* グループ (230,42) 442x261.31 */
  .s-cta__docs {
    flex-shrink: 0;
    width: 442px;
    aspect-ratio: 442 / 261.31;
    margin: 0;
  }

  .s-cta__doc { width: 95.83%; }
  .s-cta__doc--back { left: 4.13%; top: 8.57%; }

  .s-cta__body {
    align-items: flex-start;
    width: 340px;
    flex-shrink: 0;
  }

  /* 見出しは左揃え。42 → 34（inner padding 42 に対し -8） */
  .s-cta__title {
    margin-top: -8px;
    text-align: left;
  }

  /* 34+68=102 → 114 */
  .s-cta__card { margin-top: 12px; }

  /* Figma: 白カードの下端(227) = 注記の上端 */
  .s-cta__note { margin-top: 0; }

  /* 227+24=251 → 257 */
  .s-cta__btn { margin-top: 6px; }
}

/* ===== 00-header.css ===== */
/*
 * 00-header
 *
 * Figma実測
 *   PC (1280x80): 白背景 / shadow 0 3px 4px rgba(0,0,0,.15)
 *                 ロゴ 165x21.67 @ x=150,y=29.39  ／ 右端のボタン右辺 x=1130
 *                 → 左右インセットが 150px で対称。内側の幅は 980px
 *                 ボタン 184x24、間隔 8px
 *   SP  (390x52): ロゴ 165x21.67 @ x=112（= (390-165)/2 なので中央揃え）
 *                 Figmaにはハンバーガーがあるが不採用（design.md §7）
 */

.s-header {
  position: relative;
  z-index: 10;
  background: var(--c-white);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
}

.s-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;   /* SP: ロゴのみ・中央 */
  height: 52px;
  padding-inline: var(--pad-inline-sp);
}

.s-header__logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.s-header__logo img {
  width: 165px;
  height: auto;
}

.s-header__nav {
  gap: 8px;                  /* Figma: 946 - (754+184) = 8 */
  align-items: center;
}

@media (min-width: 768px) {
  .s-header__inner {
    justify-content: space-between;
    height: 80px;
    /*
     * Figma 1280px時: ロゴ左端 x=150 / ボタン右端 x=1130 → コンテンツ幅 980px。
     * padding 24px を足した 1028px を max-width にすることで、
     * 1280px では正確に 150〜1130 に収まり、狭い幅では 24px の余白を保ったまま縮む。
     */
    max-width: calc(980px + 24px * 2);
    margin-inline: auto;
    padding-inline: 24px;
  }
}

/* ===== 00-placeholder.css ===== */
/* 未実装セクションの仮スタイル。各セクション実装時に .is-placeholder は外す */
.is-placeholder {
  padding: 40px 0;
  background: repeating-linear-gradient(45deg, #f6f6f6, #f6f6f6 12px, #efefef 12px, #efefef 24px);
  border-block: 1px dashed #ccc;
  color: #888;
  font-size: 13px;
}

/* ===== 01-fv.css ===== */
/*
 * 01-fv  ファーストビュー（導入企業ロゴ帯を内包）
 *
 * Figma実測
 *   PC 1280x697 / SP 390x762、背景 #E8F3F7、フレームはクリップあり
 *   PC: 見出し2行（査定アポ数を158%へ増加させる が1本の白帯 805px）
 *   SP: 見出し3行（…158%へ / 増加させる で白帯が分かれる）
 *   PC: ボタン横並び(197/332) ・ ロゴ帯は横3列(890x124)
 *   SP: ボタン縦積み(332) ・ ロゴ帯は縦3段(353x222)、リード文に白3px縁取り（モックに重なるため）
 *   ボタン色は #FF2185（ヘッダーの紫グラデとは別）
 *
 * 帯・バッジ・ボタンは Figma の実測高さを inline-flex + height で固定する。
 * 行の高さをフォント任せにすると 158(95px) が行送りを押し広げて白帯が段差になるため。
 */

.s-fv {
  position: relative;
  overflow: hidden;                 /* Figmaのフレームクリップ相当 */
  background: #e8f3f7;
}

.s-fv__stage {
  position: relative;
  max-width: var(--w-container);    /* 1280 */
  margin-inline: auto;
}

/* --- 背景装飾 ------------------------------------------------------- */
.s-fv__blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* SP: blob1 (159,-46) 231.44x232.62 / blob2 (-76,28) 316x301  ※390基準 */
.s-fv__blob--1 { left: 40.77%;  top: -46px; width: 59.3%; }
.s-fv__blob--2 { left: -19.49%; top: 28px;  width: 81.0%; }

/* --- モック --------------------------------------------------------- */
/* SP: (144,9) 362x287 ※390基準 */
.s-fv__mock {
  position: absolute;
  z-index: 1;
  left: 36.92%;
  top: 9px;
  width: 92.82%;
  height: auto;
}

/* --- コンテンツ ----------------------------------------------------- */
.s-fv__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 33px 17px 32px;
}

/* バッジ「不動産売買仲介専用」 SP 175x27 */
.s-fv__badge {
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding-inline: 4px;
  background: linear-gradient(90deg, #9b8dff 0%, #e5a9ff 100%);
  color: var(--c-white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* 見出し */
.s-fv__title {
  margin-top: 19px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: 30px;
  font-weight: 700;
}

.s-fv__line-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

/* 白帯。SP 42px高 / PC 67px高。PCでは2つ目と3つ目が隣接して1本の帯になる */
.s-fv__line {
  display: inline-flex;
  align-items: center;
  /* ⚠️ em指定のままだと可変フォントサイズと掛けたとき端数になり、セクション高が
     小数になって以降のセクションが1pxずれる（harness.md）。round()で整数pxに固定する */
  height: round(1.4em, 1px);        /* SP: 30px x 1.4 = 42（Figma実測） */
  padding-inline: 7px;
  background: var(--c-white);
  line-height: 1;
}

/* 「158」「170」= Josefin Sans。白の縁取りは stroke を塗りの背面に回す */
.s-fv__num {
  color: var(--c-accent);
  font-family: 'Josefin Sans', var(--ff-base);
  font-weight: 600;
  font-style: normal;
  font-size: 1.867em;               /* SP: 30px x 1.867 = 56（Figma実測） */
  line-height: 1;
  -webkit-text-stroke: 6px var(--c-white);
  paint-order: stroke fill;
}

/* リード文（SPはモックに重なるので白の縁取りを入れる） */
.s-fv__lead {
  margin-top: 8px;
  /* Figma SP(390) は14px。375px では2行に収まらず「す。」が孤立するため、
     390px未満だけ微縮小する（390px以上は14pxで固定）。design.md §7 */
  font-size: clamp(13px, calc(14px - (390px - 100vw) * 0.05), 14px);
  font-weight: 700;
  line-height: 25px;   /* 倍率だと375pxで 13.25x1.75=23.1875 の端数になる */
  letter-spacing: 0.1em;
  -webkit-text-stroke: 3px var(--c-white);
  paint-order: stroke fill;
}

/* 導入社数 170社突破。行の高さは Figma の実測（170のテキストボックス）で固定 */
.s-fv__count {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 74px;
  margin-top: 0;
}

.s-fv__count-label {
  display: inline-flex;
  align-items: center;
  height: 23.3px;
  padding-inline: 11px;
  background: var(--c-text);
  color: var(--c-white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
}

.s-fv__count-num {
  display: flex;
  align-items: center;
  gap: 4px;
}

.s-fv__laurel { width: 18px; height: auto; }

.s-fv__num--count {
  font-size: 54px;
  -webkit-text-stroke: 0;
}

.s-fv__count-unit {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* CTAボタン */
.s-fv__actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  margin-top: 8px;
}

.s-fv__actions .c-btn {
  align-self: center;
  width: 100%;
  max-width: 332px;                 /* Figma SP: 332px 中央 */
}

/*
 * 導入企業ロゴ帯 SP 353x316（2列×4段・8社）
 * Figma実測: title y15/h25 → grid上端45（行中心 74/132/190/248・行高58）→ 下余白39
 * 列は等幅2列でFigmaの列中心（90 / 266）とほぼ一致する
 */
.s-fv__logos {
  width: 100%;
  margin-top: 32px;
  padding: 15px 0 9px;
  background: var(--c-white);
  border-radius: 6px;
}

.s-fv__logos-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  text-align: center;
}

.s-fv__logos-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 58px;
  align-items: center;
  column-gap: 8px;
  margin-top: 5px;
}

/*
 * li はトラック幅いっぱいに置き、中で画像を中央寄せする。
 * ⚠️ justify-items:center で li を内容幅にすると、画像の固定幅がトラック幅を超えたときに
 *    隣の列へはみ出して重なる（768〜900pxで Memory House と大英産業が重なった）。
 *    li を min-width:0 でトラックに従わせ、画像は max-width:100% で頭打ちにする。
 */
.s-fv__logos-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* ロゴは縦横比を保つ（幅だけ指定・高さauto）。数値はFigma実測の表示幅 */
.s-fv__logos-list img {
  height: auto;
  max-width: 100%;
}
.s-fv__logos-list li:nth-child(1) img { width: 162px; }  /* とよしき不動産 */
.s-fv__logos-list li:nth-child(2) img { width: 153px; }  /* GOOD TOMORROW */
.s-fv__logos-list li:nth-child(3) img { width: 155px; }  /* メモリーハウス */
.s-fv__logos-list li:nth-child(4) img { width: 153px; }  /* 大英産業 */
.s-fv__logos-list li:nth-child(5) img { width: 152px; }  /* KATSUMI */
.s-fv__logos-list li:nth-child(6) img { width: 148px; }  /* 国分ハウジング */
.s-fv__logos-list li:nth-child(7) img { width: 153px; }  /* Kinokuni */
.s-fv__logos-list li:nth-child(8) img { width: 156px; }  /* LOGOS HOME */

/* 「※一部抜粋」 右下。Figma: 右端から14px / SP grid下端+5 / PC grid下端+4 */
.s-fv__logos-note {
  margin-top: 5px;
  padding-right: 14px;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
  text-align: right;
}


/* =====================================================================
 * PC (>= 768px)  ※Figma 1280基準
 * ===================================================================== */
@media (min-width: 768px) {
  .s-fv__stage { min-height: 697px; }

  /* blob1 (471,-35) 421x423.15 / blob2 (-43,2) 672x640 */
  .s-fv__blob--1 { left: 36.80%; top: -35px; width: 32.89%; }
  .s-fv__blob--2 { left: -3.36%; top: 2px;   width: 52.50%; }

  /* モック (684,14) 763x605 */
  .s-fv__mock { left: 53.44%; top: 14px; width: 59.61%; }

  /* コンテンツは 150〜1130（内側980px）。ヘッダーと同じ基準 */
  .s-fv__inner {
    max-width: calc(980px + 24px * 2);
    margin-inline: auto;
    padding: 63px 24px 10px;
  }

  /* バッジ 314x42（テキスト306 + padding4） */
  .s-fv__badge {
    height: 42px;
    font-size: 34px;
  }

  /* 見出し: line1 y130 / line2帯 y219 → 間隔22 */
  /*
   * Figma 1280 では 50px。768px では「査定アポ数を158%へ増加させる」が
   * 1行に収まらず折り返すため、768→42px / 1280→50px で線形に可変にする。
   * 白帯の高さと 158 は em 基準なので追従する。（design.md §7 に記録）
   */
  .s-fv__title {
    margin-top: 25px;
    gap: 22px;
    font-size: clamp(42px, calc(42px + (100vw - 768px) * 0.015625), 50px);
  }

  /* PCでは2行目と3行目を横に並べて1本の白帯にする。
     連結部の padding を落として文字送りが空かないようにする */
  .s-fv__line-group { flex-direction: row; gap: 0; }
  .s-fv__line-group .s-fv__line:first-child { padding-right: 0; }
  .s-fv__line-group .s-fv__line:last-child  { padding-left: 0; }

  .s-fv__line {
    height: round(1.34em, 1px);     /* PC: 50px x 1.34 = 67（Figma実測）。768pxでは42x1.34=56.28→56 */
    padding-inline: 6px;
  }

  .s-fv__num { font-size: 1.9em; }   /* PC: 50px x 1.9 = 95（Figma実測） */

  .s-fv__lead {
    margin-top: 14px;               /* 帯下端286 → lead 300 */
    font-size: 22px;
    line-height: 1.75;              /* PCは22px固定なので端数にならない（2行で77px） */
    -webkit-text-stroke: 0;         /* PCはモックに重ならないので縁取り不要 */
  }

  /* 帯下端377 → count行 385 */
  .s-fv__count {
    gap: 12px;
    margin-top: 8px;
    height: 87px;
  }

  .s-fv__actions { margin-top: 21px; }

  .s-fv__count-label {
    height: 40px;
    padding-inline: 17px;
    font-size: 24px;
  }

  .s-fv__count-num { gap: 6px; }
  .s-fv__laurel { width: 25.3px; }
  .s-fv__num--count { font-size: 90px; }
  .s-fv__count-unit { font-size: 24px; }

  /* ボタンは横並び・実寸幅。count下端472 → ボタン493 */
  .s-fv__actions {
    flex-direction: row;
    gap: 11px;
    width: auto;
    margin-top: 21px;
  }

  .s-fv__actions .c-btn { align-self: auto; width: auto; max-width: none; }
  .s-fv__actions .c-btn:nth-child(1) { width: 197px; }
  .s-fv__actions .c-btn:nth-child(2) { width: 332px; }

  /*
   * ロゴ帯 980x207（4列×2段・8社＋※一部抜粋）。ボタン下端543 → ロゴ帯573、下端780
   * Figma実測: title y11/h25 → grid上端36（行中心 68.5/133.5・行高65）→ 下余白15
   */
  .s-fv__logos {
    width: 980px;
    max-width: 100%;
    margin-top: 30px;
    margin-inline: auto;
    padding: 11px 0 12px;
  }

  .s-fv__logos-title { font-size: 18px; font-weight: 500; line-height: 25px; }

  .s-fv__logos-list {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 65px;
    column-gap: 8px;
    margin-top: 0;
  }

  .s-fv__logos-note { margin-top: 4px; }

  .s-fv__logos-list li:nth-child(1) img { width: 207px; }
  .s-fv__logos-list li:nth-child(2) img { width: 167px; }
  .s-fv__logos-list li:nth-child(3) img { width: 213px; }
  .s-fv__logos-list li:nth-child(4) img { width: 214px; }
  .s-fv__logos-list li:nth-child(5) img { width: 205px; }
  .s-fv__logos-list li:nth-child(6) img { width: 181px; }
  .s-fv__logos-list li:nth-child(7) img { width: 220px; }
  .s-fv__logos-list li:nth-child(8) img { width: 219px; }
}

/* ===== 02-service.css ===== */
/*
 * 02-service  サービス定義 ＋ 実績3社
 *
 * Figma実測
 *   PC 1280x624 / SP 390x1323、背景 #E8F3F7
 *   PC: 見出し3行 / モックは右に絶対配置 / カード3枚を横並び(310 + gap25 = 内側980)
 *   SP: 見出し4行 / モックは通常フロー / カード3枚を縦積み(gap 11)
 *   カード 310x170(PC) / 310x129(SP)、白・2px #2FAEE5・角丸10
 */

.s-service {
  position: relative;
  overflow: hidden;
  background: #e8f3f7;
}

.s-service__stage {
  position: relative;
  max-width: var(--w-container);
  margin-inline: auto;
}

/* 背景装飾  SP: (87.69,7) 330.31x332 */
.s-service__blob {
  position: absolute;
  z-index: 0;
  left: 22.48%;
  top: 7px;
  width: 84.7%;
  pointer-events: none;
}

.s-service__inner {
  position: relative;
  z-index: 1;
  padding: 36px 19px 36px;
}

/* --- 見出し --------------------------------------------------------- */
.s-service__title {
  color: var(--c-text);
  font-weight: 700;
}

.s-service__title-row { display: block; }

/* 1行目: ALL GRITロゴ ＋ は */
.s-service__title-row--1 {
  height: 34px;
  font-size: 24px;
  line-height: 34px;
}

.s-service__logo {
  display: inline-block;
  width: 222px;
  height: auto;
  vertical-align: -4px;
}

/* 2行目（SPは2行） */
.s-service__title-row--2 {
  height: 62px;
  margin-top: 5px;
  font-size: 24px;
  line-height: 31px;
}

/* 3行目: LINEバッジ ＋ 自動追客エージェントです（SPは2行） */
.s-service__title-row--3 {
  height: 90px;
  margin-top: 11px;
  font-size: 34px;
  line-height: 45px;
  letter-spacing: -0.02em;
}

/* LINEバッジ SP 103x40 / PC 113x42 */
.s-service__badge-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 103px;
  height: 40px;
  margin-right: 3px;
  /* ⚠️ align-items:center は「行ボックス」を中央に置くだけで、グリフのインクは
     フォントメトリクスの非対称ぶん下にずれる（実測 PC +2.25px / SP +2.00px）。
     padding-bottom でコンテンツ領域を上げ、インクを帯の中心に合わせる */
  padding-bottom: 4px;
  background: #49d449;
  color: var(--c-white);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  /* padding-bottom でベースラインが2px上がるぶん、帯が2px下がるのを相殺（元位置を維持）*/
  vertical-align: -4px;
}

/* --- リード文 ------------------------------------------------------- */
.s-service__lead {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
}

/* --- ビジュアル（スマホモック＋吹き出し） --------------------------- */
/*
 * Figmaのグループは 317.55x283 だが、書き出しPNGは 602x566（=301x283 相当）で
 * 横が16px狭い。幅を合わせると5.5%拡大して歪むため、高さ283pxを基準に合わせる。
 */
.s-service__visual {
  display: block;
  width: auto;
  max-width: 100%;
  height: 283px;
  margin: 17px auto 0;            /* SPは中央揃え（Figmaは x=23 の左寄せだがユーザー指定で中央） */
}

/* --- 実績見出し ----------------------------------------------------- */
.s-service__result {
  /* Figma SP は x=10 幅366 とコンテンツ幅(352)より広い。
     負のマージンで広げないと「導入企業様では訪問査定アポ数が」が3行に折り返す */
  margin-top: 28px;
  margin-inline: -9px;
  /* 375px では 24px だと3行に折り返して「が」が孤立するため、390px未満だけ微縮小 */
  font-size: clamp(22px, calc(24px - (390px - 100vw) * 0.13), 24px);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.s-service__result-num {
  color: var(--c-accent);
  font-style: normal;
}

/* --- 実績カード ----------------------------------------------------- */
.s-service__cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
}

.s-service__card {
  overflow: hidden;
  width: 310px;
  max-width: 100%;
  height: 129px;
  background: var(--c-white);
  border: 2px solid var(--c-sky);
  border-radius: 10px;
  text-align: center;
}

.s-service__card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 31px;
  margin: -2px -2px 0;            /* 見出し帯はカードの枠線いっぱいまで */
  background: var(--c-sky);
  color: var(--c-white);
  font-size: 18px;
  font-weight: 700;
}

.s-service__card-label {
  height: 21px;
  margin-top: 3px;
  color: #7e7e7e;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.s-service__card-figures {
  display: flex;
  /* Figmaは赤と黒の数字がベースライン揃え（中央揃えだと赤が約7px下がる） */
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  /* Figmaはラベルと数字のテキストボックスが重なっている（灰の下端→赤の上端が7px）。
     フローでは重ねられないので負のマージンで詰める */
  height: 47px;
  margin-top: -5px;
}

.s-service__card-before {
  color: #222222;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.s-service__card-after {
  color: var(--c-accent);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.s-service__card-unit {
  font-size: 18px;
  font-weight: 500;
}

.s-service__card-after .s-service__card-unit { font-size: 24px; font-weight: 700; }

.s-service__card-arrow {
  flex-shrink: 0;
  align-self: center;               /* ベースライン揃えの行内で矢印だけ中央に */
  width: 20px;
  height: auto;
}

.s-service__card-up {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 23px;
  margin-inline: auto;
  background: var(--c-accent);
  color: var(--c-white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* =====================================================================
 * PC (>= 768px)  ※Figma 1280基準
 * ===================================================================== */
@media (min-width: 768px) {
  .s-service__stage { min-height: 624px; }

  /* blob (894,2) 421x423.15 */
  .s-service__blob { left: 69.84%; top: 2px; width: 32.89%; }

  /* 内側980px（ヘッダー・FVと同じ基準。カード 310x3 + gap25x2 = 980） */
  .s-service__inner {
    max-width: calc(980px + 24px * 2);
    margin-inline: auto;
    padding: 43px 24px 43px;
  }

  .s-service__title-row--1 { height: 32px; font-size: 30px; line-height: 32px; }

  /* 43 → 87 */
  .s-service__title-row--2 {
    height: 33px;
    margin-top: 12px;
    font-size: 30px;
    line-height: 33px;
  }

  /* 87+33 → 130 */
  .s-service__title-row--3 {
    height: 46px;
    margin-top: 10px;
    font-size: 40px;
    line-height: 46px;
    letter-spacing: 0;
  }

  .s-service__badge-line {
    width: 113px;
    height: 42px;
    margin-right: 2px;
    font-size: 40px;
    /* 元は-7px。padding-bottom の相殺(+2)に加え、帯を2px持ち上げるぶん(+2) */
    vertical-align: -3px;
  }

  /* 130+46 → 190 */
  .s-service__lead { margin-top: 14px; }

  /* モックは右に絶対配置 (758,34) 317.55x283 */
  /*
   * 768〜1023px では「左にテキスト・右にモック」の2カラムが成立しない
   * （40pxの見出し約600px + モック301px > コンテンツ幅）。
   * この帯だけ本文の下にフロー配置して重なりを避ける。design.md §7
   */
  .s-service__visual { margin: 20px auto 0; }

  /* リード下端314 → 355 */
  .s-service__result {
    margin-top: 41px;
    margin-inline: 0;
    font-size: 30px;
    line-height: 36px;
  }

  /* 355+36 → 411 */
  .s-service__cards {
    flex-direction: row;
    justify-content: space-between;
    gap: 25px;
    margin-top: 20px;
  }

  .s-service__card { height: 170px; }

  .s-service__card-title {
    height: 46px;
    font-size: 24px;
  }

  .s-service__card-label {
    height: 24px;                   /* Figma実測の間隔(11px)に合わせて詰める */
    margin-top: 5px;
    font-size: 18px;
    line-height: 24px;
  }

  .s-service__card-figures { height: 47px; margin-top: 0; }

  .s-service__card-up {
    height: 27px;
    font-size: 24px;
  }
}

/* =====================================================================
 * 1024px 以上: Figma どおり モックを右に絶対配置（(758,34) = inner右端から78px）
 * ===================================================================== */
@media (min-width: 1024px) {
  .s-service__visual {
    position: absolute;
    right: 78px;
    top: 34px;
    height: 283px;
    margin: 0;
  }
}

/* ===== 03-voice.css ===== */
/*
 * 03-voice  問題提起 ＋ お客様の声
 *
 * Figma実測
 *   PC 1280x809 / SP 390x1446、背景 #E8F3F7
 *   見出しは3段: 通常40px → アクセント46px(Black900) → 白抜き57px(Black900)＋#3C00FF帯
 *   PC: 声カード 2列×2行（左列はアバター左、右列はアバター右）
 *   SP: 声カード 縦4段（アバター左・右を交互）
 *   吹き出し #5DE61D / radius12 / padding16、アバター 110x110 円 #D4D4FF
 */

.s-voice {
  position: relative;
  overflow: hidden;
  background: #e8f3f7;
}

.s-voice__stage {
  position: relative;
  max-width: var(--w-container);
  margin-inline: auto;
}

/* 背景装飾  SP: (-179,4) と (118,621) */
.s-voice__blob {
  position: absolute;
  z-index: 0;
  width: 107.9%;
  pointer-events: none;
}

.s-voice__blob--1 { left: -45.9%; top: 4px; }
.s-voice__blob--2 { left: 30.3%;  top: 621px; }

.s-voice__inner {
  position: relative;
  z-index: 1;
  padding: 58px 16px 66px;
}

/* --- 見出し --------------------------------------------------------- */
.s-voice__title {
  color: var(--c-text);
  font-weight: 900;
}

.s-voice__title-1,
.s-voice__title-2,
.s-voice__title-3 { display: block; }

/* SP: 32px センター。Figmaのテキストボックスは幅402(x=-9)でセクションから
   はみ出すが、中央揃えなので中央位置だけ合っていればよい（3pxの差） */
.s-voice__title-1 {
  height: 59px;
  font-size: 32px;
  line-height: 59px;
  text-align: center;
}

/*
 * SP: 46px 2行。375pxでは46pxだと「アポが取れない”」が3行に折り返して
 * 下の帯に重なるため、390px未満だけ縮小する。高さと行送りは em 基準にして追従させる。
 */
.s-voice__title-2 {
  margin-top: 0;
  /* 「アポが取れない”」が約346pxあり、コンテンツ幅350pxでは折り返しが不安定。
     中央揃えなので左右に8pxずつ広げて余裕を持たせる（見た目は変わらない） */
  margin-inline: -8px;
  color: var(--c-accent);
  text-align: center;               /* SPは中央揃え（ユーザー指定） */
  font-size: clamp(41px, calc(46px - (390px - 100vw) * 0.33), 46px);
  line-height: 1.152em;             /* 46px時 53px */
  height: 2.304em;                  /* 46px時 106px */
}

/*
 * 3段目「と思い込んで / いませんか？」
 * SPは2本の帯・PCは1本の帯。帯を高さ固定の flex アイテムにして、
 * PCでは横に隣接させることで隙間なく1本に見せる（inline背景だと
 * フォントのascent/descentで高さが決まり、Figmaの69pxに合わせられない）。
 */
.s-voice__title-3 {
  display: flex;
  flex-direction: column;
  align-items: center;              /* SPは中央揃え（ユーザー指定） */
  gap: 14px;
  margin-top: 24px;
  /* 375pxでは54pxだと帯がコンテンツ幅を超えるため 390px未満だけ縮小 */
  font-size: clamp(48px, calc(54px - (390px - 100vw) * 0.4), 54px);
  color: var(--c-white);
}

.s-voice__title-bar {
  display: flex;
  align-items: center;
  height: 1.037em;                  /* 54px時 56px */
  padding-inline: 6px;
  background: #3c00ff;
  line-height: 1;
  white-space: nowrap;
}

/* --- リード文 ------------------------------------------------------- */
.s-voice__lead {
  margin-top: 21px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.66;
}

.s-voice__lead em {
  color: var(--c-accent);
  font-style: normal;
}

/* --- お客様の声 ----------------------------------------------------- */
.s-voice__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  /* Figmaはリード下端711 → カード869（gap158）と大きく空けているが、
     間延びして見えるためユーザー指定で詰めた。design.md §7 */
  margin-top: 40px;
}

.s-voice__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 110px;
  align-self: flex-start;
  margin-left: 0;
}

/* アバターが右に来るパターン（Figmaは左右交互） */
.s-voice__item--reverse {
  flex-direction: row-reverse;
  gap: 11px;
  /* Figma SP は x=49（コンテンツ右端をはみ出す）。実装は右寄せにして
     吹き出し幅210pxを確保しつつビューポート内に収める。design.md §7 */
  align-self: flex-end;
  margin-left: 0;
}



.s-voice__avatar {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
}

.s-voice__bubble {
  /* Figmaは210px(テキスト178)だが、SPでは吹き出しを広く取りたいというユーザー指定で
     セクションpaddingとカードのオフセットを削って234pxまで拡張。design.md §7 */
  flex: 0 1 234px;
  padding: 16px;
  background: #5de61d;
  border-radius: 12px;
  color: var(--c-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.42;
}

/* =====================================================================
 * PC (>= 768px)  ※Figma 1280基準
 * ===================================================================== */
@media (min-width: 768px) {
  .s-voice__stage { min-height: 809px; }

  /* blob (-128,19) / (992,361) 421x423.15 */
  .s-voice__blob { width: 32.89%; }
  .s-voice__blob--1 { left: -10%;   top: 19px; }
  .s-voice__blob--2 { left: 77.5%;  top: 361px; }

  /* テキストブロックは700px幅で中央（Figma x=291〜991） */
  .s-voice__inner {
    max-width: calc(700px + 24px * 2);
    margin-inline: auto;
    padding: 31px 24px 66px;
  }

  .s-voice__title-1 {
    height: 59px;
    font-size: 40px;
    font-weight: 700;
    line-height: 59px;
    text-align: left;
  }

  /* 31+59=90 → 95 */
  .s-voice__title-2 {
    height: 51px;
    margin-top: 5px;
    margin-inline: 0;
    font-size: 46px;
    line-height: 51px;
    text-align: left;
  }

  /* 95+51=146 → 162。PCは2つの帯を横に並べて1本にする */
  .s-voice__title-3 {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin-top: 16px;
    font-size: 57px;
  }

  .s-voice__title-bar { height: 69px; padding-inline: 0; }
  .s-voice__title-bar:first-child { padding-left: 12px; }
  .s-voice__title-bar:last-child  { padding-right: 12px; }

  /* 162+69=231 → 253 */
  .s-voice__lead {
    margin-top: 22px;
    font-size: 22px;
  }

  /* 253+222=475 → 503。左カード334 + gap37 + 右カード329 = 700 */
  .s-voice__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 19px 0;
    margin-top: 28px;
  }

  .s-voice__inner { padding-inline: 24px; }
  .s-voice__item { width: 334px; align-self: auto; margin-left: 0; }
  .s-voice__item--reverse { width: 329px; align-self: auto; margin-left: 0; }
  .s-voice__bubble { flex: 0 0 210px; }
}

/* ===== 04-reason.css ===== */
/*
 * s-reason — 「訪問査定アポが獲得できる仕組み1〜4」共通のガワ
 * 04〜07 で共有し、各セクションは背景色などを上書きする
 *
 * Figma実測（04 / PC 1280x649 / SP 390x889）
 *   Figmaはオートレイアウト: PC padding 40px 146px / gap 30、SP padding 30px 20px / gap 20
 *   構成: ラベル帯 → 見出し → リード文 → 図版（image:...）
 */

.s-reason {
  background: var(--c-white);
}

.s-reason__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(980px + 20px * 2);
  margin-inline: auto;
  /* 下余白はFigmaのオートレイアウト宣言どおり30px。
     ただしFigmaのフレーム高さは内容合計より十数px大きく、その差が下に出るため
     セクション側で padding-bottom を上書きする（.s-reason1 / .s-reason2 …） */
  padding: 30px 20px;
}

/*
 * 見出し。Figmaはテキストボックスの高さが固定で、セクションごとに
 * 「行数 × 行送り」が違う（04PC=2行90px→45 / 05PC=1行60px→60）。
 * 共通は SP 30px / PC 60px とし、合わないセクションだけ上書きする。
 */
.s-reason__title {
  margin-top: 20px;
  color: var(--c-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}

.s-reason__accent-line {
  color: var(--c-line);
  font-style: normal;
}

.s-reason__accent-primary {
  color: var(--c-primary);
  font-style: normal;
}

/*
 * リード文。line-height は必ず整数pxにする。
 * 1.7 のままだと 18x1.7=30.6 / 14x1.7=23.8 と端数になり、セクションの高さが
 * 648.188px のような小数になる。すると後続セクションの位置にも端数が伝播し、
 * 要素スクショの切り出しが1px揺れて回帰テストが不安定になる。
 * Figmaのボックス高さ（SP 95/4行≒24 / PC 62/2行=31）とも整合する。
 */
.s-reason__lead {
  width: 100%;
  margin-top: 20px;
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

/* 図版 */
.s-reason__figure {
  display: block;
  width: 100%;
  margin-top: 20px;
}

.s-reason__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
}

@media (min-width: 768px) {
  .s-reason__inner {
    max-width: calc(980px + 24px * 2);
    padding: 40px 24px;
  }

  .s-reason__title {
    margin-top: 30px;
    font-size: 40px;
    line-height: 60px;              /* heading/xl の 1.5em */
  }

  .s-reason__lead {
    margin-top: 30px;
    font-size: 18px;
    line-height: 31px;
  }

  .s-reason__figure { margin-top: 30px; }
}

/* ---------------------------------------------------------------------
 * 図版の横スクロール（SPのみ）
 * Figma SP: window:step 350x344 の中に image:stepSP 911x259 と
 * silidebar 323x19（トラック #EDEDED / つまみ 98x12 #B5B5B5 radius19）
 * iOS Safari はネイティブのスクロールバーが常時表示されないため、
 * スクロール位置に同期する独自のバーを JS で動かす。
 * ------------------------------------------------------------------- */
.s-reason__window {
  width: 100%;
  margin-top: 20px;
  padding: 33px 0 21px;             /* Figma SP: 図33..292 / バー304..323 / 下21 */
  background: #f6f6f6;
  border-radius: 28px;
}

.s-reason__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: 37px;
  scrollbar-width: none;            /* 独自バーを出すのでネイティブは隠す */
  -webkit-overflow-scrolling: touch;
}

.s-reason__scroller::-webkit-scrollbar { display: none; }

.s-reason__scroll-img {
  display: block;
  width: 911px;
  max-width: none;
  height: auto;
}

.s-reason__scrollbar {
  position: relative;
  width: 323px;
  max-width: calc(100% - 22px);
  height: 19px;
  margin: 12px auto 0;
  padding: 2px;
  background: #ededed;
}

.s-reason__scroll-thumb {
  position: absolute;
  left: 2px;
  top: 2px;
  height: 12px;
  min-width: 24px;
  background: #b5b5b5;
  border-radius: 19px;
}

@media (min-width: 768px) {
  .s-reason__window { margin-top: 30px; }
}

/*
 * 図(911px)がコンテナに収まるのは 1024px 以上（コンテナ976px）だけ。
 * 768〜1023px ではまだ収まらないので、スクロールとバーは維持する。
 */
@media (min-width: 1024px) {
  /* Figma PC: 図33..292 / 下29 */
  .s-reason__window { padding: 33px 0 29px; }
  .s-reason__scroller { overflow-x: visible; padding-inline: 0; }
  .s-reason__scroll-img { margin-inline: auto; }
  .s-reason__scrollbar { display: none; }
}

/* ---------------------------------------------------------------------
 * セクションごとの上書き
 * ------------------------------------------------------------------- */

/*
 * SPの下余白: Figmaのフレーム高さが内容合計より十数px大きく、その差が下に出る。
 * セクションごとに実測して合わせる（PCは宣言どおり40pxで一致する）。
 */
.s-reason1 .s-reason__inner { padding-bottom: 46px; }
.s-reason2 .s-reason__inner { padding-bottom: 30px; }  /* 縦長図に変更後はFigma通り30px */
.s-reason3 .s-reason__inner { padding-bottom: 36px; }
.s-reason4 .s-reason__inner { padding-bottom: 33px; }
.s-roadmap .s-reason__inner { padding-bottom: 30px; }

@media (min-width: 768px) {
  .s-reason1 .s-reason__inner,
  .s-reason2 .s-reason__inner,
  .s-reason3 .s-reason__inner,
  .s-reason4 .s-reason__inner,
  .s-roadmap .s-reason__inner { padding-bottom: 40px; }

  /* 04: PC見出しは2行でボックス90px → 行送り45px */
  .s-reason1 .s-reason__title { line-height: 45px; }

}

/*
 * 06/07 のリード文は Figma のボックスが49px固定で、2行(62px)がはみ出す前提。
 * ただし 768〜1023px では3行(93px)になり、下の図版ボックスに14px 食い込んで
 * テキストが隠れる。固定するのは2行に収まる 1024px 以上だけにする。
 */
@media (min-width: 1024px) {
  .s-reason3 .s-reason__lead,
  .s-reason4 .s-reason__lead { height: 49px; }
}

/* 05: 背景が薄紫 */
.s-reason2 { background: #f0eaff; }

/*
 * 05の図版（2026-09-17 変更）
 * SP: 横スクロールをやめ、縦に積んだ図（Figma 350x795）を1枚で出す。
 *     画像自体に灰色の角丸背景が含まれるので、枠の背景・余白は消す。
 * PC: 従来どおり横長図（911x259）を枠の中央に置く。
 */
.s-reason2__window {
  container-type: inline-size;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* SPのみ: リード文が5行x24=120px（Figma枠は115px）なので、その差を図の上で吸収 */
@media (max-width: 767px) {
  .s-reason2__window { margin-top: 14px; }
}

.s-reason2__step {
  display: block;
  width: min(100cqw, 350px);
  /* ⚠️ 幅に合わせて縮むと高さが小数になり、以降のセクションが1pxずれる（harness.md）。
     縦横比 1590/700 = 159/70 で高さを計算し、round() で整数pxに丸める */
  height: round(calc(min(100cqw, 350px) * 159 / 70), 1px);
  object-fit: contain;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .s-reason2__window {
    padding: 33px 0 29px;
    background: #f6f6f6;
    border-radius: 28px;
  }

  .s-reason2__step {
    width: min(100cqw, 911px);
    height: round(calc(min(100cqw, 911px) * 259 / 911), 1px);
  }
}

/* ===== 07-reason4-operation.css ===== */
/*
 * 07-reason4-operation の図版部分（Figma `ope/set`）
 * ここは画像ではなくHTMLで組む（ユーザー指定 / design.md §8 #14）
 *
 * Figma実測
 *   PC ope/set 980x208: 左に「運用実績 / 170社以上」、右に白カード504x153
 *   SP ope/set 350x434: 縦積み（運用実績帯 → 170社以上 → 白カード304x259）
 *   白カードのヘッダーは AG_grade = linear-gradient(256deg, #82F7FF 0%, #7070FF 100%)
 */

.s-reason4 { background: #f0eaff; }

.s-ope {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 20px;
}

/* --- 運用実績 / 170社以上 ------------------------------------------- */
.s-ope__record {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.s-ope__record-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 290px;
  max-width: 100%;
  height: 39px;
  background: var(--c-gray);
  border-radius: 33px;
  color: var(--c-white);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
}

/*
 * 「170社以上」は 58/49/30px が混在する。line-height だけで高さを決めると、
 * サイズの違うインラインボックスがベースライン揃えで積み上がり行ボックスが
 * 87px→99px に膨らむ。そこで
 *   外側 = 高さ87px固定 + 縦中央（Figmaの textAlignVertical: CENTER 相当）
 *   内側 = ベースライン揃え
 * の2段構えにする。外側を baseline 揃えにすると上寄せになり15pxほど上にずれる。
 */
.s-ope__record-num {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 87px;
  margin-top: -11px;                /* Figma SP: 帯26..65 と数字54..141 が重なる */
  color: #7e7e7e;
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.s-ope__record-inner {
  display: flex;
  align-items: baseline;
}

.s-ope__record-num em {
  color: var(--c-accent);
  font-style: normal;
}

.s-ope__unit { font-size: 49px; }
.s-ope__more { font-size: 30px; }

/* --- 白カード ------------------------------------------------------- */
.s-ope__card {
  overflow: hidden;
  width: 304px;
  max-width: 100%;
  margin-top: 8px;
  background: var(--c-white);
  border-radius: 12px;
}

.s-ope__card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  background: linear-gradient(256deg, #82f7ff 0%, #7070ff 100%);
  color: var(--c-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
}

.s-ope__list {
  display: grid;
  gap: 0;
  padding: 6px 0 2px 44px;          /* Figma SP: head41 → テキスト47..257 → カード259 */
}

.s-ope__list li {
  position: relative;
  padding-left: 28px;
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  line-height: 35px;                /* Figma SP: テキスト6行で210px */
}

.s-ope__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 22px;
  height: 22px;
  background: url("./img/icon-check.svg") no-repeat center / contain;
}

/* =====================================================================
 * PC (>= 768px)
 * ===================================================================== */
/*
 * 横並び（左ブロック355 + gap20 + カード504 + 左右padding101 = 980px）が
 * 成立するのは 1024px 以上だけ。768〜1023px は縦積み（SPと同じ）にする。
 */
@media (min-width: 1024px) {
  /* Figma PC: 左ブロック48..403 / 白カード423..927 / 上29 下26 */
  .s-ope {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    padding: 29px 53px 26px 48px;
  }

  .s-ope__record-label {
    width: 355px;
    height: 44px;
  }

  .s-ope__record-num { margin-top: 2px; }

  .s-ope__card {
    flex: 0 1 504px;                /* 1024px時のコンテナ976pxでも収まるよう少し縮む */
    width: auto;
    margin-top: 0;
  }

  .s-ope__card-head {
    height: 39px;
    font-size: 18px;
    line-height: 1.7;
  }

  /*
   * PCは2列×3行。DOM順（SPの並び）のまま行優先で並べるとFigmaの配置になる。
   * Figma: チェックx30/288、テキストx53(214幅)/x319(156幅)
   * → 1列目 23+214=237 / 2列目 31+156=187 / 間隔 21
   */
  .s-ope__list {
    grid-template-columns: 237px 187px;
    column-gap: 21px;
    padding: 12px 0 18px 30px;      /* Figma PC: head39 → テキスト51..135 → カード153 */
  }

  .s-ope__list li {
    padding-left: 23px;
    line-height: 28px;              /* Figma PC: テキスト3行で84px */
    white-space: nowrap;
  }

  .s-ope__list li::before {
    top: 4px;
    width: 18px;
    height: 18px;
  }
}

/* ===== 08-price.css ===== */
/*
 * 08-price  料金体型
 *
 * Figma実測
 *   PC 1280x480 / SP 390x753、背景 CTA_グラデ = linear-gradient(90deg, #9B8DFF, #E5A9FF)
 *   PC: カード2枚を横並び（351x193）＋間に「＋」アイコン40x40
 *   SP: カード2枚を縦積み（350x201）＋間に「＋」
 *   カードヘッダーは AG_grade = linear-gradient(256deg, #82F7FF 0%, #7070FF 100%)
 */

.s-price {
  background: linear-gradient(90deg, #9b8dff 0%, #e5a9ff 100%);
}

.s-price__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(980px + 20px * 2);
  margin-inline: auto;
  /* SPの下余白: Figmaのフレーム高さ753pxは内容合計722pxより31px大きく、その差が下に出る */
  padding: 30px 20px 61px;
}

.s-price__eyebrow {
  height: 16px;
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
}

.s-price__title {
  margin-top: 2px;
  color: var(--c-white);
  font-size: 30px;
  font-weight: 700;
  line-height: 29px;
  text-align: center;
}

.s-price__lead {
  margin-top: 20px;
  color: var(--c-white);
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
  text-align: center;
}

/* --- カード --------------------------------------------------------- */
.s-price__cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: 20px;
}

.s-price__card {
  overflow: hidden;
  width: 100%;
  max-width: 350px;
  background: var(--c-white);
  border-radius: 28px;
}

.s-price__card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  background: linear-gradient(256deg, #82f7ff 0%, #7070ff 100%);
  color: var(--c-white);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.7;
}

.s-price__list {
  padding: 10px 0 21px 19px;        /* Figma SP: head46 → テキスト56..180 → カード201 */
}

.s-price__list li {
  position: relative;
  padding-left: 29px;
  color: #5c5c5c;
  font-size: 18px;
  font-weight: 500;
  line-height: 31px;
}

.s-price__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 22px;
  height: 22px;
  background: url("./img/icon-check.svg") no-repeat center / contain;
}

.s-price__plus {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.s-price__btn {
  width: 338px;
  max-width: 100%;
  margin-top: 20px;
}

/* =====================================================================
 * PC (>= 1024px)  ※カード351x2 + 「＋」+ 余白 が768pxに収まらないため
 * ===================================================================== */
@media (min-width: 1024px) {
  .s-price__inner {
    max-width: calc(980px + 24px * 2);
    padding: 34px 24px 58px;
  }

  .s-price__title {
    margin-top: -1px;
    line-height: 42px;
  }

  /* Figma: 料金体型 49..91 → リード107 */
  .s-price__lead {
    margin-top: 15px;
    font-size: 18px;
    font-weight: 500;
    line-height: 16px;
  }

  /* Figma: リード123 → カード146。カード351x193、間隔62（中央に「＋」40） */
  .s-price__cards {
    flex-direction: row;
    justify-content: center;
    gap: 22px;
    margin-top: 23px;
  }

  .s-price__card {
    width: 351px;
    max-width: none;
    border-radius: 12px;
  }

  .s-price__card-head {
    height: 39px;
  }

  /* Figma PC: head39 → テキスト53..170 → カード193 */
  .s-price__list {
    padding: 14px 0 23px 27px;
  }

  .s-price__list li {
    padding-left: 22px;
    line-height: 29px;
  }

  .s-price__list li::before {
    top: 5px;
    width: 18px;
    height: 18px;
  }

  /* Figma: カード339 → ボタン366 */
  .s-price__btn {
    width: 443px;
    height: 56px;
    margin-top: 29px;
  }
}

/* ===== 09-roadmap.css ===== */
/*
 * 09-roadmap  成果までのロードマップ
 * s-reason のガワを流用（ラベル帯の代わりにアイコン付き見出し）
 *
 * Figma実測
 *   PC 1280x528: 見出し497x65（アイコン33x37 + テキスト40px）/ リード980x22 / 図版980x301
 *   SP 390x778 : 見出し292x26（アイコン23x26 + テキスト24px）/ リード350x23 / 図版350x628
 */

.s-roadmap { background: var(--c-white); }

.s-roadmap__title {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  color: var(--c-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
}

.s-roadmap__icon {
  flex-shrink: 0;
  width: 23px;
  height: auto;
}

/* リード文はs-reasonの共通スタイルを使うが、Figmaのボックス高さに合わせる */
.s-roadmap__lead {
  height: 23px;
  line-height: 23px;
}

@media (min-width: 768px) {
  .s-roadmap__title {
    gap: 4px;
    height: 65px;
    font-size: 40px;
    line-height: 65px;
  }

  .s-roadmap__icon { width: 33px; }

  .s-roadmap__lead {
    height: 22px;
    line-height: 22px;
  }
}

/* ===== 10-features.css ===== */
/*
 * 10-features  機能紹介（イチオシ1件 ＋ 16機能）
 *
 * Figma実測
 *   PC 1281x1049 / SP 390x2759、背景 #F2F4F5
 *   PC: 大カード980x180（画像左・本文右）＋ 16枚を4列×4行（230幅 / 列間20 / 行間16）
 *   SP: すべて1列（350幅 / 間隔14）。カードの並び順はPC/SPで同じなので1つのDOMで両立する
 */

.s-feat {
  background: #f2f4f5;
}

.s-feat__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(980px + 20px * 2);
  margin-inline: auto;
  padding: 30px 20px 52px;          /* Figma SPのフレーム高さ2759pxに合わせる */
}

.s-feat__eyebrow {
  display: flex;
  align-items: center;
  height: 19px;                     /* Figma SP: グループ93x19 */
  line-height: 0;
}

.s-feat__eyebrow img {
  width: 93px;
  height: auto;
}

/*
 * ⚠️ display:flex にしてはいけない。
 * 中身が「テキスト + <em>ひとつ</em> + テキスト」なので、flexにすると
 * それぞれが独立したフレックスアイテムになり、幅が足りないと <em> が
 * 縦1文字ずつに潰れる。通常のブロック＋text-align:center で組む。
 */
.s-feat__title {
  height: 106px;
  margin-top: 14px;
  color: var(--c-text);
  font-size: 32px;
  font-weight: 700;
  line-height: 53px;
  text-align: center;
}

.s-feat__accent-primary,
.s-feat__accent-line {
  font-style: normal;
}

.s-feat__accent-primary { color: var(--c-primary); }
.s-feat__accent-line { color: var(--c-line); }

/* --- イチオシ（大カード） ------------------------------------------- */
.s-feat__big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin-top: 14px;
  padding: 24px 21px;
  background: var(--c-white);
  border-radius: 16px;
}

.s-feat__big-thumb {
  flex-shrink: 0;
  width: 213px;
  height: 142px;
}

.s-feat__big-thumb img,
.s-feat__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.s-feat__big-title {
  height: 52px;                     /* Figma SP: column_tittle 308x52 */
  color: var(--c-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

.s-feat__sub {
  font-weight: 400;
}

.s-feat__big-desc {
  width: 100%;
  color: var(--c-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
}

/* --- 機能カード ----------------------------------------------------- */
.s-feat__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
  margin-top: 14px;
}

.s-feat__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--c-white);
  border-radius: 12px;
}

.s-feat__card--img {
  gap: 13px;
  padding: 15px 14px;
}

.s-feat__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
}

/* SPはカードごとに高さ・画像枠が異なる（Figma実測）。
   height ではなく min-height にして、375px等でテキストが増えてもあふれないようにする */
.s-feat__grid > li:nth-child(1),
.s-feat__grid > li:nth-child(2) { min-height: 221px; }
.s-feat__grid > li:nth-child(3) { min-height: 258px; }
.s-feat__grid > li:nth-child(4) { min-height: 199px; }
.s-feat__grid > li:nth-child(2) .s-feat__thumb { height: 88px; }
.s-feat__grid > li:nth-child(3) .s-feat__thumb { height: 107px; }
.s-feat__grid > li:nth-child(4) .s-feat__thumb { height: 84px; }

/* SPのカード4だけ説明文が caption/md (12px)（Figma実測） */
.s-feat__grid > li:nth-child(4) .s-feat__card-desc { font-size: 12px; line-height: 16px; }

.s-feat__card:not(.s-feat__card--img) { min-height: 84px; }

.s-feat__card-title {
  color: #5c5c5c;
  font-size: 14px;
  font-weight: 500;
  line-height: 15px;
}

.s-feat__card--img .s-feat__card-title {
  font-size: 18px;
  line-height: 20px;
}

.s-feat__card-desc {
  color: #5c5c5c;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.s-feat__card--img .s-feat__card-desc {
  font-size: 14px;
  line-height: 24px;
}

/* =====================================================================
 * PC (>= 1024px)  ※4列グリッド(230x4 + gap20x3 = 980)が768pxに収まらない
 * ===================================================================== */
@media (min-width: 1024px) {
  .s-feat__inner {
    max-width: calc(980px + 24px * 2);
    padding: 46px 24px;
  }

  .s-feat__eyebrow {
    height: 40px;                   /* Figma PC: グループ153x40 */
  }

  .s-feat__eyebrow img { width: 152px; }

  /* Figma: ラベル46..86 → 見出し109..149 */
  .s-feat__title {
    height: 40px;
    margin-top: 23px;
    font-size: 48px;
    line-height: 40px;
  }

  /* Figma: 見出し149 → 大カード200..380 */
  /* PCは「左に画像 / 右にタイトル＋本文」。DOM順（タイトル→画像→本文）のまま
     grid-template-areas で組み替える */
  .s-feat__big {
    display: grid;
    grid-template-columns: 213px 1fr;
    grid-template-areas:
      "thumb title"
      "thumb desc";
    align-content: start;
    gap: 0 20px;
    height: 180px;
    margin-top: 51px;
    padding: 19px 18px;
    border-radius: 12px;
  }

  .s-feat__big-thumb { grid-area: thumb; }

  /* Figma PC: タイトル y37（padding19 + 18） 高さ18 */
  .s-feat__big-title {
    grid-area: title;
    height: 18px;
    margin-top: 18px;
    font-size: 24px;
    line-height: 18px;
    text-align: left;
  }

  /* Figma PC: 本文 y72（タイトル下端55 + 17） */
  .s-feat__big-desc {
    grid-area: desc;
    margin-top: 17px;
    line-height: 24px;
  }

  /* Figma: 大カード380 → グリッド398。4列230 / 列間20 / 行間16 */
  .s-feat__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 20px;
    margin-top: 18px;
  }

  /* PCはカード高さが2種類だけ（画像付き221 / テキストのみ112）。
     SPの `:not(--img)` の方が詳細度が高いので同じセレクタで上書きする */
  .s-feat__card,
  .s-feat__card:not(.s-feat__card--img) {
    min-height: 112px;
    height: auto;
    padding: 15px 14px;
    gap: 13px;
  }

  .s-feat__grid > li:nth-child(1),
  .s-feat__grid > li:nth-child(2),
  .s-feat__grid > li:nth-child(3),
  .s-feat__grid > li:nth-child(4) { min-height: 221px; height: auto; }

  /* PCは全カードの画像枠が92px。SPの nth-child 指定（詳細度0,3,0）に
     負けるので、同じ形のセレクタで上書きする */
  .s-feat__grid > li:nth-child(1) .s-feat__thumb,
  .s-feat__grid > li:nth-child(2) .s-feat__thumb,
  .s-feat__grid > li:nth-child(3) .s-feat__thumb,
  .s-feat__grid > li:nth-child(4) .s-feat__thumb { height: 92px; }

  .s-feat__grid > li:nth-child(4) .s-feat__card-desc { font-size: 12px; line-height: 16px; }

  /* PCは画像付きカードも通常カードも同じ文字サイズ。
     `.s-feat__card--img .s-feat__card-desc` の方が詳細度が高いので明示的に上書きする */
  .s-feat__card-title,
  .s-feat__card--img .s-feat__card-title {
    font-size: 18px;
    line-height: 20px;
  }

  .s-feat__card-desc,
  .s-feat__card--img .s-feat__card-desc {
    font-size: 12px;
    line-height: 16px;
  }
}

/* ===== 11-compare-line.css ===== */
/*
 * 11-compare-line / 12-compare-ma の共通ガワ
 *
 * Figma実測（11 / PC 1280x536 / SP 390x880）
 *   オートレイアウト: PC padding 40px 146px gap 30 / SP padding 30px 20px gap 20
 *   構成: アイコン付き見出し → リード文 → 白パネル（中に表）
 */

.s-cmp { background: #f0eaff; }

.s-cmp__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(980px + 20px * 2);
  margin-inline: auto;
  padding: 30px 20px;
}

.s-cmp__title {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  color: var(--c-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
}

.s-cmp__icon {
  flex-shrink: 0;
  width: 24px;
  height: auto;
}

.s-cmp__lead {
  width: 100%;
  margin-top: 20px;
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

.s-cmp__panel {
  width: 100%;
  margin-top: 20px;
  padding: 31px 10px 32px;
  background: var(--c-white);
  border-radius: 12px;
}

@media (min-width: 1024px) {
  .s-cmp__inner {
    max-width: calc(980px + 24px * 2);
    padding: 40px 24px;
  }

  .s-cmp__title {
    gap: 8px;
    height: 46px;
    font-size: 40px;
    line-height: 46px;
  }

  .s-cmp__icon { width: 38px; }

  .s-cmp__lead {
    margin-top: 30px;
    font-size: 18px;
    line-height: 25px; /* Figma: 980x49 の2行 */
  }

  .s-cmp__panel {
    margin-top: 30px;
    padding: 29px 0 26px;
    border-radius: 28px;
  }
}

/* ===== 12-compare-ma.css ===== */
/*
 * 12-compare-ma — 比較②一般的なMAツール
 *
 * ガワ（.s-cmp）と表（.c-cmp）は 11-compare-line と共有し、
 * ここでは違うところだけを書く。
 *
 * Figma実測（PC 1280x529 / SP 390x834）
 *   背景 #F3F9FB（11は #F0EAFF）
 *   PC: パネル 980x294 / 表 570px（比較項目200 + 185 + 185）
 *   SP: パネル 350x602 / セル 164 : 167
 */

.s-cmp--ma { background: #f3f9fb; }

/* SPのリード文は4行（Figma 350x95）。11は3行なので行数だけ違う */
.s-cmp--ma .s-cmp__panel { padding: 31px 10px; }

@media (min-width: 1024px) {
  .s-cmp--ma .s-cmp__panel { padding: 29px 0 20px; }
}

/* ===== 13-faq.css ===== */
/*
 * 13-faq — よくあるご質問
 *
 * Figma実測（PC 1280x1336 / SP 390x1790）
 *   PC: カード x230 w820 / カード間 16px / 見出し上 45px
 *   SP: padding 30px 20px / カード幅350（Figmaは361〜362だが手置きのズレ。design.md §8 #20）
 *
 * カードは「質問（Qぶら下げ）＋ 白い答え箱」の2段。アコーディオンではなく常に開いた状態。
 */

.s-faq { background: var(--c-white); }

.s-faq__inner {
  max-width: calc(350px + 20px * 2);
  margin-inline: auto;
  padding: 30px 20px;
}

.s-faq__label {
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
}

.s-faq__title {
  margin-top: 2px;
  color: var(--c-text);
  font-size: 30px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}

.s-faq__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .s-faq__inner {
    max-width: calc(820px + 20px * 2);
    padding: 45px 20px 53px;
  }

  .s-faq__label { line-height: 13px; }

  .s-faq__title {
    margin-top: 3px;
    line-height: 34px;
  }

  .s-faq__list {
    gap: 16px;
    margin-top: 34px;
  }
}

/* ===== 14-contact.css ===== */
/*
 * 14-contact — お問い合わせ（HubSpot埋め込み）
 *
 * ⚠️ Figmaは「hubspot挿入エリア」というグレーのプレースホルダのみで、
 *    デザイン指定がない（design.md §8 #21）。
 *    ここでは前後のセクションと馴染む余白だけを与え、中身はHubSpotに任せる。
 *    フォームの見た目を作り込む場合は、HubSpot側のスタイル設定か
 *    .hs-form-frame 配下への上書きで対応する。
 */

.s-contact {
  background: var(--c-white);
  /* #contact アンカーの着地余白。ヘッダーは position:relative（固定ではない）ので
     大きなオフセットは不要。頭が詰まらない程度に少しだけ空ける */
  scroll-margin-top: 16px;
}

.s-contact__inner {
  max-width: calc(820px + 20px * 2);
  /* HubSpotフォームはiframeで非同期ロード＆リサイズする。読み込み前後で高さが変わると
     CTAボタンからの #contact ジャンプ着地がズレる（先にジャンプ→後からフォームが伸びる）。
     読み込み後の実測値ぶんの領域を先に確保しておき、レイアウトシフトを消す。
     実測: SP 836px / PC(1024+) 712px（バリデーション表示で多少伸びるぶんは許容） */
  min-height: 836px;
  margin-inline: auto;
  padding: 40px 20px;
}

@media (min-width: 1024px) {
  .s-contact__inner {
    min-height: 712px;
    padding: 60px 20px;
  }
}

/* ===== 99-footer.css ===== */
/*
 * 99-footer — フッター
 *
 * Figma実測（PC 1280x156 / SP 390x165）
 *   背景 #1B1B1B / 中身は全部センター揃え
 *   ロゴ 221x29（y29〜30）→ 社名・住所 12px Bold 行17px（y75/y92）
 *   → プライバシーポリシー 12px Regular 下線 行19px（y118）
 *   PCとSPで中身は同じ。下の余白だけSPが9px広い
 */

.s-footer { background: #1b1b1b; }

.s-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 29px 20px 29px;
  color: var(--c-white);
  text-align: center;
}

.s-footer__logo {
  width: 221px;
  height: auto;
}

.s-footer__company {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 17px;
}

.s-footer__link {
  margin-top: 9px;
  color: var(--c-white);
  font-size: 12px;
  font-weight: 400;
  line-height: 19px;
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .s-footer__inner { padding: 30px 20px 19px; }
}