:root{
  --white:#ffffff;
  --off-white:#fdfaf9;
  --ink:#241b19;
  --ink-soft:#5a4d4a;
  --red:#d91245;
  --red-deep:#a80d36;
  --red-light:#f57a95;
  --red-pale:#fbe3ea;
  --red-gradient: linear-gradient(120deg, var(--red) 0%, var(--red-light) 100%);
  --red-gradient-soft: linear-gradient(120deg, var(--red-pale) 0%, #ffffff 100%);
  --serif: "Shippori Mincho", serif;
  --sans: "Zen Kaku Gothic New", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  line-height:1.9;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red-pale); color:var(--red-deep); }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
img,svg{ display:block; max-width:100%; }

/* ================= AGE GATE ================= */
#age-gate{
  position:fixed; inset:0; z-index:999;
  background:var(--off-white);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#age-gate .gate-model{
  position:absolute; top:0; bottom:0; height:100%;
  width:32%; min-width:13rem; max-width:24rem;
  object-fit:cover; object-position:top center;
  z-index:1; opacity:0.92;
}
#age-gate .gate-model-left{
  left:0;
  -webkit-mask-image:linear-gradient(to right, black 45%, transparent 92%);
  mask-image:linear-gradient(to right, black 45%, transparent 92%);
}
#age-gate .gate-model-right{
  right:0;
  -webkit-mask-image:linear-gradient(to left, black 45%, transparent 92%);
  mask-image:linear-gradient(to left, black 45%, transparent 92%);
}
.gate-fade{
  position:absolute; inset:0; z-index:2;
  background:radial-gradient(ellipse at center,
    rgba(253,250,249,1) 0%,
    rgba(253,250,249,0.85) 16%,
    rgba(253,250,249,0.4) 32%,
    rgba(253,250,249,0.08) 48%,
    rgba(253,250,249,0) 62%);
}
.gate-panel{ position:relative; z-index:3; text-align:center; padding:2rem; max-width:34rem; }
.gate-logo{ width:min(80vw, 22rem); height:auto; margin:1.4rem auto 0; }
.gate-open-date{
  margin-top:1.4rem;
  font-size:clamp(0.9rem, 2.4vw, 1.05rem);
  letter-spacing:0.3em;
  padding-left:0.3em;
  color:var(--red-deep);
}
.gate-open-headline{
  margin-top:0.4rem;
  font-family:var(--serif);
  font-weight:800;
  font-size:clamp(1.9rem, 6vw, 2.8rem);
  letter-spacing:0.08em;
  line-height:1.1;
  background:var(--red-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.gate-place{ font-size:0.85rem; letter-spacing:0.5em; color:var(--ink-soft); padding-left:0.5em; }

.badge-float{
  position:fixed; right:1.3rem; bottom:1.3rem; z-index:80;
  width:3.4rem; height:3.4rem; border-radius:50%;
  background:var(--red-gradient); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 10px 22px -10px rgba(217,18,69,0.65);
  cursor:pointer; transition:transform .3s ease, box-shadow .3s ease;
}
.badge-float:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -10px rgba(217,18,69,0.75); }
.badge-float .num{ font-family:var(--serif); font-weight:800; font-size:1.15rem; line-height:1; }
.badge-float .kanji{ font-size:0.48rem; letter-spacing:0.08em; margin-top:0.1rem; }

.gate-divider{ width:2.5rem; height:1px; background:var(--red); margin:2.2rem auto; }
.gate-notice{ font-size:0.92rem; color:var(--ink-soft); line-height:2; margin-top:2.2rem; }
.gate-actions{ margin-top:2.6rem; display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.btn-enter{
  font-family:var(--serif); font-size:1.15rem; letter-spacing:0.35em; padding-left:0.35em;
  color:var(--white); background:var(--red-gradient); border:none;
  padding-top:0.95rem; padding-bottom:0.95rem; width:15rem; cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(217,18,69,0.55);
  transition:transform .35s ease, box-shadow .35s ease;
}
.btn-enter:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(217,18,69,0.65); }
.btn-member{
  font-family:var(--serif); font-size:1.05rem; letter-spacing:0.25em; padding-left:0.25em;
  color:var(--red-deep); background:var(--white); border:2px solid var(--red);
  padding-top:0.85rem; padding-bottom:0.85rem; width:15rem; cursor:pointer;
  text-align:center; display:inline-block;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.btn-member:hover{ background:var(--red-pale); transform:translateY(-2px); }
.btn-exit{ font-size:0.82rem; letter-spacing:0.3em; color:var(--ink-soft); padding:0.4rem 0.8rem; border-bottom:1px solid transparent; transition:border-color .25s ease, color .25s ease; }
.btn-exit:hover{ color:var(--red-deep); border-color:var(--red-light); }
#age-gate.hide{ display:none; }
#site{ display:none; }
#site.show{ display:block; }

/* ================= HEADER / GLOBAL MENU ================= */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem clamp(1.2rem, 4vw, 3rem);
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--red-pale);
}
.logo{ font-family:var(--serif); font-weight:700; font-size:1.25rem; letter-spacing:0.12em; color:var(--ink); line-height:0; }
.logo img{ height:2.3rem; width:auto; display:block; }

.desktop-nav ul{ list-style:none; display:flex; gap:clamp(0.9rem, 1.8vw, 1.8rem); flex-wrap:wrap; justify-content:flex-end; }
.desktop-nav a{
  font-size:0.8rem; letter-spacing:0.08em; color:var(--ink-soft);
  position:relative; padding-bottom:0.3rem; white-space:nowrap;
  display:inline-flex; align-items:center; gap:0.25em;
}
.desktop-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--red-gradient); transition:width .3s ease;
}
.desktop-nav a:hover{ color:var(--ink); }
.desktop-nav a:hover::after{ width:100%; }
.ext-mark{ font-size:0.7em; color:var(--red); }

.menu-disabled{
  opacity:0.4;
  pointer-events:none;
  cursor:default;
}
.menu-disabled::after{ display:none; }

.hamburger{
  display:none; width:2.4rem; height:2.4rem; border:none; background:none; cursor:pointer;
  position:relative; z-index:210;
}
.hamburger span{
  display:block; width:1.6rem; height:2px; background:var(--ink);
  margin:0.32rem auto; transition:transform .3s ease, opacity .3s ease;
}
.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); }

.drawer-overlay{
  position:fixed; inset:0; background:rgba(36,27,25,0.45);
  z-index:150; opacity:0; visibility:hidden; transition:opacity .3s ease;
}
.drawer-overlay.open{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(78vw, 20rem);
  background:var(--red-gradient);
  z-index:200; transform:translateX(100%);
  transition:transform .38s ease;
  padding:5.5rem 2rem 2rem;
  overflow-y:auto;
}
.drawer.open{ transform:translateX(0); }
.drawer ul{ list-style:none; display:flex; flex-direction:column; gap:0.4rem; }
.drawer a{
  display:block; padding:0.9rem 0; font-size:0.95rem; letter-spacing:0.1em;
  color:rgba(255,255,255,0.95); border-bottom:1px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; gap:0.4em;
}
.drawer .ext-mark{ color:rgba(255,255,255,0.75); }

/* ================= HERO ================= */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  background:var(--off-white); overflow:hidden;
  padding:6rem 1.5rem 4rem;
}
.hero-model{
  position:absolute; top:0; bottom:0; height:100%;
  width:32%; min-width:13rem; max-width:24rem;
  object-fit:cover; object-position:top center;
  z-index:1; opacity:0.92;
}
.hero-model-left{
  left:0;
  -webkit-mask-image:linear-gradient(to right, black 45%, transparent 92%);
  mask-image:linear-gradient(to right, black 45%, transparent 92%);
}
.hero-model-right{
  right:0;
  -webkit-mask-image:linear-gradient(to left, black 45%, transparent 92%);
  mask-image:linear-gradient(to left, black 45%, transparent 92%);
}
.hero-fade{
  position:absolute; inset:0; z-index:2;
  background:radial-gradient(ellipse at center,
    rgba(253,250,249,1) 0%,
    rgba(253,250,249,0.85) 16%,
    rgba(253,250,249,0.4) 32%,
    rgba(253,250,249,0.08) 48%,
    rgba(253,250,249,0) 62%);
}
.hero-content{ position:relative; z-index:3; text-align:center; }
.hero-eyebrow{ font-size:0.8rem; letter-spacing:0.5em; padding-left:0.5em; color:var(--red); margin-bottom:1.6rem; }
.hero-logo{ width:min(85vw, 34rem); height:auto; margin:0 auto; }
.hero-open-date{
  margin-top:1.8rem;
  font-size:clamp(1rem, 2.6vw, 1.25rem);
  letter-spacing:0.3em;
  padding-left:0.3em;
  color:var(--red-deep);
}
.hero-open-headline{
  margin-top:0.5rem;
  font-family:var(--serif);
  font-weight:800;
  font-size:clamp(2.2rem, 7vw, 3.8rem);
  letter-spacing:0.08em;
  line-height:1.1;
  background:var(--red-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-copy{ max-width:32rem; margin:2.4rem auto 0; font-size:1rem; color:var(--ink-soft); }
.hero-cta{
  margin-top:2.8rem; display:inline-flex; align-items:center; gap:0.8rem;
  font-family:var(--serif); font-size:0.95rem; letter-spacing:0.3em; padding-left:0.3em;
  color:var(--red-deep); border-bottom:1px solid var(--red-light); padding-bottom:0.5rem;
  transition:letter-spacing .3s ease, color .3s ease;
}
.hero-cta:hover{ letter-spacing:0.42em; color:var(--red); }

/* ================= SECTIONS ================= */
section{ padding:clamp(4.5rem,9vw,7.5rem) clamp(1.5rem,5vw,4rem); }
.section-head{ text-align:center; margin-bottom:clamp(3rem,6vw,4.5rem); }
.section-kicker{ font-size:0.78rem; letter-spacing:0.45em; padding-left:0.45em; color:var(--red); margin-bottom:1rem; }
.section-title{ font-family:var(--serif); font-weight:700; font-size:clamp(1.9rem,3.4vw,2.6rem); letter-spacing:0.06em; color:var(--ink); }
.section-lead{ max-width:34rem; margin:1.4rem auto 0; color:var(--ink-soft); font-size:0.96rem; }

/* --- system / pricing --- */
.system{ background:var(--red-pale); }
.course-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));
  gap:1.8rem; max-width:56rem; margin:0 auto;
}
.course-grid-single{ max-width:26rem; }
.special-banner{
  text-align:center; font-family:var(--serif); font-weight:700;
  letter-spacing:0.1em; font-size:1.05rem; color:#fff;
  background:var(--red-gradient); padding:0.9rem 1rem; margin-bottom:1.2rem;
}
.course-card{ background:var(--white); overflow:hidden; }
.course-card h3{
  font-family:var(--serif); font-weight:700; letter-spacing:0.12em;
  color:#fff; background:var(--red-gradient); text-align:center; padding:1rem;
  font-size:1.05rem;
}
.course-row{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:0.85rem 1.6rem; font-size:0.95rem; border-bottom:1px solid var(--red-pale);
}
.course-row:last-child{ border-bottom:none; }
.course-row .time{ color:var(--ink-soft); letter-spacing:0.06em; white-space:nowrap; }
.course-row .price{ text-align:right; white-space:nowrap; font-family:var(--serif); font-weight:700; color:var(--red-deep); font-size:1.05rem; }
.price-original{
  display:block; font-family:var(--sans); font-weight:400; font-size:0.78rem;
  color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--red);
}
.price-sale{ display:block; margin-top:0.15rem; }

.option-block{ max-width:56rem; margin:2.4rem auto 0; }
.option-title{
  font-size:0.82rem; letter-spacing:0.2em; color:var(--red-deep);
  text-align:center; margin-bottom:1.2rem;
}
.option-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.option-grid-2{ grid-template-columns:repeat(2,1fr); max-width:28rem; margin:0 auto; }
.option-grid-3{ grid-template-columns:repeat(3,1fr); max-width:40rem; margin:0 auto; }
.option-card{
  background:var(--white); text-align:center; padding:1.3rem 0.6rem;
}
.option-card .o-name{ font-size:0.88rem; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:0.4rem; }
.option-card .o-price{ font-family:var(--serif); font-weight:700; color:var(--red-deep); font-size:1.1rem; }

.point-banner{
  max-width:56rem; margin:2.4rem auto 0;
  background:var(--red-gradient); color:#fff;
  text-align:center; padding:1.3rem 1.5rem;
  font-family:var(--serif); letter-spacing:0.08em; font-size:0.98rem;
}

/* --- access --- */
.access-address{ max-width:40rem; margin:0 auto 3rem; }
.access-address dl{ display:grid; grid-template-columns:6rem 1fr; row-gap:1.1rem; }
.access-address dt{ font-size:0.82rem; letter-spacing:0.1em; color:var(--red-deep); font-weight:500; }
.access-address dd{ font-size:0.92rem; color:var(--ink-soft); }

.access-media{
  display:grid; grid-template-columns:1fr 1fr; gap:1.6rem;
  max-width:64rem; margin:0 auto;
}
.access-media figure{ background:var(--red-gradient-soft); display:flex; flex-direction:column; }
.access-media figcaption{
  font-size:0.78rem; letter-spacing:0.1em; color:var(--ink-soft);
  text-align:center; padding:0.7rem 0;
}
.building-photo{ overflow:hidden; }
.building-photo img{ width:100%; height:auto; }
.map-embed{ flex:1; min-height:20rem; position:relative; overflow:hidden; }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* --- footer --- */
footer{ background:var(--ink); color:rgba(255,255,255,0.85); padding:3.2rem 1.5rem 2rem; text-align:center; }
footer .foot-logo{ width:min(70vw, 14rem); height:auto; margin:0 auto 1.8rem; }
.footer-nav ul{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  gap:0.4rem 1.6rem; margin-bottom:2rem;
}
.footer-nav a{
  font-size:0.8rem; letter-spacing:0.08em; color:rgba(255,255,255,0.75);
  display:inline-flex; align-items:center; gap:0.3em;
  padding-bottom:0.2rem; border-bottom:1px solid transparent;
}
.footer-nav a:hover{ color:#fff; border-color:var(--red-light); }
.footer-nav .ext-mark{ color:var(--red-light); }
footer .foot-note{ font-size:0.76rem; letter-spacing:0.06em; color:rgba(255,255,255,0.5); }
footer .foot-copy{ margin-top:0.6rem; font-size:0.72rem; color:rgba(255,255,255,0.4); }

@media (max-width:820px){
  .desktop-nav{ display:none; }
  .hamburger{ display:block; }
  .course-grid{ grid-template-columns:1fr; }
  .access-media{ grid-template-columns:1fr; }
  .map-embed{ flex:none; aspect-ratio:4/3; min-height:0; }
}

@media (max-width:600px){
  #age-gate .gate-model-right{ display:none; }
  #age-gate .gate-model-left{
    width:100%; max-width:none; min-width:0;
    opacity:0.8;
    object-position:top center;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 34%, black 46%, transparent 90%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 34%, black 46%, transparent 90%);
  }
  .gate-notice{ font-size:0.82rem; line-height:1.7; }

  .hero-model-left{ display:none; }
  .hero-model-right{
    width:100%; max-width:none; min-width:0;
    opacity:0.8;
    object-position:top center;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 34%, black 46%, transparent 90%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 34%, black 46%, transparent 90%);
  }
}

@media (max-width:520px){
  .option-grid{ grid-template-columns:1fr; }
  .course-row{ padding:0.75rem 1.1rem; }
  .course-row .price{ font-size:1rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}