@charset "UTF-8";
/* ==========================================================================
   ASTEEDA Executive Salon 2026 — サテライトLP
   モバイルファースト。基準値はSPカンプ（390px）、PCカンプ（1280px）へclampで伸ばす。
   中間幅（768〜1023px）は両者の補間。
   ========================================================================== */

/* ==========================================================================
   1. Reset & Base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text-body);
  font-family: var(--font-jp);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
hr { border: 0; margin: 0; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--sunset); }

:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--bg-raised);
  color: var(--text-hi);
}
.skip-link:focus { left: 16px; top: 16px; }

/* ==========================================================================
   2. Utilities（design/ds/tokens/utilities.css・layout.css より書き起こし）
   ========================================================================== */

/* --- レイアウト --- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
}

/* 文字が乗る面。フローフォームより必ず上に置く */
.content-well { position: relative; z-index: 2; }

/* 斜めのセクション境界。LP全体で②と⑧の2箇所のみ */
.cut-t { clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); }

/* --- 背景。単色ベタにはしない --- */
.field-vertical { background: linear-gradient(180deg, var(--bg-deep), var(--bg-base)); }
.field-vertical-rev { background: linear-gradient(180deg, var(--bg-base), var(--bg-deep)); }
.field-dual {
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(90, 10, 26, 0.55), transparent 55%),
    radial-gradient(120% 90% at 95% 100%, rgba(24, 32, 110, 0.5), transparent 55%),
    linear-gradient(160deg, #0c0f1e, var(--bg-deep) 55%, #0a0e1a);
}
.blackout { background: var(--bg-black); }

/* --- 45°ストリーク＋グレイン。全面に重ねる --- */
.streaks { position: relative; }
.streaks::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../assets/img/streaks.webp") 0 0 / 1100px 1100px;
  opacity: 0.5;
  pointer-events: none;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../assets/img/grain.webp") 0 0 / 320px 320px;
  pointer-events: none;
}

/* 見出し系はすべて約物半角。「、」「。」の前後に空くアキが消えて行が締まる。
   本文・リード・注記には掛けない（長文は全角アキがある方が読みやすい） */
.h1, .h2, .h3,
.block-title,
.layers__heading,
.thing__title,
.return-card__title,
.venue__name,
.faq__question,
.timeline__punch-text,
.reality__punch {
  font-family: var(--font-jp-heading);
}

/* --- 見出し。詰めて組む --- */
.h1, .h2, .h3 {
  font-family: var(--font-jp-heading);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-hi);
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); font-weight: 700; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-body);
  max-width: 60ch;
  text-wrap: pretty;
}

/* --- 暖色グラデ文字。1画面1箇所まで --- */
.text-heat {
  background: var(--grad-heat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- アクセント発光。暗転時の強調のみ --- */
.accent-glow { color: var(--accent-hi); text-shadow: var(--glow-accent); }

/* --- ラベル・数字 --- */
.label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: 500;
}
.num {
  font-family: var(--font-num);
  letter-spacing: var(--ls-num);
  font-variant-numeric: tabular-nums;
}
/* 特大数字＋暖色グラデ。1画面1箇所まで（DS utilities.css の num-display） */
.num-display {
  font-family: var(--font-num);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: var(--ls-num);
  background: var(--grad-heat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- 罫・バー --- */
.accent-bar {
  display: block;
  width: var(--accent-bar-w);
  height: var(--accent-bar-h);
  background: var(--grad-heat);
  border-radius: 2px;
}
.heat-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37 18%, #ff8a1e 50%, #c8102e 82%, transparent);
  opacity: 0.85;
}

/* --- グラスカード --- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
}

/* --- ゴーストテキスト。1セクション1語まで。視認できる濃さで置く --- */
.ghost-word {
  position: absolute;
  z-index: 1;
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: var(--ghost-stroke-w) var(--ghost-stroke);
  letter-spacing: 0.04em;
  line-height: 0.82;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  font-size: min(var(--ghost-size, 220px), var(--ghost-cap, 42vw));
  /* 四辺を溶かす。セクション端で切られても硬い断面が出ない */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.ghost-word--gold { -webkit-text-stroke-color: var(--ghost-stroke-gold); }

/* --- フローフォーム。対角配置。文字の上には絶対に重ねない ---
   濃さは opacity ではなく --flow-opacity で指定する。
   揺らぎのキーフレームがこの値を基準に呼吸させるため、直接 opacity を書くと壊れる */
.flow {
  position: absolute;
  z-index: 0;
  width: var(--w);
  top: auto;
  pointer-events: none;
  user-select: none;
  opacity: var(--flow-opacity, 1);
}

/* --- 素材（実写・バナー）：濃紺グラデ上掛け --- */
.media { position: relative; overflow: hidden; border-radius: var(--radius); }
.media > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.04); }
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--overlay-photo);
  pointer-events: none;
}
.media--placeholder { background: linear-gradient(150deg, #22355c, #0c1425); }

/* --- 入場アニメーション --- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.rise-in { opacity: 0; }
.rise-in.is-in { animation: rise-in var(--dur-enter) var(--ease-enter) both; }

@keyframes live-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(53, 199, 232, 0.5); }
  50% { opacity: 0.35; box-shadow: 0 0 2px rgba(53, 199, 232, 0.2); }
}
/* 漂い＋呼吸。動かすのは transform と opacity のみ（GPU合成に載る）。
   filter / blur は使わない — SPで確実に重くなる。

   移動方向はセクションごとに --drift-x / --drift-y で指定し、必ず**画面外側**へ向ける。
   0%が現在位置なので、動いてもコピーへ寄ることが無い（HARD RULE 8）。
   周期と位相は暖色・寒色でずらす。揃うと機械的に見える */
@keyframes flow-drift {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: calc(var(--flow-opacity, 1) * 0.78);
  }
  50% {
    transform:
      translate3d(var(--drift-x, 34px), var(--drift-y, -44px), 0)
      rotate(var(--drift-r, 1.1deg))
      scale(1.04);
    opacity: var(--flow-opacity, 1);
  }
}
.flow-drift {
  animation: flow-drift var(--drift-dur, 22s) ease-in-out infinite;
  animation-delay: var(--drift-delay, 0s);
}

/* ==========================================================================
   3. Components
   ========================================================================== */

/* --- Button。CTAは #C8102E 単色塗りのみ。ホバーで金の縁光、押下で変形させない --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-jp);
  font-weight: 700;
  line-height: 1.4;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn--lg { padding: 16px 44px; font-size: 17px; }
.btn--md { padding: 11px 28px; font-size: 15px; }

.btn--cta { background: var(--cta-bg); color: #fff; box-shadow: var(--shadow-card); }
.btn--cta:hover,
.btn--cta:focus-visible { color: #fff; box-shadow: 0 0 0 1px var(--gold), var(--glow-gold-strong); }

.btn--secondary {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text-body);
  border-color: var(--glass-border);
}
.btn--secondary:hover,
.btn--secondary:focus-visible { color: var(--text-body); border-color: rgba(212, 175, 55, 0.6); box-shadow: var(--glow-gold); }

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}
.badge__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal-2);
  animation: live-blink 1.6s ease-in-out infinite;
}
.badge--live { border: 1px solid rgba(53, 199, 232, 0.35); color: var(--text-hi); background: rgba(10, 14, 26, 0.4); }
.badge--accent {
  border: 1px solid rgba(255, 212, 0, 0.55);
  color: var(--accent-hi);
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 18px rgba(255, 212, 0, 0.16);
  white-space: nowrap;
}

/* --- ブロック見出し（セクション内の小見出し） --- */
.block-title {
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 900;
  color: var(--text-hi);
  letter-spacing: -0.025em;
  line-height: 1.35;
}
.block-label { font-size: 12px; color: var(--text-dim); }

/* --- セクション見出しブロック（label / h2 / bar / lead） --- */
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sec-head__label { font-size: 11px; color: var(--gold); }
.sec-head__title { font-size: clamp(36px, 5vw, 64px); line-height: 1.15; letter-spacing: -0.035em; }
.sec-head__lead { margin-top: 4px; }

@media (min-width: 768px) {
  .sec-head { gap: 20px; }
  .sec-head__label { font-size: 13px; }
  .sec-head__title { line-height: 1.1; }
}
@media (min-width: 1024px) {
  .sec-head__lead { max-width: 660px; }
}

/* ==========================================================================
   4. Nav
   ========================================================================== */
.nav {
  position: relative;
  z-index: 30;
  background: rgba(10, 14, 26, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(232, 236, 244, 0.08);
}
.nav__bar {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: 16px;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
}
.nav__mark { font-size: 10px; color: var(--text-hi); min-width: 0; overflow: hidden; }
.nav__right { display: flex; align-items: center; gap: 32px; }
.nav__date { font-size: 10px; color: var(--text-dim); letter-spacing: 0.06em; white-space: nowrap; }
/* CTAはPCのみヘッダー。SPは下部固定バーが担う */
.nav__cta { display: none; }

@media (min-width: 1024px) {
  .nav { background: rgba(10, 14, 26, 0.78); }
  .nav__bar { padding-inline: var(--gutter); }
  .nav__mark { font-size: 14px; }
  .nav__date { font-size: 13px; }
  .nav__cta { display: inline-flex; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .nav__bar { padding-inline: var(--gutter); }
  .nav__mark { font-size: 12px; }
  .nav__date { font-size: 12px; }
}

/* ==========================================================================
   5. ① First view
   ========================================================================== */
.fv { padding: 28px 0 80px; }   /* 上はSPのみ44→28px。ナビとバッジの間が空きすぎていた */
/* 右上に置くので、揺らぎは右上（＝画面外）へ逃がす */
.fv__flow-heat {
  --w: clamp(470px, 73.44vw, 940px);
  top: calc(var(--w) * -0.2);
  right: calc(var(--w) * -0.2);
  --drift-x: 38px;
  --drift-y: -46px;
  --drift-dur: 22s;
}
/* 左下なので左下へ。暖色と周期・位相をずらす */
.fv__flow-signal {
  --w: clamp(430px, 60.94vw, 780px);
  bottom: calc(var(--w) * -0.2);
  left: calc(var(--w) * -0.2);
  --flow-opacity: 0.7;
  --drift-x: -34px;
  --drift-y: 40px;
  --drift-r: -1deg;
  --drift-dur: 28s;
  --drift-delay: -7s;
}
/* フローフォームの上に暗幕を敷き、コピーが乗る左側を暗部に保つ */
.fv__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(10, 14, 26, 0.9) 0%, rgba(10, 14, 26, 0.72) 42%, rgba(10, 14, 26, 0.34) 70%, transparent 92%);
}

.fv__badge {
  margin-bottom: 28px;
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: none;
  font-family: var(--font-jp);
  align-items: flex-start;
  gap: 9px;
  padding: 9px 12px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-color: var(--glass-border);
}
.fv__badge .badge__dot { width: 7px; height: 7px; margin-top: 5px; }

.fv__title {
  font-size: clamp(46px, 10.31vw, 132px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin-bottom: 26px;
}

.fv__body { display: flex; flex-direction: column; align-items: flex-start; }
.fv__lead { margin-bottom: 30px; }

.fv__date { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.fv__date-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fv__date-main { font-size: clamp(20px, 2.34vw, 30px); font-weight: 700; color: var(--text-hi); }
.fv__date-sub { font-size: 12px; color: var(--gold); }
.fv__date-bar { display: block; width: 64px; height: 2px; background: var(--grad-heat); border-radius: 2px; }

.fv__cta { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; }
.fv__note { font-size: 11.5px; color: var(--text-dim); line-height: 1.7; }

@media (min-width: 768px) {
  .fv { padding: 64px 0 116px; }
  .fv__badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 34px;
    padding: 6px 14px;
    font-size: 12px;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    background: rgba(10, 14, 26, 0.4);
    border-color: rgba(53, 199, 232, 0.35);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .fv__badge .badge__dot { width: 8px; height: 8px; margin-top: 0; }
  .fv__title { letter-spacing: -0.045em; line-height: 1.02; margin-bottom: 44px; }
  .fv__body { gap: 30px; max-width: 700px; }
  .fv__lead { margin-bottom: 0; max-width: 470px; }
  .fv__date { gap: 12px; margin-bottom: 0; }
  .fv__date-sub { font-size: var(--fs-sub); }
  .fv__date-bar { width: 96px; }
  .fv__cta { flex-direction: row; align-items: center; gap: 24px; flex-wrap: wrap; width: auto; }
  .fv__note { font-size: var(--fs-sub); max-width: 270px; line-height: 1.75; }
}
@media (min-width: 1024px) {
  .fv { padding: 88px 0 152px; }
  .fv__veil {
    background: linear-gradient(100deg, rgba(10, 14, 26, 0.95) 0%, rgba(10, 14, 26, 0.88) 38%, rgba(10, 14, 26, 0.42) 66%, transparent 88%);
  }
}

/* ==========================================================================
   6. ② Reality（暗転①）
   ========================================================================== */
.reality {
  margin-top: calc(var(--cut) * -1);
  padding: 64px 0 96px;
}
.reality__venues { display: flex; flex-direction: column; gap: 12px; }
.reality__venues-label { font-size: 10px; color: var(--text-dim); }
.reality__venues-list { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.reality__city {
  font-size: clamp(23px, 2.66vw, 34px);
  font-weight: 900;
  color: var(--text-hi);
  letter-spacing: -0.02em;
}
.reality__slash { font-size: clamp(14px, 1.56vw, 20px); color: rgba(212, 175, 55, 0.7); }
.reality__more { font-size: 11px; color: var(--text-dim); }
.reality__rule { margin-top: 24px; }

.reality__main { margin-top: 88px; display: flex; flex-direction: column; gap: 28px; }
.reality__title { font-size: clamp(42px, 7.19vw, 92px); line-height: 1.1; letter-spacing: -0.04em; }
.reality__text { display: flex; flex-direction: column; gap: 16px; }
.reality__text p { font-size: var(--fs-lead); line-height: 1.9; }
.reality__punch {
  margin-top: 6px;
  font-size: clamp(21px, 2.03vw, 26px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .reality { padding: 96px 0 148px; }
  .reality__venues { flex-direction: row; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
  .reality__venues-label { font-size: 12px; padding-bottom: 10px; }
  .reality__venues-list { gap: 18px; }
  .reality__more { font-size: 14px; padding-bottom: 8px; margin-left: 8px; }
  .reality__rule { margin-top: 40px; }
  .reality__main {
    margin-top: 150px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: start;
  }
  .reality__title { grid-column: 1 / 8; line-height: 1.06; }
  .reality__text { grid-column: 6 / 13; padding-top: 20px; gap: 22px; }
  .reality__text p { font-size: 17px; }
  .reality__punch { margin-top: 8px; }
}
@media (min-width: 1024px) {
  .reality { padding: 128px 0 200px; }
  .reality__main { margin-top: 200px; }
  /* カンプ準拠：各段落を1行で組む。列幅より広く取り、右端をコンテンツ幅に揃える */
  .reality__text { grid-column: 8 / 13; justify-self: end; width: 493px; }
}

/* ==========================================================================
   7. ③ Solution — 二層構造
   ========================================================================== */
.solution { padding: 80px 0 88px; }
/* 右下なので右下へ */
.solution__flow {
  --w: clamp(420px, 59.38vw, 760px);
  bottom: calc(var(--w) * -0.2);
  right: calc(var(--w) * -0.2);
  --flow-opacity: 0.45;
  --drift-x: 32px;
  --drift-y: 38px;
  --drift-r: -0.9deg;
  --drift-dur: 26s;
  --drift-delay: -11s;
}
.solution__ghost {
  --ghost-size: 120px;
  --ghost-cap: 62vw;
  right: -14px;
  top: 44px;
}

.layers { margin-top: 44px; }

.layers__top { padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.layers__top-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.layers__heading {
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 900;
  color: var(--text-hi);
  letter-spacing: -0.025em;
  line-height: 1.35;
}
.layers__desc { font-size: 13px; color: var(--text-dim); line-height: 1.7; }
.layers__media { height: 118px; }
/* 建物を見せるため上部は浅く。共通の --overlay-photo（0.35→0.75）だと会場が沈む。
   下端だけ深くしてキャプション「Main venue / Okinawa」の可読性を確保する
   （0.18→0.45 の線形だと明るいガラス面に文字が溶ける） */
.layers__media::after {
  background: linear-gradient(180deg,
    rgba(16, 27, 51, 0.18) 0%,
    rgba(10, 14, 26, 0.36) 62%,
    rgba(10, 14, 26, 0.72) 100%);
}
.media__caption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 3;
  font-size: 9.5px;
  color: var(--text-dim);
}

/* 上下カードを結ぶ接続線は縦1本のみ */
.layers__link {
  height: 72px;
  padding-left: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.layers__line {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(46, 107, 255, 0.05), rgba(53, 199, 232, 0.85));
  position: relative;
}
.layers__line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--signal-2);
  box-shadow: var(--glow-signal);
}
.layers__link-label { font-size: 10px; color: var(--text-dim); }

.layers__bottom {
  background: var(--bg-raised);
  border: 1px solid rgba(232, 236, 244, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px 20px 24px;
}
.layers__bottom-head { display: flex; flex-direction: column; gap: 8px; }

/* チップは5個（都市4＋and more）。名古屋を戻して6個にするときは
   SPの and more の span と、768px以上の列数 5→6 を元に戻す */
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.chips__item {
  border: 1px solid rgba(232, 236, 244, 0.16);
  border-radius: var(--radius);
  padding: 12px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-hi);
}
.chips__item--more {
  grid-column: span 2;   /* 最終行の端を余らせない（3列 × 5個） */
  border-style: dashed;
  border-color: rgba(232, 236, 244, 0.18);
  padding: 15px 0;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dim);
}

@media (min-width: 768px) {
  .solution { padding: 112px 0 108px; }
  .solution__ghost { --ghost-size: 210px; right: -22px; top: 70px; }
  .layers { margin-top: 72px; }
  .layers__top {
    padding: 34px 36px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .layers__media { flex: 0 0 300px; height: 168px; }
  .media__caption { left: 16px; bottom: 14px; font-size: 10px; }
  .layers__link { height: 112px; padding-left: 36px; align-items: stretch; gap: 14px; }
  .layers__link-label { align-self: center; font-size: 11px; }
  .layers__desc { font-size: 15px; }
  .layers__bottom { padding: 32px 36px 36px; }
  .layers__bottom-head { flex-direction: row; align-items: baseline; gap: 20px; flex-wrap: wrap; }
  .chips { grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 28px; }
  .chips__item { padding: 16px 0; font-size: 18px; }
  .chips__item--more { grid-column: auto; padding: 19px 0; font-size: 13px; }
}
@media (min-width: 1024px) {
  .solution { padding: 150px 0 140px; }
  .solution__ghost { --ghost-size: 300px; right: -30px; top: 96px; }
  .layers { margin-top: 96px; }
}

/* ==========================================================================
   8. ④ Scale & Speakers
   ========================================================================== */
/* 下だけ詰める。④はアーカイブの横スクローラという「線」で終わるため、
   標準の余白のままだと⑤との間が空洞に見える。⑤の上は触らない
   （両方詰めるとここだけ密になり、他の境界から浮く） */
.scale { padding: 80px 0 56px; }
/* SPは左上に置くので左上へ。PC（768px以上）では右下に移すので向きも入れ替える */
.scale__flow {
  --w: clamp(400px, 56.25vw, 720px);
  top: calc(var(--w) * -0.2);
  left: calc(var(--w) * -0.2);
  --flow-opacity: 0.5;
  --drift-x: -30px;
  --drift-y: -40px;
  --drift-dur: 24s;
  --drift-delay: -3s;
}
/* SPカンプにゴーストは無い。PCのみ表示する */
.scale__ghost { display: none; }

/* --- Stat --- */
.stats { margin-top: 44px; }
.stat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.stat__value {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(38px, 4.69vw, 60px);
  line-height: 1;
  letter-spacing: var(--ls-num);
  white-space: nowrap;
  color: var(--text-hi);
}
.stat__unit { font-size: 0.32em; margin-left: 6px; font-weight: 500; color: var(--gold); }
.stat__label { font-size: 13px; color: var(--text-dim); }

.stat--hero .stat__value { font-size: clamp(54px, 10vw, 128px); }
.stat--hero .stat__value--grad {
  background: var(--grad-heat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat--hero .stat__unit { color: inherit; }

.stats__row {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
}
.stats__row .stat { border-top: 1px solid rgba(232, 236, 244, 0.14); padding-top: 16px; }

/* --- Speakers --- */
.speakers { margin-top: 64px; }
.speakers__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.speakers__head-title { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.speakers__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }

.speaker-card {
  background: var(--bg-raised);
  border: 1px solid rgba(232, 236, 244, 0.08);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.speaker-card__photo {
  position: relative;
  aspect-ratio: 1 / 1.08;
  background: linear-gradient(180deg, #22355c, #131f3a);
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--text-dim);
}
.speaker-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* 顔を切らない */
}
/* 顔写真なので暗幕は浅く。写真枠の共通 --overlay-photo だと表情が沈む */
.speaker-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 27, 51, 0.06), rgba(10, 14, 26, 0.34));
}
.speaker-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.speaker-card__name { font-size: 18px; font-weight: 700; color: var(--text-hi); line-height: 1.4; }
.speaker-card__role { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.speaker-card__org {
  margin-top: 4px;
  font-family: var(--font-label);
  font-size: 11px;
  /* --ls-label（0.12em）は §4 で「欧文ラベル用」と定義された値。
     ここは和文の社名が入るので詰める。0.12emのままだと
     「スターティアホールディングス株式会社」（18字）が 221.8px となり、
     カード内寸220pxを1.8px超えて「社」だけが次行に落ちる */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}

/* 末尾の「and more」。カード枚数に関わらず最終行いっぱいに伸ばし、
   端に空きセルが残らないようにする（登壇者が増減しても崩れない） */
.speakers__more {
  grid-column: 1 / -1;
  border: 1px dashed rgba(232, 236, 244, 0.2);
  border-radius: var(--radius);
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 20px 18px;
}
.speakers__more-title { font-size: 14px; color: var(--text-hi); }
.speakers__more-sub { font-size: 12px; color: var(--text-dim); }

/* --- Archive --- */
.archive { margin-top: 64px; }
.archive__head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.archive__note { margin: 10px 0 20px; font-size: 13px; color: var(--text-dim); line-height: 1.75; }

/* SPは横スクロール、PCは3列グリッド */
.archive__grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* コンテナのガターぶん外へ出し、端まで流れて見えるようにする */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  /* これが無いとスナップが左のガターを飛ばし、先頭バナーだけ見出しより左に出る */
  scroll-padding-inline: var(--gutter);
}
.archive__grid::-webkit-scrollbar { display: none; }
.archive__item {
  flex: 0 0 240px;
  height: 135px;
  scroll-snap-align: start;
}
/* バナーは文字が焼き込まれている。共通の --overlay-photo（下端0.75）だと見出しが読めない */
.archive__item::after {
  background: linear-gradient(180deg, rgba(16, 27, 51, 0.04), rgba(10, 14, 26, 0.2));
}
.archive__item > img { filter: saturate(0.94) contrast(1.02); }
/* 横スクローラの現在位置。幅いっぱいの要素で終わらせることで、
   ④の下端が「線」ではなく「面」で締まり、⑤との境界が空洞に見えなくなる */
.archive__progress { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.archive__progress-track {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(232, 236, 244, 0.14);
  overflow: hidden;
}
.archive__progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;              /* JSがスクロール量から実際の割合に差し替える */
  height: 100%;
  border-radius: 2px;
  background: var(--grad-heat);
}
.archive__progress-label { flex: 0 0 auto; font-size: 9.5px; color: var(--text-dim); }

@media (min-width: 768px) {
  .scale { padding: 112px 0 80px; }
  .scale__flow {
    --w: clamp(400px, 56.25vw, 720px);
    top: auto;
    left: auto;
    bottom: calc(var(--w) * -0.2);
    right: calc(var(--w) * -0.2);
    --flow-opacity: 0.45;
    --drift-x: 30px;
    --drift-y: 40px;
  }
  .scale__ghost { display: block; --ghost-size: 150px; --ghost-cap: 34vw; right: -20px; top: 48px; }

  .stats { margin-top: 66px; }
  .stats__row {
    margin-top: 52px;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: end;
    border-top: 1px solid rgba(232, 236, 244, 0.14);
    padding-top: 34px;
  }
  .stats__row .stat { border-top: 0; padding-top: 0; }
  .stats__row .stat + .stat { padding-left: 28px; border-left: 1px solid rgba(232, 236, 244, 0.12); }

  .speakers { margin-top: 100px; }
  .speakers__head { align-items: flex-end; margin-bottom: 32px; }
  .speakers__head-title { flex-direction: row; align-items: baseline; gap: 20px; }
  /* 登壇者7枠＋and more＝8タイル。4列なら2行きっちりで端が余らない */
  .speakers__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 0; }
  .speakers__more { gap: 20px; padding: 26px 28px; }
  .speakers__more-title { font-size: 17px; }
  .speakers__more-sub { font-size: 13px; }

  .archive { margin-top: 96px; }
  .archive__note { margin: 12px 0 32px; font-size: var(--fs-sub); }
  .archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .archive__item { flex: initial; height: auto; aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .scale { padding: 150px 0 100px; }
  .scale__ghost { --ghost-size: 210px; right: -24px; top: 60px; }
  .stats { margin-top: 88px; }
  .speakers { margin-top: 132px; }
  .archive { margin-top: 120px; }
}

/* ==========================================================================
   9. ⑤ On site
   ========================================================================== */
.onsite { padding: 80px 0 80px; }
/* 「05 THINGS」はPCカンプのみの要素。SPカンプには無い */
.onsite__count { display: none; }

.things { margin-top: 36px; }
.thing {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(232, 236, 244, 0.12);
}
.thing:last-child { border-bottom: 1px solid rgba(232, 236, 244, 0.12); }
.thing__num {
  flex: 0 0 auto;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: rgba(212, 175, 55, 0.55);
}
.thing__body { display: flex; flex-direction: column; gap: 8px; }
.thing__title {
  font-size: 19px;
  font-weight: 900;
  color: var(--text-hi);
  letter-spacing: -0.02em;
  line-height: 1.4;
}
/* 「沖縄メイン会場A」に改名して1行に収まらなくなった。balance で2行を均し、
   最終行が「共有。」だけになるのを防ぐ。非対応ブラウザは従来どおり通常の折り返し */
.thing__desc { font-size: var(--fs-sub); line-height: 1.8; color: var(--text-dim); text-wrap: balance; }

@media (min-width: 768px) {
  .onsite { padding: 112px 0 108px; }
  .onsite__top {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: end;
  }
  .onsite__top .sec-head { grid-column: 1 / 9; }
  .onsite__count {
    display: block;
    grid-column: 10 / 13;
    padding-bottom: 8px;
    font-size: var(--fs-sub);
    color: var(--text-dim);
    letter-spacing: 0.08em;
  }

  .things { margin-top: 60px; }
  .thing {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: baseline;
    padding: 34px 0;
  }
  /* 番号・見出し・説明を親グリッドの列に直接載せる */
  .thing__body { display: contents; }
  .thing__num { grid-column: 1 / 2; font-size: 60px; }
  .thing__title { grid-column: 2 / 7; font-size: 28px; line-height: 1.35; }
  .thing__desc { grid-column: 7 / 13; font-size: 16px; line-height: 1.85; }
}
@media (min-width: 1024px) {
  .onsite { padding: 150px 0 140px; }
  .things { margin-top: 80px; }
}

/* ==========================================================================
   10. ⑥ Timeline
   ========================================================================== */
.timeline { padding: 80px 0 80px; }
/* 左下なので左下へ */
.timeline__flow {
  --w: clamp(420px, 56.25vw, 720px);
  bottom: calc(var(--w) * -0.2);
  left: calc(var(--w) * -0.2);
  --flow-opacity: 0.45;
  --drift-x: -34px;
  --drift-y: 36px;
  --drift-r: -1deg;
  --drift-dur: 25s;
  --drift-delay: -14s;
}

/* 1日の流れは1本だけ持つ（日別のタイムラインは持たない）。
   会場ごとの進行差は「昼〜夕／夕方／夜」の幅で吸収する（2026-08-26） */
.days { margin-top: 40px; display: flex; flex-direction: column; gap: 24px; }

.daypattern__label { display: block; font-size: 11px; color: var(--text-dim); }
.daypattern__rows { margin-top: 14px; }
.day-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(232, 236, 244, 0.14);
}
.day-row:last-child { border-bottom: 1px solid rgba(232, 236, 244, 0.14); }
.day-row__time { flex: 0 0 52px; font-size: 10px; color: var(--text-dim); }
/* SPでは「沖縄メイン会場A…」が2行になる。balance で行を均し、
   2行目が「LIVE視聴」だけにならないようにする */
.day-row__text { font-size: 14px; color: var(--text-body); line-height: 1.6; text-wrap: balance; }

/* 3日あることは手放さない。日付だけを下段に3つ並べる */
.daydates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.daydate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.daydate__label { font-size: 10px; color: var(--text-dim); }
.daydate__num {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-hi);
  letter-spacing: -0.03em;
}
/* 100%で必ず改行させ、「Day 1」の下に日付を置く */
.daydate__date { flex: 1 0 100%; font-size: 13px; color: var(--gold); }

.timeline__note { font-size: 12px; color: var(--text-dim); line-height: 1.7; }

/* 上のブロックとの間隔（24px）より詰めると、結びの一文が注記の一部に見える */
.timeline__punch { margin-top: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.timeline__punch-text {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-hi);
  line-height: 1.55;
  letter-spacing: -0.025em;
}

@media (min-width: 768px) {
  .timeline { padding: 112px 0 108px; }
  .days { margin-top: 60px; gap: 32px; }
  .daypattern__label { font-size: 13px; }
  .daypattern__rows { margin-top: 24px; }
  /* 幅が使えるようになったので、時刻を左・内容を右に並べる
     （1/3幅の列だった頃の縦積みは不要になった） */
  .day-row { gap: 28px; padding: 20px 0; }
  .day-row__time { flex: 0 0 96px; font-size: 12px; }
  .day-row__text { font-size: 17px; }
  /* 1080px幅いっぱいに散らすと3日が繋がって見えないので絞る */
  .daydates { gap: 24px; max-width: 560px; }
  .daydate { gap: 8px 12px; }
  .daydate__label { font-size: 12px; }
  .daydate__num { font-size: 44px; }
  .daydate__date { font-size: 17px; }
  .timeline__note { font-size: 13px; }
  /* カンプ準拠：締めの一文は下段の右半分に置く */
  .timeline__punch {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px 24px;
  }
  .timeline__punch > * { grid-column: 6 / 13; }
  .timeline__punch-text { font-size: clamp(24px, 2.34vw, 30px); line-height: 1.5; }
}
@media (min-width: 1024px) {
  .timeline { padding: 150px 0 140px; }
  .days { margin-top: 80px; }
  .timeline__punch { margin-top: 64px; }
}

/* ==========================================================================
   11. ⑦ Returns
   ========================================================================== */
.returns { padding: 80px 0 80px; }
.returns__grid { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }
.return-card { padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.return-card__num { font-size: 12px; color: var(--gold); letter-spacing: 0.06em; }
.return-card__title {
  font-size: 19px;
  font-weight: 900;
  color: var(--text-hi);
  line-height: 1.45;
  letter-spacing: -0.02em;
}
.return-card__desc { font-size: var(--fs-sub); line-height: 1.8; color: var(--text-dim); }

@media (min-width: 768px) {
  .returns { padding: 112px 0 108px; }
  .returns__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .return-card { padding: 28px 26px 30px; gap: 12px; }
  .return-card__title { font-size: 22px; }
  .return-card__desc { line-height: 1.85; }
}
@media (min-width: 1024px) {
  .returns { padding: 150px 0 140px; }
  /* カンプは90px・1行。コンテンツ幅を超えない範囲で最大化する（15字ぶん） */
  .returns__title {
    font-size: min(80px, calc((100vw - 220px) / 13.4));
    line-height: 1.05;
    letter-spacing: -0.05em;
    margin-left: -10px;
  }
  .returns__grid { margin-top: 72px; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .return-card { padding: 32px 30px 34px; gap: 14px; }
  .return-card__title { font-size: 24px; }
}

/* ==========================================================================
   12. ⑧ Venues（暗転②）
   ========================================================================== */
.venues {
  margin-top: calc(var(--cut) * -1);
  padding: 104px 0 88px;
}
.venues__ghost { --ghost-size: 96px; --ghost-cap: 46vw; right: -12px; top: 56px; }
/* ⑧のラベルのみ高輝度ゴールド（カンプ準拠） */
.venues__label { color: var(--accent-hi); }
.venues__title { font-size: clamp(48px, 7.5vw, 96px); line-height: 1.06; letter-spacing: -0.04em; }
.venues__note { margin-top: 16px; font-size: var(--fs-sub); line-height: 1.8; color: var(--text-dim); }

.venue-list { margin-top: 36px; }
.venue {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 0;
  border-top: 1px solid rgba(232, 236, 244, 0.14);
}
.venue:last-child { border-bottom: 1px solid rgba(232, 236, 244, 0.14); }
.venue__city { display: flex; flex-direction: column; gap: 4px; }
.venue__en { font-size: 10px; color: var(--gold); }
.venue__name {
  font-size: 34px;
  font-weight: 900;
  color: var(--text-hi);
  letter-spacing: -0.035em;
  line-height: 1;
}
.venue__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sub);
  color: var(--text-body);
}
.venue__access { font-size: var(--fs-caption); color: var(--text-dim); }
/* 住所そのものはリンクにしない。配車・カーナビへ貼るためにコピーできる状態を保ち、
   地図へは独立したラベルで飛ばす。
   住所の「下」に置いて左端を揃える（住所の長さで行末が変わり、行内に置くと
   会場ごとに位置がバラつくため）。align-self が無いと flex 列で全幅に伸び、
   下線が行いっぱいに走る。負のマージンは padding を打ち消して行頭に揃えつつ、
   行の高さを変えずにタップ領域を稼ぐため */
.venue__map {
  align-self: flex-start;
  margin: -8px 0 -8px -8px;
  padding: 12px 8px;
  font-size: var(--fs-caption);
  color: var(--gold);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(212, 175, 55, 0.45);
  text-underline-offset: 3px;
}
.venue__cta { width: 100%; }

.venue--more .venue__en { color: var(--text-dim); }
/* 事前登録の仕組みが無いためCTAを外した（2026-08-24）。1行だけの行になるので
   本文サイズまで上げて、他の会場行と釣り合う重さにする */
.venue--more .venue__meta { color: var(--text-dim); font-size: var(--fs-body); }
.venue__more { font-size: 28px; color: rgba(232, 236, 244, 0.55); line-height: 1.1; }

@media (min-width: 768px) {
  .venues { padding: 150px 0 120px; }
  .venues__top {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: end;
  }
  .venues__top .sec-head { grid-column: 1 / 8; }
  .venues__note { grid-column: 8 / 13; margin: 0 0 8px; }

  .venue-list { margin-top: 64px; }
  .venue {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: center;
    padding: 34px 0;
    transition: background-color 0.25s ease;
  }
  .venue:hover { background: rgba(212, 175, 55, 0.05); }
  .venue__city { grid-column: 1 / 4; gap: 6px; }
  .venue__en { font-size: 11px; }
  .venue__name { font-size: clamp(40px, 4.38vw, 56px); letter-spacing: -0.04em; }
  .venue__meta { grid-column: 4 / 9; gap: 6px; }
  .venue__cta { grid-column: 9 / 13; justify-self: end; width: auto; white-space: nowrap; }
  .venue__more { font-size: clamp(30px, 3.13vw, 40px); }
  .venue--more .venue__meta { font-size: 20px; }
}
@media (min-width: 1024px) {
  .venues { padding: 216px 0 160px; }
  .venues__ghost { --ghost-size: 230px; right: -28px; top: 120px; }
  .venue-list { margin-top: 88px; }
}

/* ==========================================================================
   13. ⑨ Price（純黒にしない。濃紺グラデ — CLAUDE.md §2 決定1）
   ========================================================================== */
.price { padding: 80px 0 80px; }

.plans { margin-top: 36px; display: flex; flex-direction: column; gap: 16px; }
.plan {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: var(--radius);
}
/* 3日間プラン＝暖色グラデの縁（DS Card variant="feature"） */
.plan--full {
  background:
    linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
    var(--grad-heat) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-card), var(--glow-gold);
}
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan__label { font-size: 11px; color: var(--text-dim); }
.plan__amount { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__unit { font-size: 13px; color: var(--text-dim); }
/* 2枚のカードを等幅にしたため、金額の級数・字間・行間も揃える。
   プランの格差はグラデ／金の縁／グロー／バッジで作り、数字は同格に並べる
   （グラデーション文字は1画面1箇所 — CLAUDE.md §5 HARD RULE 10）

   級数はビューポートではなく**プラン領域の幅**に追従させる。vw基準だと2カラム化する
   1024px前後で「¥10,000 ／日（税別）」が1行に収まらず折り返すため。
   基準をカード自身にすると2枚のパディング差ぶん級数がずれるので、必ず親（.plans）を基準にする。
   1行目は cqi 非対応ブラウザ用のフォールバック（消さないこと） */
.plans { container-type: inline-size; }
.plan__value {
  font-size: clamp(46px, 6.09vw, 78px);
  font-size: clamp(46px, 7.2cqi, 78px);
}
.plan--single .plan__value {
  font-weight: 700;
  line-height: 0.92;
  color: var(--text-hi);
  letter-spacing: -0.02em;
}
.plan__rule { display: block; height: 1px; background: rgba(232, 236, 244, 0.14); }
.plan__desc { font-size: var(--fs-sub); line-height: 1.8; color: var(--text-body); }

.price__note { margin-top: 24px; font-size: 11.5px; line-height: 1.8; color: var(--text-dim); }

@media (min-width: 768px) {
  .price { padding: 112px 0 108px; }
  /* 768〜1023pxは縦積みのまま。この幅で2枚を横並びにするとカードが324pxしかなく、
     金額を2万円側に揃えた時点で「¥10,000 ／日（税別）」が1行に入らない */
  .plans { margin-top: 60px; gap: 20px; }
  .plan { padding: 30px 28px 32px; gap: 20px; }
  .plan--full { gap: 22px; }
  .plan__label { font-size: 12px; }
  .plan__unit { font-size: var(--fs-sub); }
  .plan--full .plan__unit { font-size: 16px; }
  .plan__desc { line-height: 1.85; }
  .plan--full .plan__desc { font-size: 16px; }
  .price__note { margin-top: 44px; font-size: var(--fs-sub); }
}
@media (min-width: 1024px) {
  .price { padding: 150px 0 140px; }
  /* 見出しとの間はカンプ240pxだが、他セクション（⑤⑥80px・⑦72px・⑧88px）に合わせて詰めた */
  .plans {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    /* stretch（既定値）のまま。説明文の折り返し行数が違っても2枚の下端を揃える */
    align-items: stretch;
  }
  /* DOM順はSP優先（3日間が先）。PCは同じ行に置き、幅は6カラムずつで揃える。
     行を明示しないと後から置く1日プランが2行目へ送られる */
  .plan--single { grid-area: 1 / 1 / 2 / 7; padding: 32px 30px 34px; }
  .plan--full { grid-area: 1 / 7 / 2 / 13; padding: 36px 34px 38px; }
}

/* ==========================================================================
   14. ⑩ FAQ
   ========================================================================== */
.faq { padding: 80px 0 80px; }
.faq__list { margin-top: 32px; }
.faq__item { border-top: 1px solid rgba(232, 236, 244, 0.14); }
.faq__item:last-child { border-bottom: 1px solid rgba(232, 236, 244, 0.14); }

.faq__q {
  width: 100%;
  min-height: 44px;
  padding: 18px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.faq__no { flex: 0 0 auto; padding-top: 5px; font-size: 11px; color: var(--gold); }
.faq__question {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-hi);
  line-height: 1.5;
  letter-spacing: -0.015em;
}
/* ＋／− は罫で描く。アイコンフォント・絵文字は使わない */
.faq__icon { flex: 0 0 auto; position: relative; width: 13px; height: 13px; margin-top: 7px; }
.faq__icon::before,
.faq__icon::after { content: ""; position: absolute; background: var(--gold); }
.faq__icon::before { left: 0; top: 6px; width: 13px; height: 1.5px; }
.faq__icon::after { left: 6px; top: 0; width: 1.5px; height: 13px; transition: opacity 0.2s ease; }
.faq__q[aria-expanded="true"] .faq__icon::after { opacity: 0; }

.faq__a { padding: 0 0 20px 32px; }
.faq__a p { font-size: var(--fs-sub); line-height: 1.85; color: var(--text-dim); }

@media (min-width: 768px) {
  .faq { padding: 112px 0 108px; }
  .faq__list { margin-top: 44px; }
  /* PCは開いたリスト。開閉しないので＋/−は出さない */
  .faq__q { padding: 26px 0; gap: 14px; cursor: default; }
  .faq__no { padding-top: 7px; font-size: 12px; }
  .faq__question { font-size: 20px; }
  .faq__icon { display: none; }
  .faq__a { padding: 0 0 26px 42px; }
}
@media (min-width: 1024px) {
  .faq { padding: 150px 0 140px; }
  .faq__inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
  .faq__inner .sec-head { grid-column: 1 / 4; }
  .faq__title { font-size: clamp(40px, 3.75vw, 48px); line-height: 1.15; letter-spacing: -0.03em; }
  .faq__list { grid-column: 5 / 13; margin-top: 0; }
  .faq__q { padding: 28px 0; }
  .faq__question { font-size: 22px; }
}

/* ==========================================================================
   15. ⑪ Closing（暗転③）
   ========================================================================== */
.closing { padding: 96px 0 100px; }
/* 右上／左下の対角。クロージングは面積が大きいので振れ幅もやや大きく取る */
.closing__flow-heat {
  --w: clamp(480px, 75vw, 960px);
  top: calc(var(--w) * -0.2);
  right: calc(var(--w) * -0.2);
  --flow-opacity: 0.85;
  --drift-x: 42px;
  --drift-y: -48px;
  --drift-dur: 23s;
  --drift-delay: -8s;
}
.closing__flow-signal {
  --w: clamp(440px, 67.19vw, 860px);
  bottom: calc(var(--w) * -0.2);
  left: calc(var(--w) * -0.2);
  --flow-opacity: 0.6;
  --drift-x: -38px;
  --drift-y: 44px;
  --drift-r: -1.1deg;
  --drift-dur: 30s;
  --drift-delay: -17s;
}
.closing__ghost { --ghost-size: 130px; --ghost-cap: 46vw; left: 20px; bottom: 20px; }

/* 文字の背後に暗幕。フローフォームの上でも可読性を保つ（DS layout.css の well-dark） */
.well-dark::before {
  content: "";
  position: absolute;
  inset: -32px -48px;
  z-index: -1;
  background: radial-gradient(78% 116% at 50% 50%, rgba(10, 14, 26, 0.86), rgba(10, 14, 26, 0.5) 62%, transparent 78%);
  pointer-events: none;
}

.closing__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.closing__title { font-size: clamp(40px, 6.88vw, 88px); line-height: 1.16; letter-spacing: -0.04em; }
.closing__cta { display: flex; flex-direction: column; align-items: stretch; gap: 20px; width: 100%; }
.closing__meta { font-size: 12px; color: var(--text-dim); letter-spacing: 0.08em; }

@media (min-width: 768px) {
  .closing { padding: 140px 0 132px; }
  .closing__ghost { --ghost-size: 200px; left: 48px; bottom: 28px; }
  .closing__inner { gap: 32px; }
  .closing__title { line-height: 1.1; }
  .closing__lead { max-width: 640px; }
  .closing__cta { flex-direction: row; align-items: center; gap: 28px; width: auto; flex-wrap: wrap; }
  .closing__meta { font-size: 14px; }
}
@media (min-width: 1024px) {
  .closing { padding: 190px 0 180px; }
  .closing__ghost { --ghost-size: 300px; left: 80px; bottom: 36px; }
  .closing__inner { gap: 40px; }
  .closing__title { line-height: 1.08; }
}

/* ==========================================================================
   16. ⑫ Footer — 琉球アスティーダのエンブレムはここにのみ置く（決定3）
   ========================================================================== */
.footer {
  position: relative;
  background: var(--bg-footer);
  border-top: 1px solid rgba(232, 236, 244, 0.1);
  padding: 48px 0;
}
.footer__inner { display: flex; flex-direction: column; gap: 16px; }
.footer__mark { font-size: 11px; color: var(--text-hi); }
.footer__host {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--text-body);
}
.footer__emblem { flex: 0 0 auto; width: 28px; height: auto; }
.footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 8px; }
.footer__links a { font-size: var(--fs-sub); }
/* 遷移先は文字で説明せず矢印で示す（使ってよい記号は → / — ●） */
.footer__link-main::after { content: " →"; }
.footer__link-sub { color: var(--text-dim); }
.footer__meta { margin-top: 8px; font-size: 11.5px; color: var(--text-dim); letter-spacing: 0.04em; }

@media (min-width: 768px) {
  .footer { padding: 64px 0 56px; }
  .footer__inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px 24px;
    align-items: start;
  }
  .footer__mark { grid-column: 1 / 6; font-size: 13px; }
  .footer__host { grid-column: 1 / 6; font-size: 16px; }
  .footer__links { grid-column: 8 / 13; grid-row: 1 / 4; margin-top: 0; gap: 14px; }
  .footer__meta { grid-column: 1 / 6; margin-top: 0; font-size: var(--fs-caption); }
}
@media (min-width: 1024px) {
  .footer { padding: 72px 0 64px; }
}

/* ==========================================================================
   17. SP下部固定CTA（PCはヘッダー右上が担うため非表示）
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(7, 11, 21, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(232, 236, 244, 0.12);
}
.sticky-cta__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
}
.sticky-cta__meta .num { letter-spacing: 0.04em; }
.sticky-cta__btn { width: 100%; }

/* FVのCTAが画面内にある間は出さない（同じボタンが2つ並ぶのを避ける）。
   制御クラスはJSが付ける。JSが動かない環境では最初から出したままにする */
.sticky-cta--managed {
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.32s var(--ease-enter),
    opacity 0.32s var(--ease-enter),
    visibility 0.32s;
}
.sticky-cta--managed.is-shown {
  transform: none;
  opacity: 1;
  visibility: visible;
}

/* 固定バーに本文の末尾が隠れないよう逃がす */
body { padding-bottom: var(--sticky-cta-h); }

@media (min-width: 1024px) {
  .sticky-cta { display: none; }
}

/* ==========================================================================
   18. 会場選択シート（select CTA の遷移先）

   nav・FV・⑪・SP固定バーの4箇所から開く。スクロールしないので、
   ⑧より下にあるCTA（⑪・固定バー）から押しても後ろへ戻らない。
   SPはボトムシート、768px以上は中央パネル。DOMは共通でCSSだけ切り替える
   ========================================================================== */
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet[hidden] { display: none; }

.sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 11, 21, 0.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* transform だけを動かす。opacity を含めると、アニメが進まない環境
   （非表示タブ等）で 0% の opacity:0 に留まりシートが見えなくなる。
   transform だけなら最悪でも「14pxずれた位置に見えている」で済む */
@keyframes sheet-rise {
  from { transform: translateY(14px); }
  to { transform: none; }
}
.sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-raised);
  border-top: 1px solid rgba(232, 236, 244, 0.14);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-card);
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  /* fill を付けない。`both` だとアニメが走らない環境（非表示タブ等）で
     0%キーフレームの opacity:0 に留まり、シートが見えなくなる */
  animation: sheet-rise 0.3s var(--ease-enter);
}

.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sheet__title {
  font-family: var(--font-jp-heading);
  font-size: 17px;
  font-weight: 900;
  color: var(--text-hi);
  letter-spacing: -0.02em;
}
/* 閉じるボタンの×は記号を使わずCSSの2本線で描く（§5 原則12）。タップ領域44px */
.sheet__close {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-right: -12px;
  background: none;
  border: 0;
  cursor: pointer;
}
.sheet__close::before,
.sheet__close::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 21px;
  width: 18px;
  height: 1.5px;
  background: var(--text-body);
  transition: background-color 0.25s ease;
}
.sheet__close::before { transform: rotate(45deg); }
.sheet__close::after { transform: rotate(-45deg); }
.sheet__close:hover::before,
.sheet__close:hover::after { background: var(--gold); }

/* 会場が増えてもパネルが画面からはみ出さないようにする。
   5会場では発生しないが、7〜8に増えると効く */
.sheet__list {
  max-height: calc(100vh - 190px);
  max-height: calc(100dvh - 190px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet__item + .sheet__item { border-top: 1px solid rgba(232, 236, 244, 0.12); }
.sheet__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;              /* タップ領域 */
  padding: 14px 2px;
  color: var(--text-hi);
  transition: color 0.25s ease;
}
/* ⑧ Venues と同じ階層（英字ラベル → 都市名 → 会場名）に揃える。
   金は10pxの英字ラベルだけに乗せ、面積を小さく保つ（§4・§5） */
.sheet__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sheet__en { font-size: 10px; line-height: 1.2; color: var(--gold); }
.sheet__city {
  font-family: var(--font-jp-heading);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.sheet__venue { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
/* 温まるのは都市名だけ。会場名まで金にすると落ち着かない */
.sheet__link:hover,
.sheet__link:focus-visible { color: var(--gold); }
.sheet__arrow { flex: 0 0 auto; font-family: var(--font-num); font-size: 15px; color: var(--gold); }

@media (min-width: 768px) {
  @keyframes sheet-fade {
    from { transform: translate(-50%, calc(-50% + 10px)); }
    to { transform: translate(-50%, -50%); }
  }
  .sheet__panel {
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 48px));
    border: 1px solid rgba(232, 236, 244, 0.14);
    border-radius: var(--radius);
    padding: 24px 26px 20px;
    animation: sheet-fade 0.28s var(--ease-enter);
  }
  .sheet__title { font-size: 19px; }
  .sheet__city { font-size: 21px; }
}

/* ==========================================================================
   19. 表示切替ユーティリティ
   DSのタイポスケールと同じ767/768pxを境にする。
   セクション側のdisplay指定に必ず勝つよう、スタイルシートの最後に置く。
   ========================================================================== */
.u-pc, .u-pc-inline { display: none; }
@media (min-width: 768px) {
  .u-pc { display: revert; }
  .u-pc-inline { display: inline; }
  .u-sp, .u-sp-inline { display: none; }
}

/* 1024px以上だけで効かせる改行（⑩の見出しなど、PC専用の2段組み用） */
.u-lg { display: none; }
@media (min-width: 1024px) {
  .u-lg { display: revert; }
}

/* 語の途中で折り返させない。日本語は任意の位置で改行されるため明示が要る */
.u-nowrap { white-space: nowrap; }

/* SPだけ折り返しの単位を固定する。④の役職は幅127pxのカードに入るため、
   SPでのみ「役員」「担当」が前の行から切り離される。PCは幅に余裕があるので通常どおり */
.u-nowrap-sp { white-space: nowrap; }
@media (min-width: 768px) {
  .u-nowrap-sp { white-space: normal; }
}

/* ==========================================================================
   20. prefers-reduced-motion — 動きを止める
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rise-in { opacity: 1; }
  .badge__dot { animation: none; }
  .flow-drift { animation: none; }
}