/* ==========================================================================
   base.css — リセット / タイポグラフィ基礎（tokens.css に依存）
   ========================================================================== */
*,*::before,*::after { box-sizing: border-box; }
/* scroll-padding-top：sticky ヘッダーの下にアンカー先が潜り込まないようにする。*/
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-height); }

/* ==========================================================================
   レスポンシブ：比率縮小アーキテクチャ（リビカル様サイトと同方式）
   --------------------------------------------------------------------------
   ブレークポイントごとに作り直さず、html の font-size を vw 連動で変えて
   rem 参照の全寸法を比率縮小する。ブレークポイントは 1280 / 767 / 390 の3点のみ。
   ※ 全寸法は rem（トークン var()）で書くこと。px は縮小に追従しない。
   ========================================================================== */
/* 第1フェーズ（PC→タブレット）：デザイン基準 1200px（--container-width 75rem）＋
   左右ガター 40px×2 = 80rem を 100vw に一致させ全体を縮小（100vw/80 = 1280pxで16px）。
   max-width: 75rem の中央寄せ要素はコンテンツ幅を保ち、余り（片側 2.5rem）が外側余白になる。
   下限は calc(1rem * 768 / 1280) = 9.6px（768px 幅 = コンテンツ 720px 相当）。
   ※ html の font-size 内の rem は初期値 16px を指す（自己参照にならない）。 */
@media (max-width: 1280px) {
  html { font-size: max(calc(100vw / 80), calc(1rem * 768 / 1280)); }
}
/* 1200px 枠の外へ意図的にはみ出す装飾（背景英字・波形等）はビューポート端でクリップし、
   横スクロールバーを出さない（clip はスクロールコンテナを作らず sticky を壊さない）。 */
@media (min-width: 768px) {
  html { overflow-x: clip; }
}
/* 第2フェーズ（SP：767px以下）：rem 基準を 0.8rem（本文 12.8px）に切り替え、
   SP基準幅 390px 以下では 100vw 連動で比率縮小（100vw/30.46875 = 390pxで12.8px）。
   SP 専用の上書きは各 CSS 末尾の @media (max-width: 767px) に書く。 */
@media (max-width: 767px) {
  html {
    font-size: min(0.8rem, calc(100vw / 30.46875));
    overflow-x: clip;
  }
  body { overflow-x: clip; }
}
body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,p,figure,ul,ol,dl,dd { margin: 0; }
ul,ol { padding: 0; list-style: none; }
img,svg,video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: var(--border-width-2) solid var(--color-primary); outline-offset: var(--space-2); }

/* 見出しの既定（各コンポーネントで上書き可）*/
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3-lg); }
h4 { font-size: var(--font-size-h4); }
h1,h2,h3,h4 { font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }

/* レイアウト共通：コンテンツ幅 75rem の中央寄せ。PC〜タブレットのガターは比率縮小で
   自動的に生まれる（80rem − 75rem）。SP は --container-width が 100% に切り替わり、
   左右 padding でガターを確保する。 */
.ic-container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
}
@media (max-width: 767px) {
  .ic-container { padding-inline: var(--space-24); }
}
/* 文節区切りユーティリティ（ic_phrase_esc の出力）。
   「/」で切った単位を塊にして、その境目でだけ折り返させる。 */
.ic-phrase { display: inline-block; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}