/* base.css — 全ページ共通(デザイントークン・リセット・ヘッダー・ハンバーガー・フッター) */
/* =========================================================
   デザイントークン(診断LP・componentサンプルと共通)
========================================================= */
:root{
  --navy:#16324F;
  --ink:#24313D;
  --sub:#5B6B78;
  --bg:#F2F6F8;
  --card:#FFFFFF;
  --line:#D9E4EB;
  --orange:#F97B2F;
  --orange-dark:#DC6318;
  --teal:#2AA79B;
  --teal-soft:#E4F4F2;
  --yellow:#F5B942;
  --yellow-soft:#FDF3DC;
  --red:#E05252;
  --radius:16px;
  --shadow:0 4px 16px rgba(22,50,79,.08);
  --font-display:"Zen Maru Gothic",sans-serif;
  --font-body:"Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);color:var(--ink);background:var(--bg);
  line-height:1.75;-webkit-font-smoothing:antialiased;
}
a{color:var(--teal)}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* =========================================================
   ヘッダー
========================================================= */
.site-header{
  background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.site-header .hd-inner{
  max-width:960px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:20px;
}
.hd-logo{
  font-family:var(--font-display);font-weight:900;font-size:19px;
  color:var(--navy);text-decoration:none;letter-spacing:.02em;
}
.hd-logo::after{content:"●";font-size:10px;color:var(--teal);margin-left:3px;vertical-align:2px}
.hd-nav{display:flex;gap:20px;margin-left:auto}
.hd-nav a{
  font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;
  padding:4px 0;border-bottom:2px solid transparent;
}
.hd-nav a:hover{color:var(--teal);border-bottom-color:var(--teal)}
.hd-cta{
  background:var(--orange);color:#fff;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:13px;
  padding:8px 18px;border-radius:99px;white-space:nowrap;
  box-shadow:0 3px 0 var(--orange-dark);
  transition:transform .1s ease, box-shadow .1s ease;
}
.hd-cta:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--orange-dark)}
/* SPハンバーガーメニュー */
.hd-burger{
  display:none;flex:0 0 40px;width:40px;height:40px;padding:0 10px;
  flex-direction:column;justify-content:center;gap:5px;
  background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;
}
.hd-burger span{display:block;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s ease, opacity .2s ease}
.menu-open .hd-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .hd-burger span:nth-child(2){opacity:0}
.menu-open .hd-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sp-nav{display:none;background:var(--card);border-top:1px solid var(--line)}
.sp-nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 20px;font-size:14px;font-weight:500;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line);
}
.sp-nav a:last-child{border-bottom:none}
.sp-nav a::after{content:"\203A";font-family:var(--font-display);font-weight:900;font-size:16px;color:#B9C9D6}
@media (max-width:560px){
  .hd-nav{display:none}
  .hd-burger{display:flex}
  .menu-open .sp-nav{display:block}
}
/* =========================================================
   フッター
========================================================= */
.site-footer{background:var(--navy);color:#B9C9D6}
.site-footer .ft-inner{max-width:960px;margin:0 auto;padding:36px 20px 28px}
.ft-logo{font-family:var(--font-display);font-weight:900;font-size:17px;color:#fff}
.ft-logo::after{content:"●";font-size:9px;color:var(--teal);margin-left:3px;vertical-align:2px}
.ft-desc{font-size:12px;margin-top:8px;max-width:34em;line-height:1.9}
.ft-nav{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:20px}
.ft-nav a{font-size:12.5px;color:#DCE6EE;text-decoration:none}
.ft-nav a:hover{text-decoration:underline}
.ft-bottom{
  border-top:1px solid rgba(255,255,255,.15);margin-top:24px;padding-top:16px;
  font-size:10.5px;color:#8FA5B8;line-height:1.9;
}