/* =========================================================================== HYBRID v2 — common/tokens.css 4部屋（W-HOUSE / W-BRAND / S-FLAGSHIP / S-DROP）が共有する唯一の土台。出典: direction/DIRECTION.md §1-1〜§1-5 ／ BUILD-SPEC-v2.md §3 実装者へ: このファイルは読むだけ。書き換えない。値が足りないと思ったら部屋側のCSSで --token を上書きするのではなく、まず common/README.md を読む。 =========================================================================== */ /* --------------------------------------------------------------------------- 0. 定数（4部屋共通・DIRECTION §1-1 / §1-2 の実測値そのまま）括弧内は実測コントラスト比（このファイルを書いた時に再計算して一致を確認済み） --------------------------------------------------------------------------- */ :root { /* 4つの地色（相互ΔE 最小 11.52・裁定の線10を全組が超えている。動かさない） */ --bg-house: #EDE7D8; /* 紙 L* 91.7 */ --bg-brand: #0E3B23; /* 深緑 L* 21.4 */ --bg-flag: #FFFFFF; /* 白 L* 100 */ --bg-drop: #0B0B0B; /* 黒 L* 2.9 */ /* 文字 */ --ink: #141310; /* 墨紙 15.06 ／白 18.58 */ --cream: #F7F5F0; /* 生成深緑 11.55 ／黒 18.06 */ /* 罫（1pxのみ。2px以上を引かない） */ --rule-house: #D9D5CB; --rule-brand: #1E4A31; --rule-flag: #E2DFD8; --rule-drop: #2A2A28; /* 差し色（1本につき1つ・面積5%以下） */ --pttp-green: #005726; /* 紙 7.12 ／白 8.78。深緑の地の上には絶対に出さない */ --vsw-red: #DC000C; /* S-DROP のボタン地。載せる文字は必ず生成（4.76 = AA） */ --neon: #D8FF3E; /* S-DROP のドロップ告知だけ・面積1%。載せる文字は墨（16.18） */ /* 副文字（灰）— 部屋ごとに値が違う。理由は §room-switch のコメント */ --muted-house: #66625A; /* 紙 4.92 */ --muted-brand: #9EA79F; /* 深緑 5.08 */ --muted-flag: #6F6F6C; /* 白 5.04 */ --muted-drop: #8A8A88; /* 黒 5.69 */ /* 寸法・字組（DIRECTION §1-3 のブロックそのまま） */ --ui: 12px; /* UIの基準。16pxは使わない */ --ls-caps: .10em; /* 英大文字ラベル */ --ls-body: .02em; /* 英小文字本文 */ --ls-jp: .08em; /* 和文 */ --lh-display: 1.05; /* 見出し。1.3以上にしない */ --lh-jp: 1.8; --header-h: 56px; --inset: 12px; --container: 1290px; /* 12列 / gap 15px */ --section: clamp(96px, 12vw, 200px); /* 12列グリッド（--container から導出。実装者が数えなくていいように出しておく） */ --gap: 15px; --col: calc((var(--container) - 11 * var(--gap)) / 12); /* 書体（2ファミリーだけ。3本目を作らない） Archivo の幅は font-stretch で指定する: 100% / 87% / 62%（README §書体） */ --font-en: "Archivo", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif; --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; --wdth-normal: 100%; --wdth-narrow: 87%; --wdth-cond: 62%; /* 動き（DIRECTION §1-5。この4つ以外の duration / ease を書かない） */ --d-reveal: 1.1s; /* 共通リビール clip-path */ --d-img: 1.4s; /* 内側 img 1.12→1.0 */ --d-hover-img: .5s; /* 画像 scale 1.0→1.04 */ --d-hover-line: .3s; /* 下線 scaleX 0→1 */ --d-hover-btn: .25s; /* ボタン背景色 */ --e-expo: cubic-bezier(.16, 1, .3, 1); /* expo.out 相当 */ --e-quart: cubic-bezier(.165, .84, .44, 1); /* quart.out 相当 */ } /* --------------------------------------------------------------------------- 1. 部屋の切替だけで地色・文字・罫・差し色が入れ替わる。 --muted について: DIRECTION §1-4 は副文字を #8A8A8A と書いているが、実測すると紙 2.80 / 白 3.45 で WCAG AA（4.5）を割る（11pxは大文字テキスト扱いにならない）。暗い2部屋（深緑3.65 / 黒5.70）でも紙・白では読めない。よって明るい2部屋だけ墨寄りに落とした。4部屋すべて 4.5 以上。灰の「静かさ」は保っている。 --------------------------------------------------------------------------- */ body[data-room="house"] { --bg: var(--bg-house); --fg: var(--ink); --rule: var(--rule-house); --muted: var(--muted-house); --accent: var(--pttp-green); --accent-fg: var(--cream); /* 墨のボタン → ホバーで PTTP 緑（面積3%以下を守る） */ --btn-bg: var(--ink); --btn-fg: var(--bg-house); --btn-bd: var(--ink); --btn-bg-h: var(--pttp-green); --btn-fg-h: var(--cream); /* 15.06 → 8.06 */ } body[data-room="brand"] { --bg: var(--bg-brand); --fg: var(--cream); --rule: var(--rule-brand); --muted: var(--muted-brand); /* 差し色を足さない（差し色＝10色の地色送りそのもの）。PTTP緑をこの部屋に出さない */ --accent: var(--cream); --accent-fg: var(--bg-brand); /* 抜きのボタン → ホバーで生成に塗り潰す。色を1つも増やさずに背景色0.25sを成立させる */ --btn-bg: transparent; --btn-fg: var(--cream); --btn-bd: var(--cream); --btn-bg-h: var(--cream); --btn-fg-h: var(--bg-brand); /* 11.55 → 11.55 */ } body[data-room="flag"] { --bg: var(--bg-flag); --fg: var(--ink); --rule: var(--rule-flag); --muted: var(--muted-flag); --accent: var(--pttp-green); --accent-fg: var(--cream); --btn-bg: var(--ink); --btn-fg: var(--bg-flag); --btn-bd: var(--ink); --btn-bg-h: var(--pttp-green); --btn-fg-h: var(--cream); /* 18.58 → 8.06 */ } body[data-room="drop"] { --bg: var(--bg-drop); --fg: var(--cream); --rule: var(--rule-drop); --muted: var(--muted-drop); --accent: var(--vsw-red); --accent-fg: var(--cream); /* VSW赤の地に生成の文字（4.76 = AA）。黒地に赤文字（3.79）は作らない */ --btn-bg: var(--vsw-red); --btn-fg: var(--cream); --btn-bd: var(--vsw-red); --btn-bg-h: var(--cream); --btn-fg-h: var(--vsw-red); /* 4.76 → 4.76 */ } /* W-BRAND の地色送り。部屋側の JS は --swatch を1つ書き換えるだけでよい。 reduce 時は §8 で transition を切る（色は最後に設定された1色で止まる）。 */ body[data-room="brand"] { --bg: var(--swatch, var(--bg-brand)); transition: background-color .9s var(--e-expo); } /* 保険: data-room を書き忘れたページを白紙にしない */ body:not([data-room]) { --bg: var(--bg-flag); --fg: var(--ink); --rule: var(--rule-flag); --muted: var(--muted-flag); --accent: var(--pttp-green); --accent-fg: var(--cream); --btn-bg: var(--ink); --btn-fg: var(--bg-flag); --btn-bd: var(--ink); --btn-bg-h: var(--pttp-green); --btn-fg-h: var(--cream); } /* --------------------------------------------------------------------------- 2. リセット（最小限。normalize は入れない） --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Lenis と喧嘩するので smooth にしない（アンカーは lenis.scrollTo を使う） */ scroll-behavior: auto; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-jp); font-size: var(--ui); line-height: var(--lh-jp); letter-spacing: var(--ls-jp); font-synthesis: none; /* 偽ボールド・偽イタリックを作らせない */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* overflow-x:hidden は書かない。横スクロールは隠さず直す（page-check が見ている） */ } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } picture { display: block; } h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } table { border-collapse: collapse; border-spacing: 0; } hr { border: 0; border-top: 1px solid var(--rule); margin: 0; } [hidden] { display: none !important; } ::selection { background: var(--fg); color: var(--bg); } /* キーボード動線は演出があっても必ず通す（DIRECTION の禁止事項に無くても外さない） */ :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } .skip { position: absolute; left: var(--inset); top: -100px; z-index: 100; background: var(--fg); color: var(--bg); padding: 10px 14px; font-family: var(--font-en); font-size: 11px; letter-spacing: var(--ls-caps); text-transform: uppercase; } .skip:focus { top: var(--inset); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- 3. Lenis に必要な CSS（lenis.css を別読みしないで済むようにここに置く） --------------------------------------------------------------------------- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } .lenis.lenis-smooth iframe { pointer-events: none; } /* --------------------------------------------------------------------------- 4. 日英の型（DIRECTION §1-4）英が上・大、和が下・小、比 1 : 0.6、左端を揃える、同じ行に混ぜない。使い方:

……

.pair に font-size を1つ与えるだけ。.jp は自動で 0.6 倍になる。 --------------------------------------------------------------------------- */ .pair { display: block; } .pair > .en, .pair > .jp { display: block; } .pair > .en { font-size: 1em; } .pair > .jp { font-size: .6em; margin-top: .5em; } .en { font-family: var(--font-en); font-stretch: var(--wdth-normal); letter-spacing: var(--ls-body); line-height: var(--lh-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .jp { font-family: var(--font-jp); letter-spacing: var(--ls-jp); line-height: var(--lh-jp); color: var(--muted); font-weight: 400; } /* 英大文字ラベル 12px / .10em ＋その直下に和文 11px（DIRECTION §1-4） */ .caps { font-family: var(--font-en); font-stretch: var(--wdth-normal); font-size: var(--ui); line-height: 1.2; letter-spacing: var(--ls-caps); text-transform: uppercase; font-variant-numeric: tabular-nums; } .caps + .jp { font-size: 11px; margin-top: 4px; } /* 数字と価格は必ず欧文側で受ける＋ tabular-nums（縦の桁を揃える） */ .num, .price, time, td.num, th.num, input[type="number"] { font-family: var(--font-en); font-stretch: var(--wdth-normal); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: var(--ls-body); } /* 見出しのジャンプ率は 3.0倍以上か 1.0倍の二択（中間サイズを作らない） */ .display { font-family: var(--font-en); font-stretch: var(--wdth-normal); font-weight: 700; line-height: var(--lh-display); letter-spacing: -0.01em; text-transform: uppercase; } /* --------------------------------------------------------------------------- 5. 版面 --------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--inset); } .grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); } .section { padding-block: var(--section); } .rule { border-top: 1px solid var(--rule); } .muted { color: var(--muted); } .accent { color: var(--accent); } /* --------------------------------------------------------------------------- 6. ホバー3種（DIRECTION §1-5。これ以外のホバーを作らない） .h-img 画像 scale 1.0→1.04 / .5s quart.out .h-line 下線 scaleX 0→1 origin left / .3s .h-btn ボタン背景色 / .25s 注意: S-FLAGSHIP は transform 禁止（§2-3）なので .h-img を使わない。あの部屋のホバーは2枚目写真へのクロスフェード160msだけ。 --------------------------------------------------------------------------- */ .h-img { display: block; overflow: hidden; } .h-img img { transform: scale(1); transition: transform var(--d-hover-img) var(--e-quart); will-change: transform; } .h-img:hover img, .h-img:focus-visible img { transform: scale(1.04); } .h-line { position: relative; display: inline-block; } .h-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--d-hover-line) var(--e-quart); } .h-line:hover::after, .h-line:focus-visible::after { transform: scaleX(1); } .h-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; /* タップ領域 44px。これ以下にしない */ background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); font-family: var(--font-en); font-stretch: var(--wdth-normal); font-size: var(--ui); letter-spacing: var(--ls-caps); text-transform: uppercase; transition: background-color var(--d-hover-btn) linear, color var(--d-hover-btn) linear; } .h-btn:hover, .h-btn:focus-visible { background: var(--btn-bg-h); color: var(--btn-fg-h); } .h-btn[disabled], .h-btn[aria-disabled="true"] { opacity: .35; pointer-events: none; } /* --------------------------------------------------------------------------- 7. リビールの初期状態 html.js が付いている時だけ隠す（JSが落ちても本文は必ず読める）。 html.js はの1行インラインスクリプトが付ける。README の雛形を使うこと。 LCP の

に [data-reveal] を付けてはいけない（clip-path で LCP が遅れる）。 --------------------------------------------------------------------------- / html.js [data-reveal] { clip-path: inset(100% 0 0 0); will-change: clip-path; } html.js [data-reveal] > img, html.js [data-reveal] img[data-reveal-img] { will-change: transform; } html.js [data-lines] { visibility: hidden; } / .is-in は上の2行より詳細度を高くしないと勝てない（html.js [data-x] = 0,2,1）。ここを 0,2,0 で書くと、リビール完了後に clearProps で inline が消えた瞬間にまた clip-path で隠れる。実際に踏んだ。 / html.js [data-reveal].is-in { clip-path: none; will-change: auto; } html.js [data-lines].is-in { visibility: visible; } / --------------------------------------------------------------------------- 8. prefers-reduced-motion のガード（DIRECTION §1-5「1行入れる」） reveal.js 側でも Lenis を作らない・即表示にするが、JSより先にCSSで止める。 --------------------------------------------------------------------------- / @media (prefers-reduced-motion: reduce) { html.js [data-reveal], html.js [data-reveal].is-in { clip-path: none !important; } html.js [data-lines], html.js [data-lines].is-in { visibility: visible !important; } body[data-room="brand"] { transition: none !important; } , ::before, ::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }