/* WHIP SPA 第9版の足し分（2026-10-16、お店からの直しのご依頼）
   v8.css の後に読む。トップ（index.html）で替えた所だけ。 */

/* ---------- はじまり ---------- */
/* 評価は、いちばん上に（スクロールしなくても見える） */
.hero-rate{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:8px 18px 8px 14px;border-radius:999px;background:#fff;box-shadow:var(--sh-s);text-decoration:none;color:var(--ink);line-height:1.35;max-width:100%}
.hero-rate > b{font-family:var(--en);font-weight:600;font-size:22px;letter-spacing:.01em}
.hr-t{display:grid}
.hr-t b{font-size:13.5px}
.hr-t small{font-size:11px;color:var(--muted)}
.hero-rate:hover{transform:translateY(-1px)}
.hero-catch{letter-spacing:.06em}
.hero-h1{font-size:clamp(15px,1.4vw,17px)}

/* はじめての値段（お得を大きく） */
.offer{position:relative;padding-top:30px}
.offer-badge{position:absolute;left:22px;top:-15px;display:inline-flex;align-items:baseline;gap:8px;padding:5px 16px;border-radius:999px;background:var(--cara);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;box-shadow:0 10px 20px -12px rgba(138,91,55,.9)}
.offer-badge b{font-size:15px}
.offer-l span{font-size:12.5px;font-weight:500;color:var(--muted)}
.offer-p b{transition:color .4s}
.offer-p.low b{color:var(--cara)}
.down{margin:14px 0 16px;padding:14px 14px 12px;border-radius:18px;background:var(--milk)}
.down-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:8px}
.down-h small{font-size:11.5px;font-weight:500;color:var(--muted)}
.down-list{display:grid;gap:6px}
.down-list button{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;min-height:52px;padding:8px 14px 8px 12px;border-radius:14px;border:0;background:#fff;text-align:left;line-height:1.35;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s,background .3s}
.down-list button span{display:grid;font-weight:700;font-size:14px;color:var(--ink)}
.down-list button small{font-weight:500;font-size:11.5px;color:var(--muted)}
.down-list button b{font-family:var(--en);font-weight:600;font-size:16px;color:var(--cara);white-space:nowrap}
.down-list button i{width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--line-2);position:relative;transition:background .3s}
.down-list button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--cara)}
.down-list button[aria-pressed="true"] i{background:var(--cara);box-shadow:none}
.down-list button[aria-pressed="true"] i::after{content:"";position:absolute;left:6px;top:4px;width:6px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.down-say{margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.7;min-height:1.7em}
.down-say b{white-space:nowrap;font-family:var(--en);font-size:17px;color:var(--cara)}

/* 写真が順に替わる窓（共通の作りは slides.css。ここはトップの大きさだけ） */
.slides{aspect-ratio:4/5;border-radius:28px}
.slides .sl-track img{object-position:50% 40%}

@media (max-width:959px){
  .hero-rate{order:0;align-self:flex-start;margin-bottom:12px}
  .hero-pic{order:4}
  .slides{width:min(80vw,340px)}
}
@media (max-width:520px){
  .offer{padding-top:28px}
  .offer-badge{left:18px}
}

/* ---------- はじめての方へ ＋ 知りたいことへ ---------- */
.jump9{margin-top:clamp(30px,4vw,44px);padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--line)}
.jump9-h{font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--cara);margin-bottom:14px}
.jump9 ul{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.jump9 a{display:grid;justify-items:center;gap:6px;padding:14px 6px 12px;border-radius:18px;background:var(--cream);text-decoration:none;color:var(--ink);text-align:center;transition:background .3s,transform .35s var(--ease)}
.jump9 a:hover{background:var(--milk);transform:translateY(-2px)}
.jump9 svg{width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.jump9 b{font-size:13px;line-height:1.4}
@media (min-width:760px){.jump9 ul{grid-template-columns:repeat(6,1fr)}.jump9 b{font-size:14px}}
.first-list b{font-size:15.5px}

/* ---------- コース・料金 ---------- */
.course-hint{margin:14px 0 26px}
.course-hint a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;box-shadow:var(--sh-s);font-weight:700;font-size:14px;color:var(--ink);text-decoration:none}
.course-hint .arw{transform:rotate(90deg);width:14px}
.cc h3{font-size:inherit}
.cc-name{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:14px;padding:0;border:0;background:none;text-align:left;font-size:20px;font-weight:700;line-height:1.5;color:var(--ink)}
.cc-name i{flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);position:relative;transition:transform .4s var(--ease),background .3s}
.cc-name i::before,.cc-name i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--ink)}
.cc-name i::after{transform:rotate(90deg);transition:transform .4s var(--ease)}
.cc-name[aria-expanded="true"] i{background:var(--milk)}
.cc-name[aria-expanded="true"] i::after{transform:rotate(0)}
.cc-name:hover i{background:var(--milk)}
.cc-min small{display:block;font-family:var(--jp);font-size:12px;color:var(--cara);font-weight:700}
.cc-flow{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--cream);counter-reset:f;display:grid;gap:4px;animation:capIn .5s var(--ease)}
.cc-flow li{counter-increment:f;display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:baseline;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.6}
.cc-flow li::before{content:counter(f);font-family:var(--en);font-weight:500;font-size:12px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2)}
.cc-flow small{grid-column:2;font-weight:500;font-size:11.5px;color:var(--muted)}
.cc-tip{text-align:center}
.cc.hit::after{content:"あなたにおすすめ"}

.opts{margin-top:40px}
.opt9{display:grid;gap:0 28px;border-top:1px solid var(--line)}
.opt9 li{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line)}
.opt9 span{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.5}
.opt9 span small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.opt9 em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--cara);white-space:nowrap}
.opt9 b{font-family:var(--en);font-weight:500;font-size:16px;white-space:nowrap}
.opt9-oil{margin-top:26px}
@media (min-width:760px){.opt9{grid-template-columns:1fr 1fr}}

.kayoi li:last-child b{color:var(--cara)}
.kayoi li:nth-child(3) span{font-weight:700;color:var(--ink-2)}
.trial{margin-top:18px;display:grid;grid-template-columns:56px 1fr;column-gap:16px;align-items:center;padding:18px 20px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--cara-l)}
.trial svg{grid-row:span 4;width:52px;height:52px;fill:none;stroke:var(--cara);stroke-width:1.6;stroke-linejoin:round}
.trial-k{font-size:12.5px;font-weight:700;color:var(--cara);letter-spacing:.08em}
.trial-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;line-height:1.4}
.trial-p b{font-family:var(--en);font-weight:500;font-size:26px;color:var(--ink)}
.trial-p span{font-size:12px;font-weight:700;padding:1px 9px;border-radius:999px;background:var(--milk);color:var(--ink-2)}
.trial-p em{font-style:normal;font-size:13px;color:var(--muted)}
.trial-g{font-weight:700;font-size:15px;color:var(--ink);line-height:1.5}
.trial-g b{font-family:var(--en);font-weight:600;font-size:24px;color:var(--cara);margin-right:2px}
.trial-t{font-size:12.5px;color:var(--muted);line-height:1.7}

.wari{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
@media (min-width:1000px){.wari{grid-template-columns:repeat(5,1fr)}}

.pay{margin-top:22px;display:grid;gap:12px}
.pay-c{padding:18px 20px;border-radius:20px;background:#fff}
.pay-list{display:flex;flex-wrap:wrap;gap:6px}
.pay-list li{padding:4px 14px;border-radius:999px;background:var(--milk);font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.6}
.pay-list small{margin-left:6px;font-weight:500;font-size:11px;color:var(--muted)}
.pay-n{margin-top:10px;font-size:13px;font-weight:700;color:var(--cara)}
.pay-chk{display:flex;flex-wrap:wrap;gap:6px 18px;counter-reset:p}
.pay-chk li{counter-increment:p;display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--ink)}
.pay-chk li::before{content:"";width:18px;height:18px;border-radius:5px;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
@media (min-width:900px){.pay{grid-template-columns:1.3fr 1fr}}

/* ---------- 肌悩みから選ぶ ---------- */
.nayami{background:#fff}
.ny-in{display:grid;gap:26px;margin-top:22px;align-items:start}
.ny-words{display:flex;flex-wrap:wrap;gap:8px}
.ny-words button{min-height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--milk);font-weight:700;font-size:14px;color:var(--ink);transition:background .3s,color .3s,transform .3s var(--spring)}
.ny-words button:hover{background:var(--latte)}
.ny-words button[aria-pressed="true"]{background:var(--ink);color:#fff;transform:scale(1.04)}
.ny-clear{margin-top:12px;min-height:44px;padding:0 4px;border:0;background:none;font-size:13px;font-weight:700;color:var(--muted);text-decoration:underline}
.ny-r{padding:22px 20px;border-radius:26px;background:var(--cream);min-height:200px}
.ny-empty{display:grid;justify-items:center;align-content:center;gap:12px;min-height:180px;text-align:center;font-size:14px;color:var(--muted);line-height:1.8}
.ny-empty svg{width:72px;height:72px;fill:none;stroke:var(--sand);stroke-width:2}
.ny-r.has{box-shadow:0 0 0 2px var(--ink);background:#fff;animation:capIn .5s var(--ease)}
.ny-why{display:grid;gap:4px;margin-bottom:14px}
.ny-why li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:12.5px;line-height:1.6}
.ny-why span{color:var(--muted)}
.ny-why b{color:var(--ink)}
.ny-why b::before{content:"→ ";color:var(--cara)}
.ny-course{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:12px;padding:14px 16px;border-radius:16px;background:var(--ink);color:#fff}
.ny-course small{grid-column:1 / -1;font-size:11.5px;opacity:.75}
.ny-course b{font-size:clamp(16px,4.6vw,18px);line-height:1.5;white-space:nowrap}
.ny-course span{grid-row:3;font-size:12.5px;opacity:.8}
.ny-course em{grid-row:2 / span 2;grid-column:2;font-style:normal;font-family:var(--en);font-size:22px}
.ny-oh{margin:16px 0 8px;font-size:13px;font-weight:700;color:var(--cara);display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.ny-oh small{font-weight:500;color:var(--muted);font-size:11.5px}
.ny-opts{display:grid;gap:6px}
.ny-opts button{display:grid;grid-template-columns:20px 1fr auto auto;align-items:center;gap:10px;min-height:54px;padding:8px 14px 8px 12px;border-radius:14px;border:0;background:var(--cream);text-align:left;line-height:1.35;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s,background .3s}
.ny-opts button span{display:grid;font-weight:700;font-size:14px;color:var(--ink)}
.ny-opts button small{font-weight:500;font-size:11.5px;color:var(--muted)}
.ny-opts button em{font-style:normal;font-size:12px;font-weight:700;color:var(--cara);white-space:nowrap}
.ny-opts button b{font-family:var(--en);font-weight:500;font-size:15px;white-space:nowrap}
.ny-opts button i{width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--line-2);position:relative}
.ny-opts button[aria-pressed="true"]{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.ny-opts button[aria-pressed="true"] i{background:var(--ink);box-shadow:none}
.ny-opts button[aria-pressed="true"] i::after{content:"";position:absolute;left:6px;top:4px;width:6px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.ny-sum{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ny-sum p{display:grid;line-height:1.25}
.ny-sum p + p{text-align:right}
.ny-sum small{font-size:11.5px;color:var(--muted)}
.ny-sum b{font-family:var(--en);font-weight:500;font-size:34px;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.ny-sum b span{font-family:var(--jp);font-size:14px;margin-left:2px}
.ny-fine{margin-top:8px;font-size:12px;color:var(--muted);line-height:1.7}
.ny-go{display:grid;gap:6px;justify-items:center;margin-top:14px}
@media (min-width:960px){.ny-in{grid-template-columns:1fr 440px;gap:48px}.ny-r{position:sticky;top:calc(var(--hd) + 20px)}}
@media (max-width:520px){.ny-opts button{grid-template-columns:20px 1fr auto;}.ny-opts button em{grid-column:2;grid-row:2;margin-top:-4px}.ny-opts button b{grid-row:1 / span 2;grid-column:3}.ny-words button{padding:0 14px;font-size:13.5px}}

/* ---------- 当日の流れ（明かりは落とさない） ---------- */
.flow{background:var(--milk);color:var(--text)}
.fs-tag{display:inline-block;margin-top:8px!important;padding:2px 12px;border-radius:999px;background:var(--milk);font-size:12px!important;font-weight:700;color:var(--cara)}

.first-list b,.cc-flow li,.opt9 span,.ny-opts button span,.down-list button span{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.cc-name > span{display:inline}.cc-name .nw{display:inline-block}.cc-name{flex-wrap:nowrap}

/* ---------- 泡のしくみ（明るい地に。2026-10-17） ----------
   お店のご要望「施術の流れ 暗くなるの×」。当日の流れのすぐ後で画面が黒くなると、同じ「暗くなる」に見えるので、
   この節も明るい地にした。泡のレンズはそのまま。 */
.awa{background:var(--cream);color:var(--text)}
.awa .h2{color:var(--ink)}
.awa-steps li.on{background:#fff;box-shadow:var(--sh-s)}
.awa-steps b{color:var(--ink)}
.awa-steps span{color:var(--muted)}
.awa-scroll{color:var(--muted)}
.awa-scroll::before{background:linear-gradient(rgba(108,100,91,0),rgba(108,100,91,.7))}
.lens{box-shadow:0 0 0 1px var(--line),0 40px 80px -36px rgba(60,44,30,.45)}
.awa-meter{background:var(--line)}
.awa-meter i{background:var(--ink)}
.awa-note{color:var(--muted)}

/* ---------- 肌悩みの答えを、スマホでも見失わない（2026-10-17） ----------
   スマホでは言葉の下に答えが出るので、押しても画面の外になる。言葉を押している間は、
   下の予約の帯の上に「おすすめ」の小さな帯を出し、押すと答えまで送る。 */
.ny-peek{position:fixed;left:10px;right:10px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:69;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;padding:10px 14px 10px 16px;border:0;border-radius:18px;background:var(--ink);color:#fff;text-align:left;line-height:1.35;box-shadow:0 18px 40px -16px rgba(0,0,0,.55);transform:translateY(0);opacity:1;transition:transform .45s var(--ease),opacity .3s}
.ny-peek[hidden]{display:grid;transform:translateY(24px);opacity:0;pointer-events:none;visibility:hidden}
.ny-peek small{grid-column:1;font-size:11px;opacity:.75}
.ny-peek b{grid-column:1;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ny-peek span{grid-column:1;font-size:12.5px;opacity:.9}
.ny-peek em{grid-column:2;grid-row:1 / span 3;font-style:normal;font-size:12.5px;font-weight:700;padding:8px 12px;border-radius:999px;background:#fff;color:var(--ink);white-space:nowrap}
.ny-peek.pop{animation:peekPop .5s var(--spring)}
@keyframes peekPop{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:none}}
@media (min-width:960px){.ny-peek{display:none!important}}

/* 予約の窓に、悩みから選んだオプションを添える */
.rsv-opt{margin:0 0 10px;padding:10px 14px;border-radius:14px;background:var(--milk);font-size:12.5px;line-height:1.7;color:var(--ink)}
.rsv-opt b{color:var(--cara)}

/* おすすめのコースは、名前を1行に、時間と値段をその下の行に（狭いスマホで「¥11,20／0」と折れていた。2026-10-17） */
.ny-course b{grid-column:1 / -1;grid-row:2}
.ny-course span{grid-column:1;grid-row:3}
.ny-course em{grid-column:2;grid-row:3;white-space:nowrap}