/* ========================================================================== Base — リセット + 要素既定 + タイポグラフィユーティリティ tokens.css の後に読み込む。 ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: var(--size-body-lg); font-weight: var(--weight-regular); line-height: var(--leading-normal); letter-spacing: var(--track-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* 日本語の行頭・行末の禁則と、単語途中での不自然な改行を抑える */ word-break: normal; overflow-wrap: anywhere; line-break: strict; } /* 時刻・日付・金額・予約 ID は必ず等幅数字に。 カレンダーや一覧で数字の縦位置が揃うかどうかが、精度の印象を決める。 */ body { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* -------------------------------------------------------------------------- 言語ごとの組版調整 トークンを上書きするだけで、コンポーネント側は一切変更しない。 -------------------------------------------------------------------------- */ /* 注意 — トークンの差し替えだけでは不十分な理由 letter-spacing / line-height は「計算済みの値」が継承される。 つまり子孫が自分で letter-spacing を宣言していない限り、 祖先で計算された値がそのまま降りてきて var() は再評価されない。 `` のように最上位に付けた場合は body 側の宣言で 解決されるが、`
` のように途中に付けた場合は効かない。 そのため、各 [lang] ルールでこの 2 つを明示的に宣言し直しておく。 */ /* タイ語は声調記号・母音記号が文字の上下に積まれるため、 日本語と同じ行間だと記号が切れる／隣の行と衝突する。行間を広げる。 また単語間にスペースを置かない言語なので、字間も 0 に戻す。 */ [lang="th"] { --leading-tight: 1.4; --leading-snug: 1.6; --leading-normal: 1.85; --track-display: 0; --track-title: 0; --track-body: 0; letter-spacing: var(--track-body); line-height: var(--leading-normal); } /* ラテン文字・キリル文字は日本語より 1 語が長い。 見出しの詰めを日本語ほど強くすると窮屈になるため少し緩める。 */ [lang="de"], [lang="ru"], [lang="fr"], [lang="es"], [lang="it"], [lang="en"] { --track-display: -0.021em; --track-title: -0.014em; --track-body: -0.003em; letter-spacing: var(--track-body); } /* 韓国語はハングルの字面が大きく、詰めると可読性が落ちる */ [lang="ko"] { --track-display: -0.01em; --track-title: -0.005em; --track-body: 0; letter-spacing: var(--track-body); } h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { margin: 0; padding: 0; list-style: none; } img, picture, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; } [hidden] { display: none !important; } a { color: var(--accent); text-decoration: none; text-underline-offset: 0.22em; } a:hover { text-decoration: underline; } hr { height: var(--hairline); margin: 0; border: 0; background: var(--line); } /* -------------------------------------------------------------------------- FOCUS マウス操作では出さず、キーボード操作でのみ出す。リングは 2px + 2px オフセット。 -------------------------------------------------------------------------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--accent-tint-strong); color: var(--text); } /* -------------------------------------------------------------------------- TYPOGRAPHY UTILITIES -------------------------------------------------------------------------- */ .t-display { font-family: var(--font-display); font-size: var(--size-display); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--track-display); } .t-title-1 { font-family: var(--font-display); font-size: var(--size-title-1); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--track-title); } .t-title-2 { font-size: var(--size-title-2); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--track-title); } .t-title-3 { font-size: var(--size-title-3); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--track-title); } .t-body { font-size: var(--size-body-lg); line-height: var(--leading-normal); } .t-callout { font-size: var(--size-callout); line-height: var(--leading-normal); } .t-footnote { font-size: var(--size-footnote); line-height: var(--leading-normal); letter-spacing: var(--track-caption); } .t-caption { font-size: var(--size-caption); line-height: var(--leading-snug); letter-spacing: var(--track-caption); } /* セクションの上に置く小見出し。全角を使わず、字間を開けて「ラベル」に見せる */ .t-label { font-size: var(--size-caption); font-weight: var(--weight-semibold); line-height: 1; letter-spacing: var(--track-label); color: var(--text-3); text-transform: uppercase; } .t-mute { color: var(--text-2); } .t-mute-2 { color: var(--text-3); } .t-medium { font-weight: var(--weight-medium); } .t-semibold { font-weight: var(--weight-semibold); } .t-center { text-align: center; } .t-measure { max-width: var(--measure); } /* -------------------------------------------------------------------------- LAYOUT PRIMITIVES -------------------------------------------------------------------------- */ .page { width: 100%; max-width: var(--page-form); margin-inline: auto; padding-inline: var(--gutter); } .page--wide { max-width: var(--page-wide); } .stack > * + * { margin-top: var(--flow, var(--space-4)); } .stack-1 { --flow: var(--space-1); } .stack-2 { --flow: var(--space-2); } .stack-3 { --flow: var(--space-3); } .stack-4 { --flow: var(--space-4); } .stack-5 { --flow: var(--space-5); } .stack-6 { --flow: var(--space-6); } .stack-8 { --flow: var(--space-8); } .stack-10 { --flow: var(--space-10); } .row { display: flex; align-items: center; gap: var(--space-3); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .spacer { flex: 1; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- MOTION — 減速設定を尊重する -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }