@charset "UTF-8";
/* =====================================================================
   sitev2/css/common.css ── 新サイト共通（変数・リセット・ヘッダー・フッター）
   モック（newtop-mock / about-mock / contact-mock）の CSS を移植。Tailwind 不使用。
   ===================================================================== */
:root{
  --navy:#12264F; --navy-deep:#0D1C3B; --ink:#1B2333; --sub:#5A6478;
  --line:#DDE2EC; --paper:#F7F8FB; --white:#FFFFFF;
  --yellow:#FFDE59; --red:#B51809;
  --maxw:1080px;
  --numfont:"Oswald","Barlow Condensed","Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:72px}
body{font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;color:var(--ink);background:var(--white);font-size:15px;line-height:1.75;-webkit-text-size-adjust:100%}
img{max-width:100%}
a{color:inherit;text-decoration:none}
.inner{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
.spbr{display:none}

/* ===== ヘッダー ===== */
header.site{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--line)}
.hd{max-width:var(--maxw);margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand .marklogo{height:44px;width:auto;flex:0 0 auto;display:block}
.brand .nm{font-weight:900;color:var(--navy);font-size:13.5px;line-height:1.35}
nav.gnav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:13.5px;font-weight:700;color:var(--navy)}
nav.gnav a{padding:6px 0;border-bottom:2px solid transparent}
nav.gnav a:hover,nav.gnav a.on{border-bottom-color:var(--yellow)}
.hd-cta{display:flex;gap:8px;margin-left:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;border-radius:999px;cursor:pointer}
.btn-apply{background:var(--red);color:#fff;padding:9px 20px;font-size:13.5px;box-shadow:0 3px 8px rgba(181,24,9,.3)}
.menu-btn{display:none;margin-left:auto;background:none;border:2px solid var(--navy);border-radius:8px;color:var(--navy);font-weight:900;font-size:12px;padding:7px 10px;font-family:inherit;cursor:pointer;flex:0 0 auto}
.spnav{display:none;background:var(--white);border-bottom:1px solid var(--line);padding:8px 20px 16px}
.spnav a{display:block;padding:11px 4px;border-bottom:1px solid var(--line);font-weight:700;color:var(--navy);font-size:14px}
.spnav .hd-cta{margin:14px 0 0;display:flex}
.spnav .hd-cta .btn{display:flex;flex:1;justify-content:center;border-bottom:0;color:#fff;padding:12px 20px}
@media(max-width:900px){
  nav.gnav{display:none}
  .menu-btn{display:block}
  .spnav.open{display:block}
  /* SPヘッダー（Figma 新トップSP 1830:3）: ロゴ・名称 ＞ 余白 ＞ お申込み（赤ピル 94×34）＞ MENU（61×32）。間隔10px */
  .hd{gap:10px}
  .hd .hd-cta{margin-left:auto;flex:0 0 auto}
  .hd .hd-cta .btn-apply{line-height:16px;white-space:nowrap}
  .menu-btn{margin-left:0;line-height:14px}
}
/* 320px級: 1行に収めるため余白・文字を詰める（横スクロールを出さない） */
@media(max-width:380px){
  .hd{padding:10px 12px;gap:6px}
  .brand{gap:8px}
  .brand .nm{font-size:12px}
  .hd .hd-cta .btn-apply{padding:9px 12px;font-size:12.5px}
  .menu-btn{padding:7px 8px}
}

/* ===== フッター ===== */
footer.site{background:var(--navy-deep);color:#C9D2E4;padding-block:48px;font-size:13px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
footer.site h4{color:#fff;font-size:14px;font-weight:900;margin-bottom:12px}
footer.site .fl a{display:block;padding:4px 0}
footer.site .fl a:hover,footer.site a.ext:hover{color:var(--yellow)}
footer.site .cr{border-top:1px solid rgba(255,255,255,.15);margin-top:34px;padding-top:18px;text-align:center;font-size:11px;color:#8C97AF}
@media(max-width:820px){footer.site .cols{grid-template-columns:1fr}}