/* ============================================================================= tokens.css — デザイントークン（:root 一元管理・ライト/ダーク対応） ----------------------------------------------------------------------------- PhonIQ の style.css（音の研究ノート×積み木）で確立した「トークン一元管理」の型を、 HP/LP 用に汎用化したもの。既定パレットは「えがこと」（生成り×深緑×琥珀）。 別ブランドで使うときは【SWAP】印のブロックの値だけ差し替える（構造は触らない）。 設計方針: ・色/余白/角丸/影/書体/文字サイズ をすべて変数化し、HTML側はクラスで組む。 ・アクセントは1色（--accent）に集約し、CTA一点集中に使う（他所で使わない）。 ・文字サイズは clamp() で流体化（スマホ〜PCで破綻しない）。 ・脱Noto（本文=IBM Plex Sans JP／見出し=Zen Old Mincho／手書き=Klee One）。 ※Webフォントの読み込みは別途（ か @font-face）。ここは family 指定のみ。 ============================================================================= */ :root, [data-theme="light"] { /* ===== 【SWAP】ブランド3色（ここだけ差し替えれば世界観が変わる） ===== */ --paper: #F7F4EF; /* 生成り＝地の色（安心・余白） */ --ink: #26231F; /* 墨＝本文文字 */ --brand: #1F4D4A; /* 深緑＝信頼（見出し・強調・枠） */ --accent: #E7A95A; /* 琥珀＝CTA差し色（唯一のアクセント。ここぞだけ） */ --accent-ink: #26231F; /* アクセント面に載せる文字色（コントラスト確保） */ /* ===== 面・境界・文字（brandから濁色を派生。数値はブランドに合わせ微調整可） ===== */ --surface: #FBFAF7; /* カード等の面 */ --surface-offset: #EFEBE3; /* 一段沈めた面（FAQ・引用など） */ --border: #DED8CD; /* 罫・カード枠 */ --divider: #E7E2D8; /* 薄い区切り線 */ --text: var(--ink); --text-muted: #6E6A62; /* 補足・キャプション */ --text-faint: #A7A299; /* プレースホルダ級 */ --text-inverse: #F9F7F2; /* 濃色面に載せる文字 */ --brand-hover: #163A38; /* brandのホバー（少し暗く） */ --brand-wash: #E4ECEA; /* brandの極薄面（帯・タグ背景） */ /* ===== 状態色（誠実トーン。原色は避け、少しくすませる） ===== */ --success: #437A22; --error: #A12C7B; --warning: #964219; /* ===== 角丸 ===== */ --radius-sm: .375rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; /* ===== 影（多層。自作しにくいので open-props 等を参考に段階化） ===== */ --shadow-sm: 0 1px 2px rgba(38,35,31,.06); --shadow-md: 0 4px 14px rgba(38,35,31,.09); --shadow-lg: 0 14px 38px rgba(38,35,31,.14); /* ===== 余白（4pxグリッド） ===== */ --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;--space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; /* ===== 文字サイズ（clamp で流体化：最小 / 推奨 / 最大） ===== */ --text-xs: clamp(.75rem, .70rem + .2vw, .8125rem); --text-sm: clamp(.875rem, .82rem + .3vw, .9375rem); --text-base: clamp(1rem, .96rem + .2vw, 1.0625rem); --text-lg: clamp(1.125rem,1.00rem + .6vw,1.375rem); --text-xl: clamp(1.375rem,1.10rem + 1.2vw,1.875rem); --text-2xl: clamp(1.75rem, 1.30rem + 2.0vw,2.75rem); /* H1・FVキャッチ */ --leading-tight: 1.25; --leading-normal: 1.65; /* ===== 書体（脱Noto。約物はYakuHanJPを先頭に足すと文字組が締まる） ===== 例: --font-body の先頭に 'YakuHanJP', を付けると約物が半角化される。 */ --font-body: 'YakuHanJP','IBM Plex Sans JP','Noto Sans JP',sans-serif; --font-display: 'Zen Old Mincho','Charis SIL',Georgia,serif; --font-hand: 'Klee One','YuKyokasho',cursive; /* 手書き・注釈のポイント使い */ /* ===== レイアウト幅 ===== */ --content: 1080px; /* 通常セクションの最大幅 */ --content-narrow: 680px; /* 読み物・フォームの最大幅 */ --gutter: clamp(1rem, 5vw, 2.5rem); /* 左右の余白 */ --transition: 180ms cubic-bezier(.16,1,.3,1); } /* ダーク（任意。LPは省略可。アプリは推奨）。彩度を落として1つの帯にそろえる。 */ [data-theme="dark"] { --paper:#12100D; --surface:#1A1815; --surface-offset:#211E1A; --border:#33302B; --divider:#2A2723; --ink:#E6E1D8; --text:var(--ink); --text-muted:#9A958C; --text-faint:#5E5A52; --text-inverse:#12100D; --brand:#6FA39D; --brand-hover:#86B7B1; --brand-wash:#18302E; --accent:#E7A95A; --accent-ink:#12100D; --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 4px 14px rgba(0,0,0,.4); --shadow-lg:0 14px 38px rgba(0,0,0,.5); } /* ============================================================================= 最小ベース（destyle.css 等のリセットを先に読み込む前提。ここは骨だけ） ============================================================================= */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; } body{ margin:0; min-height:100dvh; background:var(--paper); color:var(--text); font-family:var(--font-body); font-size:var(--text-base); line-height:var(--leading-normal); } h1,h2,h3,h4{ font-family:var(--font-display); line-height:var(--leading-tight); font-weight:700; color:var(--brand); } /* reset.css(destyle)は見出しを1emに潰すので、サイズをトークンで明示的に戻す */ h1{ font-size:var(--text-2xl); } h2{ font-size:var(--text-xl); } h3{ font-size:var(--text-lg); } a{ color:inherit; text-decoration:none; } :focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--radius-sm); } ::selection{ background:var(--brand-wash); } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms!important; transition-duration:.01ms!important; } } /* ============================================================================= 最小コンポーネント（LP 8セクションで使う分だけ。増やすときはここに追記） ============================================================================= */ .container{ max-width:var(--content); margin-inline:auto; padding-inline:var(--gutter); } .container--narrow{ max-width:var(--content-narrow); } .section{ padding-block:clamp(var(--space-12), 8vw, var(--space-24)); } /* 詰め込まない＝安心は余白から */ /* CTA（アクセントを使う唯一の場所） */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.85em 1.6em; border-radius:var(--radius-full); font-weight:700; transition:transform var(--transition), box-shadow var(--transition), background var(--transition); } .btn--primary{ background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-md); } .btn--primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg); } .btn--secondary{ background:transparent; color:var(--brand); border:1.5px solid var(--brand); } /* 副CTAは枠線のみ＝従属 */ /* バッジ・カード・区切り */ .badge{ display:inline-block; padding:.3em .8em; border-radius:var(--radius-full); background:var(--brand-wash); color:var(--brand); font-size:var(--text-sm); font-weight:700; } .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--space-6); box-shadow:var(--shadow-sm); } .hand{ font-family:var(--font-hand); } /* 手書きのポイント使い（多用しない） */