/* =========================================================
ハードディスク破壊サービス サイト共通スタイルシート
---------------------------------------------------------
デザイン方針：テイストB「洗練・モダン」をベースに、
信頼感を補強するテイストD「上品・高級感」の紺・線細工
モチーフを部分的に融合したハイブリッド。
角丸は4/6/10/999px の4段（--radius-xs / --radius / --radius-lg / --radius-pill）、
影は用途別に使い分け、余白は section 単位で強弱を付ける。
========================================================= */
:root{
/* ベンチマーク: haku-t.com（Tailwind sky/slate パレット） */
--navy:#0f172a; /* slate-900: 見出し・ダーク帯 */
--navy-2:#1e293b; /* slate-800 */
--navy-3:#0369a1; /* sky-700: リンク・ホバー */
--slate:#475569; /* slate-600: 補足テキスト */
--text:#334155; /* slate-700: 本文 */
--bg:#ffffff;
--bg-alt:#f8fafc; /* slate-50 */
--bg-alt2:#f1f5f9; /* slate-100 */
--border:#e2e8f0; /* slate-200 */
--accent:#0284c7; /* sky-600: プライマリアクション */
--accent-dark:#0369a1; /* sky-700 */
--accent-darker:#075985; /* sky-800 */
--accent-text:#0369a1; /* 文字色専用（淡色背景上でも4.5:1を確保） */
--accent-soft:#e0f2fe; /* sky-100 */
--green:#15803d; /* green-700 */
--green-soft:#f0fdf4; /* green-50 */
--gold:#38bdf8; /* 旧金アクセント → sky-400 の細リングに置換 */
/* 角丸スケール：テイストB(0〜4px)を基本に、テイストD(0〜8px)まで許容。
丸ボタン(--radius-pill)だけは例外として維持し「メリハリ」を作る。 */
--radius-xs:4px;
--radius:6px;
--radius-lg:10px;
--radius-pill:999px;
/* 影：用途ごとに濃淡を変える（同じ影を使い回さない） */
--shadow-xs:0 1px 2px rgba(15,36,56,.07);
--shadow-sm:0 6px 20px rgba(15,36,56,.10);
--shadow-md:0 1px 0 rgba(15,36,56,.05),0 14px 32px rgba(15,36,56,.10);
--shadow-lg:0 16px 40px rgba(15,36,56,.16);
/* 後方互換（既存参照が残っていても破綻しないように） */
--shadow:var(--shadow-xs);
--maxw:1180px;
/* ヘッダー実高（main.js が実測して更新。JS無効時は概算値で安全に劣化） */
--header-h:72px;
--font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
/* ベンチマーク準拠：見出しもゴシック（太字）で統一 */
--font-serif: var(--font);
--ease:cubic-bezier(.22,.61,.36,1);
/* タイポスケール（.94/.95/.96/.98rem 等の0.01rem差の乱立をここへ丸め込む） */
--fs-xs:.78rem; --fs-sm:.86rem; --fs-base:1rem; --fs-md:1.06rem;
--fs-lg:1.16rem; --fs-xl:1.3rem; --fs-2xl:1.5rem;
/* 余白スケール（8pxグリッド） */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
/* 行間 */
--lh-body:1.9; --lh-heading:1.45; --lh-ui:1.3;
/* 追加カラー：--gray-500 は UI 部品の枠線用（白背景で 4.76:1／WCAG 1.4.11 の 3:1 を満たす） */
--danger:#b91c1c; --gray-500:#64748b; --gray-400:#94a3b8; --border-strong:#94a3b8;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;
/* WCAG 2.2 / 2.4.11 Focus Not Obscured：固定ヘッダーにアンカー先が隠れないようにする */
scroll-padding-top:calc(var(--header-h, 72px) + 8px);}
/* !important はこの1箇所のみ残す。
理由：利用者のOS設定（動き抑制）は個別コンポーネントの transition/animation 指定より
常に優先されなければならず、後続のどの宣言にも上書きさせてはならないため（WCAG 2.3.3）。 */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
body{
margin:0;
font-family:var(--font);
color:var(--text);
background:var(--bg);
line-height:var(--lh-body);
/* 画面幅に応じて16px→17pxへ滑らかに可変（レスポンシブタイポグラフィ） */
font-size:clamp(16px,15.4px + .12vw,17px);
letter-spacing:.03em;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--navy-3);text-decoration:none;}
a:hover{text-decoration:underline;}
ul,ol{padding-left:1.3em;}
h1,h2,h3,h4{
color:var(--navy);line-height:var(--lh-heading);font-weight:700;margin:0 0 .6em;letter-spacing:.02em;
/* 日本語見出しの改行品質：行長の均等化＋文節単位の折り返し（対応ブラウザのみ有効・安全に劣化）。
overflow-wrap:anywhere は長い複合語（例：記憶装置物理破壊完了証明書）が
極小幅ではみ出すのを防ぐ最終フォールバック */
text-wrap:balance;word-break:auto-phrase;overflow-wrap:anywhere;
}
h1,h2{font-family:var(--font);font-weight:800;}
h1{font-size:clamp(1.8rem,1.55rem + 1.2vw,2.25rem);}
h2{font-size:clamp(1.42rem,1.3rem + .7vw,1.7rem);}
h3{font-size:clamp(1.12rem,1.06rem + .3vw,1.22rem);}
h4{font-size:var(--fs-md);}
p{margin:0 0 1.1em;text-wrap:pretty;}
li{text-wrap:pretty;}
strong{color:var(--navy);font-weight:700;}
small{letter-spacing:.01em;}
::selection{background:var(--navy);color:#fff;}
/* 汎用：引用・強調（コンテンツ側が素のタグを使っても破綻しないための下地） */
blockquote{margin:1.4em 0;padding:.2em 0 .2em 1.3em;border-left:3px solid var(--gold);color:var(--slate);font-style:italic;}
blockquote p:last-child{margin-bottom:0;}
mark{background:linear-gradient(transparent 62%, #7dd3fc 62%);color:var(--text);padding:0 .05em;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
/* ---------- アクセシビリティ：スキップリンク／フォーカス表示 ---------- */
.skip-link{
background:var(--navy);color:#fff;padding:10px 18px;border-radius:var(--radius);
font-weight:700;text-decoration:none;letter-spacing:.03em;
}
.skip-link:focus{
position:fixed;left:12px;top:12px;width:auto;height:auto;overflow:visible;clip:auto;
white-space:normal;z-index:1000;box-shadow:var(--shadow-sm);
outline:3px solid var(--accent);outline-offset:2px;text-decoration:none;
}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{
outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;
}
/* マウス操作時に不要な既定フォーカスリングは出さない（:focus-visible対応ブラウザのみ） */
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none;}
/* ---------- WCAG 2.2 / 2.5.8 Target Size（最小24px）を満たすための下地 ---------- */
.header-cta .tel-number,.footer-tel .tel-number{display:inline-block;padding:2px 0;min-height:24px;}
/* ---------- Header ---------- */
.site-header{
position:sticky;top:0;z-index:100;
background:#fff;border-bottom:1px solid var(--border);
box-shadow:var(--shadow-xs);
}
.header-inner{
max-width:var(--maxw);margin:0 auto;padding:10px 20px;
display:flex;align-items:center;gap:18px;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:var(--sp-2);font-weight:700;color:var(--navy);font-size:var(--fs-base);flex-shrink:1;min-width:0;}
.brand > span{min-width:0;overflow:hidden;}
.brand:hover{text-decoration:none;}
.brand .brand-logo{
height:40px;width:auto;flex-shrink:0;display:block;
}
.brand-text{
min-width:0;overflow:hidden;
line-height:1.25;letter-spacing:.01em;
}
.brand small{display:block;font-weight:500;font-size:.68rem;color:var(--slate);letter-spacing:.02em;line-height:1.35;margin-top:1px;}
/* 320〜360px 幅でヘッダーが横あふれしないよう段階的に縮める */
@media (max-width:399.98px){
.brand{font-size:var(--fs-sm);gap:6px;}
.brand .brand-logo{height:32px;}
.brand small{display:none;}
}
.main-nav{display:none;}
/* flexは第1階層のみ（.dropdown への display 汚染を防ぐため必ず子セレクタで限定する） */
.main-nav > ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;}
.main-nav > ul > li{position:relative;}
.main-nav > ul > li > a{
display:block;padding:10px var(--sp-2);font-weight:600;font-size:var(--fs-sm);color:var(--navy);border-radius:var(--radius);
letter-spacing:0;white-space:nowrap;transition:background-color .18s var(--ease),color .18s var(--ease);
}
/* ドロップダウンを持つ項目の視覚的アフォーダンス（装飾のため代替テキスト構文でSR読み上げを抑止。
非対応ブラウザは後の宣言を無視し前の宣言で表示を維持） */
.main-nav > ul > li.has-dropdown > a::after{content:"▾";content:"▾" / "";margin-left:5px;font-size:.68em;color:var(--slate);}
.main-nav > ul > li > a:hover{background:var(--bg-alt);text-decoration:none;}
.main-nav > ul > li.is-active > a{color:var(--accent-text);}
.dropdown{
display:none;position:absolute;left:0;top:100%;background:#fff;border:1px solid var(--border);
border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-sm);min-width:250px;padding:8px;z-index:50;
border-top:2px solid var(--navy);list-style:none;margin:0;
}
/* 右端の項目はパネルを右揃えにして画面外へのはみ出しを防止 */
.main-nav > ul > li:nth-last-child(-n+2) .dropdown{left:auto;right:0;}
.main-nav > ul > li:hover .dropdown,
.main-nav > ul > li:focus-within .dropdown,
.main-nav > ul > li.is-open .dropdown{display:block;} /* is-open はタッチ端末用（main.jsが制御） */
.dropdown li a{display:block;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);border-radius:var(--radius);color:var(--text);letter-spacing:0;transition:background-color .15s var(--ease);}
.dropdown li a:hover{background:var(--bg-alt);text-decoration:none;color:var(--navy-3);}
.header-cta{display:flex;align-items:center;gap:10px;flex-shrink:0;}
/* モバイル幅でのヘッダーはみ出し防止：電話・見積りCTAはモバイルメニュー内に同等の導線があるため段階的に隠す */
@media (max-width:759.98px){.header-cta .tel-block{display:none;}}
@media (max-width:479.98px){.header-cta .btn-primary{display:none;}}
.tel-block{text-align:right;line-height:1.25;}
.tel-block .tel-label{font-size:.75rem;color:var(--slate);display:block;letter-spacing:.01em;}
.tel-number{font-size:1.25rem;font-weight:800;color:var(--navy);white-space:nowrap;letter-spacing:0;}
.tel-number::before{content:"\260E ";content:"\260E " / "";} /* 装飾記号：SRには読ませない */
.btn{
display:inline-block;padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-pill);font-weight:700;font-size:var(--fs-base);
border:2px solid transparent;cursor:pointer;text-align:center;white-space:nowrap;letter-spacing:.02em;
transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),
transform .2s var(--ease),box-shadow .2s var(--ease);
}
/* ヘッダー内は高さを抑える（ナビ横幅の確保） */
.header-cta .btn{padding:var(--sp-3) 18px;font-size:.9rem;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
/* コントラスト：白文字はAA(4.5:1)を満たす sky-700(#0369a1)=5.9:1 を基準色に採用 */
.btn-primary{background:var(--accent-dark);color:#fff;box-shadow:0 2px 8px rgba(3,105,161,.28);}
.btn-primary:hover{background:var(--accent-darker);text-decoration:none;color:#fff;box-shadow:0 4px 14px rgba(3,105,161,.34);}
.btn-outline{background:#fff;border-color:var(--navy);color:var(--navy);}
.btn-outline:hover{background:var(--navy);color:#fff;text-decoration:none;}
.btn-lg{padding:var(--sp-4) 36px;font-size:var(--fs-md);}
/* 極小幅ではボタン文言の折り返しを許可し、はみ出し・不自然な省略を防ぐ */
@media (max-width:399.98px){
.btn{white-space:normal;text-wrap:balance;word-break:auto-phrase;}
.btn-lg{padding:15px 24px;}
}
.btn-block{display:block;width:100%;}
/* コントラスト：白文字はAA(4.5:1)を満たす orange-700(#c2410c)=4.9:1 を基準色に採用 */
.btn-tel{background:#c2410c;color:#fff;box-shadow:0 2px 8px rgba(194,65,12,.28);}
.btn-tel:hover{background:#9a3412;color:#fff;text-decoration:none;box-shadow:0 4px 14px rgba(154,52,18,.34);}
.nav-toggle{
display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
width:38px;height:38px;border-radius:var(--radius-lg);border:none;background:transparent;cursor:pointer;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--navy);margin:0 auto;transition:transform .25s var(--ease),opacity .2s var(--ease);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
/* 表示制御は hidden 属性で行う（main.js がトグル）。!important は使わない */
.mobile-nav{display:block;background:#fff;border-top:1px solid var(--border);}
.mobile-nav[hidden]{display:none;}
/* ---------- スマホ固定CTAバー ---------- */
.sp-cta-bar{display:none;}
@media (max-width:859.98px){
body{padding-bottom:calc(88px + env(safe-area-inset-bottom));}
.sp-cta-bar{
position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:1px;
padding:0 0 env(safe-area-inset-bottom);
background:#fff;box-shadow:0 -4px 16px rgba(15,23,42,.18);
}
.sp-cta-bar a{flex:1;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:0;font-weight:700;padding:10px 6px;line-height:1.3;text-align:center;-webkit-tap-highlight-color:transparent;}
.sp-cta-bar a:hover{text-decoration:none;}
.sp-cta-bar a:active{filter:brightness(.9);}
.sp-cta-tel{background:#c2410c;color:#fff;}
.sp-cta-tel:hover{color:#fff;}
.sp-cta-tel span{font-size:.72rem;font-weight:700;opacity:.95;}
.sp-cta-tel strong{color:#fff;font-size:1.24rem;font-weight:800;letter-spacing:.03em;line-height:1.1;}
.sp-cta-tel small{color:#fff;font-size:.68rem;font-weight:600;opacity:.9;letter-spacing:.02em;}
.sp-cta-apply{background:var(--accent-dark);color:#fff;}
.sp-cta-apply:hover{color:#fff;}
.sp-cta-apply span{font-size:.72rem;font-weight:700;opacity:.95;}
.sp-cta-apply strong{color:#fff;font-size:var(--fs-md);font-weight:800;letter-spacing:.02em;line-height:1.15;}
}
.mobile-nav .container{padding:var(--sp-3) 14px 22px;}
.mobile-nav details{border:none;}
.mobile-nav summary{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:var(--sp-3) var(--sp-3);font-weight:700;color:var(--navy);cursor:pointer;
border-radius:var(--radius-lg);list-style:none;transition:background .15s var(--ease),color .15s var(--ease);
}
.mobile-nav summary::-webkit-details-marker{display:none;}
.mobile-nav summary::after{
content:"";width:8px;height:8px;flex-shrink:0;margin:-2px 6px 0 0;
border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
transform:rotate(45deg);transition:transform .2s var(--ease);
}
.mobile-nav summary:hover{background:var(--bg-alt);}
.mobile-nav details[open] summary{color:var(--accent-text);background:var(--accent-soft);}
.mobile-nav details[open] summary::after{transform:rotate(-135deg);margin-top:4px;}
.mobile-nav .sub-links{list-style:none;margin:4px 0 10px;padding:8px 8px 8px 14px;background:var(--bg-alt);border-radius:var(--radius-lg);}
.mobile-nav .sub-links li a{display:block;padding:var(--sp-2) 10px;color:var(--text);font-size:.92rem;border-radius:var(--radius);}
.mobile-nav .sub-links li a:hover{background:#fff;color:var(--accent-text);text-decoration:none;}
.mobile-nav > .container > a{display:block;padding:var(--sp-3) var(--sp-3);font-weight:700;color:var(--navy);border:none;border-radius:var(--radius-lg);transition:background .15s var(--ease);}
.mobile-nav > .container > a:hover{background:var(--bg-alt);text-decoration:none;}
/* デスクトップナビ表示境界：main.js の DESKTOP_BP(=1200) と必ず同期させること */
@media (min-width:1200px){
.main-nav{display:block;}
.nav-toggle{display:none;}
.mobile-nav{display:none;}
}
/* ---------- Breadcrumb ---------- */
.breadcrumb{background:var(--bg-alt);border-bottom:1px solid var(--border);}
.breadcrumb ol{
/* margin/padding の二重指定を解消し、1宣言にまとめる */
max-width:var(--maxw);margin:0 auto;padding:6px 20px;
list-style:none;display:flex;flex-wrap:wrap;align-items:center;
gap:2px var(--sp-2); /* 折り返し時の行間 / 項目間 */
font-size:var(--fs-xs);line-height:1.5;color:var(--slate);
}
.breadcrumb li{display:flex;align-items:center;gap:var(--sp-2);min-width:0;}
/* 区切りの「›」は装飾。SRには読ませない（content の代替テキストを空にする） */
.breadcrumb li+li::before{content:"›";content:"›" / "";color:var(--gray-500);flex-shrink:0;}
/* リンクと最終項目に同じ縦paddingを与え、高さとベースラインを揃える（WCAG 2.5.8: 実効28.8px） */
.breadcrumb a,
.breadcrumb li[aria-current]{padding:5px 0;}
.breadcrumb a{color:var(--slate);display:inline-block;}
.breadcrumb a:hover{color:var(--navy-3);}
.breadcrumb li[aria-current]{color:var(--navy);font-weight:600;}
/* ---------- Hero（フルスクリーン：画像を全面背景に敷きテキストを重ねる） ---------- */
.hero{
color:var(--text);padding:clamp(44px,7vw,64px) 0 clamp(38px,6vw,52px);
position:relative;border-bottom:1px solid var(--border);
/* ヘッダー実高は main.js が --header-h に実測反映（決め打ち72pxはフォールバック） */
min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));
display:flex;align-items:center;overflow:hidden;background:#f0f9ff;
}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:30px;align-items:center;width:100%;}
.hero-copy{max-width:680px;}
.hero-visual{position:absolute;inset:0;z-index:0;}
.hero-visual picture,.hero-visual picture img{width:100%;height:100%;}
.hero-visual picture img{display:block;object-fit:cover;object-position:78% 15%;}
/* 可読性確保のオーバーレイ（テキスト側のみ白、人物側は透明でクリアに見せる） */
.hero::after{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 32%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 68%);
}
@media (max-width:899.98px){
.hero-visual picture img{object-position:72% 12%;}
.hero::after{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.85) 62%,rgba(255,255,255,.45) 100%);}
}
.hero-kicker{display:inline-block;background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent-darker);
padding:var(--sp-2) 18px;border-radius:var(--radius-lg);font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;margin-bottom:20px;
text-wrap:balance;word-break:auto-phrase;}
.hero h1{color:var(--navy);font-size:clamp(1.9rem,1.5rem + 2.2vw,2.9rem);margin-bottom:.5em;letter-spacing:.01em;font-weight:800;line-height:1.4;}
.hero p.lead{color:var(--slate);font-size:clamp(1.02rem,.98rem + .25vw,1.12rem);max-width:40em;letter-spacing:.03em;font-weight:500;line-height:2;word-break:auto-phrase;}
/* モバイルではPC用の手動改行を無効化し、文節ベースの自動折り返しに任せる */
@media (max-width:699.98px){.hero h1 br,.hero p.lead br{display:none;}}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--sp-5);}
.hero-trust{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--border);}
.hero-trust .trust-item{display:flex;align-items:center;gap:9px;font-size:var(--fs-base);color:var(--navy);font-weight:700;letter-spacing:.02em;}
.hero-trust .trust-item::before{content:"✓";content:"✓" / "";display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--accent-dark);color:#fff;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;}
/* スマホ：ヒーローは参考レイアウト（人物右配置＋バッジ3枚＋大CTA＋電話＋エンブレム）
※ .hero-actions 等の基本定義より後に置くこと（上書きのため） */
.hero-sp-badges,.hero-sp-emblem,.hero-sp-view{display:none;}
@media (max-width:859.98px){
/* SP：写真（顔＋HDD中央）を上、テキストを下に配置 */
.hero{min-height:0;padding:0 0 40px;flex-direction:column;align-items:stretch;background:#f0f9ff;}
.hero .hero-actions{display:none;}
.hero .hero-trust{display:none;}
.hero-visual{position:relative;inset:auto;z-index:0;}
.hero-visual picture{display:block;height:auto;}
.hero-visual picture img{width:100%;height:auto;max-height:480px;object-fit:cover;object-position:center top;}
/* 写真の下端を背景色にフェードさせて本文へつなぐ */
.hero-visual::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;
background:linear-gradient(180deg,rgba(240,249,255,0) 0%,#f0f9ff 92%);pointer-events:none;}
.hero::after{content:none;}
.hero .container{margin-top:-34px;}
.hero-kicker{background:transparent;border:none;padding:0;color:var(--accent-text);font-size:.76rem;letter-spacing:.14em;font-weight:700;display:flex;align-items:center;gap:8px;}
.hero-kicker::before{content:"";display:inline-block;width:22px;height:2px;background:var(--accent-text);flex-shrink:0;}
.hero h1{font-size:clamp(1.5rem,1.2rem + 2.4vw,1.9rem);}
.hero p.lead{font-size:.92rem;}
.hero-sp-view{display:block;position:absolute;top:14px;left:14px;z-index:1;}
.hero-sp-emblem{display:block;width:153px;height:auto;filter:drop-shadow(0 2px 6px rgba(15,23,42,.25));}
.hero-sp-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;}
.hero-sp-badges div{background:rgba(255,255,255,.95);border:1.5px solid var(--accent);border-radius:var(--radius);padding:9px 3px;text-align:center;font-size:.62rem;color:var(--navy);font-weight:700;line-height:1.45;display:flex;flex-direction:column;gap:1px;}
.hero-sp-badges strong{color:var(--accent-text);font-size:var(--fs-sm);letter-spacing:.01em;}
}
/* ---------- page header (non-top pages) ---------- */
/* ファーストビュー：セクション群と同じ中央軸に揃える */
.page-header{
background:var(--bg-alt);text-align:center;
color:var(--text);padding:clamp(42px,6vw,60px) 0;border-bottom:1px solid var(--border);
}
.page-header h1{color:var(--navy);font-size:clamp(1.65rem,1.4rem + 1.1vw,2.1rem);margin-bottom:.45em;letter-spacing:.01em;}
.page-header h1::before{
content:"";display:block;width:40px;height:3px;border-radius:2px;
background:var(--accent);margin:0 auto 18px;
}
.page-header p{color:var(--slate);margin:0 auto;max-width:46em;font-size:var(--fs-base);letter-spacing:.03em;line-height:1.85;text-wrap:balance;word-break:auto-phrase;}
/* ページ冒頭リード文（）。.page-header 外で使われても同じ体裁になるよう定義 */
.page-lead{text-wrap:balance;word-break:auto-phrase;}
/* 最終更新日（