/* ============================================================
   パターンC「ゲーム盤」
   オセロ盤のみどり・黒と白の石・金色。太い黒のふちどり。
   「ゲームのサービス」だとひと目で分かる、元気な印象。
   ※ 盤の色そのものが見た目の軸なので、ダークモードは用意せず
     この配色で固定しています。
   ============================================================ */

:root {
  color-scheme: light;
  --font-head: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic", sans-serif;
  --font-body: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --head-weight: 800;

  --bg: #fafaf6;
  --surface: #ffffff;
  --surface-alt: #eef1ea;
  --text: #121412;
  --muted: #3f4540;
  --line: #121412;
  --line-soft: #d6dbd3;
  --border-w: 3px;

  --primary: #1d6b44;
  --on-primary: #ffffff;
  --link: #1d6b44;
  --focus: #f2c230;

  --cta: #f2c230;
  --cta-hover: #ffd65a;
  --cta-text: #121412;
  --btn-shadow: 4px 4px 0 #121412;
  --card-shadow: 5px 5px 0 #121412;

  --radius: 14px;
  --radius-btn: 14px;
  --radius-no: 50%;
  --radius-input: 10px;

  --header-bg: #121412;
  --header-text: #ffffff;
  --hero-bg: #1d6b44;
  --hero-text: #ffffff;
  --eyebrow: #121412;

  --tag-bg: #f2c230;
  --tag-text: #121412;
  --ok: #1d6b44;
  --ok-text: #ffffff;
  --price: #1d6b44;

  --apply-bg: #1d6b44;
  --apply-text: #ffffff;
  --input-bg: #ffffff;
  --input-line: #3f4540;
  --footer-bg: #121412;
  --footer-text: #e9ece8;

  --icon-board: #1d6b44;
  --icon-cell: #fff8d6;
  --icon-accent: #1d6b44;
  --stone-black: #121412;
  --stone-white: #ffffff;
}

/* ---- パターンCだけの見た目 ---- */
.site-header { border-bottom-color: var(--cta); }
.btn-cta { border-color: #121412; }

/* ファーストビューにオセロ盤のマス目を敷く */
.hero {
  background-color: var(--hero-bg);
  background-image:
    linear-gradient(rgba(0, 0, 0, .18) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0, 0, 0, .18) 2px, transparent 2px);
  background-size: 76px 76px;
  border-bottom: 3px solid #121412;
}
.eyebrow { background: var(--cta); padding: 2px 16px; border-radius: 999px; border: 2px solid #121412; }

/* 石のマーク */
.brand-mark { position: relative; }
.brand-mark::before, .brand-mark::after {
  content: ""; position: absolute; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #ffffff;
}
.brand-mark::before { left: 0; top: 0; background: #121412; }
.brand-mark::after { right: 0; bottom: 0; background: #ffffff; border-color: #121412; }

/* ステップ番号は黒石・白石を交互に */
.step:nth-child(odd) .step-no { background: #121412; color: #ffffff; }
.step:nth-child(even) .step-no { background: #ffffff; color: #121412; border: 3px solid #121412; }

.checks li::before { background: #121412; color: #ffffff; }
.sec.alt { border-block: 3px solid #121412; }
.form { box-shadow: 6px 6px 0 #121412; }