@charset "UTF-8";
/* ============================================================
   株式会社ヨコオ総研  1ページLP
   設計の正本は docs/design-spec.md。**段に無い値を足さない。**

   色は2つのロゴから機械で拾った実測値（目で選んでいない）。
     赤 #D50000  … ヨコオ総研のロゴの輪。不透明画素の約50%。**会社の色なので動かさない**
     黒 #0D0D0D  … GARAGE 450 のロゴの縁取り #010000（13.1%）を面で使える明るさへ
   組み合わせ9通りは全部 AA（4.5:1）を満たすことを測って確認済み。

   ⚠ ただし **赤を黒の上に置くと 3.54** で本文には足りない（大きい字なら可）。
     黒地の文字は白にすること。
   ============================================================ */

:root {
  color-scheme: light;

  /* ★ 2026-09-22 に濃紫紺から黒へ。あやちゃん指示「黒と赤のオシャレな感じ」。
     黒は GARAGE 450 のロゴから拾った実測 #010000（不透明画素の13.1%）を、
     面で使えるところまで少しだけ上げた値。赤は会社ロゴの #D50000 のまま
     （不透明画素の約50%。会社の色なので動かさない）。
     紫寄りだった ink-2 / muted / line も中立へ寄せた。紫が残ると黒基調が濁る。 */
  --ink:    #111111;
  --ink-2:  #666666;
  --base:   #FFFFFF;
  --muted:  #F5F4F4;
  --line:   #E2E0E0;
  --brand:  #D50000;
  --brand-d:#A00000;
  --deep:   #0D0D0D;

  /* 文字の段（10段。ここに無い大きさを使わない） */
  --t-1: 0.75rem;  --t0: 0.875rem; --t1: 1rem;    --t2: 1.125rem;
  --t3: 1.375rem;  --t4: 1.75rem;  --t5: 2.25rem; --t6: 3rem; --t7: 4rem;
  --t8: 6rem;      /* 96px。節の英語見出し（2026-09-22 に参考サイトの実測から追加） */

  /* 余白（4の倍数） */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
  --s6: 1.5rem; --s8: 2rem;  --s12: 3rem;  --s16: 4rem;
  --s20: 5rem;  --s24: 6rem; --s32: 8rem; --s40: 10rem;  /* 160px。節の上下 */

  --wrap: 64rem;        /* 1024px。参考サイトの 1020px に合わせた（2026-09-22） */
  /* ★ 中身の幅。**Service と Company で共有する**（2026-09-22 あやちゃん指示で揃えた）。
     はじめは `.sec--accent` の中だけに置いていたが、Service も使うので `:root` へ出した。
     **節ごとに別の値を書かないこと。** 前は会社概要が 44rem・Message の箱が 52rem・
     Service が 64rem で、1440px 幅で右端が最大 224px ずれていた。 */
  --content-w: 52rem;   /* 832px */
  --radius: .5rem;
  --header-h: 4.5rem;   /* 固定ヘッダーの高さ。アンカーの着地点に使う */
  /* ★ 次の節（Philosophy）がヒーローへどう接するか。**2か所で使うので1つで持つ。**
     ヒーローの Scroll の位置もこれを足して上げている。片方だけ変えると Scroll が円に隠れる。
     ★★ **正なら食い込み、負なら余白**（`.sec--rings` の `margin-top` が
       `-1 × (--s20 + これ)` なので、符号がそのまま結果に出る）。
     ★ 広い画面は **-160px ＝ 160px あける**（2026-09-23 あやちゃん選択。5案を並べて決めた）。
       それまでは 144px 食い込ませていた。**狭い画面は据え置き**（下の 40rem のところ）。 */
  --hero-overlap: -160px;
  /* ヒーローの下端を白へ溶かす高さ。**食い込みより深く、けれど深すぎない。**
     ・浅いと、円が届かない隅に溶けきっていない線が残る
     ・深いと、その上に置く Scroll が下がりすぎる
       （2.2倍にしたら 1440px 幅でリード文と 15px 重なった。実測で 1.2倍に落とした）
     ★ `max()` の下限 6.5rem は**狭い画面のため。** 倍率だけだと 375px 幅で 48px しかなく、
       写真から白への移り変わりが急になる（行から行への飛び 0.0385。PC の3倍） */
  --hero-fade: max(6.5rem, calc(var(--hero-overlap) * 1.2));
  /* ヒーローで**後から出るほう**（英字・リード文・Scroll）の遅れ。
     見出し「あなたの一歩目を支える。」が `.15s` で先に出て、そのあとこれ。
     ★ 順番を入れ替えるなら、`--hero-lag` を当てる相手を入れ替える
       （→ `docs/design-spec.md` の「ヒーローの文字」）。 */
  --hero-lag: .75s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  /* ★ 2026-09-22 修正。前は "Yu Gothic Medium" を2番手に置いていたが、
     **あれはファミリーではなく単一の字面**。指定すると全部の太さがその1本に固定され、
     300〜700 がすべて同じ見た目になる（実測で幅が完全一致した）。
     Hiragino は Mac / iOS にしか無い。Windows は Yu Gothic、Android は Noto Sans JP。 */
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-size: var(--t1);
  line-height: 1.9;
  color: var(--ink);
  background: var(--base);
}

img { max-width: 100%; height: auto; }
a { color: var(--brand); }
a:hover { color: var(--brand-d); }
/* 見出しの行間は詰める（参考サイトは 0.90〜1.18。本文はゆったりのまま）。
   ただし**日本語の小見出しまで 1.1 にすると 読みづらい**ので、
   大きい字（ヒーロー・節見出し）だけ強く詰める。 */
:where(h1,h2,h3) { line-height: 1.3; font-weight: 700; margin: 0; }
p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

/* 画面には出さないが、読み上げには届くもの（「新しいタブで開きます」など）。
   ★ 2026-09-22 の実害: LP へ書き直したとき「どこも使っていない」ので落としたら、
     あとで使ったときに**そのまま画面に出た**。赤い文字でロゴの横に並んだ。
     点検は「CSSにあってHTMLに無い」は見ていたが、**逆（HTMLにあってCSSに無い）を見ていなかった**。 */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* 画像を包むリンクは inline-block に。
   ★ そうしないと**当たり判定が画像とズレる**（2026-09-21 実測。80px の画像を
     包むリンクの高さが 21px だった）。 */
a:has(> img) { display: inline-block; line-height: 0; }

/* ============================================================
   固定ヘッダー（1ページなのでナビは節へのアンカー）
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--wrap); margin: 0 auto;
  min-height: var(--header-h);
  padding: var(--s2) var(--s4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6);
}
.site-header__brand {
  display: flex; align-items: center; gap: var(--s3);
  text-decoration: none; color: var(--deep); line-height: 1;
}
.site-header__brand img { width: 9rem; height: auto; }

.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
.site-nav a { display: grid; text-decoration: none; color: var(--deep); padding-block: var(--s2); text-align: center; }
.site-nav__en { font-size: var(--t0); font-weight: 700; line-height: 1.3; }
.site-nav__ja { font-size: 0.6875rem; font-weight: 500; color: var(--ink-2); line-height: 1.3; }
.site-nav a:hover .site-nav__en,
.site-nav a:hover .site-nav__ja { color: var(--brand); }

/* 固定ヘッダーのぶん、アンカーの着地点を下げる */
[id] { scroll-margin-top: calc(var(--header-h) + var(--s4)); }

/* ============================================================
   ヒーロー
   ============================================================ */
.hero {
  /* ★★ 2026-09-22 あやちゃん指示で**淡いグレーの地＋黒い文字**に変えた。
     それまでは濃色の地＋白文字だった。
     **地も同時に白へ変えること。** 文字だけ黒にして地を濃色のまま残すと、
     写真が読めなかったときに**黒地に黒文字**で何も見えなくなる。 */
  background: var(--base); color: var(--ink);
  /* ★ 中の重なり（画像・ベール・文字）を**この節の外へ漏らさない。**
     漏らすと、次の節の赤い円がヒーローに食い込んだところだけベールが掛かる
     （ベールの z-index 1 が、円の z-index auto に勝ってしまうため）。 */
  isolation: isolate;
  /* ★ 写真をスクロールとずらして動かすので、はみ出しを切る（2026-09-23 あやちゃん指示）。
     切らないと、下へずれた写真が次の節の上に顔を出す。
     ★ 切って困るものは中に無い ── 次の節はヒーローの**外**から重なってくるので、
       この `overflow` では切られない。 */
  overflow: hidden;
  padding: calc(var(--header-h) + var(--s16)) var(--s4) var(--s16);
  position: relative;
  /* ★ 画面の高さちょうどに合わせる（2026-09-22 あやちゃん指示）。
     JS でウィンドウの高さを測って入れる手は採らない。
     読み込みのたびに高さが後から変わるし、JS が死んだときに高さが決まらない。
     `svh` は「アドレスバーが出ている状態」の高さで固定される単位。
     `vh` だとスマホでバーが出入りするたび高さが跳ねて、中身が上下に動く。
     `dvh` は追従するぶん、いちばん動く。ヒーローは動かないほうがよいので `svh`。
     1行目の `vh` は、`svh` を知らない古いブラウザ向けの控え。 */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}
/* 全面の写真。★ 2026-09-22 あやちゃんが用意した `hero.jpg` を入れた。 */
.hero__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* ★ 主役は「踏み出した足元」で、絵の中では左寄り・やや下。
     狭い画面では左右が大きく切られるので、そこを残す位置に寄せる。 */
  object-position: 40% 58%;
  /* ★ 2026-09-22 あやちゃん指示「ヒーローはモノクロにするだけ」。
     色は元からほとんど無い写真だが、赤と黒だけのページに寄せる。 */
  filter: grayscale(1);
}

/* ★★ 写真だけ、スクロールとずれて動く（2026-09-23 あやちゃん指示「renaiup のように」）。
   動かすのは `motion.js` の `drift()`。**`.js-motion` が付いているときだけ**
   割合と倍率を渡す。JS が死んでいる／動きを減らす設定のときは写真はその場のまま。
   ★ 動かすのは `transform` だけ。`top` や `background-position` を毎コマ書き換えると
     レイアウトから作り直しになる。

   ★★ **写真を画面に貼り付ける**（2026-09-23 あやちゃん指示
   「renaiup の背景画像固定＋空枠のセクションと一緒」）。
   スクロールした量とちょうど同じだけ写真を下へ動かす ＝ 画面の中で止まって見える。
   ページと文字だけが動いて、写真は動かない。`background-attachment: fixed` と同じ見え方。

   ★ **`position: fixed` にはしない。** 固定要素は祖先の `overflow: hidden` では
     切られない（祖先が包む箱にならないため）ので、**写真がページ全体に出てしまう。**
     `absolute` のまま `transform` で戻す。切るのはヒーローの `overflow: hidden`。
   ★ **背景画像にもしない。** いちばん大きい絵（LCP）の表示が遅れる ──
     `<img>` のまま置く理由は `tools/gen-lp.py` のヒーローの注記にある。
   ★★ **動く余地（背を伸ばす）が要らなくなった。**
     写真は画面にぴったり貼り付くので、**ヒーローの見えている部分は常に覆われる。**
     前の作り（`transform` で 320px ずらす）は背を 320px 伸ばす必要があり、
     `object-fit: cover` の拡大が **1.07倍 → 1.36倍** に増えていた。いまは 1.07倍のまま。
   ★★ 動く割合は `--hero-fix` **ひとつだけ**で決まる。
     ・`1`    … 完全固定。写真は画面の中でまったく動かない
     ・`.75`  … ← いまここ（2026-09-23 あやちゃん「少し控えめに」）。
                 写真はスクロールの **25%** の速さでゆっくり上がる
     ・`.36`  … 前の作り（320px ずらし）と同じ。**あやちゃん判定「全く動いて見えない」**
     ・`0`    … 動かない（ページと一緒に流れる＝いちばん最初の状態）
     どの値でも**見えているところは必ず覆える**（写真は画面の高さちょうど、
     上へしか動かないため）。**`object-fit` の寄りは 1.07倍のまま増えない**
     （スクロールで足す寄りは下の `--hero-zoom`。こちらとは別の話）。 */
.js-motion .hero__img {
  --hero-fix: .75;
  /* ★ 同時に**寄っていく**（2026-09-23 あやちゃん指示）。
     モーションキットの `hero-zoom`（src/motions/hero-zoom.js）から数値を借りた:
       gsap.fromTo(bg, {scale: 1}, {scale: 1.35, ease: 'none',
         scrollTrigger: {trigger: '.hero', start: 'top top', end: 'bottom top', scrub: true}})
     ＝ **ヒーロー1つぶんのスクロールで 1 → 1.35、ならしは無し。**
     こちらもスクロール量にそのまま比例させる（`ease: 'none'` と同じ）。
   ★ **ただし倍率はキットの 1.35 から 1.15 へ落とした**（2026-09-23 あやちゃん
     「拡大はもっとゆっくり」）。進み方は同じ比例のまま、**変化の量を半分以下**にした
     （900px のスクロールで 0.35 → 0.15）。キットのデモは寄りが主役だが、
     こちらは**写真の上に黒い文字が乗る**ので、動きすぎると読みにくい。
   ★ 大きくする向きにしか動かさない。**1 未満にしない** ── 縮めると
     ヒーローの見えているところを覆えなくなり、地の色が出る。 */
  --hero-zoom: 1.15;
  will-change: transform;
}
/* 写真の上に敷く白いベール。**黒い文字の AA を保つためのもので、飾りではない。**
   ★ 濃さを下げるときは必ず測り直すこと（→ docs/design-spec.md §1）。 */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    /* ★ 下端を白へ溶かす。**これが無いと下端の硬い線が残る。**
       次の節の円がかぶるのは真ん中だけで、**左右の隅には円が届かない**
       （2026-09-22 実測：1440px 幅で左 0〜110px と右 1330〜1440px が素のまま）。
       参考サイトも写真の下を白へ溶かして線を消している。
       ★ 先に書いたものが上に乗る。暗幕より手前に置くこと。
       ★ 白へ溶かすのは**ヒーローの中の層**。次の節の円より後ろに居させる
         （`.hero` の `isolation: isolate` がそれを保証している）。
         漏らすと赤い円の頭が白く霞む。 */
    linear-gradient(to top, var(--base) 0, rgba(255, 255, 255, 0) var(--hero-fade)),
    /* 黒い文字のための白いベール。**平らに掛ける**（左右で濃さを変えない。
       淡いグレー1枚に見せたいので、傾きを付けると帯に見える）。
       ★ 2026-09-22 あやちゃん指示「背景はすごい薄いグレーモノクロ・テキストは黒」。
         6画面幅での実測（黒 #111 の最悪の比）:
         .88 → 14.30 ／ **.80 → 11.88（いまここ）** ／ .70 → 9.11
       ★★ **ベールを外せない。** 写真の文字がかかる範囲は rgb 20〜243 の幅があり
         （黒いスーツと白い空）、**素のままでは黒い文字も白い文字も成り立たない**
         （両方測って確認した。モノクロだけ・暗幕なしは最悪 1.11）。
         黒い文字に必要な下限は地が rgb 124 以上＝ベール .45 あたり。
       ★ 濃さを触ったら必ず `python tools/check-hero.py` を回す。
         **1つの画面幅だけで決めないこと。** 前の版は 1440px で 4.81 だったのに
         1280px では 4.54 まで落ちた。 */
    linear-gradient(rgba(255, 255, 255, .80), rgba(255, 255, 255, .80));
  pointer-events: none;
}
/* ★ 2026-09-22、ヒーローの赤い輪（ロゴの輪の飾り）を**消した**（あやちゃん指示）。
   写真を入れたら、薄い赤のにじみになって写真と喧嘩したうえ、Scroll にも重なっていた。
   黒地だったときは飾りとして成り立っていた。
   **CSS ごと落としてある**（死んだ規則を残さないため）。
   戻すときは `docs/design-spec.md` の「ヒーロー」に写しがある。 */
.hero__inner { max-width: var(--wrap); margin: 0 auto; width: 100%; position: relative; z-index: 2; }
/* ★ `opacity: .8` を外した（2026-09-22）。地を淡くしたので**薄める余裕が無い**
   （薄めると地に溶けて AA を割る）。小ささと太さで「添え物」に見せる。 */
.hero__eyebrow { font-size: var(--t0); font-weight: 500; margin-bottom: var(--s6); }
/* ★ 狭い画面だけ入れる改行。広い画面では `display: none` で**折り返さない**。
   2026-09-23 あやちゃん指示。放っておくと「あなたの一歩目を支／える。」と
   語の途中で割れる。`word-break: auto-phrase` は Chrome 系だけなので、
   ページの主役の見出しはそれに頼らず、入れたいところで自分で折る。 */
.br-sp { display: none; }

.hero__title {
  font-size: clamp(var(--t5), 7vw, var(--t7));
  line-height: 1.1; margin-bottom: var(--s6);
}
.hero__lead { font-size: var(--t2); font-weight: 500; max-width: 34rem; margin-bottom: var(--s8); }

/* ★ **白フェードの外まで上げる。** 食い込み（`--hero-overlap`）のぶんだけでは足りない。
   フェードの中に入ると地が白く持ち上がって、白文字の AA を割る
   （2026-09-22 実測：暗幕を濃くしても 4.25 のまま動かなかった。
     原因は暗幕ではなく、その上に乗っている白フェードだった）。
   `--hero-fade` は `--hero-overlap` より深いので、これで円にも隠れない。 */
.hero__scroll {
  position: absolute; margin: 0; z-index: 2;
  bottom: calc(var(--s6) + var(--hero-fade));
  /* ★ **本文の列から外へ出す。** 中央（`left: 50%`）に置くと、画面幅によって
     リード文と縦に重なる。上下の位置だけで避けようとすると綱渡りになる
     （2026-09-22 実測：1440px では 14px 空いたのに 1280px では 17px 重なった）。
     横に逃がせば、上下がどう動いてもぶつからない。 */
  left: auto;
  right: clamp(var(--s4), 4vw, var(--s16));
}
.hero__scroll a {
  /* ★ 地が淡くなったので黒。白のままだと消える（2026-09-22） */
  color: var(--ink); text-decoration: none; font-size: var(--t-1);
  writing-mode: vertical-rl;
  display: inline-block; padding-bottom: 3.5rem; position: relative;
}
.hero__scroll a::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 3rem; background: var(--ink); opacity: .45;
}
/* ★ 線を短い棒が下りていって、下端で消える（2026-09-22 あやちゃん指示）。
   モーションキットの `drip`（src/motions/float.js と同じ棚の src/motions/drip.js）の
   雫から数値を借りた: **下へ進みながら加速し、終わりの 1/4 で消える。**
     元: gsap.fromTo(d, {y:0, opacity:0}, {y:110, duration:1.1, ease:'power2.in',
                                          repeat:-1, ...progress>.75 で消す})
   ★ **キットは GSAP 前提。ここへは持ち込まない。**
     動きの JS は自前の `motion.js` 1本きりで、CSP が `script-src 'self'`。
     ライブラリを1つ入れるだけで、いちばん大きい絵より重くなる。動きだけ写す。
   ★ `power2.in` ＝ easeInQuad。CSS では cubic-bezier(.55, .085, .68, .53)。
   ★ **`.js-motion` が付いているときだけ出す。** JS が死んでいる／動きを減らす設定の
     ときは棒そのものが生まれない（付けっぱなしの棒が線に刺さったまま残らない）。 */
.js-motion .hero__scroll a::before {
  content: ""; position: absolute; left: 50%; bottom: 2.1rem;
  width: 1px; height: .9rem; background: var(--ink);
  animation: scroll-drip 1.9s cubic-bezier(.55, .085, .68, .53) infinite;
}
@keyframes scroll-drip {
  0%, 8% { transform: translateY(0);     opacity: 0; }   /* 次の一滴までの間（ま） */
  22%    { opacity: 1; }
  75%    { opacity: 1; }                                  /* ここから終わりまでで消す */
  100%   { transform: translateY(2.1rem); opacity: 0; }
}

/* ============================================================
   節の型（英語を大きく、日本語を下に添える）
   ============================================================ */
.sec { padding: var(--s40) var(--s4); }
/* ★ 丸そのものが節。上下の余白を詰めて、丸が節の高さを決めるようにする。
   切らないと横スクロールが出る。
   ★ **上へ食い込ませて、ヒーローの下端に赤い円をかぶせる**（2026-09-22 あやちゃん指示。
     参考サイトも `margin-top: -148px` で同じことをしている）。
     食い込みは `var(--s20)`（節の上余白）＋ `var(--hero-overlap)`。
     丸の頭は節の上余白のぶん下にあるので、**余白を足さないと円が上がらない。** */
.sec--rings {
  /* ★★ 丸の4つの変数は**この節に置く。** `.rings` に置いてはいけない。
     節の `padding` が `var(--ring-drop)` を読むので、`.rings`（子）に置くと
     **解けずに `padding` の宣言が丸ごと無効になる**（＝上下の余白が 0 になる）。
     var() が解けないと、その値だけでなく**宣言ぜんたい**が捨てられる。
     2026-09-22 に実際にこれを踏んだ（padTop / padBottom が両方 0px になり、
     円が節の上へはみ出して切れた）。 */
  /* ★ 円の直径を決めているのは**この上下の余白**。
     直径 ＝ 中身の高さ ＋ この値 × 2。大きくすれば円が育つ。
     ★ 2026-09-22、あやちゃん指示で**さらに大きくした**（13rem → 30rem 上限、20vw → 28vw）。
       1440px 幅で 直径 761 → 1151、∞ の幅 1279 → 1610（画面から 170px はみ出す）。
       **はみ出しても ∞ の形は読める**（上下の谷が残るため）。
       ここが読めなくなったのが、`vw` で径を決めていた古い作りの失敗だった。
     ★ 上限 30rem は広い画面のため。上限が低いと 1920px では `28vw` が使われず、
       画面に対して円が小さく見える。 */
  /* ★ 2026-09-23、あやちゃん指示で**両端を少し画面から見切れさせた。**
     式は「∞ の幅 ＝ 画面幅 ＋ 見切れ × 2」から逆算した（見切れは片側 60px 狙い）。
     実測（左/右とも同じ）: 2560→44px / 1920→60 / 1600→68 / 1440→65 / 1280→62 / 1201→60。
     ★★ **上限も上げること**（32rem → 53rem）。上げないと広い画面で上限に張り付いて、
       2560px では逆に 286px も内側に収まってしまう（＝見切れない）。
     ★ **深く切りすぎない。** 大きく出しすぎると左右が平らに切られて円に見えなくなる
       （2026-09-22 の実害：1440px で 386px はみ出して「∞ じゃない形」になった）。
       `tools/check-rings.py` の「形」が**片側 20〜120px の範囲**で見張っている。 */
  --ring-pad: clamp(6rem, calc(44.6vw - 300px), 53rem);
  /* 文字を流す幅。**直径はここでは決まらない**（円は必ずこれより横に広い） */
  --ring-w: min(26rem, 44vw);
  /* 2つの箱の間隔。**重なりの深さはこれだけで決まる。**
     円は箱より (直径 - 箱幅) / 2 ずつ左右へせり出すので、
     重なり ＝ (直径 - 箱幅) - この値。**この値が上回ると2つが離れる。**
     ★ 2026-09-22、あやちゃん指示で**2回にわたって重なりを浅くした**
       （3vw → 10vw → 18vw）。谷が深いほど「2つの円」に見える。
       1440px 幅での実測（直径 1151・箱幅 416 のとき）:
         gap 10vw → 中心の間 560・重なり 591・**谷 73px**
         gap 14vw → 中心の間 618・重なり 533・**谷 90px**
         gap 18vw → 中心の間 676・重なり 475・**谷 110px**  ← いまここ
         gap 22vw → 中心の間 732・重なり 419・**谷 131px**
       ★ 谷の深さは `半径 - √(半径² - (中心の間 / 2)²)`。
         **径を変えたら谷も変わる**ので、径を触ったら測り直す。 */
  --ring-gap: clamp(1rem, 5.8vw, 10rem);
  /* ★ 左の円だけ下へずらす量（2026-09-22 あやちゃん指示）。
     `top` で動かす。**`margin` や `transform` では動かさないこと。**
     ・`margin-top` … `align-items: stretch` の高さから引かれて**円が小さくなる**
     ・`transform`  … `.ring` が重なりの入れ物になり、中の文字が閉じ込められて
                      **右の円に飲まれる**（右の円は左の箱へ 324px 入り込んでいる） */
  --ring-drop: clamp(2rem, 26.4vw, 34rem);
  /* ★ 左の円が出てから、右の円が出るまでの時差（2026-09-22 あやちゃん指示で広げた。
     .18s → .34s）。**円と、その中の文字の両方がこれだけ後ろへずれる。**
     片方だけずらすと、右の円で「白地に白文字」の瞬間ができる。 */
  --ring-lag: .34s;
  /* 丸が開き切ったころに文字を出す遅れ。左の円ぶん。
     ★ 2026-09-22、∞ を直して円が小さくなったぶん余裕が減ったので .38s → .45s へ
       （動きの途中の「文字の角のはみ出し」が 0.82 → 0.78。合格は 0.90 まで）。 */
  --ring-text-delay: .45s;

  /* ★ 下の余白に `--ring-drop` を足す。足さないと、下げた円の裾が
     `overflow: hidden` で切られる。 */
  padding: var(--s20) 0 calc(var(--s20) + var(--ring-drop));
  overflow: hidden;
  margin-top: calc(-1 * (var(--s20) + var(--hero-overlap)));
}
/* ★ 背景に大小2つの輪を薄く敷く節（Service）。地は白のまま。画像は使わない。
   ★ クラス名は `--infinity` のまま。∞ の並びだったころの名残で、
     いまの並びは下の「Voices 節の並び」。点検の道具がこの名前で節を探すので変えない。 */
.sec--infinity { position: relative; overflow: hidden; background: var(--base); padding-inline: 0; }
/* ★ padding を足すぶん max-width を広げて相殺する。
   これが無いと中身が padding のぶん（16px）内側に入り、
   全幅の帯（.card）の中身と左端がズレる。目では気づけない差。
   ★ 幅は `--content-w`（2026-09-22。Company と揃えた）。**帯は全幅のまま。** */
.sec--infinity > .sec__inner {
  max-width: calc(var(--content-w) + var(--s4) * 2);
  padding-inline: var(--s4);
}
/* ★ 2026-09-22、参考サイト（css-net.co.jp/50th）の **Voices 節の並び**へ入れ替えた
   （あやちゃん指示）。**大小2つの輪を、上下にも左右にもずらして重ねる。**
   前は同じ大きさの輪を横一列（∞）に並べていた。∞ は Philosophy が引き受けているので、
   ここは役目を分けた。

   実測した比（節の幅を 100 とする。参考サイトは節幅 1137px での固定 px 指定だった）:
     大 … 外径 77 / 枠 12.5 / 左端 中心+21 / 上 節の高さの 7%
     小 … 外径 60 / 枠 14.5 / 左端 中心-31 / 上 節の高さの 40%

   ★ 塗りは無し。**枠だけ**で輪にする。
   ★ **`opacity` で薄くしない。不透明の薄い色を使う。**
     不透明度で薄めると、2つの輪が交わったところだけ濃くなって継ぎ目が出る
     （前の版で実際に出ていた。.07 + .07 × .93 = .135 で倍近く濃かった）。
   ★ 色は `--muted`。段にある色で、赤い文字を上に置いても AA を満たす
     （実測 5.00。`--line` にすると 4.17 で割れる）。
   ★ `top` は % 指定。節の高さに追従させる（参考サイトは画面幅ごとに px を書き分けていた）。 */
.sec--infinity::before,
.sec--infinity::after {
  content: ""; position: absolute;
  aspect-ratio: 1; border-radius: 50%;
  border-style: solid; border-color: var(--muted);
  pointer-events: none;
}
/* ★ 1つの輪の寸法は `--ring`（外径）1つから出す。枠の太さと横のずれも外径の割合で書く。
   別々の数で書くと、画面幅を変えたとたん見た目の釣り合いが崩れる。

   ★ **`max(vw, rem)`** にしてある。狭い画面で `vw` だけにすると輪が小さくなって
     ほとんど見えない（実測：375px 幅で外径 289px。ほぼ気づかない薄さになった）。
     参考サイトは狭い画面でこそ輪を固定 px で大きく取っていて、
     375px 幅に対して外径 720px ＝ **画面の1.9倍**。下限の rem はその実測値。 */
/* ★★ 上限（`min()` の右側）は**節の高さから来ている。**
   輪は `vw` で大きくなるのに、**節の高さは中身で決まって伸びない。**
   広い画面で輪が節の下からはみ出し、`overflow: hidden` に**真横に切られる**
   （2026-09-22 の実害：1920px で 大 152px・小 296px、1600px で 小 104px、
     1440px でも 小 8px がはみ出していた。左右の見切れと違い、
     **水平にスパッと切れた線**になるので事故に見える）。
   上限は「節の高さ − 上の位置」に収まる値。節の高さは 768px 以上でおよそ 1410〜1430px:
     大 … 上 7%（約 100px）＋ 78rem（1248px）＝ 1348px
     小 … 上 40%（約 570px）＋ 50rem（800px）＝ 1370px
   ★ **原稿を減らして節が縮んだら、この上限も下げること。**
     `tools/check-deco.py` が全画面幅で見張る。 */
/* 大きいほう。右へ寄せて、右側を画面の外へ大きく出す（`overflow: hidden` で切る） */
.sec--infinity::before {
  --ring: min(max(77vw, 45rem), 78rem);   /* 45rem = 720px ＝ 参考サイトの狭い画面での実測 */
  width: var(--ring);
  border-width: calc(var(--ring) * .17);
  left: calc(50% + var(--ring) * .28);
  top: 7%;
}
/* 小さいほう。左へ寄せて下げる。左側も画面の外へ出る */
.sec--infinity::after {
  --ring: min(max(60vw, 33rem), 50rem);   /* 33rem = 528px ＝ 同じく実測（535px）に寄せた */
  width: var(--ring);
  border-width: calc(var(--ring) * .235);
  left: calc(50% - var(--ring) * .45);
  top: 40%;
}
/* ★ 節の中身は、節の飾り（輪・円）より**前に出す。**
   飾りは位置指定の擬似要素／箱なので、既定では流れの中の文字より上に描かれる。
   `z-index: -1` で沈めてはいけない ── 節の地の色より下へ落ちて飾りごと消える
   （Company の帽子がまさにそれ）。**沈めるのではなく中身を持ち上げる。**
   ★ Service と Company で同じ理由・同じ書き方なので、1か所にまとめてある。 */
.sec--infinity > .sec__inner,
.sec--accent   > .sec__inner { position: relative; z-index: 1; }
.sec__inner { max-width: var(--wrap); margin: 0 auto; }

.sec__head { display: grid; gap: var(--s1); margin-bottom: var(--s16); }
/* ★ 節の英語見出しはページの主役級に大きく（2026-09-22・参考サイトの実測 96px を踏襲）。
   中身が薄いサイトほどこの型が向く。文字そのものが画になる。
   狭い画面の下限 2.875rem = 46px も実測に合わせた。 */
.sec__en { font-size: clamp(2.875rem, 9vw, var(--t8)); line-height: 1; color: var(--deep); font-weight: 700; }
/* 日本語の添え書きは、節見出しと小見出しで同じ見た目 */
.sec__ja,
.sub__ja { font-size: var(--t0); color: var(--brand); font-weight: 500; }

/* 節の中の小見出し（Company の Message）。節見出しと同じ型の小さい版。
   --t6（48px）はここで使う。節見出しは 96px なので、ちょうど半分で階層が付く。 */
.sub + .sub { margin-top: var(--s24); }
.sub__head { display: grid; gap: var(--s1); margin-bottom: var(--s8); }
.sub__en { font-size: var(--t6); line-height: 1.1; color: var(--deep); font-weight: 700; }

/* ============================================================
   読み物（Philosophy）─ 連結した2つの丸
   ★ 形はロゴから来ている。ヨコオ総研のロゴは輪が2つ連なった形（∞）で、
     それをページの中で大きく引き受けたもの。よそから借りた形ではない。
   ★ 重なった部分は同じ赤なので境目が消えて、1つの連なりに見える。

   ★★ 2026-09-22、作り方をそっくり入れ替えた（あやちゃん指示。参考は
      css-net.co.jp/50th。**借りたのは作り方だけで、数値は写していない**）。

      前 … `.ring` が円そのもので、その中へ文字を入れていた。径は `vw`。
           径を上げるたび文字が円からはみ出し、隣の円に飲まれた。
           1.5倍にしたら「連なった2つの円」の形そのものが読めなくなった。
      今 … **円は擬似要素の飾り。文字はその上に乗るだけ。**
           径は `vw` をやめて、**中身の高さ**から出す
           （`height: 100%` ＋ `aspect-ratio: 1`）。
           文章が増えれば円が勝手にそのぶん大きくなるので、
           「文字が入りきらない」が原理的に起きない。

   ★ 触るときはこの3つだけ動かす（`--ring-pad` / `--ring-w` / `--ring-gap`）。
     ただし3つは**互いに縛り合っている。** 下の「守るべき不等式」を必ず読むこと。
   ============================================================ */
.rings {
  /* ★ 節の横幅（1024px）を突き破ってビューポート幅まで広げる定番の書き方。
     これが無いと円が sec__inner の中に閉じ込められる。 */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  display: flex; flex-wrap: nowrap;
  justify-content: center;
  /* ★ stretch で2つの箱の高さを揃える＝**2つの丸が同じ直径になる。**
     揃えないと丸の直径は各々の中身の高さで決まり、見た目の中心が
     (左の径 - 右の径) / 4 だけ横へずれる。
     2026-09-22 の実測では左右差 10px・ずれ 2.5px と小さかったが、
     **原稿が変われば開く。** 揃えておけば常にゼロ。ロゴの∞も輪は同じ大きさ。 */
  align-items: stretch;

  gap: var(--ring-gap);
}

/* ★★ 守るべき不等式 ─ 文字の四隅が円の外へ出ない条件
     箱の幅を W、上下の余白を P、文字そのものの高さを T とすると、直径は T + 2P。
     四隅が円の内側に入るには **W² ≤ 4P (T + P)**。
     ＝ 余白 P を増やすほど、使える幅 W が広がる。
     ★ 狭い画面で `--ring-pad` を減らすと、この式を真っ先に割る。
       減らしたいときは `--ring-w` も一緒に狭めること。
     ★ 目視では気づけない（角だけが数px出る）。`tools/check-rings.py` が機械で見る。 */

.ring {
  position: relative;
  flex: none;
  width: var(--ring-w);
  padding-block: var(--ring-pad);
  text-align: center;
  color: var(--base);
  /* 高さを揃えた（stretch）ぶん、中身は自分で縦の真ん中へ寄せる */
  display: flex; flex-direction: column; justify-content: center;
}
/* 円そのもの。
   ★ `z-index` を付けないこと。付けると節の白い地の裏へ回って消える
     （`.sec--rings` は position: relative でも重なりの入れ物を作らないため）。
     文字側を `z-index: 1` で上へ出して順番を決める。 */
.ring::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  height: 100%;        /* ★ 直径 ＝ 中身の高さ。ここが作り方の要 */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* ★ 2つとも同じ塗りにしておくこと。
   片方を枠だけのドーナツにすると、重なった部分から下の文字が読めなくなる。 */
/* 左の円だけ下げる。円と文字がいっしょに動く（`::before` は `.ring` を基準にしている）。 */
/* ★★ 2026-09-22 あやちゃん指示で**左右を入れ替えた**
   （「先に目につくのが Philosophy になる」）。
   見た目は 左＝説明文と数字／右＝Philosophy と信条。

   ★ **HTML は入れ替えない。** `order` で見た目だけ動かす。
     入れ替えると見出し `Philosophy` が本文のあとになり、
     **読み上げが「本文 → 見出し」の順**になってしまう。
   ★ 下げるのは**見た目の左**＝ DOM の2つ目。こうすると
     Philosophy の円が上に残り、スクロールして最初に目に入る。
   ★ 動きの順も DOM のまま（`:nth-child(2)` が遅れる）＝
     **右の Philosophy が先に膨らみ、左が後。** 狙いと合っている。 */
.rings > .ring:first-child { order: 2; top: 0; }
.rings > .ring:last-child  { order: 1; top: var(--ring-drop); }

.ring > * { position: relative; z-index: 1; }
.ring > * + * { margin-top: var(--s6); }

/* 丸の中の節見出し。地が赤なので白にする（赤地に赤文字は読めない）。
   ★ 節見出しの 96px はここでは使わない。箱の幅（416px）に「Philosophy」が
     収まらず、円からはみ出す。段の中で1つ落として t7 を上限にする。 */
.ring .sec__head { margin-bottom: 0; }
.ring .sec__en { font-size: clamp(var(--t5), 4.4vw, var(--t7)); color: var(--base); }
.ring .sec__ja { color: var(--base); opacity: .85; }

/* 信条。改行で縦に積む短い言葉。
   ★ ここは「志」だけを言う場所。**動機や来歴は書かない**（それは Message の仕事）。
     2026-09-22 に一度、物語を4段落書いて「代表の言葉みたいで説明しすぎ」になった。
   ★ 丸の外に置く版（`.creed` 単体の規則）は落とした（2026-09-25）。
     どこでも丸の中でしか使っておらず、全部の値をここで上書きしていた。 */
.ring .creed {
  font-size: clamp(var(--t3), 2.4vw, var(--t5));
  line-height: 1.7; font-weight: 700; color: var(--base); margin-bottom: 0;
}
/* 丸の中の説明文 */
.ring__text {
  font-size: var(--t0);
  line-height: 1.9; margin: 0;
}

/* 丸の中に並べる数字。裏の取れている実測値だけを出す（→ gen-lp.py の注記） */
/* ★ 説明文との間を広げる（2026-09-22 あやちゃん指示）。
   `.ring > * + *` の 24px では、文章と数字が同じ塊に見えていた。
   ★ 広げると**円が大きくなる**（径＝中身の高さ）。∞ が画面に収まるかは
     `tools/check-rings.py` の「形」で確かめること。 */
.figures { list-style: none; margin: var(--s12) 0 0; padding: 0; display: grid; gap: var(--s6); }
.figures li { display: grid; gap: var(--s1); }
.figure__n {
  font-size: clamp(var(--t4), 3vw, var(--t6));
  line-height: 1; font-weight: 700;
}
.figure__n small { font-size: .5em; vertical-align: super; margin-left: .05em; }
.figure__label { font-size: var(--t-1); opacity: .9; }

/* ★★ 横並びの ∞ をやめて縦に積む境目。**48rem ではなく 75rem（1200px）。**

   2026-09-22 の実害：∞ の横幅は「箱幅 ＋ 間隔 ＋ 直径」で決まり、
   **画面より広くなると `overflow: hidden` に左右を平らに切られて、
   円ではなく直線の縁になる。** 上下の谷は残るので**数だけ見ると気づけない**
   （1440px で 386px はみ出し、両側が平らな直線になっていた）。

   ★ 境目が 75rem なのは、**2つの条件が両立する下限**だから:
     ・収まる … 箱幅 + 間隔 + 直径 ≤ 画面幅
     ・重なる … 直径 > 箱幅 + 間隔
     この2つを解くと `2 × (箱幅 + 間隔) < 画面幅` ＝ **1053px より広いこと**。
     余裕を見て 1200px。1024px で試したら、収まりはしても
     **2つが離れて ∞ にならなかった**（重なり 0）。
   ★ ここを下げないこと。`tools/check-rings.py` が「収まる」と「重なる」を両方見張る。 */
@media (max-width: 75rem) {
  /* ★ 上書きも**節に置く**（節の padding が読むため。上の注記を見ること） */
  .sec--rings {
    --ring-w: min(26rem, 70vw);
    /* ★★ **径の式も縦積み用に持ち直す。**
       横並びの式 `calc(36vw - 290px)` は「∞ が画面に収まること」から逆算した値で、
       1200px より狭いと下限（6rem）に張り付いて**円が小さくなりすぎる。**
       縦積みでは横に収める必要が無いので、素直に `vw` で取ってよい。
       2026-09-22 の実害：境目を 48rem → 75rem へ広げたとき、
       768px で円が小さいまま残り、**文字の角が15点はみ出した。** */
    --ring-pad: clamp(6rem, 28vw, 22rem);
    /* ★ 縦積みの重なりは**横並びとは別の値で持つ。**
       `--ring-gap` を共用すると、横の重なりを浅くしたぶん
       縦の重なりが深くなる（符号が逆になるため）。 */
    --ring-gap: 1rem;
    /* ★★ **`0` ではなく `0px`。** 節の padding が `calc(var(--s20) + var(--ring-drop))`
       でこれを足している。**`calc()` の中で単位なしの 0 は長さとして扱われず、式ごと無効**
       → `padding` 宣言が丸ごと捨てられて **641〜1200px で上下の余白が 0 になっていた**
       （2026-09-23 発見。目では「なんとなく詰まっている」としか見えない）。 */
    --ring-drop: 0px;    /* 縦に並ぶので「左を下げる」は意味を持たない */
  }
  /* ★ 縦積みでは入れ替えない。**見出しが先頭に来ること**を守る
     （`order` を残すと、狭い画面で本文が見出しより上に出る）。 */
  .rings > .ring:first-child,
  .rings > .ring:last-child { order: 0; top: 0; }
  .rings {
    flex-direction: column;
    /* ★ 縦積みでは stretch が「横に伸ばす」意味になり、幅を決めてあるぶん
       丸が左へ寄る。中央寄せに戻すこと。 */
    align-items: center;
    gap: 0;
  }
  /* ★ 縦積みでは円が箱の上下にせり出さない（直径 ＝ 箱の高さ ちょうど）ので、
     重なりは負の余白で作る。`gap` では作れない。 */
  .ring + .ring { margin-top: calc(var(--ring-gap) * -2); }
}


/* ============================================================
   代表メッセージ
   ============================================================ */
/* 赤地の上に置く白いボックス。代表メッセージをここに収める */
.message-box {
  background: var(--base); color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(var(--s6), 5vw, var(--s12));   /* 狭い画面で 48px は広すぎる */
  max-width: var(--content-w); margin-inline: auto;
}
/* ★ 写真は 2026-09-22 あやちゃん指示で**倍 → その 90%** にした（11 → 22 → 19.8rem）。
   折れ目ごとの値も同じ倍率で揃える。片方だけ変えると、幅を跨いだ瞬間に写真が縮む。
   ★ 画像そのものは 704x939（表示 316.8px の 2.2 倍）。高精細の画面でもぼけない。 */
.message { display: grid; gap: var(--s12); grid-template-columns: 19.8rem 1fr; align-items: start; }
.message__photo { margin: 0; }
.message__photo img { border-radius: var(--radius); width: 100%; }
/* グリッドの2列目。min-width:0 を入れないと、長い語が入ったとき列が広がって崩れる
   （grid の子は既定で min-width:auto のため）。2026-09-22 に点検が「規則が無い」と出して気づいた。 */
.message__body { min-width: 0; }
.message__catch { font-size: var(--t4); color: var(--deep); margin-bottom: var(--s6); }
/* ★ 3つを1かたまりとして並べるところ。**段落を3つに分けて、間隔だけ詰める。**
   `<br>` で1段落にすると、読み上げではひと続きの文になってしまう。3つは別々の文。
   ★ **折り返した続きの行は下げない**（2026-09-22 あやちゃん指示）。
     1字下げ（`padding-left` ＋ 負の `text-indent`）を試したが、下げないほうが本文の
     左端と揃って落ち着く。 */
.message__lines { margin: 0 0 var(--s4); }
.message__lines > p { margin: 0; }
.message__sign { margin-top: var(--s8); font-weight: 700; color: var(--deep); }

/* ============================================================
   事業のカード
   ★ 2026-09-22 に横3列から縦並びへ。左にロゴ、右に文章の2カラム。
     3列だとカードが320pxしかなく、ロゴが80pxまで縮んで細部が読めなかった
     （GARAGE 450 の「HAKUSAN CITY ROUTE 157」が潰れていた）。
     縦に積めば1枚1024px使えるので、ロゴを176pxまで大きくできる。
   ============================================================ */
.cards {
  list-style: none; margin: 0;
  display: grid; gap: var(--s8); grid-template-columns: 1fr;
  /* ★ `100vw` は使わない。**縦スクロールバーの幅を含む**ので、ビューポートより
     15px ほど広くなり、中身の中央寄せが節見出しと 7px ズレる（2026-09-22 実測）。
     ★ ここの左右余白は**狭い画面のときの逃げ**。箱の左右が画面の端に触らないようにする。 */
  padding: 0 var(--s4);
  position: relative; z-index: 1;
}
.card {
  /* ★ 白い箱（2026-09-22 あやちゃん指示「白い背景ボックスで囲み薄い影を周囲中央に」）。
     節の背景も白なので、箱が浮いて見えるのは**灰色の ∞ が後ろを通るところだけ。**
     影は向きを持たせず（`0 0`）、周囲へ均等に出す。
     ★ 幅の揃えは **Message の箱と同じ考え方**。箱の**外側の辺**を節見出しに揃え、
       中の文字は padding のぶん内側に入る。`check-width.py` も `.card` の辺で見ている。
       （以前は全幅の帯で、中の文字そのものを揃えていた。箱にした時点で基準が変わる。） */
  background: var(--base);
  border: 0; border-radius: var(--radius);
  box-shadow: 0 0 2rem rgba(17, 17, 17, .10);
  width: 100%; max-width: var(--content-w); margin-inline: auto;
  padding: clamp(var(--s6), 5vw, var(--s12));   /* Message の箱と同じ式 */
  position: relative;
  /* ★ 左＝ロゴ、右＝`.card__main` の2枚だけ（2026-09-22 あやちゃん指示でリンクを右へ戻した）。
     **grid の名前付きの枠はやめた。** 右の中身はカードごとに数が違う
     （02 だけ添え書きがある／リンクが無い）ので、枠を1つずつ決めると
     「空けた枠のぶん隙間が残る」か「添え書きとリンクが同じ枠で重なる」かのどちらかになる。
     ★ 後者は **`GARAGE_LIVE = True` にした瞬間に出る**（02 に添え書きとリンクが両方つく）。
       前の作りのままだと重なっていた。 */
  display: flex;
  align-items: center;
  gap: var(--s12);
}
.card__main { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--s4); }
.card__num {
  position: absolute; top: var(--s4); right: var(--s6);
  font-size: var(--t4); font-weight: 700; color: var(--brand); opacity: .25; margin: 0;
}
.card__logo { flex: 0 0 15rem; display: grid; place-items: center; margin: 0; }
/* 縦横比がばらばら（横長2.1:1 と 正方形2枚）。高さの上限だけ決めて、
   幅は成り行きに任せる。こうすると横長も正方形も同じ「面積感」になる。 */
.card__logo img { width: auto; height: auto; max-height: 11rem; max-width: 100%; }
/* ★ 見出しは赤（2026-09-22 あやちゃん指示）。#D50000 は白地の上で **5.48:1**。
     22px/700 なので大きい文字の 3:1 はもちろん、普通の文字の 4.5:1 も満たす。 */
.card__title { font-size: var(--t3); color: var(--brand); margin: 0; }
.card__body  { margin: 0; }
/* ★ 文字は3枚とも「サイトを見る」で統一（2026-09-22 あやちゃん指示）。
   どのサイトかはロゴと見出しが持っている。**短いので折り返しの心配が消えた**
   （前は「北陸ケータリング協会の公式サイトへ」が左の 15rem で2行に割れていた）。 */
/* ★ 右寄せ（2026-09-22 あやちゃん指示）。`.card__main` が grid なので `justify-self`。
   狭い画面の縦積みでも同じ入れ物なので、そのまま右に付く。 */
.card__more  { margin: var(--s2) 0 0; justify-self: end; }
.card__more a { display: inline-flex; align-items: center; gap: var(--s2);
                padding-block: var(--s2); }
/* 外部リンクの印。`currentColor` なので文字色（赤）にそのまま乗り、ホバーでも一緒に濃くなる。
   ★ `flex: none` を外すと、狭い画面で絵がつぶれる。 */
.ext-icon { width: 1em; height: 1em; flex: none; }
/* 添え書き（GARAGE 450 の機能と住所）。本文のすぐ下に続ける。 */
.card__note { margin: 0; font-size: var(--t0); color: var(--ink-2); }

/* ============================================================
   アクセント色の節（Company）
   ★ 上辺に円の頭（帽子）をせり出させる。帽子は前の節（白）の上に乗る。
     `overflow: hidden` を付けると切れるので付けない（横だけ `clip` で切る）。
   ★ 赤地の上では文字も罫も色を変える。**黒のままだと読めない**
     （赤 #D50000 の上の黒は 3.5 を下回る）。
   ============================================================ */
/* ★ 2026-09-22 あやちゃん提案で、左下に輪を2つ入れた（Service と同じ見せ方）。
   ★★ **1つずつ別々に動かす**ため、飾り専用の箱 `.deco-rings` を置いて、
     その `::before`／`::after` に輪を1つずつ持たせている（2026-09-22 あやちゃん指示）。
     はじめは節の `::after` 1枚に `radial-gradient` を2本描いていたが、
     **1枚なのでまとめてしか動かせなかった。**
     節の擬似要素は `::before` を帽子が使っていて1つしか空いていないので、箱を足した。

   ★ 輪は `border` で描く（塗りなし）。**不透明のベタにすること。**
     不透明度で描くと2つが交わった所だけ明るくなり、そこで白文字が AA を割る
     （実測：`.12` の重なりは 4.40 ＝ 割れる）。
   ★ 太さは半径に対する割合。大 34%・小 47%（Service の実測比と同じ）。 */
.deco-rings {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.deco-rings::before,
.deco-rings::after {
  content: ""; position: absolute;
  aspect-ratio: 1; border-radius: 50%;
  border-style: solid; border-color: var(--ring-on-red);
}
/* ★ 位置は**下からの距離**で置く。`%` にしない（節の高さは原稿しだいで変わる）。
   ★★ **横のずれも半径から出す。** 中心の間を「半径の和 × 0.85」にしてある。
     固定の数で書くと、画面幅で半径が変わったときに関係が崩れる
     （2026-09-22 の実害：1440px で中心の間が 344px しかなく、
       小さい輪の中心が大きい輪の中に入って入れ子になった。重なり 312px）。
     Service の灰色の輪は同じ幅で重なり 71px ＝ **浅く触れているだけ。**
     この式だと 69px になり、同じ見え方に揃う。 */
/* 大きいほう。左へ逃がして画面の外まで出す */
.deco-rings::before {
  width: calc(var(--r-big) * 2);
  border-width: calc(var(--r-big) * .34);
  left: calc(var(--r-big) * -1.3);
  bottom: 2rem;
}
/* 小さいほう（手前・右下） */
.deco-rings::after {
  width: calc(var(--r-small) * 2);
  border-width: calc(var(--r-small) * .47);
  left: calc((var(--r-big) + var(--r-small)) * .85 - var(--r-big) * .3 - var(--r-small));
  bottom: 1.5rem;
}

/* ★ 2026-09-22、上辺の帽子を **nanoc-inc.co.jp/#company と同じつくり**へ入れ替えた
   （あやちゃん指示）。

   前 … 楕円の帽子。`aspect-ratio: 3/1` の箱に
         `border-radius: 50% 50% 0 0 / 100% 100% 0 0`。高さは幅の 0.3333。
         **楕円は裾で縁が垂直に立つ**ので、節の上辺との継ぎ目が角になる。
   今 … **真円の帽子。** 節より大きい円を1つ置いて、頭だけを上へ出す。
         裾は節の中に隠れる（同じ赤なので見えない）。高さは幅の 0.2486 で、前より浅い。

   ★ 参考サイトの実測（SVG マスクを座標変換して割り出した数値。目で合わせていない）:
       mask-circle-top.svg の中身は 1824×4320・角丸 912 の「かまぼこ」で、
       箱 1440×358 で頭だけを切り出している。
       → 円の中心は箱の真ん中（x=720）、半径 912、頂点が箱の上辺に接する。
       → **帽子の高さ h/W = 358/1440 = 0.2486／円の直径 D/W = 1824/1440 = 1.2667**
       （h と D は独立ではない。`R = (W²/4 + h²) / 2h` の関係。片方を変えたら計算し直す）

   ★ 寸法は2つとも `%`。**同じ基準（節の padding box の幅）から出す。**
     `::before` の `width` も `margin-top` も、絶対配置の要素では
     「containing block の幅」を見る。**`top` や `bottom` の % は高さを見るので使えない。**
     前の版は `::before` 側（節の幅）と節の `margin-top` 側（親の幅）で基準が違っていた。

   ★ 全幅は `100vw` ではなく `100%`。`100vw` はスクロールバーの幅を含むので
     画面より広くなる（Service の帯で 7px ズレた実害あり）。 */
.sec--accent {
  position: relative;
  background: var(--brand); color: var(--base);
  /* 左下の輪の色。**赤地に `--base` を 16% 混ぜた実測値**（目で選んでいない）。
     ★ **万一この上に白い文字が載っても AA を満たす**（単体で 4.78）。
       いまの置き方では文字に触れていないので、実際の最悪は素の赤の 5.48
       （`tools/check-rings.py` が6画面幅で測る）。
     ★ これ以上明るくしない。`.20` で 4.57、`.24` で 4.37 ＝ 割れる。 */
  --ring-on-red: #DC2929;
  /* 左下の輪の半径。**狭い画面では `max()` で大きく取る**（Service の輪と同じ考え方）。
     狭いと中身が画面いっぱいに広がって、小さい輪は白い箱の裏へ隠れてしまう。
     ★★ **この2つは節（`.sec--accent`）に置くこと。** 飾りを描くのは子の
       `.deco-rings` なので、擬似要素の中に書くと**子から見えず、
       `calc()` ごと無効になって輪が 6px まで縮む**（2026-09-22 に実際に踏んだ）。 */
  --r-big: min(max(34vw, 22rem), 26rem);
  --r-small: min(max(20vw, 13rem), 15rem);
  --dome-d: 126.67%;   /* 円の直径。節の幅に対する比 */
  --dome-h: 24.86%;    /* 節の上へ出る高さ。同じ基準 */
  /* 節の上にそのぶん空ける。空けないと帽子が前の節の中身に食い込む
     （2026-09-22 に実際に起きて、Service の最後のカードに 187px 食い込んだ）。 */
  margin-top: calc(var(--dome-h) + var(--s8));
  /* ★ 横だけ切る。円は節より 26.67% 広いので、切らないと横スクロールが出る
     （外して実測：scrollWidth 1632 / clientWidth 1440。192px はみ出した）。
     **`hidden` ではなく `clip`。** `hidden` にすると縦も切られて帽子ごと消える。 */
  overflow-x: clip;
}
/* ★ `z-index: -1` を外さない。**外すと見出しと会社概要の白文字が円に覆われて消える。**
   絶対配置の擬似要素は既定で「流れの中の文字より上」に描かれるため
   （外して実測：`Company` の見出しと `.facts` から白い画素が1つも無くなった。
     Message の白箱だけは円の下端より下にあるので残る＝**一部だけ見て判断すると見落とす**）。
   負の重なりに置くと、節の赤い地より下・文字より下に入るので、
   赤の上に赤が乗るだけになって何も隠さない。 */
.sec--accent::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; left: 50%;
  width: var(--dome-d); aspect-ratio: 1;   /* ★ 真円。楕円にしない */
  margin-top: calc(-1 * var(--dome-h));    /* ← % は幅基準。`top` では書けない */
  border-radius: 50%;
  background: var(--brand);
  transform: translateX(-50%);
  pointer-events: none;
}
/* ★ 中身を輪より上へ。`.deco-rings` は位置指定の箱なので、**既定では流れの中の文字より
   上に描かれる。** 輪が下にいるうちは触れないので見えなかったが、狭い画面で上へ持って
   くると見出しと会社概要を覆う。`z-index: -1` では赤い地より下へ落ちて輪ごと消えるので
   （帽子がまさにそれ）、**沈めるのではなく文字を持ち上げる。**
   → 規則そのものは `.sec__inner` のところに1つにまとめてある。 */
/* ★ 節見出しも中身と同じ幅・同じ左右位置に揃える（2026-09-22 あやちゃん指示）。
   節見出し・会社概要・Message の箱の3つが `--content-w` の1つから出る。 */
.sec--accent .sec__head { max-width: var(--content-w); margin-inline: auto; }
.sec--accent .sec__en { color: var(--base); }
.sec--accent .sec__ja { color: var(--base); opacity: .85; }
.sec--accent .facts dt { color: var(--base); }
.sec--accent .facts div { border-bottom-color: rgba(255,255,255,.35); }


/* ============================================================
   飾りの登場（このサイト唯一の JS 連動 ─ site/assets/js/motion.js）
   節が画面に入ると `is-shown` が付いて、飾りが 0 から膨らむ。

   ★ **隠すのは `.js-motion` が付いたときだけ。**
     motion.js が「使えると分かったとき」にだけ付ける印。
     JS が落ちても・古いブラウザでも・動きを減らす設定でも印が付かず、
     飾りは最初から出ている。**逆の作りにしない**
     （CSS で隠して JS で出すと、JS が死んだ瞬間に赤い円が消えて
       白地に白文字だけが残る）。

   ★ **もとの `transform` を必ず書き写すこと。** `scale()` だけ書くと
     中央寄せの `translate` が消えて、飾りが丸ごとずれる。
   ============================================================ */
/* 膨らむ飾りはすべて同じ動き（Philosophy の円・Service の輪・Company の輪）。
   参考サイトと同じ曲線。終わり際にわずかに行き過ぎて戻る（1.06 > 1）。
   ★ 時差（`transition-delay`）はこの下で個別に足す。**この規則より後ろに置くこと**
     （`transition` の一括指定は遅れを 0 に戻すため）。 */
.js-motion .ring::before,
.js-motion .sec--infinity::before,
.js-motion .sec--infinity::after,
.js-motion .deco-rings::before,
.js-motion .deco-rings::after {
  transition: transform 1.4s cubic-bezier(.05, 1.06, .73, 1);
}

/* ★★ Company は **左下の輪（`.deco-rings` の2つ）だけ動かす。
   節の `::before`（帽子）は動かさない。**
   帽子を縮めると、節に入るまで前の節との間に白い切れ目ができる（2026-09-22 あやちゃん指示）。
   輪のほうは同日あやちゃん指示で動かすことにした。
   ★ 合図は節ではなく**代表メッセージの箱**（`data-deco-cue`）。節が背高で、
     節の上端で判定すると輪が見えるずっと前に動き終わる
     （節 1717px に対して輪の中心は 1269px の位置）。
   ★ 輪は1つずつ別の擬似要素なので、それぞれ自分の中心から膨らむ
     （`transform-origin` は既定のまま）。 */
.js-motion .deco-rings::before,
.js-motion .deco-rings::after { transform: scale(0); }
.js-motion .sec--accent.is-shown .deco-rings::before,
.js-motion .sec--accent.is-shown .deco-rings::after { transform: scale(1); }
/* 小さいほうを少し遅らせる。Service の輪と同じ間合い。 */
.js-motion .deco-rings::after { transition-delay: .18s; }

.js-motion .ring::before { transform: translate(-50%, -50%) scale(0); }
/* ★ Service の輪はもとの transform を持たない（2026-09-22 に translateY(-50%) を
   やめて top の % 指定にした）。**消したのに書き写すと輪が上へ飛ぶ。** */
.js-motion .sec--infinity::before,
.js-motion .sec--infinity::after { transform: scale(0); }
.js-motion .is-shown .ring::before { transform: translate(-50%, -50%) scale(1); }
.js-motion .sec--infinity.is-shown::before,
.js-motion .sec--infinity.is-shown::after { transform: scale(1); }

/* ★ ヒーローの中身を、読み込み時にふわっと出す（2026-09-22 あやちゃん指示）。
   **「あなたの一歩目を支える。」だけ時差で登場させる。**
   ・ほかの3つ（英字・リード文・Scroll）は先にそろって出る
   ・見出しはそのあと。遅れは `--hero-lag` の1か所で決める

   ★ ヒーローは画面のいちばん上にあるので、読み込んだ時点で `is-shown` が付く。
     スクロールを待たずに動きはじめる。
   ★ 隠すのは `.js-motion` が付いたときだけ。**JS が死んだら文字が消える**のが
     この作りのいちばん怖い壊れ方で、ヒーローは**ページの主役の文**なので
     消えると何も伝わらない。`tools/check-motion.py` が見張る。 */
.js-motion .hero__eyebrow,
.js-motion .hero__title,
.js-motion .hero__lead,
.js-motion .hero__scroll {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
}
.js-motion .hero.is-shown .hero__eyebrow,
.js-motion .hero.is-shown .hero__title,
.js-motion .hero.is-shown .hero__lead,
.js-motion .hero.is-shown .hero__scroll {
  opacity: 1;
  transform: translateY(0);
}
/* ★ **先に出るのは見出し**（2026-09-22 あやちゃん指示で順番を入れ替えた）。
   前は英字・リード文・Scroll が先で、見出しが最後だった。
   それだと**最初の 0.8 秒、画面に小さい文字しか無い**時間ができて、
   読み込みが遅れているようにも見えた。言いたいことを先に出す。 */
.js-motion .hero__title   { transition-delay: .15s; }
/* ★ ほかの3つが時差で後から。わずかにずらして、そろいすぎないようにする。
   **間合いを変えるのは `--hero-lag` の1か所だけ。** */
.js-motion .hero__eyebrow { transition-delay: var(--hero-lag); }
.js-motion .hero__lead    { transition-delay: calc(var(--hero-lag) + .12s); }
.js-motion .hero__scroll  { transition-delay: calc(var(--hero-lag) + .24s); }

/* 2つ目を少し遅らせる。同時だと「2つの丸」ではなく1つの塊に見える。 */
.js-motion .ring:nth-child(2)::before { transition-delay: var(--ring-lag); }
.js-motion .sec--infinity.is-shown::after { transition-delay: .18s; }

/* ★ 丸の中の文字も一緒に出す。**これが無いと白地に白文字の瞬間ができる。**
   丸が膨らみ切る前に文字だけ出ていて、字が消えたように見えた
   （2026-09-22、コマを撮って気づいた。止まった画を見ても分からない）。
   遅れは `--ring-text-delay` ＝ 丸がほぼ開き切ったころ。2つ目は丸の時差
   `--ring-lag` ぶんをさらに足す（どちらも `.sec--rings` に置いてある）。
   ★ 他の節の文字は動かさない。地色の上に載っているので消えようがない。 */
.js-motion .ring > * { opacity: 0; transition: opacity .45s ease var(--ring-text-delay); }
.js-motion .is-shown .ring > * { opacity: 1; }
/* ★ 右の円の文字は、**円の時差ぶんだけ**後ろへ。式で出すこと。
   数を手で書くと、`--ring-lag` を変えたときに片方だけ動いて白地に白文字になる。 */
.js-motion .ring:nth-child(2) > * {
  transition-delay: calc(var(--ring-text-delay) + var(--ring-lag));
}

/* ============================================================
   会社概要
   ============================================================ */
/* ★ 幅と左右の位置を Message の箱と揃える（→ `--content-w`）。 */
.facts { margin: 0 auto; max-width: var(--content-w); }
.facts div {
  display: grid; grid-template-columns: 8rem 1fr; gap: var(--s4);
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.facts dt { font-weight: 700; color: var(--deep); margin: 0; }
.facts dd { margin: 0; }

/* ============================================================
   フッター
   ============================================================ */
.site-footer { background: var(--deep); color: var(--base); padding: var(--s16) var(--s4) var(--s8); }
.site-footer__inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--s12); justify-content: space-between;
}
.site-footer__name { font-weight: 700; font-size: var(--t2); margin-bottom: var(--s2); }
.site-footer__addr { font-size: var(--t0); font-weight: 300; margin: 0; opacity: .85; }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.site-footer a { color: var(--base); text-decoration: none; font-size: var(--t0); display: inline-block; padding-block: var(--s2); }
.site-footer a:hover { text-decoration: underline; }
/* まだ公開していないサイト（GARAGE 450）。リンクにせず名前だけ出す */
.site-footer__soon { font-size: var(--t0); opacity: .7; display: inline-block; padding-block: var(--s2); }

.site-footer__copy {
  max-width: var(--wrap); margin: var(--s12) auto 0;
  padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.2);
  font-size: var(--t-1); opacity: .8;
}

/* ============================================================
   狭い画面
   ============================================================ */
@media (max-width: 52rem) {
  .message { grid-template-columns: 14.4rem 1fr; gap: var(--s8); }
}

@media (max-width: 40rem) {
  :root {
    --header-h: 3.5rem;
    /* ★ 狭い画面はヒーローへ食い込ませたまま（2026-09-23 あやちゃん指示「スマホは今のまま」）。
       広い画面だけ 160px あける。狭い画面で同じだけあけると、画面の高さに対して空きすぎる
       （375px では元々 40px しか重なっていない）。 */
    --hero-overlap: clamp(2.5rem, 10vw, 9rem);
  }
  /* ★ **`padding` のショートハンドで書かないこと。** 左右まで書き戻してしまい、
     `.sec--infinity { padding-inline: 0 }` や `.sec--rings` の左右 0 を打ち消す
     （同じ詳細度で、こちらが後ろにあるので勝ってしまう）。
     2026-09-22 の実害：狭い画面で Service の中身だけ 16px 内側に入り、
     Company と左端が揃わなかった。変えたいのは上下だけなので `padding-block`。 */
  .sec { padding-block: var(--s20); }
  /* 上だけ詰める（左右と下は広い画面のまま） */
  .hero { padding-top: calc(var(--header-h) + var(--s12)); }
  .hero__scroll { display: none; }
  .br-sp { display: inline; }
  /* 高さは `--header-h` が上で 3.5rem に替わるので、ここで書き直さない */
  .site-header__inner { flex-wrap: nowrap; }
  /* ★ 狭い画面は ∞ マークだけ（`<picture>` が logo-mark に差し替える）。正方形なので
     幅＝高さ。ヘッダー 3.5rem に対して 2.5rem＝40px。**ここを書かずに広い画面の
     9rem を引き継ぐと、マークが 144px の巨大な丸になる。** */
  .site-header__brand img { width: 2.5rem; }
  .site-nav ul { gap: var(--s1) var(--s4); flex-wrap: nowrap; }
  .site-nav__ja { display: none; }        /* 狭い画面は英語だけ */
  .sec__head { margin-bottom: var(--s12); }
  /* ★ 上下の余白はここで触らない。箱になってからは `padding` の clamp が
     上下左右を同じだけ取っている。片側だけ書き戻すと箱の中が不揃いになる。 */
  .card { flex-direction: column; align-items: stretch; gap: var(--s4); }
  .card__logo { flex: none; place-items: center start; }
  .card__logo img { max-height: 8rem; }
  .message { grid-template-columns: 1fr; }
  .message__photo { max-width: 16.2rem; }
  /* ★ 狭い画面ではキャッチを1段下げる。`--t4`（28px）のままだと
     「分かることがあります。」が 308px で、入る幅 295px を **13px** はみ出して
     最後の「す。」だけが3行目に落ちる。`--t3` なら 242px で収まる。 */
  .message__catch { font-size: var(--t3); }
  .facts div { grid-template-columns: 1fr; gap: var(--s1); }

  /* ★ フッターの導線は**1行ぜんぶ幅のブロックメニュー**（2026-09-23 あやちゃん指示）。
     2列に並べていたころは1つ 160px で、指で押すには狭かった。
     ★ **節の一覧と関連サイトの間はひと呼吸あける。** 続けて1つの帯にすると、
       「会社概要」の次が**外のサイト**だと分からないまま押してしまう。
       行の高さも罫も同じまま、かたまりだけ分ける。 */
  .site-footer__inner { display: block; }
  .site-footer__inner > nav { margin-top: var(--s8); }
  /* ★ 罫は**行と行の間だけ。** かたまりの上と下には引かない（2026-09-23 あやちゃん指示）。
     上下にも引いていたころは3行のかたまりに罫が4本、2かたまりで**8本**あって
     縞模様になっていた。間だけなら**4本**で済む。 */
  .site-footer nav ul { gap: 0; }
  .site-footer nav li + li { border-top: 1px solid rgba(255, 255, 255, .18); }
  /* 1行の高さは指の届く 44px 以上（実測 56px）。 */
  .site-footer nav a,
  .site-footer nav .site-footer__soon { display: block; padding-block: var(--s4); }

  /* ★ Company の白い輪は**上へ**（2026-09-23 あやちゃん指示）。
     狭い画面では中身が画面いっぱいに広がるので、左下に置いた輪は
     代表メッセージの白い箱の裏へほとんど隠れていた。上へ置けば見出しと
     会社概要の**文字の下の地**になる。
     ★ **上下の関係は広い画面のまま**にする。下からの距離で置いていたときの
       中心の高さの差は `0.5rem + R大 - R小`。上からに直すと、同じ差を作る値は
       `2 × (R大 - R小) + 0.5rem`（375px で 296px）。数を直に書かない ──
       半径は画面幅で変わるので、固定値だと幅を跨いだ瞬間に関係が崩れる。
     ★ 節の上辺より上へ出さない。`overflow-x: clip` は**縦を切らない**ので、
       はみ出すと前の節（白）の上に赤い輪が乗る。 */
  .deco-rings::before { top: 0; bottom: auto; }
  .deco-rings::after {
    top: calc(2 * (var(--r-big) - var(--r-small)) + .5rem);
    bottom: auto;
  }
}