/* Hallmark · macrostructure: Narrative Workflow（写真ヒーロー＋分析/設計/制作/運用の4段階） * genre: editorial · nav: N9 エッジ揃えマストヘッド · footer: Ft2 インライン1行 * theme: custom（paper #FCFDFE · accent gold #C2A25E ／ 明背景上は #85682B * · Zen Old Mincho 600 + Noto Sans JP 400/500/700） * design-system: HERM_デザインガイド_v1.md（色・タイポ・余白の一次情報はこちら） * 備考: 新規ビルドではなく既存ページの監査・是正。上記は「実際に出荷されている形」の記録であり、 * 構造を変える改修を入れたらこのスタンプも必ず更新すること */ /* ===== HERM Consulting 共通スタイル ===== */ /* ファーストビュー用フォントサブセット（tools/subset_fonts.py で生成） 含まれない文字は後続の 'Noto Sans JP' / 'Zen Old Mincho'（fonts.css・非同期）で表示される */ @font-face { font-family: 'Noto Sans JP Subset'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/NotoSansJP-400.subset.woff2') format('woff2'); } @font-face { font-family: 'Noto Sans JP Subset'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/NotoSansJP-500.subset.woff2') format('woff2'); } @font-face { font-family: 'Noto Sans JP Subset'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/NotoSansJP-700.subset.woff2') format('woff2'); } @font-face { font-family: 'Zen Old Mincho Subset'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ZenOldMincho-600.subset.woff2') format('woff2'); } /* 700はファーストビューではロゴ英文（.logo__en）にしか使わないため中身はASCIIのみ。 他の700指定は全てファーストビュー外で、fonts.css 側の全ページ用フォントが受ける */ @font-face { font-family: 'Zen Old Mincho Subset'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ZenOldMincho-700.subset.woff2') format('woff2'); } :root { --navy: #0B2C50; --navy-deep: #061D38; --navy-light: #1D4A7A; --gold: #C2A25E; --gold-deep: #85682B; --ink: #1F2933; --gray: #5B6770; --mist: #EDF1F5; --white: #FFFFFF; /* --paper：面（body・カード等）の地色。純白は平坦に見えるため基調のネイビー側へ ごくわずかに寄せる。--white は暗背景上のテキスト色として引き続き使うので分離する */ --paper: #FCFDFE; --line: #D8DEE4; --line-strong: #C5CDD4; /* フォームのエラー表示専用。他の色と役割が異なる（警告色）ため独立トークンとして定義 */ --red: #A02525; --red-bg: #FBEAEA; --red-border: #E3A0A0; --serif: 'Zen Old Mincho Subset', 'Zen Old Mincho', serif; --sans: 'Noto Sans JP Subset', 'Noto Sans JP', sans-serif; /* モーション：ブラウザ既定の ease は使わず、下記の名前付きイージングに統一する */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-short: 160ms; --dur-mid: 260ms; --dur-reveal: 460ms; } * { margin: 0; padding: 0; box-sizing: border-box; } /* overflow-x は hidden ではなく clip。hidden はスクロールコンテナを生成してしまい、 position:sticky や scroll-behavior:smooth の挙動を壊すため */ html, body { overflow-x: clip; } html { scroll-behavior: smooth; } body { font-family: var(--sans); color: var(--ink); line-height: 1.8; font-size: 16px; background: var(--paper); } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } /* Focus キーボード操作時のみリングを出す（:focus-visible）。明背景は --gold-deep、 暗背景（ヒーロー・CTA・フッター・ページヘッダー）は --gold で 3:1 以上を確保。 リングは transition を持たせない——フォーカス移動の瞬間に見えないと意味がないため */ :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; } .hero :focus-visible, .cta :focus-visible, .footer :focus-visible, .page-header :focus-visible, .map-main:focus-visible { outline-color: var(--gold); } .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* Buttons */ .btn { display: inline-block; background: var(--navy); color: var(--white); padding: 14px 36px; border-radius: 4px; font-weight: 500; font-size: 15px; letter-spacing: 0.05em; transition: background var(--dur-mid) var(--ease-out), transform var(--dur-short) var(--ease-out); } .btn:hover { background: var(--navy-light); transform: translateY(-1px); } .btn:disabled { background: var(--line-strong); color: var(--gray); cursor: not-allowed; transform: none; } @media (min-width: 861px) { .btn { padding: 11px 36px; } } .btn--gold { background: var(--gold); color: var(--navy-deep); } .btn--gold:hover { background: #D4B876; } .btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,.6); } .btn--ghost:hover { background: rgba(255,255,255,.12); } /* Header — エッジ揃えマストヘッド ロゴを左端・ナビを右端まで振り切り、本文コンテナ（1080px）より外側の レールに乗せる。下辺のヘアラインは持たせず、天面のゴールド罫と スクロール時の影だけで面を切る（inset shadow で高さ68pxを崩さない）。 */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); box-shadow: inset 0 2px 0 var(--gold); transition: box-shadow var(--dur-mid) var(--ease-out); } .header.scrolled { box-shadow: inset 0 2px 0 var(--gold), 0 2px 12px rgba(6,29,56,.08); } .header .container { max-width: 1440px; padding: 0 clamp(20px, 3.6vw, 44px); } .header__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .logo { display: flex; align-items: center; gap: 12px; } .logo__mark { height: 40px; width: auto; } .logo__text { display: flex; flex-direction: column; line-height: 1.3; } /* 明朝の小サイズ帯（17〜19px）は 600 ではなく 700 を使う。 Zen Old Mincho は横画が非常に細い古典的な明朝で、600のままだと小さいサイズで 線が痩せ、特にAndroid（Windowsのようなステム太らせ処理が弱い）で読みづらくなる。 「小さいものほど太く」は光学サイズの原則としても正しい。 20px以上の見出し（.sec-title / .hero h1 / .belief h2 / .profile__name 等）は600のまま */ .logo__en { font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--navy); letter-spacing: 0.03em; white-space: nowrap; } .logo__ja { font-size: 10.5px; color: var(--gray); letter-spacing: 0.14em; white-space: nowrap; } @media (max-width: 480px) { .logo__en { font-size: 16px; } .logo__ja { font-size: 9px; letter-spacing: 0.08em; } } .nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; } .nav a:not(.btn) { color: var(--ink); position: relative; padding: 4px 0; } .nav a:not(.btn)::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--gold); transition: width var(--dur-mid) var(--ease-out); } .nav a:not(.btn):hover::after { width: 100%; } /* テキストリンク群とCTAを1本のリズムで並べず、間を空けて2グループに割る */ .nav .btn { padding: 10px 24px; font-size: 13px; margin-left: 20px; } .nav-toggle { display: none; } /* Section base */ section { padding: 72px 0; } .sec-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; color: var(--gold-deep); margin-bottom: 12px; } .sec-title { font-family: var(--serif); font-size: clamp(22px, 2.7vw, 28px); font-weight: 600; color: var(--navy); letter-spacing: 0.05em; margin-bottom: 20px; line-height: 1.5; } .sec-lead { color: var(--gray); max-width: 760px; margin-bottom: 32px; } /* Page header（下層ページ共通） */ .page-header { position: relative; background: var(--navy-deep); color: var(--white); padding: 72px 0 56px; margin-top: 68px; overflow: hidden; } .page-header::before { content: ''; position: absolute; inset: 0; background: url('img/hero.webp') center / cover no-repeat; opacity: .32; } .page-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(92deg, var(--navy-deep) 32%, rgba(6,29,56,.55) 68%, rgba(6,29,56,.25) 100%); } .page-header .container { position: relative; z-index: 1; } .page-header .ghost { position: absolute; right: -8px; bottom: -50px; z-index: 0; font-size: clamp(64px, 9vw, 110px); font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,.04); line-height: 1; white-space: nowrap; pointer-events: none; user-select: none; } .page-header h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 500; letter-spacing: 0.12em; border-left: 3px solid var(--gold); padding-left: 20px; line-height: 1.4; } .breadcrumb { font-size: 13px; font-weight: 700; color: var(--gold); margin-bottom: 8px; letter-spacing: 0.22em; } .breadcrumb .sep { margin: 0 6px; color: rgba(255,255,255,.35); } .breadcrumb a:hover { color: var(--white); } .badge-cert { display: inline-block; background: var(--navy); color: var(--white); font-size: 13px; padding: 6px 16px; border-radius: 999px; margin-bottom: 12px; letter-spacing: 0.05em; } /* 汎用コンポーネント */ .split { display: grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start; } .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* 片側だけ太い色帯（border-top: 3px）はやめ、全周ヘアラインで囲う。 面の明度差（--paper と --mist）と罫線だけでカードを立たせる */ .card { background: var(--paper); border-radius: 8px; padding: 32px 28px; border: 1px solid var(--line-strong); } .card h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 12px; line-height: 1.6; } .card p { font-size: 14px; color: var(--gray); } .tag { display: inline-block; font-size: 11px; font-weight: 500; color: var(--navy); background: rgba(11,44,80,.07); border-radius: 999px; padding: 4px 12px; letter-spacing: 0.03em; } /* FAQアコーディオン（faq.html / services.html 共用） details/summary ベース。外側のラッパー幅（.faq__list / .svc-faq__list）は ページごとに違うのでここでは持たず、各ページ側に残す */ .faq-item { border-bottom: 1px solid var(--line); } .faq-item:first-of-type { border-top: 1px solid var(--line); } .faq-item summary { display: flex; gap: 14px; align-items: baseline; position: relative; padding: 22px 40px 22px 0; cursor: pointer; list-style: none; font-size: 16px; font-weight: 500; color: var(--navy); line-height: 1.7; } .faq-item summary::-webkit-details-marker { display: none; } /* 開閉インジケータ。閉＝下向きV、開＝上向きV（180度回転） */ .faq-item summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: translateY(-70%) rotate(45deg); transition: transform var(--dur-mid) var(--ease-out); } .faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); } /* 17px = 明朝の最小サイズ。小サイズ帯なので700（.logo__en のコメント参照） */ .faq__q, .faq__a-label { font-family: var(--serif); font-weight: 700; font-size: 17px; flex-shrink: 0; } .faq__q { color: var(--gold-deep); } .faq__a { display: flex; gap: 14px; align-items: baseline; padding: 0 24px 26px 0; } .faq__a-label { color: var(--gray); } .faq__a p { font-size: 15px; color: var(--gray); line-height: 1.9; } /* CTA */ .cta { position: relative; background: var(--navy-deep); color: var(--white); text-align: center; overflow: hidden; padding: 48px 0; } .cta::before { content: ''; position: absolute; inset: 0; background: url('img/hero.webp') center / cover no-repeat; opacity: .14; } .cta__inner { position: relative; } .cta h2 { font-size: clamp(22px, 2.7vw, 28px); font-weight: 500; letter-spacing: 0.1em; margin-bottom: 16px; line-height: 1.6; } .cta p { color: rgba(255,255,255,.8); margin-bottom: 24px; } .cta__price { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 15px; color: rgba(255,255,255,.9); margin-bottom: 16px; } .cta__price strong { color: var(--gold); font-weight: 700; } .cta__price-divider { width: 1px; height: 20px; background: rgba(255,255,255,.3); } .cta__sub-links { margin: 20px 0 0; font-size: 13px; } .cta__sub-links a { color: rgba(255,255,255,.75); text-decoration: underline; text-underline-offset: 3px; } .cta__sub-links a:hover { color: var(--white); } .cta__sub-links-divider { margin: 0 10px; color: rgba(255,255,255,.35); } /* Footer */ .footer { background: var(--navy-deep); color: rgba(255,255,255,.6); padding: 32px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; } .footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; } .footer__copy { grid-column: 2; letter-spacing: 0.08em; text-align: center; } /* flex-wrap必須：リンク数が増えても320px幅で横あふれ・欠けが起きないようにする */ .footer__links { grid-column: 3; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; } .footer__links a { white-space: nowrap; } @media (max-width: 1080px) { .footer__inner { grid-template-columns: 1fr; justify-items: center; } .footer__copy, .footer__links { grid-column: 1; justify-self: center; } .footer__links { justify-content: center; } } .footer__links a:hover { color: var(--white); } /* Reveal animation */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } .reveal.visible { opacity: 1; transform: none; } /* JS無効時のフォールバック .reveal は JS が .visible を付けるまで opacity:0 のため、これがないと 本文がまるごと空白になる。各ページに