/* =========================================
   plume 脱毛料金シミュレーター（LPとは別ページ）
   配色・文字はLP（../style.css）に合わせています。LPのCSSは読み込みません。
   ========================================= */

:root {
  --ivory: #fbf8f2;
  --ivory-dark: #f5efe4;
  --beige: #ede2d0;
  --beige-line: #dccdb5;
  --wood: #8b6a4e;
  --wood-dark: #6b4f38;
  --text: #4a3c30;
  --text-sub: #7a6a5c;
  --white: #fffdf9;

  /* 選択した部位の色（淡いくすみピンク） */
  --pink: #e6bfbf;
  --pink-strong: #d9a3a5;
  --pink-soft: #f6e4e3;

  /* 人体図（仮）の色 */
  --skin: #f8e9dc;
  --skin-line: #d6b9a2;
  --hair: #9a7b62;
  --wear: #ead1cd;

  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --gutter: 16px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

/* 下部の選択中トレイ（スマホ）の高さぶん、ページの最後に余白を空ける。PCでは右側に置くので不要 */
body.has-tray-light:not(.is-wax),
body.is-wax.has-tray-wax,
body.has-tray-mens { padding-bottom: 104px; }   /* 金額の箱に回数タグが入ったぶん少し高い */

h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

.wb { display: inline-block; }

/* ---------- ヘッダー・フッター ---------- */
.sim-header {
  background: rgba(251, 248, 242, 0.96);
  border-bottom: 1px solid var(--beige);
}

.sim-header__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sim-logo img { height: 40px; width: auto; mix-blend-mode: multiply; }

.sim-back {
  font-size: 13px;
  color: var(--text-sub);
  text-underline-offset: 3px;
}

/* ページ下部の「LPに戻る」：結果を見終えた位置からそのまま戻れるボタン */
.sim-bottom-back {
  margin-top: 32px;
  text-align: center;
}

.sim-bottom-back__btn {
  display: inline-block;
  min-width: 200px;
  padding: 12px 28px;
  border: 1px solid var(--wood);
  border-radius: 999px;
  background: var(--white);
  color: var(--wood);
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}

.sim-footer {
  margin-top: 48px;
  padding: 28px var(--gutter);
  background: var(--wood-dark);
  color: var(--beige);
  text-align: center;
  font-size: 12px;
}

/* ---------- 全体 ---------- */
.sim {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sim-intro {
  padding: 32px 0 8px;
  text-align: center;
}

.sim-en {
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--wood);
}

.sim-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.5;
  color: var(--wood-dark);
  margin: 4px 0 10px;
}

.sim-lead { font-size: 14px; color: var(--text-sub); }

.sim-block {
  margin-top: 24px;
  padding: 20px 16px;
  background: var(--white);
  border-radius: 16px;
}

.sim-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--wood-dark);
  margin-bottom: 12px;
}

.sim-step > span:last-child:not(.sim-step__num) { min-width: 0; }

.sim-step__num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--wood);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 26px;
  text-align: center;
}

.sim-hint {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-sub);
}

.sim-hint strong { color: var(--wood-dark); }

/* ---------- 回数の切り替え ---------- */
.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px;
  background: var(--ivory-dark);
  border-radius: 999px;
}

.segmented__btn {
  min-height: 44px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-sub);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}

.segmented__btn[aria-checked="true"] {
  background: var(--wood);
  color: var(--white);
}

/* 脱毛方法（光脱毛／ワックス脱毛）：2つを横並び */
.segmented--2 { grid-template-columns: repeat(2, 1fr); }
.sim-step--plain { margin-bottom: 12px; }

/* 選択中トレイは、いま選んでいる脱毛方法のものだけを出す（女性用は光脱毛・ワックスで別々に持つ） */
body.is-wax .tray[data-tray="light"],
body:not(.is-wax) .tray[data-tray="wax"] { display: none; }

/* 学生区分：4つを横並び。割引率を小さく添える */
.segmented--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  border-radius: 16px;
}

.segmented--4 .segmented__btn {
  min-height: 56px;
  padding: 4px 2px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}

.segmented__btn small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: normal;
  opacity: 0.85;
}

/* ---------- 近道（全身A／B／C・セレクト6部位） ---------- */
.sim-step--sub {
  display: block;
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 6px;
}

.preset-lead { margin-top: 0; margin-bottom: 12px; }

/* 単品だけの方への案内：説明文より少し目立たせる */
.preset-skip {
  margin: -6px 0 12px;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.6;
  color: var(--wood);
}

/* 区分選択と同じ雰囲気の、2列×2段のボタン */
.preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: var(--ivory-dark);
  border-radius: 16px;
}

.preset-btn,
.preset-option__btn {
  min-height: 60px;
  padding: 6px 4px;
  border: none;
  border-radius: 12px;
  background: var(--white);
  color: var(--wood-dark);
  font-size: 15px;
  font-weight: bold;
  line-height: 1.35;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--beige-line);
}

.preset-btn small,
.preset-option__btn small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: normal;
  color: var(--text-sub);
}

.preset-btn.is-active,
.preset-option__btn.is-active {
  background: var(--wood);
  color: var(--white);
  box-shadow: none;
}

.preset-btn.is-active small,
.preset-option__btn.is-active small { color: var(--white); opacity: 0.9; }

/* 全身B：顔全体／VIO の選択 */
.preset-option {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed var(--beige-line);
  border-radius: 12px;
}

.preset-option[hidden] { display: none; }

.preset-option__q {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: bold;
  color: var(--wood-dark);
  text-align: center;
}

.preset-option__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* 未選択：白地に枠線。選択済み：濃いブラウン（一目で違いが分かる配色） */
.preset-option__btn {
  min-height: 52px;
  border: 1.5px solid var(--beige-line);
  background: var(--white);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.preset-option__btn.is-active {
  border-color: var(--wood-dark);
  background: var(--wood-dark);
}

/* 全身Bの料金（顔・VIOを選ぶ前から表示） */
.preset-option__price {
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--text-sub);
  text-align: center;
}
.preset-option__price strong { margin-left: 6px; font-size: 17px; color: var(--wood-dark); }

/* 選択待ち：案内文を少し強調し、2つのボタンの背景と枠線を3回だけふわっと明るくする */
.preset-option.is-pending .preset-option__q { color: var(--wood); }
.preset-option.is-pending .preset-option__btn { animation: option-glow 1.6s ease-in-out 3; }

@keyframes option-glow {
  0%, 100% { background-color: var(--white); border-color: var(--beige-line); }
  50% { background-color: var(--pink-soft); border-color: var(--wood); }
}

/* 動きを減らす設定の方には、アニメーションをしない */
@media (prefers-reduced-motion: reduce) {
  .preset-option.is-pending .preset-option__btn { animation: none; }
}

.preset-status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--pink-soft);
  color: var(--wood-dark);
  font-size: 13px;
  line-height: 1.6;
}

/* セレクト6部位の補足（単品も追加できること） */
.preset-status__note { display: block; margin-top: 2px; font-size: 12px; }

/* ---------- 人体図の切り替え ---------- */
.view-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border-bottom: 2px solid var(--beige);
}

.view-tabs__btn {
  min-height: 48px;
  padding: 6px 4px;
  border: none;
  border-radius: 12px 12px 0 0;
  background: var(--ivory-dark);
  color: var(--text-sub);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.4;
  cursor: pointer;
}

.view-tabs__btn[aria-selected="true"] {
  background: var(--beige);
  color: var(--wood-dark);
}

.tab-br { display: inline; }

/* ---------- 人体図 ---------- */
/* 人体図はカードの左右いっぱいに広げ、文字をできるだけ大きく見せる */
.diagram-wrap {
  margin: 8px -16px 0;
}

.diagram {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.diagram-note {
  font-size: 11px;
  color: var(--text-sub);
  text-align: right;
  padding-right: 8px;
}

/* 仮の人体図 */
.b-skin { fill: var(--skin); stroke: var(--skin-line); stroke-width: 1.2; }
.b-limb { fill: none; stroke: var(--skin); stroke-linecap: round; stroke-linejoin: round; }
.b-limb-out { fill: none; stroke: var(--skin-line); stroke-linecap: round; stroke-linejoin: round; }
.b-hair { fill: var(--hair); }
.b-wear { fill: var(--wear); stroke: #dcbdb8; stroke-width: 1; }

.d-heading { font-family: var(--font-serif); font-size: 17px; font-weight: 600; fill: var(--wood-dark); }
.d-panel { fill: var(--white); stroke: var(--beige-line); stroke-width: 1.2; }
.d-face { fill: var(--skin); stroke: var(--skin-line); stroke-width: 1.2; }
.d-line { fill: none; stroke: var(--skin-line); stroke-width: 1.4; stroke-linecap: round; }

/* 施術範囲：初期状態は色なし。選ぶと淡いピンク */
.zone {
  fill: transparent;
  stroke: none;
  cursor: pointer;
  transition: fill 0.2s, stroke 0.2s;
}

.zone--line { fill: none; stroke: transparent; stroke-linecap: round; }

/* タップだけを受け付ける範囲（diagram.js の hits）。選択しても色は付けない */
.hit { fill: transparent; stroke: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.zone.is-selected { fill: var(--pink); fill-opacity: 0.85; }
.zone--line.is-selected { fill: none; stroke: var(--pink); stroke-opacity: 0.85; }
.zone.is-included { fill: var(--pink-soft); }

/* 部位名ボタンと線 */
.leader { stroke: var(--beige-line); stroke-width: 1; stroke-dasharray: 2 2; }
.leader-dot { fill: var(--beige-line); }
.leader.is-selected { stroke: var(--pink-strong); stroke-dasharray: none; }
.leader-dot.is-selected { fill: var(--pink-strong); }

.part-label { cursor: pointer; outline: none; }
.part-label rect { fill: var(--white); stroke: var(--beige-line); stroke-width: 1.2; transition: fill 0.2s; }
.part-label text { font-size: 14.5px; font-weight: bold; fill: var(--text); letter-spacing: 0; }
.part-label.is-selected rect { fill: var(--pink); stroke: var(--pink-strong); }
.part-label.is-selected text { fill: var(--wood-dark); }
.part-label:focus-visible rect { stroke: var(--wood); stroke-width: 2.4; }

/* 部位名の小さな補足（⑨胸の「（乳輪含む）」・⑫お腹の「（へそ含む）」） */
.label-sub { font-size: 10px; font-weight: normal; }
.name-sub { font-size: 0.78em; font-weight: normal; }

/* 同時に選べない部位：薄いグレー */
.part-label.is-blocked { cursor: not-allowed; }
.part-label.is-blocked rect { fill: #efebe6; stroke: #ddd6cd; stroke-dasharray: 3 2; }
.part-label.is-blocked text { fill: #b3a99e; }
.leader.is-blocked, .leader-dot.is-blocked { opacity: 0.35; }

/* ---------- 一覧から選ぶ ---------- */
.part-list {
  margin-top: 12px;
  border: 1px solid var(--beige);
  border-radius: 12px;
}

.part-list summary {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: bold;
  color: var(--wood-dark);
  cursor: pointer;
}

.part-list__body { padding: 0 14px 14px; }

.part-list__group {
  margin: 10px 0 6px;
  font-size: 12px;
  font-weight: bold;
  color: var(--text-sub);
}

.part-list__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px;
}

.part-btn {
  min-height: 40px;
  padding: 4px 8px;
  border: 1px solid var(--beige-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.part-btn.is-selected { background: var(--pink); border-color: var(--pink-strong); color: var(--wood-dark); }

.part-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.3; }
.part-btn__reason { font-size: 10px; font-weight: normal; }
.part-btn__reason:empty { display: none; }
.part-btn.is-blocked { background: #efebe6; border-color: #ddd6cd; border-style: dashed; color: #a59b90; cursor: not-allowed; }

/* ---------- ワックス脱毛のメニュー ---------- */
.wax-menu { margin-top: 16px; }
.wax-menu .part-list__group:first-child { margin-top: 0; }
.wax-btn__price { font-size: 12px; font-weight: normal; color: var(--text-sub); }
.wax-btn.is-selected .wax-btn__price { color: var(--wood-dark); }
.wax-menu__wide { grid-column: 1 / -1; }
.wax-menu__wide .part-btn { width: 100%; }
.wax-menu__note { margin-top: 4px; font-size: 11px; line-height: 1.6; color: var(--text-sub); text-align: center; }
.wax-menu__hint { margin: -2px 0 6px; font-size: 11px; line-height: 1.6; color: var(--text-sub); }
/* セットメニュー：部位のメニューと分けた独立の枠（メンズ版と同じ余白・見出し。色は女性用の白・ベージュ） */
/* 部位の一覧（開閉式）：枠の上の余白は .wax-menu 側で取る */
.wax-menu > .part-list { margin-top: 0; }
.wax-sets { margin-top: 12px; padding: 12px 14px 14px; border: 1px solid var(--beige); border-radius: 12px; }
.wax-sets .part-list__group { margin-top: 0; font-size: 14px; color: var(--wood-dark); }
.wax-selected { margin-top: 16px; }

/* ワックスの結果 */
.wax-result__sets { margin-top: 6px; font-size: 12px; color: var(--wood-dark); }
.wax-result__detail { margin-top: 12px; padding-top: 4px; border-top: 1px dashed var(--beige-line); text-align: left; }
.wax-result__title { margin-top: 10px; font-size: 12px; font-weight: bold; color: var(--wood); }
.wax-result__parts { margin-top: 2px; font-size: 13px; line-height: 1.7; }

/* 選べない理由の案内 */
.block-msg {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #efebe6;
  color: var(--text);
  font-size: 12px;
  line-height: 1.6;
}

.blocked-list { margin-top: 8px; }
.blocked-list li { font-size: 12px; color: var(--text-sub); line-height: 1.6; }
.blocked-list li::before { content: "※"; }

/* ---------- 選択中の部位 ---------- */
.selected {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--beige-line);
}

.selected__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.selected__title { font-size: 14px; font-weight: bold; color: var(--wood-dark); }
.selected__count { margin-left: 2px; color: var(--wood-dark); }

.text-btn {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--beige-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 12px;
  cursor: pointer;
}

.text-btn:disabled { opacity: 0.4; cursor: default; }

.selected__empty { margin-top: 8px; font-size: 13px; color: var(--text-sub); }

/* 全身コースの方がお得なときの案内：押し付けにならないよう小さな文字だけ */
.body-tip { margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--wood); }
.body-tip[hidden] { display: none; }

/* ---------- 結果 ---------- */
.result__empty {
  padding: 18px 0;
  font-size: 14px;
  color: var(--text-sub);
  text-align: center;
}

.summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.summary div {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ivory-dark);
}

.summary dt { font-size: 11px; color: var(--text-sub); }
.summary dd { font-size: 13px; font-weight: bold; color: var(--wood-dark); line-height: 1.5; }
.summary dd small { display: block; font-size: 11px; font-weight: normal; }
.summary div { padding: 6px 10px; }

.plan {
  margin-top: 12px;
  padding: 14px 14px 12px;
  border: 1px solid var(--beige);
  border-top: 3px solid var(--wood);
  border-radius: 12px;
  background: var(--white);
}

.plan--single { border-top-color: var(--wood-dark); background: var(--ivory); }
.plan--candidate { border-top-color: var(--beige-line); border-style: dashed; border-top-style: solid; }

.plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.plan__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--wood-dark);
}

.tag {
  padding: 0 8px;
  border-radius: 999px;
  background: var(--beige);
  font-size: 11px;
  color: var(--wood-dark);
  line-height: 1.8;
}

.plan__scope { margin-top: 2px; font-size: 12px; color: var(--text-sub); }

.plan__total {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wood-dark);
  white-space: nowrap;
}

.plan__total small {
  margin-left: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: normal;
  color: var(--text-sub);
}

.plan__diff { font-size: 13px; color: var(--text); line-height: 1.7; }
.plan__diff strong { color: var(--wood-dark); }
.plan__note { margin-top: 10px; font-size: 12px; color: var(--text-sub); line-height: 1.7; }
.plan__extra { margin-top: 4px; font-size: 12px; color: var(--wood-dark); line-height: 1.7; }

.plan--rec { border-top-width: 4px; border-color: var(--pink); border-top-color: var(--wood); }
.plan__badge { font-size: 11px; font-weight: bold; color: var(--wood); letter-spacing: 0.04em; margin-bottom: 2px; }

/* 自動アナウンス */
.notice { margin-bottom: 4px; }
.notice__item {
  margin-top: 8px;
  padding: 10px 12px 10px 34px;
  position: relative;
  border-radius: 10px;
  background: var(--pink-soft);
  font-size: 13px;
  line-height: 1.7;
  color: var(--wood-dark);
}
.notice__item::before {
  content: "i";
  position: absolute;
  left: 10px;
  top: 11px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--wood);
  color: var(--white);
  font-size: 11px;
  font-weight: bold;
  line-height: 17px;
  text-align: center;
}

/* 料金表示（学割ありは通常価格を取り消し線で） */
.price { margin-top: 4px; }
.price__base { font-size: 12px; color: var(--text-sub); }
.price__base s { text-decoration-thickness: 1px; }
.price__rate {
  display: inline-block;
  margin-top: 2px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--wood);
  color: var(--white);
  font-size: 11px;
  font-weight: bold;
  line-height: 1.8;
}
.price__final {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wood-dark);
  white-space: nowrap;
}
.price--big .price__final { font-size: 28px; }
.price__final small {
  margin-left: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: normal;
  color: var(--text-sub);
}
.price__discount { font-size: 13px; font-weight: bold; color: var(--wood); }

.breakdown { margin-top: 8px; }
.breakdown summary { font-size: 12px; color: var(--wood); cursor: pointer; }

.rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--beige);
  font-size: 13px;
}

.rows li:last-child { border-bottom: none; }
.rows small { display: block; font-size: 11px; color: var(--text-sub); }
.rows .num { white-space: nowrap; font-weight: bold; }

.more { margin-top: 10px; }
.more > summary { font-size: 13px; color: var(--wood); cursor: pointer; padding: 6px 0; }

.result__sub {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--wood-dark);
}

.result__hint { font-size: 12px; color: var(--text-sub); line-height: 1.7; }

/* ---------- ⑤ 料金の目安：お支払いの目安をいちばん大きく ---------- */
.pay {
  margin-top: 10px;
  padding: 16px 16px 6px;
  background: var(--white);
  border: 1px solid var(--pink);
  border-top: 4px solid var(--wood);
  border-radius: 14px;
  text-align: center;
}

.pay__badge {
  display: inline-block;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ivory-dark);
  color: var(--wood);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.06em;
  line-height: 1.9;
}

.pay__name {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--wood-dark);
}

.pay__label { margin-top: 2px; font-size: 12px; color: var(--text-sub); }
/* 1回あたり（総額の補足。小さく） */
.pay__per { margin-top: -2px; font-size: 13px; color: var(--text-sub); }
.pay__parts { white-space: nowrap; }

/* 実際に支払う金額（最も大きく） */
.pay__amount {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--wood-dark);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.pay__discount { margin-top: 4px; font-size: 12px; color: var(--text-sub); }
.pay__discount s { text-decoration-thickness: 1px; }
.pay__rate {
  display: inline-block;
  margin-right: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--wood);
  color: var(--white);
  font-size: 11px;
  font-weight: bold;
  line-height: 1.8;
}

/* お得さは小さなバッジで */
.pay__save {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--pink-soft);
  color: var(--wood-dark);
  font-size: 13px;
  line-height: 1.6;
}
.pay__save strong { margin: 0 2px; font-size: 15px; }

/* 比較金額は控えめに */
.pay__compare { margin-top: 6px; font-size: 12px; color: var(--text-sub); }
.pay__pending { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--wood); }
.pay__extra { margin-top: 6px; font-size: 12px; color: var(--wood-dark); line-height: 1.6; }

/* 内訳・比較の折りたたみ */
.pay__details {
  margin-top: 12px;
  border-top: 1px dashed var(--beige-line);
  text-align: left;
}

.fold { border-bottom: 1px dashed var(--beige); }
.fold:last-child { border-bottom: none; }
.fold > summary {
  padding: 11px 2px;
  font-size: 13px;
  font-weight: bold;
  color: var(--wood);
  cursor: pointer;
}
.fold > .rows, .fold > .compare { padding-bottom: 8px; }
.fold__note { margin-bottom: 6px; font-size: 12px; line-height: 1.7; color: var(--text); }

.rows__sum { font-weight: bold; }
.rows__sum--final { color: var(--wood-dark); }

.compare li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--beige);
  font-size: 13px;
}
.compare li:last-child { border-bottom: none; }
.compare small { display: block; font-size: 11px; font-weight: normal; color: var(--text-sub); }
.compare__price { text-align: right; font-weight: bold; white-space: nowrap; }

.sim-notes {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-sub);
}

.sim-notes p + p { margin-top: 4px; }
.sim-notes__title { font-size: 13px; font-weight: bold; color: var(--wood-dark); margin-bottom: 4px; }

/* ---------- 選択中トレイ（tray.js）：スマホは画面下、PC（幅1180px以上）は右側に固定 ----------
   ・閉じているときは、選択部位数と料金の目安だけ（これまでの下部バーと同じ高さ）
   ・開くと、選択中の部位を上に広げて表示（画面の高さの45%まで。それ以上はトレイの中でスクロール） */
.tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column-reverse;   /* 部位の一覧はバーの上に開く */
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--white);
  border-top: 1px solid var(--beige-line);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 16px rgba(74, 60, 48, 0.08);
}

.tray.is-empty:not(.has-notice) { display: none; }

.tray__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--gutter);
}

.tray__toggle {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 2px 0;
  border: none;
  background: transparent;
  text-align: left;
  line-height: 1.4;
  cursor: pointer;
}

.tray__count { font-size: 13px; color: var(--text-sub); }
.tray__count b { margin-left: 2px; font-size: 15px; color: var(--wood-dark); }
.tray__arrow { margin-left: 6px; font-size: 11px; color: var(--wood); }
.tray__summary {
  display: block;
  overflow: hidden;
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tray__price {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 6px 14px;
  border: none;
  border-radius: 14px;
  background: var(--wood);
  color: var(--white);
  line-height: 1.3;
  cursor: pointer;
}
.tray__price[hidden] { display: none; }
.tray__price-label { font-size: 11px; }
.tray__amount { font-size: 18px; }

/* 「いまの計算」のタグ（施術回数・学割）。トレイ・料金の目安・回数ボタンの下で共通
   施術回数：白地に濃い枠線の四角／学割：淡い色で塗った丸（回数と見間違えないよう形と色を分ける） */
.ctags { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; vertical-align: middle; }
.ctag {
  display: inline-block;
  padding: 2px 8px;
  border: 1.5px solid var(--wood-dark);
  border-radius: 6px;
  background: var(--white);
  color: var(--wood-dark);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.5;
  white-space: nowrap;
}
.ctag--discount {
  border-color: transparent;
  border-radius: 999px;
  background: var(--pink-soft);
  font-size: 12px;
  font-weight: normal;
}
/* 金額の箱の中：上から 施術回数のタグ → 見出し（学割は後ろに小さく）→ 金額。
   タグは読みやすさ優先で13px・太字。箱の色（女性用は茶色・メンズはチャコール）の上に白地のタグ */
.tray__price { max-width: 62%; text-align: right; }
.tray__tags { display: block; margin-bottom: 3px; }
.tray__tags[hidden] { display: none; }
.tray__tags .ctags { justify-content: flex-end; gap: 4px; }
.tray__tags .ctag { padding: 1px 7px; border-color: var(--white); font-size: 13px; line-height: 1.45; }
.tray__tags.is-updated .ctag { animation: ctag-flash 0.8s ease; }
@keyframes ctag-flash {
  30% { background: var(--pink); }
}
.tray__price-label { line-height: 1.35; }
/* 学割は見出しと同じ行に入らないときだけ、ひとまとまりで次の行へ（「学割／20%OFF」と途中で切れないように） */
.tray__discount { display: inline-block; margin-left: 0.4em; white-space: nowrap; opacity: 0.9; }
/* 金額は折り返さず、いちばん大きく */
.tray__amount { font-size: 19px; line-height: 1.25; white-space: nowrap; }
/* 回数ボタンの下の「いまの計算」 */
.count-now { margin-top: 10px; font-size: 12px; color: var(--text-sub); }
.count-now .ctags { margin-left: 4px; }
/* 料金の目安：金額の上のタグ */
.pay__tags { margin-top: 6px; }
.tray__amount::after { content: " ›"; font-weight: normal; }
.tray__sub { font-size: 10px; opacity: 0.9; }
.tray__sub:empty { display: none; }

.tray__panel {
  display: none;
  max-height: 45vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--gutter) 12px;
  border-bottom: 1px dashed var(--beige-line);
}
.tray.is-open .tray__panel { display: block; }

.tray__group { padding-top: 12px; }
.tray__group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tray__group-title { font-size: 12px; font-weight: bold; color: var(--wood-dark); }
.tray__group-title span { font-weight: normal; color: var(--text-sub); }

/* まとめて解除の「×」：部位ごとの「×」と見分けやすいよう、丸い枠つき */
.tray__group-remove {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--beige-line);
  border-radius: 50%;
  background: var(--white);
  color: var(--wood);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.tray__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tray__chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--pink-soft);
  border: 1px solid var(--pink);
  color: var(--wood-dark);
}
.tray__name {
  min-height: 36px;
  padding: 4px 0 4px 12px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.tray__name small { margin-left: 2px; font-size: 10px; font-weight: normal; color: var(--text-sub); }
.tray__remove {
  width: 34px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--wood);
  font-size: 16px;
  cursor: pointer;
}
.tray__more {
  min-height: 36px;
  padding: 0 12px;
  border: 1px dashed var(--beige-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 12px;
  color: var(--wood);
  cursor: pointer;
}

.tray__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.tray__detail { font-size: 12px; line-height: 1.5; color: var(--text-sub); }
.tray__clear { flex: none; white-space: nowrap; }   /* 説明文が長くても「すべて解除」が縦に潰れないように */
.tray__clear[hidden] { display: none; }

/* まとめて解除・すべて解除のあとに出す「元に戻す」 */
.tray__notice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 6px 6px 12px;
  border-radius: 10px;
  background: var(--ivory-dark);
  font-size: 12px;
  line-height: 1.5;
}
.tray__notice[hidden] { display: none; }
.tray__undo {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--wood);
  border-radius: 999px;
  background: var(--white);
  color: var(--wood-dark);
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}
.tray__empty { padding: 8px 0; font-size: 12px; line-height: 1.6; color: var(--text-sub); }

/* トレイの部位名から移動したとき：移動先（人体図の部位名・一覧のボタン）を短時間ハイライト */
.is-flash { animation: tray-flash 0.6s ease-in-out 3; }
.part-label.is-flash { animation: none; }
.part-label.is-flash rect { animation: tray-flash-svg 0.6s ease-in-out 3; }
@keyframes tray-flash {
  50% { box-shadow: 0 0 0 4px var(--pink-strong); }
}
@keyframes tray-flash-svg {
  50% { stroke: var(--wood); stroke-width: 4; }
}

@media (min-width: 1180px) {
  body.has-tray-light:not(.is-wax),
  body.is-wax.has-tray-wax,
  body.has-tray-mens { padding-bottom: 0; }

  /* PC：本文（幅720px）の右の余白に、スクロールしても付いてくる小窓。常に開いた状態 */
  .tray,
  .tray.is-empty:not(.has-notice) {
    left: calc(50% + 376px);
    right: auto;
    top: 96px;
    bottom: auto;
    width: min(240px, calc(50% - 392px));
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    border: 1px solid var(--beige-line);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(74, 60, 48, 0.08);
  }
  .tray__bar { display: contents; }
  .tray__toggle { order: 1; min-height: 0; padding: 12px 14px 0; cursor: default; pointer-events: none; }
  .tray__arrow,
  .tray__summary { display: none; }
  .tray__panel,
  .tray.is-open .tray__panel {
    order: 2;
    display: block;
    flex: 1 1 auto;
    max-height: none;
    padding: 0 14px 4px;
    border-bottom: none;
  }
  .tray__price {
    order: 3;
    max-width: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0 6px;
    margin: 8px 14px 14px;
    padding: 8px 12px;
  }
  .tray__sub { flex-basis: 100%; text-align: center; }
  /* PCの小窓：タグと見出しは1行ずつ中央、その下に金額 */
  .tray__tags,
  .tray__price-label { flex-basis: 100%; text-align: center; }
  .tray__tags .ctags { justify-content: center; }
}

/* ---------- 小さいスマホ（幅374px以下） ---------- */
@media (max-width: 374px) {
  :root { --gutter: 10px; }
  .sim-block { padding: 18px 12px; }
  .diagram-wrap { margin: 8px -12px 0; }
  .segmented__btn { font-size: 13px; }
}

/* ---------- 広い画面 ---------- */
@media (min-width: 600px) {
  .tab-br { display: none; }
  .sim-block { padding: 24px; }
}