/* 共通コンポーネント
 * ヘッド（計画フェーズ）で確定。各セッションは編集せず、使うだけ。
 * 足りない部品があれば実装せず PROGRESS.md に報告すること。
 *
 * クラス名はすべてFigmaのレイヤー名に由来する（CONVENTIONS.md 参照）。
 * 例外は装飾レイヤー（.deco*）のみ。デザイン側に名前が無いためヘッドで命名した。
 */

/* ===========================================================
   アクセントバー — ヘッダー最上部・フッター最上部の3px
   =========================================================== */
.accent-bar {
  width: 100%;
  height: var(--h-accent-bar);
  background: var(--g-accent-bar);
}

/* ===========================================================
   ボタン
   =========================================================== */

/* .scp1 — 青いCTAボタン（グラデ）
   出現: header 124x39 / MV 192x49 / section4 145x40
   サイズ差はフォントサイズとパディングによる。ベースは header 実測値。 */
.scp1 {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  font-family: var(--f-body);
  font-size: var(--fs-base);
  font-weight: 700;
  /* Figmaの14px Noto Sans JP のテキスト高は17px（ブラウザ既定のnormalは20px）。
     揃えないと高さが3px膨らむ。実測: btn 42px → 39px */
  line-height: 17px;
  color: var(--c-white);
  background: var(--g-button);
  border-radius: var(--r-sm);
}

/* .scp1 は出現ごとにフォントサイズが違うので、**サイズと line-height はセットで持つ**。
   Figmaのテキスト高: 14px→17px / 15px→18px / 16px→19px。
   セットで持たないと、サイズだけ上書きした箇所でボタン高が1〜4px狂う。 */
#section4 .scp1 {
  font-size: var(--fs-btn-lg); /* 15px */
  line-height: 18px;
}

/* .scp2 — 白抜きボタン（濃紺背景の上）
   出現: MV 162x49
   Figmaの padding は 15px 33px だが、Figmaはボーダーを枠の内側に描くため
   CSSでは上下左右それぞれ1pxを引く（引かないと 162x49 が 164x51 になる）。
   line-height はFigmaの16pxテキスト高。無いと normal(23px) で4px膨らむ。 */
.scp2 {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 19px;
  color: var(--c-white);
  border: 1px solid var(--c-border-on-navy);
  border-radius: var(--r-md);
}

/* .scp6 — 白ボタン（濃紺背景の上）
   出現: section7 164x49
   line-height はFigmaの16pxテキスト高。15 + 19 + 15 = 49。
   無いと normal(23px) で 53px になる（S10で発見・ヘッド反映済み） */
.scp6 {
  display: inline-flex;
  align-items: center;
  padding: 15px 34px;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 19px;
  color: var(--c-navy);
  background: var(--c-white);
  border-radius: var(--r-md);
}

/* ===========================================================
   ナビゲーション
   =========================================================== */

/* .scp0 — ヘッダーナビのリンク（非現在地） */
.scp0 {
  display: inline-flex;
  padding: 8px 12px 10px;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 17px; /* Figmaのテキスト高。実測: 38px → 35px */
  color: var(--c-text);
}

/* 現在地はデザイン上クラスが無く素の a。header 実装時にスコープして書く。
   （Bold / color: var(--c-navy) / border-bottom: 2px solid var(--c-navy)） */

/* .scp7 — フッターナビのリンク
   line-height はFigmaの13.5pxテキスト高（4本とも16px）。S11で発見・ヘッド反映済み */
.scp7 {
  font-size: var(--fs-nav-sm);
  font-weight: 400;
  line-height: 16px;
  color: var(--c-on-navy-sub);
}

/* ===========================================================
   見出しブロック（h2_mark + h2 + リード文）
   6セクションで共有: section2 / 3a / 3b / 4 / #plans5 / 6

   【重要】共有されているのは「中央寄せ」と .h2-mark の寸法だけ。
   フォント・サイズ・行間・色は**セクションごとに全部違う**（S04/S05で実測）:

     components.css 旧定義  Zen Kaku 30px / --c-navy   | 15.5px / 31px / --c-text
     section2 (S04)         Noto Sans JP Bold 34px/58px | 16px / 32px
     section3a (S05)        Noto Sans JP Bold 30px/36px / 白 | 15px / 18px / 白

   一致する項目が1つも無いため、値は共通部品として持たない。
   各セクションが自分で指定すること（デフォルト値を置くと、上書き漏れが
   「それらしく描画される」形で隠れてしまい、詰めの往復が増える）。
   =========================================================== */
.h2-mark {
  width: 22.969px;
  height: 35.894px;
}

h2.is-in,
h2.is-in + p.is-in {
  text-align: center;
}

/* ===========================================================
   カード
   =========================================================== */

/* .scp3 — カード（3バリアント）
   section3a  div.scp3     380x373 / 380x346  ×6
   section3b  article.scp3 285x283            ×4
   section4   article.scp3 288x383            ×4
   ベースは section4 の実測値。他バリアントの角丸・枠は各セッションで要確認。 */
.scp3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  background: var(--c-white);
  border: var(--bd);
  border-radius: var(--r-sm);
}

/* .scp4 — カード内の連番 + 下線アクセント
   出現: section3a ×6 */
.scp4 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  font-family: var(--f-num-alt);
  font-size: var(--fs-md);
  font-weight: 800;
  /* Figmaの16pxテキスト高。無いと normal(26.59px) で描かれ、
     ブロック高が 30（19 + gap8 + ::after3）→ 37.59 に膨らむ */
  line-height: 19px;
  color: var(--c-blue);
  letter-spacing: var(--ls-num-sm);
}

.scp4::after {
  display: block;
  width: 30px;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--c-blue), var(--c-cyan));
  border-radius: var(--r-pill);
}

/* .scp5 — ステップカード
   出現: section6 224x245 ×5（section6 にしか出ないが、部品としてヘッドが持つ）
   padding はFigma実値 25/20 から**ボーダー幅1pxを引いた値**。
   引かないと内容幅が 184 → 182 に縮み、`img { max-width: 100% }` で画像まで縮小される
   （S09で発見・ヘッド反映済み。padding + border の二重計上は S01/S06/S07 に続き4件目）*/
.scp5 {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  align-items: center;
  width: 224px;
  height: 245px;
  padding: calc(var(--card-pad-y) - 1px) calc(var(--card-pad-x) - 1px);
  overflow: hidden;
  background: var(--c-white);
  border: var(--bd);
  border-radius: var(--r-lg);
}

/* カード内画像。書き出しPNG（368x200）を**ちょうど半分**の 184x100 で置く。
   水色の下地（Rectangle 4）はPNGに含まれるのでCSSでは描かない。角丸だけ合わせる */
.scp5 img {
  border-radius: var(--r-sm);
}

/* ステップ番号の丸バッジ
   line-height はFigmaの14pxテキスト高。10 + 17 + 10 = 37 がバッジの高さ
   （S09で発見・ヘッド反映済み） */
.scp5 h3 > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  padding: 10px;
  margin-bottom: -5px;
  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);
  background: var(--c-white);
  border-radius: var(--r-pill);
}

/* 見出しは「バッジ 37 → -5 の重なり → タイトル 19」で高さ51。
   さらにブロック全体が画像に 13px 重なる（画像下端125 / h3上端112）ので、
   .scp5 の gap 8px を打ち消して -21px 送る。
   フォントは Zen Kaku ではなく **Noto Sans JP**（Figmaのテキスト高19px = 16px×1.19。
   Zen Kaku なら 23px になる）。base.css の h3 既定を上書きする。 */
.scp5 h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: -21px;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 19px;
  color: var(--c-navy);
  text-align: center;
}

.scp5 p {
  width: 100%;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-text);
  text-align: center;
}

/* ===========================================================
   装飾レイヤー（Figma: 装飾 138:14498）
   ページを縦断する背景装飾。セクションに属さないためヘッドで実装する。
   実体は「角丸の帯2本を -45° 回転させた組」が5つで、
   **書き出し済みPNG（bg_img001 / bg_img002）がその正本**。
   Figma上も5グループのうち2つのレイヤー名が bg_img001 / bg_img002 そのままで、
   bg_img002 だけ帯が幅広（700px / 標準は433.728px）。標準は4箇所で使い回す。

   2026-08-04 にCSS再現から画像に切り替えた。経緯:
   - AGENTS.md「vector をコードで再現しない。既存の書き出し画像を使う」に従う
   - PNGは**ちょうど2倍**の書き出し（インク実寸 742x1099 → 表示 371x549.5 が
     Figmaの回転後の実寸 370x549 と一致）。半分の寸法で置くと整数倍の縮小になる
   - PNGの寸法（931x1262）がFigmaのグループ寸法（562.7角）と合わないのは、
     グループ寸法が**回転前**のバウンディングボックスだから。実際の描画は
     371x549.5 で、PNGのインク範囲と一致する

   座標の基準（実測で確定）:
   - 装飾の子グループの x/y は **main 基準**（装飾フレーム基準ではない）
   - 報告される x/y は **回転前の座標系の原点**（= シアンの帯の左上）。
     回転はそこを中心に行われる
   - よって「画像の左上 = (x + 0.5, y - 364)」で一致する（幅広は y - 471）。
     実測: bg_img002 の帯の上端が参照画像と **0.4px** 一致
   =========================================================== */
/* z-index: セクションより**前面**に置く（`main > section` は z-index 1）。
   背面(0)にすると section2 / section6 の不透明背景に完全に隠れて1pxも描かれない。
   参照画像では section2 の左右端に帯がはっきり出ている（R値が238→224と約14階調落ちる）
   ので、Figma上も装飾はセクションの塗りより前面にある。
   帯は10%アルファなので前面でも本文の可読性は落ちない（pointer-events も無効）。
   ※この差はpixelmatchのしきい値(YIQ)に届かないため、スクショ差分では検出できない。
     画素値を直接読んで確認すること。 */
/* 座標は main 基準なので、コンテナは main の左上に置き、高さは持たせない
   （中身は全て絶対配置。ページ高に影響させないため height: 0）。
   z-index はセクション（`main > section` の 1）より**前面**。背面にすると
   section2 / section6 の不透明背景に隠れて1pxも描かれない。 */
.deco {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 0;
  pointer-events: none;
}

/* 書き出しPNGの半分の寸法で置く（2倍で書き出されているため） */
.deco img {
  position: absolute;
  width: 465.5px;
  height: 631px;
}

.deco img:nth-child(3) {
  width: 583.5px;
  height: 738px;
}

/* 5グループの配置。left = Figma実値x + 0.5 / top = Figma実値y - 364（幅広は -471）*/

/* 138:14505 bg_img001  x=1454.625 y=1165.625 … section1下部〜section2上部の右 */
.deco img:nth-child(1) {
  top: 801.625px;
  left: 1455.125px;
}

/* 138:14511 div       x=-85.375 y=1775.625 … section2 中ほどの左 */
.deco img:nth-child(2) {
  top: 1411.625px;
  left: -84.875px;
}

/* 138:14508 bg_img002 x=1224.625 y=2445.625 … section2 下部の右（帯が幅広） */
.deco img:nth-child(3) {
  top: 1974.625px;
  left: 1225.125px;
}

/* 138:14499 div       x=1454.625 y=5595.625 … section4下部〜料金プラン上部の右 */
.deco img:nth-child(4) {
  top: 5231.625px;
  left: 1455.125px;
}

/* 138:14502 div       x=-85.375 y=6215.625 … 料金プランの中〜下の左 */
.deco img:nth-child(5) {
  top: 5851.625px;
  left: -84.875px;
}