/* Do Head Spa（デモ）— 画像LP。見た目の正解は images/ の完成画像。HTML は操作と変わりやすい情報だけ。 */
:root {
  --bg: #2B332F;          /* 共通の背景（深い緑のチャコール） */
  --ivory: #EFE8DC;
  --card: #F3EDE3;
  --ink: #2B2B28;
  --sub: #B9B3A6;
  --terra: #B4593A;
  --terra-dark: #6E3220;
  --col: 560px;           /* PC で画像を見せる列の幅 */
  --side: 6cqw;           /* 余白の基準（画像の安全余白 6%） */
  --seam: 5.86;           /* 継ぎ目の重なり 60/1024（幅に対する%） */
  --head: "Kaisei Decol", "Hiragino Mincho ProN", serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --en: "Jost", "Zen Kaku Gothic New", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--body);
  line-height: 1.8;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { word-break: auto-phrase; text-wrap: balance; line-break: strict; font-feature-settings: "palt"; }

.page { display: grid; grid-template-columns: minmax(0, 1fr); }
.side { display: none; }
.col { width: 100%; max-width: var(--col); margin: 0 auto; background: var(--bg); container-type: inline-size; }

/* 画像のセクション。2枚目以降は上端を前の画像に重ね、上から下へなじませる（images/full.png と同じ処理） */
.part { position: relative; }
.part img { width: 100%; }
/* 画像の上に重ねるもの（押せる範囲・料金）は、画像と同じ大きさの .frame を基準にする（注記の段落で位置がずれないように） */
.frame { position: relative; }
.part + .part { margin-top: calc(var(--seam) * -1cqw); }
.part + .part > img,
.part + .part > .frame > img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3.35%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 3.35%);
}

/* 画像の中のボタンに重ねる押せる場所 */
.hit {
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  border-radius: 999px;
}
.hit:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* 料金（デモ値）を表の右の列に重ねる */
.price-cell {
  position: absolute; left: 66.5%; width: 26.1%;
  top: calc(var(--y) * 1%); height: calc(var(--h) * 1%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; color: var(--ink); line-height: 1.5;
}
.price-cell span { display: block; }
.price-cell .min { font-family: var(--body); font-size: max(13px, 2.9cqw); color: #5A534B; letter-spacing: .06em; }
.price-cell .yen { font-family: var(--head); font-size: 4.8cqw; letter-spacing: .02em; line-height: 1.45; }
.price-cell.first .min { color: var(--terra); }
.price-cell.first .yen { color: #A9523A; font-size: 4.4cqw; }

.part-note {
  margin: 0; padding: 1cqw var(--side) calc(var(--seam) * 1cqw + 3cqw);
  font-size: 15px; color: var(--sub); line-height: 1.7;
}
.part-note.is-demo { font-size: 15px; color: var(--ivory); }

/* アクセス（HTML） */
.access {
  margin: 2cqw 5cqw 6cqw;
  padding: 7cqw var(--side) 4cqw;
  background: rgba(243, 237, 227, .06);
  border: 1px solid rgba(239, 232, 220, .18);
  border-radius: 4cqw;
}
.eyebrow { margin: 0 0 1.5cqw; font-family: var(--en); font-size: 13px; letter-spacing: .35em; color: #C26A45; }
.access-title { margin: 0 0 5cqw; font-family: var(--head); font-weight: 400; font-size: clamp(24px, 7.2cqw, 40px); line-height: 1.45; color: var(--ivory); }
.access-list { margin: 0 0 3cqw; }
.access-list div { display: grid; grid-template-columns: 6.5em 1fr; gap: 1em; padding: 12px 0; border-top: 1px solid rgba(239, 232, 220, .16); }
.access-list div:last-child { border-bottom: 1px solid rgba(239, 232, 220, .16); }
.access-list dt { font-size: 14px; color: var(--sub); letter-spacing: .08em; }
.access-list dd { margin: 0; font-size: 16px; }
.access .part-note { padding: 0; }

.foot { padding: 6cqw var(--side) 28cqw; font-size: 15px; color: var(--sub); line-height: 1.8; }
.foot p { margin: 0 0 .6em; }
.foot .copy { margin-top: 1.4em; font-family: var(--en); letter-spacing: .1em; }

/* ボタン（PC の右の帯・スマホの追従） */
.btn, .sticky {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 12px 22px;
  background: var(--terra); color: var(--card);
  border-radius: 999px; text-decoration: none;
  font-family: var(--body); font-weight: 500; font-size: 15px; letter-spacing: .04em;
  box-shadow: 0 3px 0 var(--terra-dark), 0 10px 24px rgba(20, 26, 23, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover, .sticky:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--terra-dark), 0 6px 16px rgba(20, 26, 23, .3); }
.btn:focus-visible, .sticky:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.sticky {
  position: fixed; left: 16px; right: 16px; bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 20;
  opacity: 0; transform: translateY(16px); pointer-events: none;
}
.sticky.is-on { opacity: 1; transform: none; pointer-events: auto; }

.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  z-index: 30; max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: 10px;
  background: rgba(20, 26, 23, .92); color: var(--ivory); font-size: 13px;
}

/* PC：真ん中にスマホ幅の列、左右に帯（PCでは追従ボタンを出さない）。帯が細すぎて文字が崩れない 1180px 以上だけ */
@media (min-width: 1180px) {
  body { background: radial-gradient(120% 90% at 50% 40%, #33403a 0%, var(--bg) 55%, #222925 100%) fixed; }
  .page { grid-template-columns: minmax(0, 1fr) var(--col) minmax(0, 1fr); }
  .col { max-width: none; box-shadow: 0 0 60px rgba(10, 14, 12, .55); }
  .side { display: block; }
  .side-inner {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 clamp(24px, 4vw, 64px);
  }
  .side-left .side-inner { align-items: flex-end; text-align: right; }
  .side-right .side-inner { align-items: flex-start; }
  .side-logo { width: min(240px, 100%); margin-bottom: 28px; }
  .side-lead { margin: 0 0 24px; font-family: var(--head); font-size: 20px; line-height: 1.7; }
  .side-facts { margin: 0 0 18px; font-size: 14px; }
  .side-facts div { display: flex; gap: 1em; justify-content: flex-end; padding: 6px 0; border-bottom: 1px solid rgba(239, 232, 220, .14); }
  .side-facts dt { color: var(--sub); }
  .side-facts dd { margin: 0; }
  .side-note { margin: 0; font-size: 14px; color: var(--sub); }
  .side-eyebrow { margin: 0 0 6px; font-family: var(--en); font-size: 13px; letter-spacing: .35em; color: #C26A45; }
  .side-big { margin: 0 0 12px; font-family: var(--head); font-size: 44px; line-height: 1.2; }
  .side-right .btn { margin: 8px 0 14px; font-size: 14px; }
  .sticky { display: none; }
}
@media (min-width: 1180px) and (max-width: 1360px) {
  .side-facts, .side-note { display: none; }
  .side-big { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===== 見本：布の札のボタンとクーポンのポップアップ（2026-11-08） ===== */
.tag-btn { position: relative; display: block; text-decoration: none; color: #8E3F26; -webkit-tap-highlight-color: transparent; }
.tag-btn img { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 0 rgba(110, 70, 48, .28)) drop-shadow(0 10px 18px rgba(20, 26, 23, .35)); transition: transform .25s ease, filter .25s ease; }
.tag-btn:hover img, .tag-btn:focus-visible img { transform: translateY(-2px); }
.tag-btn:active img { transform: translateY(1px); filter: drop-shadow(0 1px 0 rgba(110, 70, 48, .28)) drop-shadow(0 4px 8px rgba(20, 26, 23, .3)); }
.tag-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 12px; }
.tag-label { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.tag-main { font-family: var(--head); font-weight: 500; letter-spacing: .04em; line-height: 1.25; white-space: nowrap; }
.tag-sub { font-family: var(--body); color: #6E5A48; letter-spacing: .08em; line-height: 1.3; white-space: nowrap; }

/* FV：札の本体（小枝より右・下）に文字 */
.tag-fv { position: absolute; left: 17%; width: 66%; top: 87.2%; }
.tag-fv .tag-label { left: 12%; right: 4%; top: 22%; bottom: 8%; }
.tag-fv .tag-main { font-size: 4.7cqw; }

/* CTA：封蝋つきの大きな札。2行 */
.tag-cta { position: absolute; left: 18%; width: 64%; top: 85.2%; }
.tag-cta .tag-label { left: 21%; right: 10%; top: 16%; bottom: 10%; gap: .5cqw; }
.tag-cta .tag-sub { font-size: 2.7cqw; }
.tag-cta .tag-main { font-size: 4.5cqw; }

/* PC の帯 */
.tag-side { width: min(300px, 100%); margin: 8px 0 14px; }
.tag-side .tag-label { left: 12%; right: 4%; top: 22%; bottom: 8%; }
.tag-side .tag-main { font-size: 17px; }

/* スマホの追従（布の札に替える） */
.sticky.tag-btn { background: none; box-shadow: none; padding: 0; min-height: 0; left: 50%; right: auto; width: min(340px, calc(100% - 32px)); transform: translate(-50%, 16px); }
.sticky.tag-btn.is-on { transform: translate(-50%, 0); }
.sticky.tag-btn .tag-label { left: 11%; right: 4%; top: 22%; bottom: 8%; }
.sticky.tag-btn .tag-main { font-size: 15px; }

/* クーポンのポップアップ */
.coupon { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; }
.coupon[hidden] { display: none; }
.coupon-backdrop { position: absolute; inset: 0; background: rgba(18, 23, 20, .62); backdrop-filter: blur(2px); animation: cfade .35s ease both; }
.coupon-card { position: relative; width: min(360px, calc(100% - 40px)); container-type: inline-size; animation: crise .5s cubic-bezier(.2, .8, .2, 1) both; }
.coupon-card img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .4)); }
.coupon-top { position: absolute; left: 14%; right: 26%; top: 16%; height: 20%; display: flex; flex-direction: column; justify-content: center; }
.coupon-eyebrow { margin: 0; font-family: var(--en); font-size: 3.4cqw; letter-spacing: .35em; color: #A9523A; }
.coupon-kicker { margin: .35em 0 0; font-family: var(--head); font-size: 5.8cqw; white-space: nowrap; color: #2B2B28; letter-spacing: .04em; }
.coupon-body { position: absolute; left: 16%; right: 11%; top: 40%; bottom: 10.5%; display: flex; flex-direction: column; align-items: center; text-align: center; color: #2B2B28; }
.coupon-title { margin: 0; font-family: var(--head); font-weight: 400; font-size: 6cqw; line-height: 1.25; }
.coupon-title span { display: inline-block; font-size: 13.5cqw; line-height: 1.15; color: #A9523A; letter-spacing: .06em; }
.coupon-lead { margin: 1.6cqw 0 2.4cqw; font-size: 3.5cqw; line-height: 1.6; color: #3E3A34; }
.coupon-list { list-style: none; margin: 2.4cqw 0 0; padding: 0; width: 100%; font-size: 3.6cqw; }
.coupon-list li { display: flex; justify-content: space-between; gap: 1em; padding: 1.1cqw 0; border-bottom: 1px dashed rgba(169, 82, 58, .35); }
.coupon-list b { font-family: var(--head); font-weight: 500; font-size: 4.4cqw; }
.coupon-get { margin-top: auto; display: flex; align-items: center; justify-content: center; width: 88%; min-height: 44px; border-radius: 999px; background: #B4593A; color: #F3EDE3; text-decoration: none; font-family: var(--body); font-weight: 500; font-size: 15px; box-shadow: 0 3px 0 #6E3220; }
.coupon-note { margin: 1.4cqw 0 0; font-size: 11.5px; color: #6E6A63; }
.coupon-close { position: absolute; left: 50%; bottom: -58px; transform: translateX(-50%); min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(239, 232, 220, .55); background: rgba(20, 26, 23, .5); color: #EFE8DC; font: 500 14px/1 var(--body); cursor: pointer; }
.coupon-close:focus-visible, .coupon-get:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes cfade { from { opacity: 0; } }
@keyframes crise { from { opacity: 0; transform: translateY(28px) scale(.96) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .coupon-backdrop, .coupon-card { animation: none; } }

.toast { z-index: 50; }