/* ============================================================
   LATERAL — 基盤（リセット／タイポグラフィ／レイアウト）
   数値の正本: design_handoff_2026-08-12/README.md §2 §6 §7
   ============================================================ */

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

html {
  /* README §6: 横スクロールを出さない。
     ⚠ `overflow-x: hidden` にしてはいけない。
        hidden にすると overflow-y が auto に昇格してスクロール容器が生まれ、
        中の position:sticky（追従ヘッダー）が固定されて動かなくなる。
        `clip` はスクロール容器を作らないので、sticky と両立する。
        2026-08-12 に実際に踏んで、ブラウザ上で clip の効果を確認した。 */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;      /* ⚠ hidden にしない（上の注記参照。追従ヘッダーが死ぬ） */
  background: var(--c-ground);
  color: var(--c-text);
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 2.15;
  /* 日本語の禁則と両端揃え */
  line-break: strict;
  text-align: justify;
  text-justify: inter-character;
}

@media (min-width: 768px) {
  body { font-size: 15px; line-height: 2.2; }
}

img, svg { max-width: 100%; height: auto; vertical-align: middle; }

a {
  color: var(--c-link);
  text-underline-offset: .2em;
}
a:hover { color: var(--c-link-hover); }

/* ---- 見出し ----
   日本語見出しは palt で詰める（README §2） */
h1, h2, h3 {
  margin: 0;
  font-weight: 900;
  font-feature-settings: 'palt';
  line-height: 1.5;
  text-align: left;   /* 見出しは両端揃えにしない */
}

h1 { font-size: 30px; line-height: 1.5; }   /* 下層ページタイトル */
h2 { font-size: 22px; }
h3 { font-size: 17.5px; }

.is-fv h1 { font-size: 34px; line-height: 1.55; }  /* FVキャッチのみ別サイズ */

@media (min-width: 768px) {
  h1 { font-size: 44px; line-height: 1.4; }
  h2 { font-size: 34px; }
  h3 { font-size: 22px; }
  .is-fv h1 { font-size: 58px; line-height: 1.5; }
}

p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }

/* ---- 補助テキスト ---- */
.t-sub {
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--c-text-sub);
}
@media (min-width: 768px) {
  .t-sub { font-size: 13px; line-height: 1.95; }
}

/* ---- 英字ラベル（SERVICE 等） ---- */
.t-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .26em;
  line-height: 1;
  color: var(--c-link);
  text-align: left;
}
@media (min-width: 768px) { .t-label { font-size: 11px; } }

/* ============================================================
   レイアウト
   ============================================================ */

.l-wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* 面。地（白）と区切り面（薄クリーム）を交互に置く。
   ⚠ 色差が 1.051 しかないので、罫線・余白でも切れ目を作ること。 */
.l-section { position: relative; padding-block: var(--sec-y); }
.l-section--panel  { background: var(--c-panel); }
.l-section--ground { background: var(--c-ground); }
.l-section--contact {
  background: var(--c-contact-bg);
  color: var(--c-contact-text);      /* ⚠ 純白ではない。実物は #FCF9F3 */
}
/* ⚠ ここに `.l-section--contact a { color: ... }` を書いてはいけない。
   詳細度(0-2-1)がページ側のボタン指定(0-1-0)より高く、後から読むCSSを上書きして
   ボタンの文字が背景と同色になる（2026-08-12 に実際に起きた）。
   確定デザインのCONTACT面に素のテキストリンクは無く、あるのは塗りボタンだけ。 */

/* 図形レイヤーの受け皿。各面が overflow:hidden を持つため、
   スクロール連動は scroll()/view() ではなく rAF で駆動する（README §5・§11） */
.l-section > .js-orbit {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.l-section > .l-wrap { position: relative; z-index: 1; }

/* 本文の行長を抑える（PC 最大560〜620px＝1行30〜37字） */
.l-measure { max-width: var(--measure); }

/* 見出し＋本文の2カラム。768〜1023pxは右カラムが狭く窮屈になるため縦積みのまま維持し、1024pxからカラム化 */
.l-split { display: grid; gap: 20px; }
@media (min-width: 1024px) {
  .l-split { grid-template-columns: minmax(320px, 400px) 1fr; gap: 48px; }
}

/* カードの折り返し。README §7 の各列数はこれで満たせる */
.l-cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ============================================================
   アクセシビリティの下限（README §6）
   ============================================================ */

/* タップ領域 44px 以上 */
.l-tap { display: inline-flex; align-items: center; min-height: 44px; }

/* フォーム入力は 16px 未満にしない（iOSの自動ズーム防止） */
input, select, textarea { font-size: 16px; font-family: inherit; }

/* キーボード操作の可視化 */
:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================
   モーション（README §5）
   「画面に入ったら20px下からフェードイン」。塊単位で発火し、
   セクション内で80msずつ遅延（最大4段=320ms）。一度出したら隠さない。
   ============================================================ */

.js-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s cubic-bezier(.22,.7,.28,1),
              transform .5s cubic-bezier(.22,.7,.28,1);
}
.js-reveal.is-in { opacity: 1; transform: none; }

.js-reveal[data-step="1"] { transition-delay: 80ms; }
.js-reveal[data-step="2"] { transition-delay: 160ms; }
.js-reveal[data-step="3"] { transition-delay: 240ms; }
.js-reveal[data-step="4"] { transition-delay: 320ms; }

/* ⚠ README §5: reduce では完全無効化する（追従ヘッダーの表示制御だけ機能として残す） */
@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1; transform: none; transition: none; }
  .js-orbit  { display: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}