/* ---------- primitive ---------- */
:root{
  --blue-800:#0a3a8f;      /* 主たる青。文字・枠・focus */
  --blue-700:#1a5ad4;      /* CTA グラデーションの明るい端だけに使う。白文字 6.07 */
  --gold-700:#926700;      /* 金の文字。白地 5.05・beige 4.64 */
  --gold-400:#c8a24e;      /* 金の装飾。コントラスト 2.4 のため文字には使わない */
  --red-700:#a45147;       /* エラー。白地 5.46。DS の error と同値 */
  --warmgray-900:#252422;  /* 見出し・暗幕・暗い面の地 */
  --warmgray-800:#3f3c38;  /* 本文 */
  --warmgray-600:#656159;  /* 補足。白地 6.16・beige 5.66 */
  --warmgray-500:#8c8a88;  /* 入力欄の枠。白地 3.44。UI 部品の 3:1 を満たす */
  --warmgray-400:#a4a29e;  /* プレースホルダ。白地 2.55。DS の placeholder と同じ明るさ */
  --warmgray-300:#bfbdba;  /* 暗い面の補足文字。warmgray-900 上 8.27 */
  --beige-100:#f7f5f2;
  --white:#ffffff;

  /* font-en は Inter に CJK が無いため、Noto Sans JP を後ろに置いて和文を落とす */
  --font-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",meiryo,sans-serif;
  --font-en:"Inter","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --text-xs:0.75rem;
  --text-sm:0.875rem;  --leading-sm:1.6;
  --text-md:1rem;      --leading-md:1.6;
  --text-lg:1.125rem;
  --text-xl:1.25rem;
  --text-2xl:1.5rem;
  --text-4xl:2rem;     --leading-4xl:1.4;  /* display 拡張（ヒーロー見出し） */

  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-7:2rem;
  --space-8:2.5rem;
  --space-9:3rem;
  --space-10:3.5rem;
  --space-11:4rem;
  --space-12:5rem;     /* セクションの余白・ブロック間の間隔 */
  --space-13:7rem;     /* ヒーローの余白 */

  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:8px;
  --radius-xl:16px;    /* リンクでない面。lg のカードと形を分ける */
  --radius-full:9999px;

  /* motion：登場は decelerate、退場は accelerate で1段速く */
  --motion-fast:150ms;
  --motion-base:220ms;
  --motion-slow:330ms;
  --ease-standard:cubic-bezier(0.2,0,0,1);
  --ease-decelerate:cubic-bezier(0,0,0,1);
  --ease-accelerate:cubic-bezier(0.3,0,1,1);

  --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md:0 1px 2px 0 rgba(0,0,0,.06),0 6px 18px 0 rgba(0,0,0,.07);
  --shadow-lg:0 4px 12px 0 rgba(0,0,0,.1),0 12px 32px 0 rgba(0,0,0,.12);
  --z-sticky:100;
  --z-modal:1200;
}

/* ---------- semantic：部品はこちらだけを参照する ---------- */
:root{
  --color-surface:var(--white);
  --color-surface-brand:var(--beige-100);
  --color-surface-inverse:var(--warmgray-900);
  --color-on-surface-inverse:var(--white);
  --color-on-inverse-subtle:var(--warmgray-300);
  --color-scrim:rgba(37,36,34,.8);

  --color-accent:var(--blue-800);
  --color-on-accent:var(--white);
  --color-brand-secondary:var(--gold-700);       /* 金の文字。ラベル・タグ */
  --color-brand-gold:var(--gold-400);            /* 金の装飾。罫・番号・アイコン */
  --color-focus:var(--color-accent);
  --color-overlay-neutral:rgba(63,60,56,.08);
  --color-overlay-neutral-strong:rgba(63,60,56,.16);

  /* 文字は3段：heading・text・subtle */
  --color-text:var(--warmgray-800);
  --color-text-heading:var(--warmgray-900);
  --color-text-subtle:var(--warmgray-600);
  /* 記入例だけに使う。ラベルの代用を禁じているためコントラストは免除（DS common.md §コントラスト） */
  --color-placeholder:var(--warmgray-400);

  --color-border:rgba(63,60,56,.08);
  /* 入力欄の枠。--color-border（8%）では枠として見えない */
  --color-border-strong:var(--warmgray-500);

  /* エラー。枠と文言に使う。地には敷かないため on- の対を持たない（→ README §色） */
  --color-error:var(--red-700);

  /* 3ストップ（暗→明50%→暗）。background-size:200% で左半分だけを見せる（→ .btn--primary）。
     hover は位置を右へ送り、明るい側だけ text 方向へ 35% 深化させる */
  --grad-cta:linear-gradient(90deg,var(--blue-800),var(--blue-700) 50%,var(--blue-800));
  --grad-cta-hover:linear-gradient(90deg,var(--blue-800),
    color-mix(in srgb,var(--blue-700) 65%,var(--color-text)) 50%,var(--blue-800));

  --max-content:1232px;
  --max-action:400px;   /* 縦積みにした導線の上限 */
  --max-text:42em;      /* 本文の行長の上限。文字数で持つため em（→ README §トークン） */
  --max-article:56em;   /* お知らせの本文の行長の上限。--max-text より広く取る（→ README §お知らせ） */
  --max-list:896px;     /* 行で並べる一覧の幅。ニュース行の固定ぶん 324px ＋ 見出し35字 */
}

@media (max-width:720px){
  :root{
    --text-4xl:1.75rem;
  }
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* 内容が viewport に満たないページでフッターを下端へ送る。長いページでは通常の流れのまま */
body{
  margin:0;background:var(--color-surface);color:var(--color-text);
  font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--leading-md);
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100dvh;
}
main{flex:1 0 auto}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{margin:0;line-height:1.4;font-weight:var(--weight-bold)}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
/* height:auto へ遷移できるようにする（→ components.css の FAQ）。未対応ブラウザは無視する */
:root{interpolate-size:allow-keywords}

/* アイコンは currentColor・1em。icon-only だけ rem で固定する */
.ic{width:1em;height:1em;flex:none}

/* focus リング共通。outline:none にしない */
a:focus-visible,
summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-sm)}

/* 読み上げ専用 */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--max-content);margin:0 auto;padding:0 var(--space-7)}
.section{padding:var(--space-12) 0}
/* ページ内リンクの着地点が固定バー（実測 57px）の下に隠れないようにする */
section[id]{scroll-margin-top:var(--space-10)}

/* ---------- 共通セクション見出し ---------- */
.section-head{display:flex;flex-direction:column;gap:var(--space-4)}
.section-label{
  font-family:var(--font-en);font-weight:var(--weight-semibold);
  font-size:var(--text-md);letter-spacing:.08em;
  color:var(--color-brand-secondary);
}
.section-title{
  font-size:var(--text-2xl);letter-spacing:.06em;
  color:var(--color-text-heading);
}
/* 節内の従属ブロックの見出し。節見出しより1段小さく、英字ラベルは付けない */
.subsection__title{
  padding-left:var(--space-4);border-left:4px solid var(--color-brand-gold);
  font-size:var(--text-xl);letter-spacing:.04em;line-height:1.5;
  color:var(--color-text-heading);
}

/* letter-spacing はブランド意匠のため DS の「0固定」を採らず、部品ごとに em で指定する */