@charset "UTF-8";
/* ============================================================
   SQUARE トップ 案A「光の線」 v2（ゾイロス1回目の指摘を反映）
   構成: 1.トークン → 2.ベース → 3.レイアウト → 4.光の線(見せ場)
        → 5.各セクション → 6.モーション → 7.停止ポリシー
   ============================================================ */

/* ---------- 1. トークン ---------- */
:root {
  /* 夜の黒と、天井の間接照明の青。電球色は3か所だけ */
  --color-night: #07090d;        /* 地：閉店後の店内の黒 */
  --color-deep: #0c1118;         /* 面：一段明るい黒 */
  --color-marble: #121922;       /* 面：大理石の黒 */
  --color-text: #e6ebf0;         /* 本文：青みの白 */
  --color-muted: #a7b2bd;        /* 補助：地に対して 7:1 以上 */
  --color-line: #1f2a36;         /* 罫線 */
  --color-cove: #2ea8ff;         /* 天井の間接照明の青 */
  --color-cove-hi: #a8dcff;      /* 光の芯 */
  --color-bulb: #e9b872;         /* ペンダントの電球色(営業時間・気分の言葉・最後の段階の3か所だけ) */
  --color-accent-ink: #04121f;   /* 青の上の文字 */

  /* 光：芯＋近い光＋遠い光の3層。線は1px（2026-10-27 酒井「もっと細く」で3px→1px・にじみも弱めた） */
  --glow: 0 0 3px 0 rgba(46, 168, 255, 0.9), 0 0 12px 1px rgba(46, 168, 255, 0.45), 0 0 36px 4px rgba(46, 168, 255, 0.2);
  --beam: 1px;

  --font-latin: "Jost", "Zen Kaku Gothic New", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --space: 8px;
  --section-pad: clamp(64px, 7.2vw, 104px);
  --container: 1120px;
  --gutter-l: 52px;
  --gutter-r: 20px;
  /* 本文の左端と、光の線の位置(本文の36px左) */
  --content-x: max(var(--gutter-l), (100vw - var(--container)) / 2);
  --rail-x: calc(var(--content-x) - 36px);

  --z-header: 100;
  --z-nav: 200;
  --z-modal: 1000;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.9s;
}

/* ---------- 2. ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; background: var(--color-night); }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-night);
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  /* 改行は文節(<wbr>)でだけ。単語の途中では折らない */
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  overflow-x: clip;
}
@media (min-width: 1024px) { body { font-size: 18px; } }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--color-cove); outline-offset: 4px; }
h1, h2, h3 { font-weight: 500; line-height: 1.45; letter-spacing: 0.06em; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: var(--z-modal);
  padding: 10px 16px; background: var(--color-cove); color: var(--color-accent-ink);
}
.skip:focus { top: 12px; }

/* ---------- 3. レイアウト ---------- */
.container {
  width: min(var(--container), 100% - var(--gutter-l) - var(--gutter-r));
  margin-left: var(--content-x);
}
.section { position: relative; padding-bottom: var(--section-pad); }

/* ボタン：光の縁取り。ホバーで内側に青が灯る */
.button {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 16px 30px 16px 32px;
  border: 1px solid var(--color-cove);
  color: var(--color-text); text-decoration: none;
  font-size: 16px; letter-spacing: 0.1em;
  background: rgba(7, 9, 13, 0.6);
  box-shadow: 0 0 14px rgba(46, 168, 255, 0.35), inset 0 0 12px rgba(46, 168, 255, 0.12);
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.button::after { content: ""; width: 26px; height: 1px; background: currentColor; transition: width 0.4s var(--ease-out); }
@media (hover: hover) {
  .button:hover { background: var(--color-cove); color: var(--color-accent-ink); box-shadow: var(--glow); }
  .button:hover::after { width: 38px; }
}
.button--lg { padding: 20px 36px 20px 40px; font-size: 17px; }

/* ---------- ヘッダー(不透明) ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(20px, 4vw, 48px);
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
}
.site-header.is-scrolled {
  background: rgba(7, 9, 13, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(46, 168, 255, 0.4);
  padding-block: 12px;
}
.site-header__logo { display: block; color: var(--color-text); width: 132px; }
.site-header__logo svg { display: block; width: 100%; height: auto; }

.global-nav ul { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.global-nav a { text-decoration: none; font-size: 14px; letter-spacing: 0.1em; transition: color 0.3s; }
@media (hover: hover) { .global-nav a:hover { color: var(--color-cove-hi); } }
.global-nav__cta a { display: inline-block; padding: 9px 18px; border: 1px solid rgba(46, 168, 255, 0.7); }

.nav-toggle {
  display: none; width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  position: relative; z-index: calc(var(--z-nav) + 1);
}
.nav-toggle span { display: block; width: 24px; height: 1px; margin: 7px auto; background: var(--color-text); transition: transform 0.3s, opacity 0.3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-toggle { display: block; }
  .global-nav {
    position: fixed; inset: 0; z-index: var(--z-nav);
    background: var(--color-night);
    display: grid; place-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
  }
  .global-nav.is-open { opacity: 1; visibility: visible; }
  .global-nav ul { flex-direction: column; text-align: center; gap: 22px; }
  .global-nav a { display: inline-block; padding: 6px 0; font-size: 19px; }
  .global-nav__cta a { padding: 14px 22px; font-size: 16px; }
}

/* ---------- 最初の画面 ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 30% 22%;
  transform: scale(1.06); transition: transform 2.6s var(--ease-out);
}
.is-loaded .hero__media img { transform: scale(1); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 9, 13, 0.55) 0%, rgba(7, 9, 13, 0) 22%),
    linear-gradient(0deg, rgba(7, 9, 13, 0.97) 0%, rgba(7, 9, 13, 0.8) 30%, rgba(7, 9, 13, 0) 58%);
}
.hero__band { position: relative; padding: 0 0 clamp(40px, 6vh, 64px); }

/* 帯の上の横線 → 縦の線に折れる角 → 下の章へ続く */
.hero__cove, .hero__drop, .hero__node { position: absolute; pointer-events: none; }
.hero__cove {
  left: 0; right: 0; top: 0; height: var(--beam);
  background: linear-gradient(90deg, var(--color-cove) 0%, var(--color-cove-hi) var(--rail-x), var(--color-cove) 60%, var(--color-cove) 100%);
  box-shadow: var(--glow);
  transform: scaleX(0); transform-origin: var(--rail-x) 50%;
  transition: transform 1.1s var(--ease-out);
}
.hero__drop {
  left: var(--rail-x); top: 0; bottom: 0; width: var(--beam);
  background: linear-gradient(180deg, var(--color-cove-hi), var(--color-cove));
  box-shadow: var(--glow);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.9s var(--ease-out) 0.7s;
}
.hero__node {
  left: calc(var(--rail-x) - 3.5px); top: -3.5px; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px #fff, 0 0 16px var(--color-cove), 0 0 36px var(--color-cove);
  opacity: 0; transition: opacity 0.6s 0.5s;
}
.is-loaded .hero__cove { transform: scaleX(1); }
.is-loaded .hero__drop { transform: scaleY(1); }
.is-loaded .hero__node { opacity: 1; }

.hero__inner {
  width: min(1240px, 100% - var(--content-x) - var(--gutter-r));
  margin-left: var(--content-x);
  padding-top: clamp(28px, 4.5vh, 48px);
  display: grid; gap: 24px;
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 64px; }
}
.hero__title { display: grid; gap: 14px; }
.hero__kicker { font-size: clamp(16px, 1.5vw, 19px); letter-spacing: 0.28em; color: var(--color-text); }
.hero__logo { display: block; width: min(500px, 100%); color: var(--color-text); }
.hero__logo svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 18px rgba(46, 168, 255, 0.25)); }
/* 1行目（12字＋句点）が狭い幅でも1行に収まる大きさに抑える（320で18.5px・390以上は従来どおり） */
.hero__copy { font-size: min(clamp(23px, 2.6vw, 34px), calc((100vw - 72px) / 13.4)); line-height: 1.6; letter-spacing: 0.1em; font-weight: 400; }
.hero__note { margin: 12px 0 24px; color: var(--color-muted); font-size: 16px; max-width: 22em; }
@media (min-width: 1024px) { .hero__note { font-size: 17px; max-width: 26em; } }

/* 文字は0.3秒以内に出す(待たせない) */
.hero__title, .hero__body { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
.is-loaded .hero__title { opacity: 1; transform: none; transition-delay: 0.05s; }
.is-loaded .hero__body { opacity: 1; transform: none; transition-delay: 0.2s; }

/* ---------- 4. 光の線(見せ場) ---------- */
.lit { position: relative; }
.rail {
  position: absolute; top: 0; bottom: 0; left: var(--rail-x); width: var(--beam);
  pointer-events: none; z-index: 3;
}
.rail::before { content: ""; position: absolute; inset: 0; background: rgba(46, 168, 255, 0.16); }
.rail__fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--color-cove) 0%, var(--color-cove-hi) 100%);
  box-shadow: var(--glow);
  transform-origin: top; transform: scaleY(var(--lit-progress, 0));
}
.rail__head {
  position: absolute; left: -3.5px; top: 0; width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff, 0 0 16px var(--color-cove), 0 0 40px var(--color-cove);
  transform: translateY(calc(var(--lit-head, 0) * 1px - 4px));
}

/* 章の入口：縦の線が届くと、画面の端から端まで横の線が灯る */
.entrance { position: relative; }
.cove {
  position: absolute; left: 0; right: 0; top: 0; height: var(--beam);
  pointer-events: none; z-index: 2;
}
.cove::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--color-cove) 0%, var(--color-cove-hi) var(--rail-x), var(--color-cove) 45%, var(--color-cove) 100%);
  box-shadow: var(--glow);
  transform: scaleX(0); transform-origin: var(--rail-x) 50%;
  transition: transform 1.3s var(--ease-out);
}
.cove::after {   /* 縦と横の交点 */
  content: ""; position: absolute; left: calc(var(--rail-x) - 3.5px); top: -3.5px; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px #fff, 0 0 18px var(--color-cove);
  opacity: 0; transition: opacity 0.5s;
}
.cove.is-lit::before { transform: scaleX(1); }
.cove.is-lit::after { opacity: 1; }
/* 線の名札：線の右端の上に小さく */
.cove__tag {
  position: absolute; right: var(--gutter-r); bottom: 12px;
  font-size: 13px; letter-spacing: 0.24em; color: var(--color-cove-hi); white-space: nowrap;
  opacity: 0; transition: opacity 0.6s 0.5s;
}
@media (min-width: 1024px) { .cove__tag { right: max(var(--gutter-r), (100vw - var(--container)) / 2); } }
.cove.is-lit .cove__tag { opacity: 1; }

/* 写真の帯：線が写真の上辺をなぞる。写真の天井の光が線の続きになる */
.strip { position: relative; height: clamp(340px, 60vh, 640px); overflow: hidden; background: var(--color-deep); }
.strip--thin { height: clamp(220px, 38vh, 420px); }
.strip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.strip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(7, 9, 13, 0.95) 0%, rgba(7, 9, 13, 0.4) 34%, rgba(7, 9, 13, 0) 60%);
}
.strip__caption { position: absolute; left: 0; bottom: clamp(28px, 4vw, 52px); z-index: 1; }

/* ---------- 5. 各セクション ---------- */

/* お店のこと：見出しは光の線のすぐ下に1行 */
.concept .entrance { padding-top: clamp(36px, 4vw, 52px); }
.concept__title { font-size: clamp(26px, 2.4vw + 10px, 46px); font-weight: 400; letter-spacing: 0.08em; }
.concept__grid { margin-top: clamp(32px, 4vw, 56px); display: grid; gap: 40px; }
@media (min-width: 1024px) { .concept__grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } }
.concept__text { max-width: 30em; }
.concept__photo { margin-top: 36px; aspect-ratio: 16 / 10; overflow: hidden; }
.concept__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.promise { border-top: 1px solid var(--color-line); }
.promise__item { display: grid; gap: 6px; padding: 26px 0 26px 22px; border-bottom: 1px solid var(--color-line); position: relative; }
.promise__item::before { content: ""; position: absolute; left: 0; top: 40px; width: 10px; height: 2px; background: var(--color-cove); box-shadow: 0 0 8px var(--color-cove); }
.promise__key { font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; }
.promise__val { color: var(--color-muted); font-size: 16px; }
@media (min-width: 1024px) { .promise__val { font-size: 17px; } }

/* 空間：写真に重ねた見出し → 大小の写真 */
.space__title { font-size: clamp(32px, 3.6vw + 8px, 64px); font-weight: 400; line-height: 1.35; letter-spacing: 0.08em; text-shadow: 0 2px 24px rgba(7, 9, 13, 0.8); }
/* お酒：斜めに切った一段明るい面。問いかけの見出し */
.drink {
  background: var(--color-marble);
  clip-path: polygon(0 0, 100% 56px, 100% 100%, 0 100%);
  padding-top: 72px;
}
.drink .entrance { padding-top: clamp(36px, 4vw, 52px); }
.drink__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1024px) { .drink__top { grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: end; } }
.drink__title { font-size: clamp(30px, 3vw + 12px, 56px); font-weight: 400; line-height: 1.4; letter-spacing: 0.06em; }
.drink__text p + p { margin-top: 12px; color: var(--color-muted); }

.drink__snack { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--color-line); max-width: 40em; }

/* ご来店まで：いちばん大きな見出し。段階は縦の光の線の上で灯る */
.flow .entrance { padding-top: clamp(32px, 3.4vw, 48px); }
.flow__head { display: grid; gap: 12px; }
@media (min-width: 1024px) { .flow__head { grid-template-columns: auto 1fr; gap: 56px; align-items: end; } }
.flow__title { font-size: clamp(34px, 9vw + 2px, 112px); font-weight: 300; line-height: 1.15; letter-spacing: 0.04em; }
.flow__lead { color: var(--color-muted); max-width: 20em; padding-bottom: 0.6em; }
.steps { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--color-line); }
.step {
  position: relative; display: grid;
  grid-template-columns: 52px 1fr; column-gap: 12px;
  padding: 24px 0; border-bottom: 1px solid var(--color-line);
}
.step__dot {   /* 縦の線(rail)の真上に乗る点 */
  position: absolute; top: 38px;
  left: calc(var(--rail-x) - var(--content-x) - 5px);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--color-night); border: 1px solid rgba(46, 168, 255, 0.5);
  z-index: 4;
  transition: background 0.5s, box-shadow 0.5s, border-color 0.5s;
}
.step__num { grid-row: 1 / 3; font-family: var(--font-latin); font-weight: 200; font-size: 44px; line-height: 1; color: var(--color-muted); transition: color 0.5s, text-shadow 0.5s; }
.step__title { font-size: clamp(19px, 1.2vw + 8px, 24px); }
.step__text { color: var(--color-muted); font-size: 16px; }
.step.is-lit .step__dot { background: #fff; border-color: #fff; box-shadow: 0 0 10px #fff, 0 0 28px var(--color-cove), 0 0 60px var(--color-cove); }
.step.is-lit .step__num { color: var(--color-cove-hi); text-shadow: 0 0 18px rgba(46, 168, 255, 0.6); }
@media (min-width: 1024px) {
  .step { grid-template-columns: 120px 300px 1fr; align-items: center; padding: 28px 0; }
  .step__dot { top: 50%; margin-top: -5.5px; }
  .step__num { grid-row: auto; font-size: 64px; }
  .step__text { font-size: 17px; }
}

/* 営業時間・アクセス */
.access__body { padding: clamp(36px, 4vw, 56px) 0 var(--section-pad); }
.access__hours { display: grid; gap: 32px; }
@media (min-width: 1024px) { .access__hours { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } }
.access__title { font-size: clamp(22px, 1.4vw + 12px, 34px); font-weight: 400; letter-spacing: 0.08em; }
.hours__time {
  margin-top: 18px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px;
  font-family: var(--font-latin); font-weight: 200;
  font-size: clamp(42px, 4.6vw, 70px); line-height: 1.1; letter-spacing: 0.02em;
  color: var(--color-bulb);
  text-shadow: 0 0 18px rgba(233, 184, 114, 0.45), 0 0 48px rgba(233, 184, 114, 0.2);
}
.hours__time span { white-space: nowrap; }
.hours__next { font-family: var(--font-body); font-weight: 400; font-size: 0.42em; letter-spacing: 0.1em; margin-right: 0.25em; vertical-align: 0.5em; }
.hours__dash { width: 40px; height: 1px; background: var(--color-bulb); box-shadow: 0 0 10px rgba(233, 184, 114, 0.6); }
/* スマホ幅では「19:00 ― 翌3:00」を1行に収める（2行に割れると区切りの線が行末に残る。ゾイロス 10-27 r2 N1） */
@media (max-width: 400px) {
  .hours__time { font-size: clamp(32px, 10.4vw, 42px); gap: 4px 12px; }
  .hours__dash { width: 24px; }
}
.hours__list { margin-top: 24px; border-top: 1px solid var(--color-line); }
.hours__list div, .place div { display: grid; grid-template-columns: 5.5em 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--color-line); }
.hours__list dt, .place dt { color: var(--color-muted); font-size: 15px; padding-top: 2px; }
.hours__list dd, .place dd { margin: 0; }
@media (min-width: 1024px) { .hours__list div, .place div { grid-template-columns: 7.5em 1fr; } }
.access__photo { overflow: hidden; aspect-ratio: 4 / 3; }
.access__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }

.access__place { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 28px; }
@media (min-width: 1024px) { .access__place { grid-template-columns: 1fr 1.25fr; gap: 72px; align-items: start; } }
.place { border-top: 1px solid var(--color-line); }
.map { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-deep); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.9) hue-rotate(180deg) contrast(0.9) brightness(0.95); }

/* 問い合わせ：円弧で区切った出口。中央で横に灯る */
.cta {
  position: relative; text-align: center;
  padding: clamp(112px, 12vw, 160px) 0 clamp(88px, 10vw, 136px);
  background: radial-gradient(70% 90% at 50% 0%, rgba(46, 168, 255, 0.16), rgba(7, 9, 13, 0) 70%), var(--color-deep);
}
.cta__arc { position: absolute; left: 0; top: -1px; width: 100%; height: clamp(32px, 5vw, 80px); fill: var(--color-night); transform: scaleY(-1); }
.cove--center { top: clamp(68px, 8vw, 104px); left: 50%; right: auto; width: min(480px, 76%); transform: translateX(-50%); }
.cove--center::before { background: linear-gradient(90deg, rgba(46, 168, 255, 0), var(--color-cove-hi) 50%, rgba(46, 168, 255, 0)); transform-origin: center; }
.cove--center::after { display: none; }
.cta__inner { margin-inline: auto; width: min(var(--container), 100% - 40px); }
.cta__title { font-size: clamp(28px, 3.4vw, 44px); font-weight: 400; letter-spacing: 0.1em; }
.cta__text { margin: 20px auto 36px; max-width: 30em; color: var(--color-muted); }

/* フッター：リンクは押せる高さ44px以上 */
.site-footer { padding: 64px 0 28px; border-top: 1px solid var(--color-line); background: var(--color-night); font-size: 15px; color: var(--color-muted); }
.site-footer__inner { display: grid; gap: 28px; }
@media (min-width: 1024px) { .site-footer__inner { grid-template-columns: 240px 1fr auto; gap: 64px; align-items: start; } }
.site-footer__logo { display: block; width: 220px; color: var(--color-text); }
.site-footer__logo svg { display: block; width: 100%; height: auto; }
.site-footer__nav { display: grid; gap: 4px; }
.site-footer__nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
@media (hover: hover) { .site-footer__nav a:hover { color: var(--color-cove-hi); } }
.site-footer__copy { margin-top: 40px; text-align: center; font-family: var(--font-latin); font-weight: 300; letter-spacing: 0.2em; font-size: 13px; }

/* ---------- 6. モーション基盤 ---------- */
.js-reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); }
.js-reveal.is-inview { opacity: 1; transform: none; }
.js-reveal[data-delay="1"] { transition-delay: 0.12s; }
.js-reveal[data-delay="2"] { transition-delay: 0.24s; }
.js-reveal[data-delay="3"] { transition-delay: 0.36s; }

/* ---------- 7. モーション停止(削除禁止) ---------- */
.motion-stop {
  display: none; position: fixed; right: 16px; bottom: 16px; z-index: var(--z-modal);
  min-height: 44px; padding: 10px 16px; font-size: 13px; font-family: var(--font-body);
  background: var(--color-deep); color: var(--color-text);
  border: 1px solid var(--color-line); border-radius: 999px; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .motion-stop { display: block; } }
html.is-motion-off *, html.is-motion-off *::before, html.is-motion-off *::after {
  transition-duration: 0.01ms !important; transition-delay: 0s !important;
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
}
html.is-motion-off .js-reveal, html.is-motion-off .hero__title, html.is-motion-off .hero__body { opacity: 1; transform: none; }
html.is-motion-off .rail__fill { transform: scaleY(1); }
html.is-motion-off .rail__head { display: none; }

/* 大画面の曲の説明(カラオケではないことを添える) */
.concept__songs { margin-top: 18px; padding-left: 20px; border-left: 2px solid var(--color-cove); color: var(--color-muted); }

/* 狭い画面では項目名を上に積む(文節が長い所でもはみ出さない) */
@media (max-width: 1023px) {
  .access__place, .access__hours, .concept__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  .hours__list div, .place div { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; }
}
.nw { white-space: nowrap; }

/* ---------- 2回目の調整 ---------- */
.u-sp { display: inline; }
@media (min-width: 1024px) { .u-sp { display: none; } }

/* 線の名札は線の下側に(斜めの面や写真でも切れない) */
.cove__tag { bottom: auto; top: 14px; text-shadow: 0 1px 10px rgba(7, 9, 13, 0.9); }

/* 写真に重ねた見出しを読みやすく */
.strip::after { background: linear-gradient(0deg, rgba(7, 9, 13, 0.96) 0%, rgba(7, 9, 13, 0.78) 30%, rgba(7, 9, 13, 0.2) 62%, rgba(7, 9, 13, 0) 80%); }
.strip__caption { bottom: clamp(24px, 3vw, 40px); }


.flow__lead { max-width: 24em; }

/* 地図：外部で開くリンク */
.map__link {
  position: static; display: inline-flex; align-items: center; gap: 10px; margin-top: 12px;
  min-height: 44px; padding: 0 16px; border: 1px solid rgba(46, 168, 255, 0.55);
  font-size: 14px; text-decoration: none; color: var(--color-cove-hi);
}
@media (hover: hover) { .map__link:hover { color: var(--color-text); } }
/* 名札と見出しが触れないよう、入口の上余白を確保 */
.concept .entrance, .drink .entrance, .flow .entrance { padding-top: clamp(48px, 4vw, 56px); }

/* ---------- 3回目の調整 ---------- */
/* 店名の下の一行：明るい大画面に重なっても読めるよう、狭い画面では暗い影を敷く */
.hero__kicker { text-shadow: 0 0 12px rgba(7, 9, 13, 0.9), 0 0 2px rgba(7, 9, 13, 0.9); }
@media (max-width: 400px) {
  .hero__kicker {
    justify-self: start; padding: 2px 8px; margin-left: -8px;
    background: rgba(7, 9, 13, 0.72);
  }
}
/* 線の先端の点が段階の点と重なる間は、先端を隠す(「8」に見えないように) */
.lit.is-head-hidden .rail__head { opacity: 0; }
.rail__head { transition: opacity 0.15s; }


/* ---------- JavaScript が動かないときは、隠さず最初から全部見せる ---------- */
/* <head> の1行で html に .js が付く。付かない＝JS が止まっている環境だけに効く */
html:not(.js) .js-reveal,
html:not(.js) .hero__title,
html:not(.js) .hero__body,
html:not(.js) .hero__node,
html:not(.js) .cove::after,
html:not(.js) .cove__tag { opacity: 1; transform: none; transition: none; }
html:not(.js) .hero__media img,
html:not(.js) .hero__cove,
html:not(.js) .hero__drop,
html:not(.js) .cove::before,
html:not(.js) .pair__beam { transform: none; transition: none; }
html:not(.js) .rail__fill { transform: scaleY(1); }
html:not(.js) .rail__head { display: none; }

/* ============================================================
   磨き込み（案A 採用後）
   ============================================================ */

/* ---------- 最初の画面：冷蔵庫・家電・人が入らない写真(interior-24) ---------- */
/* 縦長の画面では、大画面を外して柱と青い壁・ソファ側を見せる */
@media (max-width: 1023px) and (orientation: portrait) {
  .hero__media img { object-position: 62% 30%; }
}

/* ---------- 空間：3つの場所を横に並べる ---------- */
.space .entrance { padding-top: clamp(48px, 4vw, 56px); }
.space__head { display: grid; gap: 14px; }
@media (min-width: 1024px) { .space__head { grid-template-columns: auto 1fr; gap: 64px; align-items: end; } }
.space__title { text-shadow: none; }
.space__note { color: var(--color-muted); max-width: 22em; padding-bottom: 0.5em; }

.rooms {
  display: grid; gap: 3px; margin-top: clamp(32px, 4vw, 48px);
  background: var(--color-cove);                 /* 写真の継ぎ目が細い青い線になる */
  box-shadow: 0 0 24px rgba(46, 168, 255, 0.35);
}
.room { position: relative; overflow: hidden; background: var(--color-marble); aspect-ratio: 4 / 3; margin: 0; }
.room img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .room:hover img { transform: scale(1.03); } }
.room:nth-child(1) img { object-position: 30% 50%; }
.room:nth-child(2) img { object-position: 50% 55%; }
.room:nth-child(3) img { object-position: 50% 60%; }
.room figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 72px clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px);
  background: linear-gradient(0deg, rgba(7, 9, 13, 0.95) 0%, rgba(7, 9, 13, 0.75) 55%, rgba(7, 9, 13, 0) 100%);
  font-size: 15px; color: var(--color-muted); line-height: 1.75;
}
.room__en { display: block; font-family: var(--font-latin); font-weight: 300; font-size: 12px; letter-spacing: 0.32em; color: var(--color-cove-hi); }
.room figcaption strong { display: block; margin: 2px 0 6px; color: var(--color-text); font-weight: 400; font-size: clamp(22px, 1.4vw + 6px, 28px); letter-spacing: 0.14em; }
@media (min-width: 1024px) {
  .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .room { aspect-ratio: auto; height: clamp(520px, 70vh, 640px); }
}
.space { padding-bottom: clamp(40px, 5vw, 72px); }   /* 下の斜めの面までの空きを詰めた（間延びして見えた・10-28 見直し） */

/* ---------- お酒：気分の言葉 → 光の線 → 一杯（AI カクテルが見せ場） ---------- */
.pour-how { margin-top: clamp(36px, 4vw, 52px); display: grid; gap: 10px; }
.pour-how li { display: flex; align-items: baseline; gap: 14px; font-size: 16px; color: var(--color-text); }
.pour-how__n { font-family: var(--font-latin); font-weight: 200; font-size: 28px; line-height: 1; color: var(--color-cove-hi); min-width: 0.8em; }
@media (min-width: 1024px) {
  .pour-how { grid-template-columns: repeat(3, auto); justify-content: start; gap: 48px; }
  .pour-how li { font-size: 17px; }
}

.pairs { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: clamp(56px, 7vw, 96px); }
.pair {
  margin: 0 0 0 var(--content-x);
  width: min(var(--container), 100% - var(--gutter-l) - var(--gutter-r));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
}
.pair__say {
  font-size: clamp(22px, 2.4vw + 6px, 44px); font-weight: 300; letter-spacing: 0.08em; line-height: 1.5;
  color: var(--color-bulb);                         /* 電球色：気分の言葉 */
  text-shadow: 0 0 22px rgba(233, 184, 114, 0.35);
}
.pair__say::before { content: "「"; }
.pair__say::after { content: "」"; }
/* 言葉から一杯へ降りる光：狭い画面では縦、広い画面では横 */
.pair__beam {
  display: block; width: var(--beam); height: 56px; margin: 14px 0 0 1.1em;
  background: linear-gradient(180deg, var(--color-bulb), var(--color-cove) 70%);
  box-shadow: var(--glow);
  transform: scaleY(0); transform-origin: top; transition: transform 0.9s var(--ease-out) 0.3s;
}
.pair.is-lit .pair__beam { transform: scaleY(1); }
.pair__img {
  width: 100%; max-width: 460px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%;   /* メニューの写真（正方形・グラスが中央）。1600 の原本を使う＝縦長の箱に cover で拡大されても2〜3倍の画面で引き伸ばさない */
  box-shadow: 0 -3px 0 0 var(--color-cove), 0 -14px 40px -14px rgba(46, 168, 255, 0.8);
}
@media (min-width: 1024px) {
  .pair { grid-template-columns: minmax(0, 1fr) 120px 460px; align-items: center; }
  .pair__beam {
    width: 100%; height: var(--beam); margin: 0;
    background: linear-gradient(90deg, var(--color-bulb), var(--color-cove) 60%, var(--color-cove-hi));
    transform: scaleX(0); transform-origin: left;
  }
  .pair.is-lit .pair__beam { transform: scaleX(1); }
  .pair__img { aspect-ratio: 3 / 4; }
  .pair__say { justify-self: end; text-align: right; padding-right: 28px; }
  /* 2つ目は左右を入れ替える */
  .pair--r { grid-template-columns: 460px 120px minmax(0, 1fr); }
  .pair--r .pair__img { grid-column: 1; grid-row: 1; }
  .pair--r .pair__beam { grid-column: 2; grid-row: 1; background: linear-gradient(270deg, var(--color-bulb), var(--color-cove) 60%, var(--color-cove-hi)); transform-origin: right; }
  .pair--r .pair__say { grid-column: 3; grid-row: 1; justify-self: start; text-align: left; padding: 0 0 0 28px; }
}
.pairs__note { margin-top: 20px; font-size: 14px; color: var(--color-muted); }
@media (min-width: 1024px) { .pairs__note { text-align: right; } }

.glasses { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 24px); }
.glass img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; }
.glass { margin: 0; }

/* ---------- ご来店まで：最後の段階だけ電球色で灯る ---------- */
.step:last-child.is-lit .step__dot { background: var(--color-bulb); border-color: var(--color-bulb); box-shadow: 0 0 10px var(--color-bulb), 0 0 28px rgba(233, 184, 114, 0.7), 0 0 60px rgba(233, 184, 114, 0.35); }
.step:last-child.is-lit .step__num { color: var(--color-bulb); text-shadow: 0 0 18px rgba(233, 184, 114, 0.5); }
html:not(.js) .step:last-child .step__dot { background: var(--color-bulb); border-color: var(--color-bulb); }

/* ---------- 営業時間・アクセス：空きを詰め、地図は写真と同じ大きさ ---------- */
@media (min-width: 1024px) {
  .access__hours { align-items: stretch; }
  .access__photo { aspect-ratio: auto; position: relative; min-height: 320px; }
  .access__photo img { position: absolute; inset: 0; }
  .access__place { grid-template-columns: 1fr 1fr; gap: 72px; align-items: stretch; }
  .access__map { display: flex; flex-direction: column; }
  .access__map .map { flex: 1; aspect-ratio: auto; min-height: 360px; }
}
.access__info { display: grid; gap: 28px; align-content: start; }

/* 地図が描かれるまでの表示：場所の名前と住所、ピン */
.map { background: radial-gradient(60% 60% at 50% 45%, rgba(46, 168, 255, 0.12), rgba(7, 9, 13, 0) 70%), var(--color-deep); }
.map__fallback {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px;
  text-align: center; padding: 24px; color: var(--color-muted); font-size: 15px;
}
.map__pin { width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff, 0 0 28px var(--color-cove); margin-bottom: 6px; }
.map__name { color: var(--color-text); font-size: 18px; letter-spacing: 0.1em; }

/* 着いてから：看板と扉のロゴが目印 */
.arrive { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: start; }
.arrive__sign {
  display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 14px;
  background: #050608; border: 1px solid rgba(46, 168, 255, 0.55);
  box-shadow: 0 0 18px rgba(46, 168, 255, 0.25), inset 0 0 14px rgba(46, 168, 255, 0.12);
  color: var(--color-text);
}
.arrive__sign svg { width: 100%; height: auto; display: block; }
.arrive__title { font-size: 17px; letter-spacing: 0.12em; margin-bottom: 4px; }
.arrive__text p { color: var(--color-muted); font-size: 16px; }

/* 狭い画面では看板を上に置き、文を全幅で読ませる */
@media (max-width: 479px) {
  .arrive { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .arrive__sign { width: 128px; }
}

/* 営業時間の表と、場所の表の間を詰める */
.access__place { margin-top: clamp(32px, 3vw, 40px); }

/* ---------- ゾイロス r1 の直し ---------- */
/* 空間：写真の説明文を本文の列にそろえ、縦の光の線と重ねない */
@media (max-width: 1023px) { .room figcaption { padding-left: var(--content-x); } }
@media (min-width: 1024px) { .room:first-child figcaption { padding-left: calc(var(--rail-x) + 36px); } }
/* 地図：リンクは地図の下に置き、地図の上には何も重ねない */
.map { overflow: hidden; }
/* 営業時間の注記 */
.hours__note { margin-top: 10px; font-size: 14px; color: var(--color-muted); }
.site-footer__small { font-size: 13px; }
/* 最初の画面：上端を少し暗くして、ナビの文字を天井の光から浮かせる。
   写真の明るさを見せるため、被せは文字の下だけに絞る（2026-10-28 酒井「ほんとうはもっと明るい」） */
.hero__media::after {
  background:
    linear-gradient(180deg, rgba(7, 9, 13, 0.75) 0%, rgba(7, 9, 13, 0.3) 10%, rgba(7, 9, 13, 0) 22%),
    linear-gradient(0deg, rgba(7, 9, 13, 0.95) 0%, rgba(7, 9, 13, 0.72) 28%, rgba(7, 9, 13, 0) 50%);
}
/* 背の低いスマホは文字の帯が上に来るので、下の被せを上まで延ばす（2026-10-28 ゾイロス F1） */
@media (max-width: 1023px) and (max-height: 700px) {
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(7, 9, 13, 0.75) 0%, rgba(7, 9, 13, 0.3) 10%, rgba(7, 9, 13, 0) 22%),
      linear-gradient(0deg, rgba(7, 9, 13, 0.95) 0%, rgba(7, 9, 13, 0.75) 45%, rgba(7, 9, 13, 0.35) 68%, rgba(7, 9, 13, 0) 82%);
  }
}
/* キーボードで移ったら、出てくる前の要素もすぐ見せる */
.js-reveal:focus-within { opacity: 1; transform: none; transition: none; }
/* ナビとロゴの押せる高さを 44px に（見た目は変えない） */
@media (min-width: 1024px) { .global-nav a { display: inline-flex; align-items: center; min-height: 44px; } .global-nav__cta a { min-height: 0; } }
.site-header__logo { padding-block: 14px; margin-block: -14px; }

/* ---------- AI カクテルの体験版（2026-10-28 酒井「AIカクテルの流れを再現して、AIらしさを味わえるように」） ----------
   お店のタブレットと同じ4つの問い。頼みの1文は電球色（気分の言葉と同じ扱い）、AI の手元は青い光 */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aitry { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 20px; max-width: 760px; }
.aitry__head { display: grid; gap: 6px; }
.aitry__label { font-family: var(--font-latin); font-size: 13px; letter-spacing: 0.3em; color: var(--color-cove-hi); }
.aitry__title { font-size: clamp(22px, 1.6vw + 12px, 30px); font-weight: 400; letter-spacing: 0.08em; }
.aitry__lead { color: var(--color-muted); font-size: 15px; }
.aitry__panel {
  position: relative; display: grid; gap: 22px;
  padding: clamp(22px, 3vw, 36px) clamp(18px, 3vw, 40px) clamp(24px, 3vw, 40px);
  background: var(--color-marble);
  border-top: var(--beam) solid var(--color-cove);
  box-shadow: 0 -10px 30px -18px rgba(46, 168, 255, 0.9);
}
.aitry__say {
  min-height: 3.2em; font-size: clamp(18px, 1vw + 13px, 24px); font-weight: 300; line-height: 1.6; letter-spacing: 0.06em;
  color: var(--color-bulb); text-shadow: 0 0 18px rgba(233, 184, 114, 0.3);
}
.aitry__say::before { content: "「"; }
.aitry__say::after { content: "」"; }
.aitry__body { display: grid; gap: 16px; padding-top: 18px; border-top: 1px solid var(--color-line); }
.aitry__step { display: flex; align-items: center; gap: 8px; font-family: var(--font-latin); font-size: 13px; letter-spacing: 0.16em; color: var(--color-muted); }
.aitry__count { margin-right: 6px; }
.aitry__pip { width: 22px; height: 1px; background: var(--color-line); }
.aitry__pip.is-on { background: var(--color-cove); box-shadow: 0 0 6px rgba(46, 168, 255, 0.8); }
.aitry__q { font-size: 18px; font-weight: 500; letter-spacing: 0.08em; }
.aitry__q:focus, .aitry__name:focus { outline: none; }
.aitry__row { display: grid; gap: 8px; }
.aitry__row + .aitry__row { margin-top: 6px; }
.aitry__rowlabel { font-size: 14px; color: var(--color-muted); }
.aitry__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.aitry__opt {
  min-height: 44px; padding: 8px 18px;
  font: inherit; font-size: 15px; letter-spacing: 0.06em; color: var(--color-text);
  background: transparent; border: 1px solid #4a6f91; cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s, box-shadow 0.25s;
}
.aitry__opt[aria-pressed="true"] { background: var(--color-cove); border-color: var(--color-cove); color: var(--color-accent-ink); box-shadow: 0 0 14px rgba(46, 168, 255, 0.5); }
@media (hover: hover) { .aitry__opt:hover { border-color: var(--color-cove); } }
.aitry__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 4px; }
.aitry__acts:empty { display: none; }
.aitry__back {
  min-height: 44px; padding: 0; font: inherit; font-size: 15px; letter-spacing: 0.06em;
  color: var(--color-muted); background: none; border: 0; text-decoration: underline; text-underline-offset: 5px; cursor: pointer;
}
/* 考えている間：3行が順に灯る */
.aitry__think { display: grid; gap: 14px; }
.aitry__thinkhead { font-size: 15px; letter-spacing: 0.12em; color: var(--color-cove-hi); }
.aitry__lines { display: grid; gap: 10px; }
.aitry__lines li { position: relative; padding-left: 22px; font-size: 15px; color: var(--color-muted); opacity: 0.45; transition: opacity 0.4s, color 0.4s; }
.aitry__lines li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 10px; height: 1px; background: var(--color-cove); }
.aitry__lines li.is-on { opacity: 1; color: var(--color-text); }
html.is-motion-off .aitry__lines li { opacity: 1; }
/* 一杯のカード */
.aitry__card { display: grid; gap: 14px; animation: aitry-in 0.6s var(--ease-out); }
@keyframes aitry-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.is-motion-off .aitry__card { animation: none; }
.aitry__cardlabel { font-size: 13px; letter-spacing: 0.24em; color: var(--color-cove-hi); }
.aitry__name { font-size: clamp(28px, 2vw + 18px, 40px); font-weight: 300; letter-spacing: 0.1em; line-height: 1.3; }
.aitry__msg { font-size: 16px; color: var(--color-text); }
.aitry__items { display: grid; gap: 0; border-top: 1px solid var(--color-line); }
.aitry__items li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--color-line); font-size: 15px; }
.aitry__item { min-width: 0; }
.aitry__ml { flex: none; font-family: var(--font-latin); font-size: 17px; letter-spacing: 0.06em; color: var(--color-cove-hi); }
.aitry__ml small { margin-left: 3px; font-size: 12px; color: var(--color-muted); }
.aitry__glass { font-size: 14px; color: var(--color-muted); }
.aitry__notice { font-size: 14px; color: var(--color-muted); padding-left: 12px; border-left: 1px solid var(--color-cove); }
.aitry__fine, .aitry__nojs { font-size: 13px; color: var(--color-muted); }

/* ---------- 今夜のカード（2026-10-28 酒井「タロット→一枚ひく→AI診断中→ラッキーカクテル」） ----------
   カードの裏は、光の線と交点の白い丸（このサイトの線と同じ形）。表はローマ数字と名前だけ */
.tarot { margin-top: clamp(64px, 8vw, 112px); display: grid; gap: 20px; max-width: 760px; }
.tarot__head { display: grid; gap: 6px; }
.tarot__table { display: grid; gap: 24px; }
/* 扇：全部のカードを同じ場所に置き、ずっと下の1点（--r）を軸に --a だけ回す（10-28 酒井「もっと多くずらっと扇形に」）
   --cw カードの幅／--spread 端のカードの角度／--r 軸までの距離（カードの高さの倍数） */
.tarot__deck {
  --cw: clamp(50px, 15vw, 64px); --ch: calc(var(--cw) * 1.5); --spread: 28deg; --r: 280%; --pick: 1.8;
  position: relative; width: 100%; height: calc(var(--ch) * 2.05 + 8px); perspective: 900px;
}
@media (min-width: 600px) { .tarot__deck { --cw: 92px; --spread: 32deg; --pick: 1.45; width: calc(var(--cw) * 5.8); } }
.tarot__card {
  --a: calc((var(--i) / (var(--n) - 1) - 0.5) * 2 * var(--spread));
  position: absolute; left: calc(50% - var(--cw) / 2); top: calc(var(--ch) * 0.55); width: var(--cw); z-index: calc(var(--i) + 1);
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit;
  aspect-ratio: 2 / 3; transform-origin: 50% var(--r); rotate: var(--a);
  transition: rotate 0.9s var(--ease-out) calc(var(--i) * 18ms), transform 0.35s var(--ease-out), opacity 0.4s;
}
/* 見えるまでは束ねておき、見えたら開く（JS が無いときは最初から扇） */
.js .tarot__deck:not(.is-inview) .tarot__card { rotate: 0deg; }
.tarot__card:disabled { cursor: default; }
/* 触れたカードは、自分の向きのまま外へ少し抜け出る */
@media (hover: hover) { .tarot__card:not(:disabled):hover { transform: translateY(-14px); } }
.tarot__card:focus-visible { transform: translateY(-14px); }
.tarot__in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s var(--ease-out); }
.tarot__card.is-flipped .tarot__in { transform: rotateY(180deg); }
.tarot__back, .tarot__face {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 1px solid #5a83a6; background: var(--color-marble);   /* 縁は地との明暗比 3 以上（重なった扇でも1枚ずつ見分けられる） */
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
/* 裏：左の縁に縦の光の線と、交点の白い丸。扇に重なっても左の縁は見えるので、開くと22本の光の線が放射する（ゾイロス K3） */
.tarot__back::before, .tarot__back::after { content: ""; position: absolute; left: max(5px, calc(var(--cw, 92px) * 0.11)); }
.tarot__back::after {
  top: 27%; width: 1px; height: 46%;
  background: linear-gradient(180deg, transparent, var(--color-cove) 30%, var(--color-cove) 70%, transparent);
  box-shadow: 0 0 6px rgba(46, 168, 255, 0.8);
}
.tarot__back::before {
  top: 50%; width: 5px; height: 5px; margin: -2px 0 0 -2px; border-radius: 50%; z-index: 1;
  background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(46, 168, 255, 0.8);
}
.tarot__face {
  transform: rotateY(180deg); grid-template-rows: auto 1fr auto auto; gap: 4px; padding: 14px 6px 12px; text-align: center;
  border-color: var(--color-cove); box-shadow: 0 0 18px rgba(46, 168, 255, 0.35);
}
.tarot__num { font-family: var(--font-latin); font-weight: 200; font-size: clamp(15px, 2vw, 20px); letter-spacing: 0.1em; color: var(--color-cove-hi); }
.tarot__mark { width: 30%; aspect-ratio: 1; align-self: center; border-radius: 50%; border: 1px solid var(--color-cove); box-shadow: 0 0 12px rgba(46, 168, 255, 0.6), inset 0 0 10px rgba(46, 168, 255, 0.3); }
.tarot__fname { font-size: clamp(12px, 1.4vw, 15px); letter-spacing: 0.08em; line-height: 1.4; }
.tarot__en { font-family: var(--font-latin); font-size: 10px; letter-spacing: 0.14em; color: var(--color-muted); line-height: 1.3; }
/* 引いたカードは扇の真ん中でまっすぐ起き上がり、大きくなってめくれる */
.tarot .tarot__card.is-picked { rotate: 0deg; z-index: 40; transform: translateY(calc(var(--ch) * -0.12)); transition-delay: 0s; }
.tarot .tarot__card.is-picked .tarot__in { scale: var(--pick); }
.tarot__in { transition: transform 0.8s var(--ease-out), scale 0.6s var(--ease-out); }
.is-drawn .tarot__card:not(.is-picked) { opacity: 0.25; }
html.is-motion-off .tarot__in, html.is-motion-off .tarot__card { transition: none; }
.tarot__out:empty { display: none; }
.tarot__out { padding-top: 18px; border-top: 1px solid var(--color-line); }
.tarot__result { display: grid; gap: 22px; animation: aitry-in 0.6s var(--ease-out); }
html.is-motion-off .tarot__result { animation: none; }
.tarot__reading { font-size: clamp(18px, 1vw + 13px, 22px); font-weight: 300; line-height: 1.75; letter-spacing: 0.06em; }
.tarot__reading:focus { outline: none; }
/* 写真は狭い画面で上に大きく、600px 以上で左に 240px（10-28 酒井「メニュー画像が小さい」で 132→240）。正方形のまま＝3倍の画面でも 960 の原本を引き伸ばさない */
.tarot__drink { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; }
@media (min-width: 600px) { .tarot__drink { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 24px; } }
.tarot__drink img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 -2px 0 0 var(--color-cove), 0 -10px 30px -12px rgba(46, 168, 255, 0.8); }
.tarot__drink figcaption { display: grid; gap: 6px; min-width: 0; }
.tarot__drinkname { font-size: 19px; letter-spacing: 0.06em; color: var(--color-text); line-height: 1.5; }
.tarot__drinktext { font-size: 14px; color: var(--color-muted); line-height: 1.8; }
/* ゾイロス r1 の直し：320px で枠からはみ出さない（A2）・カードの表の英名を狭い画面では出さない（A3）・広い画面ではカードと読み解きを横に並べる */
.aitry, .aitry__panel, .aitry__body { min-width: 0; }
@media (max-width: 400px) {
  .tarot__en { display: none; }
  .tarot__face { padding: 10px 4px 8px; }
  .tarot__fname { letter-spacing: 0.02em; }
}
/* 扇（534px）と結果を横に並べるのは 1280px から。1024〜1279 は結果が細くなりはみ出したので、扇の下に置く（ゾイロス K1） */
@media (min-width: 1024px) { .tarot { max-width: none; } }
@media (min-width: 1280px) {
  .tarot__table { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 48px; }
  .tarot__out { padding-top: 0; border-top: 0; }
}

/* ---------- モーショングラフィックス（2026-10-28 夜 酒井「スライドインだけではしょぼい・モーショングラフィックス×バーらしさ」） ----------
   1. 章の見出し：天井の光が左から文字をなぞって灯す
   2. 体験版のグラス：氷が落ち、光が読み、材料が色の層で注がれ、ひと混ぜで1色にほどけ、泡が上がる
   3. 今夜のカード：めくった表を光が横切り、一杯の写真は液面が下から満ちて現れる
   どれも is-motion-off では最後の状態をすぐ出す */

/* 1. 見出しの光 */
.js .js-light {
  background: linear-gradient(90deg, var(--color-text) 0 40%, #fff 45%, var(--color-cove-hi) 48%, rgba(230, 235, 240, 0.14) 54%, rgba(230, 235, 240, 0.14) 100%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.js .js-light.is-inview { animation: light-run 2.2s cubic-bezier(0.45, 0, 0.25, 1) 0.25s forwards; }
@keyframes light-run { to { background-position: 0 0; } }
html.is-motion-off .js-light { background-position: 0 0; }

/* 2. グラス */
.aitry__stage { display: grid; justify-items: center; gap: 10px; position: relative; }
html:not(.js) .aitry__stage { display: none; }
.cup { width: auto; height: clamp(200px, 26vw, 340px); overflow: visible; filter: drop-shadow(0 0 6px rgba(46, 168, 255, 0.28)); transition: filter 1s; }
.aitry__stage.is-done .cup { filter: drop-shadow(0 0 8px rgba(46, 168, 255, 0.45)); }
/* グラスの下のカウンター：細い光の線 */
.aitry__stage::after {
  content: ""; width: min(260px, 80%); height: 1px; margin-top: -6px;
  background: linear-gradient(90deg, transparent, var(--color-cove) 30%, var(--color-cove-hi) 50%, var(--color-cove) 70%, transparent);
  box-shadow: 0 0 10px rgba(46, 168, 255, 0.7);
}
.aitry__stagecap { font-size: 14px; color: var(--color-muted); text-align: center; order: 2; }
.aitry__stage:not([data-phase="ask"]) .aitry__stagecap { display: none; }

.glass__shape { fill: none; stroke: var(--color-cove-hi); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; opacity: 0; transition: opacity 0.5s; }
[data-glass="long"] .glass__shape--long, [data-glass="short"] .glass__shape--short { opacity: 0.75; }
.glass__glint { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; opacity: 0; transition: opacity 0.8s; }
[data-glass="long"].is-done .glass__glint { opacity: 0.45; }

.glass__layer, .glass__mix, .glass__cube, .glass__bubble, .glass__scan, .glass__spoon, .glass__stream, .glass__surface { transform-box: fill-box; }
.glass__layer { opacity: 0.88; transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.4, 1); }
.glass__layer.is-on { transform: scaleY(1); }
.glass__mix { opacity: 0; transition: opacity 1s ease-in-out; }
.is-mixed .glass__mix { opacity: 1; }
.glass__surface { fill: var(--color-cove-hi); opacity: 0; transition: opacity 0.8s; }
.is-done .glass__surface { opacity: 0.9; }

/* 注ぐ線：瓶の口から液面まで */
.glass__stream { stroke-width: 2; stroke-linecap: round; opacity: 0; transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.25s ease-out, opacity 0.2s; }
.glass__stream.is-on { opacity: 0.9; transform: scaleY(1); }

/* 氷：考え中に上から落ちてくる */
.glass__cube rect { fill: rgba(230, 245, 255, 0.1); stroke: rgba(230, 245, 255, 0.6); stroke-width: 1; transition: fill 0.6s, stroke 0.6s; }
/* 液に入った氷は、液の色が透けて見える */
[data-phase="pour"] .glass__cube rect, [data-phase="done"] .glass__cube rect { fill: rgba(255, 255, 255, 0.16); stroke: rgba(255, 255, 255, 0.45); }
.glass__ice { display: none; }
.is-ice .glass__ice { display: inline; }
.glass__cube { transform: translateY(-230px); }
.is-ice .glass__cube { animation: ice-drop 0.75s cubic-bezier(0.3, 1.35, 0.5, 1) var(--d) forwards; }
@keyframes ice-drop { from { transform: translateY(-230px); } to { transform: none; } }

/* AI が読む光：グラスを上から下へなぞる */
.glass__scan { fill: var(--color-cove-hi); opacity: 0; }
.is-think .glass__scan { animation: glass-scan 1.15s cubic-bezier(0.6, 0, 0.4, 1) 0.5s infinite; }
@keyframes glass-scan { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(205px); opacity: 0; } }

/* バースプーン：ひと混ぜ */
.glass__spoon { opacity: 0; transition: opacity 0.3s; }
.glass__spoon line { stroke: #cfd8e0; stroke-width: 1.4; stroke-linecap: round; }
.glass__spoon line.glass__twist { stroke-dasharray: 2 1.4; }   /* 柄のねじり */
.glass__spoon ellipse { fill: #cfd8e0; }
/* グラスの内側をなぞって1周：左右の行き来に、奥へ回るときの細りを重ねる */
.is-stir .glass__spoon { opacity: 1; animation: stir 0.6s linear 2.5; transform-origin: 50% 0; }
@keyframes stir {
  0% { transform: translateX(0) scaleX(1); } 25% { transform: translateX(6px) scaleX(0.92); }
  50% { transform: translateX(0) scaleX(1); } 75% { transform: translateX(-6px) scaleX(0.92); } 100% { transform: translateX(0) scaleX(1); }
}

/* 炭酸の泡 */
.glass__bubble { fill: #fff; opacity: 0; }
.is-fizz .glass__bubble { animation: fizz var(--t) ease-in var(--d) infinite; }
@keyframes fizz { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 0.75; } 90% { opacity: 0.5; } 100% { transform: translateY(var(--rise)); opacity: 0; } }

/* 材料の行：注がれた材料から灯る */
.aitry__card.is-pouring .aitry__items li { opacity: 0.28; transition: opacity 0.4s; }
.aitry__card.is-pouring .aitry__items li.is-on { opacity: 1; }
.aitry__items li.is-on .aitry__ml { animation: ml-glow 0.9s ease-out; }
@keyframes ml-glow { from { text-shadow: 0 0 12px var(--color-cove); } to { text-shadow: none; } }

/* 置き場所：狭い画面はパネルの中（問いのあいだは隠す）、広い画面は体験版の右 */
@media (max-width: 1023px) {
  .aitry__stage[data-phase="ask"] { display: none; }
  .aitry__stage { padding-block: 4px 8px; }
  .cup { height: 200px; }
}
@media (min-width: 1024px) {
  .aitry { max-width: none; grid-template-columns: minmax(0, 720px) minmax(260px, 1fr); column-gap: clamp(40px, 5vw, 88px); }
  .aitry > *:not(.aitry__stage) { grid-column: 1; }
  .aitry__stage { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* 3. 今夜のカード */
.tarot__face { overflow: hidden; }
.tarot__face::after {
  content: ""; position: absolute; inset: -20% auto -20% 0; width: 1px;   /* サイトの言葉＝1px の光の線（ゾイロス r1 Z4） */
  background: var(--color-cove-hi); box-shadow: 0 0 12px 2px rgba(46, 168, 255, 0.7);
  transform: translateX(-120%) skewX(-12deg); opacity: 0; pointer-events: none;
}
.tarot__card.is-flipped .tarot__face::after { animation: card-sweep 1.1s ease-out 0.55s; }
@keyframes card-sweep { 0% { transform: translateX(-12px) skewX(-12deg); opacity: 1; } 100% { transform: translateX(260px) skewX(-12deg); opacity: 1; } }
.is-drawn .tarot__card.is-flipped .tarot__mark { animation: mark-breathe 1.4s ease-in-out 0.8s 2; }
@keyframes mark-breathe { 50% { box-shadow: 0 0 26px rgba(46, 168, 255, 0.95), inset 0 0 18px rgba(46, 168, 255, 0.6); } }

.tarot__pour { position: relative; display: block; overflow: hidden; box-shadow: 0 -2px 0 0 var(--color-cove), 0 -10px 30px -12px rgba(46, 168, 255, 0.8); }
.tarot__drink .tarot__pour img { box-shadow: none; animation: pour-rise 1.5s cubic-bezier(0.5, 0, 0.2, 1) 0.15s both; }
.tarot__pour::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--color-cove-hi) 0 1px, rgba(46, 168, 255, 0.28) 1px, transparent 22px);
  transform: translateY(100%); opacity: 0;
  animation: pour-surface 1.5s cubic-bezier(0.5, 0, 0.2, 1) 0.15s both;
}
@keyframes pour-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pour-surface { 0% { transform: translateY(100%); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@media (max-width: 599px) { .tarot__pour { width: 100%; max-width: 300px; } }   /* min() だと WebKit で親の幅を押し広げた（ゾイロス K1） */
.tarot__pour img { display: block; }

/* ---------- 最初の画面の店名まわり（2026-10-28 酒井「ロゴの部分、配置が悪い」） ----------
   「福井・片町の会員制バー」が MEMBERS ONLY BAR に詰まり、左寄せで中央の英字とずれていた。
   広い画面では、店名・英字・この一行を1つの塊として中央でそろえ、間に短い光の線を挟む。
   左の店名と右の文の塊は、上下の中央でそろえる */
@media (min-width: 1024px) {
  .hero__inner { align-items: center; }
  .hero__title { width: min(500px, 100%); gap: 22px; justify-items: center; }
  .hero__kicker { display: grid; justify-items: center; gap: 18px; text-align: center; letter-spacing: 0.32em; padding-left: 0.32em; }
  .hero__kicker::before {
    content: ""; width: 40px; height: 1px; background: var(--color-cove);
    box-shadow: 0 0 6px rgba(46, 168, 255, 0.8);
  }
}
@media (max-width: 1023px) { .hero__title { gap: 18px; } }

/* ---------- 今夜のカード：独立した章（2026-10-28 酒井「AIカクテルの続きで目立たない」） ----------
   お酒の章（一段明るい大理石の面）のあとに、夜の黒の面で区切って始める */
.fortune .entrance { padding-top: clamp(48px, 4vw, 56px); }
.fortune__head { display: grid; gap: 20px; }
@media (min-width: 1024px) { .fortune__head { grid-template-columns: auto minmax(0, 1fr); gap: 72px; align-items: end; } }
.fortune__title { font-size: clamp(30px, 3vw + 12px, 56px); font-weight: 400; line-height: 1.4; letter-spacing: 0.06em; }
.fortune__lead { color: var(--color-muted); max-width: 24em; padding-bottom: 0.6em; }
.fortune .tarot { margin-top: clamp(36px, 4vw, 56px); }

/* ご来店まで：本筋は「会員の方と一度ご来店」。問い合わせは、来られない場合の脇道 */
.flow__note { margin-top: 24px; color: var(--color-muted); font-size: 15px; }
.flow__note a { color: var(--color-cove-hi); text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) { .flow__note a:hover { color: var(--color-text); } }

/* ============================================================
   下層ページ（お問い合わせ・送信完了・プライバシーポリシー）2026-10-28
   トップと同じ「光の線」：ヘッダーの下で横の線が灯り、縦の線がフォームに沿って下りる
   ============================================================ */
:root {
  --sub-top: clamp(96px, 11vw, 132px);   /* ヘッダーの下、線が灯る高さ */
  --color-error: #ff9d9d;                /* 入力の誤り：地に対して 8:1 以上 */
}
.sub { padding-top: var(--sub-top); }
.p-sub .rail { top: var(--sub-top); }
.sub .entrance { padding-top: clamp(48px, 5vw, 64px); }
.sub__title { font-size: clamp(34px, 6vw + 4px, 80px); font-weight: 300; line-height: 1.2; letter-spacing: 0.06em; }
.sub__title--sm { font-size: clamp(22px, 3.4vw + 10px, 52px); font-weight: 400; line-height: 1.45; }
.sub__body { display: grid; gap: 16px; justify-items: start; margin-top: clamp(28px, 3vw, 40px); }
.sub__body .button { margin-top: 20px; }
.sub--short { min-height: 72vh; }

/* お問い合わせ：狭い画面は案内→フォーム、広い画面は左に案内・右にフォーム */
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: clamp(36px, 4vw, 56px); }
@media (min-width: 1024px) {
  .contact { grid-template-columns: minmax(0, 340px) minmax(0, 640px); gap: clamp(56px, 7vw, 112px); align-items: start; }
  .contact__aside { position: sticky; top: 120px; }
}
.contact__aside { display: grid; gap: 16px; }
.contact__muted { color: var(--color-muted); }
.contact__notes { display: grid; margin-top: 12px; border-top: 1px solid var(--color-line); font-size: 15px; }
.contact__notes div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
.contact__notes dt { color: var(--color-cove-hi); letter-spacing: 0.12em; }
.contact__notes dd { margin: 0; color: var(--color-muted); }

/* フォーム */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.form__summary { padding: 14px 18px; border-left: 2px solid var(--color-error); background: rgba(255, 157, 157, 0.06); color: var(--color-error); font-size: 15px; }
.field { display: grid; gap: 10px; border: 0; padding: 0; min-width: 0; }
.field__label { display: flex; align-items: baseline; gap: 12px; padding: 0; font-size: 15px; letter-spacing: 0.1em; }
.field__req, .field__opt { font-size: 12px; letter-spacing: 0.14em; }
.field__req { color: var(--color-cove-hi); }
.field__opt { color: var(--color-muted); }
.field__hint { font-size: 13px; color: var(--color-muted); }
.field__error { font-size: 14px; color: var(--color-error); }

/* 入力欄：罫線1本。触れると線が左から灯る */
.field__box { position: relative; display: block; }
.field__box::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--beam);
  background: linear-gradient(90deg, var(--color-cove-hi), var(--color-cove) 40%);
  box-shadow: var(--glow);
  transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease-out);
  pointer-events: none;
}
.field__box:focus-within::after { transform: scaleX(1); }
.field__input {
  display: block; width: 100%; min-height: 52px; padding: 12px 2px;
  border: 0; border-bottom: 1px solid #3a4a5c; border-radius: 0;
  background: transparent; color: var(--color-text);
  font: inherit; font-size: 17px; letter-spacing: 0.04em;
  -webkit-appearance: none; appearance: none;
}
.field__input--area { min-height: 200px; padding: 14px 16px; border: 1px solid #3a4a5c; resize: vertical; line-height: 1.8; }
.field__input:focus { outline: none; }
.field__input:focus-visible { outline: none; }
.field__input[aria-invalid="true"] { border-color: var(--color-error); }

/* ご用件：3つから1つ。選ぶと縁が灯る */
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 20px 10px 16px;
  border: 1px solid #3a4a5c; font-size: 15px; letter-spacing: 0.06em; cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s, color 0.3s;
}
.choice span::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--color-muted); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.choice input:checked + span { border-color: var(--color-cove); color: var(--color-text); box-shadow: 0 0 14px rgba(46, 168, 255, 0.3), inset 0 0 12px rgba(46, 168, 255, 0.1); }
.choice input:checked + span::before { background: #fff; border-color: #fff; box-shadow: 0 0 6px #fff, 0 0 14px var(--color-cove); }
.choice input:focus-visible + span { outline: 2px solid var(--color-cove); outline-offset: 4px; }
@media (hover: hover) { .choice span:hover { border-color: rgba(46, 168, 255, 0.7); } }
.field[data-invalid] .choice span { border-color: rgba(255, 157, 157, 0.6); }

/* 同意 */
.consent { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; font-size: 15px; }
.consent input { flex: none; width: 22px; height: 22px; margin-top: 3px; accent-color: var(--color-cove); cursor: pointer; }
.consent a { color: var(--color-cove-hi); text-underline-offset: 4px; }

/* 送信 */
.form__send { display: grid; gap: 16px; justify-items: start; padding-top: 8px; }
.form__send .button { cursor: pointer; font-family: inherit; }
.form__send .button[disabled] { opacity: 0.55; cursor: progress; }
.form__status { font-size: 14px; color: var(--color-muted); min-height: 1.6em; }
.form__status.is-error { color: var(--color-error); }

/* 人には見えない欄（自動送信よけ） */
.form__trap { position: absolute; left: -9999px; width: 24em; height: 1px; overflow: hidden; }   /* 幅を持たせて1文字ずつ折れないように */

/* プライバシーポリシー：読みものの幅 */
.policy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 46em; margin-top: clamp(36px, 4vw, 56px); }
.policy__lead { color: var(--color-text); }
.policy__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.policy__item h2 { font-size: 18px; font-weight: 500; letter-spacing: 0.08em; color: var(--color-cove-hi); }
.policy__item p, .policy__item li { color: var(--color-muted); }
.policy__item ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.policy__item li { position: relative; padding-left: 1.2em; }
.policy__item li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 0.6em; height: 1px; background: var(--color-cove); }
.policy__who { display: grid; border-top: 1px solid var(--color-line); font-size: 15px; }
.policy__who div { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
.policy__who dt { color: var(--color-muted); letter-spacing: 0.12em; }
.policy__who dd { margin: 0; }
.policy__who a { color: var(--color-cove-hi); text-underline-offset: 4px; }

html.is-motion-off .field__box::after { transition: none; }

/* 2回目の調整：同意の欄を他の欄と同じ細い線に・狭い画面ではご用件を縦にそろえる */
.consent input {
  -webkit-appearance: none; appearance: none; position: relative;
  border: 1px solid #5a6b7e; background: transparent; border-radius: 0;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.consent input:checked {
  border-color: var(--color-cove); background: var(--color-cove);
  box-shadow: 0 0 12px rgba(46, 168, 255, 0.5);
}
.consent input:checked::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid var(--color-accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.consent input[aria-invalid="true"] { border-color: var(--color-error); }
@media (max-width: 479px) {
  .choices { display: grid; grid-template-columns: minmax(0, 1fr); }
  .choice span { display: flex; }
}
.form__status:focus { outline: none; }
.form__status:focus-visible { outline: 2px solid var(--color-cove); outline-offset: 4px; }
/* 項目名が2行に折れても「必須／任意」の札が文の直後に続くように（flex だと札が右端へ離れた） */
.field__label { display: block; }
.field__req, .field__opt { margin-left: 12px; white-space: nowrap; }
/* 本人が打つ文は文節の区切りが無いので、ふつうの折り返しに戻す（keep-all のままだと「。」が行頭に落ちた・ゾイロス r3 別便） */
.field__input { word-break: normal; }