/* =================================================================== Mamahata Public Site — BUNDLED CSS（自動生成・直接編集禁止） 生成元: css/site/main.css の @import 順を結合したもの。 再生成: php artisan css:bundle 個別スタイルは各部分 CSS（tokens/base/components/...）を編集すること。 =================================================================== */ /* ==== tokens.css ==== */ /* =================================================================== ママの働き方応援隊 — Design Tokens (CSS Variables) テーマ：セージグリーン × 強調オレンジ × ホワイト =================================================================== */ :root { /* ─── Primary: Emphasis Orange（強調・CTA・アクセント） ─── */ /* 主にボタン・リンク・強調表現に使用 */ --color-primary-50: #FDF2EB; --color-primary-100: #FADCC4; --color-primary-200: #F4BC92; --color-primary-300: #EE9D62; --color-primary-400: #EB8B4D; --color-primary-500: #E87C3D; /* 強調色（user-specified） */ --color-primary-600: #C66323; --color-primary-700: #964A19; --color-primary-800: #5E2E0F; /* ─── Theme: Sage Green（テーマカラー・ブランド） ─── */ /* 主に背景アクセント・タイトル下線・装飾・小サインに使用 */ --color-theme-50: #F0F3ED; /* 薄いセージ背景（user-specified） */ --color-theme-100: #E5EBD2; --color-theme-200: #CAD8AB; --color-theme-300: #ACC383; --color-theme-400: #99B473; --color-theme-500: #88A463; /* テーマカラー（user-specified） */ --color-theme-600: #6F8A4D; --color-theme-700: #56723B; --color-theme-800: #3D5128; /* ─── Sub: 互換性のため残す（旧 sub を theme にエイリアス） ─── */ --color-sub-50: var(--color-theme-50); --color-sub-100: var(--color-theme-100); --color-sub-200: var(--color-theme-200); --color-sub-300: var(--color-theme-300); --color-sub-400: var(--color-theme-400); --color-sub-500: var(--color-theme-500); --color-sub-600: var(--color-theme-600); --color-sub-700: var(--color-theme-700); --color-sub-800: var(--color-theme-800); /* ─── Accent ─── */ --color-accent-yellow: #E8B547; --color-accent-cream: #F4ECDC; --color-accent-pink: #E89B8E; --color-accent-leaf: var(--color-theme-300); --color-accent-mint: #B8D4C8; /* ─── Ink / Base（文字・罫線・背景） ─── */ --color-ink: #32323A; /* 文字ブラック（user-specified） */ --color-ink-2: #4D4D54; --color-ink-3: #74747A; --color-ink-4: #A8A8AC; --color-rule: #ECEAE3; /* 罫線（薄ベージュグレー） */ --color-rule-2: #D8D5CC; --color-bg: #FFFFFF; /* メイン背景は白を活かす */ --color-bg-2: #FAF8F2; /* 薄いクリーム（セクション切替用） */ --color-bg-paper: #FFFCF6; --color-bg-sage: var(--color-theme-50); /* 薄い緑背景 */ --color-bg-ink: #1F1F25; /* ─── Type ─── */ --font-sans-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; --font-en: "Inter", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace; --font-script: "Caveat", "Shippori Antique", cursive; --font-heading: var(--font-sans-jp); --heading-weight: 700; --heading-letter: -0.02em; /* ─── Font Size（調和数列スケール / Lism 由来） ─── base(=m) を 1 つ変えれば全段が比例追従する。比率は分子 8 の調和数列 8/n。 単位は rem（root 16px 基準）＝ユーザーのブラウザ文字サイズ拡大に追従（a11y）。 役割で選ぶ（近い段ではなく）: 本文・リード = m / l、UI補助 = s / xs / 2xs。 見出し・タイトル = l→xl→2xl→3xl→4xl（ジャンプ率は控えめ）。 強調数値（ネットワーク統計・エビデンス数値・資料番号）= 5xl で最大強調。 超特大の装飾数字・レスポンシブ見出し(clamp)はスケール外で個別指定。*/ --fz-base: 1rem; /* m = 本文 16px（base切替で全段追従）*/ --fz-2xs: calc(var(--fz-base) * 8 / 11); /* ≈11.6px 極小ラベル・en小字 */ --fz-xs: calc(var(--fz-base) * 8 / 10); /* 12.8px バッジ・nav・補助 */ --fz-s: calc(var(--fz-base) * 8 / 9); /* ≈14.2px キャプション・ラベル */ --fz-m: var(--fz-base); /* 16px 本文（基準）*/ --fz-l: calc(var(--fz-base) * 8 / 7); /* ≈18.3px リード・小見出し・h4 */ --fz-xl: calc(var(--fz-base) * 8 / 6); /* ≈21.3px コンポーネント見出し */ --fz-2xl: calc(var(--fz-base) * 8 / 5); /* 25.6px セクション見出し */ --fz-3xl: calc(var(--fz-base) * 8 / 4); /* 32px 大見出し */ --fz-4xl: calc(var(--fz-base) * 8 / 3); /* ≈42.7px 最大見出し（hero）*/ --fz-5xl: calc(var(--fz-base) * 8 / 2); /* 64px 強調数値専用 */ /* ─── Spacing（フィボナッチ＋中間補完 / Lism 由来。--fz-base と連動）─── --s-unit = --fz-base * 0.5（base16 → 8px）。base を変えれば余白も比例追従。 主軸はフィボナッチ倍率 1,2,3,5,8,13,21,34、中間補完 0.5,1.5,2.5,4 で前半の粗さを補う。 padding / margin / gap は必ず var(--s*) を使う（生px禁止。§30）。 1〜3px の微調整・負マージンはスケール外で個別指定可。*/ --s-unit: calc(var(--fz-base) * 0.5); /* 8px */ --s5: calc(var(--s-unit) * 0.5); /* 4px */ --s10: var(--s-unit); /* 8px */ --s15: calc(var(--s-unit) * 1.5); /* 12px */ --s20: calc(var(--s-unit) * 2); /* 16px */ --s25: calc(var(--s-unit) * 2.5); /* 20px */ --s30: calc(var(--s-unit) * 3); /* 24px */ --s35: calc(var(--s-unit) * 4); /* 32px */ --s40: calc(var(--s-unit) * 5); /* 40px */ --s50: calc(var(--s-unit) * 8); /* 64px */ --s60: calc(var(--s-unit) * 13); /* 104px */ --s70: calc(var(--s-unit) * 21); /* 168px */ --s80: calc(var(--s-unit) * 34); /* 272px */ /* ─── Radius ─── */ --r-sm: 4px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* ─── Shadows ─── */ --shadow-sm: 0 1px 2px rgba(50,50,58,.04), 0 0 0 1px rgba(50,50,58,.04); --shadow-md: 0 4px 12px rgba(50,50,58,.06), 0 1px 2px rgba(50,50,58,.04); --shadow-lg: 0 12px 32px rgba(50,50,58,.08), 0 2px 6px rgba(50,50,58,.04); /* ─── Layout ─── */ --container: 1440px; --container-wide: 1440px; } /* ==== base.css ==== */ /* =================================================================== Base — reset, typography baseline, editorial primitives =================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* scrollbar の表示有無で viewport 幅が変動しないよう gutter を常時確保 (drawer 開閉時の fixed 要素の位置ずれ防止) */ html { scrollbar-gutter: stable; } body { font-family: var(--font-sans-jp); font-feature-settings: "palt"; color: var(--color-ink); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: var(--fz-l); line-height: 1.7; overflow-x: hidden; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; } /* ─── Editorial primitives (utility-style; not strict BEM) ─── */ .eyebrow { font-family: var(--font-en); font-weight: 700; font-size: var(--fz-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--color-primary-500); display: inline-flex; align-items: center; gap: var(--s10); } .eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; display: inline-block; } .eyebrow--light { color: var(--color-bg); } .eyebrow--ink { color: var(--color-ink); } .h-display { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-letter); line-height: 1.25; color: var(--color-ink); margin: 0; } .h-display--1 { font-size: clamp(40px, 4.4vw, 72px); line-height: 1.18; } .h-display--2 { font-size: clamp(32px, 3vw, 48px); line-height: 1.22; } .h-display--3 { font-size: clamp(22px, 1.6vw, 28px); line-height: 1.35; } .h-display--4 { font-size: var(--fz-l); line-height: 1.5; font-weight: 700; } .body { margin: 0; } .body--lg { font-size: var(--fz-xl); line-height: 1.85; color: var(--color-ink-2); } .body--md { font-size: var(--fz-l); line-height: 1.85; color: var(--color-ink-2); } .body--sm { font-size: var(--fz-s); line-height: 1.7; color: var(--color-ink-3); } .note { font-size: var(--fz-s); line-height: 1.6; color: var(--color-ink-4); letter-spacing: .02em; margin: 0; } /* ─── Container ─── */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s35); } .container--wide { max-width: var(--container-wide); padding: 0 var(--s35); margin: 0 auto; } .container--sm { max-width: 920px; padding: 0 var(--s35); margin: 0 auto; } .divider { height: 1px; background: var(--color-rule); margin: var(--s50) 0; border: 0; } /* ─── EN/Mono helpers ─── */ .text-en { font-family: var(--font-en); } .text-mono { font-family: var(--font-mono); } .uppercase { text-transform: uppercase; letter-spacing: .08em; } /* ─── Mobile: container side padding ─── */ @media (max-width: 768px) { .container, .container--wide, .container--sm { padding: 0 var(--s25); } } /* ==== components.css ==== */ /* =================================================================== Components — BEM .button, .tag, .card, .photo, .section-label, .logo, .stat, .input … =================================================================== */ /* ─── Button ──────────────────────────────────────────────────── */ .button { display: inline-flex; align-items: center; gap: var(--s10); padding: var(--s15) var(--s25); border-radius: var(--r-md); font-weight: 700; font-size: var(--fz-m); letter-spacing: .02em; border: 1px solid transparent; transition: all .18s ease; white-space: nowrap; cursor: pointer; } .button__arrow { width: 18px; height: 10px; flex-shrink: 0; transition: transform .2s ease; } .button:hover .button__arrow { transform: translateX(3px); } .button:disabled, .button[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; } .button--primary { background: var(--color-primary-500); color: #fff; } .button--primary:hover { background: var(--color-primary-600); } .button--ink { background: var(--color-ink); color: var(--color-bg); } .button--ink:hover { background: #2A2520; } .button--outline { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); } .button--outline:hover { border-color: var(--color-ink); background: rgba(0,0,0,.02); } .button--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); } .button--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.06); } .button--ghost { background: transparent; color: var(--color-ink); padding: var(--s10) 0; border-radius: 0; border-bottom: 1px solid currentColor; border-top: 0; border-left: 0; border-right: 0; } .button--sm { padding: var(--s10) var(--s20); font-size: var(--fz-s); } .button--lg { padding: var(--s20) var(--s30); font-size: var(--fz-l); } .button--block { display: flex; width: 100%; justify-content: center; } /* ─── Tag / Label ─────────────────────────────────────────────── */ .tag { display: inline-flex; align-items: center; padding: var(--s5) var(--s10); border-radius: var(--r-sm); font-size: var(--fz-xs); font-weight: 600; letter-spacing: .04em; font-family: var(--font-en); text-transform: uppercase; } .tag--edu { background: #E8F0E5; color: #2D5A3D; } .tag--co { background: var(--color-sub-50); color: var(--color-sub-600); } .tag--gov { background: #F0E8DC; color: #6B4F1F; } .tag--mama { background: var(--color-primary-50); color: var(--color-primary-600); } .tag--news { background: #EFE8E2; color: var(--color-ink-2); } /* ─── Citation Footnote ────────────────────────────────────── programs LP / about/evidence 等で「出典: ...」を小さく右寄せで表示する脚注。 9 LP で同じ

パターンが重複していたのを共通クラス化。 ─────────────────────────────────────────────────────────────── */ .cite-footnote { font-size: var(--fz-xs); color: var(--color-ink-3); margin-top: var(--s20); text-align: right; line-height: 1.7; } /* ─── 共通ユーティリティ (programs LP / entries で頻出した style="" の集約) ─── */ /* セクション直後の中央寄せボタン群 (programs LP で 13 箇所重複) */ .section-cta-center { margin-top: var(--s35); text-align: center; } /* ヒーロー直下の CTA 横並び (programs LP で 10 箇所重複) */ .hero-cta-row { display: flex; gap: var(--s15); flex-wrap: wrap; margin-top: var(--s15); } /* 2 カラム narrow グリッド (programs LP で 8 箇所重複) */ .grid-2col-narrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s15) var(--s35); max-width: 800px; margin: 0 auto; } @media (max-width: 640px) { .grid-2col-narrow { grid-template-columns: 1fr; } } /* セージ背景の左ボーダーカラム (programs LP で 3 箇所重複 + 拡張余地) */ .callout-sage { margin-top: var(--s35); padding: var(--s30) var(--s30); background: var(--color-bg-sage); border-left: 3px solid var(--color-theme-500); font-size: var(--fz-m); line-height: 1.85; color: var(--color-ink-2); border-radius: 0 var(--r-md) var(--r-md) 0; } /* 半透明白の callout (programs LP で 5 箇所重複) */ .callout-glass { margin-top: var(--s35); padding: var(--s30) var(--s30); background: rgba(255, 255, 255, 0.65); border-radius: var(--r-md); font-size: var(--fz-m); line-height: 1.85; color: var(--color-ink-2); } /* セクション末尾の中央寄せ脚注 (programs LP で 5 箇所重複) */ .section-footnote { margin-top: var(--s35); font-size: var(--fz-m); line-height: 1.85; color: var(--color-ink-2); text-align: center; } /* entries フォームのセクションタイトル (entries で 12 箇所重複) */ .entry-section-title { font-size: var(--fz-l); font-weight: 800; color: var(--color-ink); margin: 0 0 var(--s10); padding-bottom: var(--s15); border-bottom: 2px solid var(--color-theme-500); } .entry-section-title--mt { margin-top: var(--s20); } /* entries フォームのセクション直下 sub テキスト (entries で 5 箇所重複) */ .entry-section-sub { font-size: var(--fz-s); color: var(--color-ink-3); margin: -8px 0 0; line-height: 1.85; } /* シンプル margin utility (entries で 6 箇所重複 + ほか少々) */ .mb-40 { margin-bottom: var(--s40) !important; } .mt-24 { margin-top: var(--s30) !important; } /* 埋め込み iframe (Google マップ等) の共通装飾 */ .map-embed { border: 0; border-radius: var(--r-md); } /* ─── Photo placeholder ───────────────────────────────────────── */ .photo { background: var(--color-bg-2); position: relative; overflow: hidden; } .photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(200,85,61,.12), rgba(58,90,108,.12)), repeating-linear-gradient(45deg, transparent 0 18px, rgba(0,0,0,.025) 18px 19px); } .photo__tag { position: absolute; bottom: 14px; left: 14px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); padding: var(--s5) var(--s10); font-family: var(--font-en); font-size: var(--fz-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink); z-index: 2; } .photo__caption { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; z-index: 1; text-align: center; padding: 0 var(--s25); } /* tonal variants (visual variety) */ .photo--warm::before { background: linear-gradient(135deg, var(--color-primary-200), var(--color-primary-500)); opacity: .92; } .photo--cool::before { background: linear-gradient(135deg, var(--color-sub-200), var(--color-sub-500)); opacity: .92; } .photo--mint::before { background: linear-gradient(135deg, #B8D4C8, var(--color-accent-mint)); opacity: .95; } .photo--cream::before { background: linear-gradient(135deg, #F0E0CC, var(--color-accent-yellow)); opacity: .8; } .photo--ink::before { background: linear-gradient(135deg, #3A352F, #1A1614); opacity: 1; } .photo--terracotta::before { background: linear-gradient(135deg, var(--color-primary-300), var(--color-primary-700)); opacity: 1; } .photo--paper::before { background: linear-gradient(135deg, rgba(200,85,61,.06), rgba(58,90,108,.06)), repeating-linear-gradient(45deg, transparent 0 18px, rgba(0,0,0,.03) 18px 19px); } /* 実写を入れる時用: gradient と pattern を撤去し、img を全面に object-fit: cover で表示 */ .photo--has-image { background: transparent; } .photo--has-image::before { display: none; } .photo--has-image .photo__caption { display: none; } .photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* photo--focus-* : object-position 制御。縦長／横長の cover 切り抜きで 被写体位置を調整したいときに使う */ .photo--focus-shift-65 .photo__img { object-position: 65% center; } .photo--focus-right .photo__img { object-position: right center; } .photo--focus-top .photo__img { object-position: center top; } .photo--focus-bottom .photo__img { object-position: center bottom; } .photo--ink .photo__caption, .photo--cool .photo__caption, .photo--terracotta .photo__caption, .photo--warm .photo__caption, .photo--mint .photo__caption { color: rgba(255,255,255,.7); } /* ─── Card ────────────────────────────────────────────────────── */ .card { background: var(--color-bg-paper); border: 1px solid var(--color-rule); border-radius: var(--r-lg); overflow: hidden; transition: all .2s ease; display: flex; flex-direction: column; } .card:hover { border-color: var(--color-rule-2); transform: translateY(-2px); box-shadow: var(--shadow-md); } .card--flat { border-radius: 0; } .card--bare { border: 0; background: transparent; } .card--ink { background: var(--color-bg-ink); border-color: #2A2520; color: var(--color-bg); } .card--ink:hover { border-color: #3A3530; } .card__media { position: relative; } .card__body { padding: var(--s30); display: flex; flex-direction: column; gap: var(--s15); flex: 1; } .card__body--lg { padding: var(--s35); gap: var(--s20); } .card__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fz-l); line-height: 1.45; margin: 0; color: inherit; } .card__excerpt { font-size: var(--fz-m); line-height: 1.75; color: var(--color-ink-2); margin: 0; } .card--ink .card__excerpt { color: rgba(250,247,242,.7); } .card__meta { display: flex; align-items: center; gap: var(--s10); font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-3); } .card__cta { margin-top: auto; display: inline-flex; align-items: center; gap: var(--s10); padding-top: var(--s15); border-top: 1px solid var(--color-rule); font-size: var(--fz-s); font-weight: 700; color: var(--color-ink); } .card--ink .card__cta { color: var(--color-bg); border-top-color: #2A2520; } .card__cta-arrow { width: 14px; height: 8px; transition: transform .2s ease; } .card:hover .card__cta-arrow { transform: translateX(3px); } /* ─── Section label (numbered editorial marker) ────────────────── */ .section-label { display: flex; flex-direction: column; gap: var(--s10); } .section-label__row { display: flex; align-items: center; gap: var(--s15); } .section-label__num { font-family: var(--font-en); font-weight: 700; font-size: var(--fz-xs); letter-spacing: .14em; color: var(--color-ink-3); } .section-label__rule { height: 1px; width: 28px; background: var(--color-rule-2); } .section-label__en { font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--color-ink); } .section-label__ja { font-size: var(--fz-s); color: var(--color-ink-3); margin-left: var(--s50); } .section-label--light .section-label__num, .section-label--light .section-label__en { color: var(--color-bg); } .section-label--light .section-label__rule { background: rgba(250,247,242,.4); } .section-label--light .section-label__ja { color: rgba(250,247,242,.7); } /* ─── Logo ─── */ .logo { display: inline-flex; align-items: center; line-height: 1; } .logo__image { display: block; height: 36px; width: auto; } /* ─── Stat block ─────────────────────────────────────────────── */ .stat { display: flex; flex-direction: column; gap: var(--s10); } .stat__label { font-family: var(--font-en); font-size: var(--fz-2xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--color-ink-3); } .stat__value { font-family: var(--font-heading); font-weight: 800; font-size: clamp(48px, 5vw, 80px); line-height: 1; color: var(--color-ink); letter-spacing: -.02em; font-feature-settings: "tnum"; } .stat__unit { font-size: .4em; font-weight: 700; color: var(--color-primary-500); margin-left: var(--s5); } .stat__name { font-size: var(--fz-m); font-weight: 700; color: var(--color-ink-2); } .stat__meta { font-size: var(--fz-s); color: var(--color-ink-3); } .stat--ink .stat__value { color: var(--color-bg); } .stat--ink .stat__label { color: rgba(250,247,242,.5); } .stat--ink .stat__name { color: var(--color-bg); } .stat--ink .stat__meta { color: rgba(250,247,242,.6); } /* ─── Form Inputs ────────────────────────────────────────────── */ .input, .select, .textarea { width: 100%; font-family: inherit; font-size: var(--fz-m); padding: var(--s15) var(--s20); border: 1px solid var(--color-rule-2); border-radius: var(--r-md); background: var(--color-bg-paper); color: var(--color-ink); transition: border-color .15s ease, box-shadow .15s ease; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px var(--color-primary-50); } .field { display: flex; flex-direction: column; gap: var(--s5); } .field__label { font-size: var(--fz-s); font-weight: 700; letter-spacing: .04em; color: var(--color-ink); display: flex; align-items: center; gap: var(--s10); } .field__label-mark { font-family: var(--font-en); font-size: var(--fz-2xs); padding: 2px var(--s5); background: var(--color-primary-50); color: var(--color-primary-600); border-radius: var(--r-sm); letter-spacing: .12em; font-weight: 700; } .field__hint { font-size: var(--fz-xs); color: var(--color-ink-3); } /* ─── Breadcrumb ─── */ .breadcrumb { display: flex; align-items: center; gap: var(--s10); font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 600; letter-spacing: .08em; color: var(--color-ink-3); text-transform: uppercase; } .breadcrumb__item { display: inline-flex; align-items: center; gap: var(--s10); } .breadcrumb__sep { opacity: .4; } .breadcrumb__current { color: var(--color-ink); } /* callout-sage の Element (quote本文と引用元) */ .callout-sage__quote { margin: 0; } .callout-sage__attr { margin: var(--s15) 0 0; font-size: var(--fz-s); color: var(--color-ink-3); } /* 白背景・ルール枠の小カラム callout（course-trainer 特徴箇条書きなど） */ .callout-rule { margin-top: var(--s35); padding: var(--s30) var(--s30); background: #fff; border: 1px solid var(--color-rule); font-size: var(--fz-m); line-height: 1.85; color: var(--color-ink-2); border-radius: var(--r-md); } .callout-rule > p { margin: 0; } /* セクション末尾の補足注記（汎用） */ .subsec-note { margin-top: var(--s30); font-size: var(--fz-s); color: var(--color-ink-3); text-align: center; line-height: 1.8; } /* ───────────────────────────────────── * 受講規約 同意（申込確認画面の送信ガード） * ───────────────────────────────────── */ .entry-agree { max-width: 560px; margin: 0 auto var(--s30); padding: var(--s25) var(--s30); background: var(--color-bg-2); border: 1px solid var(--color-rule-2); border-radius: var(--r-md); text-align: center; } .entry-agree__lead { margin: 0 0 var(--s15); font-size: var(--fz-s); line-height: 1.8; color: var(--color-ink-2); } .entry-agree__link { color: var(--color-primary-600); font-weight: 700; text-decoration: underline; } .entry-agree__check { display: inline-flex; align-items: center; gap: var(--s10); font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); cursor: pointer; } .entry-agree__check input { width: 20px; height: 20px; accent-color: var(--color-primary-500); cursor: pointer; flex-shrink: 0; } /* ───────────────────────────────────── * Form Hint （入力欄補足説明） * ───────────────────────────────────── */ .form-hint { font-size: var(--fz-s); color: var(--color-ink-3); margin: var(--s5) 0 0; line-height: 1.7; } .form-hint--inline { display: inline; font-weight: 500; margin: 0; } .form-hint--error { color: #B71C1C; margin: var(--s5) 0 0; } /* ───────────────────────────────────── * Alert * ───────────────────────────────────── */ .alert { padding: var(--s20) var(--s25); border-radius: var(--r-md); font-size: var(--fz-s); line-height: 1.85; margin-bottom: var(--s30); } .alert--danger { background: #FDECEA; border: 1px solid #EF9A9A; color: #B71C1C; } .alert__title { margin: 0 0 var(--s5); font-weight: 700; } .alert__list { margin: 0; padding-left: var(--s25); } /* ───────────────────────────────────── * Entry Summary（申込確認画面用） * ───────────────────────────────────── */ .entry-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s30); max-width: 720px; margin: 0 auto; } .entry-summary-grid--single { max-width: 640px; margin: 0 auto; } .entry-card { padding: var(--s35) var(--s30); border-radius: var(--r-md); } .entry-card--paper { background: #fff; border: 1px solid var(--color-rule); } .entry-card--theme { background: var(--color-theme-500); color: #fff; text-align: center; } .entry-card__label { font-family: var(--font-en); font-size: var(--fz-xs); letter-spacing: .14em; font-weight: 700; color: var(--color-primary-500); margin: 0 0 var(--s15); } .entry-card--theme .entry-card__label { color: rgba(255, 255, 255, .85); } .entry-card__title { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0; } .entry-card__amount { font-family: var(--font-en); font-size: var(--fz-4xl); font-weight: 900; margin: 0; line-height: 1; } .entry-card__amount-unit { font-size: var(--fz-l); margin-left: var(--s5); } .entry-card__note { font-size: var(--fz-s); color: var(--color-ink-3); margin: var(--s10) 0 0; line-height: 1.7; } .entry-card--theme .entry-card__note { color: rgba(255, 255, 255, .85); } @media (max-width: 767px) { .entry-summary-grid { grid-template-columns: 1fr; } } /* ───────────────────────────────────── * Note variants（margin: 0 のシンプル

） * ───────────────────────────────────── */ .note-tight { margin: 0; } .note-tight--bold { margin: 0; font-weight: 700; color: var(--color-ink); } .note-spaced { margin: var(--s10) 0 0; } .note-spaced--sm { margin: var(--s5) 0 0; } /* ───────────────────────────────────── * Text Utilities * ───────────────────────────────────── */ .text-center { text-align: center; } .text-primary { color: var(--color-primary-500); } .h1-tight { margin-bottom: var(--s20); } /* ───────────────────────────────────── * Contact form variant * ───────────────────────────────────── */ .contact__form--narrow { max-width: 540px; margin: 0 auto; } .contact__form-row--label-narrow { grid-template-columns: 1fr 2fr 2fr; } .contact__form-radios--single-col { grid-template-columns: 1fr; } /* ───────────────────────────────────── * Stub (dev only) - simplified * ───────────────────────────────────── */ .stub-pre { background: var(--color-bg-paper); padding: var(--s30); border-radius: var(--r-md); font-size: var(--fz-s); overflow-x: auto; } /* ───────────────────────────────────── * Flex Buttons (左寄せボタン群) * ───────────────────────────────────── */ .flex-buttons { display: flex; gap: var(--s15); flex-wrap: wrap; } .flex-buttons--mt-xl { margin-top: var(--s40); } /* ───────────────────────────────────── * Theme-color text utility * ───────────────────────────────────── */ .text-theme { color: var(--color-theme-600); } /* ───────────────────────────────────── * Empty-state message (公開サイト用) * ───────────────────────────────────── */ .empty-message { padding: var(--s40) 0; text-align: center; color: var(--color-ink-3); } /* ==== layout.css ==== */ /* =================================================================== Layout — header, hero, sections, footer (BEM) =================================================================== */ /* ─── Char-split animation (下から上へ昇りつつ回転収束) ───────── JS で
区切りごとに行を .char-line で wrap し、各テキストを に分解。`.is-active` 付与時に順次発火する。 overflow は 行単位 (.char-line) でかけることで、複数行の見出しでも 各行の transform を確実に切り取る。 */ [data-split-chars] .char-line { display: block; overflow: hidden; padding-bottom: 0.12em; /* descender / 回転で下にはみ出す部分の許容 */ } [data-split-chars] .char { display: inline-block; transform: translateY(var(--y, 110%)) rotate(var(--rotate, -45deg)); transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1); transition-delay: calc(0.02s * var(--char-index, 0)); will-change: transform; } [data-split-chars].is-active .char { --y: 0; --rotate: 0; } /* ─── Header ─────────────────────────────────────────────────── */ .header { position: sticky; top: 0; z-index: 100; background: rgba(250, 247, 242, .88); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--color-rule); } /* ロゴは drawer (z:49) より上に。これで drawer 展開時もロゴが見える */ .logo { position: relative; z-index: 50; } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s25); padding: var(--s20) var(--s30); max-width: var(--container-wide); margin: 0 auto; } .nav { display: flex; align-items: center; gap: var(--s25); } .nav__item { position: relative; font-size: var(--fz-s); font-weight: 600; color: var(--color-ink); padding: var(--s5) 0; display: inline-flex; align-items: center; gap: var(--s5); white-space: nowrap; } .nav__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--color-ink); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } .nav__item:hover::after { transform: scaleX(1); } .nav__caret { width: 8px; height: 5px; opacity: .6; flex-shrink: 0; transition: transform .2s; } .header__actions { display: flex; align-items: center; gap: var(--s10); } /* ─── Nav dropdown (PC: hover / focus-within で展開) ─── */ .nav__item--has-dropdown { position: relative; cursor: pointer; } .nav__dropdown { position: absolute; top: 100%; left: -16px; background: #fff; border: 1px solid var(--color-rule); border-radius: var(--r-md); padding: var(--s10) 0; min-width: 220px; display: none; box-shadow: var(--shadow-md); z-index: 60; } .nav__item--has-dropdown:hover .nav__dropdown, .nav__item--has-dropdown:focus-within .nav__dropdown { display: block; } .nav__dropdown a { display: block; padding: var(--s10) var(--s25); font-size: var(--fz-s); font-weight: 500; color: var(--color-ink-2); white-space: nowrap; transition: background .15s, color .15s; } .nav__dropdown a:hover { background: var(--color-bg-2); color: var(--color-primary-500); } /* ─── Nav megamenu (4 カテゴリを 2x2 で展開) ─── */ .nav__item--has-megamenu { position: relative; cursor: pointer; } .nav__megamenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--color-rule); border-radius: var(--r-md); padding: var(--s30) var(--s35); box-shadow: var(--shadow-md); z-index: 60; display: none; grid-template-columns: 1fr 1fr; gap: var(--s30) var(--s50); min-width: 600px; width: max-content; } .nav__item--has-megamenu:hover .nav__megamenu, .nav__item--has-megamenu:focus-within .nav__megamenu { display: grid; } .nav__megasection { display: flex; flex-direction: column; gap: var(--s5); } .nav__megasection-num { font-family: var(--font-en); font-weight: 700; font-size: var(--fz-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary-600); } .nav__megasection-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fz-m); color: var(--color-ink); margin: 0 0 var(--s5); } .nav__megasection-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .nav__megasection-list a { display: block; padding: var(--s5) 0; font-size: var(--fz-s); font-weight: 500; color: var(--color-ink-2); transition: color .15s; } .nav__megasection-list a:hover { color: var(--color-primary-500); } /* ─── Hamburger (PC では非表示) ─── */ .header__hamburger { display: none; } /* ─── Mobile drawer 末尾 CTA (PC では非表示、mobile @media で flex 表示) ─── */ .nav__cta { display: none; } /* ─── Hero ───────────────────────────────────────────────────── */ .hero { padding: var(--s50) 0 var(--s50); position: relative; overflow: hidden; min-height: 720px; } /* Full-bleed background photo stage */ .hero__bg-stage { position: absolute; inset: 0; z-index: 0; background: var(--color-primary-100); overflow: hidden; } .hero__bg-stage .hero__photo-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; } .hero__bg-stage .hero__photo-slide.is-active { opacity: 1; } /* Scrim: 30%→70% horizontal gradient on desktop, top→bottom on mobile */ .hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 100deg, var(--color-bg) 0%, rgba(245, 240, 230, 0.92) 30%, rgba(245, 240, 230, 0.55) 50%, rgba(245, 240, 230, 0.15) 70%, rgba(245, 240, 230, 0) 100% ); } .hero__inner { position: relative; z-index: 2; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--s35); display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s50); align-items: stretch; } .hero__lead { display: flex; flex-direction: column; gap: var(--s35); padding-top: var(--s30); } .hero__title { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-letter); font-size: clamp(48px, 5.4vw, 88px); line-height: 1.16; margin: 0; color: var(--color-ink); } .hero__title em { font-style: normal; color: var(--color-sub-400); position: relative; } .hero__title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 6px; background: var(--color-sub-100); z-index: -1; } .hero__sub { font-size: var(--fz-l); line-height: 1.95; color: var(--color-ink-2); max-width: 540px; margin: 0; } .hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--s15); } .hero__meta { display: flex; gap: var(--s35); margin-top: var(--s10); padding-top: var(--s30); border-top: 1px solid var(--color-rule); } .hero__meta-item { display: flex; flex-direction: column; gap: 2px; } .hero__meta-num { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-3xl); line-height: 1; color: var(--color-ink); letter-spacing: -.02em; } .hero__meta-num small { font-size: var(--fz-m); color: var(--color-primary-500); margin-left: 2px; } .hero__meta-lbl { font-size: var(--fz-xs); color: var(--color-ink-3); font-weight: 600; } /* visual column: holds badge + indicators + photo caption (no bg of its own) */ .hero__visual { position: relative; min-height: 580px; } .hero__photo-slide { display: block; } .hero__photo-img { position: absolute; inset: 0; display: block; } .hero__photo-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Real dropped directly inside a hero__photo-slide */ .hero__photo-real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } /* photo meta block in the visual column */ .hero__photo-meta { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s10); z-index: 4; } /* PC: --bg modifier (mobile 専用オーバーレイ) は非表示 */ .hero__photo-meta--bg, .hero__indicators--bg { display: none; } .hero__photo-slide[data-tone="warm"] { background: radial-gradient(ellipse at 70% 60%, rgba(255,255,255,.35), transparent 55%), linear-gradient(135deg, #F4D9B8 0%, #E8B889 45%, #C99670 100%); } .hero__photo-slide[data-tone="leaf"] { background: radial-gradient(ellipse at 70% 55%, rgba(255,255,255,.3), transparent 55%), linear-gradient(135deg, #DCE8C8 0%, #B5C99A 50%, #8FA66F 100%); } .hero__photo-slide[data-tone="cream"] { background: radial-gradient(ellipse at 70% 60%, rgba(255,255,255,.4), transparent 55%), linear-gradient(135deg, #F4ECD8 0%, #E5D4B3 50%, #C9B388 100%); } .hero__photo-tag { background: rgba(255,255,255,.92); color: var(--color-ink); font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 700; letter-spacing: .14em; padding: var(--s10) var(--s15); border-radius: var(--r-pill); align-self: flex-end; } .hero__photo-cap { font-size: var(--fz-s); font-weight: 600; line-height: 1.6; color: var(--color-ink); background: rgba(255,255,255,.88); backdrop-filter: blur(6px); padding: var(--s10) var(--s15); border-radius: var(--r-md); max-width: 260px; text-align: right; } /* placeholder figure: silhouette of mom + baby — anchored to right side of full-bleed bg */ .hero__photo-figure { position: absolute; right: 6%; bottom: 0; width: 38%; height: 92%; z-index: 2; pointer-events: none; } .hero__figure-circle { position: absolute; right: 10%; top: 12%; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.35); filter: blur(8px); } .hero__figure-circle--alt { background: rgba(126,156,102,.4); } .hero__figure-circle--cream { background: rgba(232,154,74,.3); } .hero__figure-mom { position: absolute; right: 0; bottom: 0; width: 70%; height: 80%; background: linear-gradient(180deg, rgba(80,60,45,.5), rgba(50,35,25,.7)); border-radius: 50% 45% 8% 8% / 60% 55% 8% 8%; } .hero__figure-mom--alt { background: linear-gradient(180deg, rgba(82,106,63,.6), rgba(58,75,45,.8)); } .hero__figure-mom--cream { background: linear-gradient(180deg, rgba(143,82,38,.55), rgba(95,54,13,.8)); } .hero__figure-baby { position: absolute; right: 22%; bottom: 35%; width: 32%; height: 38%; background: linear-gradient(180deg, rgba(255,240,225,.95), rgba(245,215,185,.9)); border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; box-shadow: 0 4px 20px rgba(0,0,0,.15); } .hero__figure-baby--alt { background: linear-gradient(180deg, rgba(255,245,230,.95), rgba(248,222,190,.9)); } .hero__figure-baby--cream { background: linear-gradient(180deg, rgba(255,238,215,.95), rgba(244,210,170,.9)); } /* indicators — anchored to hero bottom-left over the bg */ .hero__indicators { position: absolute; left: 0; bottom: -32px; display: flex; gap: var(--s10); z-index: 5; } .hero__indicator { width: 28px; height: 4px; border-radius: 2px; border: 0; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; transition: background .2s ease, width .3s ease; } .hero__indicator.is-active { background: var(--color-theme-400); width: 44px; } /* circular badge */ .hero__badge { position: absolute; right: 0; bottom: 0; width: 200px; height: 200px; z-index: 6; filter: drop-shadow(0 12px 28px rgba(0,0,0,.22)); cursor: pointer; } .hero__badge-ring { position: absolute; inset: 0; animation: hero-badge-spin 28s linear infinite; } .hero__badge-svg { width: 100%; height: 100%; } .hero__badge-text { font-family: var(--font-en); font-size: var(--fz-m); font-weight: 700; letter-spacing: .14em; fill: var(--color-primary-500); text-transform: uppercase; } @keyframes hero-badge-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hero__badge-inner { position: absolute; inset: 18px; border-radius: 50%; background: var(--color-sub-400); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s5); text-align: center; padding: var(--s20); transition: background .6s ease; } .hero__badge-inner[data-tone="green"] { background: var(--color-primary-500); } .hero__badge-inner[data-tone="ink"] { background: var(--color-ink); } .hero__badge-en { font-family: var(--font-en); font-size: var(--fz-2xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .85; } .hero__badge-num { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-3xl); line-height: 1; letter-spacing: -.02em; } .hero__badge-num small { font-size: var(--fz-m); margin-left: 2px; opacity: .9; } .hero__badge-cap { font-size: var(--fz-2xs); font-weight: 600; line-height: 1.5; opacity: .92; } /* hero layout variants */ .hero--centered .hero__inner { grid-template-columns: 1fr; text-align: center; gap: var(--s40); } .hero--centered .hero__lead { align-items: center; padding-top: 0; } .hero--centered .hero__sub { text-align: center; } .hero--centered .hero__cta-row { justify-content: center; } .hero--centered .hero__visual { min-height: 480px; } .hero--centered .hero__meta { justify-content: center; } .hero--magazine .hero__inner { grid-template-columns: 1fr 1.4fr; } .hero--magazine .hero__visual { min-height: 620px; } /* ─── Hero responsive ─── */ @media (max-width: 900px) { .hero { min-height: 0; padding: 0 0 var(--s50); overflow: hidden; } /* 背景写真ステージ: 画面上部に固定高（写真が上、その下半分にテキストが被る） */ .hero__bg-stage { position: relative; inset: auto; height: 56vh; min-height: 360px; max-height: 520px; } .hero__photo-real { object-position: center 25%; } /* scrim は bg-stage の内側に移動済 (inset:0 で bg-stage の 56vh を覆う) グラデーション: 写真の下半分で滑らかに白へフェード */ .hero__scrim { background: linear-gradient( 180deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0.92) 85%, var(--color-bg) 100% ); } /* visual のオーバーレイ要素は写真上半分に集約（テキスト被りエリアを避ける） */ .hero__visual { position: absolute; top: 0; left: 0; right: 0; height: 56vh; min-height: 360px; max-height: 520px; pointer-events: none; z-index: 5; } .hero__visual > * { pointer-events: auto; } /* mobile では visual 内のオリジナル photo-meta / indicators を非表示 代わりに bg-stage 内の "--bg" modifier 版を写真エリア基準で配置・表示 */ .hero__visual .hero__photo-meta, .hero__visual .hero__indicators { display: none; } .hero__photo-meta--bg { display: flex; position: absolute; top: 16px; left: 16px; right: auto; bottom: auto; flex-direction: column; align-items: flex-start; gap: var(--s10); z-index: 4; } .hero__photo-meta--bg .hero__photo-tag { align-self: flex-start; } .hero__photo-meta--bg .hero__photo-cap { max-width: 220px; text-align: left; } .hero__indicators--bg { display: flex; position: absolute; top: 16px; right: 16px; bottom: auto; left: auto; transform: none; gap: var(--s10); z-index: 4; } /* badge: 文字が崩れない最低サイズ (130px) を確保 */ .hero__badge { width: 130px; height: 130px; right: 16px; top: 16px; bottom: auto; } .hero__badge-num { font-size: var(--fz-xl); } .hero__badge-num small { font-size: var(--fz-xs); } .hero__badge-en { font-size: var(--fz-2xs); letter-spacing: .14em; } .hero__badge-cap { font-size: var(--fz-2xs); line-height: 1.4; } /* インナー: 写真の下半分に重ねる。relative + z-index 6 で scrim/写真の上に */ .hero__inner { position: relative; z-index: 6; grid-template-columns: 1fr; gap: var(--s30); padding: 0 var(--s30); margin-top: -22vh; } .hero__lead { padding-top: 0; gap: var(--s25); } } /* ─── Marquee strip (running EN labels) ─── */ .marquee { border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); padding: var(--s20) 0; overflow: hidden; } .marquee__track { display: flex; gap: var(--s50); animation: scroll-left 60s linear infinite; width: max-content; } .marquee__item { font-family: var(--font-en); font-size: var(--fz-s); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--color-ink); display: inline-flex; align-items: center; gap: var(--s15); } .marquee__item::after { content: "·"; color: var(--color-ink-4); font-size: var(--fz-s); } @keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ─── Section base ─── */ .section { padding: var(--s60) 0; } .section--tight { padding: var(--s60) 0; } .section--ink { background: var(--color-primary-700); color: #fff; } .section--paper { background: var(--color-bg-paper); } .section--cream { background: var(--color-bg-2); } .section--sage { background: var(--color-bg-sage); } .section--white { background: #fff; } .section__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s50); align-items: end; margin-bottom: var(--s50); } .section__head-inner { display: flex; flex-direction: column; gap: var(--s25); } .section__head-title { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-letter); font-size: clamp(32px, 3vw, 48px); line-height: 1.22; margin: 0; color: inherit; } .section--ink .section__head-title { color: #fff; } .section__head-aside { color: var(--color-ink-2); font-size: var(--fz-l); line-height: 1.85; } .section--ink .section__head-aside { color: rgba(255,255,255,.78); } /* ─── Footer ─── */ .footer { background: var(--color-theme-600); color: #fff; padding: var(--s60) 0 var(--s35); } /* ─── 現在のスポンサー企業バナー（全ページ共通・フッター上部の白帯） ─── */ .footer-sponsors { background: #fff; margin-top: -96px; /* .footer の padding-top: var(--s60) を相殺し、白帯を上端に */ margin-bottom: var(--s50); padding: var(--s35) 0; } .footer-sponsors__inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--s35); display: flex; flex-direction: column; gap: var(--s20); } .footer-sponsors__label { font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-3); } .footer-sponsors__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s20) var(--s25); list-style: none; padding: 0; margin: 0; } .footer-sponsors__item img { display: block; width: 220px; height: 80px; transition: opacity .15s ease; } .footer-sponsors__item a:hover img { opacity: .75; } @media (max-width: 767px) { .footer-sponsors { margin-bottom: var(--s40); padding: var(--s30) 0; } .footer-sponsors__inner { padding: 0 var(--s25); } /* 狭幅でも 1 列に落とさず最低 2 列を維持。 ただし 1 枠が画像ネイティブ幅(220px)を超えないようにし、拡大によるぼやけを防ぐ。 */ .footer-sponsors__item { flex: 1 1 calc(50% - 10px); max-width: 220px; } .footer-sponsors__item img { width: 100%; height: auto; aspect-ratio: 220 / 80; } } .footer__inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--s35); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s50); } .footer__col { display: flex; flex-direction: column; gap: var(--s20); } .footer__head { font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: var(--s5); } .footer__head--sub { margin-top: var(--s30); } .footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s10); } .footer__link { font-size: var(--fz-m); color: rgba(255,255,255,.88); display: inline-flex; align-items: center; gap: var(--s10); transition: color .15s ease; } .footer__link:hover { color: var(--color-sub-300); } .footer__lead-text { font-size: var(--fz-m); line-height: 1.85; color: rgba(255,255,255,.78); margin: 0; } .footer__cta-row { display: flex; gap: var(--s15); justify-content: center; flex-wrap: wrap; max-width: var(--container-wide); margin: var(--s40) auto 0; padding: var(--s35) var(--s35) 0; border-top: 1px solid rgba(255,255,255,.15); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; font-size: var(--fz-s); color: rgba(255,255,255,.6); max-width: var(--container-wide); margin: var(--s35) auto 0; padding: var(--s30) var(--s35) 0; border-top: 1px solid rgba(255,255,255,.18); } /* ─── Mobile (≤ 768px): hamburger drawer / drawer-open dropdown ─── */ @media (max-width: 768px) { /* backdrop-filter は containing block を生成し、子要素の position: fixed が viewport ではなく .header に閉じ込められる。mobile では解除する */ .header { backdrop-filter: none; } .header__inner { padding: var(--s15) var(--s25); gap: var(--s15); padding-right: var(--s50); } .header__actions { display: none; } /* ハンバーガー本体: ヘッダー上下中央・最上位 (drawer 49・logo 50 より上) */ .header__hamburger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s5); width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0; position: fixed; top: 8px; right: 8px; z-index: 110; } .header__hamburger-bar { width: 18px; height: 2px; background: var(--color-ink); border-radius: 2px; } .header__hamburger-bar:nth-child(2) { /* 中央バーは閉じる時に少し遅らせて出現（線が水平に揃ってから） */ transition: opacity .25s .25s; } /* 2 段階アニメーション: 0%→50% で水平に揃え、50%→100% で回転 (open/close) */ @keyframes hamburger-open-1 { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(7px) rotate(0); } 100% { transform: translateY(7px) rotate(45deg); } } @keyframes hamburger-open-3 { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(0); } 100% { transform: translateY(-7px) rotate(-45deg); } } @keyframes hamburger-close-1 { 0% { transform: translateY(7px) rotate(45deg); } 50% { transform: translateY(7px) rotate(0); } 100% { transform: translateY(0) rotate(0); } } @keyframes hamburger-close-3 { 0% { transform: translateY(-7px) rotate(-45deg); } 50% { transform: translateY(-7px) rotate(0); } 100% { transform: translateY(0) rotate(0); } } /* 一度でも toggle した後の close 状態（is-was-toggled は JS が初回クリックで付与）*/ body.is-was-toggled .header__hamburger-bar:nth-child(1) { animation: hamburger-close-1 .5s forwards; } body.is-was-toggled .header__hamburger-bar:nth-child(3) { animation: hamburger-close-3 .5s forwards; } /* 開いている時 */ body.is-nav-open .header__hamburger-bar:nth-child(1) { animation: hamburger-open-1 .5s forwards; } body.is-nav-open .header__hamburger-bar:nth-child(2) { opacity: 0; transition: opacity .15s; } body.is-nav-open .header__hamburger-bar:nth-child(3) { animation: hamburger-open-3 .5s forwards; } /* ナビ全体: ヘッダーの下から開始 (header z:100 / logo z:50 が drawer の上に常時見える) */ .nav { display: none; position: fixed; top: 60px; right: 0; bottom: 0; left: 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s30) var(--s30) var(--s35); overflow-y: auto; z-index: 49; } body.is-nav-open .nav { display: flex; } body.is-nav-open { overflow: hidden; } /* ナビ項目: 縦並び・全幅 */ .nav__item { width: 100%; padding: var(--s20) var(--s5); border-bottom: 1px solid var(--color-rule); font-size: var(--fz-l); justify-content: space-between; flex-direction: row; } .nav__item::after { display: none; } /* dropdown / megamenu はモバイルでは常時展開（アコーディオンしない） */ .nav__item--has-dropdown, .nav__item--has-megamenu { flex-direction: column; align-items: stretch; cursor: default; } .nav__item--has-dropdown > span, .nav__item--has-megamenu > span { display: flex; align-items: center; width: 100%; font-weight: 700; } .nav__caret { display: none; } /* mobile では :hover でも 2 列 grid を保つ（PC の hover rule を打ち消す） */ .nav__dropdown, .nav__item--has-dropdown:hover .nav__dropdown, .nav__item--has-dropdown:focus-within .nav__dropdown { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s20); position: static; box-shadow: none; border: 0; padding: var(--s10) 0 0; min-width: 0; } .nav__dropdown a { padding: var(--s15) 0; border-bottom: 1px solid var(--color-rule); font-size: var(--fz-m); } .nav__megamenu { display: grid; position: static; transform: none; background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: var(--s15) 0 0; min-width: 0; width: 100%; grid-template-columns: 1fr 1fr; gap: var(--s25) var(--s15); } .nav__megasection { padding: 0; } .nav__megasection-title { font-size: var(--fz-s); } .nav__megasection-list a { padding: var(--s5) 0; font-size: var(--fz-s); } /* drawer 末尾 CTA: 2 列横並び */ .nav__cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s10); margin-top: var(--s35); padding: var(--s30) 0 0; border-top: 1px solid var(--color-rule); } .nav__cta .button { width: 100%; justify-content: center; } /* footer: モバイルで 2 列に (ナビと同じ密度感) */ .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--s35) var(--s20); padding: 0 var(--s30); } .footer__bottom { padding: var(--s30) var(--s30) 0; flex-direction: column; gap: var(--s15); align-items: flex-start; } .footer__cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s10); padding: var(--s30); } .footer__cta-row .button { width: 100%; justify-content: center; } } /* ==== sections.css ==== */ /* =================================================================== Top Page sections (BEM) .entries, .mission, .stats, .akachan, .programs, .cases, .mama-message, .schedule, .final-cta =================================================================== */ /* ─── Section 02 — 4 entries ────────────────────────────────── */ .entries__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s20); } .entry { display: flex; flex-direction: column; background: var(--color-bg-paper); border: 1px solid var(--color-rule); border-radius: var(--r-lg); overflow: hidden; transition: all .25s ease; position: relative; } .entry:hover { transform: translateY(-4px); border-color: var(--color-rule-2); box-shadow: var(--shadow-lg); } .entry__media { aspect-ratio: 4/3; } .entry__body { padding: var(--s30); display: flex; flex-direction: column; gap: var(--s15); flex: 1; } .entry__num { font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 700; letter-spacing: .18em; color: var(--color-ink-3); } .entry__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-l); line-height: 1.4; color: var(--color-ink); margin: 0; } .entry__title small { display: block; font-size: var(--fz-s); font-weight: 600; color: var(--color-ink-3); letter-spacing: .14em; text-transform: uppercase; font-family: var(--font-en); margin-bottom: var(--s5); } .entry__excerpt { font-size: var(--fz-s); line-height: 1.85; color: var(--color-ink-2); margin: 0; flex: 1; } .entry__cta { display: inline-flex; align-items: center; gap: var(--s10); font-size: var(--fz-s); font-weight: 700; color: var(--color-primary-500); margin-top: var(--s10); padding-top: var(--s20); border-top: 1px solid var(--color-rule); } .entry__cta-arrow { width: 14px; height: 8px; transition: transform .2s ease; } .entry:hover .entry__cta-arrow { transform: translateX(3px); } /* alt layout: horizontal rows */ .entries--rows .entries__grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--color-rule); } .entries--rows .entry { flex-direction: row; border: 0; border-bottom: 1px solid var(--color-rule); border-radius: 0; align-items: stretch; } .entries--rows .entry:hover { transform: none; box-shadow: none; background: var(--color-bg-2); } .entries--rows .entry__media { aspect-ratio: auto; width: 280px; flex-shrink: 0; min-height: 200px; } .entries--rows .entry__body { flex-direction: row; align-items: center; gap: var(--s40); padding: var(--s35) var(--s40); flex: 1; } .entries--rows .entry__head { flex: 0 0 240px; display: flex; flex-direction: column; gap: var(--s10); } .entries--rows .entry__excerpt { flex: 1; } /* alt layout: split 2x2 with deeper photos */ .entries--split .entries__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s20); } .entries--split .entry { flex-direction: row; min-height: 240px; } .entries--split .entry__media { width: 45%; flex-shrink: 0; aspect-ratio: auto; } .entries--split .entry__body { padding: var(--s30); } /* ─── Section 03 — Mission ───────────────────────────────── */ .mission { background: var(--color-bg-paper); padding: var(--s60) 0; } .mission__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--s35); display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s50); align-items: start; } .mission__title { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-letter); font-size: clamp(36px, 3.4vw, 56px); line-height: 1.25; margin: var(--s30) 0 0; } .mission__quote { font-family: var(--font-sans-jp); font-size: var(--fz-xl); line-height: 1.9; color: var(--color-ink); margin: 0 0 var(--s35); border-left: 3px solid var(--color-primary-500); padding-left: var(--s30); } .mission__body { font-size: var(--fz-l); line-height: 2.05; color: var(--color-ink-2); margin: 0 0 var(--s30); } .mission__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s20) var(--s35); padding: var(--s30) 0; border-top: 1px solid var(--color-rule); margin-top: var(--s35); list-style: none; } .mission__list li { display: flex; gap: var(--s15); font-family: var(--font-sans-jp); font-size: var(--fz-l); color: var(--color-ink); } .mission__list-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary-500); margin-top: var(--s10); flex-shrink: 0; } /* ─── Section 04 — Stats ─────────────────────────────────── */ .stats { background: var(--color-theme-50); color: var(--color-ink); padding: var(--s60) 0; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); } .stats__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s50); align-items: end; max-width: var(--container); margin: 0 auto var(--s50); padding: 0 var(--s35); } .stats__title { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-letter); font-size: clamp(36px, 3.4vw, 56px); line-height: 1.25; color: var(--color-ink); margin: 0; } .stats__sub { font-size: var(--fz-l); line-height: 1.85; color: var(--color-ink-2); margin: 0; } .stats__grid { max-width: var(--container); margin: 0 auto; padding: 0 var(--s35); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s35); } .stats__item { border-top: 1px solid var(--color-rule); padding: var(--s35) 0 0; display: flex; flex-direction: column; gap: var(--s20); } .stats__item-label { display: flex; align-items: baseline; gap: var(--s15); font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--color-theme-600); } .stats__item-num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(56px, 6vw, 96px); line-height: .95; letter-spacing: -.025em; color: var(--color-ink); font-feature-settings: "tnum"; } .stats__item-num small { font-size: .35em; font-weight: 700; color: var(--color-primary-500); margin-left: var(--s5); } .stats__item-name { font-size: var(--fz-m); font-weight: 700; color: var(--color-ink); margin: 0; } .stats__item-meta { font-size: var(--fz-s); color: var(--color-ink-3); margin: 0; } .stats__footer { max-width: var(--container); margin: var(--s50) auto 0; padding: 0 var(--s35); font-size: var(--fz-m); line-height: 1.85; color: var(--color-ink-2); max-width: 720px; } /* ─── Section 05 — Akachan-sensei ───────────────────────── */ .akachan { background: #fff; padding: var(--s60) 0; } .akachan__inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--s35); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s50); align-items: center; } .akachan__visual { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s15); height: 600px; } .akachan__photo--1 { grid-row: 1 / 3; grid-column: 1; } .akachan__photo--2 { grid-row: 1; grid-column: 2; } .akachan__photo--3 { grid-row: 2; grid-column: 2; } .akachan__title { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-letter); font-size: clamp(32px, 3vw, 48px); line-height: 1.3; margin: var(--s20) 0 var(--s35); } .akachan__body { font-size: var(--fz-l); line-height: 2; color: var(--color-ink-2); margin: 0 0 var(--s25); } .akachan__list { list-style: none; padding: 0; margin: var(--s35) 0; display: flex; flex-direction: column; } .akachan__list-item { display: grid; grid-template-columns: 80px 1fr; gap: var(--s30); padding: var(--s20) 0; border-top: 1px solid var(--color-rule); align-items: center; } .akachan__list-item:last-child { border-bottom: 1px solid var(--color-rule); } .akachan__list-tag { font-family: var(--font-en); font-size: var(--fz-2xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--color-primary-500); } .akachan__list-text { font-size: var(--fz-m); color: var(--color-ink); line-height: 1.7; } /* ─── Section 06 — Programs ─────────────────────────────── */ .programs { background: var(--color-bg-2); padding: var(--s60) 0; } .programs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s20); } .program { background: var(--color-bg-paper); border: 1px solid var(--color-rule); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: all .25s ease; } .program:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-rule-2); } .program__media { aspect-ratio: 1/1; } .program__body { padding: var(--s30); display: flex; flex-direction: column; gap: var(--s15); flex: 1; } .program__cat { font-family: var(--font-en); font-size: var(--fz-2xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary-500); } .program__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-l); line-height: 1.5; margin: 0; color: var(--color-ink); } .program__excerpt { font-size: var(--fz-s); line-height: 1.85; color: var(--color-ink-2); margin: 0; flex: 1; } .program__more { font-size: var(--fz-xs); font-weight: 700; color: var(--color-ink); display: inline-flex; align-items: center; gap: var(--s5); padding-top: var(--s15); border-top: 1px solid var(--color-rule); } /* ─── Section 07 — Cases ─────────────────────────────────── */ .cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s30); } .case-card { background: var(--color-bg-paper); border: 1px solid var(--color-rule); display: flex; flex-direction: column; transition: all .25s ease; } .case-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .case-card__media { aspect-ratio: 4/3; } .case-card__body { padding: var(--s30); display: flex; flex-direction: column; gap: var(--s15); flex: 1; } .case-card__meta { display: flex; align-items: center; gap: var(--s10); font-size: var(--fz-xs); color: var(--color-ink-3); font-family: var(--font-en); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .case-card__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-l); line-height: 1.45; margin: 0; } .case-card__excerpt { font-size: var(--fz-s); line-height: 1.85; color: var(--color-ink-2); margin: 0; flex: 1; } .case-card__location { font-size: var(--fz-xs); color: var(--color-ink-3); padding-top: var(--s15); border-top: 1px solid var(--color-rule); display: flex; justify-content: space-between; align-items: center; } .case-card__location-en { font-family: var(--font-en); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; } /* feature row (large case + smaller) */ .cases__feature { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s35); margin-bottom: var(--s35); } .cases__feature .case-card--feature .case-card__media { aspect-ratio: 16/10; } .cases__feature .case-card--feature .case-card__body { padding: var(--s40); gap: var(--s20); } .cases__feature .case-card--feature .case-card__title { font-size: var(--fz-2xl); line-height: 1.35; } .cases__feature-side { display: flex; flex-direction: column; gap: var(--s30); } .cases__feature-side .case-card { flex-direction: row; } .cases__feature-side .case-card__media { aspect-ratio: auto; width: 40%; flex-shrink: 0; } /* ─── Section 08 — Mama message ─────────────────────────── */ .mama-msg { background: var(--color-primary-50); color: var(--color-ink); padding: var(--s60) 0; position: relative; overflow: hidden; } .mama-msg__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--s35); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s50); align-items: center; position: relative; z-index: 2; } .mama-msg__title { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-letter); font-size: clamp(36px, 3.6vw, 60px); line-height: 1.3; margin: var(--s30) 0 var(--s35); color: var(--color-ink); } .mama-msg__body { font-size: var(--fz-l); line-height: 2.05; color: var(--color-ink-2); margin: 0 0 var(--s20); } .mama-msg__photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s15); height: 480px; } .mama-msg__photo { height: 100%; } /* photo--ink (now: warm sand for white-bg compatibility) */ .mama-msg .button--ink { background: var(--color-primary-600); color: #fff; } .mama-msg .button--ink:hover { background: var(--color-primary-700); } .mama-msg .eyebrow { color: var(--color-primary-700); } .mama-msg .eyebrow::before { background: var(--color-primary-700); } /* ─── Section 09 — Schedule ─────────────────────────────── */ .schedule { background: #fff; padding: var(--s60) 0; } .schedule__filters { display: flex; gap: var(--s10); flex-wrap: wrap; margin-bottom: var(--s20); } /* ─── 都道府県セレクト (home/schedule) ───────────────────── */ .schedule__prefecture-wrap { display: flex; align-items: center; gap: var(--s15); margin-bottom: var(--s35); padding-bottom: var(--s30); border-bottom: 1px solid var(--color-rule); flex-wrap: wrap; } .schedule__prefecture-label { font-size: var(--fz-s); font-weight: 600; color: var(--color-ink-2); letter-spacing: .02em; } .schedule__prefecture-select { appearance: none; -webkit-appearance: none; padding: var(--s10) var(--s35) var(--s10) var(--s15); border: 1.5px solid var(--color-rule); border-radius: var(--r-md); background: #fff url("data:image/svg+xml;utf8,") no-repeat right 12px center; font-family: inherit; font-size: var(--fz-s); color: var(--color-ink); cursor: pointer; min-width: 200px; transition: border-color .15s, box-shadow .15s; } .schedule__prefecture-select:hover { border-color: var(--color-theme-400); } .schedule__prefecture-select:focus { outline: none; border-color: var(--color-theme-500); box-shadow: 0 0 0 3px var(--color-theme-100, rgba(201, 82, 48, .12)); } @media (max-width: 640px) { .schedule__prefecture-wrap { flex-direction: column; align-items: stretch; gap: var(--s5); } .schedule__prefecture-select { width: 100%; min-width: 0; } } .schedule__filter { padding: var(--s10) var(--s20); border: 1px solid var(--color-rule-2); border-radius: var(--r-pill); font-size: var(--fz-s); font-weight: 600; background: transparent; color: var(--color-ink-2); cursor: pointer; transition: all .15s ease; } .schedule__filter:hover { color: var(--color-ink); border-color: var(--color-ink); } .schedule__filter.is-active { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); } .schedule__list { display: flex; flex-direction: column; } .schedule-row { display: grid; grid-template-columns: 140px 100px 1fr 140px 140px 120px; gap: var(--s30); padding: var(--s30) 0; border-top: 1px solid var(--color-rule); align-items: center; transition: background .15s ease; } .schedule-row:hover { background: var(--color-bg-2); padding-left: var(--s20); padding-right: var(--s20); } .schedule-row:last-child { border-bottom: 1px solid var(--color-rule); } .schedule-row__date { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-xl); line-height: 1; color: var(--color-ink); } .schedule-row__date small { display: block; font-size: var(--fz-xs); color: var(--color-ink-3); margin-top: var(--s5); font-family: var(--font-en); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; } .schedule-row__time { font-family: var(--font-en); font-size: var(--fz-s); font-weight: 600; color: var(--color-ink-2); letter-spacing: .04em; } .schedule-row__title { font-weight: 700; font-size: var(--fz-l); line-height: 1.5; color: var(--color-ink); } .schedule-row__title small { display: block; font-size: var(--fz-xs); color: var(--color-ink-3); font-weight: 500; margin-top: var(--s5); } .schedule-row__area, .schedule-row__cat { font-size: var(--fz-s); color: var(--color-ink-2); } .schedule-row__area-en { font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--color-ink-3); display: block; margin-bottom: 2px; } .schedule-row__status { display: flex; justify-content: flex-end; } .status-dot { display: inline-flex; align-items: center; gap: var(--s10); font-size: var(--fz-s); font-weight: 700; padding: var(--s5) var(--s15); border-radius: var(--r-pill); } .status-dot--open { background: #E8F0E5; color: #2D5A3D; } .status-dot--soon { background: var(--color-primary-50); color: var(--color-primary-600); } .status-dot--closed { background: var(--color-rule); color: var(--color-ink-3); } .status-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ─── Section 10 — Final CTA ─────────────────────────────── */ .final-cta { background: var(--color-bg-2); color: var(--color-ink); padding: var(--s70) 0; position: relative; overflow: hidden; border-top: 1px solid var(--color-rule); } .final-cta__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--s35); display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s50); align-items: center; position: relative; z-index: 2; } .final-cta__title { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-letter); font-size: clamp(40px, 4vw, 72px); line-height: 1.18; margin: var(--s30) 0 0; color: var(--color-ink); } .final-cta__body { font-size: var(--fz-l); line-height: 1.95; color: var(--color-ink-2); margin: var(--s35) 0 var(--s40); } .final-cta__buttons { display: flex; flex-direction: column; gap: var(--s15); } .final-cta__stats { margin-top: var(--s20); font-family: var(--font-en); font-size: var(--fz-s); letter-spacing: .14em; color: var(--color-ink-3); } .final-cta__buttons .button { padding: var(--s25) var(--s30); justify-content: space-between; font-size: var(--fz-l); } .final-cta__buttons .button--primary { background: var(--color-primary-500); color: #fff; } .final-cta__buttons .button--outline-light { background: #fff; color: var(--color-ink); border-color: var(--color-rule); } .final-cta__buttons .button--outline-light:hover { border-color: var(--color-primary-500); background: var(--color-primary-50); } .final-cta__bg-num { position: absolute; font-family: var(--font-en); font-weight: 800; font-size: 720px; line-height: .8; color: rgba(126,156,102,.08); top: -120px; right: -80px; pointer-events: none; z-index: 0; } /* ─── Design System (in-page) ─── */ .ds { background: var(--color-bg-paper); padding: var(--s60) 0; border-top: 1px solid var(--color-rule); } .ds__container { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--s35); } .ds__head { margin-bottom: var(--s50); max-width: 720px; } .ds__title { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-letter); font-size: clamp(36px, 3.6vw, 60px); line-height: 1.18; margin: var(--s30) 0 var(--s30); } .ds__sub { font-size: var(--fz-l); line-height: 1.85; color: var(--color-ink-2); margin: 0; } .ds-block { margin-bottom: var(--s60); padding-bottom: var(--s60); border-bottom: 1px solid var(--color-rule); } .ds-block:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .ds-block__head { display: grid; grid-template-columns: 280px 1fr; gap: var(--s50); margin-bottom: var(--s40); align-items: end; } .ds-block__head-meta { display: flex; flex-direction: column; gap: var(--s20); } .ds-block__title { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-letter); font-size: var(--fz-2xl); line-height: 1.2; margin: 0; } .ds-block__desc { font-size: var(--fz-m); line-height: 1.85; color: var(--color-ink-2); max-width: 520px; margin: 0; } /* swatch grid */ .swatches { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0; border: 1px solid var(--color-rule); } .swatches__row { display: contents; } .swatch { aspect-ratio: 1/1; padding: var(--s15); display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-en); border-right: 1px solid rgba(0,0,0,.08); } .swatch:last-child { border-right: 0; } .swatch__name { font-size: var(--fz-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .swatch__hex { font-size: var(--fz-2xs); font-weight: 600; opacity: .8; } .swatch--light { color: var(--color-ink); } .swatch--dark { color: #fff; } .swatches-row { display: grid; grid-template-columns: 280px 1fr; gap: var(--s35); margin-bottom: var(--s30); align-items: center; } .swatches-row__label { display: flex; flex-direction: column; gap: var(--s5); } .swatches-row__name { font-weight: 700; font-size: var(--fz-m); } .swatches-row__role { font-size: var(--fz-s); color: var(--color-ink-3); } /* type spec */ .type-row { display: grid; grid-template-columns: 200px 1fr 200px; gap: var(--s35); padding: var(--s35) 0; border-top: 1px solid var(--color-rule); align-items: baseline; } .type-row:last-child { border-bottom: 1px solid var(--color-rule); } .type-row__name { display: flex; flex-direction: column; gap: var(--s5); } .type-row__name strong { font-size: var(--fz-m); font-weight: 700; } .type-row__name span { font-size: var(--fz-xs); color: var(--color-ink-3); font-family: var(--font-en); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; } .type-row__sample { color: var(--color-ink); } .type-row__spec { font-family: var(--font-mono); font-size: var(--fz-xs); color: var(--color-ink-3); text-align: right; line-height: 1.7; } /* spacing scale */ .spacing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s20); } .spacing-cell { display: flex; flex-direction: column; gap: var(--s10); } .spacing-cell__bar { background: var(--color-primary-100); height: 32px; } .spacing-cell__name { font-family: var(--font-mono); font-size: var(--fz-xs); color: var(--color-ink-2); } /* button gallery */ .btn-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s20); padding: var(--s35); background: var(--color-bg-2); border-radius: var(--r-md); } .btn-cell { display: flex; flex-direction: column; gap: var(--s10); align-items: flex-start; } .btn-cell__name { font-family: var(--font-mono); font-size: var(--fz-2xs); color: var(--color-ink-3); letter-spacing: .04em; } /* tag gallery */ .tag-gallery { display: flex; flex-wrap: wrap; gap: var(--s15); padding: var(--s30) 0; } /* component preview frames */ .preview { padding: var(--s35); background: var(--color-bg-2); border: 1px dashed var(--color-rule-2); } .preview--paper { background: var(--color-bg-paper); border-color: var(--color-rule); } /* ─── Section — Needs (Find by Need: 課題で探す) ───────────── */ .needs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s20); margin-bottom: var(--s40); } .need-card { display: flex; align-items: center; gap: var(--s25); padding: var(--s30) var(--s30); background: #fff; border: 1px solid var(--color-rule); border-radius: var(--r-lg); text-decoration: none; color: var(--color-ink); transition: transform .2s ease, border-color .15s ease, box-shadow .15s ease; } .need-card:hover { transform: translateY(-2px); border-color: var(--color-theme-300); box-shadow: var(--shadow-md); } .need-card__num { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 var(--s15); border-radius: 22px; background: var(--color-theme-50); color: var(--color-theme-600); font-family: var(--font-en); font-weight: 700; font-size: var(--fz-s); letter-spacing: .05em; flex-shrink: 0; font-feature-settings: "tnum"; } .need-card__body { flex: 1; display: flex; flex-direction: column; gap: var(--s5); } .need-card__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fz-l); line-height: 1.5; color: var(--color-ink); margin: 0; } .need-card__sub { font-size: var(--fz-s); color: var(--color-ink-3); margin: 0; letter-spacing: .05em; } .need-card__arrow { font-size: var(--fz-xl); color: var(--color-theme-500); flex-shrink: 0; } /* ─── Section — Projects mini（その他の取り組み・2枚カード） ─── */ .projects-mini__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s30); margin-bottom: var(--s35); } @media (max-width: 768px) { .projects-mini__grid { grid-template-columns: 1fr; } } .project-card { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; background: #fff; border: 1px solid var(--color-rule); border-radius: var(--r-lg); text-decoration: none; color: var(--color-ink); overflow: hidden; transition: transform .2s ease, border-color .15s ease, box-shadow .15s ease; } .project-card:hover { transform: translateY(-2px); border-color: var(--color-theme-300); box-shadow: var(--shadow-md); } .project-card__thumb { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg-paper); } .project-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .project-card:hover .project-card__thumb img { transform: scale(1.04); } .project-card__body-wrap { padding: var(--s30) var(--s35) var(--s35); display: flex; flex-direction: column; gap: var(--s5); position: relative; } .project-card__eyebrow { font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--color-theme-600); margin-bottom: var(--s5); } .project-card__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fz-xl); line-height: 1.4; color: var(--color-ink); margin: 0; } .project-card__sub { font-size: var(--fz-s); color: var(--color-ink-2); margin: var(--s5) 0 var(--s15); letter-spacing: .03em; } .project-card__body { font-size: var(--fz-m); line-height: 1.8; color: var(--color-ink-2); margin: 0; } .project-card__arrow { position: absolute; right: 28px; bottom: 24px; font-size: var(--fz-xl); color: var(--color-theme-500); } /* ─── Section 07 — Mama Stories (★ 新設・社会起業型カード) ─── */ .mama-stories { background: var(--color-bg-paper); padding: var(--s60) 0; } .mama-stories__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--s35); } .mama-stories__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s30); margin-top: var(--s40); } .mama-story { background: #fff; border: 1px solid var(--color-rule); padding: var(--s35); display: flex; flex-direction: column; gap: var(--s20); transition: transform .2s, border-color .2s, box-shadow .2s; } .mama-story:hover { transform: translateY(-3px); border-color: var(--color-primary-200); box-shadow: var(--shadow-md); } .mama-story__tag { font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--color-primary-500); } .mama-story__title { font-family: var(--font-sans-jp); font-weight: 700; font-size: var(--fz-xl); line-height: 1.55; color: var(--color-primary-700); margin: 0; } .mama-story__body { font-size: var(--fz-m); line-height: 1.95; color: var(--color-ink-2); margin: 0; flex: 1; } .mama-story__more { font-family: var(--font-en); font-size: var(--fz-s); font-weight: 700; letter-spacing: .12em; color: var(--color-primary-500); padding-top: var(--s15); border-top: 1px solid var(--color-rule); text-transform: uppercase; text-decoration: none; } /* ─── Section — Trust Network (4 行レイアウト・緑メイン) ─────── */ .trust-network { background: var(--color-bg-sage); padding: var(--s60) 0; } .trust-network__list { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-rule); border-radius: var(--r-xl); overflow: hidden; margin-top: var(--s40); } .trust-row { display: grid; grid-template-columns: 200px 1fr auto; gap: var(--s35); align-items: center; padding: var(--s30) var(--s40); border-bottom: 1px solid var(--color-rule); } .trust-row:last-child { border-bottom: 0; } .trust-row__head { display: flex; flex-direction: column; gap: var(--s5); } .trust-row__num { font-family: var(--font-en); font-weight: 700; font-size: var(--fz-xs); letter-spacing: .18em; color: var(--color-theme-600); text-transform: uppercase; } .trust-row__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fz-l); margin: 0; color: var(--color-ink); } .trust-row__title small { font-size: var(--fz-s); color: var(--color-ink-3); font-weight: 400; margin-left: var(--s10); } .trust-row__body { font-size: var(--fz-m); color: var(--color-ink-2); line-height: 1.9; } .trust-row__body strong { color: var(--color-theme-700); font-weight: 700; } .trust-row__cta { white-space: nowrap; } /* responsive */ @media (max-width: 1100px) { .entries__grid { grid-template-columns: repeat(2, 1fr); } .programs__grid { grid-template-columns: repeat(2, 1fr); } .cases__grid { grid-template-columns: repeat(2, 1fr); } .needs__grid { grid-template-columns: repeat(2, 1fr); } .schedule-row { grid-template-columns: 100px 80px 1fr 100px; } .schedule-row__cat, .schedule-row__area { display: none; } } @media (max-width: 768px) { .hero__visual { min-height: 240px; } .section { padding: var(--s50) 0; } .section__head, .mission__inner, .akachan__inner, .stats__head, .mama-msg__inner, .final-cta__inner, .ds-block__head { grid-template-columns: 1fr; gap: var(--s30); margin-bottom: var(--s35); } .stats__grid, .entries__grid, .programs__grid, .cases__grid, .cases__feature { grid-template-columns: 1fr; gap: var(--s20); margin-bottom: var(--s35); } .needs__grid { grid-template-columns: 1fr; } .mama-stories__grid { grid-template-columns: 1fr; } .swatches { grid-template-columns: repeat(3, 1fr); } /* セクション内側のパディング縮小 + タイトル・本文サイズ調整 */ .mission, .stats, .akachan, .programs, .mama-msg, .mama-stories, .final-cta, .trust-network { padding: var(--s50) 0; } /* trust-network: 4 行レイアウトをモバイルでスタック化 */ .trust-row { grid-template-columns: 1fr; gap: var(--s15); padding: var(--s25) var(--s30); } .trust-row__cta { justify-self: flex-start; } .stats__head { margin: 0 auto var(--s35); padding: 0 var(--s25); } .stats__grid { padding: 0 var(--s25); } .stats__footer { padding: 0 var(--s25); margin-top: var(--s35); } .mama-msg__photo-grid { height: 280px; } .akachan__visual { height: 360px; gap: var(--s10); } /* schedule-row: mobile は 2 列 grid (左テキスト / 右バッヂ右揃え) time と area は二次情報なので非表示 */ .schedule-row { grid-template-columns: 1fr auto; grid-template-areas: "date cat" "title status"; gap: var(--s10) var(--s20); padding: var(--s20) 0; align-items: center; } .schedule-row__date { grid-area: date; font-size: var(--fz-l); } .schedule-row__title { grid-area: title; } .schedule-row__time, .schedule-row__area { display: none; } .schedule-row__cat { grid-area: cat; display: flex; justify-content: flex-end; } .schedule-row__status { grid-area: status; display: flex; justify-content: flex-end; } .schedule-row:hover { padding-left: 0; padding-right: 0; } /* 特集事例の 2 カラムを 1 列に */ .cases__feature { grid-template-columns: 1fr; gap: var(--s20); } .cases__feature-side .case-card { flex-direction: column; } .cases__feature-side .case-card__media { width: 100%; aspect-ratio: 16/10; } /* Final CTA の bg-num が大きすぎるので縮小 */ .final-cta__bg-num { font-size: 280px; top: -40px; right: -40px; } .final-cta { padding: var(--s60) 0; } } /* ==== subpages.css ==== */ /* =================================================================== subpages.css — 下層ページ共通スタイル Page Hero / Breadcrumb / Article body / Forms / Cards / Lists BEM 構造 =================================================================== */ /* ─── Breadcrumb ───────────────────────────────────────────────── */ .breadcrumb { background: var(--color-bg); border-bottom: 1px solid var(--color-rule); } .breadcrumb__inner { max-width: var(--container); margin: 0 auto; padding: var(--s20) var(--s35); display: flex; align-items: center; gap: var(--s10); font-size: var(--fz-s); color: var(--color-ink-3); font-weight: 500; } .breadcrumb__link { color: var(--color-ink-2); text-decoration: none; transition: color .2s; } .breadcrumb__link:hover { color: var(--color-theme-500); } .breadcrumb__sep { color: var(--color-ink-4); font-size: var(--fz-2xs); } .breadcrumb__current { color: var(--color-ink); font-weight: 600; } .breadcrumb__en { margin-left: auto; font-family: var(--font-en); font-size: var(--fz-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-3); font-weight: 600; } /* ─── Page Hero (sub-page) ─────────────────────────────────────── */ /* TOP の .hero と同じ仕組み: 背景写真ステージ + グラデーションスクリム */ .page-hero { position: relative; padding: var(--s50) 0; background: var(--color-bg); overflow: hidden; isolation: isolate; } .page-hero--green { background: var(--color-bg-sage); } .page-hero--cream { background: var(--color-accent-cream); } .page-hero--ink { background: var(--color-bg-ink); color: #fff; } /* 背景写真ステージ */ .page-hero__bg-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .page-hero__bg-stage img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; } /* グラデーションスクリム: PC は左→右にフェードしてテキスト視認性確保 */ .page-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 100deg, var(--color-bg) 0%, rgba(245, 240, 230, 0.92) 30%, rgba(245, 240, 230, 0.55) 50%, rgba(245, 240, 230, 0.15) 70%, rgba(245, 240, 230, 0) 100% ); } .page-hero__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--s35); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s50); align-items: end; position: relative; z-index: 2; } .page-hero__lead { display: flex; flex-direction: column; gap: var(--s30); } .page-hero__chip { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s10); padding: var(--s10) var(--s15); background: rgba(0,0,0,.04); border: 1px solid var(--color-rule-2); border-radius: 999px; font-family: var(--font-en); font-size: var(--fz-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--color-ink); } .page-hero--ink .page-hero__chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.85); } .page-hero__chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-theme-500); } .page-hero__target { font-family: var(--font-en); font-size: var(--fz-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--color-theme-500); font-weight: 700; margin: 0; } .page-hero__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 4.6vw, 68px); line-height: 1.18; letter-spacing: -.035em; color: var(--color-ink); margin: 0; } .page-hero--ink .page-hero__title { color: #fff; } .page-hero__title em { font-style: normal; background: linear-gradient(180deg, transparent 60%, rgba(136,164,99,.22) 60%); padding: 0 var(--s5); } .page-hero__sub { font-size: var(--fz-xl); font-weight: 600; color: var(--color-theme-600); line-height: 1.6; margin: 0; } .page-hero--ink .page-hero__sub { color: var(--color-accent-yellow); } .page-hero__body { font-size: var(--fz-l); line-height: 1.95; color: var(--color-ink-2); margin: 0; max-width: 560px; } .page-hero--ink .page-hero__body { color: rgba(255,255,255,.75); } .page-hero__handwritten { font-family: var(--font-script); font-size: var(--fz-2xl); line-height: 1.2; color: var(--color-theme-500); margin: var(--s5) 0 0; font-weight: 600; transform: rotate(-2deg); display: inline-block; } .page-hero__visual { position: relative; align-self: stretch; min-height: 360px; } .page-hero__photo { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 35%, var(--color-sub-200) 0%, transparent 55%), radial-gradient(ellipse at 75% 60%, var(--color-accent-leaf) 0%, transparent 55%), linear-gradient(135deg, var(--color-theme-200) 0%, var(--color-sub-300) 100%); border-radius: 4px; overflow: hidden; } .page-hero__photo-tag { position: absolute; top: 16px; left: 16px; font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.85); padding: var(--s5) var(--s10); background: rgba(0,0,0,.25); backdrop-filter: blur(6px); border-radius: 4px; } .page-hero__photo-mom { position: absolute; right: 14%; top: 18%; width: 38%; aspect-ratio: 1/1.4; background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.1)); border-radius: 50% 50% 30% 30%; backdrop-filter: blur(2px); } .page-hero__photo-baby { position: absolute; right: 22%; top: 50%; width: 22%; aspect-ratio: 1/1.2; background: rgba(255,253,248,.85); border-radius: 50% 50% 30% 30%; } .page-hero__sticker { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 132px; height: 132px; background: var(--color-theme-500); color: #fff; border-radius: 50%; text-align: center; font-weight: 800; box-shadow: var(--shadow-lg); bottom: -16px; right: 32px; } .page-hero__sticker-num { font-family: var(--font-en); font-size: var(--fz-3xl); letter-spacing: -.02em; line-height: 1; font-weight: 900; } .page-hero__sticker-en { font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .18em; text-transform: uppercase; opacity: .85; margin-top: var(--s5); } .page-hero__sticker-jp { font-size: var(--fz-xs); margin-top: var(--s5); } .page-hero__bg-num { position: absolute; font-family: var(--font-en); font-weight: 900; font-size: 480px; line-height: 1; color: rgba(0,0,0,.03); bottom: -160px; right: -60px; /* scrim (z-index: 1) より上、本文 inner (z-index: 6) より下に置く。 z-index: 0 だとモバイル時に scrim の上下グラデで透かし文字が隠れる。 */ z-index: 2; pointer-events: none; } .page-hero--ink .page-hero__bg-num { color: rgba(255,255,255,.04); } /* trust badges row under hero */ .trust-strip { background: #fff; border-bottom: 1px solid var(--color-rule); padding: var(--s30) 0; } .trust-strip__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--s35); display: flex; align-items: center; gap: var(--s35); flex-wrap: wrap; } .trust-strip__label { font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--color-ink-3); } .trust-strip__items { display: flex; gap: var(--s30); flex: 1; flex-wrap: wrap; } .trust-badge { display: flex; align-items: center; gap: var(--s10); font-size: var(--fz-s); font-weight: 600; color: var(--color-ink-2); } .trust-badge__num { font-family: var(--font-en); font-weight: 900; font-size: var(--fz-xl); letter-spacing: -.02em; color: var(--color-theme-500); font-feature-settings: "tnum"; } /* ─── Section heading (sub-page sections) ─────────────────────── */ .subsec { padding: var(--s60) 0; border-top: 1px solid var(--color-rule); background: var(--color-bg); } .subsec--paper { background: var(--color-bg-paper); } .subsec--sage { background: var(--color-bg-sage); border-color: rgba(0,0,0,.06); } .subsec--cream { background: var(--color-accent-cream); } /* subsec--ink: bg-sage 背景 + theme-500 (緑カード) + primary-500 (テラコッタ強調) の組合せ */ .subsec--ink { background: var(--color-bg-sage); color: var(--color-ink); border-color: var(--color-rule); } .subsec--tight { padding: var(--s50) 0; } .subsec__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--s35); } .subsec__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s50); align-items: end; margin-bottom: var(--s50); padding-bottom: var(--s30); border-bottom: 1px solid var(--color-rule); } .subsec--ink .subsec__head { border-bottom-color: rgba(0,0,0,.12); } .subsec__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.2; letter-spacing: -.03em; color: var(--color-ink); margin: var(--s15) 0 0; } .subsec--ink .subsec__title { color: var(--color-ink); } .subsec__title em { font-style: normal; color: var(--color-theme-500); } .subsec__sub { font-size: var(--fz-m); color: var(--color-ink-3); margin: 0; line-height: 1.85; } .subsec--ink .subsec__sub { color: var(--color-ink-2); } /* ─── Issue → Solution ────────────────────────────────────────── */ .issue { display: grid; grid-template-columns: 1fr 80px 1fr; gap: var(--s30); align-items: stretch; } .issue__col { background: #fff; border: 1px solid var(--color-rule); padding: var(--s35) var(--s35); display: flex; flex-direction: column; gap: var(--s20); position: relative; } .issue__col--problem { border-color: var(--color-rule); } .issue__col--solution { background: var(--color-theme-500); color: #fff; border-color: var(--color-theme-500); } .issue__col-tag { font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--color-ink-3); display: flex; align-items: center; gap: var(--s10); } .issue__col--solution .issue__col-tag { color: rgba(255,255,255,.75); } .issue__col-tag::before { content: ""; width: 24px; height: 1px; background: currentColor; } .issue__col-title { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-xl); line-height: 1.45; letter-spacing: -.02em; margin: 0; } .issue__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s10); } .issue__list li { font-size: var(--fz-m); line-height: 1.7; display: flex; gap: var(--s10); align-items: flex-start; color: var(--color-ink-2); } .issue__col--solution .issue__list li { color: rgba(255,255,255,.85); } .issue__list li::before { content: "—"; color: var(--color-ink-4); flex-shrink: 0; margin-top: 2px; font-weight: 700; } .issue__col--solution .issue__list li::before { color: rgba(255,255,255,.5); } .issue__arrow { display: grid; place-items: center; font-family: var(--font-en); color: var(--color-theme-500); font-size: var(--fz-3xl); font-weight: 900; } /* ─── Benefits 4 ───────────────────────────────────────────────── */ .benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); } /* 3 指標バージョン（研究データが 3 つの LP 用・例: 高齢者施設） */ .benefits--3 { grid-template-columns: repeat(3, 1fr); } .benefit { padding: var(--s35) var(--s30) var(--s35); border-right: 1px solid var(--color-rule); display: flex; flex-direction: column; gap: var(--s15); } .benefit:last-child { border-right: none; } .benefit__num { font-family: var(--font-en); font-size: var(--fz-xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--color-theme-500); display: flex; align-items: center; gap: var(--s10); } .benefit__num::after { content: ""; flex: 1; height: 1px; background: var(--color-rule); } .benefit__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--color-bg-sage); display: grid; place-items: center; margin-bottom: var(--s10); } .benefit__icon svg { width: 22px; height: 22px; stroke: var(--color-theme-600); fill: none; stroke-width: 1.6; } .benefit__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-l); line-height: 1.4; letter-spacing: -.02em; margin: 0; color: var(--color-ink); } .benefit__body { font-size: var(--fz-s); line-height: 1.85; color: var(--color-ink-2); margin: 0; } .benefit__metric { font-family: var(--font-en); font-size: var(--fz-s); font-weight: 700; color: var(--color-theme-500); padding-top: var(--s10); border-top: 1px dashed var(--color-rule); margin-top: auto; } .benefit__metric b { font-family: var(--font-en); font-size: clamp(32px, 3.6vw, 44px); font-weight: 900; letter-spacing: -.03em; font-feature-settings: "tnum"; line-height: 1; } .benefit__metric small { font-size: .55em; font-weight: 800; margin-left: 2px; } /* benefits--evidence: 数字をでかく見せる強調モディファイア (エビデンスゾーン用) */ .benefits--evidence .benefit__num { font-family: var(--font-en); font-weight: 900; font-size: clamp(48px, 5.6vw, 72px); letter-spacing: -.03em; text-transform: none; color: var(--color-theme-500); line-height: 1; margin-bottom: var(--s15); font-feature-settings: "tnum"; display: block; } .benefits--evidence .benefit__num small { font-size: .45em; font-weight: 800; margin-left: var(--s5); } .benefits--evidence .benefit__num::after { display: none; } /* ─── Evidence 4-column grid (program-detail 由来・数字でかく見せる) ─── */ .evidence-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink); } .evidence-grid__item { padding: var(--s35) var(--s30); border-right: 1px solid var(--color-rule); } .evidence-grid__item:last-child { border-right: 0; } .evidence-grid__label { font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--color-ink-3); margin: 0 0 var(--s20); } .evidence-grid__num { font-family: var(--font-en); font-weight: 900; font-size: clamp(48px, 5.4vw, 72px); letter-spacing: -.05em; color: var(--color-theme-500); line-height: 1; font-feature-settings: "tnum"; margin: 0; } .evidence-grid__num small { font-size: .5em; font-weight: 800; } .evidence-grid__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fz-m); margin: var(--s20) 0 var(--s5); } .evidence-grid__body { font-size: var(--fz-s); color: var(--color-ink-3); margin: 0; line-height: 1.7; } /* ─── Process Flow (steps) ────────────────────────────────────── */ .flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; } .flow::before { content: ""; position: absolute; top: 28px; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg, var(--color-theme-300), var(--color-theme-500)); z-index: 0; } .flow__step { display: flex; flex-direction: column; align-items: center; padding: 0 var(--s20); text-align: center; position: relative; z-index: 1; } .flow__step-num { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 2px solid var(--color-theme-500); color: var(--color-theme-500); display: grid; place-items: center; font-family: var(--font-en); font-weight: 800; font-size: var(--fz-xl); letter-spacing: -.02em; margin-bottom: var(--s20); } .flow__step--active .flow__step-num { background: var(--color-theme-500); color: #fff; } .flow__step-time { font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--color-ink-3); margin-bottom: var(--s10); } .flow__step-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fz-m); line-height: 1.4; margin: 0 0 var(--s10); color: var(--color-ink); } .flow__step-body { font-size: var(--fz-s); line-height: 1.7; color: var(--color-ink-3); margin: 0; } /* ─── Flow Modifiers ──────────────────────────────────────────── */ /* .flow--4col: 4 ステップ用 (キャリアパス等)。デフォルトは 5 列。 モバイル時は @media で 1fr (縦並び) になるので追加対応不要。 */ .flow--4col { grid-template-columns: repeat(4, 1fr); } /* .flow__step--cap: 最終段の強調 (キャリアパスの「支社長」など) */ .flow__step--cap .flow__step-num { background: var(--color-theme-700); border-color: var(--color-theme-700); color: #fff; } /* ─── Spec table (実施概要) ───────────────────────────────────── */ .spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s50); } .spec__row { display: grid; grid-template-columns: 132px 1fr; gap: var(--s20); padding: var(--s20) 0; border-bottom: 1px solid var(--color-rule); } .spec__key { font-family: var(--font-en); font-size: var(--fz-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--color-ink-3); padding-top: var(--s5); } .spec__val { font-size: var(--fz-m); color: var(--color-ink); line-height: 1.7; } .spec__val b { font-weight: 700; color: var(--color-theme-600); } .spec__val small { display: block; font-size: var(--fz-s); color: var(--color-ink-3); margin-top: var(--s5); } /* ─── Voice / Testimonial ─────────────────────────────────────── */ .voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s30); } .voice { background: #fff; border: 1px solid var(--color-rule); padding: var(--s40) var(--s35) var(--s35); position: relative; display: flex; flex-direction: column; gap: var(--s20); } .voice::before { content: "“"; position: absolute; top: -12px; left: 22px; font-family: var(--font-sans-jp); font-size: 80px; color: var(--color-theme-300); line-height: 1; font-weight: 700; } .voice__rating { display: flex; gap: 2px; color: var(--color-accent-yellow); font-size: var(--fz-m); } .voice__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-l); line-height: 1.55; letter-spacing: -.02em; margin: 0; color: var(--color-ink); } .voice__body { font-size: var(--fz-s); line-height: 1.95; color: var(--color-ink-2); margin: 0; flex: 1; } .voice__attr { display: flex; gap: var(--s15); align-items: center; padding-top: var(--s20); border-top: 1px solid var(--color-rule); } .voice__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--color-sub-200), var(--color-theme-300)); flex-shrink: 0; } .voice__attr-name { font-size: var(--fz-s); font-weight: 700; color: var(--color-ink); margin: 0; } .voice__attr-meta { font-size: var(--fz-xs); color: var(--color-ink-3); margin: 2px 0 0; } /* ─── Photo gallery (事例写真) ────────────────────────────────── */ .gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s10); height: 460px; } .gallery__item { position: relative; overflow: hidden; border-radius: 4px; background: linear-gradient(135deg, var(--color-sub-200), var(--color-theme-300)); } .gallery__item--1 { grid-column: 1; grid-row: 1 / span 2; background: linear-gradient(135deg, var(--color-theme-200), var(--color-theme-400)); } .gallery__item--2 { background: linear-gradient(135deg, var(--color-accent-leaf), var(--color-bg-sage)); } .gallery__item--3 { background: linear-gradient(135deg, var(--color-sub-200), var(--color-sub-400)); } .gallery__item--4 { background: linear-gradient(135deg, var(--color-accent-cream), var(--color-accent-yellow)); } .gallery__item--5 { background: linear-gradient(135deg, var(--color-theme-300), var(--color-sub-300)); } .gallery__item-tag { position: absolute; bottom: 12px; left: 12px; font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #fff; background: rgba(0,0,0,.35); backdrop-filter: blur(4px); padding: var(--s5) var(--s10); border-radius: 4px; } .gallery__item-num { position: absolute; top: 12px; right: 12px; font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 700; color: rgba(255,255,255,.7); } /* ─── Media logos (メディア掲載) ──────────────────────────────── */ .media-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); } .media-logo { height: 96px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--color-rule); padding: 0 var(--s20); font-family: var(--font-sans-jp); font-weight: 700; font-size: var(--fz-xl); color: var(--color-ink-2); text-align: center; letter-spacing: -.01em; transition: background .2s, color .2s; } .media-logo:last-child { border-right: none; } .media-logo:hover { background: var(--color-bg-sage); color: var(--color-theme-600); } .media-logo small { display: block; font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--color-ink-4); margin-top: var(--s5); } .media-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s50); margin-top: var(--s35); } .media-list__item { padding: var(--s20) 0; border-bottom: 1px solid var(--color-rule); display: grid; /* title 列を最優先で確保（4fr）。date/type/src は比率配分。 */ grid-template-columns: 1fr 2fr minmax(0, 4fr) 2fr; gap: var(--s20); align-items: baseline; font-size: var(--fz-s); } .media-list__date { font-family: var(--font-en); font-weight: 700; color: var(--color-theme-500); font-feature-settings: "tnum"; } .media-list__type { font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--color-ink-3); border: 1px solid var(--color-rule-2); padding: 3px var(--s10); border-radius: 999px; text-align: center; } .media-list__title { color: var(--color-ink); font-weight: 600; min-width: 0; word-break: break-word; line-height: 1.55; } .media-list__src { font-size: var(--fz-xs); color: var(--color-ink-3); font-family: var(--font-en); letter-spacing: .04em; min-width: 0; word-break: break-word; line-height: 1.5; } /* ─── Stories (ママ・トレーナーのストーリーカード) ──────────────── */ /* course-mama / course-trainer / TOP の 4 ストーリーで使用 */ .stories { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s30); } .story { background: #fff; border: 1px solid var(--color-rule); padding: var(--s35); display: flex; flex-direction: column; gap: var(--s20); } .story__num { font-family: var(--font-en); font-size: var(--fz-xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--color-theme-500); } .story__role { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-l); letter-spacing: -.02em; color: var(--color-ink); margin: 0; } .story__quote { font-family: var(--font-heading); font-weight: 700; font-size: var(--fz-l); line-height: 1.5; color: var(--color-theme-700); border-left: 3px solid var(--color-theme-500); padding: var(--s5) 0 var(--s5) var(--s20); margin: 0; } .story__body { font-size: var(--fz-s); line-height: 1.85; color: var(--color-ink-2); margin: 0; } @media (max-width: 960px) { .stories { grid-template-columns: 1fr; } } /* ─── Belief (Theory of Change セクション) ────────────────────── */ /* course-mama / course-trainer の "What We Believe" で使用 */ .belief { display: grid; grid-template-columns: 1fr; gap: var(--s30); max-width: 720px; margin: 0 auto; text-align: center; } .belief__lead { font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.6; letter-spacing: -.01em; color: var(--color-ink); margin: 0; } .belief__body { font-size: var(--fz-l); line-height: 2; color: var(--color-ink-2); margin: 0; text-align: left; } /* ─── Awards (受賞歴) ──────────────────────────────────────────── */ .awards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .award { padding: var(--s35) var(--s30); border: 1px solid var(--color-rule); margin-right: -1px; margin-bottom: -1px; display: flex; flex-direction: column; gap: var(--s15); background: #fff; position: relative; } .award__year { font-family: var(--font-en); font-weight: 900; font-size: var(--fz-3xl); letter-spacing: -.04em; color: var(--color-theme-500); font-feature-settings: "tnum"; line-height: 1; } .award__icon { position: absolute; top: 28px; right: 28px; width: 32px; height: 32px; color: var(--color-accent-yellow); } .award__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-l); line-height: 1.45; margin: 0; color: var(--color-ink); } .award__org { font-size: var(--fz-s); color: var(--color-ink-3); margin: 0; padding-top: var(--s15); border-top: 1px solid var(--color-rule); margin-top: auto; } /* ─── Pricing ──────────────────────────────────────────────────── */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s30); } .price-card { background: #fff; border: 1px solid var(--color-rule); padding: var(--s40) var(--s35) var(--s35); display: flex; flex-direction: column; gap: var(--s20); position: relative; } .price-card--featured { background: var(--color-theme-500); color: #fff; border-color: var(--color-theme-500); } .price-card--featured .price-card__plan, .price-card--featured .price-card__price, .price-card--featured .price-card__sub, .price-card--featured .price-card__feat { color: #fff; } .price-card__badge { position: absolute; top: -10px; left: 32px; font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--color-theme-500); padding: var(--s5) var(--s10); border-radius: 3px; } .price-card__plan { font-family: var(--font-en); font-size: var(--fz-xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--color-theme-500); } .price-card__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-xl); letter-spacing: -.02em; color: var(--color-ink); margin: 0; } .price-card--featured .price-card__title { color: #fff; } .price-card__price { font-family: var(--font-en); font-size: var(--fz-4xl); font-weight: 900; letter-spacing: -.04em; color: var(--color-ink); margin: var(--s10) 0 0; display: flex; align-items: baseline; gap: var(--s5); line-height: 1; font-feature-settings: "tnum"; } .price-card__price small { font-family: var(--font-sans-jp); font-size: var(--fz-s); font-weight: 600; color: var(--color-ink-3); letter-spacing: 0; } .price-card--featured .price-card__price small { color: rgba(255,255,255,.6); } .price-card__sub { font-size: var(--fz-s); color: var(--color-ink-3); margin: 0; line-height: 1.7; } .price-card__feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s10); border-top: 1px solid var(--color-rule); padding-top: var(--s25); } .price-card--featured .price-card__feats { border-top-color: rgba(255,255,255,.18); } .price-card__feat { font-size: var(--fz-s); line-height: 1.6; display: flex; gap: var(--s10); color: var(--color-ink-2); } .price-card--featured .price-card__feat { color: rgba(255,255,255,.85); } .price-card__feat::before { content: "✓"; color: var(--color-theme-500); font-weight: 800; flex-shrink: 0; } /* featured カード(緑背景)の中の ✓ は白で視認性確保 */ .price-card--featured .price-card__feat::before { color: #fff; } /* subsec--ink 内のバッヂのみテラコッタ (primary-500) で強調。bullet ✓ は緑 500 のまま。 */ .subsec--ink .price-card__badge { background: var(--color-primary-500); } .price-card__cta { margin-top: auto; padding-top: var(--s10); } /* ─── FAQ ──────────────────────────────────────────────────────── */ .faq { border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); } .faq__item { border-bottom: 1px solid var(--color-rule); } .faq__item:last-child { border-bottom: none; } .faq__q { display: grid; grid-template-columns: 56px 1fr 32px; gap: var(--s20); align-items: center; padding: var(--s30) 0; cursor: pointer; list-style: none; font-family: var(--font-heading); font-weight: 700; font-size: var(--fz-l); color: var(--color-ink); letter-spacing: -.01em; } .faq__q::-webkit-details-marker { display: none; } .faq__q-num { font-family: var(--font-en); font-size: var(--fz-xs); letter-spacing: .14em; font-weight: 700; color: var(--color-theme-500); } .faq__q-icon { width: 32px; height: 32px; border: 1px solid var(--color-rule-2); border-radius: 50%; position: relative; transition: transform .2s, background .2s, border-color .2s; } .faq__q-icon::before, .faq__q-icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-ink); } .faq__q-icon::before { width: 12px; height: 1.5px; } .faq__q-icon::after { width: 1.5px; height: 12px; transition: transform .2s; } .faq__item[open] .faq__q-icon { background: var(--color-theme-500); border-color: var(--color-theme-500); } .faq__item[open] .faq__q-icon::before { background: #fff; } .faq__item[open] .faq__q-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .faq__a { padding: 0 0 var(--s30) var(--s50); font-size: var(--fz-m); line-height: 1.95; color: var(--color-ink-2); } .faq__a p { margin: 0 0 var(--s15); } .faq__a p:last-child { margin: 0; } /* ─── Sub CTA strip (養成講座副線等) ──────────────────────────── */ .sub-cta { background: var(--color-bg-sage); border: 1px solid var(--color-rule); padding: var(--s40) var(--s40); display: grid; grid-template-columns: 1fr auto; gap: var(--s35); align-items: center; margin: var(--s35) 0; position: relative; overflow: hidden; } .sub-cta__tag { font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--color-theme-500); margin: 0 0 var(--s10); } .sub-cta__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-xl); line-height: 1.5; letter-spacing: -.02em; color: var(--color-ink); margin: 0 0 var(--s10); } .sub-cta__body { font-size: var(--fz-s); color: var(--color-ink-2); margin: 0; line-height: 1.75; } /* ─── 3-button CTA cluster (CTA3点) ───────────────────────────── */ .cta-cluster { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s25); } .cta-cluster__card { background: #fff; border: 1px solid var(--color-rule); padding: var(--s35) var(--s30); display: flex; flex-direction: column; gap: var(--s15); text-decoration: none; color: var(--color-ink); transition: transform .2s, border-color .2s, background .2s; } .cta-cluster__card:hover { transform: translateY(-4px); border-color: var(--color-theme-300); background: var(--color-bg-paper); } .cta-cluster__card-num { font-family: var(--font-en); font-size: var(--fz-xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--color-theme-500); } .cta-cluster__card-title { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-l); line-height: 1.45; letter-spacing: -.02em; margin: 0; } .cta-cluster__card-body { font-size: var(--fz-s); color: var(--color-ink-2); line-height: 1.85; margin: 0; } .cta-cluster__card-arrow { margin-top: auto; display: flex; align-items: center; gap: var(--s10); font-family: var(--font-en); font-size: var(--fz-s); font-weight: 700; letter-spacing: .04em; color: var(--color-theme-500); padding-top: var(--s20); border-top: 1px solid var(--color-rule); } /* ─── Photo variant (course-mama / course-trainer の Venues セクション用) ─── */ .cta-cluster__card--photo { padding: 0; gap: 0; overflow: hidden; } .cta-cluster__card-photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-rule); } .cta-cluster__card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .cta-cluster__card--photo:hover .cta-cluster__card-photo img { transform: scale(1.04); } .cta-cluster__card-body-wrap { padding: var(--s25) var(--s30) var(--s30); display: flex; flex-direction: column; gap: var(--s15); flex: 1; } /* ─── Org info card ────────────────────────────────────────────── */ .org-info { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s50); background: #fff; border: 1px solid var(--color-rule); padding: var(--s40); } .org-info__head { display: flex; flex-direction: column; gap: var(--s15); } .org-info__logo { font-family: var(--font-heading); font-weight: 900; font-size: var(--fz-4xl); letter-spacing: -.03em; color: var(--color-theme-500); line-height: 1.1; } .org-info__name { font-family: var(--font-en); font-size: var(--fz-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--color-ink-3); } .org-info__desc { font-size: var(--fz-s); line-height: 1.95; color: var(--color-ink-2); margin: var(--s15) 0 0; } .org-info__table { display: grid; grid-template-columns: 100px 1fr; font-size: var(--fz-s); line-height: 1.7; } .org-info__table dt { padding: var(--s10) var(--s20) var(--s10) 0; border-bottom: 1px solid var(--color-rule); font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--color-ink-3); } .org-info__table dd { padding: var(--s10) 0; border-bottom: 1px solid var(--color-rule); margin: 0; color: var(--color-ink); } /* ─── Article body (記事ページ) ───────────────────────────────── */ .article { background: var(--color-bg-paper); padding: var(--s60) 0; } .article__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--s35); } .article__meta { display: flex; gap: var(--s20); align-items: center; margin-bottom: var(--s30); padding-bottom: var(--s25); border-bottom: 1px solid var(--color-rule); font-size: var(--fz-s); color: var(--color-ink-3); } .article__category { font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--color-theme-500); padding: var(--s5) var(--s10); } .article__date { font-family: var(--font-en); font-weight: 600; letter-spacing: .04em; font-feature-settings: "tnum"; color: var(--color-ink-2); } .article__author { margin-left: auto; font-weight: 600; color: var(--color-ink-2); } .article__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.32; letter-spacing: -.025em; color: var(--color-ink); margin: 0 0 var(--s30); } .article__lead { font-family: var(--font-sans-jp); font-size: var(--fz-xl); line-height: 2; color: var(--color-ink-2); margin: 0 0 var(--s40); padding-left: var(--s25); border-left: 3px solid var(--color-theme-500); } .article__hero { height: 380px; margin: 0 0 var(--s40); border-radius: 4px; background: linear-gradient(135deg, var(--color-sub-200), var(--color-theme-300)); position: relative; overflow: hidden; } .article__hero-tag { position: absolute; bottom: 16px; left: 16px; font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #fff; background: rgba(0,0,0,.35); backdrop-filter: blur(4px); padding: var(--s5) var(--s15); border-radius: 4px; } .article__body { font-size: var(--fz-l); line-height: 2.05; color: var(--color-ink); } .article__body h2 { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-2xl); letter-spacing: -.02em; margin: var(--s50) 0 var(--s25); padding-top: var(--s35); border-top: 1px solid var(--color-rule); line-height: 1.4; } .article__body h3 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fz-l); letter-spacing: -.01em; margin: var(--s40) 0 var(--s20); line-height: 1.45; color: var(--color-theme-600); } .article__body p { margin: 0 0 var(--s25); } .article__body strong { font-weight: 700; color: var(--color-theme-600); } .article__body blockquote { background: var(--color-bg-sage); border-left: 3px solid var(--color-theme-500); padding: var(--s30) var(--s30); margin: var(--s35) 0; font-family: var(--font-sans-jp); font-size: var(--fz-l); font-style: italic; line-height: 2; color: var(--color-ink); } .article__body ul, .article__body ol { margin: 0 0 var(--s25); padding-left: var(--s30); } .article__body li { margin-bottom: var(--s10); } .article__body figure { margin: var(--s40) 0; } .article__body figure-img { display: block; height: 260px; background: linear-gradient(135deg, var(--color-accent-cream), var(--color-accent-yellow)); border-radius: 4px; margin-bottom: var(--s15); } .article__body figcaption { font-size: var(--fz-s); color: var(--color-ink-3); text-align: center; font-style: italic; } /* ─── Article Index (一覧) ────────────────────────────────────── */ .idx-filters { display: flex; gap: var(--s10); flex-wrap: wrap; padding: 0 0 var(--s35); border-bottom: 1px solid var(--color-rule); margin-bottom: var(--s40); } .idx-filter { padding: var(--s10) var(--s20); border: 1px solid var(--color-rule-2); border-radius: 999px; font-size: var(--fz-s); font-weight: 600; color: var(--color-ink-2); background: #fff; cursor: pointer; transition: all .2s; text-decoration: none; } .idx-filter:hover { border-color: var(--color-theme-300); color: var(--color-theme-500); } .idx-filter.is-active { background: var(--color-ink); color: #fff; border-color: var(--color-ink); } .idx-filter__count { margin-left: var(--s5); font-family: var(--font-en); font-size: var(--fz-2xs); font-weight: 700; opacity: .7; } .idx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s35) var(--s30); } .idx-card { display: flex; flex-direction: column; gap: var(--s15); text-decoration: none; color: var(--color-ink); transition: transform .2s; } .idx-card:hover { transform: translateY(-4px); } .idx-card__thumb { height: 200px; background: linear-gradient(135deg, var(--color-sub-200), var(--color-theme-300)); border-radius: 4px; position: relative; overflow: hidden; } .idx-card:nth-child(3n+1) .idx-card__thumb { background: linear-gradient(135deg, var(--color-accent-leaf), var(--color-bg-sage)); } .idx-card:nth-child(3n+2) .idx-card__thumb { background: linear-gradient(135deg, var(--color-accent-cream), var(--color-accent-yellow)); } .idx-card:nth-child(3n+3) .idx-card__thumb { background: linear-gradient(135deg, var(--color-sub-200), var(--color-theme-300)); } .idx-card__cat { position: absolute; top: 12px; left: 12px; font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); padding: var(--s5) var(--s10); border-radius: 3px; } .idx-card__date { font-family: var(--font-en); font-size: var(--fz-xs); letter-spacing: .04em; font-weight: 600; color: var(--color-ink-3); font-feature-settings: "tnum"; } .idx-card__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fz-l); line-height: 1.5; letter-spacing: -.015em; margin: 0; color: var(--color-ink); text-wrap: pretty; } .idx-card__excerpt { font-size: var(--fz-s); line-height: 1.85; color: var(--color-ink-3); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .idx-pagination { display: flex; justify-content: center; gap: var(--s5); margin-top: var(--s50); } .idx-pagination__page { width: 40px; height: 40px; display: grid; place-items: center; font-family: var(--font-en); font-size: var(--fz-s); font-weight: 700; color: var(--color-ink-2); background: #fff; border: 1px solid var(--color-rule); text-decoration: none; transition: all .2s; } .idx-pagination__page.is-active { background: var(--color-ink); color: #fff; border-color: var(--color-ink); } .idx-pagination__page:hover:not(.is-active) { border-color: var(--color-theme-300); color: var(--color-theme-500); } /* ─── Contact Form ────────────────────────────────────────────── */ .contact { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s50); align-items: start; } .contact__aside { position: sticky; top: 32px; display: flex; flex-direction: column; gap: var(--s30); } .contact__aside-title { font-family: var(--font-heading); font-weight: 800; font-size: var(--fz-xl); letter-spacing: -.02em; margin: 0; } .contact__aside-body { font-size: var(--fz-s); line-height: 1.95; color: var(--color-ink-2); margin: 0; } .contact__aside-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s20); } .contact__aside-list li { padding: var(--s20) var(--s25); background: #fff; border: 1px solid var(--color-rule); display: flex; flex-direction: column; gap: var(--s5); } .contact__aside-key { font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--color-theme-500); } .contact__aside-val { font-size: var(--fz-m); color: var(--color-ink); font-weight: 600; } .contact__form { background: #fff; border: 1px solid var(--color-rule); padding: var(--s40); display: flex; flex-direction: column; gap: var(--s30); } .contact__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s30); } .contact__form-field { display: flex; flex-direction: column; gap: var(--s10); } .contact__form-field--full { grid-column: 1 / -1; } .contact__form-label { font-size: var(--fz-s); font-weight: 700; color: var(--color-ink); display: flex; align-items: center; gap: var(--s10); } .contact__form-label-req { font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--color-theme-500); padding: 2px var(--s5); border-radius: 2px; } .contact__form-label-opt { font-family: var(--font-en); font-size: var(--fz-2xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--color-ink-3); border: 1px solid var(--color-rule-2); padding: 2px var(--s5); border-radius: 2px; } .contact__form-input, .contact__form-select, .contact__form-textarea { font-family: inherit; font-size: var(--fz-m); padding: var(--s15) var(--s20); border: 1px solid var(--color-rule-2); border-radius: 4px; background: var(--color-bg); color: var(--color-ink); transition: border-color .2s, background .2s; } .contact__form-input:focus, .contact__form-select:focus, .contact__form-textarea:focus { outline: none; border-color: var(--color-theme-500); background: #fff; } .contact__form-textarea { min-height: 160px; resize: vertical; line-height: 1.7; } /* 個別フィールド下のエラーメッセージ (Laravel @error 出力用) */ .contact__form-error { margin: var(--s5) 0 0; font-size: var(--fz-s); color: var(--color-primary-700); line-height: 1.5; } .contact__form-radios { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s10); } .contact__form-radio { display: flex; align-items: center; gap: var(--s10); padding: var(--s15) var(--s20); border: 1px solid var(--color-rule-2); border-radius: 4px; background: var(--color-bg); font-size: var(--fz-s); font-weight: 600; color: var(--color-ink-2); cursor: pointer; transition: all .2s; } .contact__form-radio:hover { border-color: var(--color-theme-300); } .contact__form-radio input { accent-color: var(--color-theme-500); } .contact__form-help { font-size: var(--fz-xs); color: var(--color-ink-3); line-height: 1.7; } .contact__form-submit { display: flex; align-items: center; justify-content: space-between; gap: var(--s30); padding-top: var(--s30); border-top: 1px solid var(--color-rule); } .contact__form-submit p { font-size: var(--fz-xs); color: var(--color-ink-3); line-height: 1.7; margin: 0; flex: 1; } /* ─── Responsive ───────────────────────────────────────────────── */ @media (max-width: 960px) { /* mobile: 写真上 + テキスト下のレイヤード構造 (TOP hero と同じ) */ .page-hero { min-height: 0; padding: 0 0 var(--s50); } .page-hero__bg-stage { position: relative; inset: auto; height: 56vh; min-height: 360px; max-height: 520px; } /* SP: scrim を写真エリアと同じ高さに限定して上下グラデで連続感を出す */ .page-hero__scrim { inset: auto; top: 0; left: 0; right: 0; height: 56vh; min-height: 360px; max-height: 520px; background: linear-gradient( 180deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0.92) 85%, var(--color-bg) 100% ); } .page-hero__inner { position: relative; grid-template-columns: 1fr; gap: var(--s30); padding: 0 var(--s30); margin-top: -22vh; z-index: 6; } .page-hero__visual { display: none; } .page-hero__bg-num { font-size: 280px; bottom: -80px; right: -40px; } /* compact 系 (写真なしのヒーロー): /contact /schedules /document-request /entries 等。 上記のレイヤード設計 (margin-top: -22vh / padding: 0 0 var(--s50)) は写真前提なので、 compact では普通の padding に戻し、ネガティブマージンも解除する。 */ .page-hero--compact { padding: var(--s40) 0; } .page-hero--compact .page-hero__inner { margin-top: 0; } .breadcrumb__inner { padding: var(--s10) var(--s25); gap: var(--s5); flex-wrap: wrap; font-size: var(--fz-xs); } .breadcrumb__en { display: none; } .trust-strip { padding: var(--s20) 0; } .trust-strip__inner { padding: 0 var(--s25); gap: var(--s20); } .trust-strip__label { display: none; } .subsec { padding: var(--s50) 0; } .subsec__inner { padding: 0 var(--s25); } .subsec__head { grid-template-columns: 1fr; align-items: start; gap: var(--s15); margin-bottom: var(--s30); padding-bottom: var(--s20); } .subsec__sub { text-align: left; max-width: none; } .issue { grid-template-columns: 1fr; } .issue__arrow { transform: rotate(90deg); padding: var(--s10) 0; } .benefits { grid-template-columns: 1fr 1fr; } .benefit { padding: var(--s25) var(--s20); gap: var(--s10); } .benefit:nth-child(2n) { border-right: none; } .benefit:nth-child(-n+2) { border-bottom: 1px solid var(--color-rule); } .flow { grid-template-columns: 1fr; gap: var(--s25); } .flow::before { top: 28px; bottom: 28px; left: 28px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--color-theme-300), var(--color-theme-500)); } .flow__step { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: var(--s20); row-gap: var(--s5); text-align: left; padding: 0; align-items: center; } .flow__step-num { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; flex-shrink: 0; } .flow__step-meta { grid-column: 2; grid-row: 1; display: flex; align-items: baseline; gap: var(--s10); flex-wrap: wrap; } .flow__step-time { margin: 0; } .flow__step-title { font-size: var(--fz-l); margin: 0; } .flow__step-body { grid-column: 2; grid-row: 2; font-size: var(--fz-s); line-height: 1.85; margin: 0; } .spec { grid-template-columns: 1fr; gap: 0; } .voices { grid-template-columns: 1fr; } .gallery { grid-template-columns: 1fr 1fr; height: auto; grid-template-rows: 200px 200px 200px; } .gallery__item--1 { grid-column: 1 / -1; grid-row: 1; } .media-logos { grid-template-columns: repeat(3, 1fr); } .media-logo:nth-child(3n) { border-right: none; } .media-logo:nth-child(-n+3) { border-bottom: 1px solid var(--color-rule); } .media-list { grid-template-columns: 1fr; } .media-list__item { grid-template-columns: 80px 1fr; gap: var(--s15); } .media-list__type, .media-list__src { display: none; } .awards { grid-template-columns: 1fr 1fr; } .evidence-grid { grid-template-columns: 1fr 1fr; } .evidence-grid__item { padding: var(--s30) var(--s25); border-right: 1px solid var(--color-rule); } .evidence-grid__item:nth-child(2n) { border-right: 0; } .evidence-grid__item:nth-child(-n+2) { border-bottom: 1px solid var(--color-rule); } .evidence-grid__num { font-size: clamp(40px, 11vw, 60px); } .sub-cta { grid-template-columns: 1fr; padding: var(--s30) var(--s30); gap: var(--s25); } .sub-cta__title { font-size: var(--fz-l); } .pricing { grid-template-columns: 1fr; } .cta-cluster { grid-template-columns: 1fr; } .org-info { grid-template-columns: 1fr; gap: var(--s35); padding: var(--s35); } .org-info__table { grid-template-columns: 88px 1fr; } .article { padding: var(--s50) 0; } .article__inner { padding: 0 var(--s30); } .article__hero { height: 240px; } .idx-grid { grid-template-columns: 1fr; } .contact { grid-template-columns: 1fr; gap: var(--s35); } .contact__aside { position: static; } .contact__form { padding: var(--s35) var(--s30); } .contact__form-row { grid-template-columns: 1fr; } .contact__form-radios { grid-template-columns: 1fr; } .contact__form-submit { flex-direction: column; align-items: stretch; } } /* ─── タイムスケジュール例（赤ちゃん先生ページ共通） ─── */ .timeschedule { margin-top: var(--s40); padding-top: var(--s35); border-top: 1px solid var(--color-rule); } .timeschedule__title { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--s5); } .timeschedule__note { font-size: var(--fz-s); color: var(--color-ink-3); margin: 0 0 var(--s20); line-height: 1.7; } .timeschedule__list { display: flex; flex-direction: column; } .timeschedule__row { display: grid; grid-template-columns: 96px 1fr; gap: var(--s20); padding: var(--s15) var(--s20); border-radius: var(--r-sm); } .timeschedule__row:nth-child(odd) { background: var(--color-bg-paper); } .timeschedule__time { font-family: var(--font-en); font-size: var(--fz-s); font-weight: 700; color: var(--color-primary-500); white-space: nowrap; } .timeschedule__body { display: flex; flex-direction: column; } .timeschedule__label { font-size: var(--fz-s); font-weight: 700; color: var(--color-ink); } .timeschedule__desc { font-size: var(--fz-s); color: var(--color-ink-3); margin-top: 3px; line-height: 1.7; } @media (max-width: 767px) { .timeschedule__row { grid-template-columns: 64px 1fr; gap: var(--s10); padding: var(--s10) var(--s15); } } /* ==== schedules.css ==== */ /* ════════════════════════════════════════════════════════ Schedules ページ専用スタイル - index (/schedules) - show (/schedules/{id}) - contact-sent (/schedules/{id}/contact/sent) 流用する既存クラス: .breadcrumb / .page-hero / .subsec / .spec / .contact__form-* .schedule__filters / .schedule__filter / .schedule-row / .schedule__list このファイルでは「上記で足りない一覧の月見出し・ページネーション・詳細追加要素・ 完了画面の手順リスト・空状態」だけを追加する。 ═══════════════════════════════════════════════════════ */ /* ─── タブの上余白調整 (一覧ページ) ───────────────────── */ .schedule-tabs { margin-bottom: var(--s20); } .schedule-tabs__count { font-size: var(--fz-s); color: var(--color-ink-3); margin: 0; } .schedule-tabs__count strong { color: var(--color-ink); font-size: var(--fz-l); font-weight: 700; } .schedule-tabs__count-pref { display: inline-block; margin-left: var(--s10); padding: 2px var(--s10); background: var(--color-theme-50, var(--color-bg-sage)); color: var(--color-theme-700); border-radius: 999px; font-size: var(--fz-s); font-weight: 500; } /* ─── 都道府県セレクトフォーム ─────────────────────── */ .schedule-tabs__pref-form { display: flex; align-items: center; gap: var(--s15); margin: var(--s20) 0; flex-wrap: wrap; } .schedule-tabs__pref-label { font-size: var(--fz-s); font-weight: 600; color: var(--color-ink-2); letter-spacing: .02em; } .schedule-tabs__pref-select { appearance: none; -webkit-appearance: none; padding: var(--s10) var(--s35) var(--s10) var(--s15); border: 1.5px solid var(--color-rule); border-radius: var(--r-md); background: #fff url("data:image/svg+xml;utf8,") no-repeat right 12px center; font-family: inherit; font-size: var(--fz-m); color: var(--color-ink); cursor: pointer; min-width: 200px; transition: border-color .15s, box-shadow .15s; } .schedule-tabs__pref-select:hover { border-color: var(--color-theme-400); } .schedule-tabs__pref-select:focus { outline: none; border-color: var(--color-theme-500); box-shadow: 0 0 0 3px var(--color-theme-100, rgba(201, 82, 48, .12)); } .schedule-tabs__pref-submit { padding: var(--s10) var(--s20); background: var(--color-theme-500); color: #fff; border: none; border-radius: var(--r-md); font-size: var(--fz-s); font-weight: 600; cursor: pointer; } @media (max-width: 640px) { .schedule-tabs__pref-form { flex-direction: column; align-items: stretch; gap: var(--s5); } .schedule-tabs__pref-select { width: 100%; min-width: 0; } } /* ─── 月別見出し ───────────────────────────────────── */ .schedule-month-head { display: flex; align-items: baseline; gap: var(--s20); margin: var(--s40) 0 var(--s20); padding-bottom: var(--s15); border-bottom: 2px solid var(--color-theme-500); font-weight: 400; } .schedule-month-head:first-child { margin-top: 0; } .schedule-month-head__num { font-family: var(--font-en); font-size: var(--fz-3xl); font-weight: 700; color: var(--color-theme-500); letter-spacing: .04em; } .schedule-month-head__label { font-size: var(--fz-m); color: var(--color-ink-2); font-weight: 500; } /* ─── 一覧の行をフル幅(7列)に拡張 ───────────────────── home の .schedule-row は時間列が小さいので、ここでは 一覧ページ用に時間列を縦書き風に幅広く取る。 --------------------------------------------------- */ .schedule-row--full { /* date / time / title / area / cat / status */ grid-template-columns: 110px 70px 1fr 130px 120px 110px; } .schedule-row--full .schedule-row__time { font-size: var(--fz-s); line-height: 1.4; text-align: center; } @media (max-width: 1024px) { .schedule-row--full { grid-template-columns: 100px 60px 1fr 100px; } .schedule-row--full .schedule-row__cat, .schedule-row--full .schedule-row__area { display: none; } } @media (max-width: 640px) { .schedule-row--full { grid-template-columns: auto 1fr auto; grid-template-areas: "date title status" "date cat cat"; gap: var(--s10) var(--s15); } .schedule-row--full .schedule-row__date { grid-area: date; } .schedule-row--full .schedule-row__title { grid-area: title; } .schedule-row--full .schedule-row__status { grid-area: status; } .schedule-row--full .schedule-row__cat { grid-area: cat; display: block; } .schedule-row--full .schedule-row__time, .schedule-row--full .schedule-row__area { display: none; } } /* ─── ページネーション ─────────────────────────────── */ .schedule-pagination { display: flex; justify-content: center; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s50); } .schedule-pagination__btn { min-width: 44px; height: 44px; padding: 0 var(--s15); display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--color-rule); background: #fff; color: var(--color-ink-2); text-decoration: none; font-size: var(--fz-m); font-weight: 500; font-family: var(--font-en); letter-spacing: .02em; transition: border-color .15s, color .15s, background .15s; } .schedule-pagination__btn:hover { border-color: var(--color-theme-500); color: var(--color-theme-500); } .schedule-pagination__btn--active { background: var(--color-theme-500); border-color: var(--color-theme-500); color: #fff; } .schedule-pagination__btn--active:hover { background: var(--color-theme-600); border-color: var(--color-theme-600); color: #fff; } .schedule-pagination__btn--disabled { opacity: .35; pointer-events: none; cursor: not-allowed; } /* ─── 空状態 ────────────────────────────────────── */ .schedule-empty { padding: var(--s50) var(--s30); text-align: center; background: var(--color-bg-paper); border: 1px dashed var(--color-rule); border-radius: 4px; } .schedule-empty__title { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--s15); } .schedule-empty__body { font-size: var(--fz-m); color: var(--color-ink-2); line-height: 1.8; margin: 0 0 var(--s35); } /* ─── 詳細: 取材可否バッジ ─────────────────────────── .collect-badge: ピル型ラベル + 補足テキスト。 サイトの暖色系トーン (セージ / テラコッタ / アンバー) に揃える。 --------------------------------------------------- */ .collect-badge { display: inline-flex; align-items: center; gap: var(--s5); padding: var(--s5) var(--s15) var(--s5) var(--s10); border-radius: 999px; font-size: var(--fz-s); font-weight: 700; letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; } .collect-badge::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .collect-badge--ok { background: var(--color-theme-50); color: var(--color-theme-700); border-color: var(--color-theme-200); } .collect-badge--ng { background: #FCEEEA; /* テラコッタの薄いトーン */ color: var(--color-primary-700); border-color: var(--color-primary-100); } .collect-badge--confirm { background: #FBF1DC; /* 暖色アンバー (gov 系と揃える) */ color: #6B4F1F; border-color: #E8D9B7; } .collect-badge__note { display: block; margin-top: var(--s10); font-size: var(--fz-s); color: var(--color-ink-3); line-height: 1.5; } /* ─── 詳細: 内容 (本文) ───────────────────────────── */ .schedule-content { margin-top: var(--s40); padding: var(--s30) var(--s35); background: #fff; border-left: 3px solid var(--color-theme-500); border-radius: 0 4px 4px 0; } .schedule-content__title { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--s15); } .schedule-content__body { font-size: var(--fz-m); line-height: 1.85; color: var(--color-ink-2); margin: 0; white-space: pre-wrap; word-wrap: break-word; } /* ─── 詳細: 外部リンク ─────────────────────────────── */ .schedule-url { margin-top: var(--s30); padding: var(--s25) var(--s30); background: var(--color-bg-sage); border-radius: 4px; } .schedule-url__label { font-size: var(--fz-s); font-weight: 700; color: var(--color-ink-2); letter-spacing: .04em; margin: 0 0 var(--s5); text-transform: uppercase; font-family: var(--font-en); } .schedule-url__link { display: inline-block; font-size: var(--fz-m); color: var(--color-theme-600); text-decoration: none; word-break: break-all; font-weight: 500; } .schedule-url__link:hover { text-decoration: underline; } /* ─── 詳細: 申込/締切ブロック ─────────────────────────── */ .schedule-apply { padding: var(--s40) var(--s35); background: #fff; border: 1px solid var(--color-rule); text-align: center; } .schedule-apply__title { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--s15); } .schedule-apply__body { font-size: var(--fz-m); color: var(--color-ink-2); line-height: 1.8; margin: 0 0 var(--s30); } .schedule-apply--closed { background: var(--color-bg-paper); border-color: var(--color-rule); } .schedule-apply--closed .schedule-apply__title { color: var(--color-primary-500); } /* ─── 詳細: フォームエラーまとめ ─────────────────────── */ .schedule-contact__error { margin-bottom: var(--s30); padding: var(--s20) var(--s25); background: #FDECEA; border-left: 3px solid #B71C1C; border-radius: 0 4px 4px 0; } .schedule-contact__error-title { font-weight: 700; color: #B71C1C; margin: 0 0 var(--s10); font-size: var(--fz-m); } .schedule-contact__error-list { margin: 0; padding-left: var(--s25); color: #B71C1C; font-size: var(--fz-s); line-height: 1.7; } /* ─── 完了画面: 流れ ──────────────────────────────── */ .schedule-thanks { max-width: 640px; margin: 0 auto; padding: var(--s35) var(--s35); background: #fff; border-left: 3px solid var(--color-theme-500); border-radius: 0 4px 4px 0; } .schedule-thanks__title { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--s20); } .schedule-thanks__steps { margin: 0; padding: 0 0 0 var(--s30); font-size: var(--fz-m); color: var(--color-ink-2); line-height: 1.85; } .schedule-thanks__steps li { margin-bottom: var(--s20); } .schedule-thanks__steps li:last-child { margin-bottom: 0; } .schedule-thanks__steps code { font-family: var(--font-en); font-size: var(--fz-s); color: var(--color-theme-600); background: var(--color-bg-sage); padding: 1px var(--s5); border-radius: 3px; } /* ─── レスポンシブ調整 ─────────────────────────────── */ @media (max-width: 768px) { .schedule-content { padding: var(--s25) var(--s30); } .schedule-apply { padding: var(--s35) var(--s30); } .schedule-thanks { padding: var(--s30) var(--s30); } .schedule-month-head__num { font-size: var(--fz-2xl); } .schedule-pagination__btn { min-width: 38px; height: 38px; padding: 0 var(--s10); font-size: var(--fz-s); } } /* ==== programs.css ==== */ /* ════════════════════════════════════════════════════════ /document-request 資料ダウンロードページ専用スタイル 構造: - ヒーロー (.page-hero--compact) ※共通 - 4 カテゴリ × カードグリッド (.docs-grid + .docs-card) - 末尾の控えめ問合せ CTA (.docs-fin) レスポンシブ: - PC: 3 カラム - タブレット (1024px以下): 2 カラム - スマホ (640px以下): 1 カラム ═══════════════════════════════════════════════════════ */ /* ─── ヒーロー上の進捗インジケータ ─────────────────── */ .docs-hero__progress { display: inline-block; margin-top: var(--s20); padding: var(--s5) var(--s15); background: var(--color-bg-sage); border: 1px solid var(--color-theme-200); border-radius: 999px; font-size: var(--fz-s); color: var(--color-ink-2); font-weight: 500; } .docs-hero__progress strong { color: var(--color-theme-700); font-weight: 700; font-size: var(--fz-m); } /* ─── カードグリッド ────────────────────────────── */ .docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s30); } @media (max-width: 1024px) { .docs-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .docs-grid { grid-template-columns: 1fr; } } /* ─── カード本体 ────────────────────────────────── */ .docs-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; overflow: hidden; transition: box-shadow .2s, border-color .2s, transform .2s; /* ?from={slug} 由来の auto-scroll 時、固定ヘッダーにカードが隠れないよう 上方向のマージンを取る。サイトのヘッダー高さ + 余白。 */ scroll-margin-top: 100px; } .docs-card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, .08); border-color: var(--color-theme-300); } /* ハイライト演出 (?from=xxx で遷移したとき) */ .docs-card--highlight { animation: docs-card-highlight 2.4s ease-out; } @keyframes docs-card-highlight { 0% { box-shadow: 0 0 0 0 var(--color-theme-400); } 20% { box-shadow: 0 0 0 8px rgba(136, 164, 99, .25); } 100% { box-shadow: 0 0 0 0 rgba(136, 164, 99, 0); } } /* ─── カバー (表紙サムネ) ─────────────────────────── */ /* 比率指定はしない: ヒーロー画像は全 10 種 同じ寸法 (1920×1280) なので、 width: 100% で並べれば自然に高さも揃う。 PDF サムネに差し替わったときも同様 (同一寸法前提)。 サムネ未配置時のプレースホルダだけ aspect-ratio で高さを担保する。 */ .docs-card__cover { position: relative; width: 100%; background: var(--color-bg-2); overflow: hidden; } .docs-card__cover img { display: block; width: 100%; height: auto; } /* サムネ未配置時のプレースホルダ ── 事業ロゴ的に番号 + タイトルだけ大きく表示する。 ── 画像のときと高さが揃うよう、3:2 比率で固定 (ヒーロー画像と同じ)。 */ .docs-card__cover-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s15); width: 100%; aspect-ratio: 3 / 2; padding: var(--s30); background: linear-gradient(135deg, var(--color-bg-paper) 0%, var(--color-bg-sage) 100%); text-align: center; } .docs-card__cover-placeholder-num { font-family: var(--font-en); font-size: var(--fz-5xl); font-weight: 800; color: var(--color-theme-500); letter-spacing: .02em; line-height: 1; } .docs-card__cover-placeholder-label { font-size: var(--fz-s); font-weight: 700; color: var(--color-ink-2); line-height: 1.5; } /* 準備中タグ (カバー右上) */ .docs-card__pending-tag { position: absolute; top: 12px; right: 12px; padding: var(--s5) var(--s10); background: rgba(46, 41, 36, .82); color: #fff; font-size: var(--fz-xs); font-weight: 700; letter-spacing: .04em; border-radius: 999px; font-family: var(--font-jp); } .docs-card--pending .docs-card__cover { filter: grayscale(.4); opacity: .85; } /* ─── カード本文 ───────────────────────────────── */ .docs-card__body { display: flex; flex-direction: column; gap: var(--s10); padding: var(--s25) var(--s25) var(--s25); flex: 1; } .docs-card__title { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); line-height: 1.4; margin: 0; } .docs-card__title a { color: inherit; text-decoration: none; transition: color .15s; } .docs-card__title a:hover { color: var(--color-theme-600); } .docs-card__summary { font-size: var(--fz-s); line-height: 1.7; color: var(--color-ink-2); margin: 0 0 var(--s15); flex: 1; } /* ─── カードアクション (2 ボタン横並び) ─────────────── */ .docs-card__actions { display: flex; gap: var(--s10); align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--s15); border-top: 1px solid var(--color-rule-soft, var(--color-rule)); } .docs-card__link { font-size: var(--fz-s); font-weight: 600; color: var(--color-ink-2); text-decoration: none; letter-spacing: .02em; transition: color .15s; } .docs-card__link:hover { color: var(--color-theme-600); } .docs-card__dl { display: inline-flex; align-items: center; gap: var(--s5); padding: var(--s5) var(--s15) var(--s5) var(--s10); background: var(--color-theme-500); color: #fff; font-size: var(--fz-s); font-weight: 700; letter-spacing: .02em; border-radius: 999px; text-decoration: none; transition: background .15s, transform .1s; } .docs-card__dl:hover { background: var(--color-theme-600); transform: translateY(-1px); } .docs-card__dl small { font-size: var(--fz-2xs); opacity: .85; font-weight: 600; } .docs-card__dl-icon { font-size: var(--fz-m); line-height: 1; } /* disabled (準備中) ボタン */ .docs-card__dl--disabled { background: var(--color-bg-2); color: var(--color-ink-3); cursor: not-allowed; pointer-events: none; } .docs-card__dl--disabled:hover { background: var(--color-bg-2); transform: none; } /* ─── /programs (LP 一覧) のカードはアクション右寄せ単一 ─────── */ .programs-card__actions { justify-content: flex-end; } /* ─── 末尾 fin セクション ─────────────────────────── */ .docs-fin { max-width: 640px; margin: 0 auto; text-align: center; padding: var(--s20) 0; } .docs-fin__lead { font-size: var(--fz-l); color: var(--color-ink); margin: 0 0 var(--s20); line-height: 1.7; } .docs-fin__note { font-size: var(--fz-s); color: var(--color-ink-3); margin: 0 0 var(--s30); line-height: 1.7; } /* ─── スマホ調整 ────────────────────────────────── */ @media (max-width: 640px) { .docs-card__body { padding: var(--s20) var(--s20) var(--s20); } .docs-card__cover-placeholder-num { font-size: var(--fz-5xl); } .docs-card__actions { flex-direction: column; align-items: stretch; gap: var(--s10); } .docs-card__link { text-align: center; } .docs-card__dl { justify-content: center; } } /* ─── 助成金カード（course-corporate） ─── */ .subsidy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s30); margin-top: var(--s35); } .subsidy-card { padding: var(--s35); background: var(--color-theme-500); color: #fff; border-radius: var(--r-md); } .subsidy-card__label { font-family: var(--font-en); font-size: var(--fz-xs); letter-spacing: .14em; color: rgba(255, 255, 255, .85); font-weight: 700; margin: 0 0 var(--s20); } .subsidy-card__title { font-size: var(--fz-l); font-weight: 700; color: #fff; margin: 0 0 var(--s15); line-height: 1.5; } .subsidy-card__body { font-size: var(--fz-s); line-height: 1.85; color: rgba(255, 255, 255, 0.9); margin: 0; } .subsidy-note { margin-top: var(--s30); font-size: var(--fz-s); color: var(--color-ink-3); text-align: center; line-height: 1.85; } .subsidy-note a { color: var(--color-primary-500); text-decoration: underline; } @media (max-width: 767px) { .subsidy-grid { grid-template-columns: 1fr; } } /* ==== legal.css ==== */ /* ════════════════════════════════════════════════════════ Legal / 静的ページ専用スタイル - /privacy (プライバシーポリシー) - 将来: /terms (利用規約) 等 ═══════════════════════════════════════════════════════ */ /* ─── 番号付き条文リスト (legal-list) ────────────────────── */ .legal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s20); } .legal-list__item { display: flex; align-items: center; gap: var(--s25); padding: var(--s30) var(--s30); background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; } .legal-list__num { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-size: var(--fz-xl); font-weight: 700; color: var(--color-theme-700); background: var(--color-bg-sage); border-radius: 50%; } .legal-list__body { flex: 1; font-size: var(--fz-m); line-height: 1.85; color: var(--color-ink); } /* ─── 連絡先ブロック (legal-contact) ─────────────────────── */ .legal-contact { max-width: 640px; margin: 0 auto; padding: var(--s40) var(--s35); background: var(--color-bg-sage); border-left: 3px solid var(--color-theme-500); border-radius: 0 4px 4px 0; text-align: center; } .legal-contact__lead { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--s15); } .legal-contact__body { font-size: var(--fz-s); color: var(--color-ink-2); margin: 0 0 var(--s30); line-height: 1.85; } .legal-contact__address { font-size: var(--fz-m); color: var(--color-ink); line-height: 2; margin: 0; } .legal-contact__address strong { font-weight: 700; color: var(--color-ink); } /* ─── レスポンシブ ─────────────────────────────────────── */ @media (max-width: 640px) { .legal-list__item { flex-direction: column; gap: var(--s15); padding: var(--s25) var(--s25); } .legal-list__num { width: 36px; height: 36px; font-size: var(--fz-l); } .legal-contact { padding: var(--s35) var(--s30); } } /* ==== about.css ==== */ /* ════════════════════════════════════════════════════════ About 系ページ専用スタイル - /about (TOP) - /about/ceo / /about/history / /about/awards / /about/media - /about/evidence / /about/network / /about/partners ═══════════════════════════════════════════════════════ */ /* ─── 汎用ユーティリティ (about 系で頻出のインラインスタイルを置換) ─── */ .subsec__narrow { max-width: 720px; margin-left: auto; margin-right: auto; } .subsec__narrow--sm { max-width: 640px; margin-left: auto; margin-right: auto; } .cta-actions { display: flex; justify-content: center; gap: var(--s15); flex-wrap: wrap; } .cta-actions--mt-lg { margin-top: var(--s40); } .mt-32 { margin-top: var(--s35); } .mt-mb-32 { margin-top: var(--s35); margin-bottom: var(--s35); } /* ─── 01 Identity (mission / vision / motto) カード3枚 ─── */ .about-identity { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s25); margin-bottom: var(--s40); } .about-identity__card { background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--s35) var(--s30); display: flex; flex-direction: column; gap: var(--s15); } .about-identity__card--motto { background: var(--color-bg-sage); border-color: var(--color-theme-200); } .about-identity__label { font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-theme-600); margin: 0; } .about-identity__title { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0; } .about-identity__body { font-size: var(--fz-l); line-height: 1.85; color: var(--color-ink); margin: 0; font-weight: 500; } @media (max-width: 960px) { .about-identity { grid-template-columns: 1fr; gap: var(--s20); } .about-identity__card { padding: var(--s30) var(--s25); } } /* ─── Credo (行動指針 3 項目) ─── */ .about-credo { background: #fff; border-left: 3px solid var(--color-theme-500); border-radius: 0 4px 4px 0; padding: var(--s35) var(--s35); } .about-credo__label { font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-theme-600); margin: 0 0 var(--s5); } .about-credo__lead { font-size: var(--fz-m); color: var(--color-ink-2); margin: 0 0 var(--s25); line-height: 1.7; } .about-credo__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s20); } .about-credo__item { display: flex; gap: var(--s25); align-items: center; padding: var(--s20) 0; border-top: 1px solid var(--color-rule); } .about-credo__num { flex-shrink: 0; font-family: var(--font-en); font-size: var(--fz-2xl); font-weight: 700; color: var(--color-theme-500); letter-spacing: .04em; width: 48px; } .about-credo__body { flex: 1; font-size: var(--fz-m); line-height: 1.85; color: var(--color-ink); margin: 0; } @media (max-width: 640px) { .about-credo { padding: var(--s30) var(--s25); } .about-credo__item { gap: var(--s15); } .about-credo__num { font-size: var(--fz-xl); width: 32px; } } /* ─── Leadership (役員カード) ─── */ .about-leadership { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s20); } @media (max-width: 1024px) { .about-leadership { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .about-leadership { grid-template-columns: 1fr; } } .about-leadership__card { background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--s30) var(--s30); display: flex; flex-direction: column; gap: var(--s5); } .about-leadership__role { font-size: var(--fz-s); font-weight: 700; color: var(--color-theme-600); margin: 0; } .about-leadership__name { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0; } .about-leadership__name small { font-size: var(--fz-s); font-weight: 500; color: var(--color-ink-3); margin-left: var(--s5); } .about-leadership__desc { font-size: var(--fz-s); color: var(--color-ink-2); margin: 0; line-height: 1.6; } /* ─── Theory of Change 本文 ─── */ /* 階段状の表現は programs LP と共通の .flow / .flow__step を流用 */ .about-toc-body { max-width: 720px; margin: 0 auto; font-size: var(--fz-m); line-height: 1.95; color: var(--color-ink); } .about-toc-body p { margin: 0 0 var(--s20); } .about-toc-body p:last-child { margin-bottom: 0; } .about-toc-body strong { color: var(--color-theme-700); font-weight: 700; } /* ─── Structure (組織構造の用語説明) ─── */ .about-structure { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s20); margin-bottom: var(--s30); } @media (max-width: 640px) { .about-structure { grid-template-columns: 1fr; } } .about-structure__card { background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--s30) var(--s30); text-align: center; display: flex; flex-direction: column; gap: var(--s10); } .about-structure__term { font-size: var(--fz-l); font-weight: 700; color: var(--color-theme-600); margin: 0; } .about-structure__body { font-size: var(--fz-s); line-height: 1.7; color: var(--color-ink-2); margin: 0; } .about-structure__lead { max-width: 720px; margin: 0 auto; text-align: center; font-size: var(--fz-s); color: var(--color-ink-2); line-height: 1.85; } /* ─── Timeline (沿革・歩み) ─── */ .about-timeline { list-style: none; padding: 0; margin: 0 auto; max-width: 720px; position: relative; } .about-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 84px; width: 2px; background: var(--color-theme-200); } .about-timeline__item { display: flex; align-items: flex-start; gap: var(--s30); padding: var(--s15) 0; position: relative; } .about-timeline__year { flex-shrink: 0; font-family: var(--font-en); font-size: var(--fz-2xl); font-weight: 700; color: var(--color-theme-600); letter-spacing: .04em; position: relative; padding-left: 0; } .about-timeline__year::after { content: ""; position: absolute; top: 12px; left: 80px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--color-theme-500); } .about-timeline__item--current .about-timeline__year::after { background: var(--color-theme-500); } .about-timeline__body { flex: 1; font-size: var(--fz-m); line-height: 1.85; color: var(--color-ink); margin: 0; padding-left: var(--s30); } .about-timeline__item--current .about-timeline__body { font-weight: 700; color: var(--color-theme-700); } /* ─── /about/history Phase + Related カード ─── */ .history-phase { max-width: 720px; margin: 0 auto var(--s40); } /* history はラベル長 (2007.09.20 / 2015〜2017 / 2011.10〜 等) が混在するため、 年カラムを固定幅で揃える。線・ドット位置もそれに合わせて再配置 (4px オフセット保持)。 */ .history-phase .about-timeline__year { width: 140px; } .history-phase .about-timeline::before { left: 154px; } .history-phase .about-timeline__year::after { left: 150px; } .history-phase:last-child { margin-bottom: 0; } .history-phase__label { font-family: var(--font-en); font-size: var(--fz-s); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-theme-600); margin: 0 0 var(--s5); } .history-phase__title { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--s25); padding-bottom: var(--s10); border-bottom: 1.5px solid var(--color-theme-200); } .about-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s20); } @media (max-width: 960px) { .about-related { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .about-related { grid-template-columns: 1fr; } } .about-related__card { display: flex; flex-direction: column; gap: var(--s5); padding: var(--s25) var(--s30); background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; text-decoration: none; position: relative; transition: border-color .15s, box-shadow .15s; } .about-related__card:hover { border-color: var(--color-theme-300); box-shadow: 0 4px 16px rgba(0,0,0,.06); } .about-related__label { font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-theme-600); } .about-related__title { font-size: var(--fz-m); font-weight: 700; color: var(--color-ink); } .about-related__arrow { position: absolute; top: 22px; right: 24px; color: var(--color-theme-500); font-size: var(--fz-l); font-weight: 700; transition: transform .15s; } .about-related__card:hover .about-related__arrow { transform: translateX(4px); } /* ════════════════════════════════════════════════════════ /about/awards 専用スタイル ═══════════════════════════════════════════════════════ */ /* ─── ハイライト 5 件 (2 列 / 大カード) ─── */ .awards-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s25); } @media (max-width: 960px) { .awards-highlights { grid-template-columns: 1fr; } } .awards-highlight { background: #fff; border: 1px solid var(--color-rule); border-left: 3px solid var(--color-theme-500); border-radius: 0 4px 4px 0; padding: var(--s30) var(--s35); display: flex; flex-direction: column; gap: var(--s10); } .awards-highlight__year { font-family: var(--font-en); font-size: var(--fz-s); font-weight: 700; letter-spacing: .08em; color: var(--color-theme-600); margin: 0; } .awards-highlight__title { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0; line-height: 1.5; } .awards-highlight__body { font-size: var(--fz-s); line-height: 1.85; color: var(--color-ink-2); margin: 0; } @media (max-width: 640px) { .awards-highlight { padding: var(--s25) var(--s30); } } /* ─── 年代別 受賞・助成 一覧 ─── */ .awards-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s35); } .awards-list__group { display: flex; gap: var(--s30); padding: var(--s25) 0; border-top: 1px solid var(--color-rule); } .awards-list__group:first-child { border-top: none; } .awards-list__year { flex-shrink: 0; width: 100px; font-family: var(--font-en); font-size: var(--fz-2xl); font-weight: 700; color: var(--color-theme-600); letter-spacing: .04em; margin: 0; } .awards-list__items { flex: 1; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s10); } .awards-list__items li { font-size: var(--fz-m); line-height: 1.85; color: var(--color-ink); padding-left: var(--s20); position: relative; } .awards-list__items li::before { content: ""; position: absolute; top: 10px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--color-theme-400); } .awards-list__items strong { color: var(--color-theme-700); font-weight: 700; } @media (max-width: 640px) { .awards-list__group { flex-direction: column; gap: var(--s15); padding: var(--s20) 0; } .awards-list__year { width: auto; font-size: var(--fz-xl); } } /* ─── 行政受託エリア (region) ─── */ .awards-region { max-width: 880px; margin: 0 auto var(--s40); background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--s30) var(--s35); } .awards-region:last-child { margin-bottom: 0; } .awards-region__label { font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-theme-600); margin: 0 0 var(--s5); } .awards-region__title { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--s25); padding-bottom: var(--s10); border-bottom: 1.5px solid var(--color-theme-200); } .awards-region__title small { font-size: var(--fz-s); font-weight: 500; color: var(--color-ink-3); margin-left: var(--s10); } .awards-region__sub { font-size: var(--fz-m); font-weight: 700; color: var(--color-theme-700); margin: var(--s30) 0 var(--s15); } .awards-region__sub:first-of-type { margin-top: 0; } /* テーブル風 key/val ペア */ .awards-region__table { display: flex; flex-direction: column; margin-bottom: var(--s15); } .awards-row { display: flex; gap: var(--s25); padding: var(--s15) 0; border-top: 1px solid var(--color-rule); } .awards-row:first-child { border-top: none; } .awards-row__key { flex-shrink: 0; width: 140px; font-size: var(--fz-s); font-weight: 700; color: var(--color-theme-700); line-height: 1.7; } /* awards-row__key の強調バリアント (projects ページの Layer 図など) */ .awards-row__key--sage { background: var(--color-bg-sage); } .awards-row__key--accent { background: var(--color-theme-100); color: var(--color-theme-700); } .awards-row__val { flex: 1; font-size: var(--fz-s); line-height: 1.85; color: var(--color-ink); } .awards-row__val strong { color: var(--color-theme-700); font-weight: 700; } /* awards-row__val 内の補足キャプション (jenaplan のスケジュール詳細など) */ .awards-row__detail { color: var(--color-ink-2); font-size: var(--fz-s); } /* ─── /about/media 専用 (メディア引用ブロック) ─── */ /* CEO メッセージ用の .ceo-msg と意味的に別物 (取材引用) なので独立 Block。 */ .media-quote { margin: 0 0 var(--s20); padding: var(--s30) var(--s30); background: var(--color-bg-paper); border-left: 3px solid var(--color-theme-500); border-radius: 0 4px 4px 0; } .media-quote:last-child { margin-bottom: 0; } .media-quote__title { margin: 0 0 var(--s10); font-size: var(--fz-m); font-weight: 700; line-height: 1.7; color: var(--color-ink); } .media-quote__body { margin: 0; font-size: var(--fz-s); line-height: 1.85; color: var(--color-ink-2); } .media-plain { margin: 0; font-size: var(--fz-m); line-height: 1.85; color: var(--color-ink); } /* ════════════════════════════════════════════════════════ /about/evidence 専用スタイル ═══════════════════════════════════════════════════════ */ .evidence-partner { max-width: 720px; margin: 0 auto; } .evidence-partner__profile { background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--s30) var(--s30); margin: 0 0 var(--s30); } .evidence-partner__row { display: flex; gap: var(--s20); padding: var(--s15) 0; border-top: 1px solid var(--color-rule); } .evidence-partner__row:first-child { border-top: none; } .evidence-partner__row dt { flex-shrink: 0; width: 80px; font-size: var(--fz-s); font-weight: 700; color: var(--color-theme-700); line-height: 1.8; } .evidence-partner__row dd { flex: 1; margin: 0; font-size: var(--fz-m); line-height: 1.8; color: var(--color-ink); } .evidence-quote { margin: var(--s20) 0 0; padding: var(--s25) var(--s30); background: var(--color-bg-sage); border-left: 3px solid var(--color-theme-500); border-radius: 0 4px 4px 0; } .evidence-quote p { margin: 0 0 var(--s15); font-size: var(--fz-m); line-height: 1.95; color: var(--color-ink); } .evidence-quote p:last-child { margin-bottom: 0; } .evidence-quote__attr { margin-top: var(--s15) !important; font-size: var(--fz-s) !important; font-weight: 700; color: var(--color-theme-700) !important; text-align: right; } /* 研究 1 件分のラッパー */ .evidence-study { max-width: 880px; margin: 0 auto; } .evidence-study__meta { background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--s30) var(--s30); margin-bottom: var(--s30); } .evidence-study__meta-title { font-size: var(--fz-m); font-weight: 700; color: var(--color-theme-700); margin: 0 0 var(--s15); } .evidence-meta-list { margin: 0; } .evidence-meta-list > div { display: flex; gap: var(--s20); padding: var(--s10) 0; border-top: 1px solid var(--color-rule); } .evidence-meta-list > div:first-child { border-top: none; } .evidence-meta-list dt { flex-shrink: 0; width: 64px; font-size: var(--fz-s); font-weight: 700; color: var(--color-theme-700); } .evidence-meta-list dd { flex: 1; margin: 0; font-size: var(--fz-s); line-height: 1.85; color: var(--color-ink); } .evidence-study__title { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--s20); } .evidence-substudy__title { font-size: var(--fz-m); font-weight: 700; color: var(--color-theme-700); margin: var(--s30) 0 var(--s15); } /* 数値メトリクス 3 列カード */ .evidence-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s20); margin: 0 0 var(--s30); } @media (max-width: 960px) { .evidence-metrics { grid-template-columns: 1fr; } } .evidence-metric { background: var(--color-bg-paper); border: 1px solid var(--color-theme-200); border-radius: 4px; padding: var(--s30) var(--s30); text-align: center; } .evidence-metric__num { margin: 0; font-family: var(--font-en); font-size: var(--fz-5xl); font-weight: 800; letter-spacing: .02em; color: var(--color-theme-700); line-height: 1.2; } .evidence-metric__num small { font-size: var(--fz-xl); font-weight: 700; } .evidence-metric__label { margin: var(--s10) 0 var(--s5); font-size: var(--fz-m); font-weight: 700; color: var(--color-ink); } .evidence-metric__desc { margin: 0; font-size: var(--fz-s); color: var(--color-ink-2); line-height: 1.7; } .evidence-notes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s5); } .evidence-notes li { font-size: var(--fz-s); line-height: 1.85; color: var(--color-ink); padding-left: var(--s20); position: relative; } .evidence-notes li::before { content: ""; position: absolute; top: 9px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--color-theme-400); } .evidence-notes strong { color: var(--color-theme-700); font-weight: 700; } .evidence-region__table { display: flex; flex-direction: column; margin-bottom: var(--s15); } /* ════════════════════════════════════════════════════════ /about/network 専用スタイル ═══════════════════════════════════════════════════════ */ .network-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s20); } @media (max-width: 960px) { .network-stats { grid-template-columns: repeat(2, 1fr); } } .network-stat { background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--s30) var(--s25); text-align: center; display: flex; flex-direction: column; gap: var(--s5); } .network-stat__num { font-family: var(--font-en); font-size: var(--fz-5xl); font-weight: 800; color: var(--color-theme-700); letter-spacing: .02em; line-height: 1; } .network-stat__label { font-size: var(--fz-m); font-weight: 700; color: var(--color-ink); } .network-stat__desc { font-size: var(--fz-xs); color: var(--color-ink-3); } .network-schools { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s25); } @media (max-width: 768px) { .network-schools { grid-template-columns: 1fr; } } .network-school { background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--s30) var(--s30); display: flex; flex-direction: column; gap: var(--s15); } .network-school__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s15); border-bottom: 1px solid var(--color-rule); padding-bottom: var(--s15); } .network-school__pref { display: inline-block; font-size: var(--fz-xs); font-weight: 700; color: var(--color-theme-600); background: var(--color-bg-sage); padding: 2px var(--s10); border-radius: 999px; margin-bottom: var(--s5); } .network-school__name { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0; } .network-school__fb { flex-shrink: 0; font-family: var(--font-en); font-size: var(--fz-xs); font-weight: 700; letter-spacing: .04em; color: var(--color-theme-600); text-decoration: none; } .network-school__fb:hover { text-decoration: underline; } .network-school__agencies { display: flex; flex-direction: column; gap: var(--s10); } .network-school__agencies-label { font-size: var(--fz-s); font-weight: 700; color: var(--color-theme-700); margin: 0; } .network-school__agencies-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s5) var(--s15); } .network-school__agencies-list li { font-size: var(--fz-s); color: var(--color-ink-2); line-height: 1.6; padding-left: var(--s15); position: relative; } .network-school__agencies-list li::before { content: "·"; position: absolute; left: 0; color: var(--color-theme-400); } /* ─── 都道府県フィルタ UI ─── */ .network-filter { display: flex; align-items: center; gap: var(--s15); flex-wrap: wrap; max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--s20) var(--s30); } .network-filter__label { font-size: var(--fz-s); font-weight: 700; color: var(--color-theme-700); flex-shrink: 0; } .network-filter__select { flex: 1; min-width: 200px; padding: var(--s10) var(--s15); background: var(--color-bg-paper); border: 1.5px solid var(--color-rule); border-radius: 4px; font-size: var(--fz-m); font-family: inherit; color: var(--color-ink); cursor: pointer; appearance: auto; } .network-filter__select:focus { outline: none; border-color: var(--color-theme-500); background: #fff; } .network-filter__reset { font-size: var(--fz-s); font-weight: 700; color: var(--color-theme-600); text-decoration: none; padding: var(--s10) var(--s15); border: 1px solid var(--color-theme-200); border-radius: 999px; background: var(--color-bg-sage); } .network-filter__reset:hover { background: var(--color-theme-50); border-color: var(--color-theme-300); } .network-filter__result { max-width: 720px; margin: var(--s20) auto 0; text-align: center; font-size: var(--fz-s); color: var(--color-ink-2); } .network-filter__result strong { color: var(--color-theme-700); font-weight: 700; } /* ─── 学級チップ (sub-card 風) ─── */ .network-school__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s5); } .network-school__chip { font-size: var(--fz-s); line-height: 1.5; } /* 矢印は pill の中に置く (中ネストの border は付けない)。 リンク無しは透明 placeholder で同サイズを保つ。 */ .network-school__chip-pill { display: inline-flex; align-items: center; gap: var(--s5); padding: var(--s5) var(--s15); background: var(--color-bg-sage); border: 1px solid var(--color-theme-200); border-radius: 999px; font-weight: 500; line-height: 1.4; text-decoration: none; color: var(--color-ink); } a.network-school__chip-pill { color: var(--color-theme-700); transition: background .15s, border-color .15s; } a.network-school__chip-pill:hover { background: var(--color-theme-50); border-color: var(--color-theme-400); } .network-school__chip-name { display: inline-block; } .network-school__chip-arrow { font-size: var(--fz-xs); font-weight: 700; color: var(--color-theme-600); line-height: 1; } .network-school__agencies-empty { font-size: var(--fz-s); color: var(--color-ink-3); font-style: italic; margin: 0; } /* 学校がない都道府県の empty state */ .network-empty { grid-column: 1 / -1; text-align: center; padding: var(--s40) var(--s30); background: var(--color-bg-paper); border: 1px dashed var(--color-rule); border-radius: 4px; } .network-empty__title { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--s10); } .network-empty__body { font-size: var(--fz-s); color: var(--color-ink-2); line-height: 1.85; margin: 0 0 var(--s30); } /* ════════════════════════════════════════════════════════ /about/partners 専用スタイル ═══════════════════════════════════════════════════════ */ .partners-block { max-width: 880px; margin: 0 auto var(--s35); background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--s30) var(--s35); } .partners-block:last-child { margin-bottom: 0; } .partners-block__title { font-size: var(--fz-l); font-weight: 700; color: var(--color-theme-700); margin: 0 0 var(--s20); padding-bottom: var(--s10); border-bottom: 1.5px solid var(--color-theme-200); } .partners-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s10); } .partners-list--cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s10) var(--s30); } @media (max-width: 640px) { .partners-list--cols { grid-template-columns: 1fr; } } .partners-list li { font-size: var(--fz-m); line-height: 1.85; color: var(--color-ink); padding-left: var(--s20); position: relative; } .partners-list li::before { content: ""; position: absolute; top: 10px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--color-theme-400); } .partners-list strong { color: var(--color-theme-700); font-weight: 700; } /* スポンサー 3 ティア */ .partners-tiers { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s20); } @media (max-width: 960px) { .partners-tiers { grid-template-columns: 1fr; } } .partners-tier { background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--s30) var(--s30); text-align: center; display: flex; flex-direction: column; gap: var(--s10); } .partners-tier__price { margin: 0; font-family: var(--font-en); font-size: var(--fz-2xl); font-weight: 800; color: var(--color-theme-700); letter-spacing: .02em; line-height: 1.2; } .partners-tier__price small { font-size: var(--fz-s); font-weight: 600; color: var(--color-ink-3); margin-left: var(--s5); } .partners-tier__name { font-size: var(--fz-l); font-weight: 700; color: var(--color-ink); margin: 0; } .partners-tier__desc { font-size: var(--fz-s); line-height: 1.7; color: var(--color-ink-2); margin: 0; } /* 「3 年以上継続」等の小バッジ */ .awards-tag { display: inline-block; margin-left: var(--s10); padding: 2px var(--s10); background: var(--color-theme-50); color: var(--color-theme-700); border: 1px solid var(--color-theme-200); border-radius: 999px; font-family: var(--font-jp); font-size: var(--fz-2xs); font-weight: 700; letter-spacing: .04em; vertical-align: 1px; white-space: nowrap; } @media (max-width: 640px) { .awards-region { padding: var(--s25) var(--s25); } .awards-row { flex-direction: column; gap: var(--s5); padding: var(--s15) 0; } .awards-row__key { width: auto; font-size: var(--fz-s); } } /* ════════════════════════════════════════════════════════ /about/ceo 専用スタイル ═══════════════════════════════════════════════════════ */ /* ─── CEO ヒーロー: 縦中央寄せの肖像写真 + ビューポート幅連動の高さ ─── */ .page-hero--ceo { /* 広い画面では写真の上下が切れないよう、幅に応じた高さを確保 */ min-height: 35vw; } .page-hero--ceo .page-hero__bg-stage img { /* 既定の object-position: center 25% (顔上半身向け) を上下中央へ override */ object-position: center center; } /* ─── 代表メッセージ本文 (1 つの blockquote に複数

) ─── */ .ceo-msg { max-width: 720px; margin: 0 auto; padding: var(--s35) var(--s35); background: #fff; border-left: 3px solid var(--color-theme-500); border-radius: 0 4px 4px 0; font-size: var(--fz-l); line-height: 2; color: var(--color-ink); } .ceo-msg p { margin: 0 0 var(--s25); } .ceo-msg p:last-child { margin-bottom: 0; } .ceo-msg__sign { margin-top: var(--s30) !important; text-align: right; font-size: var(--fz-l); font-weight: 700; color: var(--color-theme-700); } @media (max-width: 640px) { .ceo-msg { padding: var(--s30) var(--s25); font-size: var(--fz-m); line-height: 1.95; } } /* ─── 経歴リスト ─── */ .ceo-profile { max-width: 720px; margin: 0 auto; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0; } .ceo-profile__item { display: flex; align-items: baseline; gap: var(--s30); padding: var(--s20) 0; border-bottom: 1px solid var(--color-rule); } .ceo-profile__item:last-child { border-bottom: none; } .ceo-profile__year { flex-shrink: 0; font-family: var(--font-en); font-size: var(--fz-l); font-weight: 700; color: var(--color-theme-600); letter-spacing: .04em; min-width: 96px; } .ceo-profile__body { flex: 1; font-size: var(--fz-m); line-height: 1.85; color: var(--color-ink); margin: 0; } @media (max-width: 640px) { .ceo-profile__item { flex-direction: column; gap: var(--s5); padding: var(--s15) 0; } .ceo-profile__year { min-width: 0; font-size: var(--fz-m); } } /* ─── 講師・登壇歴 (3 カラム) ─── */ .ceo-speaking { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s30); } @media (max-width: 960px) { .ceo-speaking { grid-template-columns: 1fr; gap: var(--s20); } } .ceo-speaking__col { background: #fff; border: 1px solid var(--color-rule); border-radius: 4px; padding: var(--s30) var(--s30); } .ceo-speaking__col-title { font-size: var(--fz-m); font-weight: 700; color: var(--color-theme-700); margin: 0 0 var(--s20); padding-bottom: var(--s10); border-bottom: 1.5px solid var(--color-theme-200); } .ceo-speaking__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s10); } .ceo-speaking__list li { font-size: var(--fz-s); line-height: 1.7; color: var(--color-ink); padding-left: var(--s20); position: relative; } .ceo-speaking__list li::before { content: ""; position: absolute; top: 9px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--color-theme-400); } /* ==== gallery.css ==== */ /* ════════════════════════════════════════════════════════ Gallery ページ専用スタイル (/gallery) 構造: - ヒーロー (.page-hero--compact) ※共通 - 正方形グリッド (.gallery-grid) - ライトボックス (.lightbox) — JS (initGalleryLightbox) で制御 流用する既存クラス: .breadcrumb / .page-hero / .subsec ═══════════════════════════════════════════════════════ */ /* ─── グリッド ─────────────────────────────────────── */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s15); list-style: none; margin: 0; padding: 0; } @media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s10); } } .gallery-grid__item { margin: 0; padding: 0; } /* クリック可能なサムネ (button でラップしてキーボード操作可) */ .gallery-grid__btn { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: none; border-radius: var(--r-md); overflow: hidden; background: var(--color-bg-2); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; } .gallery-grid__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, .12); } .gallery-grid__btn:focus-visible { outline: 2px solid var(--color-theme-500); outline-offset: 2px; } .gallery-grid__btn img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .gallery-grid__btn:hover img { transform: scale(1.05); } .gallery__empty { text-align: center; font-size: var(--fz-m); color: var(--color-ink-3); padding: var(--s40) 0; } /* ─── ホームのギャラリーティーザー ───────────────────── */ .home-gallery { background: #fff; padding: var(--s60) 0; } .home-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s15); list-style: none; margin: 0 0 var(--s40); padding: 0; } @media (max-width: 1024px) { .home-gallery__grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .home-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s10); } } .home-gallery__item { margin: 0; padding: 0; } .home-gallery__item a { display: block; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: var(--color-bg-2); } .home-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .home-gallery__item a:hover img { transform: scale(1.05); } /* ─── ライトボックス ─────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--s30); } .lightbox[hidden] { display: none; } .lightbox__backdrop { position: absolute; inset: 0; background: rgba(20, 16, 14, .88); cursor: zoom-out; } .lightbox__figure { position: relative; z-index: 1; margin: 0; max-width: min(90vw, 900px); max-height: 88vh; display: flex; flex-direction: column; align-items: center; } .lightbox__img { display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: var(--r-md); box-shadow: 0 12px 48px rgba(0, 0, 0, .5); } .lightbox__caption { margin-top: var(--s15); color: rgba(255, 255, 255, .85); font-size: var(--fz-s); letter-spacing: .04em; } /* 閉じるボタン (右上) */ .lightbox__close { position: absolute; top: 16px; right: 20px; z-index: 2; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: var(--fz-3xl); line-height: 1; cursor: pointer; transition: background .15s ease; } .lightbox__close:hover { background: rgba(255, 255, 255, .25); } /* 前/次ボタン */ .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: var(--fz-3xl); line-height: 1; cursor: pointer; transition: background .15s ease; } .lightbox__nav:hover { background: rgba(255, 255, 255, .25); } .lightbox__nav--prev { left: 16px; } .lightbox__nav--next { right: 16px; } @media (max-width: 640px) { .lightbox__nav { width: 42px; height: 42px; font-size: var(--fz-3xl); } .lightbox__nav--prev { left: 6px; } .lightbox__nav--next { right: 6px; } .lightbox__close { top: 8px; right: 8px; } }