/* 牡丹｜二丁目の毒舌ママ 紫のカウンター: アイコンの紫とネオンの輪、バーの灯りに合わせる */
:root{
  --bg:#12061f;--bg2:#1b0b2c;--card:#24123a;
  --ink:#f9f0ff;--body:#d6c2e6;--muted:#9982b0;--line:rgba(247,239,255,.14);
  --gold:#e8c56a;
  --gold-grad:linear-gradient(180deg,#fff2c2 0%,#e8c56a 42%,#b98a35 100%);
  --peony:#e0327c;--lilac:#c084fc;--neon:#ffc27a;
  --kv-shade:linear-gradient(180deg,rgba(18,6,31,.62) 0%,rgba(18,6,31,.7) 45%,rgba(18,6,31,.94) 82%,#12061f 100%);
  --velvet:radial-gradient(90% 60% at 85% 0%,rgba(120,40,170,.38),transparent 70%),radial-gradient(70% 50% at 0% 100%,rgba(224,50,124,.16),transparent 70%);
  --glow:radial-gradient(closest-side,rgba(224,50,124,.34),rgba(150,60,220,.2) 50%,transparent 72%);
  --halo:0 0 0 1.5px rgba(255,214,160,.95),0 0 22px 4px rgba(255,160,96,.6),0 0 90px 20px rgba(224,50,124,.42),inset 0 0 22px 2px rgba(255,160,96,.42);
  --line-green:#06C755;
  --f-en:"Cinzel",serif;
  --f-h:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-b:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--f-b);font-size:15px;line-height:1.95;letter-spacing:.04em;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
figure{margin:0}

/* ---------- ローダー（ネオンの輪が点く） ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:none;place-items:center;align-content:center;gap:22px}
.motion .loader{display:grid;animation:loaderOut .8s 3s forwards}
.loader.is-done{opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s}
.loader__ring{width:120px;height:120px;overflow:visible;filter:drop-shadow(0 0 10px rgba(255,160,96,.8)) drop-shadow(0 0 26px rgba(224,50,124,.6))}
.loader__ring circle{fill:none;stroke:var(--neon);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:302;stroke-dashoffset:302;transform:rotate(-90deg);transform-origin:50% 50%;animation:draw 1.2s cubic-bezier(.65,0,.35,1) forwards,flick 1.4s steps(1) forwards}
.loader__t{font:500 13px/1 var(--f-h);letter-spacing:.6em;color:var(--body);text-indent:.6em}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes flick{0%{opacity:.35}18%{opacity:1}24%{opacity:.3}32%{opacity:1}60%{opacity:.55}66%,100%{opacity:1}}
@keyframes loaderOut{to{opacity:0;visibility:hidden}}

/* ---------- 進み具合ゲージ（何杯目か） ---------- */
.sando{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:45;height:44vh;display:flex;opacity:0;transition:opacity .6s;pointer-events:none}
.sando.is-on{opacity:1;pointer-events:auto}
.sando__rail{position:absolute;right:6px;top:0;bottom:0;width:1px;background:var(--line)}
.sando__fill{position:absolute;inset:0;background:var(--gold);transform-origin:top;transform:scaleY(0)}
.sando ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;height:100%}
.sando li{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:8px;font:500 10px/1 var(--f-h);color:var(--muted);letter-spacing:.1em}
.sando li a{text-decoration:none;writing-mode:vertical-rl;font-size:0;width:22px;height:22px;padding:0}
.sando li::after{content:"";position:absolute;right:3px;width:7px;height:7px;border-radius:50%;background:var(--bg);border:1px solid var(--muted);transition:background .4s,border-color .4s,box-shadow .4s}
.sando li.is-past::after{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px rgba(232,197,106,.8)}
.sando li.is-cur a{color:var(--ink)}

/* ---------- ヒーロー ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero__kv{position:absolute;inset:0;z-index:-2;background:var(--bg2)}
.hero__kv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%;animation:kvzoom 26s ease-in-out infinite alternate}
.hero__kv::after{content:"";position:absolute;inset:0;background:var(--kv-shade)}
@keyframes kvzoom{from{transform:scale(1.04)}to{transform:scale(1.2) translateX(-2%)}}

/* 牡丹の花びら（ヒーローだけ） */
.petals{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.petals i{position:absolute;top:-4%;left:var(--x);width:13px;height:11px;background:linear-gradient(135deg,#ff7fb5,var(--peony) 60%,#8f1450);border-radius:80% 10% 80% 10%;opacity:.8;animation:petal var(--d) linear var(--delay) infinite}
@keyframes petal{0%{transform:translate(0,-6vh) rotate(0deg) scale(var(--sc))}100%{transform:translate(var(--sway),112vh) rotate(560deg) scale(var(--sc))}}

.hero__in{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;gap:0 2vw;padding:40px 6vw 40px;align-content:start}
.eyebrow{grid-column:1/-1;font:700 clamp(17px,4.8vw,24px)/1.2 var(--f-h);color:var(--ink);letter-spacing:.3em;margin-bottom:26px}
.eyebrow::before{content:"";display:inline-block;width:1.6em;height:1px;background:var(--peony);vertical-align:middle;margin-right:.7em}
.hero__h1{grid-column:1;grid-row:2;margin:0;writing-mode:vertical-rl;font:800 min(17vh,23vw)/1 var(--f-h);color:var(--gold);letter-spacing:.04em;position:relative;z-index:2;filter:drop-shadow(0 8px 26px rgba(10,2,20,.85))}
/* 金のグラデは1文字ずつの側に持たせる（親に付けると文字を動かした時に消える） */
.hero__h1 .ch{display:inline-block;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

.slot--icon{grid-column:2;grid-row:2;align-self:center;justify-self:end;position:relative;width:min(56vw,340px);aspect-ratio:1;margin-right:2vw;color:var(--gold)}
.icon__ring{position:absolute;inset:-17%;width:134%;height:134%;animation:spin 70s linear infinite;opacity:.85}
.icon__ring text{font:500 7px var(--f-en);letter-spacing:.34em;fill:currentColor}
.icon__halo{position:absolute;inset:-4%;border-radius:50%;box-shadow:var(--halo);animation:halo 4.5s ease-in-out infinite}
.icon__face{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--card)}
.icon__face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seal{position:absolute;left:-4%;bottom:6%;writing-mode:vertical-rl;background:var(--peony);color:#fff;font:700 13px/1.15 var(--f-h);letter-spacing:.2em;padding:11px 7px;border-radius:2px;transform:rotate(-6deg);box-shadow:0 10px 24px -8px rgba(10,2,20,.8)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes halo{0%,100%{opacity:1}50%{opacity:.72}}

.hero__copy{grid-column:1/-1;grid-row:3;margin-top:40px;position:relative;z-index:2}
.hero__lead{font:700 clamp(25px,6.9vw,42px)/1.55 var(--f-h);color:var(--ink);letter-spacing:.06em}
.hero__sub{margin-top:14px;max-width:28em;color:var(--body);font-size:15px}
.hero__copy .btn{margin-top:26px}
.hero__note{margin-top:22px;font-size:11px;color:var(--muted);letter-spacing:.18em}

/* ---------- ボタン（LINE 緑） ---------- */
.btn--line{display:inline-flex;align-items:center;justify-content:center;gap:.6em;white-space:nowrap;background:var(--line-green);color:#fff;text-decoration:none;font:700 18px/1.2 var(--f-b);letter-spacing:.06em;padding:23px 28px;border-radius:999px;box-shadow:0 14px 30px -12px rgba(6,199,85,.7);transition:transform .25s,box-shadow .25s}
.btn--line:hover{transform:translateY(-2px);box-shadow:0 20px 38px -12px rgba(6,199,85,.85)}
.btn--line:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.btn--lg{font-size:19px;padding:26px 16px}
.hero__copy .btn,.gate__body .btn,.honden .btn{width:100%;max-width:460px}
.btn--line svg{width:26px;height:26px}

/* ---------- 一杯目・二杯目・三杯目 ---------- */
.gate{position:relative;display:grid;gap:24px;padding:64px 7vw 52px 6vw;isolation:isolate}
.gate::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--velvet);opacity:.9;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.gate__head{display:flex;gap:18px;align-items:flex-start}
.sec__no{writing-mode:vertical-rl;flex:none;font:500 13px/1 var(--f-h);color:var(--peony);letter-spacing:.4em;padding-left:10px;border-left:1px solid var(--peony)}
.sec__title{margin:0;font:700 clamp(34px,9.6vw,92px)/1.32 var(--f-h);color:var(--ink);letter-spacing:.05em}
.gate__body{display:grid;gap:22px;max-width:36em}
.p{font-size:18px;line-height:1.95;color:var(--ink)}
.p,.hero__sub,.worries li,.step dd{word-break:auto-phrase;text-wrap:pretty}
.worries{list-style:none;margin:0;padding:0}
.worries li{position:relative;padding:16px 0 16px 1.8em;border-top:1px solid var(--line);font:500 18px/1.7 var(--f-h);color:var(--ink);transition:padding-left .35s}
.worries li:last-child{border-bottom:1px solid var(--line)}
.worries li::before{content:"";position:absolute;left:0;top:50%;width:1em;height:1px;background:var(--lilac)}
.worries li:hover{padding-left:2.4em}
.gate__body .btn{justify-self:start}

/* 二杯目: ママの身の上（事実の一文）と、流れる中抜き文字 */
.fact{font:700 clamp(21px,5.6vw,34px)/1.7 var(--f-h);color:var(--ink);letter-spacing:.05em;padding-left:18px;border-left:2px solid var(--peony)}
.marq{position:relative;margin:0 -7vw 0 -6vw;overflow:hidden;padding:6px 0}
.marq__in{display:inline-block;white-space:nowrap;font:800 clamp(64px,19vw,170px)/1.1 var(--f-h);letter-spacing:.06em;color:transparent;-webkit-text-stroke:1px rgba(192,132,252,.55);will-change:transform}

/* 三杯目: カウンターの写真 */
.slot--bar{position:relative;aspect-ratio:3/2;border-radius:2px;overflow:hidden;background:var(--card);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.slot--bar img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;object-position:16% 50%}
.slot--bar::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(18,6,31,.55) 100%);pointer-events:none}

/* ---------- 受け方 ---------- */
.flow{display:grid;gap:26px;padding:64px 7vw 60px 6vw;background:var(--bg2);border-block:1px solid var(--line)}
.flow__head{display:flex;gap:18px;align-items:flex-start}
.flow__body{display:grid;gap:30px}
.steps{margin:0}
.step{display:grid;grid-template-columns:3.2em 1fr;align-items:baseline;padding:22px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step dt{font:800 34px/1 var(--f-h);color:var(--ink)}
.step dd{margin:0;font:500 17px/1.7 var(--f-h);color:var(--ink)}
.topics__t{font:500 12px/1 var(--f-h);color:var(--muted);letter-spacing:.4em;margin-bottom:14px}
.topics ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.topics li{font:500 15px/1 var(--f-h);color:var(--ink);border:1px solid var(--line);background:var(--card);padding:12px 16px;border-radius:2px;transition:border-color .3s}
.topics li:hover{border-color:var(--lilac)}

/* ---------- 大きな一文 ---------- */
.quote{padding:76px 6vw}
.say{max-width:9em;font:800 clamp(36px,10.4vw,116px)/1.4 var(--f-h);color:var(--ink);letter-spacing:.04em}
.say .ch{display:inline-block}

/* ---------- 最後の CTA（ネオンの輪の下で） ---------- */
.honden{position:relative;overflow:hidden;isolation:isolate;padding:84px 6vw 68px;display:grid;align-items:end}
.honden__glow{position:absolute;left:50%;top:38%;width:140vw;height:140vw;max-width:1100px;max-height:1100px;transform:translate(-50%,-50%);z-index:-2;background:var(--glow)}
.honden__halo{position:absolute;left:50%;top:38%;width:min(96vw,640px);aspect-ratio:1;margin:calc(min(96vw,640px) / -2) 0 0 calc(min(96vw,640px) / -2);border-radius:50%;z-index:-1;box-shadow:var(--halo);opacity:.6}
.honden__in{display:grid;gap:22px;justify-items:start}
.honden .sec__no{writing-mode:horizontal-tb;border-left:0;padding-left:0;border-bottom:1px solid var(--peony);padding-bottom:8px;letter-spacing:.6em}
.honden .sec__title{font-size:clamp(31px,8.4vw,84px)}
.honden .btn{margin-top:6px}
.honden__lead{max-width:22em}

.foot{padding:32px 6vw calc(100px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.foot__c{font:400 12px/1 var(--f-h);color:var(--muted);letter-spacing:.2em}

/* スマホの追従ボタン */
.dock{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;font-size:15px;padding:16px 20px;transform:translateY(180%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.dock.is-on{transform:none}
.dock.is-hide{transform:translateY(180%)}

/* ---------- 演出: タップした場所からスパンコールが舞う ---------- */
.sq{position:fixed;z-index:70;pointer-events:none;width:var(--w);height:var(--w);background:var(--c);border-radius:var(--r);box-shadow:0 0 10px var(--c);transform:translate(-50%,-50%);animation:sq var(--t) cubic-bezier(.16,.8,.3,1) forwards}
.sq-ring{position:fixed;z-index:70;pointer-events:none;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,194,122,.85);box-shadow:0 0 14px rgba(224,50,124,.7);transform:translate(-50%,-50%);animation:sqring 1s cubic-bezier(.22,1,.36,1) both}
@keyframes sq{0%{transform:translate(-50%,-50%) scale(.3) rotate(0deg);opacity:1}65%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(var(--rot));opacity:0}}
@keyframes sqring{0%{transform:translate(-50%,-50%) scale(.3);opacity:.9}100%{transform:translate(-50%,-50%) scale(9);opacity:0}}

/* 登場 */
.motion .in{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.motion .in.is-in{opacity:1;transform:none}

/* ---------- PC ---------- */
@media (min-width:900px){
  body{font-size:16px}
  .sando{right:22px;height:50vh}
  .sando li{font-size:12px}
  .sando li a{font-size:12px;width:auto;height:auto;padding:4px 16px 4px 4px}
  .hero__in{grid-template-columns:auto minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto 1fr;min-height:100svh;align-content:stretch;padding:64px 8vw 72px 6vw;gap:0 3vw}
  .hero__kv img{object-position:50% 50%}
  .p{font-size:19px}
  .eyebrow{grid-column:1/3;grid-row:1}
  .hero__h1{grid-row:2;align-self:center;font-size:min(24vh,13vw)}
  .slot--icon{grid-column:3;grid-row:1/3;justify-self:center;width:min(34vw,500px);margin:40px 0 0}
  .seal{font-size:15px;padding:13px 9px}
  .hero__copy{grid-column:2;grid-row:2;align-self:end;margin:0 0 2vh}
  .hero__lead{font-size:clamp(28px,2.6vw,42px)}
  .gate{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:end;gap:6vw;padding:14vh 10vw 10vh}
  .gate--r .gate__head{order:2}
  .gate--r .gate__body{order:1;justify-self:end}
  .sec__title{font-size:clamp(40px,4.3vw,84px)}
  .marq{margin:0}
  .marq__in{font-size:clamp(90px,9vw,150px)}
  .flow{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:6vw;padding:12vh 10vw}
  .quote{padding:16vh 10vw}
  .honden{padding:18vh 10vw 14vh}
  .dock{display:none}
  .btn--lg{padding:26px 28px}
  .foot{padding-bottom:40px}
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .loader,.petals,.sq,.sq-ring{display:none!important}
  .in{opacity:1!important;transform:none!important}
  .sando{opacity:1;pointer-events:auto}
  .dock{transform:none}
}