/*
 * WPM-001 デモサイト共通スタイル
 * - 色・文字・余白はすべてトークン（CSS カスタムプロパティ）で持つ。
 * - design-os のデザインシステム（PR #7 の 3 案）が承認されたら、
 *   :root と [data-theme] のトークンの値だけを差し替える。部品側は触らない。
 * - 外部フォント・外部画像・JavaScript は使わない（速さと 0 円のため）。
 */

/* ---------- 1. トークン：共通 ---------- */
:root {
  color-scheme: light;

  /* 文字 */
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --font-display: var(--font-body);
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.1875rem;
  --fs-xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.3rem + 2.2vw, 2.625rem);
  --lh-body: 1.85;
  --lh-tight: 1.35;
  --ls-body: 0.03em;

  /* 余白（4 の倍数） */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --gutter: 1rem;
  --content: 68rem;
  --measure: 40rem;

  /* 形 */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 6px 20px rgb(0 0 0 / 0.06);

  /* 色（既定。各テーマが上書きする） */
  --c-bg: #ffffff;
  --c-surface: #f5f5f4;
  --c-ink: #1f1f1f;
  --c-ink-muted: #555555;
  --c-line: #dddddd;
  --c-accent: #2f5bd3;
  --c-accent-ink: #ffffff;
  --c-accent-soft: #e8eefc;
  --c-focus: #1a73e8;
  --c-ribbon-bg: #222222;
  --c-ribbon-ink: #ffffff;
}

@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
}

/* ---------- 2. トークン：テーマ（デモごと） ---------- */
/* 美容サロン：生成りと、くすんだローズ */
[data-theme="salon"] {
  --font-display: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --c-bg: #fbf8f5;
  --c-surface: #f2ebe5;
  --c-ink: #2d2623;
  --c-ink-muted: #5e534d;
  --c-line: #e2d7ce;
  --c-accent: #9a4b5f;
  --c-accent-ink: #ffffff;
  --c-accent-soft: #f4e4e7;
  --c-art-1: #e9cfd4;
  --c-art-2: #d9b8a3;
  --c-art-3: #9a4b5f;
}

/* カフェ：クリームと、深い茶・緑 */
[data-theme="cafe"] {
  --font-display: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --c-bg: #fdfaf3;
  --c-surface: #f3ecdc;
  --c-ink: #2a221b;
  --c-ink-muted: #5c5045;
  --c-line: #e3d8c3;
  --c-accent: #6a4527;
  --c-accent-ink: #ffffff;
  --c-accent-soft: #efe3d2;
  --c-art-1: #d9c3a0;
  --c-art-2: #8fa37e;
  --c-art-3: #6a4527;
}

/* 訪問看護：白と、落ち着いた青緑。文字を一段大きく */
[data-theme="care"] {
  --fs-md: 1.0625rem;
  --fs-sm: 1rem;
  --lh-body: 1.9;
  --c-bg: #ffffff;
  --c-surface: #eef5f5;
  --c-ink: #1c2b2d;
  --c-ink-muted: #46585a;
  --c-line: #d3e2e3;
  --c-accent: #1b6670;
  --c-accent-ink: #ffffff;
  --c-accent-soft: #dcefef;
  --c-art-1: #bfe0de;
  --c-art-2: #f3d9a4;
  --c-art-3: #1b6670;
}

/* 発信者：白地に、はっきりした藍と朱 */
[data-theme="creator"] {
  --radius-md: 16px;
  --c-bg: #ffffff;
  --c-surface: #f3f4fb;
  --c-ink: #161827;
  --c-ink-muted: #4a4d63;
  --c-line: #dcdeee;
  --c-accent: #3d3fc4;
  --c-accent-ink: #ffffff;
  --c-accent-soft: #e6e7fb;
  --c-art-1: #c7c9f7;
  --c-art-2: #ffb08a;
  --c-art-3: #3d3fc4;
}

/* 一覧と試作（中立） */
[data-theme="neutral"] {
  --c-bg: #fafafa;
  --c-surface: #f0f0ee;
  --c-accent: #2a5d84;
  --c-accent-soft: #e2edf5;
  --c-art-1: #cfe0ec;
  --c-art-2: #e9dfc9;
  --c-art-3: #2a5d84;
}

/* ペットサロン：生成りと、やわらかい緑（試作の型で使う） */
[data-theme="pet"] {
  --c-bg: #fcfbf7;
  --c-surface: #eef3ea;
  --c-ink: #22291f;
  --c-ink-muted: #4f5a4a;
  --c-line: #dbe4d3;
  --c-accent: #3f6b3a;
  --c-accent-ink: #ffffff;
  --c-accent-soft: #e2eedc;
  --c-art-1: #cfe3c4;
  --c-art-2: #f2d3a8;
  --c-art-3: #3f6b3a;
}

/* 整体・パーソナルジム：白と、締まった濃紺（試作の型で使う） */
[data-theme="body"] {
  --c-bg: #ffffff;
  --c-surface: #f1f4f7;
  --c-ink: #141a22;
  --c-ink-muted: #46505c;
  --c-line: #d8dee6;
  --c-accent: #1e3a5f;
  --c-accent-ink: #ffffff;
  --c-accent-soft: #e1e9f2;
  --c-art-1: #c9d6e5;
  --c-art-2: #f0c27a;
  --c-art-3: #1e3a5f;
}

/* ---------- 3. 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  overflow-wrap: anywhere;
  line-break: strict;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { word-break: auto-phrase; text-wrap: balance; font-family: var(--font-display); line-height: var(--lh-tight); margin: 0 0 var(--sp-4); font-weight: 700; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-4); }
a { color: var(--c-accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }
ul, ol { padding-left: 1.25em; margin: 0 0 var(--sp-4); }
small { font-size: var(--fs-xs); }

.skip { position: absolute; left: var(--sp-2); top: -100px; background: var(--c-ink); color: var(--c-bg); padding: var(--sp-2) var(--sp-4); z-index: 100; border-radius: var(--radius-sm); }
.skip:focus { top: var(--sp-2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.measure { max-width: var(--measure); }
.section { padding-block: var(--sp-7); }
.section--tint { background: var(--c-surface); }
.section__lead { color: var(--c-ink-muted); max-width: var(--measure); }
.eyebrow { display: block; font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--sp-2); font-weight: 700; }
.muted { color: var(--c-ink-muted); }
.center { text-align: center; }

/* ---------- 4. 見本であることの表示 ---------- */
.ribbon { background: var(--c-ribbon-bg); color: var(--c-ribbon-ink); font-size: var(--fs-xs); line-height: 1.6; padding: var(--sp-2) var(--gutter); text-align: center; }
.ribbon a { color: inherit; }

/* ---------- 5. ヘッダーとナビ ---------- */
.site-header { border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 3.75rem; flex-wrap: wrap; padding-block: var(--sp-2); }
.brand { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--c-ink); text-decoration: none; letter-spacing: 0.06em; display: flex; align-items: center; gap: var(--sp-2); }
.brand small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.6875rem; color: var(--c-ink-muted); letter-spacing: 0.12em; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-1) var(--sp-4); flex-wrap: wrap; }
.nav a { display: inline-flex; align-items: center; padding: 0 var(--sp-1); color: var(--c-ink); text-decoration: none; font-size: var(--fs-sm); min-height: 48px; }
.nav a[aria-current="page"] { color: var(--c-accent); box-shadow: inset 0 -2px 0 var(--c-accent); }

/* ---------- 6. ボタン ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; padding: var(--sp-3) var(--sp-5); border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); text-decoration: none; border: 2px solid var(--c-accent); background: var(--c-accent); color: var(--c-accent-ink); letter-spacing: 0.06em; }
.btn:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--c-accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* ---------- 7. ヒーロー ---------- */
.hero { padding-block: var(--sp-6) var(--sp-7); }
.hero__grid { display: grid; gap: var(--sp-6); align-items: center; }
.hero__title { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.hero__lead { font-size: var(--fs-lg); color: var(--c-ink-muted); max-width: 32rem; }
.hero__art { border-radius: var(--radius-lg); overflow: hidden; background: var(--c-surface); }
.hero__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.hero__badges li { background: var(--c-accent-soft); color: var(--c-ink); font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-3); border-radius: 999px; }
@media (min-width: 52rem) {
  .hero__grid { grid-template-columns: 1.05fr 1fr; }
}

/* ---------- 8. カード・グリッド ---------- */
.grid { display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 40rem) and (max-width: 59.99rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: var(--sp-5); }
.section--tint .card { border-color: var(--c-line); }
.card h3 { margin-bottom: var(--sp-2); }
.card p:last-child { margin-bottom: 0; }
.card__icon { width: 44px; height: 44px; margin-bottom: var(--sp-3); }
.card__art { margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-4); border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; }
.price-tag { font-weight: 700; color: var(--c-accent); }

/* ---------- 9. 料金表・メニュー ---------- */
.menu-list { list-style: none; padding: 0; margin: 0 0 var(--sp-5); border-top: 1px solid var(--c-line); }
.menu-list li { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); }
.menu-list .name { font-weight: 700; }
.menu-list .price { font-weight: 700; white-space: nowrap; }
.menu-list .desc { grid-column: 1 / -1; color: var(--c-ink-muted); font-size: var(--fs-sm); }
.tag { display: inline-block; font-size: 0.6875rem; padding: 0 var(--sp-2); border-radius: 999px; background: var(--c-accent); color: var(--c-accent-ink); margin-left: var(--sp-2); vertical-align: 0.15em; letter-spacing: 0.06em; }

.table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-5); font-size: var(--fs-sm); }
.table th, .table td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--c-line); vertical-align: top; }
.table thead th { background: var(--c-surface); font-weight: 700; }
.table tbody th { font-weight: 700; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.table--price td:last-child, .table--price th:last-child { white-space: nowrap; }
.table--price tbody th { white-space: normal; }

/* ---------- 10. 流れ（ステップ） ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: var(--sp-4); }
.steps li { counter-increment: step; position: relative; padding: var(--sp-4) var(--sp-4) var(--sp-4) 3.75rem; background: var(--c-bg); border-radius: var(--radius-md); border: 1px solid var(--c-line); }
.steps li::before { content: counter(step); position: absolute; left: var(--sp-4); top: var(--sp-4); width: 2rem; height: 2rem; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); }
.steps strong { display: block; }
@media (min-width: 60rem) { .steps--row { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 11. FAQ ---------- */
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary { cursor: pointer; padding: var(--sp-4) 2rem var(--sp-4) 0; font-weight: 700; list-style: none; position: relative; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: var(--sp-2); top: var(--sp-4); font-size: 1.25rem; line-height: 1.4; color: var(--c-accent); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-bottom: var(--sp-4); color: var(--c-ink-muted); }

/* ---------- 12. 情報（営業時間・アクセス） ---------- */
.info { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-5); }
.info dt { font-weight: 700; }
.info dd { margin: 0; }
.map { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-surface); }

/* ---------- 13. 告知・CTA 帯 ---------- */
.notice { border-left: 4px solid var(--c-accent); background: var(--c-accent-soft); padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: var(--sp-5); }
.notice p:last-child { margin-bottom: 0; }
.cta-band { background: var(--c-accent); color: var(--c-accent-ink); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5); text-align: center; }
.cta-band h2 { color: inherit; }
.cta-band p { opacity: 0.92; }
.cta-band .btn { background: var(--c-accent-ink); color: var(--c-accent); border-color: var(--c-accent-ink); }
.cta-band .btn--ghost { background: transparent; color: var(--c-accent-ink); }

/* ---------- 14. スマホ下部の固定ボタン ---------- */
.sticky-cta { position: sticky; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--c-line); border-top: 1px solid var(--c-line); }
.sticky-cta a { display: flex; align-items: center; justify-content: center; min-height: 52px; font-weight: 700; font-size: var(--fs-sm); text-decoration: none; background: var(--c-bg); color: var(--c-accent); }
.sticky-cta a:last-child { background: var(--c-accent); color: var(--c-accent-ink); }
@media (min-width: 52rem) { .sticky-cta { display: none; } }

/* ---------- 15. フッター ---------- */
.site-footer { background: var(--c-surface); padding-block: var(--sp-6) var(--sp-7); font-size: var(--fs-sm); color: var(--c-ink-muted); margin-top: var(--sp-7); }
.site-footer .brand { margin-bottom: var(--sp-3); }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.site-footer a { color: var(--c-ink); }
.demo-note { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); font-size: var(--fs-xs); }

/* ---------- 16. 発信者向けの部品 ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); list-style: none; padding: 0; margin: 0; }
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats li { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: var(--sp-4); }
.stats .num { display: block; font-size: var(--fs-xl); font-weight: 700; color: var(--c-accent); line-height: 1.2; font-variant-numeric: tabular-nums; }
.stats .label { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.chips li { border: 1px solid var(--c-line); border-radius: 999px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); background: var(--c-bg); }
.chips a { display: inline-flex; align-items: center; min-height: 48px; padding-inline: var(--sp-2); }
.chips li:has(a) { padding: 0 var(--sp-2); }
.bar { height: 10px; background: var(--c-accent-soft); border-radius: 999px; overflow: hidden; margin-top: var(--sp-1); }
.bar span { display: block; height: 100%; background: var(--c-accent); border-radius: inherit; }
.bars { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.bars li { font-size: var(--fs-sm); }

/* ---------- 17. 一覧ページ・比較 ---------- */
.demo-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.demo-card:hover h3 { color: var(--c-accent); }
.demo-card .card__art { aspect-ratio: 16 / 9; }
.demo-card .card__art svg { width: 100%; height: 100%; }
.compare { display: grid; gap: var(--sp-4); }
@media (min-width: 48rem) { .compare { grid-template-columns: 1fr 1fr; } }
.placeholder { background: #fff3c4; color: #5a4300; padding: 0 0.2em; border-radius: 3px; }

/* ---------- 18. 印刷（メディアキットを PDF にするとき） ---------- */
@media print {
  .ribbon, .sticky-cta, .nav, .skip { display: none !important; }
  body { font-size: 10.5pt; }
  .section { padding-block: 1rem; }
  .card, .stats li { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- 19. ギャラリー（スタイル写真・Instagram の投稿） ---------- */
.gallery { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 48rem) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery li { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.gallery span { position: absolute; left: var(--sp-2); bottom: var(--sp-2); background: rgb(255 255 255 / 0.9); color: var(--c-ink); font-size: var(--fs-xs); padding: 0 var(--sp-2); border-radius: 999px; }

/* ---------- 20. 動く部品（料金と所要時間の目安。assets/estimator.js） ---------- */
.estimator { border: 2px solid var(--c-accent); border-radius: var(--radius-md); padding: var(--sp-5); background: var(--c-bg); max-width: var(--measure); }
.estimator fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-4); }
.estimator legend { font-weight: 700; font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.estimator__check { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; border-bottom: 1px solid var(--c-line); }
.estimator__check input { width: 22px; height: 22px; accent-color: var(--c-accent); flex: none; }
.estimator__check label { flex: 1; padding-block: var(--sp-2); cursor: pointer; }
.estimator__field { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.estimator__field label { font-weight: 700; font-size: var(--fs-sm); }
.estimator select { min-height: 48px; font: inherit; padding: 0 var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-ink); }
.estimator__result { font-size: var(--fs-lg); font-weight: 700; color: var(--c-accent); margin: 0 0 var(--sp-2); }
.estimator__note { font-size: var(--fs-xs); color: var(--c-ink-muted); margin: 0; }