/* morinaga.site 法務ページ共通スタイル（legal.css）: 利用規約/プライバシー/特商法 で共有 */
/* 色・フォントは /assets/site.css の正本にエイリアス（単一正本化）。各法務ページは site.css を legal.css より先に読み込むこと。 */
:root {
    /* 変数名は旧称（navy/gold）のまま。実値は site.css の正本に追従する
       ＝2026-07-26 の B 案以降、navy は墨緑 #1c402e・gold は朱 #c2360b。*/
    --navy: var(--ink);
    --gold: var(--brass);         /* 白地の本文リンク＝対白 5.4:1（AA）*/
    --gold-light: var(--brass-light);  /* 濃色面（ヘッダー）専用＝白地では 2.1:1 で使えない */
    --sand: var(--bg);
    --text-light: var(--muted);
    --white: #fff;
  }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-jp); color: var(--text); line-height: 1.8; background: var(--sand); font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; }
a { color: var(--gold); text-decoration: underline; }
/* 白地のリンク hover に --gold-light（明色）は 2.1:1 で AA 不合格。濃い朱へ（対白 7.3:1） */
a:hover { color: var(--cta-gold-hover); }
.serif { font-family: var(--font-serif); }
.container { max-width: var(--container-narrow); margin: 0 auto; padding: 0 20px; }
header.site-header { background: var(--navy); color: var(--white); padding: 24px 0; }
header.site-header .serif { font-size: 20px; }
header.site-header a { color: var(--gold-light); text-decoration: none; }
main { padding: 48px 0 64px; }
h1 { font-size: clamp(22px, 4vw, 30px); color: var(--navy); margin-bottom: 12px; }
.lead { color: var(--text-light); margin-bottom: 40px; font-size: 14px; }
/* footer は site.css の共通フッター正本（暗紺・左揃え）を継承。法務は sticky CTA が無いので下 padding のみ上書き。 */
footer { padding: 32px 0; }

/* 法務ページのヘッダーにハンバーガーを置く（2026-07-27・全ページでモバイルナビを配線） */
header.site-header .legal-headbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
header.site-header .legal-headbar .serif { margin: 0; }
header.site-header .navtoggle { color: var(--white); }


/* ── 法務ページのモバイルナビ（2026-07-27）───────────────────────────
   terms/tokushoho/privacy は .nav ではなく header.site-header を使うため、
   共通 JS のドロワー生成が働かず、スマホでサイト内を回遊する手段が無かった。
   site.js 側で .site-header も対象にし、必要な CSS をここに置く
   （4 つの主要ページは各ページのインライン <style> に同等の定義を持つ）。 */
header.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
header.site-header .container .serif { margin: 0; }
.navtoggle{display:none;width:44px;height:44px;border:1px solid var(--card-line,#e5dec8);border-radius:10px;background:rgba(255,255,255,.6);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;margin-left:8px}
.navtoggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1024px){.navtoggle{display:inline-flex}.nav .nav-cta{display:none}}
.navdrawer{position:fixed;inset:0;z-index:3000;visibility:hidden}
.navdrawer.on{visibility:visible}
.navdrawer-bg{position:absolute;inset:0;background:color-mix(in oklab,var(--accent-deep) 55%,transparent);opacity:0;transition:opacity .3s ease}
.navdrawer.on .navdrawer-bg{opacity:1}
.navdrawer-panel{position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);background:var(--accent-deep);padding:80px 32px 40px;display:flex;flex-direction:column;gap:2px;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:-12px 0 40px rgba(0,0,0,.3)}
.navdrawer.on .navdrawer-panel{transform:translateX(0)}
.navdrawer-panel .nd-link{display:block;color:var(--bg);font-family:var(--font-serif,"Noto Serif JP",serif);font-size:21px;letter-spacing:.02em;padding:16px 2px;border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none;transition:color .2s ease}
.navdrawer-panel .nd-link:hover{color:var(--brass-soft)}
.navdrawer-panel .nd-cta{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.navdrawer-panel .nd-cta a{text-align:center;width:100%}
.navdrawer-close{position:absolute;top:18px;right:20px;width:40px;height:40px;border:0;background:none;color:var(--bg);font-size:30px;cursor:pointer;line-height:1}
header.site-header .navtoggle { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
header.site-header .navtoggle span { background: var(--white); }
@media(max-width:1024px){ header.site-header .navtoggle { display: inline-flex; } }