:root{
  --bg:#040817; --bg2:#081233; --ink:#eef2ff; --sub:#9fb0dd;
  --sea:#3b74ff; --sea2:#8fb2ff; --gold:#ffb98a; --neon:#ff9a5c; --line:rgba(90,140,255,.3);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"Zen Kaku Gothic New",sans-serif;line-height:1.9;letter-spacing:.04em;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.en{font-family:"Cormorant Garamond",serif;letter-spacing:.12em}

/* header */
header{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:linear-gradient(to bottom,rgba(4,8,23,.92),rgba(4,8,23,0));transition:background .3s}
header.solid{background:rgba(4,8,23,.95);border-bottom:1px solid var(--line)}
.logo{font-size:28px;font-weight:600;color:var(--sea2)}
.logo small{display:block;font-size:10px;letter-spacing:.3em;color:var(--sub);margin-top:-6px}
nav ul{display:flex;gap:28px;list-style:none}
nav a{font-size:13px;display:flex;flex-direction:column;align-items:center;line-height:1.3}
nav a span:first-child{font-family:"Cormorant Garamond",serif;font-size:16px;letter-spacing:.15em;color:var(--sea2)}
nav a span:last-child{font-size:10px;color:var(--sub)}
.hd-tel{border:1px solid var(--sea);padding:8px 18px;border-radius:999px;font-size:14px;color:var(--sea2)}
.burger{display:none;width:40px;height:40px;background:none;border:0;cursor:pointer}
.burger i{display:block;height:1px;background:var(--sea2);margin:7px 6px;transition:.3s}

/* hero */
.hero{position:relative;height:100svh;min-height:560px;display:grid;place-items:center;text-align:center;overflow:hidden;
  background:radial-gradient(ellipse at 50% 120%,#0d2a8a 0%,#071652 35%,var(--bg) 75%)}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(2px 2px at 20% 30%,#fff8,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#fff7,transparent),
  radial-gradient(1px 1px at 40% 60%,#fff6,transparent),radial-gradient(1.5px 1.5px at 85% 55%,#fff6,transparent),
  radial-gradient(1px 1px at 10% 75%,#fff5,transparent),radial-gradient(2px 2px at 60% 80%,#8fb2ff88,transparent);
  animation:twinkle 6s ease-in-out infinite alternate}
.wave{position:absolute;left:-10%;width:120%;height:200px;bottom:-40px;border-radius:45%;
  background:linear-gradient(to top,rgba(59,116,255,.18),transparent);animation:drift 14s linear infinite}
.wave.w2{bottom:-70px;opacity:.6;animation-duration:20s;animation-direction:reverse}
@keyframes drift{from{transform:translateX(-4%) rotate(0)}50%{transform:translateX(4%) rotate(1deg)}to{transform:translateX(-4%) rotate(0)}}
@keyframes twinkle{from{opacity:.5}to{opacity:1}}
.hero-in{position:relative;z-index:2;padding:0 16px}
.hero h1{font-size:clamp(64px,14vw,160px);font-weight:500;line-height:1;color:var(--sea2);text-shadow:0 0 40px rgba(59,116,255,.45)}
.hero .kana{display:block;font-size:14px;letter-spacing:.6em;color:var(--sub);margin:34px 0 26px}
.hero p{font-size:clamp(15px,2.4vw,19px)}
.hero .area{display:inline-block;margin-top:24px;font-size:12px;border:1px solid var(--line);padding:6px 16px;border-radius:999px;color:var(--sub)}
.scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--sub);z-index:2;letter-spacing:.3em}
.scroll::after{content:"";display:block;width:1px;height:44px;margin:8px auto 0;background:linear-gradient(var(--sea),transparent);animation:sc 2s infinite}
@keyframes sc{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* sections */
section{padding:110px 24px;scroll-margin-top:70px}
.wrap{max-width:1080px;margin:0 auto}
.ttl{text-align:center;margin-bottom:56px}
.ttl .en{display:block;font-size:clamp(40px,7vw,64px);line-height:1;color:var(--sea2)}
.ttl .ja{font-size:13px;color:var(--sub);letter-spacing:.3em}
.reveal{opacity:0;transform:translateY(24px);transition:1s ease}
.reveal.on{opacity:1;transform:none}

/* news */
.news{background:var(--bg2)}
.news ul{list-style:none;max-width:760px;margin:0 auto}
.news li{display:flex;gap:24px;padding:18px 4px;border-bottom:1px solid var(--line)}
.news time{color:var(--sea2);font-family:"Cormorant Garamond",serif;font-size:18px;white-space:nowrap}

/* concept */
.concept .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.visual{aspect-ratio:4/5;border-radius:200px 200px 8px 8px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0e2470,#06141c 70%);border:1px solid var(--line)}
.visual::before{content:"";position:absolute;inset:auto -20% -30% -20%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(59,116,255,.45),transparent 65%)}
.visual span{position:absolute;inset:0;display:grid;place-items:center;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:42px;color:rgba(234,246,247,.85)}
.concept h2{font-size:clamp(22px,3.4vw,30px);font-weight:500;line-height:1.7;margin-bottom:24px}
.concept h2 em{font-style:normal;color:var(--sea2)}
.concept p+p{margin-top:1em}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:64px}
.point{border:1px solid var(--line);border-radius:8px;padding:28px 20px;text-align:center;background:rgba(8,18,51,.6)}
.point .en{font-size:30px;color:var(--gold)}
.point h3{font-size:16px;margin:4px 0 8px}
.point p{font-size:13px;color:var(--sub)}

/* system */
.system{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.price{max-width:760px;margin:0 auto;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.price .head{background:linear-gradient(90deg,#0d2a8a,#081a55);text-align:center;padding:28px 16px}
.price .head small{color:var(--sub);font-size:13px}
.price .head strong{display:block;font-size:clamp(34px,6vw,48px);color:var(--gold);font-family:"Cormorant Garamond",serif;font-weight:600}
.price table{width:100%;border-collapse:collapse}
.price th,.price td{padding:18px 24px;border-top:1px solid var(--line);text-align:left;font-weight:400}
.price th{width:40%;color:var(--sub)}
.price td{text-align:right}
.note{max-width:760px;margin:20px auto 0;font-size:12px;color:var(--sub)}

/* access */
.access .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.access dl{display:grid;grid-template-columns:110px 1fr}
.access dt,.access dd{padding:16px 0;border-bottom:1px solid var(--line)}
.access dt{color:var(--sea2);font-size:14px}
.map{border-radius:12px;overflow:hidden;border:1px solid var(--line);min-height:340px}
.map iframe{width:100%;height:100%;min-height:340px;border:0;filter:grayscale(.4) invert(.9) hue-rotate(160deg)}
.btn{display:inline-block;margin-top:24px;padding:14px 32px;border-radius:999px;background:var(--sea);color:#fff;font-weight:700}

/* recruit */
.recruit{text-align:center;background:radial-gradient(ellipse at 50% 0%,#0d2a8a,var(--bg) 70%)}
.recruit p{max-width:640px;margin:0 auto 8px}
.btn.ghost{background:none;border:1px solid var(--sea);color:var(--sea2)}

/* photos */
.hero.has-photo{background:#000}
.hero .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55}
.hero .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,8,23,.5),rgba(4,8,23,.2) 40%,var(--bg))}
.visual.photo{background-size:cover;background-position:center}
.visual.photo::before,.visual.photo span{display:none}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:56px}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,1fr)}}
/* neon */
.ttl .en{font-family:"Great Vibes",cursive;letter-spacing:0;font-size:clamp(52px,9vw,84px);color:#ffd9bd;text-shadow:0 0 6px var(--neon),0 0 20px var(--neon),0 0 44px rgba(255,120,60,.55)}
.ttl .ja{display:inline-block;margin-top:6px;color:var(--sea2);text-shadow:0 0 10px rgba(59,116,255,.8)}
.ttl::after{content:"";display:block;width:120px;height:1px;margin:18px auto 0;background:var(--sea);box-shadow:0 0 8px var(--sea),0 0 18px var(--sea)}
.btn{background:var(--sea);box-shadow:0 0 14px rgba(59,116,255,.8),0 0 34px rgba(59,116,255,.45)}
.btn.ghost{background:none;box-shadow:0 0 12px rgba(59,116,255,.5) inset,0 0 12px rgba(59,116,255,.5)}
.price,.point,.map,.visual{box-shadow:0 0 0 1px rgba(59,116,255,.35),0 0 24px rgba(59,116,255,.25)}
.price .head strong,.point .en{color:#ffd9bd;text-shadow:0 0 8px var(--neon),0 0 22px rgba(255,120,60,.6)}
.hero h1{font-family:"Great Vibes",cursive;letter-spacing:0;color:#ffd9bd;text-shadow:0 0 8px var(--neon),0 0 24px var(--neon),0 0 60px rgba(255,120,60,.6)}
.hero .logoimg{display:block;width:min(74vw,420px);aspect-ratio:1;margin:0 auto 18px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px #9cc0ff,0 0 18px #3b74ff,0 0 60px rgba(59,116,255,.7);animation:pulse 4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 2px #b8d1ff,0 0 26px #3b74ff,0 0 90px rgba(59,116,255,.85)}}
.hero.has-logo h1,.hero.has-logo .kana{display:none}
.hero .bgimg{opacity:.45;filter:saturate(1.2)}
.hlogo{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px #9cc0ff,0 0 12px #3b74ff;margin-right:10px}
.logo{display:flex;align-items:center}
.logo .wm{font-family:"Great Vibes",cursive;letter-spacing:0;font-size:32px;color:#ffd9bd;text-shadow:0 0 6px var(--neon),0 0 16px var(--neon)}
.caption{font-size:11px;color:var(--sub);text-align:right;margin-top:8px}
footer .logo{justify-content:center}
.price th{white-space:nowrap}
/* ===== animation ===== */
/* opening */
.hero .bgimg{animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.16) translate(-2%,-1.5%)}}
.hero .logoimg{opacity:0;animation:poweron 1.6s .3s forwards,pulse 4s 2s ease-in-out infinite}
@keyframes poweron{0%{opacity:0;transform:scale(.92);filter:brightness(.3)}12%{opacity:.8}16%{opacity:.15}24%{opacity:.9}28%{opacity:.3}40%{opacity:1;filter:brightness(1.4)}100%{opacity:1;transform:none;filter:none}}
.hero-in>p,.hero-in>.area,.hero-in>h1,.hero-in>.kana{opacity:0;animation:fadeup 1.2s forwards}
.hero-in>h1{animation-delay:.3s}.hero-in>.kana{animation-delay:.6s}
.hero-in>p{animation-delay:1.5s}.hero-in>.area{animation-delay:1.9s}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
header{animation:fadein 1s 1.2s both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* water light & bubbles */
.shimmer{position:absolute;inset:auto 0 0 0;height:45%;z-index:1;pointer-events:none;opacity:.3;mix-blend-mode:screen;
  background:repeating-radial-gradient(ellipse at 30% 120%,rgba(59,116,255,.0) 0 18px,rgba(90,140,255,.22) 22px,rgba(59,116,255,0) 30px);
  animation:ripple 9s linear infinite}
@keyframes ripple{from{background-position:0 0}to{background-position:-240px 60px}}
.bubbles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bubbles i{position:absolute;bottom:-20px;border-radius:50%;filter:blur(1px);animation:rise linear infinite;opacity:0}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}100%{transform:translate(var(--dx),-110vh);opacity:0}}
/* section titles: neon switching on */
.ttl .en{opacity:.08;text-shadow:none}
.ttl.on .en{animation:neon 1.4s forwards}
@keyframes neon{0%{opacity:.08;text-shadow:none}10%{opacity:1;text-shadow:0 0 6px var(--neon),0 0 20px var(--neon)}14%{opacity:.15;text-shadow:none}22%{opacity:1;text-shadow:0 0 6px var(--neon),0 0 20px var(--neon)}26%{opacity:.3;text-shadow:none}
  45%,100%{opacity:1;text-shadow:0 0 6px var(--neon),0 0 20px var(--neon),0 0 44px rgba(255,120,60,.55)}}
.ttl.on .en{animation:neon 1.4s forwards,flicker 7s 3s infinite}
@keyframes flicker{0%,93%,100%{opacity:1}94%{opacity:.55}95%{opacity:1}96.5%{opacity:.7}}
.ttl::after{width:0;transition:width 1.1s .6s ease}
.ttl.on::after{width:120px}
/* photo wipe */
.visual{clip-path:inset(100% 0 0 0 round 200px 200px 8px 8px);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1)}
.reveal.on .visual{clip-path:inset(0 0 0 0 round 200px 200px 8px 8px)}
.gallery img,.points .point,.news li,.access dl>*{opacity:0;transform:translateY(20px);transition:opacity .8s,transform .8s}
.in .gallery img,.in.gallery img,.point.on,.in li,.in dl>*,dl.in>*{opacity:1;transform:none}
/* hover glow */
.gallery img,.btn,.point{transition:transform .4s,box-shadow .4s,opacity .8s}
.gallery img:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 0 0 1px #9cc0ff,0 0 30px rgba(59,116,255,.7)}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(59,116,255,1),0 0 50px rgba(59,116,255,.6)}
nav a span:first-child{transition:text-shadow .3s,color .3s}
nav a:hover span:first-child{color:#ffd9bd;text-shadow:0 0 6px var(--neon),0 0 14px var(--neon)}
.cta a:first-child{animation:ctaglow 2.6s ease-in-out infinite}
@keyframes ctaglow{50%{box-shadow:inset 0 0 0 999px rgba(255,255,255,.12),0 0 24px rgba(59,116,255,.9)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
  .ttl .en,.hero .logoimg,.hero-in>*,.gallery img,.points .point,.news li,.access dl>*{opacity:1!important;transform:none!important}.visual{clip-path:none}}
/* system */
.sets{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin:0 auto}
.set{text-align:center;padding:30px 12px;border-radius:12px;background:linear-gradient(160deg,#0d2a8a,#060d33);box-shadow:0 0 0 1px rgba(143,178,255,.5),0 0 30px rgba(59,116,255,.35)}
.set .h{font-family:"Cormorant Garamond",serif;letter-spacing:.25em;color:var(--sea2);font-size:15px}
.set .yen{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:clamp(38px,7vw,56px);line-height:1.2;color:#ffd9bd;text-shadow:0 0 8px var(--neon),0 0 24px rgba(255,120,60,.6)}
.set .ext{font-size:13px;color:var(--sub);margin-top:6px}
.lead2{text-align:center;margin:20px 0 48px;font-size:14px}
.menus{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px;margin:0 auto}
.menus .price{max-width:none;margin:0}
.menus .head{padding:18px 12px}
.menus .head strong{font-family:"Zen Kaku Gothic New",sans-serif;font-size:20px;font-weight:700}
.menus .head small{letter-spacing:.25em;font-family:"Cormorant Garamond",serif}
.price th small{display:block;font-size:11px;color:var(--sub)}
.price th{white-space:normal}
.tnote{font-size:12px;color:var(--sub);padding:12px 24px;border-top:1px solid var(--line)}
.free{display:grid;grid-template-columns:96px 1fr;padding:6px 20px 14px}
.free dt,.free dd{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.free dt{color:var(--sea2)}
.system .note{text-align:center;max-width:none;margin-top:28px;font-size:13px}
@media (max-width:860px){.menus{grid-template-columns:1fr}.sets{gap:10px}.free{grid-template-columns:84px 1fr;padding:6px 16px 14px}}
.wage{max-width:460px;margin:28px auto 24px;text-align:left}
footer{padding:56px 24px 110px;text-align:center;border-top:1px solid var(--line);font-size:12px;color:var(--sub)}
footer .logo{font-size:36px;margin-bottom:12px}

/* fixed CTA (mobile) */
.cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.cta a{padding:14px 8px;text-align:center;font-weight:700;font-size:14px}
.cta a:first-child{background:var(--sea);color:#fff}
.cta a:last-child{background:#0b2230;color:var(--sea2)}

@media (max-width:860px){
  nav{position:fixed;inset:0;background:rgba(4,8,23,.98);display:grid;place-items:center;opacity:0;pointer-events:none;transition:.3s}
  nav.open{opacity:1;pointer-events:auto}
  nav ul{flex-direction:column;gap:22px}
  nav a span:first-child{font-size:24px}
  .hd-tel{display:none}
  .burger{display:block;z-index:70}
  .burger.open i:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger.open i:nth-child(2){opacity:0}
  .burger.open i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  section{padding:80px 16px}
  header{padding:12px 16px}
  .concept .grid,.access .grid{grid-template-columns:1fr;gap:36px}
  .visual{max-width:320px;margin:0 auto;width:100%}
  .points{grid-template-columns:1fr}
  .price th,.price td{padding:14px 16px}
  .cta{display:grid}
}
/* mobile fixes 2026-11-11 */
.en,.set,.set .h,.set .yen,.point .en,.price .head strong,.flow li::before,.rhero .badge b,.news time{font-variant-numeric:lining-nums}
.price td{white-space:nowrap}
.nw{white-space:nowrap;display:inline-block}
.back{padding:12px 4px}
@media (max-width:860px){
  .nobr-sp br{display:none}
  nav a span:last-child{font-size:12px}
  .price th{font-size:14px}
}
.price th{width:auto}
/* instagram */
.hd-r{display:flex;align-items:center;gap:14px}
.hd-ig{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#ffd9bd;box-shadow:0 0 0 1px rgba(255,185,138,.5),0 0 12px rgba(255,120,60,.35);transition:box-shadow .3s,transform .3s}
.hd-ig:hover{transform:translateY(-1px);box-shadow:0 0 0 1px #ffd9bd,0 0 18px rgba(255,120,60,.7)}
.ig-link{display:inline-flex;align-items:center;gap:8px;color:#ffd9bd;padding:6px 0}
.ig-link:hover span{text-decoration:underline}
.ft-ig{margin:6px 0 10px}
@media (max-width:860px){.hd-r{margin-left:auto;margin-right:8px}}