/* ============================================================ tokens.css — 浪早リゾート 共通デザイントークン ------------------------------------------------------------ 2層構造になっています。 [1] 骨格トークン … 余白・文字・角丸・動き。全サイト共通。 ここを触ると全ページが変わります。 [2] テーマ色 … 色だけ。サイトごとに差し替える層。 梅酒サイトはここだけ入れ替えれば別の顔になります。 ルール: - HTML/CSS に生の値（#fff や 24px）を直接書かない。必ず変数を使う。 - 新しい値が必要になったら、勝手に足さず先に相談する。 ============================================================ */ /* ============================================================ [1] 骨格トークン（共通・原則変更しない） ============================================================ */ :root { /* ---- 書体 -------------------------------------------------- 2026-08-19改定。旧ルールは「明朝は宿名だけ」だったが、 design-system.md の設計意図（明朝の見出し＋ゴシックの本文）と 矛盾していたため、意図の側へ揃えた。 明朝を使う場所：宿名・ヒーローのh1・セクションのh2（大きい文字だけ） ゴシックを使う場所：本文・h3以下・ボタン・ラベル・表 ※明朝は小さい文字だと読みにくい。24px未満には使わない。 */ --font-base: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif; --font-brand: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; /* ---- 文字サイズ -------------------------------------------- */ --fs-xs: 0.75rem; --fs-sm: 0.85rem; --fs-base: 1rem; --fs-lg: 1.1rem; --fs-h3: 1.3rem; /* 本文の1.3倍。1.15倍では見出しとして働かなかった */ --fs-h2: clamp(1.5rem, 5vw, 2.05rem); --fs-h1: clamp(2rem, 7vw, 2.9rem); /* ---- ナビ専用（2026-09-07 ヘッダー刷新・第2段階）------------ --fs-sm(13.6px)はボタン等ほかの部品と共用のため、ナビだけ上げる と全体に波及する。ナビ・ハンバーガーメニュー専用にトークンを分けた。 */ --fs-nav: 1rem; /* 16px */ /* ---- PCのファーストビュー専用（2026-09-07 追加・オーナー承認済み）------ 760px以上でのみ使う。スマホは上の --fs-* のまま変えない。 PCで文字が小さすぎて、動く背景写真の上で読めなかったため引き上げた。 実測値: h1 46.4px→76px / キャッチ 17.6px→24px / ボタン 13.6px→19.2px */ --fs-hero-h1-lg: 4.75rem; /* 76px */ --fs-hero-catch-lg: 1.5rem; /* 24px */ --fs-hero-btn-lg: 1.2rem; /* 19.2px */ --hero-minh-lg: 88vh; /* ヒーローの高さ（PC）。76vhでは迫力が出なかった */ /* ---- 行間 -------------------------------------------------- */ --lh-tight: 1.45; /* 見出し */ --lh-base: 1.9; /* 本文 */ /* ---- 字間（本文にも入れるのが空気感の要） ------------------ */ --ls-base: 0.04em; --ls-wide: 0.09em; /* 見出し */ --ls-label: 0.3em; /* 英字の小ラベル */ /* ---- 太さ（600以上は使わない） ----------------------------- */ --w-normal: 400; --w-med: 500; /* ---- 余白（8の倍数の階段。この階段以外は使わない） --------- */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: 64px; --sp-6: 80px; --sp-7: 120px; --sec-y: var(--sp-6); /* セクション上下：モバイル（64→80px） */ --sec-y-lg: var(--sp-7); /* セクション上下：PC（80→120px）余白が上質さを作る */ /* ---- 幅 ---------------------------------------------------- */ --w-page: 1140px; /* PCで左右の余白が空きすぎないように。1440px画面で左右150px */ --w-read: 700px; /* 読み物の1行の長さ。日本語で約42文字（35〜45文字が読みやすい） */ /* ---- 画面の左右余白（PC専用。2026-09-08 追加・オーナー承認済み）-------- ヘッダーとヒーローは、中央1140pxの箱に入れるのをやめ、この値だけ 画面の左端・右端から離して置く。改定前は画面が広いほど文字が中央へ 集まり、ナビもヒーローの文字も「真ん中に浮いている」状態になっていた。 画面幅の5%だが、6rem(96px)で頭打ちにして大画面でも離れすぎないようにする。 ヘッダーの宿名とヒーローのh1が、同じ左端の線でそろう。 */ --page-inset-lg: clamp(1.5rem, 5vw, 6rem); /* ---- 装飾（角丸は1種類だけ。影は使わない） ----------------- */ --radius: 10px; /* ---- 動き（速さと動き方を1種類に統一） --------------------- */ --dur: 0.8s; /* 演出（スクロールで現れる動き）用 */ --dur-fast: 0.18s; /* 操作の反応（ホバー・タップ）用。0.8sでは反応が遅く壊れて見える */ --ease: cubic-bezier(0.19, 1, 0.22, 1); } /* ============================================================ [2] テーマ色（サイトごとに差し替える層） ------------------------------------------------------------ 色は3役だけ。背景 / 文字 / 強調。 --fg-mute と --line は文字色の透明度違いなので色数に数えない。 ============================================================ */ /* ---- 波音（海）: ---------------- */ .theme-hanon { --bg: #f7f8f8; /* 背景：ほぼ白。純白にしない */ --bg-alt: #eceff0; /* 交互セクション用（同系の濃淡） */ --fg: #1e3a4a; /* 文字：深い藍。黒は使わない */ --accent: #e8b83a; /* 強調：暖簾の黄。CTAとラベルのみ */ --on-accent: #16303d; /* 強調色の上に乗る文字 */ --fg-mute: rgba(30, 58, 74, 0.66); --line: rgba(30, 58, 74, 0.16); --hero-veil: rgba(16, 34, 44, 0.55); /* 聖地巡礼の導線だけに使う色（2026-09-08 追加・オーナー判断）。 「色は3役だけ」の例外として1色だけ足した。理由は、予約（--accent の黄）と 聖地巡礼を、ひと目で別の行き先だと分からせるため。同じ黄にすると ファーストビューに同じ色のボタンが2つ並び、どちらが予約か分からなくなる。 色は田野の海の色。トップの写真4枚から機械抽出した #6f9fc4 を、 白い文字が確実に読める濃さまで落としたもの（コントラスト比 5.4:1）。 使ってよいのは聖地巡礼への導線ボタンだけ。他の用途へ広げない。 */ --seichi: #35708f; } /* ---- 梅酒（準備中）: ----------- 梅酒事業の開始後に使用する。骨格は波音とまったく同じで、 この色3つだけが入れ替わる。 */ .theme-umeshu { --bg: #faf7f1; --bg-alt: #f2ece1; --fg: #3a2a20; --accent: #8c4a3f; --on-accent: #faf7f1; --fg-mute: rgba(58, 42, 32, 0.66); --line: rgba(58, 42, 32, 0.16); --hero-veil: rgba(40, 26, 18, 0.55); --seichi: #35708f; /* 波音と同じ。梅酒サイトでは聖地巡礼の導線を使わない想定 */ }