/* ============================================================
   文字城防衛 — 共通スタイル
   ============================================================ */
:root{
  --navy:#152544;
  --navy-2:#1f3157;
  --navy-3:#0f1c34;
  --ink:#1b2742;
  --body:#4b5468;
  --muted:#7c8499;
  --orange:#e3582f;
  --orange-d:#c8461f;
  --cream:#f8f3e6;
  --cream-2:#fbf7ec;
  --cream-line:#ece2cd;
  --line:#e7e2d6;
  --white:#ffffff;
  --gold:#e6a417;
  --green:#3f9a4e;
  --green-d:#317d3e;
  --blue:#2f6fd0;
  --shadow-sm:0 2px 6px rgba(20,30,55,.07);
  --shadow:0 6px 22px rgba(20,30,55,.10);
  --shadow-lg:0 14px 40px rgba(20,30,55,.16);
  --r:14px;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Zen Kaku Gothic New","M PLUS Rounded 1c",system-ui,sans-serif;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:900;letter-spacing:.01em;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  font-weight:800;border-radius:12px;transition:transform .12s ease, box-shadow .15s, background .15s;
  white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn-orange{background:var(--orange);color:#fff;padding:.85em 1.5em;font-size:1.05rem;
  box-shadow:0 6px 0 var(--orange-d), var(--shadow);}
.btn-orange:hover{background:#ec6038;}
.btn-orange:active{box-shadow:0 2px 0 var(--orange-d);transform:translateY(3px);}
.btn-orange img{width:1.15em;height:1.15em;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}

.btn-amazon{display:block;width:100%;text-align:center;background:#febd69;color:#3a2300;
  font-weight:800;padding:.55em 0;border-radius:9px;font-size:.86rem;border:1px solid #e0a23f;
  box-shadow:0 2px 0 #d99339;transition:filter .15s;}
.btn-amazon:hover{filter:brightness(1.04);}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-head{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,var(--navy),var(--navy-2));
  color:#fff;box-shadow:0 3px 14px rgba(8,15,30,.28);}
.head-inner{display:flex;align-items:center;gap:18px;height:74px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand img{width:46px;height:46px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
.brand .b-eyebrow{font-size:.62rem;letter-spacing:.18em;color:#a9bbe0;font-weight:700;display:block;}
.brand span{display:block;}
.brand .b-title{font-size:1.5rem;font-weight:900;color:#fff;line-height:1;letter-spacing:.04em;white-space:nowrap;}
.brand>span{flex-shrink:0;}
.brand .b-sub{font-size:.6rem;letter-spacing:.32em;color:#8fa3cc;display:block;margin-top:3px;}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto;}
.nav a{font-size:.95rem;font-weight:700;color:#dfe6f3;transition:color .15s;white-space:nowrap;}
.nav a:hover{color:#fff;}
.nav .btn-orange{font-size:.95rem;padding:.6em 1.25em;box-shadow:0 4px 0 var(--orange-d);}
.nav .btn-orange:active{box-shadow:0 1px 0 var(--orange-d);}

.hamburger{display:none;flex-direction:column;gap:5px;margin-left:auto;padding:8px;background:rgba(255,255,255,.08);
  border-radius:9px;}
.hamburger span{width:26px;height:3px;background:#fff;border-radius:3px;transition:.25s;}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

.mobile-menu{display:none;position:fixed;inset:74px 0 auto 0;background:var(--navy-2);
  flex-direction:column;padding:10px 22px 22px;z-index:55;box-shadow:0 14px 30px rgba(0,0,0,.35);
  transform:translateY(-12px);opacity:0;pointer-events:none;transition:.22s;}
.mobile-menu.show{transform:translateY(0);opacity:1;pointer-events:auto;}
.mobile-menu a{color:#e7ecf6;font-weight:700;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.08);}
.mobile-menu .btn-orange{margin-top:16px;box-shadow:0 4px 0 var(--orange-d);}

/* =========================================================
   SECTION SHELL
   ========================================================= */
section{position:relative;}
.sect-pad{padding:64px 0;}
.sect-head{text-align:center;margin-bottom:40px;}
.sect-head h2{font-size:2rem;display:inline-flex;align-items:center;gap:.6em;}
.sect-head h2::before,.sect-head h2::after{content:"❖";color:var(--gold);font-size:.85em;opacity:.85;}
.sect-head p{margin:.5em 0 0;color:var(--muted);font-weight:600;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-foot{background:linear-gradient(180deg,var(--navy-2),var(--navy-3));color:#cfd8ea;}
.foot-top{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:34px 0;}
.foot-brand{display:flex;align-items:center;gap:12px;}
.foot-brand img{width:42px;height:42px;}
.foot-brand .t{font-size:1.15rem;font-weight:900;color:#fff;}
.foot-brand .s{font-size:.78rem;color:#93a3c4;}
.foot-links{display:flex;gap:26px;margin-left:8px;flex-wrap:wrap;}
.foot-links a{font-size:.88rem;font-weight:700;color:#c2cce0;}
.foot-links a:hover{color:#fff;}
.foot-social{margin-left:auto;display:flex;gap:12px;}
.foot-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.10);
  display:grid;place-items:center;transition:background .15s;}
.foot-social a:hover{background:rgba(255,255,255,.2);}
.foot-social img{width:22px;height:22px;}
.foot-bar{border-top:1px solid rgba(255,255,255,.10);text-align:center;font-size:.78rem;
  color:#8593b3;padding:16px 0;}

/* responsive base */
@media(max-width:860px){
  .nav{display:none;}
  .hamburger{display:flex;}
  .mobile-menu{display:flex;}
  .sect-head h2{font-size:1.55rem;}
  .sect-pad{padding:48px 0;}
  .foot-social{margin-left:0;width:100%;justify-content:flex-start;}
}