/* style.css — aurora 全站样式（Aster Nail Momoka LP v3 設計稿）。
   :root の CSS 変数は layout/theme.liquid が settings から逐 token 出力（本文件は var() 消费のみ）。
   布局・装飾は全部 class（.au-*）。body 内 inline は信頼域の値（★塗り率 % = data-driven）と外壳 backdrop のみ。
   モバイル専用（設計基準 390×844）：@media は prefers-reduced-motion のみ・視口幅の断点なし。全字号/間距 clamp()
   （390 基準・360–480 で線形）。480px を超える幅では .au-page が中央に立ち、両脇に body の --backdrop が覗く。
   aurora 渐变（--aurora）= ブランド签名点缀（eyebrow 短横 / review 引用左バー / LINE 以外の予約 CTA）。
   LINE 緑 #06C755 は convert.kind == 'line' の CTA だけの锁色（token 化しない・convert-bar.css も同じ）。
   写真スクリム / hero 文字色 #fff は固定装飾。 */

/* 字体スタック（:root に置く——.au-page 外の watermark も同一フォントに）。
   layout の <style>:root は --font-* のみ出力、こちらは --stack-* のみ定義 → 属性が重ならず衝突しない。 */
:root {
  --stack-display: var(--font-display, 'Jost'), 'Avenir Next', 'Helvetica Neue', sans-serif;
  --stack-serif: var(--font-serif, 'Shippori Mincho'), 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --stack-body: var(--font-body, 'Zen Kaku Gothic New'), 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}

/* ============= 页壳（480px 居中縦長 LP 列）============= */
.au-page {
  max-width: var(--maxw, 480px);
  margin: 0 auto;
  background: var(--page);
  color: var(--ink);
  font-family: var(--stack-body);
  font-weight: var(--font-body-weight, 400);
  line-height: 1.6;
  box-shadow: 0 0 46px rgba(24, 20, 44, 0.12);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
:where(.au-page) img { display: block; max-width: 100%; }
:where(.au-page) a { color: var(--ink); text-decoration: none; }
:where(.au-page) a:hover { color: var(--ink-3); }
:where(.au-page) :where(p, dl, dd, dt, figure, blockquote, ol, h1, h2) { margin: 0; }

/* セクション基底：上に段距（padding-top）、左右 gutter、下は 0（次段の padding-top が間隔を作る）。 */
.au-section { padding: var(--space) var(--gutter) 0; }

/* ============= 節見出し eyebrow（aurora 短横 + Latin 常量。7 段で複用）============= */
.au-eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(9.2px, 2.56vw, 12.3px);
  font-family: var(--stack-display);
  font-weight: 400;
  font-size: clamp(9.2px, 2.56vw, 12.3px);
  letter-spacing: 0.28em;
  color: var(--ink-3);
}
.au-eyebrow-line { flex: none; width: 22px; height: 2px; background: var(--aurora); }

/* ============= 01 HERO ============= */
.au-hero { position: relative; }
.au-hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 832 / 1156;
  object-fit: cover;
  object-position: center top;
}
.au-hero-img--ph { background: var(--ink); }
.au-hero-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.au-hero-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(138.5px, 38.46vw, 184.6px);
  background: linear-gradient(180deg, rgba(22, 16, 36, 0) 0%, rgba(22, 16, 36, 0.42) 100%);
}
.au-hero-tagline {
  position: absolute;
  top: clamp(24px, 6.67vw, 32px);
  right: var(--gutter);
  writing-mode: vertical-rl;
  font-family: var(--stack-serif);
  font-weight: 500;
  font-size: clamp(12.9px, 3.59vw, 17.2px);
  letter-spacing: 0.34em;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 1px 16px rgba(40, 28, 64, 0.55);
}
.au-hero-brand {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(14.8px, 4.1vw, 19.7px);
  color: #ffffff;
  line-height: 1;
}
.au-hero-name {
  font-family: var(--stack-display);
  font-weight: var(--font-display-weight, 300);
  font-size: clamp(46.2px, 12.82vw, 61.5px);
  letter-spacing: 0.015em;
  text-shadow: 0 2px 20px rgba(20, 14, 40, 0.35);
}
.au-hero-sub {
  margin-top: clamp(7.4px, 2.05vw, 9.8px);
  font-size: clamp(9.7px, 2.69vw, 12.9px);
  letter-spacing: 0.16em;
  opacity: 0.92;
  line-height: 1.4;
}
.au-hero-logo { display: block; height: clamp(28px, 7.7vw, 36px); width: auto; margin-bottom: clamp(8px, 2.2vw, 11px); filter: drop-shadow(0 2px 12px rgba(20, 14, 40, 0.35)); }
/* ひとこと紹介（typed intro.bio）。ブランド塊は shrink-to-fit なので、長文でも右端まで走らせない様に
   幅を viewport 基準の clamp で締める（% は shrink-to-fit 親に対して解決が循環するので使わない）。
   scrim の上に乗る白字＝ sub と同じ扱い、行間だけ本文寄りに開ける。
   店舗ごとに長さが違う 1 行なので text-wrap: balance —— 2 行に落ちた時に末尾 1 文字だけが
   ぶら下がる（実測で踏んだ）のを防ぎ、2 行を均等に割る。 */
.au-hero-bio {
  margin-top: clamp(5.5px, 1.54vw, 7.4px);
  max-width: clamp(240px, 66vw, 320px);
  font-size: clamp(9.7px, 2.69vw, 12.9px);
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 12px rgba(20, 14, 40, 0.45);
  text-wrap: balance;
}

/* ============= 特徴 strip ============= */
.au-feature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: clamp(11.1px, 3.08vw, 14.8px) var(--gutter);
  border-bottom: 1px solid var(--hairline);
  font-size: clamp(10.2px, 2.82vw, 13.5px);
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.au-feature-dot { margin: 0 clamp(5.5px, 1.54vw, 7.4px); color: var(--dot); }

/* ============= 02 CONCEPT ============= */
.au-concept-title {
  margin: clamp(14.8px, 4.1vw, 19.7px) 0 clamp(12.9px, 3.59vw, 17.2px);
  font-family: var(--stack-serif);
  font-weight: var(--font-serif-weight, 600);
  font-size: clamp(17.5px, 4.87vw, 23.4px);
  letter-spacing: 0.06em;
  line-height: 1.75;
  text-wrap: balance;
}
.au-concept-body {
  margin: 0;
  font-size: clamp(12px, 3.33vw, 16px);
  line-height: 2.1;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.au-concept-body + .au-concept-body { margin-top: clamp(9.2px, 2.56vw, 12.3px); }
.au-mark {
  background-image: var(--aurora);
  background-size: 100% 7px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.au-stats { margin-top: clamp(24px, 6.67vw, 32px); border-top: 1px solid var(--hairline); }
.au-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: clamp(12px, 3.33vw, 16px) 2px;
  border-bottom: 1px solid var(--hairline);
}
.au-stat-label {
  font-size: clamp(10.6px, 2.95vw, 14.2px);
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.au-stat-value {
  font-family: var(--stack-display);
  font-weight: 400;
  font-size: clamp(23.1px, 6.41vw, 30.8px);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.au-stat-unit {
  font-family: var(--stack-body);
  font-size: clamp(10.2px, 2.82vw, 13.5px);
  font-weight: 500;
  color: var(--ink-3);
  margin-left: 3px;
}
.au-nailist {
  display: flex;
  align-items: center;
  gap: clamp(12.9px, 3.59vw, 17.2px);
  margin-top: clamp(24px, 6.67vw, 32px);
  padding: clamp(12px, 3.33vw, 16px) clamp(12.9px, 3.59vw, 17.2px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.au-nailist-avatar {
  flex: none;
  width: clamp(49.8px, 13.85vw, 66.5px);
  height: clamp(49.8px, 13.85vw, 66.5px);
  object-fit: cover;
  border-radius: var(--radius);
}
.au-nailist-avatar--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hairline);
  font-family: var(--stack-display);
  font-size: clamp(18px, 5vw, 24px);
  color: var(--ink-3);
}
.au-nailist-name {
  font-family: var(--stack-display);
  font-size: clamp(14.8px, 4.1vw, 19.7px);
  letter-spacing: 0.04em;
}
.au-nailist-title {
  margin-top: 4px;
  font-size: clamp(9.7px, 2.69vw, 12.9px);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* ============= 03 WORKS（横スクロール・段は左右 gutter を持たず lead は全幅）============= */
.au-works { padding-left: 0; padding-right: 0; }
.au-works .au-eyebrow { margin: 0 var(--gutter); }
.au-works-lead { width: 100%; height: auto; margin-top: clamp(16.6px, 4.62vw, 22.2px); cursor: zoom-in; }
.au-works-strip {
  display: flex;
  gap: clamp(7.4px, 2.05vw, 9.8px);
  margin-top: clamp(7.4px, 2.05vw, 9.8px);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.au-works-strip::-webkit-scrollbar { display: none; }
.au-works-shot {
  flex: 0 0 62%;
  width: 62%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  scroll-snap-align: start;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
}
.au-works-caption {
  margin: clamp(11.1px, 3.08vw, 14.8px) var(--gutter) 0;
  font-size: clamp(9.7px, 2.69vw, 12.9px);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
/* 画廊灯箱（点击放大）：overlay は .au-page 外・body 直下に app.js が生成。full 画像を全画面表示、click/Esc で閉じる。 */
.au-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18.5px, 5.13vw, 24.6px);
  background: rgba(20, 14, 40, 0.88);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  cursor: zoom-out;
}
.au-lightbox--shown { opacity: 1; visibility: visible; }
.au-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius-sm); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45); }
.au-lightbox-nav {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 1.75rem;
  line-height: 1;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.au-lightbox-nav:hover { background: rgba(255, 255, 255, 0.4); }
.au-lightbox-close { top: 0.9rem; right: 1rem; }
.au-lightbox-prev { top: 50%; left: 0.75rem; transform: translateY(-50%); }
.au-lightbox-next { top: 50%; right: 0.75rem; transform: translateY(-50%); }
.au-lightbox--single .au-lightbox-prev,
.au-lightbox--single .au-lightbox-next { display: none; }

/* ============= 04 PRICE ============= */
/* 価格分組（service.groups[]）= 組ごとに 見出し → リード → 账式リスト → 注記。組が 1 つだけの店は
   .au-price-group が 1 個出るだけ（見出し/リード/注記は空なら描かれない）＝ 従来と同じ見た目。
   組間の余白は隣接セレクタで持つ。子の margin-top（見出し 14.8 / リスト 16.6）は親に collapse するので
   二重に空かない（.au-price-group は padding/border を持たない）。 */
.au-price-group + .au-price-group { margin-top: clamp(29.6px, 8.21vw, 39.4px); }
/* 組見出しは行頭に aurora 短横（eyebrow / RESULTS の組見出しと同じ签名）。
   後端は組見出しの改行を字面のまま保持する（br 化しない）ので pre-line で 2 行目を出す。 */
.au-price-group-heading {
  display: flex;
  align-items: center;
  gap: clamp(7.4px, 2.05vw, 9.8px);
  margin: clamp(14.8px, 4.1vw, 19.7px) 0 0;
  font-family: var(--stack-serif);
  font-weight: var(--font-serif-weight, 600);
  font-size: clamp(13.4px, 3.72vw, 17.8px);
  letter-spacing: 0.06em;
  line-height: 1.7;
  white-space: pre-line;
}
.au-price-group-heading::before { content: ""; flex: none; width: 16px; height: 2px; background: var(--aurora); }
.au-price-lead {
  margin-top: clamp(14.8px, 4.1vw, 19.7px);
  font-size: clamp(12px, 3.33vw, 16px);
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  white-space: pre-line;
}
.au-price-list { margin-top: clamp(16.6px, 4.62vw, 22.2px); border-top: 1px solid var(--hairline); }
.au-price-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: clamp(11.1px, 3.08vw, 14.8px);
  padding: clamp(12px, 3.33vw, 16px) 2px;
  border-bottom: 1px solid var(--hairline);
}
.au-price-name {
  font-size: clamp(11.5px, 3.21vw, 15.4px);
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--ink-2);
}
.au-price-amount {
  font-family: var(--stack-display);
  font-weight: 400;
  font-size: clamp(15.7px, 4.36vw, 20.9px);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.au-price-original {
  margin-right: clamp(5.5px, 1.54vw, 7.4px);
  font-family: var(--stack-body);
  font-weight: 400;
  font-size: clamp(11.5px, 3.21vw, 15.4px);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  text-decoration: line-through;
}
/* 条目画像（service.menu[].image・任意）。画像が有る行だけ .au-price-row--media を付け、dt を
   「サムネ + ラベル」の flex にして行を中央揃えへ。画像無し行の見た目は据え置き（既存の baseline 揃え）。
   説明文は行頭がサムネ分ずれるので同じ量だけ字下げしてラベルと縦を揃える。 */
.au-price-row--media {
  --thumb: clamp(48px, 13.33vw, 64px);
  --thumb-gap: clamp(11.1px, 3.08vw, 14.8px);
  align-items: center;
}
.au-price-row--media .au-price-name { display: flex; align-items: center; gap: var(--thumb-gap); }
.au-price-row--media .au-price-label { min-width: 0; }
.au-price-row--media .au-price-desc { box-sizing: border-box; padding-left: calc(var(--thumb) + var(--thumb-gap)); }
.au-price-thumb {
  flex: none;
  width: var(--thumb);
  height: var(--thumb);
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--hairline);
}
.au-price-desc {
  flex-basis: 100%;
  font-size: clamp(9.7px, 2.69vw, 12.9px);
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  white-space: pre-line;
}
.au-price-detail {
  margin-top: clamp(8.3px, 2.31vw, 11.1px);
  padding: 0 2px;
  font-size: clamp(11px, 3.05vw, 14.6px);
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  white-space: pre-line;
}
.au-price-note {
  margin-top: clamp(11.1px, 3.08vw, 14.8px);
  font-size: clamp(9.7px, 2.69vw, 12.9px);
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  white-space: pre-line;
}

/* ============= 05 REVIEW ============= */
.au-rating {
  display: flex;
  align-items: flex-end;
  gap: clamp(11.1px, 3.08vw, 14.8px);
  margin-top: clamp(14.8px, 4.1vw, 19.7px);
}
.au-rating-num {
  font-family: var(--stack-display);
  font-weight: var(--font-display-weight, 300);
  font-size: clamp(42.5px, 11.79vw, 56.6px);
  line-height: 0.85;
  letter-spacing: 0.02em;
}
.au-rating-meta {
  padding-bottom: 2px;
  font-size: clamp(9.7px, 2.69vw, 12.9px);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.au-stars {
  position: relative;
  display: inline-block;
  font-size: clamp(9.2px, 2.56vw, 12.3px);
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
}
.au-stars-empty { color: var(--dot); }
.au-stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--ink); }
.au-rating-source { display: block; margin-top: 3px; }
.au-rating-source a { text-decoration: underline; text-underline-offset: 2px; }
.au-voice { margin-top: clamp(14.8px, 4.1vw, 19.7px); }
/* 看点タグ（trust.voices[].tag／任意）：aurora 淡色ピルをカード頭に。空なら要素ごと非出＝マージンも出ず引用は動かない。inline-block+max-width で長文は折返し（カード幅を割らない）。淡色渐变ゆえ字は濃い --ink。 */
.au-voice-tag {
  display: inline-block;
  max-width: 100%;
  margin-bottom: clamp(7.4px, 2.05vw, 9.8px);
  padding: clamp(3px, 0.85vw, 4px) clamp(9.2px, 2.56vw, 12.3px);
  border-radius: 999px;
  background: var(--aurora);
  color: var(--ink);
  font-size: clamp(10.5px, 2.9vw, 12px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.au-voice-quote { position: relative; padding-left: clamp(13.8px, 3.85vw, 18.5px); }
.au-voice-bar {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 2px;
  background: var(--aurora);
}
.au-voice-body {
  font-family: var(--stack-serif);
  font-weight: 500;
  font-size: clamp(13.4px, 3.72vw, 17.8px);
  line-height: 2;
  letter-spacing: 0.02em;
}
.au-voice-body::before { content: "「"; }
.au-voice-body::after { content: "」"; }
.au-voice-foot {
  margin-top: clamp(7.4px, 2.05vw, 9.8px);
  font-size: clamp(9.7px, 2.69vw, 12.9px);
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.au-voice-date::before { content: "｜"; }
/* 逐条評価（trust.voices[].rating）の ★ = foot 行の頭。二層クリップの実装は段頭の大字スコアと
   .au-stars を共用し、後ろの氏名との間隔だけ足す（liquid 側は空白無しで隣接させている）。 */
.au-voice-stars { margin-right: clamp(5.5px, 1.54vw, 7.4px); }

/* ============= RESULTS（Before/After・設計稿 v3 に無い追加段なので番号を持たない）============= */
/* 図ブロックの高さは「並べ方ごとに固定」= 同じ並べ方の組は必ず等高。組ごとに素材比から高さを導くと
   段が組ごとにガタつき、縦に見た時の下端が階段になる。幅は段幅（卡带ならカード幅）で確定するので
   高さを固定し、素材比とのズレは cover が中央基準で吸収する（対比写真は被写体が中央に立つ構図なので安全側）。
   値の根拠 = 本包の写真格子を段幅 350px（390 幅 − gutter 20×2）に当てたもの：
     横並び = WORKS strip と同じ 4/5 → (350−6)/2 ÷ 0.8 ≒ 215px（55.13vw）
     縦積み = 全幅図 3/2 を 2 枚 + gap 6 → 350/1.5×2+6 ≒ 473px（121.2vw）
   別の値に振る時は script/ops/ba_height.rb（保留率＝箱比 vs 素材比）で最悪保留率を確かめてから
   —— 特定の店の数枚に最適化しない事。 */
.au-bas {
  --ba-h: clamp(198.5px, 55.13vw, 264.6px);
  --ba-h-v: clamp(436.3px, 121.2vw, 581.8px);
  --ba-inset: clamp(6.5px, 1.79vw, 8.6px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 6.67vw, 32px);
  margin-top: clamp(16.6px, 4.62vw, 22.2px);
}
.au-ba-title {
  margin-top: clamp(14.8px, 4.1vw, 19.7px);
  font-family: var(--stack-serif);
  font-weight: var(--font-serif-weight, 600);
  font-size: clamp(17.5px, 4.87vw, 23.4px);
  letter-spacing: 0.06em;
  line-height: 1.75;
}
.au-ba-lead {
  margin-top: clamp(9.2px, 2.56vw, 12.3px);
  font-size: clamp(11.5px, 3.21vw, 15.4px);
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  white-space: pre-line;
}
.au-ba { display: flex; flex-direction: column; gap: clamp(7.4px, 2.05vw, 9.8px); }
/* 組見出しは行頭に aurora 短横（eyebrow と同じ签名）。 */
.au-ba-label {
  display: flex;
  align-items: center;
  gap: clamp(7.4px, 2.05vw, 9.8px);
  font-family: var(--stack-serif);
  font-weight: 500;
  font-size: clamp(11.5px, 3.21vw, 15.4px);
  letter-spacing: 0.06em;
  line-height: 1.6;
}
.au-ba-label::before { content: ""; flex: none; width: 16px; height: 2px; background: var(--aurora); }
/* 双図：親の固定高さを主軸方向に 2 等分（横並びなら幅・縦積みなら高さ）、交差軸は stretch が埋める。
   両軸が確定するので aspect-ratio は持たせない。min-width/min-height:0 は flex 既定の min-size:auto 解除。
   既定は横並び側に倒す（structure が想定外の値でも高さが未指定になって箱が潰れない）。 */
.au-ba-pair { position: relative; display: flex; gap: clamp(4.6px, 1.28vw, 6.2px); height: var(--ba-h); }
.au-ba--vertical .au-ba-pair { flex-direction: column; height: var(--ba-h-v); }
.au-ba-slot {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--hairline);
}
/* 合成対比図（1 枚に施術前後が入った画像）は分割せずそのまま。箱は双図と同じ高さ変数を使う
   —— 合成図の比は「半図 2 枚を並べた比」なので、双図の格子とほぼ同じ形に収まる。 */
.au-ba-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--hairline);
  height: var(--ba-h);
}
.au-ba--vertical .au-ba-media { height: var(--ba-h-v); }
.au-ba-img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.au-ba-chip {
  position: absolute;
  top: var(--ba-inset);
  left: var(--ba-inset);
  padding: clamp(2px, 0.6vw, 3px) clamp(7.4px, 2.05vw, 9.8px);
  border-radius: 999px;
  background: rgba(23, 23, 28, 0.72);
  color: #ffffff;
  font-size: clamp(9.2px, 2.56vw, 12.3px);
  letter-spacing: 0.08em;
  line-height: 1.5;
}
/* 合成図は 1 枚に 2 つ chip が乗るので、施術後は分割線の向こう側（横なら右・縦なら下）へ寄せる。
   既定は横（右上）—— 高さと同じく、想定外の structure でも 2 つが左上で重ならない側に倒す。 */
.au-ba-media .au-ba-chip--after { left: auto; right: var(--ba-inset); }
.au-ba--vertical .au-ba-media .au-ba-chip--after { left: var(--ba-inset); right: auto; top: auto; bottom: var(--ba-inset); }
/* 矢印は図対コンテナの中央に絶対配置。方向は structure で切替（liquid 側に文字は持たない）。 */
.au-ba-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(27.7px, 7.69vw, 36.9px);
  height: clamp(27.7px, 7.69vw, 36.9px);
  border-radius: 999px;
  background: var(--page);
  color: var(--ink);
  font-size: clamp(11.1px, 3.08vw, 14.8px);
  line-height: 1;
  box-shadow: 0 4px 14px rgba(24, 20, 44, 0.18);
}
.au-ba-arrow::before { content: "→"; }
.au-ba--vertical .au-ba-arrow::before { content: "↓"; }
.au-ba-note {
  margin-top: clamp(14.8px, 4.1vw, 19.7px);
  font-size: clamp(9.7px, 2.69vw, 12.9px);
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  white-space: pre-line;
}
/* ---- 展示タイプ：横スワイプ卡带（settings.ba_slider ON）。既定（縦積み）の後に置く＝同特異度で後勝ち。
   組の中身は一切分岐させない（liquid 側の差は修飾クラス 1 個だけ）。strip は段の左右 padding を負 margin で
   突き破って端まで流し、次カードの覗きを作る（WORKS strip と同じ作法）。
   横に流れると下端の不揃いが直に目に付くので、横並び / 縦積みの区別なく全カードを同じ高さにする
   ＝ 受け口の 2 変数を同値へ。値 = カード幅 88%（343px @390）の横並び格子が 0.61 前後に収まる高さ。 */
.au-bas--slider {
  --ba-h: clamp(255.7px, 71.03vw, 341.1px);
  --ba-h-v: clamp(255.7px, 71.03vw, 341.1px);
  flex-direction: row;
  gap: clamp(9.2px, 2.56vw, 12.3px);
  margin: clamp(16.6px, 4.62vw, 22.2px) calc(var(--gutter) * -1) 0;
  padding: 0 var(--gutter) 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  scrollbar-width: none;
}
.au-bas--slider::-webkit-scrollbar { display: none; }
.au-bas--slider .au-ba { flex: 0 0 auto; width: 88%; scroll-snap-align: start; }

/* ============= 06 Q&A（native <details name> 排他手风琴・零 JS）============= */
.au-faq-list { margin-top: clamp(14.8px, 4.1vw, 19.7px); border-top: 1px solid var(--hairline); }
.au-faq-item { border-bottom: 1px solid var(--hairline); }
.au-faq-q {
  display: flex;
  align-items: baseline;
  gap: clamp(11.1px, 3.08vw, 14.8px);
  padding: clamp(13.8px, 3.85vw, 18.5px) 2px;
  cursor: pointer;
  list-style: none;
}
.au-faq-q::-webkit-details-marker { display: none; }
.au-faq-mark {
  font-family: var(--stack-display);
  font-weight: 400;
  font-size: clamp(12px, 3.33vw, 16px);
  color: var(--ink-3);
}
.au-faq-text {
  flex: 1;
  font-size: clamp(12px, 3.33vw, 16px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.7;
}
.au-faq-toggle {
  margin-left: auto;
  flex: none;
  font-family: var(--stack-display);
  font-weight: 300;
  font-size: clamp(16.6px, 4.62vw, 22.2px);
  line-height: 1;
  color: var(--ink-3);
  transition: transform 0.25s ease;
}
.au-faq-item[open] .au-faq-toggle { transform: rotate(45deg); }
.au-faq-a {
  padding: 0 clamp(22.2px, 6.15vw, 29.5px) clamp(14.8px, 4.1vw, 19.7px) clamp(23.1px, 6.41vw, 30.8px);
  font-size: clamp(11.5px, 3.21vw, 15.4px);
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

/* ============= SPACE（店内の様子・設計稿 v3 に無い追加段なので番号を持たない）============= */
/* WORKS strip と同じ横スクロール作法。段は左右 gutter を保ったまま strip だけ負 margin で端まで流す。
   比は 4/3（空間写真は横位置が多い）+ 幅 72% で、WORKS の 4/5・62% と見分けが付く。 */
.au-space-strip {
  display: flex;
  gap: clamp(7.4px, 2.05vw, 9.8px);
  margin: clamp(16.6px, 4.62vw, 22.2px) calc(var(--gutter) * -1) 0;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  scrollbar-width: none;
}
.au-space-strip::-webkit-scrollbar { display: none; }
.au-space-shot {
  flex: 0 0 72%;
  width: 72%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  scroll-snap-align: start;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
}

/* ============= 07 INFORMATION ============= */
.au-info-list { margin-top: clamp(16.6px, 4.62vw, 22.2px); border-top: 1px solid var(--hairline); }
.au-info-row {
  display: grid;
  grid-template-columns: clamp(68.3px, 18.97vw, 91.1px) 1fr;
  gap: clamp(11.1px, 3.08vw, 14.8px);
  padding: clamp(12px, 3.33vw, 16px) 2px;
  border-bottom: 1px solid var(--hairline);
}
.au-info-label {
  padding-top: 3px;
  font-size: clamp(10.2px, 2.82vw, 13.5px);
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.au-info-value {
  font-size: clamp(11.5px, 3.21vw, 15.4px);
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
/* 電話は tel: リンク（モバイル専用 LP なのでタップで発信）。行の版面は他の行と同じ、リンクだと分かる下線だけ足す。 */
.au-info-tel { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--dot); }
/* 地図 = 後端が組む静的図。図全体が経路リンクなので <a> 自体は下線を持たず、下線は図の下の
   文言（.au-map-cta）だけに敷く。図は段幅いっぱい・角丸は他のカードと揃える。 */
.au-map { margin-top: clamp(12.9px, 3.59vw, 17.2px); }
.au-map-link { display: block; color: var(--ink); }
.au-map-link:hover { color: var(--ink); }
.au-map-img { display: block; width: 100%; border-radius: var(--radius-sm); }
.au-map-cta {
  display: inline-block;
  margin-top: clamp(7.4px, 2.05vw, 9.8px);
  font-size: clamp(10.2px, 2.82vw, 13.5px);
  letter-spacing: 0.06em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}

/* ============= 08 RESERVATION（暗色）============= */
.au-reservation {
  margin-top: clamp(40.6px, 11.28vw, 54.2px);
  padding: var(--space) var(--gutter) clamp(25.8px, 7.18vw, 34.5px);
  background: var(--dark-bg);
}
.au-reservation .au-eyebrow { color: rgba(255, 255, 255, 0.5); }
.au-reservation-title {
  margin: clamp(14.8px, 4.1vw, 19.7px) 0 clamp(5.5px, 1.54vw, 7.4px);
  font-family: var(--stack-serif);
  font-weight: var(--font-serif-weight, 600);
  font-size: clamp(17.5px, 4.87vw, 23.4px);
  letter-spacing: 0.06em;
  line-height: 1.75;
  color: var(--dark-fg);
}
.au-reservation-lead {
  margin-top: clamp(9.2px, 2.56vw, 12.3px);
  font-size: clamp(11.5px, 3.21vw, 15.4px);
  letter-spacing: 0.02em;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.75);
  white-space: pre-line;
  overflow-wrap: break-word;
}
.au-flow-heading {
  margin-top: clamp(18.5px, 5.13vw, 24.6px);
  font-family: var(--stack-serif);
  font-weight: var(--font-serif-weight, 600);
  font-size: clamp(12px, 3.33vw, 16px);
  letter-spacing: 0.16em;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.92);
}
.au-steps { list-style: none; margin-top: clamp(12.9px, 3.59vw, 17.2px); padding: 0; }
.au-step {
  display: flex;
  gap: clamp(12.9px, 3.59vw, 17.2px);
  align-items: flex-start;
  padding: clamp(11.1px, 3.08vw, 14.8px) 2px;
  border-bottom: 1px solid var(--dark-hair);
  font-size: clamp(11.5px, 3.21vw, 15.4px);
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
}
.au-step:first-child { border-top: 1px solid var(--dark-hair); }
.au-step-num {
  flex: none;
  font-family: var(--stack-display);
  font-weight: 300;
  font-size: clamp(12px, 3.33vw, 16px);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
}
.au-step-body {
  display: flex;
  flex-direction: column;
  gap: clamp(2.8px, 0.77vw, 3.7px);
  min-width: 0;
}
.au-step-title { font-weight: 500; }
.au-step-desc {
  font-size: clamp(10.2px, 2.82vw, 13.5px);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
  white-space: pre-line;
}
/* CTA 配色は convert.kind で二分：--line は LINE 緑锁色、--other は主題の aurora 渐变 + --ink 文字。
   min-height + border-box = 文言が 2 行に折り返しても潰れない（既定の 1 行時は従来と同じ高さ）。 */
.au-reservation-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7.4px, 2.05vw, 9.8px);
  box-sizing: border-box;
  min-height: clamp(46.2px, 12.82vw, 61.5px);
  margin-top: clamp(20.3px, 5.64vw, 27.1px);
  padding: clamp(7.4px, 2.05vw, 9.8px) clamp(14.8px, 4.1vw, 19.7px);
  font-weight: 700;
  font-size: clamp(12.9px, 3.59vw, 17.2px);
  letter-spacing: 0.1em;
  text-align: center;
  border-radius: 8px;
  transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}
.au-reservation-cta--line { background: #06C755; color: #ffffff; }
.au-reservation-cta--line:hover { background: #05B34D; color: #ffffff; }
.au-reservation-cta--other { background: var(--aurora); color: var(--ink); }
.au-reservation-cta--other:hover { color: var(--ink); opacity: 0.9; }
.au-reservation-cta:active { transform: scale(0.99); }
.au-reservation-cta-icon { flex: none; }
.au-reservation-cta-label { min-width: 0; overflow-wrap: anywhere; }
.au-reservation-note {
  margin-top: clamp(11.1px, 3.08vw, 14.8px);
  text-align: center;
  font-size: clamp(9.2px, 2.56vw, 12.3px);
  letter-spacing: 0.06em;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.45);
  white-space: pre-line;
  overflow-wrap: break-word;
}
.au-other-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(7.4px, 2.05vw, 9.8px);
  margin-top: clamp(16.6px, 4.62vw, 22.2px);
}
.au-other-link {
  font-size: clamp(10.6px, 2.95vw, 14.2px);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
.au-other-link:hover { color: rgba(255, 255, 255, 0.95); }
.au-reservation-footer {
  margin-top: clamp(25.8px, 7.18vw, 34.5px);
  font-size: clamp(9.2px, 2.56vw, 12.3px);
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.4);
}

/* ============= watermark（show_watermark 時のみ・.au-page 外）============= */
.au-page-footer { max-width: var(--maxw); margin: 0 auto; padding: 18px 16px; text-align: center; }
.au-page-footer-text { font-family: var(--stack-body); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); }
.au-page-footer-link { color: var(--ink-3); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .au-faq-toggle, .au-reservation-cta { transition: none; }
}