/* SAMPLE-DINING テーマ — 配色・書体・タイポサイズのみ * * 骨格は _kit/style-base.css。ここは「ワインレッド＋真鍮／明朝的なセリフ体／ * ゆったりした行間と大きな余白」というこのサンプルの声だけを持つ。 * 色の実値は書かない。すべて config.js の palette から CSS 変数で届く。 * * 3本での差別化（分類が重ならないようにしている）: * sample01 細身サンセリフ 400 / 暖色アンバー / 静かな余白 * sample-gym 極太コンデンス 800 / 寒色スチール＋レッド / 詰めた組み * ここ セリフ 600 / ワインレッド＋真鍮 / ゆったりした行間 * * 配色の使い分け（G3 実測にもとづく）: * accent（ワインレッド）は暗いので、暗い背景の上の文字には使わない。 * 塗り・罫・発光に使い、その上に載る文字は ink。小さな強調文字は accent2（真鍮）。 */ html, body { /* --c-bg が入るまでの下地。ブランド色ではなく白フラッシュ防止用の黒 */ background: var(--c-bg, #000); } body { color: var(--c-ink); font-family: var(--f-body); line-height: 1.95; /* 3本のなかで最もゆったり */ -webkit-font-smoothing: antialiased; } :focus-visible { outline: 2px solid var(--c-accent2); outline-offset: 4px; } /* ------------------------------------------------------------ タイポ */ /* 明朝的な骨格・ハイコントラスト。字間は開けすぎず、行間で余白をつくる */ .headline { font-family: var(--f-display); font-weight: var(--f-display-weight, 600); line-height: 1.06; letter-spacing: .005em; font-size: clamp(2.1rem, 8.6vw, 7rem); color: var(--c-ink); } .headline--hero { font-size: var(--hero-size, clamp(2.6rem, 13vw, 9rem)); letter-spacing: .01em; } .sub { font-size: clamp(.95rem, 3.4vw, 1.2rem); color: var(--c-ink); line-height: 2.05; } /* 真鍮色の細いラベル行。イタリック混じりでセリフ体の性格を出す */ .tagline { font-family: var(--f-display); font-style: italic; font-size: clamp(.95rem, 3.4vw, 1.35rem); color: var(--c-accent2); letter-spacing: .06em; } /* 角のある枠線ボタン。sample01 は線のピル、sample-gym は塗りのピル */ .cta { border: 1px solid var(--c-accent2); border-radius: 0; color: var(--c-accent2); background: transparent; font-size: clamp(.8rem, 2.9vw, .95rem); letter-spacing: .3em; text-indent: .3em; /* 字間を広げた分の右余りを相殺する */ } .cta:hover, .cta:focus-visible { background: var(--c-accent2); color: var(--c-bg); } /* S6 発光タイポ（文字は生成AIではなく CSS で描く） */ .neon { font-family: var(--f-display); font-weight: var(--f-display-weight, 600); font-size: clamp(2rem, 9.5vw, 8rem); line-height: 1.1; letter-spacing: .02em; color: var(--c-ink); /* ワインレッドは暗いので、グローを強めてもグリフのコントラストが落ちない */ text-shadow: 0 0 .3em color-mix(in srgb, var(--c-accent) 90%, transparent), 0 0 .9em color-mix(in srgb, var(--c-accent) 75%, transparent), 0 0 2.4em color-mix(in srgb, var(--c-accent2) 30%, transparent); } /* ------------------------------------------------- 静的章（S7 / S8） */ .stage--static .headline { font-size: clamp(1.9rem, 6.5vw, 4rem); } /* 縦罫で仕切る品書き。sample01 は格子、sample-gym は左の柱 */ .cards { background: transparent; border: 0; border-top: 1px solid color-mix(in srgb, var(--c-accent2) 42%, transparent); } .card { background: transparent; border-bottom: 1px solid color-mix(in srgb, var(--c-accent2) 22%, transparent); } .card__name { font-family: var(--f-display); font-size: 1.15rem; letter-spacing: .02em; color: var(--c-ink); } .card__price { font-family: var(--f-display); font-size: 1.8rem; line-height: 1.2; letter-spacing: .01em; color: var(--c-accent2); } .card__note { font-size: .84rem; color: color-mix(in srgb, var(--c-ink) 78%, transparent); } .map { border: 1px solid color-mix(in srgb, var(--c-accent2) 38%, transparent); background: color-mix(in srgb, var(--c-accent) 12%, transparent); } .map__pin { background: var(--c-accent2); box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-accent2) 20%, transparent); } .map__label { font-size: .8rem; color: color-mix(in srgb, var(--c-ink) 80%, transparent); letter-spacing: .04em; } .access div { font-size: clamp(.9rem, 3.1vw, 1.05rem); color: color-mix(in srgb, var(--c-ink) 90%, transparent); } .footnote { border-top: 1px solid color-mix(in srgb, var(--c-accent2) 30%, transparent); font-size: .78rem; color: color-mix(in srgb, var(--c-ink) 72%, transparent); letter-spacing: .03em; } /* ============================================================== B24 */ /* JS が動かなくても真っ白にしないための塊。 */ /* ★組み立てが終わった合図（