/* ============================================================
tokens.css — Curations Design System デザイントークン
============================================================
01_design.md のブランドトークンと kyodo LP のデザインシステムを
ソースオブトゥルースとして統合した共通トークンファイル。
デザイン言語: 温かみのあるブラウン系（brand-900 #391F17 基調）
ダークセクション: brand-900 背景（ink系は廃止）
ボタン: transparent bg + brand border（グリーン塗りではない）
CTA パルス: cream/brand カラー（グリーングローではない）
オーブ: brand-300/brand-400 トーン
使い方:
このファイルだけで、リセット・トークン・基本レイアウト・
アニメーションが揃う。各LP・ページ固有のスタイルは別ファイルで。
フォント読み込み（HTMLのに記述）:
============================================================ */
/* ============================================================
0. リセット & ベーススタイル
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-body);
color: var(--color-text-primary);
line-height: var(--line-height-relaxed);
background: var(--color-bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
transition: var(--transition-default);
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
ul, ol {
list-style: none;
}
/* ============================================================
1. ブランドカラー（01_design.md 準拠 — Brown パレット）
============================================================
curations.jp のコーポレートカラー。温かみのあるブラウン系。
数値が大きいほど濃い。これがデザインシステムの主軸。
============================================================ */
:root {
/* --- Brand Brown（プライマリ・デザイン言語） --- */
--color-brand-900: #391F17; /* 最も濃い — 見出し・強調・ダーク背景 */
--color-brand-800: #4C3C38; /* セクション説明文 */
--color-brand-700: #5E4A42;
--color-brand-600: #7A635A;
--color-brand-500: #96796E;
--color-brand-400: #B39A8E;
--color-brand-300: #CFA2A2;
--color-brand-200: #EFE8E0; /* フッター・強調セクション背景 */
--color-brand-100: #FFF9EF; /* メイン背景（温かみのあるクリーム） */
--color-brand-50: #FFFCF7; /* 最も薄い */
/* --- Neutral（無彩色） --- */
--color-neutral-900: #222222;
--color-neutral-800: #333333; /* 本文テキスト */
--color-neutral-700: #666666; /* サブテキスト */
--color-neutral-600: #999999;
--color-neutral-500: #BBBBBB; /* 補助テキスト */
--color-neutral-400: #CCCCCC; /* ボーダー */
--color-neutral-300: #EEEEEE;
--color-neutral-200: #F5F5F5;
--color-neutral-100: #F9F9F9;
--color-neutral-0: #FFFFFF;
/* --- Accent Blue（コーポレートアクセント） --- */
--color-accent-500: #007EB5;
--color-accent-400: #3398C4;
--color-accent-300: #66B2D3;
/* ==========================================================
2. LP セグメントカラー（オプション）
==========================================================
各LPでセグメントごとに使用できる拡張カラー。
ブランドカラーとは独立した「LP専用オーバーライド」パレット。
注意: これらはデフォルトのデザイン言語ではない。
デフォルトは brand brown パレットを使用すること。
特定のLP（例: テック系LP、グロースLP等）でセグメント
アクセントが必要な場合にのみ使用する。
========================================================== */
/* --- Signal Green（オプション: 共創・前進・CTA） --- */
--color-signal-green-600: #16a34a;
--color-signal-green-500: #22c55e;
--color-signal-green-400: #4ade80;
--color-signal-green-300: #86efac;
--color-signal-green-200: #bbf7d0;
--color-signal-green-100: #dcfce7;
--color-signal-green-50: #f0fdf4;
/* --- Teal（オプション: テクノロジー・分析） --- */
--color-signal-teal-600: #0d9488;
--color-signal-teal-500: #14b8a6;
--color-signal-teal-400: #2dd4bf;
--color-signal-teal-300: #5eead4;
--color-signal-teal-200: #99f6e4;
--color-signal-teal-100: #ccfbf1;
--color-signal-teal-50: #f0fdfa;
/* --- Violet（オプション: 戦略・ビジョン） --- */
--color-signal-violet-600: #7c3aed;
--color-signal-violet-500: #8b5cf6;
--color-signal-violet-400: #a78bfa;
--color-signal-violet-300: #c4b5fd;
--color-signal-violet-200: #ddd6fe;
--color-signal-violet-100: #ede9fe;
--color-signal-violet-50: #f5f3ff;
/* --- Amber（オプション: 注意・警告・比較） --- */
--color-signal-amber-600: #d97706;
--color-signal-amber-500: #f59e0b;
--color-signal-amber-400: #fbbf24;
--color-signal-amber-300: #fcd34d;
--color-signal-amber-200: #fde68a;
--color-signal-amber-100: #fef3c7;
--color-signal-amber-50: #fffbeb;
/* --- Orange（オプション: 突破・変革・エネルギー） --- */
--color-signal-orange-600: #ea580c;
--color-signal-orange-500: #f97316;
--color-signal-orange-400: #fb923c;
--color-signal-orange-300: #fdba74;
--color-signal-orange-200: #fed7aa;
--color-signal-orange-100: #ffedd5;
--color-signal-orange-50: #fff7ed;
/* ==========================================================
3. セマンティックカラー
==========================================================
用途ベースの意味論的トークン。コンポーネントはこちらを参照。
kyodo LP に準拠: ダーク背景は brand-900（ink系ではない）
========================================================== */
/* --- Background --- */
--color-bg-primary: var(--color-brand-100); /* #FFF9EF — メイン背景 */
--color-bg-secondary: var(--color-neutral-0); /* #FFFFFF — カード背景 */
--color-bg-tertiary: var(--color-brand-200); /* #EFE8E0 — フッター等 */
--color-bg-inverse: var(--color-brand-900); /* #391F17 — ダーク背景（dark brown） */
--color-bg-muted: var(--color-neutral-200); /* #F5F5F5 — 控えめ背景 */
/* --- Text --- */
--color-text-primary: var(--color-neutral-800); /* #333333 — 本文 */
--color-text-secondary: var(--color-neutral-700); /* #666666 — サブ */
--color-text-tertiary: var(--color-neutral-500); /* #BBBBBB — 補助 */
--color-text-brand: var(--color-brand-900); /* #391F17 — 見出し */
--color-text-brand-light: var(--color-brand-800); /* #4C3C38 — 説明文 */
--color-text-inverse: var(--color-neutral-0); /* #FFFFFF — ダーク上 */
--color-text-link: var(--color-accent-500); /* #007EB5 — リンク */
/* --- Border --- */
--color-border-default: var(--color-neutral-400); /* #CCCCCC */
--color-border-light: var(--color-neutral-300); /* #EEEEEE */
--color-border-brand: var(--color-brand-900); /* #391F17 */
/* --- Status --- */
--color-status-error: #F23A3C;
--color-status-error-bg: #FEF2F2;
--color-status-success: #22C55E;
--color-status-success-bg: #F0FDF4;
--color-status-warning: #F59E0B;
--color-status-warning-bg: #FFFBEB;
--color-status-info: #007EB5;
--color-status-info-bg: #EFF6FF;
/* ==========================================================
4. ダークセクションカラー
==========================================================
LP のヒーロー・CTA等、ダーク背景セクション専用トークン。
brand-900 (#391F17) ダークブラウンを基調とする。
（ink-950系の墨色は廃止。kyodo LP準拠。）
========================================================== */
/* ダークサーフェス（カード・フォーム背景） */
--color-dark-surface: rgba(255, 255, 255, 0.03);
--color-dark-surface-hover: rgba(255, 255, 255, 0.06);
--color-dark-surface-form: rgba(15, 10, 8, 0.85);
/* ダークボーダー */
--color-dark-border: rgba(255, 255, 255, 0.06);
--color-dark-border-subtle: rgba(255, 255, 255, 0.08);
--color-dark-border-input: rgba(255, 255, 255, 0.12);
/* ダークテキスト */
--color-dark-text-primary: #FFFFFF;
--color-dark-text-secondary: rgba(255, 255, 255, 0.7);
--color-dark-text-tertiary: rgba(255, 255, 255, 0.5);
--color-dark-text-muted: rgba(255, 255, 255, 0.35);
--color-dark-text-subtle: rgba(255, 255, 255, 0.2);
/* ==========================================================
5. タイポグラフィ
==========================================================
kyodo LP 準拠のフォントファミリー。
Shippori Mincho, Josefin Sans, Lato, Montserrat が主軸。
========================================================== */
/* --- フォントファミリー --- */
/* コーポレート（kyodo LP 準拠） */
--font-family-display: 'Shippori Mincho', serif; /* h1, h2 見出し（和の洗練） */
--font-family-display-alt: 'Shippori Mincho B1', serif; /* Displayバリエーション */
--font-family-heading: sans-serif; /* h3以下の見出し */
--font-family-body: sans-serif; /* 本文 */
--font-family-english: 'Lato', sans-serif; /* 英文テキスト・日付・セクションラベル */
--font-family-english-display: 'Josefin Sans', sans-serif; /* ページタイトル・カード番号（英字） */
--font-family-english-heading: 'Montserrat', sans-serif; /* 英字見出し */
--font-family-mono: 'JetBrains Mono', monospace; /* コード */
/* --- フォントサイズ（clamp でレスポンシブ対応） --- */
--font-size-xs: clamp(10px, 0.7rem, 11px); /* キャプション・日付 */
--font-size-sm: clamp(11px, 1.0vw + 8px, 13px); /* 補助テキスト */
--font-size-base: clamp(13px, 1.2vw + 8px, 14px); /* 本文 */
--font-size-lg: clamp(14px, 1.5vw + 8px, 16px); /* リード文 */
--font-size-xl: clamp(16px, 2.0vw + 9px, 20px); /* 小見出し */
--font-size-2xl: clamp(18px, 2.2vw + 10px, 24px); /* セクション内見出し */
--font-size-3xl: clamp(20px, 3.0vw + 10px, 28px); /* 中見出し */
--font-size-4xl: clamp(24px, 4.0vw + 12px, 38px); /* セクション見出し */
--font-size-5xl: clamp(28px, 5.5vw + 14px, 52px); /* ヒーロー見出し */
--font-size-6xl: clamp(36px, 7.0vw + 14px, 68px); /* ページタイトル（英字） */
/* --- フォントウェイト --- */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
/* --- 行間 --- */
--line-height-tight: 1.25; /* 見出し */
--line-height-snug: 1.4; /* カード見出し */
--line-height-normal: 1.5; /* 標準 */
--line-height-relaxed: 1.75; /* 本文 */
--line-height-loose: 2.0; /* 広め */
/* --- 字間 --- */
--letter-spacing-tight: -0.02em; /* 英字見出し */
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.05em; /* 日本語見出し */
--letter-spacing-wider: 0.1em; /* ラベル */
--letter-spacing-widest: 0.15em; /* セクションラベル */
--letter-spacing-spread: 0.3em; /* 大文字ラベル */
/* ==========================================================
6. スペーシング（4px ベース）
========================================================== */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-32: 8rem; /* 128px */
/* セクション間の余白（レスポンシブ） */
--section-gap-sm: clamp(64px, 8vw, 80px);
--section-gap-md: clamp(80px, 10vw, 100px);
--section-gap-lg: clamp(80px, 12vw, 160px);
--section-gap-xl: clamp(100px, 14vw, 200px);
/* ==========================================================
7. 角丸（Border Radius）
========================================================== */
--radius-none: 0;
--radius-sm: 0; /* 入力フィールド */
--radius-md: 8px; /* カード・汎用 */
--radius-lg: 0; /* 大きめカード */
--radius-xl: 0; /* フォーム送信ボタン */
--radius-2xl: 32px; /* タグ・バッジ */
--radius-pill: 48px; /* CTAボタン */
--radius-full: 64px; /* 丸ボタン */
--radius-circle: 9999px; /* アバター・完全円 */
/* ==========================================================
8. シャドウ
==========================================================
ブランドブラウン (391F17) を基調にした暖色系シャドウ。
========================================================== */
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(57, 31, 23, 0.05);
--shadow-md: 0 4px 6px rgba(57, 31, 23, 0.07);
--shadow-lg: 0 10px 15px rgba(57, 31, 23, 0.08);
--shadow-xl: 0 20px 25px -5px rgba(57, 31, 23, 0.10);
--shadow-snackbar: 0 16px 48px -8px rgba(0, 0, 0, 0.08),
0 10px 25px -5px rgba(0, 0, 0, 0.11);
/* CTA ボタン用グローシャドウ（brand/cream 基調） */
--shadow-glow-brand: 0 0 0 0 rgba(0, 126, 181, 0.4);
--shadow-glow-brand-hover: 0 0 0 12px rgba(0, 126, 181, 0);
--shadow-glow-cream: 0 0 0 0 rgba(255, 249, 239, 0.4);
--shadow-glow-cream-hover: 0 0 0 12px rgba(255, 249, 239, 0);
/* LP セグメント用グローシャドウ（オプション） */
--shadow-glow-green: 0 20px 25px -5px rgba(34, 197, 94, 0.25);
--shadow-glow-green-hover: 0 20px 25px -5px rgba(34, 197, 94, 0.4);
--shadow-glow-orange: 0 20px 25px -5px rgba(249, 115, 22, 0.25);
--shadow-glow-orange-hover: 0 20px 25px -5px rgba(249, 115, 22, 0.4);
/* ==========================================================
9. トランジション & アニメーション
========================================================== */
--transition-fast: 0.15s ease;
--transition-default: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
--transition-slow: 0.4s cubic-bezier(0.4, 0.4, 0, 1);
--transition-page-enter: 0.6s cubic-bezier(0.4, 0.4, 0, 1);
--transition-page-leave: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
/* フェードイン用 */
--fade-duration: 0.6s;
--fade-distance: 20px;
/* ==========================================================
10. ブレイクポイント（参照用）
==========================================================
CSS Custom Properties はメディアクエリで使用できないため、
コメントとして定義。実際のメディアクエリには直接値を記述する。
--breakpoint-sm: 640px スマートフォン横
--breakpoint-md: 768px タブレット
--breakpoint-lg: 1024px デスクトップ
--breakpoint-xl: 1280px ワイドデスクトップ
--breakpoint-2xl: 1440px サイト最大幅
========================================================== */
}
/* ============================================================
見出しの基本スタイル
============================================================ */
h1, h2 {
font-family: var(--font-family-display);
color: var(--color-text-brand);
line-height: var(--line-height-tight);
font-weight: var(--font-weight-regular);
}
h3, h4, h5, h6 {
font-family: var(--font-family-heading);
color: var(--color-text-brand);
line-height: var(--line-height-tight);
font-weight: var(--font-weight-semibold);
}
/* --- 見出しサイズ（PC / SP レスポンシブ） --- */
h1 { font-size: var(--font-size-5xl); } /* 32-56px ヒーロー */
h2 { font-size: var(--font-size-4xl); } /* 28-42px セクション見出し */
h3 { font-size: var(--font-size-2xl); } /* 20-28px サブ見出し */
h4 { font-size: var(--font-size-xl); } /* 18-22px 小見出し */
h5 { font-size: var(--font-size-lg); } /* 16-18px ラベル的見出し */
h6 { font-size: var(--font-size-base); } /* 15-16px 本文と同サイズ */
@media (min-width: 768px) {
h1 { font-size: var(--font-size-6xl); } /* 40-72px */
h2 { font-size: var(--font-size-5xl); } /* 32-56px */
h3 { font-size: var(--font-size-3xl); } /* 24-32px */
h4 { font-size: var(--font-size-2xl); } /* 20-28px */
h5 { font-size: var(--font-size-xl); } /* 18-22px */
h6 { font-size: var(--font-size-lg); } /* 16-18px */
}
/* ============================================================
コンテナ & レイアウト
============================================================ */
.container {
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--space-5);
}
.container--narrow {
max-width: 48rem; /* 768px */
}
.container--wide {
max-width: 1440px;
}
@media (min-width: 1024px) {
.container {
padding: 0 var(--space-10);
max-width: 1200px;
}
}
/* ============================================================
グリッドユーティリティ
============================================================ */
.grid {
display: grid;
gap: var(--space-8);
}
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
.grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.grid-4 { grid-template-columns: repeat(4, 1fr); }
}
/* ============================================================
汎用ユーティリティ
============================================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
/* テキストアクセント（ブランドカラー） */
.text-accent { color: var(--color-text-brand); }
.section--dark .text-accent { color: var(--color-brand-300); }
/* SP のみ表示 */
.sp-only { display: inline; }
@media (min-width: 768px) { .sp-only { display: none; } }
/* PC のみ表示 */
.pc-only { display: none; }
@media (min-width: 640px) { .pc-only { display: inline; } }
/* ============================================================
セクション共通
============================================================
ダークセクションは brand-900 (#391F17) 背景を使用。
ink-950 系の墨色は廃止（kyodo LP 準拠）。
============================================================ */
.section {
padding: var(--section-gap-md) 0;
position: relative;
overflow: hidden;
isolation: isolate;
}
.section--lg {
padding: var(--section-gap-lg) 0;
}
.section--dark {
background: var(--color-bg-inverse); /* brand-900 #391F17 */
color: var(--color-text-brand);
}
.section--light {
background: var(--color-bg-secondary);
}
.section--cream {
background: var(--color-bg-primary);
}
.section--gradient {
background: var(--color-bg-primary);
}
.section--tertiary {
background: var(--color-bg-tertiary);
}
@media (min-width: 768px) {
.section { padding: var(--section-gap-lg) 0; }
.section--lg { padding: var(--section-gap-xl) 0; }
}
/* ============================================================
セクションヘッダー
============================================================ */
.section-header { text-align: center; margin: 0 auto var(--space-12); width: 100%; }
.section-label {
font-size: var(--font-size-sm);
font-family: var(--font-family-english);
font-weight: var(--font-weight-regular);
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-secondary);
margin-bottom: var(--space-2);
}
.section-label--light { color: var(--color-text-tertiary); }
.section-title {
font-size: var(--font-size-4xl);
font-family: var(--font-family-display);
font-weight: var(--font-weight-regular);
color: var(--color-text-brand);
letter-spacing: -0.02em;
margin-bottom: var(--space-4);
line-height: var(--line-height-tight);
}
.section-title--light { color: var(--color-text-inverse); }
.section-lead {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
max-width: 42rem;
margin: 0 auto;
line-height: var(--line-height-relaxed);
}
.section-lead--light { color: var(--color-text-tertiary); }
.section-lead strong {
color: var(--color-text-brand);
font-weight: var(--font-weight-regular);
font-family: var(--font-family-heading);
font-size: 1.1em;
}
.section-lead--light strong { color: var(--color-text-inverse); }
/* ============================================================
ボタン
============================================================
kyodo LP 準拠: transparent 背景 + brand ボーダー。
グリーン塗り潰しではない。
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-family-english);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-regular);
padding: 15px var(--space-8);
border-radius: var(--radius-full);
border: 1px solid var(--color-border-brand);
background: transparent;
color: var(--color-text-primary);
cursor: pointer;
transition: var(--transition-slow);
}
.btn--signal {
background: var(--color-bg-primary);
color: var(--color-text-brand);
border-color: var(--color-text-brand);
}
.section--dark .btn--signal {
background: var(--color-bg-primary);
color: var(--color-text-brand);
border-color: var(--color-bg-primary);
}
.btn--signal:hover {
opacity: 0.7;
transform: translateY(-1px);
}
.btn:active {
transform: scale(0.98);
}
.btn--block {
width: 100%;
justify-content: center;
}
.btn--sm {
font-size: var(--font-size-xs);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
}
.btn__icon { flex-shrink: 0; }
/* ============================================================
アニメーション キーフレーム
============================================================ */
/* --- フェードイン（IntersectionObserver連動） ---
使い方: 要素に .fade-in クラスを付与し、
JSで .visible を追加すると表示される。 */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* 遅延クラス */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
/* --- CTA パルスアニメーション ---
ブランドカラー（accent blue）ベースの脈動。ライトセクション用。 */
.btn--pulse {
animation: cta-pulse 2s ease-in-out infinite;
}
@keyframes cta-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(0, 126, 181, 0.4); /* accent blue glow */
}
50% {
box-shadow: 0 0 0 12px rgba(0, 126, 181, 0);
}
}
/* ダークセクション用 CTA パルス: cream/brand-100 グロー */
.section--dark .btn--pulse {
animation: cta-pulse-dark 2s ease-in-out infinite;
}
@keyframes cta-pulse-dark {
0%, 100% {
box-shadow: 0 0 0 0 rgba(255, 249, 239, 0.4); /* cream #FFF9EF glow */
}
50% {
box-shadow: 0 0 0 12px rgba(255, 249, 239, 0);
}
}
/* LP セグメント用パルス（オプション） */
.animate-pulse-green {
animation: cta-pulse-segment-green 3s ease-in-out infinite;
}
@keyframes cta-pulse-segment-green {
0%, 100% {
box-shadow: var(--shadow-glow-green);
}
50% {
box-shadow: var(--shadow-glow-green-hover);
}
}
.animate-pulse-orange {
animation: cta-pulse-segment-orange 3s ease-in-out infinite;
}
@keyframes cta-pulse-segment-orange {
0%, 100% {
box-shadow: var(--shadow-glow-orange);
}
50% {
box-shadow: var(--shadow-glow-orange-hover);
}
}
/* --- Orb 浮遊アニメーション ---
背景の装飾オーブがゆっくり浮遊する動き。
brand-300/brand-400 トーンを使用（green/violet ではない）。 */
@keyframes orb-float {
0%, 100% {
transform: translateY(0) scale(1);
}
33% {
transform: translateY(-15px) scale(1.02);
}
66% {
transform: translateY(8px) scale(0.98);
}
}
.orb-float {
animation: orb-float 8s ease-in-out infinite;
}
/* Orb ベーススタイル（brand-300/brand-400 トーン） */
.orb {
position: absolute;
border-radius: var(--radius-circle);
pointer-events: none;
opacity: 0.3;
}
/* Orb バリエーション（kyodo LP 準拠の暖色系） */
.hero__orb {
top: -10rem; right: -5rem;
width: 500px; height: 500px;
background: rgba(207, 162, 162, 0.15); /* brand-300 ベース */
filter: blur(120px);
}
.hero__orb-2 {
bottom: -15rem; left: -5rem;
width: 400px; height: 400px;
background: rgba(179, 154, 142, 0.1); /* brand-400 ベース */
filter: blur(100px);
}
/* ============================================================
ヒーローセクション
============================================================
全 LP 共通のヒーローコンポーネント。
height: 100dvh で画面ぴったりに収める。
display: flex + align-items: center でコンテンツを垂直中央に。
============================================================ */
.hero {
background: var(--color-bg-primary); /* #FFF9EF クリーム */
color: var(--color-text-primary);
position: relative;
overflow: hidden;
height: 100dvh;
display: flex;
align-items: center;
box-sizing: border-box;
}
/* .section クラスのパディングが 100dvh を崩すのを防ぐ */
.hero.section,
.hero.section--lg,
.hero.section--dark,
.hero.section--light {
padding: 0;
}
/* canvas・動画背景は絶対配置でコンテンツの後ろへ */
.hero__mv-canvas {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 1;
pointer-events: none;
opacity: 0.8;
}
.hero__inner {
position: relative;
z-index: 10;
width: 100%;
padding-top: clamp(60px, 8vw, 80px);
padding-bottom: clamp(40px, 6vw, 60px);
}
.hero__logo {
margin-bottom: var(--space-8);
}
.logo-img {
height: 3rem;
}
@media (min-width: 768px) {
.logo-img { height: 3rem; }
}
.hero__service-name {
font-family: var(--font-family-english-display);
font-size: clamp(1rem, 2vw, 1.25rem);
font-weight: var(--font-weight-regular);
letter-spacing: var(--letter-spacing-widest);
text-transform: uppercase;
margin-bottom: var(--space-6);
color: var(--color-brand-700);
}
.hero__headline {
font-family: var(--font-family-display);
font-size: clamp(2rem, 5vw, 4rem);
font-weight: var(--font-weight-regular);
color: var(--color-text-brand);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-wide);
margin-bottom: var(--space-6);
}
.hero__copy {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
max-width: 42rem;
margin-bottom: var(--space-6);
}
.hero__copy strong {
color: var(--color-text-brand);
font-weight: var(--font-weight-semibold);
}
.hero__badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-8);
}
.hero__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-5);
}
.hero__cta-note {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
/* --- ドットパターン背景 ---
ライトセクション: brand-800 ドット
ダークセクション: brand-200 ドット（kyodo LP 準拠） */
.dot-pattern {
position: absolute;
inset: 0;
opacity: 0.05;
background-image: radial-gradient(var(--color-brand-800) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}
.section--dark .dot-pattern {
background-image: radial-gradient(var(--color-brand-200) 1px, transparent 1px);
}
/* ============================================================
カード共通
============================================================ */
.card {
background: var(--color-bg-secondary);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-8);
position: relative;
border: 1px solid var(--color-border-light);
box-shadow: var(--shadow-sm);
}
/* アクセントバー付きカード — 角丸なし（AI感を防ぐ） */
.card--accent-bar {
border-radius: 0;
border-left: 3px solid var(--color-brand-900);
padding-left: var(--space-6);
}
.card--dark {
background: var(--color-dark-surface);
border: 1px solid var(--color-dark-border);
border-radius: var(--radius-lg);
}
/* 番号付きカード */
.card--numbered {
overflow: hidden;
}
.card__number {
position: absolute;
top: var(--space-4);
right: var(--space-6);
font-family: var(--font-family-english-display);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-regular);
color: var(--color-brand-200);
user-select: none;
line-height: 1;
z-index: 0;
}
.card--dark .card__number { color: rgba(255,255,255,0.05); }
/* カード要素 */
.card__title {
font-size: var(--font-size-base);
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: var(--space-2);
line-height: 1.5;
position: relative;
z-index: 1;
}
.card__title strong { color: var(--color-bg-inverse); font-weight: 700; }
.card--dark .card__title { color: var(--color-text-inverse); font-size: var(--font-size-sm); font-weight: 700; }
.card__text {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: 1.7;
position: relative;
z-index: 1;
}
.card--dark .card__text { color: rgba(255,255,255,0.45); font-size: var(--font-size-xs); }
.card__text strong { color: var(--color-text-primary); }
.card--dark .card__text strong { color: rgba(255,255,255,0.7); }
.card__label {
font-size: 0.625rem; font-weight: 700;
color: var(--color-brand-500);
letter-spacing: 0.1em; text-transform: uppercase;
margin-bottom: var(--space-2);
}
.card--dark .card__label { color: var(--color-brand-300); }
/* ---- アクセントトップバー ---- */
.card--accent-top {
border-top: 2px solid var(--color-brand-500);
}
.card--dark.card--accent-top {
border-top-color: var(--color-brand-400);
}
/* ---- カードヘッダー（icon + label/title 横並び） ---- */
.card__header {
display: flex;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.card__header > div { flex: 1; }
/* ---- Weapon Card（特徴・ソリューション系 共通コンポーネント） ---- */
/* 使い方:
dark: class="card card--dark card--accent-top weapon-card"
light: class="card card--accent-top weapon-card" */
.weapon-card {
overflow: hidden;
display: flex;
flex-direction: column;
}
.weapon-card .card__title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
margin-bottom: 0;
line-height: var(--line-height-normal);
}
.card--dark.weapon-card .card__title { color: var(--color-text-inverse); }
.weapon-card .card__text { font-size: var(--font-size-sm); }
.card--dark.weapon-card .card__text { font-size: var(--font-size-sm); color: rgba(255,255,255,0.55); }
/* ---- カードフッター（light カード向け上書き） ---- */
.card:not(.card--dark) .card__footer {
background: var(--color-bg-primary);
border-color: var(--color-border-light);
}
.card:not(.card--dark) .card__footer-label { color: var(--color-text-tertiary); }
.card:not(.card--dark) .card__flow { color: var(--color-brand-600); }
.card:not(.card--dark) .card__flow-arrow { color: var(--color-text-secondary); }
.card:not(.card--dark) .card__footer-list { color: var(--color-text-secondary); }
/* ============================================================
バッジ
============================================================ */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-xs);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-circle);
}
.badge--ghost {
background: var(--color-brand-200);
border: 1px solid transparent;
color: var(--color-text-brand);
}
.badge__dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-brand-400);
}
/* ============================================================
フェードイン IntersectionObserver（軽量JS）
============================================================
以下のスクリプトを HTML末尾に配置:
============================================================ */
/* ============================================================
テキスト・グラデーション装飾
============================================================ */
.text-gradient-warm {
background: linear-gradient(135deg, #E38075, #CE985B);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* グラデーションボーダーラッパー（CTA フォーム外枠等） */
.gradient-border-warm {
padding: 1px;
border-radius: 1rem;
background: linear-gradient(135deg, #E38075, #CE985B, #EDA49C);
}
/* ============================================================
装飾 Orb（CTA セクション用）
============================================================ */
.hero__orb-3 {
top: 33%; left: 25%;
width: 350px; height: 350px;
background: rgba(57,31,23,0.04);
filter: blur(100px);
}
.cta__orb {
top: -5rem; left: 50%;
width: 500px; height: 500px;
background: rgba(57,31,23,0.05);
filter: blur(120px);
transform: translateX(-50%);
}
.cta__orb-2 {
bottom: -10rem; right: -5rem;
width: 300px; height: 300px;
background: rgba(57,31,23,0.04);
filter: blur(80px);
}
/* ============================================================
CTA フォーム
============================================================ */
.cta__form-wrapper {
max-width: 32rem;
margin: 0 auto;
}
.cta__form-inner {
border-radius: 1rem;
background: rgba(15,10,8,0.85);
backdrop-filter: blur(8px);
padding: 2rem 2.5rem;
}
.cta__form-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-text-inverse);
text-align: center;
margin-bottom: var(--space-1);
}
.cta__form-sub {
font-size: var(--font-size-xs);
color: rgba(255,255,255,0.35);
text-align: center;
margin-bottom: var(--space-8);
}
/* フォーム共通 */
.form > * + * { margin-top: var(--space-5); }
.form__row {
display: grid;
gap: var(--space-4);
}
@media (min-width: 640px) {
.form__row { grid-template-columns: 1fr 1fr; }
}
.form-label {
display: block;
font-size: var(--font-size-xs);
font-weight: 500;
color: rgba(255,255,255,0.5);
margin-bottom: var(--space-1);
}
.form-label .required { color: var(--color-brand-400); }
.form-input {
width: 100%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-sm);
color: var(--color-text-inverse);
outline: none;
transition: all 0.2s;
font-family: inherit;
}
.form-input::placeholder { color: rgba(255,255,255,0.2); }
.form-input:focus {
border-color: var(--color-brand-500);
box-shadow: 0 0 0 3px rgba(57,31,23,0.15);
}
textarea.form-input { resize: none; }
.form__disclaimer {
font-size: 0.6875rem;
color: rgba(255,255,255,0.25);
text-align: center;
}
.cta-note {
margin-top: var(--space-3);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
/* ============================================================
フッター
============================================================ */
.footer {
padding: var(--space-8) 0;
background: var(--color-bg-inverse);
border-top: 1px solid rgba(255,255,255,0.05);
}
.footer__inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
@media (min-width: 640px) {
.footer__inner { flex-direction: row; }
}
.footer__left { display: flex; align-items: center; gap: var(--space-5); }
.footer__logo { height: 1rem; filter: brightness(0) invert(1); opacity: 0.35; }
.footer__link {
font-size: 0.6875rem;
color: rgba(255,255,255,0.3);
transition: color 0.2s;
}
.footer__link:hover { color: rgba(255,255,255,0.5); }
.footer__copy { font-size: 0.625rem; color: rgba(255,255,255,0.2); }
/* ============================================================
フローティング CTA（SP固定バー）
============================================================ */
.floating-cta {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 50;
transform: translateY(100%);
transition: transform 0.3s;
background: rgba(10,10,15,0.95);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(255,255,255,0.08);
padding: 0.75rem 1rem;
}
.floating-cta--visible { transform: translateY(0); }
@media (min-width: 640px) { .floating-cta { display: none; } }
/* ============================================================
共通コンポーネント（11LP 統合標準化）
============================================================
全LP に共通するパターンを canonical クラスとして定義。
新規LP は tokens.css（design-system.css）のみで構築可能。
base.css の同一パターンは削除済み。
============================================================ */
/* ============================================================
A. プロセス・タイムライン
============================================================ */
/* --- 縦型ステップリスト --- */
.process {
/* section wrapper — 通常は .section と併用 */
}
.process__header {
margin-bottom: var(--space-12);
max-width: 48rem;
}
/* 縦ライン付きステップ列 */
.process__steps {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: var(--space-20);
}
/* 縦ライン付きバリアント（左ボーダー） */
.process__steps--lined {
margin-left: 1.25rem;
border-left: 2px solid rgba(57,31,23,0.2);
padding-left: 2rem;
}
/* 単一ステップ行 */
.process__step {
display: flex;
flex-direction: column;
}
/* 丸数字マーカー */
.process__step-marker {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--color-brand-700);
color: var(--color-text-inverse);
font-size: 0.875rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(57,31,23,0.2);
}
.process__step-body {
flex-grow: 1;
}
.process__step-title {
font-size: 1rem;
font-weight: 700;
color: var(--color-bg-inverse);
margin-bottom: 0.5rem;
line-height: 1.4;
}
.process__step-text {
font-size: 0.875rem;
color: var(--color-text-secondary);
line-height: 1.7;
}
/* プロセスカード（ステップ内カード） */
.process__card {
border-radius: var(--radius-lg);
overflow: hidden;
}
.process__card-bar {
height: 4px;
background: linear-gradient(90deg, var(--color-brand-400), var(--color-brand-800));
}
.process__card-body {
background: var(--color-dark-surface);
border: 1px solid var(--color-dark-border);
border-top: none;
padding: 1.5rem 2rem;
}
@media (min-width: 640px) {
.process__card-body { padding: 1.5rem 2.5rem; }
}
.process__card-inner {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.process__card-marker {
width: 3rem;
height: 3rem;
border-radius: var(--radius-md);
background: rgba(57,31,23,0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-brand-400);
font-size: 0.875rem;
font-weight: 900;
}
.process__card-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--color-text-inverse);
margin-bottom: 0.375rem;
}
@media (min-width: 640px) {
.process__card-title { font-size: 1.25rem; }
}
.process__card-text {
font-size: 0.875rem;
color: rgba(255,255,255,0.65);
line-height: 1.7;
}
/* --- 横型タイムライン --- */
.timeline {
position: relative;
margin-bottom: var(--space-20);
}
/* 横ライン */
.timeline__line {
display: none;
position: absolute;
top: 1.25rem;
left: calc(16.67% + 8px);
right: calc(16.67% + 8px);
height: 2px;
background: linear-gradient(90deg, var(--color-brand-200), var(--color-brand-700), var(--color-brand-200));
z-index: 0;
}
@media (min-width: 640px) {
.timeline__line { display: block; }
}
/* 縦型（左ライン）バリアント */
.timeline--vertical .timeline__line {
left: 2rem;
top: 0;
bottom: 0;
width: 1px;
height: auto;
right: auto;
background: linear-gradient(to bottom, var(--color-brand-300), var(--color-brand-400));
}
/* ステップ群（flex row） */
.timeline__steps {
display: grid;
gap: 1.5rem;
position: relative;
}
@media (min-width: 640px) {
.timeline__steps {
grid-template-columns: repeat(3, 1fr);
}
}
/* 単一タイムラインステップ */
.timeline__step {
display: flex;
flex-direction: column;
}
.timeline__item {
position: relative;
margin-bottom: var(--space-12);
}
@media (min-width: 640px) {
.timeline__item { padding-left: 5rem; }
}
.timeline__item:last-child { margin-bottom: 0; }
/* ドット（横型ライン上の丸） */
.timeline__dot {
display: none;
position: relative;
z-index: 10;
width: 0.875rem;
height: 0.875rem;
border-radius: 50%;
background: var(--color-brand-700);
box-shadow: 0 0 0 5px var(--color-bg-secondary), 0 4px 6px rgba(57,31,23,0.3);
margin: 0 auto var(--space-5);
}
@media (min-width: 640px) {
.timeline__dot { display: block; }
}
/* マーカー（縦型・ラベル付き四角） */
.timeline__marker {
display: none;
position: absolute;
left: 0;
top: 0;
width: 4rem;
height: 4rem;
border-radius: var(--radius-md);
align-items: center;
justify-content: center;
font-weight: 700;
background: var(--color-brand-200);
color: var(--color-text-brand);
}
@media (min-width: 640px) {
.timeline__marker { display: flex; }
}
/* ステップラベル（フェーズ名） */
.timeline__label {
font-size: 0.625rem;
font-weight: 700;
color: var(--color-brand-700);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.375rem;
}
/* タイムラインカード */
.timeline__card {
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-border-light);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
height: 100%;
}
.timeline__card-bar {
height: 4px;
background: linear-gradient(90deg, var(--color-brand-400), var(--color-brand-800));
}
.timeline__card-body {
padding: 1.5rem 1.75rem;
flex-grow: 1;
}
.timeline__title {
font-size: 1rem;
font-weight: 700;
color: var(--color-bg-inverse);
margin-bottom: 0.75rem;
}
.timeline__text {
font-size: 0.875rem;
color: var(--color-text-secondary);
line-height: 1.7;
margin-bottom: 1rem;
}
/* タイムライン内アウトプットボックス */
.timeline__output {
margin: 0 1.25rem 1.25rem;
border-radius: var(--radius-md);
background: var(--color-brand-100);
padding: 1rem 1.25rem;
}
@media (min-width: 640px) {
.timeline__output { margin: 0 1.5rem 1.5rem; }
}
.timeline__output-label {
font-size: 0.625rem;
font-weight: 700;
color: var(--color-brand-600);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.625rem;
}
.timeline__output-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.timeline__output-item {
display: flex;
align-items: center;
gap: 0.625rem;
}
.timeline__output-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-brand-500);
flex-shrink: 0;
}
.timeline__output-text {
font-size: 0.75rem;
font-weight: 700;
color: var(--color-brand-800);
}
/* フェーズバッジ（タイムライン上部ラベル） */
.timeline__phase {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-brand-200);
color: var(--color-text-brand);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.375rem 1rem;
border-radius: var(--radius-circle);
margin-bottom: var(--space-6);
}
.timeline__phase-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-brand-900);
}
/* SP 用モバイルラベル */
.timeline__mobile-label {
display: inline-block;
font-size: 0.875rem;
font-weight: 700;
color: var(--color-text-brand);
background: var(--color-brand-200);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-sm);
margin-bottom: 0.5rem;
}
@media (min-width: 640px) {
.timeline__mobile-label { display: none; }
}
/* ============================================================
B. 比較 / Before・After
============================================================ */
/* ラッパー */
.comparison {
max-width: 48rem;
margin: 0 auto 4rem;
}
.comparison__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-bg-inverse);
text-align: center;
margin-bottom: var(--space-8);
}
/* 2カラムグリッド */
.comparison__grid {
display: grid;
gap: 1.5rem;
}
@media (min-width: 640px) {
.comparison__grid { grid-template-columns: 1fr 1fr; }
}
/* 単一カラム */
.comparison__col {
border-radius: var(--radius-lg);
padding: 1.75rem;
}
/* Before（赤みトーン） */
.comparison__col--before {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
}
/* After（ブランドトーン） */
.comparison__col--after {
background: var(--color-brand-100);
border: 1px solid var(--color-brand-200);
}
/* ラベル（BEFORE / AFTER） */
.comparison__label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1.25rem;
}
.comparison__col--before .comparison__label {
color: var(--color-text-tertiary);
}
.comparison__col--after .comparison__label {
color: var(--color-brand-700);
}
.comparison__col-title {
font-size: 1rem;
font-weight: 700;
color: var(--color-bg-inverse);
margin-bottom: 0.75rem;
}
/* アイテムリスト */
.comparison__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.625rem;
font-size: 0.875rem;
}
.comparison__item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.comparison__item-icon {
width: 1rem;
height: 1rem;
margin-top: 0.125rem;
flex-shrink: 0;
}
.comparison__col--before .comparison__list { color: var(--color-text-secondary); }
.comparison__col--before .comparison__item-icon { color: var(--color-neutral-500); }
.comparison__col--after .comparison__list { color: var(--color-text-primary); }
.comparison__col--after .comparison__item-icon { color: var(--color-brand-700); }
/* テーブル形式比較 */
.comparison__table-wrap {
max-width: 48rem;
margin: 0 auto;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.comparison__table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
min-width: 520px;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-border-light);
}
.comparison__table th {
padding: 1.25rem;
background: var(--color-bg-secondary);
font-weight: 600;
color: var(--color-text-secondary);
text-align: center;
border-bottom: 1px solid var(--color-border-light);
font-size: 0.875rem;
}
.comparison__table th:first-child {
text-align: left;
width: 20%;
}
.comparison__table th.comparison__table-highlight {
background: linear-gradient(135deg, var(--color-brand-700), var(--color-brand-800));
color: var(--color-text-inverse);
font-weight: 700;
}
.comparison__table td {
padding: 1.25rem;
border-top: 1px solid var(--color-bg-primary);
text-align: center;
color: var(--color-text-secondary);
}
.comparison__table td:first-child {
text-align: left;
font-weight: 600;
color: var(--color-bg-inverse);
}
.comparison__table td.comparison__table-highlight {
background: var(--color-brand-100);
color: var(--color-brand-800);
font-weight: 600;
}
.comparison__table .check { color: var(--color-brand-700); font-weight: 700; }
.comparison__table .cross { color: var(--color-neutral-500); }
/* ============================================================
C. ステートメント / ブリッジ
============================================================ */
.statement {
padding: clamp(80px, 14vw, 160px) 0;
text-align: center;
}
.statement__eyebrow {
font-size: var(--font-size-xs);
font-family: var(--font-family-english);
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-bottom: var(--space-8);
}
.section--light .statement__eyebrow,
.section--gradient .statement__eyebrow,
.section--gradient-warm .statement__eyebrow {
color: var(--color-text-secondary);
}
.statement__copy {
font-size: clamp(24px, 4.5vw, 48px);
font-family: var(--font-family-display);
font-weight: var(--font-weight-regular);
color: var(--color-text-inverse);
line-height: 1.4;
max-width: 800px;
margin: 0 auto;
letter-spacing: 0.02em;
}
.section--light .statement__copy,
.section--gradient .statement__copy,
.section--gradient-warm .statement__copy {
color: var(--color-text-brand);
}
.statement__copy em {
font-style: normal;
color: var(--color-brand-300);
}
.section--light .statement__copy em,
.section--gradient .statement__copy em,
.section--gradient-warm .statement__copy em {
color: var(--color-brand-600);
}
.statement__sub {
font-size: var(--font-size-base);
color: rgba(255,255,255,0.5);
max-width: 640px;
margin: var(--space-8) auto 0;
line-height: var(--line-height-relaxed);
}
.section--light .statement__sub,
.section--gradient-warm .statement__sub {
color: var(--color-text-secondary);
}
/* ============================================================
D. コールアウト
============================================================ */
.callout {
border-left: 4px solid var(--color-brand-700);
background: rgba(57,31,23,0.04);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
padding: 1.75rem 2rem;
max-width: 48rem;
margin-left: auto;
margin-right: auto;
}
/* ブランド強調バリアント */
.callout--brand {
border-left-color: var(--color-brand-900);
background: var(--color-brand-100);
}
/* ダークバリアント（ダークセクション内） */
.callout--dark {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-left: 4px solid var(--color-brand-400);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.callout__icon {
color: var(--color-brand-700);
margin-bottom: var(--space-3);
}
.callout__title {
font-size: var(--font-size-base);
font-weight: 700;
color: var(--color-bg-inverse);
margin-bottom: var(--space-2);
}
.callout--dark .callout__title { color: var(--color-text-inverse); }
.callout__text {
font-size: var(--font-size-base);
color: var(--color-text-primary);
line-height: var(--line-height-relaxed);
}
.callout__text strong { color: var(--color-bg-inverse); }
.callout--dark .callout__text { color: rgba(255,255,255,0.6); }
.callout--dark .callout__text strong { color: var(--color-text-inverse); }
/* ============================================================
E. ボイス / テスティモニアル
============================================================ */
.voice {
background: var(--color-bg-primary);
}
.voice__card {
max-width: 640px;
margin: 0 auto;
text-align: center;
padding: var(--space-12) var(--space-8);
}
.voice__text {
font-size: clamp(18px, 2.5vw, 24px);
font-family: var(--font-family-display);
color: var(--color-text-brand);
line-height: 1.8;
margin-bottom: var(--space-6);
}
.voice__author {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.voice__role {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
margin-top: var(--space-1);
}
/* ============================================================
F. ペインセクション
============================================================ */
/* ============================================================
G. セクショングラデーションバリアント
============================================================ */
/* ウォーム（クリーム→ホワイト）— ライトセクション内エレメント向け */
.section--gradient-warm {
background: linear-gradient(to bottom, var(--color-bg-secondary), var(--color-brand-100));
}
/* ============================================================
H. アイコンバッジ追加バリアント
============================================================ */
/* ブランドブラウン背景 */
.icon-badge--brand {
background: rgba(57,31,23,0.15);
color: var(--color-brand-400);
}
/* ライトクリーム背景（ライトセクション用） */
.icon-badge--light {
background: var(--color-brand-100);
color: var(--color-brand-700);
}
/* ---- 既存 icon-badge 共通 ---- */
.icon-badge {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.icon-badge--lg {
width: 3rem;
height: 3rem;
border-radius: var(--radius-lg);
}
.icon-badge--sm {
width: 2rem;
height: 2rem;
border-radius: var(--radius-sm);
}
/* --- .grid--2 / --3 / --4 (double-dash 標準) --- */
/* tokens.css 上部の .grid-2/.grid-3 と別名で定義。
LP HTML が grid--2 を参照する場合のフォールバック用。 */
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
.grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/* ============================================================
追加コンポーネント（2026-04-02）
============================================================ */
/* --- Segment cards --- */
.segment__card {
display: block;
cursor: pointer;
border: 1px solid var(--color-border-light);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.segment__card:hover {
border-color: var(--color-border-brand);
box-shadow: var(--shadow-md);
}
.segment__card-header {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.segment__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-brand-400);
flex-shrink: 0;
}
.segment__id {
font-family: var(--font-family-english-display);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
color: var(--color-text-brand);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
}
.segment__link {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
margin-top: var(--space-4);
}
.segment__arrow {
flex-shrink: 0;
color: var(--color-text-tertiary);
transition: transform var(--transition-fast);
}
.segment__card:hover .segment__arrow {
transform: translateX(3px);
}
.segment__grid {
margin-bottom: var(--space-8);
}
.segment__fallback {
text-align: center;
padding: var(--space-6) 0;
}
.segment__fallback-text {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-2);
}
.segment__fallback-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-brand);
text-decoration: underline;
text-underline-offset: 3px;
}
.segment__fallback-arrow {
flex-shrink: 0;
}
/* --- Value / Social proof strip --- */
.value__grid {
margin-bottom: var(--space-10);
}
.value__card {
/* extends .card */
}
.value__proof {
padding: var(--space-6) 0;
border-top: 1px solid var(--color-border-light);
}
.value__proof-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-3) var(--space-4);
}
.value__proof-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.value__proof-sep {
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
display: none;
}
@media (min-width: 640px) {
.value__proof-sep { display: inline; }
}
/* --- Quote --- */
.quote {
max-width: 48rem;
margin: 0 auto;
}
.quote__icon {
color: var(--color-brand-300);
margin-bottom: var(--space-4);
}
.quote__text {
font-size: var(--font-size-xl);
font-family: var(--font-family-display);
font-weight: var(--font-weight-regular);
color: var(--color-text-brand);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-5);
}
.quote__text--light { color: var(--color-text-inverse); }
.quote__author {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.quote__author--light { color: var(--color-dark-text-secondary); }
.quote__sub {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
margin-top: var(--space-1);
}
.quote__inner { position: relative; }
.quote__card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-8);
}
.quote--light .quote__text { color: var(--color-text-inverse); }
.quote--light .quote__icon { color: var(--color-brand-300); }
/* --- Pain section --- */
.pain {
/* section wrapper */
}
.pain__grid {
display: grid;
gap: var(--space-6);
margin-bottom: var(--space-10);
}
@media (min-width: 640px) {
.pain__grid { grid-template-columns: repeat(2, 1fr); }
}
/* .pain__grid は最大2列（pain__grid 固有ルール: 3列なし） */
/* --- Bridge / Insight --- */
.bridge {
/* section wrapper */
}
.bridge__insight {
max-width: 48rem;
margin: 0 auto var(--space-10);
text-align: center;
}
.bridge__insight-lead {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
letter-spacing: var(--letter-spacing-wider);
margin-bottom: var(--space-4);
text-transform: uppercase;
}
.bridge__insight-main {
font-size: var(--font-size-3xl);
font-family: var(--font-family-display);
color: var(--color-text-brand);
line-height: var(--line-height-tight);
margin-bottom: var(--space-4);
}
.bridge__insight-sub {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.bridge__insight-text {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.bridge__items {
display: grid;
gap: var(--space-6);
margin-bottom: var(--space-10);
}
@media (min-width: 768px) {
.bridge__items { grid-template-columns: repeat(3, 1fr); }
}
.bridge__item {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.bridge__item-number {
font-family: var(--font-family-english-display);
font-size: var(--font-size-6xl);
font-weight: var(--font-weight-black);
color: var(--color-brand-200);
line-height: 1;
}
.bridge__item-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-brand);
}
.bridge__item-text {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.bridge__traps {
/* grid wrapper for trap cards */
}
.bridge__orb {
position: absolute;
border-radius: var(--radius-circle);
pointer-events: none;
opacity: 0.2;
}
.bridge__wall {
border-radius: var(--radius-lg);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
padding: var(--space-6) var(--space-8);
}
.bridge__wall-header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.bridge__wall-icon { color: var(--color-brand-500); flex-shrink: 0; }
.bridge__wall-label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
color: var(--color-text-tertiary);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
}
.bridge__wall-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-brand);
margin-bottom: var(--space-2);
}
.bridge__wall-body { flex-grow: 1; }
.bridge__wall-text {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.bridge__wall-accent { color: var(--color-text-brand); font-weight: var(--font-weight-semibold); }
/* --- Solution section --- */
.solution {
position: relative;
}
.solution__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.solution__inner { position: relative; z-index: 1; }
.solution__grid {
display: grid;
gap: var(--space-6);
}
@media (min-width: 640px) {
.solution__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.solution__grid { grid-template-columns: repeat(3, 1fr); }
}
.solution__card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.solution__card-highlight {
border-color: var(--color-brand-300);
background: var(--color-brand-100);
}
.solution__card-icon {
margin-bottom: var(--space-4);
color: var(--color-brand-700);
}
.solution__card-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-text-brand);
margin-bottom: var(--space-2);
}
.solution__card-text {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.solution__orb {
position: absolute;
border-radius: var(--radius-circle);
pointer-events: none;
opacity: 0.15;
}
.solution__orb-2 {
position: absolute;
border-radius: var(--radius-circle);
pointer-events: none;
opacity: 0.1;
}
.solution__stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
justify-content: center;
margin-bottom: var(--space-10);
}
.solution__stat {
text-align: center;
}
.solution__stat-number {
font-family: var(--font-family-english-display);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-black);
color: var(--color-text-brand);
line-height: 1;
}
.solution__stat-value {
font-family: var(--font-family-english-display);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-black);
color: var(--color-text-brand);
line-height: 1;
}
.solution__stat-unit {
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
margin-left: var(--space-1);
}
.solution__stat-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-top: var(--space-2);
}
.solution__stat-divider {
width: 1px;
background: var(--color-border-light);
align-self: stretch;
}
.solution__step-label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
color: var(--color-brand-600);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
margin-bottom: var(--space-2);
}
.solution__proof {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-6);
}
.solution__proof-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.solution__proof-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-brand-400);
flex-shrink: 0;
}
.solution__feature {
display: grid;
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.solution__feature { grid-template-columns: 1fr 1fr; align-items: center; }
.solution__feature--flip .solution__feature-header { order: 2; }
.solution__feature--flip .solution__feature-body { order: 1; }
}
.solution__features { display: flex; flex-direction: column; }
.solution__feature-number {
font-family: var(--font-family-english-display);
font-size: var(--font-size-6xl);
font-weight: var(--font-weight-black);
color: var(--color-brand-200);
line-height: 1;
margin-bottom: var(--space-3);
}
.solution__feature-title {
font-size: var(--font-size-2xl);
font-family: var(--font-family-display);
color: var(--color-text-brand);
margin-bottom: var(--space-4);
}
.solution__feature-header {
display: flex;
flex-direction: column;
justify-content: center;
}
.solution__feature-body { padding: var(--space-4) 0; }
.section--dark .solution__feature-number { color: var(--color-brand-300); }
.section--dark .solution__feature-title { color: var(--color-text-inverse); }
.solution__quote {
margin-top: var(--space-6);
padding: var(--space-5) var(--space-6);
border-left: 3px solid var(--color-brand-300);
background: var(--color-brand-100);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.solution__checklist {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.solution__check-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--font-size-base);
color: var(--color-text-primary);
}
.solution__check-icon {
color: var(--color-brand-700);
flex-shrink: 0;
margin-top: 2px;
}
/* --- Compare card (do/dont) --- */
.compare-grid {
display: grid;
gap: var(--space-6);
}
@media (min-width: 640px) {
.compare-grid { grid-template-columns: 1fr 1fr; }
}
.compare-card {
border-radius: var(--radius-lg);
padding: var(--space-6);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
}
.compare-card--dont {
border-color: rgba(242, 58, 60, 0.2);
background: rgba(242, 58, 60, 0.03);
}
.compare-card--do {
border-color: var(--color-brand-200);
background: var(--color-brand-100);
}
.compare-card__label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.compare-card--dont .compare-card__label { color: var(--color-status-error); }
.compare-card--do .compare-card__label { color: var(--color-brand-700); }
.compare-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-3);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.compare-list__icon {
width: 1rem; height: 1rem;
flex-shrink: 0;
margin-top: 2px;
}
/* --- Tag --- */
.tag {
display: inline-flex;
align-items: center;
font-size: var(--font-size-xs);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-2xl);
background: var(--color-brand-200);
color: var(--color-text-brand);
font-weight: var(--font-weight-medium);
}
.tag--outline {
background: transparent;
border: 1px solid var(--color-border-brand);
color: var(--color-text-brand);
}
.tag--dashed {
background: transparent;
border: 1px dashed var(--color-border-default);
color: var(--color-text-secondary);
}
.tag--signal {
background: var(--color-brand-200);
color: var(--color-text-brand);
}
/* --- Table wrapper --- */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-light);
}
.cmp-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
min-width: 480px;
}
.cmp-table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.cmp-table th, .cmp-table td {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border-light);
text-align: left;
}
.cmp-table th {
font-weight: var(--font-weight-semibold);
color: var(--color-text-brand);
background: var(--color-brand-100);
}
.cmp-table td { color: var(--color-text-secondary); }
.cmp-table__highlight {
background: var(--color-brand-100);
color: var(--color-brand-800);
font-weight: var(--font-weight-semibold);
}
.cmp-table__label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
color: var(--color-text-tertiary);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
}
.cmp-table__sub {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}
.cmp-table__note {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
margin-top: var(--space-3);
}
.cmp-table__note--accent { color: var(--color-brand-700); }
/* --- Button aliases --- */
.btn-block {
display: block;
width: 100%;
text-align: center;
}
.btn-solid {
background: var(--color-bg-inverse);
color: var(--color-text-inverse);
border-color: var(--color-bg-inverse);
}
.btn-solid:hover { opacity: 0.8; }
/* --- Badge variants --- */
.badge--light {
background: var(--color-brand-200);
color: var(--color-text-brand);
border: none;
}
.badge-light--brand {
background: var(--color-brand-200);
color: var(--color-text-brand);
border: none;
}
.badge-outline {
background: transparent;
border: 1px solid currentColor;
}
.badge-outline--brand {
background: transparent;
border: 1px solid var(--color-border-brand);
color: var(--color-text-brand);
}
.badge__dot--signal {
background: var(--color-brand-700);
}
/* --- Icon badge variants --- */
.icon-badge-light--brand {
background: var(--color-brand-200);
color: var(--color-brand-700);
}
.icon-badge-dark--brand {
background: rgba(57, 31, 23, 0.15);
color: var(--color-brand-400);
}
.icon-badge--danger {
background: rgba(242, 58, 60, 0.1);
color: var(--color-status-error);
}
.icon-badge-light--brand-light {
background: var(--color-brand-100);
color: var(--color-brand-600);
}
/* --- Section label/title variants --- */
.section-title--sm {
font-size: var(--font-size-2xl);
}
.section-title--left { text-align: left; }
.section-title--dark { color: var(--color-text-brand); }
.section-label--muted { color: var(--color-text-tertiary); }
.section-label--signal { color: var(--color-brand-700); }
.section-label--dark { color: var(--color-brand-700); }
.section-label--warning { color: var(--color-brand-600); }
.section-label--left { text-align: left; }
.section-label-dark { color: var(--color-brand-700); }
.section-lead--left { text-align: left; max-width: none; margin: 0; }
/* section--dark 内で明示的な色指定を上書き */
.section--dark .section-label { color: var(--color-text-brand); }
.section--dark .section-lead { color: var(--color-text-brand); }
.section-header--center { text-align: center; }
.section--dark-alt {
background: var(--color-brand-800);
color: var(--color-text-inverse);
}
.section--gradient-signal {
background: linear-gradient(to bottom, var(--color-brand-100), var(--color-bg-secondary));
}
/* --- Delay utilities (extra) --- */
.delay-50 { transition-delay: 0.05s; }
.delay-150 { transition-delay: 0.15s; }
.delay-250 { transition-delay: 0.25s; }
/* fade-in delay variants */
.fade-in--delay-1 { transition-delay: 0.1s; }
.fade-in--delay-2 { transition-delay: 0.2s; }
.fade-in--delay-3 { transition-delay: 0.3s; }
.fade-in--delay-4 { transition-delay: 0.4s; }
/* --- Utility extras --- */
.sp-hide { display: none; }
@media (min-width: 640px) { .sp-hide { display: revert; } }
.max-w-form { max-width: 32rem; margin-left: auto; margin-right: auto; }
.mb-sm { margin-bottom: var(--space-4); }
.mb-md { margin-bottom: var(--space-8); }
.mb-lg { margin-bottom: var(--space-12); }
.text-accent--dark { color: var(--color-text-brand); }
.overline {
font-size: var(--font-size-xs);
font-family: var(--font-family-english);
letter-spacing: var(--letter-spacing-widest);
text-transform: uppercase;
color: var(--color-text-tertiary);
}
/* --- CTA section extras --- */
.cta {
position: relative;
}
.cta__trust {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-6);
}
.cta__trust-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-dark-text-tertiary);
}
.cta__benefits {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-3) var(--space-5);
margin-bottom: var(--space-6);
}
.cta__benefit {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-dark-text-secondary);
}
.cta__benefit-icon { color: var(--color-brand-300); flex-shrink: 0; }
.cta__orb--2 {
bottom: -10rem; right: -5rem;
width: 300px; height: 300px;
background: rgba(57,31,23,0.04);
filter: blur(80px);
}
.cta__subtitle {
font-size: var(--font-size-base);
color: var(--color-dark-text-secondary);
margin-bottom: var(--space-8);
text-align: center;
}
.cta__pills {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
margin-bottom: var(--space-8);
}
.cta__pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-circle);
background: rgba(255,255,255,0.08);
color: var(--color-dark-text-secondary);
border: 1px solid rgba(255,255,255,0.1);
}
/* --- Form extras --- */
.form__group { display: flex; flex-direction: column; gap: var(--space-1); }
.form__field { display: flex; flex-direction: column; gap: var(--space-1); }
.form-label__required {
color: var(--color-brand-400);
font-size: var(--font-size-xs);
margin-left: var(--space-1);
}
/* --- Floating CTA extras --- */
.floating-cta__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.floating-cta__btn {
flex-shrink: 0;
}
/* --- Hero extras --- */
.hero__headline-break { display: block; }
.hero__copy-break { display: block; }
.hero__cta-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-5);
}
.hero__logo-img {
height: 1.5rem;
filter: brightness(0) invert(1);
opacity: 0.5;
}
.hero__service-sub {
font-size: var(--font-size-sm);
color: var(--color-brand-400);
margin-top: var(--space-1);
}
.hero__orb--2 {
bottom: -15rem; left: -5rem;
width: 400px; height: 400px;
background: rgba(179, 154, 142, 0.1);
filter: blur(100px);
}
.hero__orb--3 {
top: 33%; left: 25%;
width: 350px; height: 350px;
background: rgba(57,31,23,0.04);
filter: blur(100px);
}
/* --- Process extras --- */
.process__timeline { position: relative; }
.process__flow {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
@media (min-width: 640px) {
.process__flow {
flex-direction: row;
align-items: center;
}
}
.process__flow-step {
flex: 1;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
text-align: center;
}
.process__flow-step--accent {
background: var(--color-brand-200);
border-color: var(--color-brand-300);
color: var(--color-text-brand);
}
.process__flow-step--accent-strong {
background: var(--color-brand-900);
border-color: var(--color-brand-900);
color: var(--color-text-inverse);
}
.process__flow-step--danger {
background: rgba(242,58,60,0.05);
border-color: rgba(242,58,60,0.2);
color: var(--color-status-error);
}
.process__flow-step--final {
background: var(--color-brand-900);
border-color: var(--color-brand-900);
color: var(--color-text-inverse);
font-weight: var(--font-weight-bold);
}
.process__flow-arrow {
color: var(--color-text-tertiary);
text-align: center;
padding: var(--space-1);
flex-shrink: 0;
}
.process__flow-arrow--accent { color: var(--color-brand-600); }
.process__flow-arrow--signal { color: var(--color-brand-600); }
.process__flow-fade { opacity: 0.4; }
.process__flow-tag {
display: inline-flex;
align-items: center;
font-size: var(--font-size-xs);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-circle);
background: var(--color-brand-200);
color: var(--color-text-brand);
}
.process__flow-tag--signal {
background: var(--color-brand-900);
color: var(--color-text-inverse);
}
.process__flow-tag--signal-solid {
background: var(--color-brand-900);
color: var(--color-text-inverse);
font-weight: var(--font-weight-bold);
}
.process__flow-tag--muted {
background: var(--color-bg-muted);
color: var(--color-text-tertiary);
}
.process__flow-tag--faded {
background: transparent;
border: 1px dashed var(--color-border-default);
color: var(--color-text-tertiary);
}
.process__comparison { margin-bottom: var(--space-10); }
.process__comparison-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-brand);
margin-bottom: var(--space-6);
}
.process__comparison-lead {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
margin-bottom: var(--space-8);
}
.process__compare { margin-bottom: var(--space-12); }
.process__compare-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
margin-bottom: var(--space-2);
}
.process__compare-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-brand);
margin-bottom: var(--space-6);
}
.process__compare-label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
text-align: center;
}
.process__compare-label--before { color: var(--color-text-tertiary); }
.process__compare-label--after { color: var(--color-brand-700); }
.process__compare-card {
border-radius: var(--radius-lg);
padding: var(--space-6);
font-size: var(--font-size-sm);
}
.process__compare-card--before {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
color: var(--color-text-secondary);
}
.process__compare-card--after {
background: var(--color-brand-100);
border: 1px solid var(--color-brand-200);
color: var(--color-text-primary);
}
.process__compare-icon { margin-bottom: var(--space-3); }
.process__compare-icon--before { color: var(--color-text-tertiary); }
.process__compare-icon--after { color: var(--color-brand-700); }
.process__compare-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.process__compare-item { display: flex; align-items: flex-start; gap: var(--space-2); }
.process__compare-text { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.process__compare-text--accent { color: var(--color-brand-800); font-weight: var(--font-weight-semibold); }
.process__compare-text--strong { color: var(--color-text-brand); font-weight: var(--font-weight-bold); }
.process__compare-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-brand-400);
flex-shrink: 0;
margin-top: 6px;
}
.process__cta {
margin-top: var(--space-12);
text-align: center;
}
.process__phase {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: var(--color-brand-200);
color: var(--color-text-brand);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-circle);
margin-bottom: var(--space-4);
}
.process__phase-label { font-size: var(--font-size-xs); color: var(--color-brand-700); font-weight: 700; }
.process__phase-header { margin-bottom: var(--space-4); }
.process__phase-marker {
width: 2rem; height: 2rem;
border-radius: var(--radius-md);
background: var(--color-brand-200);
color: var(--color-text-brand);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: var(--font-size-sm);
flex-shrink: 0;
}
.process__phase-name { font-size: var(--font-size-base); font-weight: 700; color: var(--color-text-brand); }
.process__step-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.process__step-list { display: flex; flex-direction: column; gap: var(--space-4); }
.process__step-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.process__step-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--color-brand-700);
flex-shrink: 0;
margin-top: 6px;
}
.process__step-period {
font-size: var(--font-size-xs);
color: var(--color-brand-600);
font-weight: var(--font-weight-bold);
letter-spacing: var(--letter-spacing-wide);
margin-bottom: var(--space-1);
}
.process__step-number {
font-family: var(--font-family-english-display);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-black);
color: var(--color-brand-200);
line-height: 1;
}
.process__orb {
position: absolute;
border-radius: var(--radius-circle);
pointer-events: none;
opacity: 0.15;
}
.process__arrow { color: var(--color-text-tertiary); text-align: center; padding: var(--space-2); }
.process__dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--color-brand-400);
flex-shrink: 0;
}
.process__dot-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-2) 0;
}
.process__month { margin-bottom: var(--space-8); }
.process__month-header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.process__month-number {
font-family: var(--font-family-english-display);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-black);
color: var(--color-brand-200);
line-height: 1;
}
.process__month-label {
font-size: var(--font-size-xs);
color: var(--color-brand-600);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
}
.process__month-title {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--color-text-brand);
}
.process__month-body { flex-grow: 1; }
.process__month-arrow { color: var(--color-text-tertiary); }
.process__week-label {
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--color-brand-600);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
margin-bottom: var(--space-2);
}
.process__week-list { display: flex; flex-direction: column; gap: var(--space-2); }
.process__week { margin-bottom: var(--space-4); }
.process__timeline-line {
position: absolute;
top: 1.25rem;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--color-brand-200), var(--color-brand-700), var(--color-brand-200));
}
.process__timeline-desktop { display: none; }
@media (min-width: 768px) { .process__timeline-desktop { display: block; } }
.process__timeline-mobile { display: block; }
@media (min-width: 768px) { .process__timeline-mobile { display: none; } }
.process__mobile-step { display: flex; gap: var(--space-4); margin-bottom: var(--space-6); }
.process__mobile-marker {
width: 2.5rem; height: 2.5rem;
border-radius: 50%;
background: var(--color-brand-200);
color: var(--color-text-brand);
display: flex; align-items: center; justify-content: center;
font-weight: 700;
flex-shrink: 0;
}
.process__mobile-arrow { text-align: center; color: var(--color-text-tertiary); margin: var(--space-2) 0; }
.process__row {
display: grid;
gap: var(--space-6);
}
@media (min-width: 768px) {
.process__row { grid-template-columns: 1fr 1fr; }
}
.process__before-after {
display: grid;
gap: var(--space-4);
}
@media (min-width: 640px) {
.process__before-after { grid-template-columns: 1fr 1fr; }
}
.process__quote { margin-top: var(--space-8); }
.process__quote-icon { color: var(--color-brand-300); margin-bottom: var(--space-3); }
.process__quote-text {
font-size: var(--font-size-lg);
font-family: var(--font-family-display);
color: var(--color-text-brand);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-3);
}
.process__quote-author {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.process__subtitle {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
}
.process__point {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.process__point-label {
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--color-brand-600);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
}
.process__point-text { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
.process__points { margin-bottom: var(--space-10); }
.process__loop { position: relative; }
.process__cycle-banner {
background: var(--color-brand-200);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
text-align: center;
margin-top: var(--space-6);
}
.process__takeaway { margin-top: var(--space-8); text-align: center; }
.process__takeaway-lead {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
letter-spacing: var(--letter-spacing-wider);
margin-bottom: var(--space-3);
}
.process__takeaway-main {
font-size: var(--font-size-2xl);
font-family: var(--font-family-display);
color: var(--color-text-brand);
margin-bottom: var(--space-2);
}
.process__takeaway-accent { color: var(--color-brand-600); }
/* --- Shift section --- */
.shift { position: relative; }
.shift__header { margin-bottom: var(--space-10); }
.shift__orb {
position: absolute;
border-radius: var(--radius-circle);
pointer-events: none;
opacity: 0.15;
}
.shift__bridge { margin-bottom: var(--space-10); }
.shift__bridge-text {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.shift__bridge-sub {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
margin-top: var(--space-2);
}
.shift__case { margin-bottom: var(--space-10); }
.shift__case-inner {
display: grid;
gap: var(--space-8);
}
@media (min-width: 768px) {
.shift__case-inner { grid-template-columns: 1fr 1fr; align-items: start; }
}
.shift__case-label {
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--color-brand-600);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
margin-bottom: var(--space-2);
}
.shift__case-title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--color-text-brand);
margin-bottom: var(--space-3);
}
.shift__case-text {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.shift__case-sub {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
margin-top: var(--space-2);
}
.shift__case-icon { color: var(--color-brand-500); margin-bottom: var(--space-3); }
.shift__case-body { flex-grow: 1; }
.shift__case-note { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-top: var(--space-3); }
.shift__case-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.shift__insight { margin-bottom: var(--space-10); }
.shift__insight-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.shift__insight-lead {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
letter-spacing: var(--letter-spacing-wider);
margin-bottom: var(--space-3);
}
.shift__insight-text {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.shift__compare { margin-bottom: var(--space-10); }
.shift__compare-header { margin-bottom: var(--space-6); }
.shift__compare-title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--color-text-brand);
}
.shift__compare-note { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-top: var(--space-2); }
.shift__compare-label {
font-size: var(--font-size-xs);
font-weight: 700;
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
}
.shift__compare-label--before { color: var(--color-text-tertiary); }
.shift__compare-label--after { color: var(--color-brand-700); }
.shift__compare-card {
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.shift__compare-card--before {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
}
.shift__compare-card--after {
background: var(--color-brand-100);
border: 1px solid var(--color-brand-200);
}
.shift__flow {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
@media (min-width: 640px) {
.shift__flow { flex-direction: row; align-items: center; }
}
.shift__flow-step {
flex: 1;
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
text-align: center;
}
.shift__flow-step--teal {
background: var(--color-brand-200);
border-color: var(--color-brand-300);
}
.shift__flow-step--danger {
background: rgba(242,58,60,0.05);
border-color: rgba(242,58,60,0.2);
}
.shift__flow-step-label {
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
margin-bottom: var(--space-1);
color: var(--color-text-tertiary);
}
.shift__flow-step-label--teal { color: var(--color-brand-700); }
.shift__flow-step-label--danger { color: var(--color-status-error); }
.shift__flow-step-text { font-size: var(--font-size-sm); color: var(--color-text-primary); }
.shift__flow-arrow { color: var(--color-text-tertiary); text-align: center; padding: var(--space-1); flex-shrink: 0; }
/* --- Stats / Steps --- */
.stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
justify-content: center;
margin-bottom: var(--space-10);
}
.stats__value {
font-family: var(--font-family-english-display);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-black);
color: var(--color-text-brand);
line-height: 1;
}
.stats__label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-top: var(--space-2);
}
.stats__divider {
width: 1px;
background: var(--color-border-light);
align-self: stretch;
}
.steps {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: var(--space-12);
}
.step {
display: grid;
grid-template-columns: 5rem 1fr;
gap: var(--space-6);
padding: var(--space-8) 0;
border-top: 1px solid var(--color-border-light);
}
.step:last-child { border-bottom: 1px solid var(--color-border-light); }
.step__left {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: var(--space-1);
}
.step__number {
font-family: var(--font-family-english-display);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-regular);
color: var(--color-brand-200);
line-height: 1;
}
.step__month {
font-family: var(--font-family-english);
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
margin-top: var(--space-1);
}
.step__body { display: flex; flex-direction: column; }
.step__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-text-brand);
margin-bottom: var(--space-2);
line-height: var(--line-height-snug);
}
.step__text {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.step__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-4);
}
/* 旧コネクター（使用しない） */
.step__connector { display: none; }
/* --- Timeline extras --- */
.timeline__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
}
.timeline__period {
font-size: var(--font-size-sm);
font-weight: 700;
color: var(--color-brand-700);
margin-bottom: var(--space-2);
}
.timeline__period-sub {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}
.timeline__sp-label {
display: inline-block;
font-size: var(--font-size-sm);
font-weight: 700;
color: var(--color-text-brand);
background: var(--color-brand-200);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-sm);
margin-bottom: var(--space-2);
}
@media (min-width: 640px) { .timeline__sp-label { display: none; } }
.timeline__month {
font-size: var(--font-size-xs);
font-weight: 700;
color: var(--color-brand-600);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
margin-bottom: var(--space-1);
}
.timeline__card-text { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.7; }
.timeline__card-title { font-size: 1rem; font-weight: 700; color: var(--color-bg-inverse); margin-bottom: var(--space-3); }
.timeline__card--expand { cursor: pointer; }
.timeline__card-bar--1 { background: var(--color-brand-400); }
.timeline__card-bar--2 { background: var(--color-brand-600); }
.timeline__card-bar--3 { background: var(--color-brand-800); }
.timeline__marker--expand { cursor: pointer; }
.timeline__marker--sm {
width: 3rem; height: 3rem;
border-radius: var(--radius-md);
background: var(--color-brand-200);
color: var(--color-text-brand);
display: flex; align-items: center; justify-content: center;
font-weight: 700;
}
.timeline__marker--lg {
width: 5rem; height: 5rem;
border-radius: var(--radius-lg);
background: var(--color-brand-200);
color: var(--color-text-brand);
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: var(--font-size-xl);
}
/* --- Voice extras --- */
.voice__icon { width: 2.5rem; height: 2.5rem; color: var(--color-brand-300); margin-bottom: var(--space-4); }
.voice__inner { position: relative; }
/* --- Statement extras --- */
.statement-inner { position: relative; z-index: 1; }
/* --- Comparison extras (LP pattern) --- */
.comparison__header { margin-bottom: var(--space-8); }
.comparison__card {
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.comparison__card--before {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
}
.comparison__card--after {
background: var(--color-brand-100);
border: 1px solid var(--color-brand-200);
}
.comparison__card-label {
font-size: var(--font-size-xs);
font-weight: 700;
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.comparison__card--before .comparison__card-label { color: var(--color-text-tertiary); }
.comparison__card--after .comparison__card-label { color: var(--color-brand-700); }
.comparison__list-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.comparison__desktop { display: none; }
@media (min-width: 768px) { .comparison__desktop { display: block; } }
.comparison__mobile { display: block; }
@media (min-width: 768px) { .comparison__mobile { display: none; } }
.comparison__mobile-header { display: grid; grid-template-columns: 1fr 1fr; font-size: var(--font-size-xs); font-weight: 700; margin-bottom: var(--space-3); }
.comparison__mobile-label {
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
}
.comparison__mobile-card { margin-bottom: var(--space-4); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); overflow: hidden; }
.comparison__mobile-body { display: grid; grid-template-columns: 1fr 1fr; }
.comparison__mobile-cell { padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); }
.comparison__mobile-cell--highlight { background: var(--color-brand-100); }
.comparison__mobile-cell-label { font-weight: 700; color: var(--color-text-brand); font-size: var(--font-size-xs); margin-bottom: var(--space-1); }
.comparison__mobile-cell-label--default { color: var(--color-text-tertiary); }
.comparison__mobile-cell-label--highlight { color: var(--color-brand-700); }
.comparison__mobile-cell-text { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.comparison__mobile-cell-text--default { color: var(--color-text-tertiary); }
.comparison__mobile-cell-text--highlight { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.comparison__table-td--highlight { background: var(--color-brand-100); color: var(--color-brand-800); font-weight: var(--font-weight-semibold); }
.comparison__table-th--highlight {
background: linear-gradient(135deg, var(--color-brand-700), var(--color-brand-800));
color: var(--color-text-inverse);
font-weight: 700;
}
/* --- Principles --- */
.principles { position: relative; }
.principles__grid {
display: grid;
gap: var(--space-6);
}
@media (min-width: 640px) {
.principles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.principles__grid { grid-template-columns: repeat(3, 1fr); }
}
.principles__card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.principles__icon { margin-bottom: var(--space-4); color: var(--color-brand-700); }
.principles__icon--teal { color: var(--color-brand-600); }
.principles__icon--danger { color: var(--color-status-error); }
.principles__title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-text-brand);
margin-bottom: var(--space-2);
}
.principles__text {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
}
.principles__declaration {
background: var(--color-brand-900);
border-radius: var(--radius-lg);
padding: var(--space-8) var(--space-10);
text-align: center;
margin-top: var(--space-10);
}
.principles__declaration-inner { position: relative; z-index: 1; }
.principles__declaration-sub {
font-size: var(--font-size-sm);
color: var(--color-dark-text-tertiary);
margin-top: var(--space-4);
}
.principles__declaration-text {
font-size: var(--font-size-2xl);
font-family: var(--font-family-display);
color: var(--color-text-inverse);
line-height: var(--line-height-relaxed);
}
/* --- grid--3-md (medium breakpoint only) --- */
.grid--3-md { grid-template-columns: 1fr; }
@media (min-width: 768px) {
.grid--3-md { grid-template-columns: repeat(3, 1fr); }
}
/* ============================================================
B. 非対称フィーチャー（Asymmetric Feature Layout）
============================================================
アイコン + テキストを横並びにする2カラムレイアウト。
--flip バリアントでカラム順を反転。
============================================================ */
.asymm-feature {
display: flex;
flex-direction: column;
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.asymm-feature {
flex-direction: row;
align-items: flex-start;
gap: var(--space-12);
}
.asymm-feature--flip {
flex-direction: row-reverse;
}
}
.asymm-feature__visual {
flex-shrink: 0;
width: 100%;
}
@media (min-width: 768px) {
.asymm-feature__visual { width: 6rem; }
}
.asymm-feature__text { flex-grow: 1; }
.asymm-feature__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-text-brand);
margin-bottom: var(--space-3);
line-height: var(--line-height-snug);
}
.asymm-feature__desc {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-4);
}
/* ============================================================
C. カード拡張（Card Footer / Flow / Tags）
============================================================ */
.card__footer {
background: var(--color-dark-surface);
border: 1px solid var(--color-dark-border);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-4);
margin-top: var(--space-4);
}
.card__footer--dark {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.06);
}
.card__footer-label {
font-size: var(--font-size-xs);
color: var(--color-dark-text-muted);
margin-bottom: var(--space-1);
}
.card__flow {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-brand-300);
}
.card__flow-arrow { color: var(--color-dark-text-subtle); }
.card__footer-list {
list-style: none;
font-size: var(--font-size-xs);
color: var(--color-dark-text-tertiary);
}
.card__footer-list li::before { content: '・'; }
.card__footer-list li + li { margin-top: var(--space-1); }
.card__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-4);
}
/* ============================================================
D. 比較カード（Comparison Card — cmp-card）
============================================================
3社比較等に使う縦型比較カード。
--highlight: 自社強調版（brand-900 背景）
--muted: 他社版（白背景）
============================================================ */
.cmp-cards {
display: grid;
gap: var(--space-6);
margin-bottom: var(--space-10);
}
@media (min-width: 640px) {
.cmp-cards { grid-template-columns: repeat(3, 1fr); }
}
.cmp-card {
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.cmp-card--muted {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
}
.cmp-card--highlight {
background: var(--color-bg-inverse);
border: 1px solid var(--color-brand-700);
}
.cmp-card__label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
color: var(--color-text-brand);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border-light);
}
.cmp-card--highlight .cmp-card__label {
color: var(--color-text-inverse);
border-bottom-color: rgba(255, 255, 255, 0.1);
}
.cmp-card__list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-3);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.cmp-card--highlight .cmp-card__list { color: var(--color-dark-text-secondary); }
.cmp-card__key {
display: block;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-tertiary);
margin-bottom: 2px;
}
.cmp-card--highlight .cmp-card__key { color: var(--color-dark-text-muted); }