/* セクション固有のスタイル
 *
 * 各セッションは「自分の担当セクションのブロック」だけを編集する。
 * 他セクションのブロックには触れないこと。
 * 追記位置は SECTIONS.md のセッション順（S01→S11）に合わせる。
 *
 * ルール（CONVENTIONS.md より）:
 *   - 値は var(--token) で書く。生の hex / px を直接書かない
 *   - 新しいクラスを作らない。セクションのルートを起点にした子孫セレクタで書く
 *   - トークンに無い値に出会ったら PROGRESS.md に報告する（自分で追加しない）
 */

/* main は装飾レイヤーの位置基準。横方向のはみ出しはここで切る */
main {
  position: relative;
  overflow-x: clip;
}

/* セクションの中身は装飾より前面に置く */
main > section {
  position: relative;
  z-index: 1;
}

/* ===== S01 header ===== */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--c-header-bg);
  border-bottom: 1px solid var(--c-border);
  backdrop-filter: blur(4px);
}

/* アクセントバーの下の行。Figma上はクラスを持たない素の div */
header > .accent-bar + div {
  display: flex;
  gap: 28px;
  align-items: center;
  width: var(--w-wide);
  height: var(--h-header);
}

header > .accent-bar + div > a img {
  width: 190.54px;
  height: 34px;
}

/* ナビのラッパー。ロゴと右ブロックの間の可変領域を占め、中身を右端に寄せる */
header > .accent-bar + div > div:first-of-type {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-end;
  min-width: 388px;
  padding-left: 216.828px;
}

header nav {
  display: flex;
  gap: 4px;
  align-items: flex-start;
}

/* 現在地。デザイン上クラスが無い素の a
   Figmaはボーダーを枠の内側に描くため、その2pxを padding-bottom から引く
   （10px → 8px）。引かないと .scp0 より2px高くなる */
header nav a:not(.scp0) {
  display: inline-flex;
  padding: 8px 12px;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 17px;
  color: var(--c-navy);
  border-bottom: 2px solid var(--c-navy);
}

/* 電話番号 + ボタンのブロック */
header > .accent-bar + div > div:last-child {
  display: flex;
  gap: 14px;
  align-items: center;
}

header > .accent-bar + div > div:last-child > a:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* 電話番号（アイコン + 数字） */
header > .accent-bar + div span:first-child {
  display: flex;
  gap: 3px;
  align-items: center;
  margin-bottom: -1.01px; /* Figma実値。営業時間との間隔 */
  font-family: var(--f-num);
  font-size: var(--fs-tel);
  font-weight: 700;
  line-height: var(--lh-tel);
  color: var(--c-navy);
  letter-spacing: var(--ls-tel);
}

header > .accent-bar + div span:first-child img {
  width: 22px;
  height: 14px;
}

/* 営業時間 */
header > .accent-bar + div span:last-child {
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  color: var(--c-text);
  text-align: right;
}

/* ===== S02 MV ===== */
/* 可視要素は「背景画像 + h1 + p + ボタン2つ」だけ。
   Figma上の vector 384件は全て hidden の地球儀アートで、images/image1.jpg に
   書き出し済み。コードで再現しない（AGENTS.md）。
   見出しのサイズ・行間はMVでしか出ない1回限りの値のため生pxで書く（CONVENTIONS.md の例外）。 */
#mv {
  height: 625px;
  padding-top: 96px;
  background: var(--c-navy-900) url("../images/image1.jpg") center top / 1920px 625px no-repeat;
}

/* 内側コンテナ。Figmaのレイヤー名は素の div（.is-in ではない）。
   左端は 360px = (1920 - 1200) / 2 で header と揃う */
#mv > div {
  width: var(--w-wide);
  margin-inline: auto;
}

/* 見出し。base.css の h1 は Zen Kaku だが、Figma実値は Noto Sans JP Black(900) */
#mv h1 {
  padding-top: 2.795px;
  font-family: var(--f-body);
  font-size: 44px;
  font-weight: 900;
  line-height: 61.6px;
  color: var(--c-white);
  letter-spacing: 0.44px;
}

/* 1行目の「AI」だけ 48px */
#mv h1 span:first-of-type {
  font-size: 48px;
}

/* 2行目「見つけてもらえる」。60px + 横グラデの文字塗り
   （h1の最後の子は br なので :last-child では当たらない）
   ★2026-08-06: SP版で3行目のサイズが1行目と違う（37px / 32px）ため
   3行目を span で包んだ。その結果 :last-of-type が3行目に移るので
   :nth-of-type(2) に変更した。PC差分は 5211px で変化なしを確認済み。 */
#mv h1 span:nth-of-type(2) {
  font-size: 60px;
  line-height: 80px;
  color: transparent;
  background: var(--g-accent);
  -webkit-background-clip: text;
  background-clip: text;
}

/* 3行目。もとは <br> で改行していたが、SP版では3行目だけ行間が違う（55px / 50px）。
   インラインのままだと親の line-height がストラットとして効き、小さい行間を作れない。
   ブロックにして <br> を廃止した。PC差分は 5211px で変化なしを確認済み。 */
#mv h1 .l3 {
  display: block;
}

#mv p {
  padding-top: 23px;
  font-size: var(--fs-tel);
  font-weight: 700;
  line-height: 34px;
  color: var(--c-white);
}

/* ボタン行。Figmaは div の padding-top 12px + 上の p との間隔 24px */
#mv > div > div {
  display: flex;
  gap: 14px;
  padding-top: 36px;
}

/* MVの .scp1 は header より大きい（192x49）。差はサイズとパディングのみ */
#mv .scp1 {
  padding: 15px 32px;
  font-size: var(--fs-md);
  line-height: 19px; /* Figmaの16pxテキスト高。normal(23px)だと4px膨らむ */
  border-radius: var(--r-md);
}

/* ===== S03 section1 ===== */
/* 背景は白→ティントの縦グラデ。参照画像のピクセル実測から:
   上端〜15% は純白のまま、下端で --g-tint（左 #eefbff / 右 #edf7ff）に到達する。
   縦横の2方向に変化するため、白の縦フェードを --g-tint に重ねて再現する。 */
#section1 {
  height: 428px;
  padding-top: 90px; /* div.is-in y=10 + h2 y=80 */
  background:
    linear-gradient(180deg, var(--c-white) 15%, transparent 100%),
    var(--g-tint);
}

#section1 .is-in {
  max-width: var(--w-wide); /* 左端 360px。header / MV と揃う */
}

/* 見出しブロック（ロゴ + 「サイトマイスターとは」）。
   共通の h2.is-in とは別物で、base.css の見出し既定（Zen Kaku / navy）を上書きする */
#section1 h2 {
  display: flex;
  flex-direction: column;
  gap: 20.19px;
  align-items: flex-start;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 19px; /* Figmaの16pxテキスト高 */
  color: var(--c-text);
}

#section1 h2 img {
  width: 320px;
  height: 57px;
}

#section1 p {
  padding-top: 39px;
  font-size: var(--fs-md);
  line-height: 30px;
  color: var(--c-text);
}

#section1 strong {
  font-weight: 700;
  color: var(--c-blue-text);
}

/* 制作・保守・更新の3つの円。div.is-in の外（section直下）に置かれているため、
   Figmaの実座標で絶対配置する。
   ★2026-08-06: SP版が別アセット（sp_top_img001.png）なので <picture> で包んだ。
   セレクタが `#section1 > img` では当たらなくなるため子孫セレクタに変更した。
   PC差分は 5601px（実行ごとの揺れの範囲）で変化なしを確認済み。 */
#section1 picture img {
  position: absolute;
  top: 194.485px;
  left: 854px;
  /* Figmaの実寸は 699.38x199.65 だが、書き出し済みPNGは 700x200。
     実寸で描くと縮小リサンプルがかかり、右端の円が1pxずれる。PNGの等倍で置く */
  width: 700px;
  height: 200px;
}

/* ===== S04 section2 =====
   Figmaのブロックは上下に重なっている（h2.is-in の下端 241.11 に対し
   次の p.is-in が 235.01 から始まる）。フローで積むと崩れるため、
   ブロックはすべて section を基準に絶対配置する。座標はFigma実値。
   表組み 138:11900 は hidden なので実装しない。 */
#section2 {
  height: 2193px;
  background: var(--g-tint);
}

#section2 > * {
  position: absolute;
}

/* --- 見出しブロック --- */
#section2 > .h2-mark {
  top: 78.318px;
  left: 948.516px;
}

/* 共通の h2.is-in（Zen Kaku 30px）とは値が違う。section2 は Noto Sans JP 34px */
#section2 > h2.is-in {
  top: 125.112px;
  left: 400px;
  width: 1120px;
  font-family: var(--f-body);
  font-size: 34px;
  line-height: 58px;
}

/* リード文。共通の「h2.is-in + p.is-in」の値（15.5px/31px）も上書きする */
#section2 > h2.is-in + p.is-in {
  top: 270.112px;
  left: 605px;
  width: 710px;
  padding-top: 0;
  font-size: var(--fs-md);
  line-height: 32px;
}

/* 「“正式な情報源”として…」の白いマーカー。
   Figmaでは 403x23 の白い矩形を敷いているが、16px Noto Sans JP のテキスト高が
   ちょうど23pxなので、インラインの背景色で同じ見た目になる */
#section2 strong {
  font-weight: 700;
  color: var(--c-blue-text);
}

/* 単なる background-color だと文字高の上端から塗られて2px高い。
   Figmaの矩形（y=340 / 高さ23）に合わせて位置とサイズを固定する */
#section2 > h2.is-in + p.is-in strong {
  background: linear-gradient(var(--c-white), var(--c-white)) 0 2px / 100% 23px no-repeat;
}

/* --- 01 / 02 / 03 の3カラム --- */
#section2 > div:first-of-type {
  top: 536px;
  left: 512px;
  display: flex;
}

#section2 > div:first-of-type > div {
  width: 300px;
  height: 233px;
  text-align: center;
  border-right: 1px solid var(--c-divider);
  border-left: 1px solid var(--c-divider);
}

/* 隣り合う枠は境界線を共有する（Figma実座標の間隔が299px） */
#section2 > div:first-of-type > div + div {
  margin-left: -1px;
}

/* 画像はFigma上、枠の中央からわずかにずれている（枠左端+19 / +20 / +19）。
   フローを崩さずに寄せるため relative で微調整する */
#section2 > div:first-of-type img {
  position: relative;
  top: 1px;
  margin-inline: auto;
}

#section2 > div:first-of-type > div:nth-child(1) img {
  left: 1px;
}

#section2 > div:first-of-type > div:nth-child(2) img {
  left: 2px;
}

#section2 > div:first-of-type > div:nth-child(3) img {
  left: 1px;
}

/* 連番 01/02/03 */
#section2 > div:first-of-type p:first-of-type {
  padding-top: 12px;
  font-family: var(--f-num);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 17px;
  color: var(--c-blue);
  letter-spacing: var(--ls-num);
}

/* カラム見出し */
#section2 > div:first-of-type p + p {
  padding-top: 5px;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 24px;
  color: var(--c-text);
}

/* top_img004 だけ2px下から始まる（Figma実値） */
#section2 > div:first-of-type > div:last-child img {
  margin-top: 2px;
}

#section2 > div:first-of-type > div:last-child p:first-of-type {
  padding-top: 10px;
}

/* 出典 */
#section2 > p:nth-of-type(2) {
  top: 795.112px;
  left: 830.5px;
  font-size: var(--fs-note);
  color: var(--c-footer-note);
}

/* --- 「散らばった情報を、ひとつに集約」の帯 --- */
#section2 > p:nth-of-type(3) {
  top: 866.088px;
  left: 763.06px;
  padding: 13.2px 39.6px;
  font-size: 21.12px;
  font-weight: 700;
  line-height: 25px; /* Figmaのテキスト高。normal(30.6px)だと帯が6px膨らむ */
  color: var(--c-white);
  background: var(--g-accent);
  border-radius: var(--r-pill);
}

/* --- 集約の図 ---
   Figmaのフレームは 898x681 だが、中身が上下にはみ出しており
   書き出し済みPNG（1796x1598 = 2倍）は 898x799 ぶんを含む。
   フレーム上端より 92.1px 上から描く */
#section2 > picture {
  top: 836.9px;
  left: 512px;
  width: 898px;
  height: 799px;
}

#section2 > picture img {
  width: 100%;
  height: 100%;
}

/* 図の下の見出し */
#section2 > p:nth-of-type(4) {
  top: 1456.02px;
  left: 727.48px;
  width: 468px;
  font-size: 26px;
  font-weight: 700;
  line-height: 42.24px;
  color: var(--c-navy);
  text-align: center;
}

/* 「だからいま、…」 */
#section2 > p.is-in:nth-of-type(5) {
  top: 1616px;
  left: 676.5px;
  width: 567px;
  padding-top: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
  color: var(--c-navy);
  text-align: center; /* 共通の「h2.is-in + p.is-in」に該当しないため個別に指定 */
}

/* :first-of-type は SP 用に追加した2つ目の span（サイトマイスターは…）を外すため。
   PC の見た目は追加前と同じ */
#section2 > p.is-in:nth-of-type(5) > span:first-of-type {
  font-size: 28px;
  line-height: 44px;
}

/* --- 濃紺カード4枚 --- */
#section2 > div:last-of-type {
  top: 1760px;
  left: 360px;
  display: flex;
  gap: var(--grid-gap);
  align-items: stretch;
}

#section2 > div:last-of-type > .is-in {
  display: flex;
  flex-direction: column;
  width: 285px;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-card-border);
  border-radius: 12px;
}

/* カード上部の濃紺帯 */
#section2 > div:last-of-type > .is-in > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  text-align: center;
  background: var(--c-navy-700);
}

#section2 > div:last-of-type > .is-in > div:first-child p:first-child {
  font-family: var(--f-num-alt);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 16px;
  color: var(--c-blue);
}

#section2 > div:last-of-type > .is-in > div:first-child p + p {
  font-size: var(--fs-tel);
  font-weight: 700;
  line-height: 28px;
  color: var(--c-white);
}

/* カード下部の白地 */
#section2 > div:last-of-type > .is-in > div + div {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  padding: 19.295px 11px 20px;
  font-size: var(--fs-base);
  line-height: 26.6px;
  color: var(--c-text);
  text-align: center;
}

/* --- 締めの2行 --- */
#section2 > p.is-in:last-of-type {
  top: 2039.542px;
  left: 623px;
  width: 674px;
  padding-top: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 40px;
  color: var(--c-navy);
  text-align: center;
}

/* ===== S05 section3a できること ===== */
/* Figma: section3 138:10730 の上半分（見出し + カード6枚 138:10737）
   下半分の 3b（138:11654）は S06 が同じ濃紺面の上に実装する。 */

#section3 {
  /* Figma実値は #012358。--c-navy-700 (#00255e) との差は pixelmatch のYIQ距離で
     4.1（しきい値3521.5）と桁違いに小さく検出されないため、既存トークンを流用する。
     S04 の濃紺カード（#01255e）と同じ判断。 */
  padding-top: 73.948px;
  background: var(--c-navy-700);
}

#section3 > div {
  width: var(--w-wide);
  margin-inline: auto;
}

#section3 .h2-mark {
  margin-inline: auto;
}

/* 見出しブロック — 共通部品は中央寄せしか持たないので、値は全てここで指定する。
   実値は Noto Sans JP Bold 30px / 白。Figmaの30pxテキスト高は36px。 */
#section3 h2.is-in {
  margin-top: 10px;
  padding-top: 0.939px;
  font-family: var(--f-body);
  font-size: var(--fs-h2);
  line-height: 36px;
  color: var(--c-white);
}

/* リード文も共通部品（15.5px/31px/--c-text）と違い、15px/18px/白。
   15px はトークン化していない（--fs-btn-lg と同値だが用途が別のため流用しない）。 */
#section3 > div > p.is-in {
  margin-top: 10px;
  padding-top: 0;
  font-size: 15px;
  line-height: 18px;
  color: var(--c-white);
}

/* カードグリッド 138:10737 — 3列 × 2行。上段373 / 下段346 と行高が違う。
   Figmaのフレーム高は772.97だが、カード下段が783.22まではみ出している
   （auto-layout の計算とズレている）。ここでは実描画どおり自然高で積む。 */
#section3 > div > div {
  display: grid;
  grid-template-columns: repeat(3, 380px);
  grid-template-rows: 373px 346px;
  gap: 30px;
  margin-top: 10px;
  padding-top: 34.219px;
}

/* .scp3 の section3a バリアント。ベース（section4）との差は角丸 6px → 12px。
   Figmaの padding は 29px 27px だが、Figmaはボーダーを枠の内側に描くため
   CSSでは上下左右それぞれ1pxを引く（S01/S02 で確立した補正）。
   引かないと内容幅が 326 → 324 に縮み、画像が max-width で縮小される。 */
#section3 .scp3 {
  /* design_context は gap-[10px] だが、metadata の実座標では 9.3px
     （連番底59 → 画像上端68.3 → 画像底213 → h3上端222.3）。
     10px にすると各要素が1px以上ずつ下にずれていく */
  gap: 9.3px;
  padding: 28px 26px;
  border-radius: var(--r-card);
}

/* 書き出し済みPNGは652x290（2倍）。等倍の326x145で置く（S03の知見）。
   背景の水色と角丸10pxはPNG側に含まれている（透過PNG） */
#section3 .scp3 > img {
  width: 326px;
  height: 145px;
}

#section3 .scp3 h3 {
  padding-top: 6.7px;
  font-family: var(--f-body);
  font-size: var(--fs-h2-sm);
  line-height: 24px;
}

/* カード01の見出しだけ Zen Kaku Gothic New（Figmaの実値。テキスト高も29px）。
   他5枚は Noto Sans JP。デザイン側のゆらぎだが忠実に再現する */
#section3 .scp3:first-child h3 {
  font-family: var(--f-heading);
  line-height: 29px;
}

/* カード02の見出しだけ上パディングが6px（他は6.7px） */
#section3 .scp3:nth-child(2) h3 {
  padding-top: 6px;
}

/* 連番の p.scp4 も同じ「.scp3 直下の p」なので除外する（除外しないと
   14px/26.6px が連番に当たり、ブロック高が 30 → 37.59 に膨らむ） */
#section3 .scp3 > p:not(.scp4) {
  font-size: var(--fs-base);
  line-height: 26.6px;
  color: var(--c-text);
}

/* ===== S06 section3b 多言語対応オプション ===== */
/* Figma: section3 138:10730 の下半分（`div.is-in` 138:11654）。
   3a と同じ濃紺面の続きだが、HTML雛形では別の section に分かれている。 */

#section3-lang {
  /* 3aのグリッドはFigmaのフレーム高(772.97)より 10.25px 高く実描画される。
     3b のFigma上のyはフレーム高基準なので、その差を詰めて位置を合わせる。
     詳細は PROGRESS.md「ヘッドからの申し送り 5.」 */
  margin-top: -1.233px;
  /* section3（138:10730 / h=1639）は 3b の下に 33.7px の濃紺が残る。
     3b は section3 の後半を担当しているので、この下パディングもここが持つ */
  padding-bottom: 33.7px;
  background: var(--c-navy-700);
}

/* 上下の余白は section ではなく div.is-in が持つ（Figmaの 138:11654 が
   h=627.542 で、その中の h2_mark が y=72.948 から始まる） */
#section3-lang > .is-in {
  max-width: var(--w-wide);
  padding: 72.948px 0 60px;
}

#section3-lang .h2-mark {
  margin-inline: auto;
}

/* 見出しは 3a と同値（Noto Sans JP Bold 30px / 白）だが、こちらは `.is-in` が付かない
   素の h2 なので共通部品の中央寄せに当たらない。text-align も自分で指定する */
#section3-lang h2 {
  margin-top: 10.9px;
  font-family: var(--f-body);
  font-size: var(--fs-h2);
  line-height: 36px;
  color: var(--c-white);
  text-align: center;
}

/* リード文は 3a（15px/18px）と違い、共通部品の旧定義と同じ 15.5px/31px。
   → 見出しブロックの値はセクションごとに違う、という判断の裏付け */
#section3-lang > .is-in > p:first-of-type {
  margin-top: 10.9px;
  padding-top: 5.1px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-white);
  text-align: center;
}

/* --- 料金カード4枚（285x283 / x = 0, 305, 610, 915） --- */
#section3-lang > .is-in > div {
  display: grid;
  grid-template-columns: repeat(4, 285px);
  gap: var(--grid-gap);
  margin-top: 30.9px;
}

/* .scp3 の section3b バリアント。中身はすべて絶対配置なので、
   共通部品の flex は使わず position の器として使う */
#section3-lang .scp3 {
  position: relative;
  height: 283px;
  padding: 0;
  border-radius: var(--r-card);
}

/* 内側のラッパー 265x261。Figma上の x=10 は border1 + padding1 + 中央寄せ8 だが、
   absolute の基準は padding box（＝ボーダーの内側）なので border分の1pxは引く */
#section3-lang .scp3 > div {
  position: absolute;
  top: -1px;
  left: 9px;
  width: 265px;
  height: 261px;
}

#section3-lang .scp3 > div > div {
  position: absolute;
  right: 18px;
  left: 18px;
}

/* 1. 見出しバッジ（32px = 5 + 22 + 5） */
#section3-lang .scp3 > div > div:nth-child(1) {
  top: 16px;
}

#section3-lang .scp3 > div > div:nth-child(1) > span {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma実値は 5px 12px。ベースライン位置の差ぶん、上下を1px振り分けて合わせる */
  padding: 4px 12px 6px;
  /* Figma実値は #e7f1fd。--c-tint (#edf7ff) との差は pixelmatch のYIQ距離 16.3 で
     検出されず、色相も同じ薄青のため既存トークンを流用する */
  font-size: var(--fs-tel);
  font-weight: 700;
  line-height: 22px;
  color: var(--c-blue-text);
  background: var(--c-tint);
  border-radius: var(--r-pill);
}

/* 2. 初期費用 — 見出しと同じ Zen Kaku だが、数字だけ Montserrat */
#section3-lang .scp3 > div > div:nth-child(2) {
  top: 50.61px;
  font-family: var(--f-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 17px;
  color: var(--c-footer-note);
  text-align: center;
}

#section3-lang .scp3 > div > div:nth-child(2) > span {
  font-family: var(--f-num);
}

/* 3. 金額 — 数字30px + 単位15px。行間はどちらも22.1px。
   30pxと15pxの inline box が混在すると行ボックスが 22.1 → 26.09 に膨らむ。
   Figma のフレーム高（15px）を明示し、中央揃えで置く
   （Figma側も 15px の枠に 23px のテキストを中央で載せている） */
#section3-lang .scp3 > div > div:nth-child(3) {
  /* 30pxの数字は Montserrat のラスタライズ差でFigmaより2px背が高く出る
     （ref h25 / shot h27）。上下どちらかにしか合わせられないので、
     Figma実値のまま（下端が揃う側）にしている */
  top: 76.29px;
  font-size: 0;
  line-height: 22.1px;
  color: var(--c-blue-text);
  text-align: center;
}

#section3-lang .scp3 > div > div:nth-child(3) > span:first-child {
  font-family: var(--f-num);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: var(--ls-num-sm);
}

#section3-lang .scp3 > div > div:nth-child(3) > span:last-child {
  font-size: var(--fs-btn-lg);
}

/* 4.「対応言語」バッジ（27px = pt3 + 24） */
#section3-lang .scp3 > div > div:nth-child(4) {
  top: 116px;
  padding-top: 3px;
  text-align: center;
}

#section3-lang .scp3 > div > div:nth-child(4) > span {
  display: inline-flex;
  padding: 5px 11px;
  font-size: var(--fs-xs);
  line-height: 14px;
  color: var(--c-text);
  background: var(--c-gray-200);
  border-radius: var(--r-pill);
}

/* 5. 対応言語の中身。カード2 は 237px あり枠(229px)からはみ出すが、
   Figmaでも折り返さず1行で描かれている */
#section3-lang .scp3 > div > div:nth-child(5) {
  /* Figma実値は 148px。同じ line-height 18px でもFigmaとブラウザで
     行内のベースライン位置が2px違うため、描画位置を合わせて2px上げる */
  top: 146px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 18px;
  color: var(--c-text);
  text-align: center;
  white-space: nowrap;
}

/* 6. カバー率ブロック（77px = 12 + 17 + gap4 + 32 + 12）*/
#section3-lang .scp3 > div > div:nth-child(6) {
  top: 176px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 12px;
  background: var(--c-gray-100);
  border-radius: 10px;
}

#section3-lang .scp3 > div > div:nth-child(6) > span:first-child {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 17px;
  color: var(--c-text);
}

/* 金額と同じ理由（30pxと15pxの混在）で行ボックスが膨らむため高さを固定する */
#section3-lang .scp3 > div > div:nth-child(6) > span:last-child {
  font-size: 0;
  line-height: 32px;
  color: var(--c-red);
}

#section3-lang .scp3 > div > div:nth-child(6) > span:last-child > span:first-child {
  font-family: var(--f-num);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: var(--ls-num-sm);
}

#section3-lang .scp3 > div > div:nth-child(6) > span:last-child > span:last-child {
  font-size: var(--fs-btn-lg);
}

/* 7.「開始予定」— カード3・4 のみ。内側ラッパーの外に置かれている */
#section3-lang .scp3 > p {
  position: absolute;
  top: 259px;
  right: 0;
  left: 0;
  font-size: var(--fs-sm);
  line-height: 16px;
  color: var(--c-text);
  text-align: center;
}

/* --- 下部の注記（2行 / 左寄せ） --- */
#section3-lang > .is-in > p:last-of-type {
  margin-top: 10.9px;
  padding-left: 3.5px;
  font-size: var(--fs-xs);
  line-height: 20px;
  color: var(--c-white);
}

/* ===== S07 section4 導入事例 ===== */
/* Figma: 138:10672（1920x777.742）。背景は白で、上端に1pxの区切り線がある。
   実体は `div.is-in`（138:10673）1本で、見出し + カード4枚 + ボタン。 */

#section4 {
  border-top: var(--bd);
}

#section4 > .is-in {
  max-width: var(--w-wide);
  padding: 72.948px 0 80px;
}

#section4 .h2-mark {
  margin-inline: auto;
}

/* 見出しは 3a / 3b（Noto Sans JP 30px / 白）と違い、
   base.css の既定どおり Zen Kaku Gothic New / --c-navy。
   Zen Kaku の30pxはFigmaのテキスト高が43px（Noto Sans JPは36px）*/
#section4 h2 {
  margin-top: 10.9px;
  font-size: var(--fs-h2);
  line-height: 43px;
  text-align: center;
}

/* リード文は 3b と同値で、共通部品の旧定義（15.5px / 31px / --c-text）と一致する */
#section4 > .is-in > p {
  margin-top: 10.9px;
  padding-top: 5.1px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  text-align: center;
}

/* --- 事例カード4枚（288x383 / x = 0, 304, 608, 912） --- */
#section4 > .is-in > div {
  display: grid;
  grid-template-columns: repeat(4, 288px);
  gap: 16px;
  margin-top: 10.9px;
  padding-top: 17.1px;
  padding-bottom: 25.1px;
}

/* .scp3 の section4 バリアント（＝共通部品のベース）。中身は画像1枚だけ。
   Figmaの `p-px` はボーダーと同じ1pxで、metadata の画像座標(1,1)は外枠からの値。
   CSSでは border が既にその1pxを占めるので padding は 0（入れると画像が1px右下にずれる）。
   288px の画像を 288px の枠に入れているので右下がはみ出し、overflow で切れる */
#section4 .scp3 {
  height: 383px;
  padding: 0;
  overflow: hidden;
}

/* 書き出し済みJPGは 574x762（2倍）。**ちょうど半分の 287x381 で置く。**
   Figmaのノード寸法どおり 288px にすると 574/288 = 1.9931 の非整数比になり、
   縮小の補間で写真全体に差が出る（実測 2.08% → 0.76%）。
   右端の1pxは参照側でも差が出ない（枠との間に隙間は見えない）。 */
#section4 .scp3 > img {
  width: 287px;
  height: 381px;
  max-width: none; /* base.css の max-width:100% だと枠の内寸286pxに縮む */
  object-fit: cover;
}

/* フォントサイズと line-height は共通部品（components.css の #section4 .scp1）が持つ。
   ここは配置だけ */
#section4 .scp1 {
  display: flex;
  width: fit-content;
  margin: 10.9px auto 0;
}

/* ===== S08 #plans5 料金プラン =====
   Figma: 138:10576（1920x966.05）。背景は白。
   中身は 1028px の div 1本。表は table / thead / tbody / tr / th / td の素の構造で、
   Figma のレイヤー名もそのままHTMLタグ名になっている。 */

#plans5 {
  padding-bottom: 60px;
}

#plans5 > div {
  width: 1028px;
  padding-top: 79.092px;
  margin-inline: auto;
}

/* h2_mark は 31.113px の正方形ラッパー（Figma上も p.is-in）に入っている */
#plans5 > div > p.is-in:first-child {
  width: 31.113px;
  height: 31.113px;
}

#plans5 .h2-mark {
  position: relative;
  top: -13.781px;
  margin-inline: auto;
}

/* 見出しは section4 と同じ Zen Kaku 30px（テキスト高43px）*/
#plans5 h2.is-in {
  margin-top: 0.908px;
  padding-top: 0.939px;
  font-size: var(--fs-h2);
  line-height: 43px;
}

/* リード文は 15px/18px（3b・section4 の 15.5px/31px とは別値）*/
#plans5 h2.is-in + p.is-in {
  margin-top: 20px;
  padding-top: 0;
  font-size: var(--fs-btn-lg);
  line-height: 18px;
}

/* --- 表を載せる白いカード --- */
#plans5 div.is-in {
  width: 980px;
  height: 650px;
  margin-top: 20px;
  background: var(--c-white);
  border: var(--bd);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgb(21 39 67 / 6%);
}

/* Figma上の table は 880px だが、セルの実座標は左右に24.9pxずつはみ出しており
   実効幅は 929.99（316.19 + 306.89 + 306.92）。カード内で中央に置くと一致する */
#plans5 table {
  width: 929.99px;
  /* Figmaの y=25 はカードの外枠からの値。CSSではカードの border 1px の内側が
     起点になるので1pxを引く（引かないと表全体が1px下がる）*/
  margin: 24px auto 0;
  table-layout: fixed;
}

#plans5 thead th:nth-child(1) {
  width: 316.19px;
}

#plans5 thead th:nth-child(2) {
  width: 306.89px;
}

#plans5 thead th:nth-child(3) {
  width: 306.92px;
}

/* --- 見出し行（97px / 下線2px）--- */
#plans5 thead th {
  height: 97px;
  /* Figmaの97pxはボーダー込み（枠の内側に描かれる）。CSSでは padding + 内容 + border
     が97になるよう下を詰める（37 + 22 + 36 + 2 = 97）*/
  padding: 37px 16px 36px;
  font-family: var(--f-heading);
  font-size: var(--fs-btn-lg);
  font-weight: 700;
  line-height: 22px;
  color: var(--c-navy);
  vertical-align: top;
  /* border-collapse では border がセル境界をまたいで描かれ、Figma（枠の内側）より
     1px下にずれる。2px の太線だと目に見えるので inset shadow で内側に描く */
  box-shadow: inset 0 -2px 0 var(--c-navy);
}

#plans5 thead th:nth-child(2) {
  padding: 34.5px 16px 34.5px;
  font-size: var(--fs-tel);
  line-height: 26px;
  text-align: center;
}

/* プレミアム列。背景の実値は #f2f7fe だが --c-tint（#edf7ff）との
   YIQ距離は4.3で pixelmatch に検出されないため既存トークンを流用する */
#plans5 thead th:nth-child(3) {
  padding: 23px 16px 18px;
  font-size: var(--fs-tel);
  line-height: 26px;
  text-align: center;
  background: var(--c-tint);
  border-radius: 10px 10px 0 0;
  box-shadow: inset 0 -2px 0 var(--c-blue-text);
}

#plans5 thead th:nth-child(3) > span {
  display: block;
  width: fit-content;
  padding: 3px 10px;
  margin: 0 auto 6px;
  font-size: var(--fs-note);
  line-height: 16px;
  color: var(--c-white);
  background: var(--c-blue-text);
  border-radius: var(--r-pill);
}

/* --- 本体の行 --- */
#plans5 tbody th {
  padding: 16.5px 16px 17.5px;
  font-family: var(--f-body);
  font-size: var(--fs-btn-lg);
  font-weight: 500;
  line-height: 18px;
  color: var(--c-text);
  vertical-align: top;
  border-bottom: var(--bd);
}

#plans5 tbody td {
  font-size: var(--fs-xs);
  color: var(--c-text);
  text-align: center;
  vertical-align: middle;
  border-bottom: var(--bd);
}

#plans5 tbody td:last-child {
  background: var(--c-tint);
}

/* 行の高さ（55 / 60 / 49×8）*/
#plans5 tbody tr:nth-child(1) > * {
  height: 55px;
}

#plans5 tbody tr:nth-child(2) > * {
  height: 60px;
}

#plans5 tbody tr:nth-child(n + 3) > * {
  height: 49px;
}

/* 金額は Figtree Bold。初期費用が20px、月額費用が24px */
#plans5 tbody td > span {
  font-family: var(--f-num-alt);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-blue-text);
}

#plans5 tbody tr:nth-child(2) td > span {
  font-size: 24px;
}

/* 3行目以降は本文サイズ。上寄せで padding-top 15px */
#plans5 tbody tr:nth-child(n + 3) th {
  padding-top: 15px;
  padding-bottom: 15px;
}

#plans5 tbody tr:nth-child(n + 3) td {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: var(--fs-btn-lg);
  line-height: 18px;
  vertical-align: top;
}

/* --- 注記 --- */
#plans5 > div > p:last-child {
  width: 972px;
  padding-top: 8px;
  margin: 20px auto 0;
  font-size: var(--fs-xs);
  line-height: 15px;
  color: var(--c-text);
}

/* ===== S09 section6 導入〜公開の流れ =====
   Figma: 138:10341（1920x503）。背景は淡色グラデ（--g-tint）。
   中身は「h2_mark + h2 + ol」の3ブロックで、ol の中に li.scp5 が5枚。
   縦の積み上げ（Figma実値・section6上端からの絶対y）:
     h2_mark   78.923 〜 114.817（ラッパー p.is-in は 92.040 の 31.113 角）
     h2        114.961 〜 157.961（Zen Kaku 30px / テキスト高43px）
     ol        168.861（+33.100 でカード上端 201.961）
     カード     201.961 〜 446.961（245px 固定）→ 残り 56.039 が下パディング */

#section6 {
  background: var(--g-tint);
}

#section6 > div {
  padding-top: 92.04px;
  padding-bottom: 56.039px;
}

/* h2_mark は 31.113px の正方形ラッパー（Figma上も p.is-in）に入っている。
   #plans5 と同じ構造・同じ絶対x（957.66）なので同じ手当てをする */
#section6 > div > p.is-in:first-child {
  width: 31.113px;
  height: 31.113px;
}

#section6 .h2-mark {
  position: relative;
  top: -13.117px;
  margin-inline: auto;
}

/* 見出しは section4 / #plans5 と同じ Zen Kaku 30px（テキスト高43px）。
   ラッパー下端 123.153 → 見出し上端 114.961 なので負のマージンで送る */
#section6 h2.is-in {
  margin-top: -8.192px;
  font-size: var(--fs-h2);
  line-height: 43px;
}

/* カード5枚。224x5 + gap20x4 = 1200 で 1920 の中央（左端360）に来る */
#section6 ol {
  display: flex;
  justify-content: center;
  gap: var(--grid-gap);
  padding-top: 33.1px;
  margin-top: 10.9px;
}

/* カードの寸法・パディング・見出し・バッジ・画像の角丸は
   すべて共通部品（components.css の .scp5 系）が持っている。
   ここに書くのは「このセクションの中身」だけ。

   カード2・3はFigma側の縦位置がゆらいでいる（h3上端が 111.065 / 112.449。他3枚は112）。
   デザインの実態なので片方に寄せず、カードごとに実値で送る（S05と同じ判断）*/
#section6 li:nth-child(2) h3 {
  margin-top: -21.935px;
}

#section6 li:nth-child(3) h3 {
  margin-top: -20.551px;
}

/* ===== S10 section7 CTA =====
   Figma: 138:10325（1920x211.19）。背景は濃紺グラデ（--g-navy / 161.39deg）。
   div.is-in（1168・左右24パディング）の中で見出しと右ブロックが左右に分かれる。
   縦（section7上端からの絶対y）:
     h2フレーム 64 〜 147.19（テキストは 69.295 〜 141.295 / 20px・行間36の2行）
     右ブロック 81.095 〜 130.095（電話 + 白ボタン49px）
   右ブロックの Figma フレームは 184px だが中身（アイコン28 + gap4 + 番号206 = 238）が
   左に54pxはみ出している。**右端（絶対1336）で揃えるのが実体**なので右寄せで組む */

#section7 {
  padding-top: 64px;
  /* 211.19 - 64 - (5.295 + 72) = 69.895 */
  padding-bottom: 69.895px;
  background: var(--g-navy);
}

/* align-items を既定の stretch にすると、右ブロックが見出しの高さ(77.28)まで
   伸びて電話ブロックとボタンが11px背高になる。必ず flex-start にする */
#section7 .is-in {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: var(--w-content);
  padding-inline: var(--pad-x);
}

/* 見出しは 20px / 行間36px の2行。テキストはフレーム上端から5.295px下 */
#section7 h2 {
  padding-top: 5.295px;
  font-size: var(--fs-h2-sm);
  line-height: var(--lh-h2-sm);
  color: var(--c-white);
}

#section7 .is-in > div {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 17.095px; /* 81.095 - 64 */
}

/* 電話ブロック。2行とも右端（絶対1336）で揃う */
#section7 .is-in > div > a:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 0.51px;
  color: var(--c-white);
}

/* 電話番号は Montserrat **ExtraBold(800)**（get_design_context で確認。
   header の電話番号は Bold(700) なので、同じ --f-num でもウェイトが違う）。
   margin-right は **CSSが最後の1文字の後ろにも letter-spacing を足す**分の打ち消し。
   Figmaのテキスト幅206はそれを含まない（実測: 800にすると実描画 206.98 = 206 + 1.12 - 0.14）。
   これで マーク左端(絶対1098) と 番号のインク右端(絶対1336) が両方0.15px以内に収まる */
#section7 .is-in > div > a:first-child > span:first-child {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: -1px;
  margin-right: -1.12px;
  font-family: var(--f-num);
  font-size: var(--fs-tel-lg);
  font-weight: 800;
  line-height: var(--lh-tel-lg);
  letter-spacing: var(--ls-tel-lg);
}

/* アイコンは行の上端から9.145px下（フリーダイヤルマーク 28x18） */
#section7 .is-in > div > a:first-child > span:first-child img {
  margin-top: 9.145px;
}

#section7 .is-in > div > a:first-child > span:last-child {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--c-on-navy-sub);
}

/* ===== S11 footer =====
   Figma: 146:34352（1920x235）。背景 --c-footer-bg。
   最上部の3pxバーは共通部品 .accent-bar。
   縦（footer上端からの絶対y）:
     バー        0 〜 3
     主要行      3 〜 179（内容は 51 〜 147 = ロゴ28 + 10 + 連絡先38）
     下部バー    179 〜 235（1pxのヘアライン + 内側55: 上下18パディング）*/

footer {
  background: var(--c-footer-bg);
}

/* --- 主要行（ロゴ・連絡先 / ナビ） ---
   align-items が stretch だとナビが行の高さまで伸びる（16 → 77）ので flex-start。
   高さ176 = 上48 + 左ブロック96 + 下32 */
footer .accent-bar + div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: var(--w-content);
  padding: 48px var(--pad-x) 32px;
  margin-inline: auto;
}

/* 左ブロックのFigmaフレームは 353.06x96（中身は 0〜76 で下に20pxの余り）*/
footer .accent-bar + div > div {
  width: 353.06px;
  height: 96px;
}

footer .accent-bar + div > div > p:first-child a {
  display: block;
  width: 156.915px;
}

/* 連絡先ブロック（電話 / 営業時間 / メール）。ロゴ下端28 → 38 なので10px空ける。
   3要素はFigma上で重なりを含む座標に置かれているため絶対配置で再現する
   （営業時間 x=109.33 は電話番号のボックス右端 116 より左。全角カッコの
   左サイドベアリング分だけ食い込ませたデザイン。S06の3bカードと同じ判断）*/
footer .accent-bar + div > div > p:last-child {
  position: relative;
  height: 38px;
  margin-top: 10px;
}

footer .accent-bar + div > div > p:last-child > a {
  position: absolute;
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

/* 電話番号は Figtree 14px（テキスト高17px）。マークは 17x11 で 2px 下 */
footer .accent-bar + div > div > p:last-child > a:first-of-type {
  top: 4px;
  font-family: var(--f-num-alt);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 17px;
  color: var(--c-white);
}

footer .accent-bar + div > div > p:last-child > a:first-of-type img {
  margin-top: 2px;
}

footer .accent-bar + div > div > p:last-child > span {
  position: absolute;
  top: 5px;
  left: 109.33px;
  font-size: var(--fs-xs);
  line-height: 14px;
  /* #bcd0ec（get_design_context で確認）。--c-footer-note #8ca6c6 ではない */
  color: var(--c-on-navy-sub);
}

/* メール行。1行目の下（y=26）から始まる */
footer .accent-bar + div > div > p:last-child > a:last-of-type {
  top: 26px;
  font-size: var(--fs-sm);
  line-height: 16px;
  color: var(--c-white);
}

/* --- フッターナビ（4本・gap 22px。行高16pxは共通部品 .scp7 が持つ） --- */
footer nav {
  display: flex;
  gap: 22px;
}

/* --- 下部バー（注記 + コピーライト） --- */
footer > div:last-child {
  border-top: 1px solid var(--c-hairline-on-navy);
}

footer > div:last-child > div {
  display: flex;
  justify-content: space-between;
  width: var(--w-content);
  padding: 18px var(--pad-x);
  margin-inline: auto;
}

footer > div:last-child p {
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  color: var(--c-footer-note);
}

/* 注記(11px/18.7)より詳細度を上げる。`footer > div:last-child p` に負けると
   コピーライトが11pxで描かれ、幅が12px縮む。
   色も注記(--c-footer-note #8ca6c6)とは別で #bcd0ec（get_design_context で確認）*/
footer > div:last-child .co {
  font-size: var(--fs-xs);
  line-height: 14px;
  color: var(--c-on-navy-sub);
}

/* ===========================================================
   ページ全体の積み上げ（セクション間の隙間・重なり）
   S09〜S11 実装後の全体検証で入れた。**セクション単体の実装ではない**ため
   各セクションのブロックには書かず、ここに集約する（`.cache/stack.js` で検証）。

   Figma の section は main の中に**絶対座標で置かれた兄弟フレーム**なので、
   隙間と重なりが混在する。DOMは順に積むだけなので、その差を margin で埋める。
   放置すると **#plans5 以降が最大 113px 下にずれる**（セクション単体の
   スクショ差分は各セクション自身の位置を基準に切るため、この誤差は検出できない）。

   | 境界 | Figmaの実体 | 補正 | 残差 |
   |---|---|---|---|
   | MV → section1 | 2.19px の隙間 | +2 | -0.19 |
   | section1 → section2 | 2.19px の重なり | -2 | 0 |
   | section3 → section4 | 隙間なしだが section3(3a+3b)の実装が 1.06px 不足 | +1 | -0.06 |
   | section4 → #plans5 | **114.27px の重なり**（section4のフレーム下端が空。ボタン下端からマークまでは31.11px） | -114 | +0.14 |
   | #plans5 → section6 | **54.95px の隙間** | +55 | +0.17 |
   | section6 → section7 | 4.22px の重なり | -4 | +0.36 |
   | section7 → footer | 0.44px の重なり | -1 | — |

   **補正は必ず整数pxで入れる。** 小数で入れると各セクションの切り出し位置の
   小数部（位相）が変わり、罫線とグリフのラスタライズが1デバイスpx動く。
   実測: 正確な -114.27px を入れたら **S08 が 0.33% → 1.45%** に跳ねた
   （罫線11本 × 930px が1px下にずれた分）。整数にすれば位相は保たれ、
   S01〜S08 の差分は**下記のボタン混入分を除いて1pxも変わらない**。
   Figma実値との残差は最大0.36pxで、これは元々ある小数座標より小さい。

   **main 自体の2pxは直していない。** Figmaの main は y=70 で header(0〜72)に
   2px 食い込んでいるが、DOMで再現すると MV の濃紺が header の下ボーダーを覆い、
   検証済みの S01-header の差分（1.20%）が悪化する。Figma側もレイヤー順では
   header が main の後ろにあり、単体スクショ（＝参照画像）とはそもそも一致しない。
   =========================================================== */
#section1 {
  margin-top: 2px;
}

#section2 {
  margin-top: -2px;
}

/* section3 は 3a(#section3) + 3b(#section3-lang) の合計が Figma より 1.06px 低い。
   3b の下パディング側の誤差だが、S06 の差分は検証済みなので下流で吸収する */
#section4 {
  margin-top: 1px;
}

#plans5 {
  margin-top: -114px;
}

#section6 {
  margin-top: 55px;
}

#section7 {
  margin-top: -4px;
}

footer {
  margin-top: -1px;
}