/* base.css — リセット＋ベーススタイル（tokens.css の変数を参照）
   ※ 余白・サイズ・色は数値直書きせず var() を使う */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* レスポンシブ第1フェーズ: デスクトップレイアウトを比率維持で縮小。
   デザイン基準幅 1200px = 75rem（--layout-max）+ 左右ガター 40px×2 = 80rem を
   100vw に一致させ、rem 参照している全寸法を連動して縮める（100vw/80 = 1280pxで16px）。
   max-width: var(--layout-max) の要素は中央寄せ済みのため、コンテンツ幅は常に
   75rem を保ち、余り（片側 2.5rem 相当）が外側の余白になる。
   下限は calc(1rem * 768 / 1280) = 9.6px（768px幅=コンテンツ720px相当）。
   ※ html の font-size 内の rem は初期値16pxを指す（自己参照にならない）。
   767px以下は下の SP ブロック（font-size: 0.8rem）で上書きする。 */
@media (max-width: 1280px) {
  html { font-size: max(calc(100vw / 80), calc(1rem * 768 / 1280)); }
}

/* デザイン要素（透かし英字・コラージュ等）は1200px枠の外へ意図的にブリードしており、
   Figmaではキャンバス端でクリップされる。ビューポート端で同様にクリップし、
   横スクロールバーの発生を防ぐ（clip はスクロールコンテナを作らず sticky を壊さない）。
   768px未満はSP未実装の間、768px相当レイアウトへ横スクロールで到達できるよう除外 */
@media (min-width: 768px) {
  html { overflow-x: clip; }
}

/* レスポンシブ第2フェーズ（SP）: 767px以下は rem 基準を 0.8rem（= 12.8px、本文
   --font-size-body が 12.8px になる）に切り替え、モバイル用レイアウト
   （各コンポーネント末尾の SP メディアクエリ）へ移行する。
   SPデザイン基準幅は 390px。390px 以下では PC と同じ考え方で 100vw に連動させ、
   rem 参照している全寸法を比率維持で縮める（100vw/30.46875 = 390pxで12.8px。
   30.46875 = 390 / 12.8）。390〜767px では 0.8rem 側が小さいため固定のまま。
   ※ html の font-size 内の rem は初期値16pxを指す（自己参照にならない）。
   はみ出す装飾はビューポート端でクリップする。 */
@media (max-width: 767px) {
  html {
    font-size: min(0.8rem, calc(100vw / 30.46875));
    overflow-x: clip;
  }
  /* html のclipはビューポートでは hidden 扱いになり、タッチ操作のパンでは
     横スクロールできてしまう。body 自身でもクリップして、はみ出し装飾が
     スクロール可能領域を広げないようにする（clip はスクロールコンテナを
     作らないため sticky ヘッダーは壊れない）。 */
  body {
    overflow-x: clip;
  }
  .container { padding: var(--space-32) var(--space-24); }
}

/* ウィンドウリサイズ中だけ（resize-optimize.js が is-resizing を付与）、
   画面外セクションのレイアウト計算をスキップして縮小追従を軽くする
   （計測: リサイズ1回あたり Layout 54ms → 2ms）。
   content-visibility は contain: paint を含むため、セクション枠外への
   はみ出し装飾がドラッグ中のみ一瞬クリップされるが、静止時は通常描画に戻る */
html.is-resizing section {
  content-visibility: auto;
  contain-intrinsic-size: auto 50rem;
}

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);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-16);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

p { margin: 0 0 var(--space-16); }

a { color: var(--color-primary); }

.text-xl {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.text-large {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.lead { color: var(--color-gray-dark); }

.container {
  max-width: 60rem; /* 960px */
  margin-inline: auto;
  padding: var(--space-48) var(--space-24);
}

/* section は既定で余白なし（Figma準拠でセクションは密着。
   個別の余白が要る場合は各セクションのpadding/個別marginで確保する） */
section { margin-block: 0; }

/* 改行ユーティリティ: nl2br 由来の <br> と併用し、PC/SP で改行を出し分ける。
   .only-pc の <br> は PC だけ改行し SP では無効化、.only-sp はその逆。
   PC 用の意図的改行が SP の自然折返しと衝突して 1〜3 文字の孤立行を作る問題を、
   SP では改行を消す or SP 専用位置へ差し替えることで解消する。 */
br.only-sp { display: none; }
@media (max-width: 767px) {
  br.only-sp { display: revert; }
  br.only-pc { display: none; }
}
/* 単語・数値+単位などを途中で折り返させない（例: 「37社」「グーチング®」） */
.nobr { white-space: nowrap; }

.swatches { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.swatch {
  width: var(--space-96);
  height: var(--space-64);
  border: 1px solid var(--color-gray);
  display: flex;
  align-items: flex-end;
  padding: var(--space-8);
  font-size: var(--font-size-h6);
  color: var(--color-white);
}