/* HaruMail 共通スタイル — Web春デザインシステム準拠（案B「藍」系・2026-08-31）
   深青#232E63・Noto Serif JP見出し・Cormorantイタリック英字（主役のみ）・数字Zen Old Mincho。
   フォントはWeb春サブセットの自前配信（外部CDNなし）。font-sizeは12px以上・偶数のみ（kurita-taste規律） */

@font-face{font-family:'Noto Serif JP';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/noto-serif-jp-500.woff2') format('woff2')}
@font-face{font-family:'Noto Serif JP';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/noto-serif-jp-600.woff2') format('woff2')}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/noto-sans-jp-400.woff2') format('woff2')}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/noto-sans-jp-500.woff2') format('woff2')}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/noto-sans-jp-700.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/cormorant-garamond-italic-400.woff2') format('woff2')}
@font-face{font-family:'Zen Old Mincho';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/zen-old-mincho-600-num.woff2') format('woff2')}

:root{
  --bg:#ffffff; --panel:#ffffff; --ink:#232E63; --sub:#4F5680;
  --line:#E8EAF4; --accent:#2547C8; --accent-deep:#16308F; --accent-soft:#F7F8FD;
  --pink:#F6D9E2; --pink-deep:#EFC2D2; --ok:#2E6B46; --danger:#A83A2E;
  --serif:'Noto Serif JP',serif;
  --sans:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;
  --en:'Cormorant Garamond',serif;
  --num:'Zen Old Mincho','Noto Serif JP',serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:2;font-size:14px;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
img,svg{max-width:100%}
small{font-size:max(12px,.875em)}

/* ---------- ヘッダー（藍・全ページ共通） ---------- */
.top{display:flex;align-items:center;gap:18px;padding:14px 22px;background:var(--ink)}
.top .logo{display:flex;align-items:baseline;gap:11px;color:#fff;text-decoration:none}
.top .logo .mark{width:21px;height:21px;flex:none;align-self:center}
.top .logo .product{font-family:var(--serif);font-weight:500;font-size:16px;letter-spacing:.12em}
.top .logo .by{font-size:12px;letter-spacing:.12em;color:#9AA3CE}
.top nav{margin-left:auto;display:flex;gap:24px;font-size:12px;align-items:center;flex-wrap:wrap}
.top nav a{color:#B9C0E4;text-decoration:none;letter-spacing:.12em;transition:color .3s}
.top nav a:hover{color:#fff}
.top nav a.on{color:#fff;font-weight:500}
.top nav a.cta{color:var(--ink);background:#fff;border-radius:999px;padding:7px 20px;font-weight:500;letter-spacing:.08em;transition:opacity .3s}
.top nav a.cta:hover{opacity:.85;color:var(--ink)}
@media (max-width:760px){.top nav{gap:14px}.top .logo .by{display:none}}

/* ---------- フッター（全ページ共通） ---------- */
.foot{border-top:1px solid var(--line);margin-top:72px;padding:34px 22px 40px;color:var(--sub);font-size:12px;letter-spacing:.06em}
.foot .inner{max-width:1080px;margin:0 auto;display:flex;gap:10px 26px;flex-wrap:wrap;align-items:center}
.foot a{color:var(--sub);text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot .co{margin-right:auto;color:var(--ink);font-weight:500}

/* ---------- 汎用 ---------- */
.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 26px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.08em;text-decoration:none;transition:opacity .3s}
.btn:hover{opacity:.88}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost.inv{color:#fff;border-color:rgba(255,255,255,.55)}
.num{font-family:var(--num);font-weight:600;font-feature-settings:'tnum'}