/* =========================================================
   べっちょない おばんざい処  ―  shared styles
   ========================================================= */

:root{
  /* color — tweakable */
  --navy:        #173a6a;
  --navy-deep:   #0e2a52;
  --navy-bright: #1f4488;   /* logo-matched royal */
  --cream:       #efe9dc;
  --cream-2:     #f4efe4;
  --moon:        #ece24f;
  --moon-glow:   #f6efa0;
  --gold:        #e7dc63;
  --ink:         #1c3157;   /* text on cream */
  --ink-soft:    #41547a;
  --on-navy:     #f2ede1;   /* text on navy */
  --on-navy-dim: #b9c4d8;

  /* type */
  --f-head: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --f-body: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --f-en:   "Cormorant Garamond", "Zen Old Mincho", serif;

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--f-body);
  background:var(--navy);
  color:var(--on-navy);
  -webkit-font-smoothing:antialiased;
  line-height:1.9;
  letter-spacing:.04em;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* ---------- English section labels ---------- */
.eyebrow{
  font-family:var(--f-en);
  font-size:1.45rem;
  letter-spacing:.34em;
  font-weight:600;
  display:inline-flex;align-items:center;gap:.7em;
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";width:34px;height:1px;background:currentColor;opacity:.6;
}
.eyebrow.center{justify-content:center;}
.eyebrow.center::after{content:"";width:34px;height:1px;background:currentColor;opacity:.6;}

.section-title{
  font-family:var(--f-head);
  font-weight:700;
  font-size:clamp(1.7rem,3.4vw,2.7rem);
  line-height:1.5;
  letter-spacing:.06em;
  margin:.5em 0 0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.9em;
  font-family:var(--f-body);
  font-size:.95rem;letter-spacing:.14em;
  padding:.85em 1.8em;border-radius:999px;
  border:1px solid currentColor;
  transition:.4s var(--ease);
  white-space:nowrap;
}
.btn .arrow{transition:transform .4s var(--ease);}
.btn:hover .arrow{transform:translateX(5px);}
.btn--ghost-light{color:var(--on-navy);}
.btn--ghost-light:hover{background:var(--on-navy);color:var(--navy);}
.btn--ghost-dark{color:var(--ink);}
.btn--ghost-dark:hover{background:var(--ink);color:var(--cream);}
.btn--gold{color:var(--navy);background:var(--gold);border-color:var(--gold);font-weight:600;}
.btn--gold:hover{background:transparent;color:var(--gold);}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:14px 40px;
  transition:background .5s var(--ease), padding .5s var(--ease);
}
.site-header.scrolled{
  background:rgba(14,42,82,.86);
  backdrop-filter:blur(10px);
  padding:8px 40px;
  box-shadow:0 10px 40px -22px rgba(0,0,0,.8);
}
.brand-mark{display:flex;align-items:center;}
.brand-mark img{height:62px;width:auto;transition:height .5s var(--ease);}
.site-header.scrolled .brand-mark img{height:48px;}

.main-nav{display:flex;align-items:center;gap:30px;}
.main-nav a{
  display:flex;flex-direction:column;align-items:center;line-height:1.15;
  position:relative;padding:4px 2px;
}
.main-nav .en{font-family:var(--f-en);font-size:1.05rem;letter-spacing:.18em;font-weight:600;}
.main-nav .jp{font-size:.62rem;letter-spacing:.18em;color:var(--on-navy-dim);margin-top:3px;}
.main-nav a::after{
  content:"";position:absolute;left:50%;bottom:-4px;width:0;height:1px;
  background:var(--moon);transition:.4s var(--ease);transform:translateX(-50%);
}
.main-nav a:hover::after,.main-nav a.active::after{width:100%;}
.main-nav a.active .en{color:var(--moon);}

.header-cta{display:flex;align-items:center;}

.menu-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px;}
.menu-toggle span{width:26px;height:2px;background:var(--on-navy);transition:.3s;}

/* =========================================================
   MOON + STARS (decorative)
   ========================================================= */
.moon{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 38% 35%, var(--moon-glow), var(--moon) 58%, #d8cd3e 100%);
  box-shadow:0 0 60px 18px rgba(246,239,160,.35), 0 0 140px 50px rgba(236,226,79,.18);
  pointer-events:none;
}
.moon::before,.moon::after{
  content:"";position:absolute;border-radius:50%;
  background:rgba(120,120,140,.28);
}
.moon::before{width:14%;height:9%;top:32%;left:24%;transform:rotate(-20deg);}
.moon::after{width:10%;height:18%;top:48%;left:60%;border-radius:40%;transform:rotate(25deg);
  box-shadow:-30% 120% 0 -2px rgba(120,120,140,.22);}

.star{position:absolute;color:var(--moon-glow);opacity:.85;pointer-events:none;
  animation:twinkle 4s ease-in-out infinite;}
.star.s2{animation-delay:1.2s;}
.star.s3{animation-delay:2.4s;}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.85);}50%{opacity:.95;transform:scale(1.1);}}

/* doodle line color */
.doodle{stroke:var(--on-navy);fill:none;opacity:.7;pointer-events:none;}
.doodle--ink{stroke:var(--ink);opacity:.45;}

/* =========================================================
   WAVE dividers
   ========================================================= */
.wave{display:block;width:100%;height:auto;line-height:0;position:relative;}
.wave svg{display:block;width:100%;height:90px;}
@media(max-width:700px){.wave svg{height:50px;}}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--navy-deep);padding:60px 0 30px;}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;}
.footer-top img{height:74px;}
.footer-nav{display:flex;gap:30px;flex-wrap:wrap;}
.footer-nav a{font-family:var(--f-en);letter-spacing:.16em;font-size:1rem;opacity:.85;transition:.3s;}
.footer-nav a:hover{opacity:1;color:var(--moon);}
.footer-social{display:flex;gap:14px;}
.footer-social a{width:46px;height:46px;border:1px solid rgba(242,237,225,.35);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:.3s;}
.footer-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);}
.footer-bottom{text-align:center;margin-top:40px;font-size:.72rem;letter-spacing:.18em;color:var(--on-navy-dim);
  font-family:var(--f-en);}

/* =========================================================
   reveal-on-scroll
   ========================================================= */
.reveal{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease);}
.js-anim .reveal{opacity:0;transform:translateY(26px);}
.js-anim .reveal.in{opacity:1;transform:none;}

/* =========================================================
   responsive
   ========================================================= */
@media(max-width:980px){
  .main-nav,.header-cta .btn span.jp{}
}
@media(max-width:880px){
  .site-header{padding:12px 20px;}
  .main-nav{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);
    background:rgba(14,42,82,.97);backdrop-filter:blur(12px);
    flex-direction:column;justify-content:center;gap:26px;
    transform:translateX(100%);transition:transform .5s var(--ease);z-index:55;}
  .main-nav.open{transform:none;}
  .menu-toggle{display:flex;z-index:56;}
  .header-cta{display:none;}
  .wrap{padding:0 22px;}
}