/* ===============================================================
   RASEN — shared styles
   =============================================================== */
:root{
  --blue:#1E78FF;
  --blue-600:#0B57E5;
  --blue-800:#0a2a6b;
  --blue-900:#051a47;
  --blue-50:#eef4ff;
  --blue-100:#d9e6ff;

  --ink:#0b1120;
  --ink-2:#2a3244;
  --muted:#6b7590;
  --bg:#ffffff;
  --bg-2:#f6f8fd;
  --line:#e5eaf3;
  --line-strong:#cdd5e4;

  --max:1280px;
  --radius:14px;
  --shadow:0 12px 32px rgba(10,30,80,.08);

  --font-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-en:"Space Grotesk","Noto Sans JP",sans-serif;

  --ease:cubic-bezier(.2,.7,.2,1);
  --header-h:80px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-jp);
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  height:var(--header-h);
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.site-header.scrolled{ border-bottom-color:var(--line); background:rgba(255,255,255,.96); }
.header-inner{
  max-width:var(--max); height:100%; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; gap:28px;
}
.brand img{ height:56px; width:auto; }
.nav{ display:flex; gap:2px; margin-left:auto; align-items:center; font-family:var(--font-en); }
.nav a{
  padding:10px 14px; font-weight:600; font-size:13px; letter-spacing:.08em;
  color:#3a4252; border-radius:999px;
  transition:color .2s, background .2s;
  white-space:nowrap; position:relative;
}
.nav a:hover{ color:var(--blue-600); background:var(--blue-50) }
.nav a.active{ color:var(--blue-600) }
.nav a.active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:2px;
  height:2px; background:var(--blue-600); border-radius:2px;
}
.hamburger{
  display:none; width:42px; height:42px; margin-left:auto;
  border-radius:10px; border:1px solid var(--line);
}
.hamburger span{ display:block;width:20px;height:2px;background:var(--ink);margin:4px auto;transition:transform .25s,opacity .25s }
.hamburger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.hamburger.open span:nth-child(2){ opacity:0 }
.hamburger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* ---------- PAGE HEAD (subpages) ---------- */
.page-head{
  padding:calc(var(--header-h) + 80px) 0 72px;
  background:linear-gradient(135deg, var(--blue-600) 0%, var(--blue) 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}

/* shared animated background (hero + page-head) */
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-bg::before,.hero-bg::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(60px); opacity:.5; mix-blend-mode:screen;
}
.hero-bg::before{
  width:640px; height:640px; left:-140px; top:-200px;
  background:radial-gradient(circle, #6ea8ff 0%, transparent 70%);
  animation:orbA 18s ease-in-out infinite;
}
.hero-bg::after{
  width:720px; height:720px; right:-180px; bottom:-240px;
  background:radial-gradient(circle, #0a2a6b 0%, transparent 70%);
  animation:orbB 22s ease-in-out infinite;
}
@keyframes orbA{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(120px,80px) scale(1.1) } }
@keyframes orbB{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(-100px,-60px) scale(1.15) } }
.hero-particles{ position:absolute; inset:0; overflow:hidden; }
.hero-particles i{
  position:absolute; display:block; width:3px; height:3px;
  background:#fff; border-radius:50%; opacity:.5;
  box-shadow:0 0 12px rgba(255,255,255,.6);
  animation:particle linear infinite;
}
@keyframes particle{
  0%{ transform:translateY(110vh) scale(.6); opacity:0 }
  10%{ opacity:.85 } 90%{ opacity:.85 }
  100%{ transform:translateY(-10vh) scale(1); opacity:0 }
}
@media (prefers-reduced-motion: reduce){
  .hero-bg::before,.hero-bg::after,.hero-particles i{ animation:none !important }
}
.page-head-inner{ max-width:var(--max); margin:0 auto; padding:0 28px; }
.page-head .eyebrow{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.24em;
  font-weight:600;
  margin-bottom:22px;
}
.page-head h1{
  font-family:var(--font-jp);
  font-weight:900;
  font-size:clamp(34px, 4.4vw, 60px);
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 16px;
}
.page-head .subtitle{
  font-family:var(--font-en);
  font-size:13px; letter-spacing:.2em;
  opacity:.8;
}
.page-head p.lead{
  font-size:15px;
  color:rgba(255,255,255,.88);
  max-width:640px;
  margin:14px 0 0;
  line-height:1.9;
}
.page-head .crumbs{
  font-family:var(--font-en);
  font-size:11px;
  letter-spacing:.2em;
  opacity:.65;
  margin-bottom:22px;
}
.page-head .crumbs a:hover{ opacity:1; text-decoration:underline }
.page-head .crumbs .sep{ padding:0 8px }

/* ---------- CONTAINER ---------- */
.container{ max-width:var(--max); margin:0 auto; padding:0 28px }
section{ padding:88px 0 }

.section-label{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.24em;
  color:var(--blue-600);
  text-transform:uppercase; font-weight:700;
  margin-bottom:14px; white-space:nowrap;
}
.section-label::before{ content:""; width:28px; height:2px; background:var(--blue-600) }
h2.section-h{
  font-family:var(--font-jp);
  font-size:clamp(26px, 3.2vw, 40px);
  font-weight:900;
  line-height:1.2;
  margin:0 0 36px;
  text-wrap:balance;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px;
  border-radius:999px;
  font-weight:700; font-size:14px; letter-spacing:.04em;
  transition:transform .2s var(--ease), background .2s, color .2s, box-shadow .25s, border-color .2s;
  white-space:nowrap;
}
.btn .arrow{ transition:transform .3s var(--ease); display:inline-block }
.btn:hover .arrow{ transform:translateX(4px) }
.btn-primary{ background:var(--blue-600); color:#fff; }
.btn-primary:hover{ background:var(--blue-800); transform:translateY(-2px); box-shadow:0 12px 28px rgba(10,30,80,.2) }
.btn-ghost{ border:1.5px solid var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--blue-600); color:var(--blue-600); transform:translateY(-2px) }
.btn-white{ background:#fff; color:var(--blue-600); }
.btn-white:hover{ background:var(--blue-50); transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.15) }
.btn-white-ghost{ border:1.5px solid rgba(255,255,255,.55); color:#fff; }
.btn-white-ghost:hover{ background:#fff; color:var(--blue-600); transform:translateY(-2px); border-color:#fff }

/* ---------- FOOTER (sitemap) ---------- */
.site-footer{
  background:linear-gradient(160deg, #051a47 0%, #0a2a6b 100%);
  color:rgba(255,255,255,.72);
  padding:72px 0 0;
}
.footer-top{
  max-width:var(--max); margin:0 auto; padding:0 48px 56px;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:48px;
  align-items:start;
}
.footer-brand .brand img{ height:52px; filter:brightness(0) invert(1); margin-bottom:22px; display:block }
.footer-brand p{
  font-size:13px; color:rgba(255,255,255,.72); line-height:1.9; margin:0 0 22px; max-width:320px;
}
.footer-brand .social{ display:flex; gap:10px }
.footer-brand .social a{
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.12);
  display:grid; place-items:center;
  font-family:var(--font-en); font-weight:700; font-size:12px;
  color:#fff;
  transition:background .2s, transform .2s;
}
.footer-brand .social a:hover{ background:rgba(255,255,255,.28); transform:translateY(-2px) }

.footer-col h5{
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.24em; font-weight:700;
  color:#fff; margin:0 0 20px; text-transform:uppercase;
}
.footer-col ul{
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.footer-col li{ list-style:none }
.footer-col a{
  font-size:13.5px; color:rgba(255,255,255,.72);
  transition:color .2s;
  display:inline-block;
  text-decoration:none;
}
.footer-col a:hover{ color:#fff }
.footer-col .sub{ display:none }

.copy{
  border-top:1px solid rgba(255,255,255,.12);
  padding:22px 28px;
  font-family:var(--font-en); font-size:12px;
  color:rgba(255,255,255,.45); letter-spacing:.06em;
  text-align:center;
}
.copy .legal{ display:none }

@media (max-width: 900px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:32px; padding:0 28px 40px }
  .footer-brand{ grid-column:1/-1 }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns:1fr }
}

/* ---------- RESPONSIVE HEADER ---------- */
@media (max-width: 900px){
  .nav{ display:none }
  .hamburger{ display:grid; place-items:center; order:3; color:var(--ink) }
  .nav.open{
    display:flex; flex-direction:column;
    position:fixed; inset:var(--header-h) 16px auto 16px;
    background:#fff; border:1px solid var(--line);
    border-radius:16px; padding:12px; gap:2px;
    box-shadow:var(--shadow);
  }
  .nav.open a{ padding:14px 16px; text-align:left }
  section{ padding:64px 0 }
  .page-head{ padding:calc(var(--header-h) + 56px) 0 56px }
  .footer-inner{ flex-direction:column; text-align:center }
}