/* ===== スパガールHANAKO ===== */
:root{
  --ink:#2B1B2E; --cream:#FFF7EE; --yellow:#FFE36E; --orange:#FFB547;
  --pink:#D63A5E; --pink2:#E8457A; --pinkText:#C2264E; --white:#fff;
  --ja:'M PLUS Rounded 1c', system-ui, sans-serif; --en:'Fredoka','M PLUS Rounded 1c',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--ja);color:var(--ink);background:var(--cream);line-height:1.7;-webkit-text-size-adjust:100%;overflow-x:hidden}
img,video{max-width:100%}
a{color:var(--pinkText)}
a:hover{color:#8E1636}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:800;border:3px solid var(--ink);border-radius:999px;font-family:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn--lg{font-size:18px;padding:15px 26px;box-shadow:4px 4px 0 var(--ink)}
.btn--sm{font-size:15px;padding:10px 18px}
.btn--pink{background:var(--pink);color:#fff}
.btn--white{background:#fff;color:var(--ink)}
.btn--dark{background:var(--ink);color:var(--yellow)}
.btn:hover{transform:translate(-2px,-2px);color:inherit}
.btn--pink:hover{color:#fff}.btn--dark:hover{color:var(--yellow)}
.btn--lg:hover{box-shadow:6px 6px 0 var(--ink)}
.pill{display:inline-block;margin:0;font-weight:800;font-size:14px;padding:6px 14px;border-radius:999px;border:2px solid var(--ink)}
.pill--dark{background:var(--ink);color:var(--yellow)}
.pill--yellow{background:var(--yellow)}

/* header */
.hd{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:3px solid var(--ink)}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px}
.logo{text-decoration:none;color:var(--ink);display:flex;align-items:baseline;gap:8px}
.logo__ja{font-weight:800;font-size:24px;color:var(--pink2);-webkit-text-stroke:1px var(--ink)}
.logo__en{font-family:var(--en);font-weight:700;font-size:17px;letter-spacing:.12em}
.gnav{display:flex;gap:4px 22px;font-weight:700;font-size:15px}
.gnav a{color:var(--ink);text-decoration:none;padding:10px 0}
.gnav a:hover{color:var(--pinkText)}

/* hero */
.hero{background:var(--yellow);border-bottom:3px solid var(--ink);overflow:hidden}
.hero__in{display:flex;flex-wrap:wrap;align-items:center;gap:40px;padding-top:56px;padding-bottom:64px}
.hero__text{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:20px;position:relative;z-index:2}
.hero__title{margin:0;line-height:1}
.hero__ja{display:block;font-weight:800;font-size:clamp(52px,7.4vw,96px);color:var(--pink2);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.hero__en{display:block;font-family:var(--en);font-weight:700;font-size:clamp(44px,6vw,76px);letter-spacing:.06em;margin-top:6px}
.hero__en span{display:inline-block;animation:letter 2.2s ease-in-out infinite}
.hero__en span:nth-child(2){animation-delay:.1s}.hero__en span:nth-child(3){animation-delay:.2s}
.hero__en span:nth-child(4){animation-delay:.3s}.hero__en span:nth-child(5){animation-delay:.4s}.hero__en span:nth-child(6){animation-delay:.5s}
.hero__catch{margin:0;font-size:clamp(20px,2.4vw,28px);font-weight:800;line-height:1.5}
.hero__lead{margin:0;font-size:16px;line-height:1.9;max-width:480px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__hours{margin:0;font-size:14px;font-weight:700}

/* music button */
.music{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:8px 20px 8px 10px;font-family:inherit;font-weight:800;font-size:15px;color:var(--ink);cursor:pointer;min-height:48px}
.music__icon{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--yellow);display:flex;align-items:center;justify-content:center}
.music .i-pause{display:none}
.music.is-playing .i-play{display:none}.music.is-playing .i-pause{display:block}
.eq{display:flex;align-items:flex-end;gap:3px;height:20px}
.eq i{display:block;width:4px;height:7px;border-radius:2px;background:var(--ink)}
.music.is-playing .eq i{animation:eq .8s ease-in-out infinite}
.music.is-playing .eq i:nth-child(2){animation-delay:.2s}.music.is-playing .eq i:nth-child(3){animation-delay:.4s}.music.is-playing .eq i:nth-child(4){animation-delay:.1s}
.music__title{margin:-10px 0 0 6px;font-size:13px;font-weight:700}

/* hero stage */
.hero__visual{flex:1 1 420px;min-width:0;display:flex;justify-content:center}
.stage{position:relative;width:100%;max-width:560px;aspect-ratio:1/1}
.burst{position:absolute;left:-12%;top:-12%;width:124%;height:124%;animation:spin 40s linear infinite}
.stage__float{position:absolute;inset:0;animation:float 3.2s ease-in-out infinite}
.stage__circle{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:6px 8px 0 var(--ink);background:#FFC93C}
.stage__video{width:102%;height:102%;margin:-1%;display:block;object-fit:cover}
.petal{position:absolute;top:0;width:24px;height:24px;background:#FF9FC0;border-radius:80% 0 80% 0;animation:fall 7s linear infinite;opacity:0}
.petal--s{width:18px;height:18px;background:#FFC2D6}
.star{position:absolute;height:auto;animation:twinkle 2s ease-in-out infinite}
.pop{position:absolute;font-weight:800;border:3px solid var(--ink);border-radius:999px;padding:8px 18px;white-space:nowrap;animation:pop 2.4s ease-out infinite}
.pop--l{left:-4%;top:62%;background:#fff;color:var(--pink);font-size:clamp(18px,2vw,24px)}
.pop--r{right:-4%;top:84%;background:var(--ink);color:var(--yellow);font-size:clamp(16px,1.8vw,22px);animation-delay:1.2s}

/* marquee */
.marquee{background:var(--ink);color:var(--yellow);overflow:hidden;border-bottom:3px solid var(--ink)}
.marquee__track{display:flex;width:max-content;padding:14px 0;font-family:var(--en);font-weight:700;font-size:22px;white-space:nowrap;animation:marquee 28s linear infinite}
.marquee__track span{padding-right:40px}

/* sections */
.sec{padding:80px 0}
.sec--pink{background:var(--pink);color:#fff;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.sec--white{background:#fff;border-top:3px solid var(--ink)}
.sec__head{margin-bottom:32px}
.sec__head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.sec__en{margin:0 0 6px;font-family:var(--en);font-weight:700;font-size:18px;color:var(--pinkText);letter-spacing:.1em}
.sec__en--yellow{color:var(--yellow)}
.sec__ttl{margin:0;font-size:clamp(30px,4vw,44px);font-weight:800;line-height:1.4}
.more{font-weight:800;color:var(--ink);padding:12px 0}
.note{margin:24px 0 0;font-size:14px}

/* girls */
.girls{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
.girl{text-decoration:none;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:5px 5px 0 var(--ink);transition:transform .15s}
.girl:hover{transform:translate(-2px,-2px);color:var(--ink)}
.girl__ph{aspect-ratio:3/4;border-bottom:3px solid var(--ink);background:#FFD6DE;overflow:hidden}
.girl__ph img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.girl__body{padding:14px 16px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.girl__name{margin:0;font-size:20px;font-weight:800}
.girl__name small{font-size:14px;font-weight:700;margin-left:6px}
.girl__time{margin:0;background:var(--yellow);border:2px solid var(--ink);border-radius:999px;padding:3px 12px;font-family:var(--en);font-weight:600;font-size:15px}
.girls__empty{grid-column:1/-1;margin:0;font-weight:700}

/* concept */
.concept__lead{margin:0 0 40px;max-width:760px;font-size:17px;line-height:2}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.card{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:24px;padding:28px}
.card__no{margin:0 0 8px;font-family:var(--en);font-weight:700;font-size:40px;line-height:1;color:var(--pinkText)}
.card h3{margin:0 0 8px;font-size:21px}
.card p:last-child{margin:0;font-size:15px;line-height:1.8}

/* price */
.price{display:flex;flex-wrap:wrap;gap:24px}
.price__main{flex:1 1 380px;min-width:0;background:#fff;border:3px solid var(--ink);border-radius:28px;padding:32px;box-shadow:6px 6px 0 var(--ink)}
.price__name{margin:14px 0 6px;font-size:28px}
.price__desc{margin:0 0 16px;font-size:15px}
.price__side{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:20px}
.pbox{background:#fff;border:3px solid var(--ink);border-radius:24px;padding:22px 24px}
.pbox--yellow{background:var(--yellow)}
.pbox h3{margin:0 0 8px;font-size:19px}
.pbox p{margin:0 0 12px;font-size:14px}
.ptable{width:100%;border-collapse:collapse;border-top:2px dashed var(--ink)}
.ptable th,.ptable td{padding:13px 0;border-bottom:2px dashed var(--ink);font-weight:800;font-size:19px}
.ptable th{text-align:left}
.ptable td{text-align:right;color:var(--pinkText)}
.ptable--s th,.ptable--s td{font-size:15px;padding:10px 0}
.rules{margin-top:28px;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:4px 22px}
.rules summary{cursor:pointer;font-weight:800;padding:14px 0}
.rules ul{margin:0 0 16px;padding-left:1.2em;font-size:14px;line-height:1.9}

/* reserve */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.step{border:3px solid var(--ink);border-radius:24px;padding:26px;background:var(--cream)}
.step__no{width:52px;height:52px;border-radius:50%;background:var(--pink);color:#fff;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--en);font-weight:700;font-size:24px}
.step h3{margin:12px 0 6px;font-size:21px}
.step p{margin:0;font-size:15px}
.ways{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.way{flex:1 1 280px;text-decoration:none;border:3px solid var(--ink);border-radius:24px;padding:20px 26px;box-shadow:5px 5px 0 var(--ink);display:flex;flex-direction:column;gap:2px;transition:transform .15s}
.way:hover{transform:translate(-2px,-2px)}
.way--pink{background:var(--pink);color:#fff}.way--pink:hover{color:#fff}
.way--yellow{background:var(--yellow);color:var(--ink)}.way--yellow:hover{color:var(--ink)}
.way--white{background:#fff;color:var(--ink)}.way--white:hover{color:var(--ink)}
.way__s{font-weight:700;font-size:14px}
.way__tel{font-family:var(--en);font-weight:700;font-size:32px}
.way__b{font-weight:800;font-size:24px}

/* form */
.mail{margin-top:56px;background:var(--cream);border:3px solid var(--ink);border-radius:28px;padding:32px}
.mail__ttl{margin:0 0 6px;font-size:24px}
.mail__lead{margin:0 0 20px;font-size:14px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px 20px}
.f{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.f--full{grid-column:1/-1}
.f input,.f select,.f textarea{font:inherit;font-weight:400;font-size:16px;padding:12px 14px;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);width:100%}
.f input:focus,.f select:focus,.f textarea:focus{outline:3px solid var(--pink2);outline-offset:1px}
.mail__msg{min-height:1.7em;margin:16px 0;font-weight:700}
.mail__msg.is-err{color:#B3122F}.mail__msg.is-ok{color:#16683A}

/* footer */
.ft{background:var(--ink);color:var(--cream);padding:56px 0 40px}
.ft__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.ft__logo{margin:0 0 10px;font-family:var(--en);font-weight:700;font-size:30px}
.ft__logo span{font-family:var(--ja);font-weight:800;color:#FF8FA3}
.ft__info{margin:0;font-size:14px;line-height:1.9}
.ft a{color:var(--yellow)}
.ft__nav{display:flex;flex-wrap:wrap;gap:6px 24px;align-content:flex-start;font-weight:700;font-size:15px}
.ft__nav a{color:var(--cream);padding:8px 0}
.ft__copy{margin-top:40px;font-size:12px;color:#D9C9CF}

/* sp bar */
.sbar{display:none}

/* animations */
@keyframes letter{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px)}55%{transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fall{0%{transform:translate(0,-30px) rotate(0);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translate(-70px,560px) rotate(320deg);opacity:0}}
@keyframes twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.4}50%{transform:scale(1.15) rotate(20deg);opacity:1}}
@keyframes pop{0%,35%{transform:scale(0) rotate(-12deg);opacity:0}50%{transform:scale(1.15) rotate(-6deg);opacity:1}62%,80%{transform:scale(1) rotate(-6deg);opacity:1}100%{transform:scale(.9) rotate(-6deg);opacity:0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes eq{0%,100%{height:6px}50%{height:20px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* responsive */
/* hamburger */
.burger{display:none;width:48px;height:48px;border:3px solid var(--ink);border-radius:14px;background:#fff;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:22px;height:3px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.gnav__tel,.gnav__line{display:none}
@media (max-width:900px){
  .hd__in{position:relative}
  .burger{display:flex}
  .gnav{display:none;position:absolute;left:0;right:0;top:100%;margin-top:3px;flex-direction:column;gap:0;background:var(--cream);border-bottom:3px solid var(--ink);padding:8px 20px 20px;box-shadow:0 12px 24px rgba(43,27,46,.15)}
  .gnav.is-open{display:flex}
  .gnav a{padding:14px 4px;font-size:17px;border-bottom:2px dashed rgba(43,27,46,.25)}
  .gnav .gnav__tel,.gnav .gnav__line{display:flex;justify-content:center;margin-top:12px;border:3px solid var(--ink);border-radius:999px;font-weight:800}
  .gnav .gnav__tel{background:var(--pink);color:#fff}
  .gnav .gnav__line{background:var(--yellow);color:var(--ink)}
}
@media (max-width:640px){
  .hd__tel{display:none}
  .hero__in{padding-top:36px;padding-bottom:48px;gap:28px}
  .hero__visual{order:-1}
  .stage{max-width:340px}
  .pop--l{left:-2%}.pop--r{right:-2%}
  .sec{padding:56px 0}
  .price__main,.mail{padding:22px}
  .girls{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .girl{border-radius:18px;box-shadow:4px 4px 0 var(--ink)}
  .girl__name{font-size:17px}.girl__time{font-size:13px}
  body{padding-bottom:64px}
  .sbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;border-top:3px solid var(--ink)}
  .sbar a{flex:1;display:flex;align-items:center;justify-content:center;height:60px;text-decoration:none;font-weight:800;font-size:17px}
  .sbar__tel{background:var(--pink);color:#fff}
  .sbar__line{background:var(--yellow);color:var(--ink);border-left:3px solid var(--ink)}
}

/* ===== 週間スケジュール（schedule.html） ===== */
.page-hd{background:var(--yellow);border-bottom:3px solid var(--ink);padding:48px 0 36px}
.page-hd .sec__ttl{margin-top:4px}
.days{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.day{font-family:inherit;font-weight:800;font-size:15px;line-height:1.3;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:16px;padding:10px 16px;min-height:48px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.day--sat{color:#1F4FB4}.day--sun{color:#B3122F}
.day[aria-pressed="true"]{background:var(--pink);color:#fff;transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.week__ttl{margin:0 0 20px;font-size:22px}
@media (max-width:640px){.days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.day{padding:8px 4px;font-size:13px;border-radius:12px}}

/* ===== 下層ページ共通 ===== */
.prose{max-width:820px;font-size:16px;line-height:2;margin:0 0 28px}
.prose p{margin:0 0 1em}
.prose--box{background:#fff;border:3px solid var(--ink);border-radius:24px;padding:26px 28px;max-width:none}
.prose--box p:last-child{margin-bottom:0}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{background:var(--yellow);border:2px solid var(--ink);border-radius:999px;padding:6px 16px;font-weight:800;font-size:15px}
.faq{display:flex;flex-direction:column;gap:12px;max-width:900px}
.faq details{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:2px 20px}
.faq summary{cursor:pointer;font-weight:800;font-size:17px;padding:14px 0;min-height:48px}
.faq p{margin:0 0 16px;font-size:15px;line-height:1.9}
.rulebox{margin-top:28px;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:22px 24px}
.rulebox h2{margin:0 0 10px;font-size:19px}
.rulebox ul{margin:0;padding-left:1.2em;font-size:14px;line-height:1.9}
.price__name{font-weight:800}.pbox h2{margin:0 0 8px;font-size:19px}
.backlink{margin:28px 0 0;font-weight:800}
.ways + .mail{margin-top:32px}
.sec .ways{margin-top:32px}

/* profile */
.profile{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.profile__photos{flex:0 1 340px;min-width:0}
.profile__main{width:100%;height:auto;aspect-ratio:320/440;object-fit:cover;object-position:center top;display:block;border:3px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 var(--ink);background:#FFD6DE}
.profile__thumbs{display:flex;gap:10px;margin-top:16px}
.profile__thumbs button{padding:0;border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;width:72px}
.profile__thumbs button[aria-pressed="true"]{outline:3px solid var(--pink2);outline-offset:2px}
.profile__thumbs img{display:block;width:100%;height:auto;aspect-ratio:8/11;object-fit:cover;object-position:center top}
.profile__body{flex:1 1 360px;min-width:0}
.profile__name{margin:0 0 14px;font-size:32px}
.profile__name small{font-size:18px;margin-left:8px}
.profile__spec{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.profile__spec div{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:8px 14px;min-width:92px}
.profile__spec dt{font-size:12px;font-weight:700}
.profile__spec dd{margin:0;font-weight:800;font-size:16px}
.profile__comment{font-size:16px;line-height:2;margin:0 0 24px}
.profile__h{margin:0 0 10px;font-size:20px}
.profile__days{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.profile__days li{display:flex;justify-content:space-between;gap:12px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:10px 16px;font-size:15px}
.profile__days li span{font-family:var(--en);font-weight:600}

/* recruit */
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.rgrid .card h2{margin:0 0 8px;font-size:20px;line-height:1.5}
.rh{margin:64px 0 20px;font-size:clamp(24px,3vw,32px);padding-left:14px;border-left:8px solid var(--pink)}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.case{background:#fff;border:3px solid var(--ink);border-radius:24px;padding:24px;box-shadow:5px 5px 0 var(--ink)}
.case h3{margin:0 0 4px;font-size:19px}
.case__h{margin:0 0 12px;font-size:14px;font-weight:700}
.case ul{list-style:none;margin:0;padding:0;border-top:2px dashed var(--ink)}
.case li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:2px dashed var(--ink);font-size:14px}
.case li b{white-space:nowrap;color:var(--pinkText)}
.case__t{margin:14px 0 0;font-weight:800;font-size:18px;color:var(--pinkText)}
.rtable{width:100%;border-collapse:separate;background:#fff;border:3px solid var(--ink);border-radius:20px;overflow:hidden;border-spacing:0}
.rtable th,.rtable td{padding:14px 18px;border-bottom:2px dashed rgba(43,27,46,.3);text-align:left;vertical-align:top;font-size:15px;line-height:1.8}
.rtable tr:last-child th,.rtable tr:last-child td{border-bottom:0}
.rtable th{width:9em;background:var(--yellow);font-weight:800;white-space:nowrap}
div.way{cursor:default}
@media (max-width:640px){.rtable th{width:6.5em;white-space:normal;padding:12px}.rtable td{padding:12px}.rh{margin-top:48px}.profile__name{font-size:26px}}