/* ========================================================= 株式会社直結様 コーポレートサイト デザイントークン CSS（濃紺 × シャンパンゴールド） v1.0 / 2026-06-09 --------------------------------------------------------- 用途： - SWELL子テーマで読み込む「おおもとのトークンファイル」 - Figma変数 / デザインカンプの数値の正解 - 変更時はこの1枚を更新 → 全体に伝播 ========================================================= */ :root { /* ---- Color : Primitive ---- */ --navy-900: #121D34; --navy-800: #1B2A4A; /* MAIN */ --navy-700: #2E4372; /* SUB */ --navy-600: #3D5589; --navy-100: #EEF1F6; --navy-50: #F7F9FC; --gold-700: #A8854C; --gold-600: #B8965A; --gold-500: #C8A96A; /* ACCENT */ --gold-300: #E0CDA3; --gold-100: #F4ECDB; --ink: #1A1A1A; --gray-600: #6B7280; --gray-400: #9CA3AF; --gray-200: #E5E9F0; --white: #FFFFFF; /* ---- Color : Semantic ---- */ --color-brand: var(--navy-800); --color-brand-sub: var(--navy-700); --color-accent: var(--gold-500); --color-accent-hover: var(--gold-600); --color-bg: var(--white); --color-bg-alt: var(--navy-100); --color-bg-dark: var(--navy-800); --color-bg-dark-deep: var(--navy-900); --color-text: var(--ink); --color-text-muted: var(--gray-600); --color-text-on-dark: var(--white); --color-text-on-dark-muted: rgba(255,255,255,0.72); --color-border: var(--gray-200); --color-border-accent: var(--gold-500); --overlay-navy: rgba(27,42,74,0.55); /* ---- Typography : Family ---- */ --font-jp-sans: 'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif; --font-jp-serif: 'Shippori Mincho','Noto Serif JP','Yu Mincho',serif; --font-en-serif: 'Cormorant Garamond','Times New Roman',serif; --font-en-sans: 'Montserrat','Helvetica Neue',Arial,sans-serif; /* ---- Typography : Size (root 16px) ---- */ --fs-display: 3.5rem; /* 56px : Hero見出し */ --fs-h1: 2.5rem; /* 40px */ --fs-h2: 2rem; /* 32px : セクション見出し */ --fs-h3: 1.5rem; /* 24px */ --fs-h4: 1.25rem; /* 20px */ --fs-body-lg: 1.0625rem; /* 17px */ --fs-body: 1rem; /* 16px */ --fs-sm: 0.875rem; /* 14px */ --fs-xs: 0.8125rem; /* 13px */ --fs-label: 0.75rem; /* 12px : 英字ラベル */ /* ---- Typography : Weight / LineHeight / Tracking ---- */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --lh-tight: 1.3; --lh-heading: 1.4; --lh-base: 1.8; --lh-relaxed: 2.0; --ls-heading: 0.04em; --ls-label: 0.12em; /* ---- Spacing (8px base) ---- */ --space-1: 0.5rem; /* 8 */ --space-2: 1rem; /* 16 */ --space-3: 1.5rem; /* 24 */ --space-4: 2rem; /* 32 */ --space-6: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --section-sp: 4rem; /* 64 : SPセクション間 */ --section-sp-lg: 5rem; /* 80 */ --section-pc: 7.5rem; /* 120 : PCセクション間 */ --section-pc-lg: 10rem; /* 160 */ /* ---- Layout ---- */ --container-max: 1200px; --container-narrow: 800px; --gutter-pc: 40px; --gutter-sp: 20px; /* ---- Radius ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ---- Shadow ---- */ --shadow-card: 0 4px 18px rgba(27,42,74,0.12); --shadow-card-hover: 0 10px 30px rgba(27,42,74,0.18); /* ---- Motion ---- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-soft: cubic-bezier(.16, 1, .3, 1); --dur-fast: 0.2s; --dur: 0.3s; --dur-slow: 0.6s; } /* レスポンシブ時は左右パディング（--gutter-pc）を縮小（PCの40pxは小画面では大きすぎるため） */ @media(max-width:900px){ :root{ --gutter-pc: 28px; } } @media(max-width:600px){ :root{ --gutter-pc: 20px; } } /* ========================================================= ベースユーティリティ（任意・最小限） SWELL本体のスタイルを尊重しつつ、よく使うものだけ定義 ========================================================= */ /* セクション見出し：英字ラベル＋和文見出しの2段組 */ .c-sec-label { font-family: var(--font-en-sans); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); color: var(--color-accent); text-transform: uppercase; display: inline-block; margin-bottom: var(--space-1); } .c-sec-label::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--color-accent); vertical-align: middle; margin-right: 10px; } .c-sec-heading { font-family: var(--font-jp-serif); /* 明朝で上品に */ font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--color-brand); } /* 濃紺セクション（強み・CTA等で反転） */ .c-sec--dark { background: var(--color-bg-dark); color: var(--color-text-on-dark); } .c-sec--dark .c-sec-heading { color: var(--color-text-on-dark); } /* 交互背景セクション */ .c-sec--alt { background: var(--color-bg-alt); } /* ボタン（主）：ゴールド */ .c-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-jp-sans); font-size: var(--fs-body); font-weight: var(--fw-medium); padding: 16px 32px; background: var(--color-accent); color: var(--navy-900); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); text-decoration: none; } .c-btn:hover { background: var(--color-accent-hover); } /* ボタン（副）：アウトライン */ .c-btn--outline { background: transparent; color: var(--color-brand); border-color: var(--color-brand); } .c-btn--outline:hover { background: var(--color-brand); color: var(--white); } /* カード：ホバーで微浮上 */ .c-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .c-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); } /* ゴールドの区切り線 */ .c-divider-gold { width: 48px; height: 2px; background: var(--color-accent); border: 0; margin: var(--space-3) 0; } /* フェードイン（IntersectionObserverで .is-visible を付与） */ .js-fade { opacity: 0; transform: translateY(var(--space-3)); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .js-fade.is-visible { opacity: 1; transform: none; } /* コンテナ */ .l-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter-sp); } @media (min-width: 1024px) { .l-container { padding-inline: var(--gutter-pc); } } /* 紺オーバーレイ（KV写真などに重ねる） */ .u-overlay-navy { position: relative; } .u-overlay-navy::after { content: ""; position: absolute; inset: 0; background: var(--overlay-navy); }