/* デザイントークン（正本: uploads/02_TOKENS.md）— 直値の使用禁止。ここにない値を足さない */
:root {
  /* 地色 */
  --base: #FFFFFF;
  --base-warm: #FFF6E5;
  --base-green: #EFF6E8;
  /* 文字・面 */
  --ink: #4A3F35;
  --ink-weak: #726759;   /* 淡緑上でも4.5:1を確保（a11y監査） */
  --primary: #7FB069;        /* 装飾の面のみ。文字を載せない */
  --primary-deep: #47702F;   /* 文字を載せる緑の面 */
  --primary-pale: #EDF3E6;   /* ピル背景（文字は primary-deep） */
  --accent: #E4694E;         /* 強調の面のみ。文字を載せない */
  --accent-deep: #C9482E;    /* CTAボタン背景 */
  --accent-deep-hover: #A63A24;
  --soil: #B08A62;
  --card-warm: #FFF9EE;
  /* 素材（イラスト）専用パレット。UIに使わない */
  --pale-green: #B7D49B;
  --pale-cream: #F2DEB0;
  --pale-tomato: #F0A99A;
  --pale-sky: #A9CBE0;
  --pale-soil: #D5BC9E;
  /* 線 */
  --line: #E4E0D2;
  --rule-dotted: 1px dotted color-mix(in srgb, var(--soil) 50%, transparent);
  /* スペーシング（8の倍数スケール） */
  --sp-8: 8px; --sp-16: 16px; --sp-24: 24px; --sp-40: 40px;
  --sp-48: 48px; --sp-80: 80px; --sp-96: 96px; --sp-120: 120px;
  /* レイアウト */
  --container: 1200px;
  --container-narrow: 960px;
  --section-pad: 120px;       /* 判断情報系は 96px */
  --section-pad-info: 96px;
  --cta-band-pad: 64px;       /* CTA帯の上下padding */
  --gap-3col: 48px;
  --gap-2col: 80px;
  --card-pad: 40px;
  /* 角丸 */
  --r-card: 8px;   /* カード・ボタン・タグ */
  --r-panel: 16px; /* 大きな面（図解の背景など） */
  --r-input: 6px;
  --r-pill: 999px; /* ヘッダー補助リンクのピル形状 */
  /* タイポ */
  --fs-h1: calc(44 / 16 * 1rem); --fs-h2: calc(34 / 16 * 1rem); --fs-h3: calc(20 / 16 * 1rem);
  --fs-lead: calc(17 / 16 * 1rem); --fs-body: calc(16 / 16 * 1rem); --fs-small: calc(14 / 16 * 1rem);
  --fs-btn: calc(19 / 16 * 1rem); --fs-tag: calc(14 / 16 * 1rem); --fs-num: calc(40 / 16 * 1rem); --fs-eyebrow: calc(14 / 16 * 1rem);
  --fs-logo: calc(30 / 16 * 1rem); /* ヘッダーのロゴ（10_HEADER_FIX） */
  --accent-gold: #9A7B1E; /* 見出しの色分け専用（本文には使わない） */
  --focus-ring: #000000;
  --focus-halo: #FFD43D;
  --line-structural: #8E8570; /* 表・情報リストの行区切り（3:1確保） */
  --deco-bleed: 120px;   /* コンテンツの外側にどれだけ装飾を出すか */
  --header-pad: 8px;  /* ヘッダー上段の上下padding（FVを見せるためコンパクトに） */
  /* コンポーネント寸法 */
  --icon-nav: 76px;    /* ナビのイラスト（参考実測比率約4.6倍に合わせる。10_HEADER_FIX） */
  --nav-item-w: 160px; /* ナビ項目の幅（圧縮時は縮小） */
  --icon-sm: 32px;
  --icon-heading: 64px;
  --dot: 24px;         /* 丸アイコン図解の丸 */
  --step-circle: 48px; /* ステップ図の番号丸 */
  --btn-h: 64px;
  --btn-w: 360px;      /* プライマリボタン（画面の約1/4） */
  --tap-min: 48px;
  --wave-h: 24px;      /* shape-01 の帯の高さ */
  --edge-h: 40px;      /* 境界の波形の高さ */
  --edge-h-lg: 48px;   /* 境界の雲形スカラップの高さ */
  --edge-wedge-h: 24px; /* 斜めの切り返しの高さ */
}
html { scroll-behavior: smooth; scroll-padding-top: 160px; }
body {
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--base);
}
a { color: var(--primary-deep); }
a:hover { color: var(--accent-deep-hover); }
img { max-width: 100%; }
/* ヘッダーのスクロール追従（追従時は下端を直線に） */
.header-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.header-static { position: relative; }
/* フォーカスインジケーター（デジタル庁DSの2重構造。形状は変更しない） */
:focus-visible {
  outline: 4px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--focus-halo);
}
.skip-link {
  position: absolute; left: var(--sp-8); top: var(--sp-8); z-index: 1000;
  display: inline-flex; align-items: center;
  min-height: var(--tap-min); padding: 0 var(--sp-24);
  background: var(--base); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-card);
  font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
.visually-hidden {
  clip-path: inset(50%); height: 1px; width: 1px;
  overflow: hidden; position: absolute; white-space: nowrap;
}
/* 装飾専用レイヤー：コンテンツ幅＋両側bleedで中央固定（z-indexは書かない） */
/* 2段階ヘッダー（デスクトップのみ・compact時に上段を隠しロゴマークを出す） */
.header-navrow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } /* 1frが左右等幅なのでロゴ幅によらずナビが中央 */
.header-logomark { grid-column: 1; justify-self: start; display: none; align-items: center; gap: var(--sp-8); min-height: var(--tap-min); text-decoration: none; color: var(--ink); }
.header-compact .header-logomark { display: inline-flex; animation: logo-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.header-compact .header-top { display: none !important; }
.header-compact .header-inner { padding-top: var(--sp-8) !important; } /* 圧縮時は上余白を詰める */
/* 圧縮時はナビのイラストを縮小してヘッダー全体を低くする（トークン再定義で inline の var() に効かせる） */
.header-compact { --icon-nav: var(--sp-40); --sp-80: var(--sp-48); --nav-item-w: 136px; }
.header-navrow nav img { transition: width 0.25s, height 0.25s; }
@keyframes logo-pop { from { opacity: 0; transform: translate(-10px, 12px) scale(0.94); } } /* 上段のロゴ位置からふわっと */
@keyframes top-return { from { opacity: 0; transform: translateY(10px); } }
.header-fixed:not(.header-compact) .header-top { animation: top-return 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
/* 右下の問い合わせボタン（compact時のみ・デスクトップのみ） */
.float-tel {
  position: fixed; right: var(--sp-24); bottom: var(--sp-24); z-index: 90;
  display: none; align-items: center; text-decoration: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
}
.float-tel-num {
  display: inline-flex; align-items: center; height: 56px;
  padding: 0 46px 0 22px; margin-right: -38px; /* 円の下に潜り込ませる */
  background: var(--base); border: 2px solid var(--primary-deep);
  border-radius: var(--r-pill); color: var(--primary-deep);
  font-weight: 700; font-size: calc(16 / 16 * 1rem);
}
.float-tel-circ {
  width: 72px; height: 72px; border-radius: var(--r-pill);
  background: var(--primary-deep); color: var(--base);
  border: 2px solid var(--base);
  display: inline-flex; align-items: center; justify-content: center;
}
body.is-compact .float-tel { display: inline-flex; opacity: 1; transform: translateY(0); }
@media (max-width: 900px) { .float-tel { display: none !important; } }
@media (max-height: 400px) { .float-tel { position: static; } }
.deco-layer {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  max-width: calc(var(--container) + var(--deco-bleed) * 2);
  margin: 0 auto;
  pointer-events: none;
}
/* 拡大時は固定電話CTAを通常フローに戻す（リフロー 1.4.10） */
@media (max-height: 400px) {
  .fixed-tel-cta { position: static !important; }
}
.header-scrolled { border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}