/* =========================================================
   メニュー・料金(/price/)固有 ── 元:mock/price-v13.html
   ページ内の目次(.oc-toc)・白いカード(.oc-what / .oc-cards2)・料金の表記(.yen / .tax)・
   STEP(.oc-steps)・強調の枠(.oc-offer)・丸印のリスト(.oc-howto)・2列の枠(.oc-cover)・流れ(.oc-flow)は base.css
   ========================================================= */

/* ---------- 自費施術:3つのカード(整体/パーソナル/組み合わせ) ---------- */
.wcard .icons2{display:flex; align-items:center; gap:6px; margin-bottom:14px}
.oc-what .wcard .icons2 .f-icon{margin:0; width:40px; height:40px}
.wcard .plus{font-family:var(--mincho); color:var(--ink-soft); font-size:1rem}
/* カードの下の「このメニューを予約する →」(第13回・行き先は /reserve/)。3列でリンクの高さがそろうよう、カードの下端に置く */
.oc-what .wcard{display:flex; flex-direction:column}
.oc-what .wcard .oc-wgo{margin:auto 0 0; padding-top:4px}

/* ---------- 料金表(Arkhe の表のスタイル:枠線・セルの余白 !important・灰色の見出しを打ち消す) ---------- */
.ptable{width:100%; max-width:640px; margin-top:clamp(28px,4vw,40px); border:0; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 0 0 1px rgba(27,32,135,.14)}
.ptable th,.ptable td{--ark-padding--cell:16px 18px; border:0; border-bottom:1px solid rgba(33,33,33,.07); background:none; word-break:normal; text-align:left; vertical-align:middle}
.ptable td,.ptable tbody th,.ptable thead th:first-child{white-space:nowrap}
.ptable thead th{font-size:.84rem; font-weight:500; color:var(--blue); background:#F8F8FC; letter-spacing:.06em}
.ptable tbody th{font-family:var(--mincho); font-weight:500; font-size:1.05rem; width:22%}
.ptable td{font-family:var(--mincho); font-size:1.15rem}
.ptable thead th small{font-size:.74rem; letter-spacing:0; margin-top:2px}
.ptable tr:last-child th,.ptable tr:last-child td{border-bottom:0}
.ptable td.hl{background:#FFF8F6}
@media (max-width:720px){
  .ptable th,.ptable td{--ark-padding--cell:14px 12px}
  .ptable td{font-size:1.02rem}
  .ptable tbody th{font-size:.96rem}
}

/* ---------- 回数券(順に現れ、おすすめは最後に少し浮く) ---------- */
.tickets{margin-top:clamp(36px,5vw,52px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,24px); align-items:stretch}
.ticket{position:relative; display:flex; flex-direction:column; padding:30px clamp(18px,2.4vw,28px) 26px; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(27,32,135,.16); transition:opacity .5s var(--ease), transform .5s var(--ease), box-shadow .35s var(--ease)}
.ticket.rec{box-shadow:0 0 0 2px var(--red-soft), 0 22px 40px -28px rgba(110,24,16,.4); transform-origin:center bottom}
.ticket.rec.on{transform:translateY(-6px)}
.ticket .tag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:4px 14px; border-radius:999px; background:var(--red-soft); color:#fff; font-size:.76rem; letter-spacing:.12em; white-space:nowrap}
.ticket .n{font-size:.86rem; color:var(--blue); letter-spacing:.06em}
.ticket .price{margin:6px 0 4px; font-family:var(--mincho); font-weight:500; font-size:clamp(1.5rem,1.2rem + .9vw,1.9rem)}
.ticket .unit{font-size:.88rem; color:var(--ink)}
.ticket .unit b{font-family:var(--mincho); font-weight:500; font-size:1.1rem}
.ticket .unit small{display:block; font-size:.76rem; color:var(--ink-soft); margin-top:2px}
.ticket .off{display:inline-block; margin-top:6px; font-size:.78rem; color:var(--red-soft)}
.ticket dl{margin:18px 0 0; padding-top:14px; border-top:1px solid rgba(33,33,33,.08); display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.86rem}
.ticket dt{color:var(--ink-soft)}
.ticket dd{margin:0}
.tickets .ticket:nth-child(2){transition-delay:.12s}
.tickets .ticket:nth-child(3){transition-delay:.24s}
@media (max-width:820px){
  .tickets{grid-template-columns:1fr; gap:22px}
  .ticket.rec.on{transform:none}
}
/* ---------- 保険施術 ---------- */
/* 保険と自費の比べ表(PC・タブレット)/スマホは2枚のカード */
.compare{width:100%; margin-top:clamp(28px,4vw,40px); border:0; border-collapse:separate; border-spacing:0; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 0 0 1px rgba(27,32,135,.14)}
.compare th,.compare td{--ark-padding--cell:16px 18px; border:0; border-bottom:1px solid rgba(33,33,33,.07); background:none; word-break:normal; text-align:left; vertical-align:top; font-size:.92rem; line-height:1.8}
.compare thead th{font-family:var(--mincho); font-weight:500; font-size:1.02rem; background:#F8F8FC; color:var(--ink)} /* Arkhe は表の見出しのセルを白い文字にしている */
.compare thead th.self{background:#FFF8F6}
.compare tbody th{width:16%; font-weight:500; color:var(--blue); font-size:.86rem; white-space:nowrap}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.compare td.self{background:#FFFCFB}
.compare-sp{display:none}
@media (max-width:720px){
  .compare th,.compare td{--ark-padding--cell:12px 10px; font-size:.84rem}
  .compare tbody th{width:auto; font-size:.78rem}
  .compare{display:none}
  .compare-sp{display:grid; gap:14px; margin-top:28px}
  .cs{padding:20px 18px 18px; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(27,32,135,.14)}
  .cs.self{background:#FFFCFB; box-shadow:0 0 0 1px rgba(218,74,63,.35)}
  .oc-psec .cs h3{margin:0 0 10px; font-size:1.05rem}
  .cs dl{margin:0; display:grid; grid-template-columns:5em 1fr; gap:8px 12px; font-size:.9rem; line-height:1.75}
  .cs dt{color:var(--blue); font-size:.82rem; padding-top:.15em}
  .cs dd{margin:0}
}
/* 窓口でのお支払いの目安 */
.estimate{margin-top:clamp(28px,4vw,40px)}
.est-box{margin-top:12px; padding:24px clamp(20px,3vw,32px) 20px; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(27,32,135,.14)}
.est-title{margin:0 0 14px; font-family:var(--mincho); font-weight:500; font-size:1.06rem}
.est-dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:12px 24px; align-items:baseline; padding:14px 0; border-top:1px solid rgba(33,33,33,.08); border-bottom:1px solid rgba(33,33,33,.08)}
.est-dl dt{font-size:.88rem; color:var(--blue)}
.est-sub{display:block; font-size:.76rem; color:var(--ink-soft)}
.est-dl dd{margin:0; font-family:var(--mincho); font-size:1.12rem}
.est-dl .sep{margin:0 .5em; color:var(--ink-soft)}
.oc-what-tip{margin-top:18px} /* 第18回 A19:自費施術の3枚の上の「迷ったときは」 */
.est-dl .est-self{color:var(--red-soft)}
.oc-note.est-note{margin:14px 0 0}
@media (max-width:720px){
  .est-dl{grid-template-columns:1fr; gap:4px}
  .est-dl dd{margin-bottom:10px; font-size:1.02rem}
  .est-dl dd:last-child{margin-bottom:0}
  .est-dl .sep{display:none}
  .est-dl .est-l{display:block} /* 第18回 A22:スマホは「初回」「2回目以降」の2行(「/」なし) */
}
/* ---------- 料金ページの注記 ---------- */
.oc-note.pnote-all{margin-top:28px}

@media (prefers-reduced-motion:reduce){
  .ticket.rec.on{transform:none}
}
/* 第20回 作業B(B1-14):回数券の3枚の下の1行(本文と同じ大きさ) */
.tickets-note{margin:24px 0 0; font-size:.95rem; line-height:1.9}
/* 第20回 作業B(B-16):比べる表の右の列で最後の1文字が次の行に落ちないように */
.compare td{text-wrap:pretty}