/* =========================================================
   KYABEL — Cabaret Neon Crystal / スタイル
   ---------------------------------------------------------
   都市型高級キャバクラ。ガラス・クリスタル・ネオン反射。
   フルブリード＋斜めセクション区切り＋全画面放射メニュー。
   ========================================================= */

/* ---------- デザイントークン ---------- */
:root {
  --color-bg: #0a1024;
  --color-black: #05060e;
  --color-surface: #101a3c;
  --color-text: #e9edfb;
  --color-muted: #9aa3c4;
  --color-violet: #7c5cff;
  --color-cyan: #4fd8eb;
  --color-line: rgba(124, 92, 255, 0.28);
  --grad-neon: linear-gradient(100deg, var(--color-violet), var(--color-cyan));
  --glass-bg: rgba(16, 26, 60, 0.55);
  --glass-line: rgba(233, 237, 251, 0.14);

  --font-display: "Outfit", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  --container-width: 1200px;
  --topbar-h: 64px;
  --radius: 14px;
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(1200px 800px at 85% -10%, rgba(124, 92, 255, 0.14), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(79, 216, 235, 0.10), transparent 55%),
    var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  background: var(--color-cyan); color: var(--color-black); padding: 0.6em 1.2em; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- ユーティリティ ---------- */
.container { max-width: var(--container-width); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.grad-text {
  background: var(--grad-neon);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(13, 20, 48, 0.92); }
}
.glass-frame { border: 1px solid var(--glass-line); border-radius: var(--radius); overflow: hidden; }

/* ---------- 画像プレースホルダー（ガラス・クリスタル・ネオン反射） ---------- */
.ph {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  isolation: isolate;
  background-color: var(--color-surface);
}
.ph::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
}
.ph::after {
  /* クリスタルのファセット線 */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(115deg, transparent 0 34px, rgba(233, 237, 251, 0.05) 34px 35px),
    repeating-linear-gradient(65deg, transparent 0 55px, rgba(79, 216, 235, 0.06) 55px 56px);
}
.ph[data-ratio="1x1"]  { aspect-ratio: 1 / 1; }
.ph[data-ratio="4x5"]  { aspect-ratio: 4 / 5; }
.ph[data-ratio="3x4"]  { aspect-ratio: 3 / 4; }
.ph[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.ph[data-ratio="3x2"]  { aspect-ratio: 3 / 2; }
.ph[data-ratio="21x9"] { aspect-ratio: 21 / 9; }
.ph[data-tone="1"]::before { background: radial-gradient(120% 90% at 20% 10%, rgba(124, 92, 255, 0.55), rgba(10, 16, 36, 0.2) 55%), linear-gradient(160deg, #171f4a, #05060e); }
.ph[data-tone="2"]::before { background: radial-gradient(110% 90% at 80% 85%, rgba(79, 216, 235, 0.45), rgba(10, 16, 36, 0.15) 55%), linear-gradient(200deg, #101a3c, #05060e); }
.ph[data-tone="3"]::before { background: radial-gradient(80% 60% at 25% 80%, rgba(124, 92, 255, 0.4), transparent 60%), radial-gradient(70% 60% at 80% 15%, rgba(79, 216, 235, 0.35), transparent 55%), linear-gradient(180deg, #0d1530, #05060e); }
.ph[data-tone="4"]::before { background: radial-gradient(130% 100% at 50% -10%, rgba(167, 92, 255, 0.4), transparent 60%), linear-gradient(140deg, #1a1440, #05060e); }
.ph[data-tone="5"]::before { background: linear-gradient(120deg, #0a1024 30%, rgba(79, 216, 235, 0.28) 50%, #0a1024 70%), linear-gradient(180deg, #101a3c, #05060e); }
.ph__label {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: rgba(233, 237, 251, 0.82);
  border: 1px solid rgba(233, 237, 251, 0.28);
  border-radius: 999px;
  padding: 0.45em 1.2em;
  background: rgba(5, 6, 14, 0.35);
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
@media (max-width: 600px) {
  .ph__label { white-space: normal; text-overflow: clip; line-height: 1.5; }
}
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- ローディング ---------- */
.loader {
  position: fixed; inset: 0; z-index: 400;
  background: var(--color-black);
  display: grid; place-items: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loader__logo {
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0.4em;
  font-size: clamp(1.4rem, 4vw, 2rem);
  background: var(--grad-neon);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: loader-pulse 1.2s ease-in-out infinite alternate;
}
.loader.is-done { opacity: 0; visibility: hidden; }
@keyframes loader-pulse { from { opacity: 0.45; } to { opacity: 1; } }

/* ---------- トップバー ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(16px, 3vw, 32px);
  background: linear-gradient(180deg, rgba(5, 6, 14, 0.85), rgba(5, 6, 14, 0.35) 80%, transparent);
}
.topbar__logo { display: flex; flex-direction: column; line-height: 1.2; }
.topbar__logo-en { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.34em; font-size: 1.05rem; }
.topbar__logo-sub { font-size: 0.75rem; letter-spacing: 0.4em; color: var(--color-cyan); }
.topbar__meta { display: flex; align-items: center; gap: var(--space-md); }
.topbar__tel { font-family: var(--font-display); letter-spacing: 0.12em; font-weight: 600; font-size: 0.95rem; }
.topbar__tel:hover { color: var(--color-cyan); }
.btn-reserve {
  position: relative; overflow: hidden;
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.22em; font-size: 0.875rem;
  padding: 0.7em 1.8em; border-radius: 999px;
  color: var(--color-black);
  background: var(--grad-neon); background-size: 200% 100%; background-position: 0% 0;
  transition: background-position 0.6s ease;
}
.btn-reserve:hover { background-position: 100% 0; }
@media (max-width: 767px) {
  .topbar__meta { display: none; }
}

/* ---------- 円形メニューボタン（menu-orb） ---------- */
.menu-orb {
  position: fixed; z-index: 220;
  right: clamp(16px, 3vw, 40px); bottom: clamp(20px, 4vh, 44px);
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center; gap: 0;
  background: var(--glass-bg);
  border: 1px solid var(--color-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 24px rgba(124, 92, 255, 0.35);
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}
.menu-orb:hover { box-shadow: 0 0 40px rgba(79, 216, 235, 0.5); transform: scale(1.05); }
.menu-orb__label {
  font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.3em;
  padding-left: 0.3em; /* 字間の右側余白ぶんの視覚補正 */
}
.menu-orb__dots { display: flex; gap: 5px; margin-bottom: 4px; }
.menu-orb__dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--color-cyan); }
.menu-orb__dots span:nth-child(2) { background: var(--color-violet); }
.menu-orb[aria-expanded="true"] .menu-orb__dots span { background: var(--color-text); }
@media (max-width: 767px) {
  .menu-orb {
    position: fixed; top: 8px; right: 12px; bottom: auto;
    width: 50px; height: 50px;
    box-shadow: 0 0 16px rgba(124, 92, 255, 0.3);
  }
  .menu-orb__dots { margin-bottom: 2px; }
  .menu-orb__dots span { width: 4px; height: 4px; }
  .menu-orb__label { font-size: 0.8125rem; }
}

/* ---------- 全画面放射メニュー ---------- */
.fsmenu { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.fsmenu[aria-hidden="false"] { visibility: visible; }
.fsmenu__overlay {
  position: absolute; inset: 0;
  background: radial-gradient(140% 140% at 100% 100%, rgba(124, 92, 255, 0.25), rgba(5, 6, 14, 0.94) 55%);
  opacity: 0; transition: opacity 0.4s ease;
}
.fsmenu[aria-hidden="false"] .fsmenu__overlay { opacity: 1; }
.fsmenu__inner { position: absolute; inset: 0; overflow-y: auto; padding: var(--space-lg) clamp(18px, 5vw, 60px); }
.fsmenu__close {
  position: absolute; top: 22px; right: 24px; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--glass-line); display: grid; place-items: center;
}
.fsmenu__close span { position: absolute; width: 22px; height: 1px; background: var(--color-text); transform: rotate(45deg); }
.fsmenu__close span:last-child { transform: rotate(-45deg); }
.fsmenu__nav ul { display: flex; flex-direction: column; gap: 2px; max-width: 560px; margin-top: var(--space-lg); }
.fsmenu__nav a {
  display: flex; align-items: baseline; gap: 1em;
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.14em;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  padding: 0.28em 0.2em;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease, color 0.3s ease;
}
.fsmenu[aria-hidden="false"] .fsmenu__nav a { opacity: 1; transform: none; }
.fsmenu__nav a:hover, .fsmenu__nav a[aria-current="page"] { color: var(--color-cyan); }
.fsmenu__nav .no { font-size: 0.75em; color: #9480ff; /* violet可読トーン 6.1:1 */ letter-spacing: 0.2em; }
.fsmenu__nav small { font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem; color: var(--color-muted); letter-spacing: 0.1em; }
/* 放射：PCでは右下を中心に円弧状へ展開 */
@media (min-width: 1024px) {
  .fsmenu__nav ul { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; max-width: none; margin: 0; }
  .fsmenu__nav li { position: absolute; --r: min(58vh, 44vw); right: calc(cos(var(--ang)) * var(--r) + 40px); bottom: calc(sin(var(--ang)) * var(--r) + 40px); }
  .fsmenu__nav li:nth-child(1)  { --ang: 86deg; }
  .fsmenu__nav li:nth-child(2)  { --ang: 77deg; }
  .fsmenu__nav li:nth-child(3)  { --ang: 68deg; }
  .fsmenu__nav li:nth-child(4)  { --ang: 59deg; }
  .fsmenu__nav li:nth-child(5)  { --ang: 50deg; }
  .fsmenu__nav li:nth-child(6)  { --ang: 41deg; }
  .fsmenu__nav li:nth-child(7)  { --ang: 32deg; }
  .fsmenu__nav li:nth-child(8)  { --ang: 23deg; }
  .fsmenu__nav li:nth-child(9)  { --ang: 14deg; }
  .fsmenu__nav li:nth-child(10) { --ang: 5deg; }
  .fsmenu__nav a { transform: translateX(30px); }
  .fsmenu[aria-hidden="false"] .fsmenu__nav a { transform: none; }
  .fsmenu[aria-hidden="false"] .fsmenu__nav li:nth-child(1) a { transition-delay: 0.02s; }
  .fsmenu[aria-hidden="false"] .fsmenu__nav li:nth-child(3) a { transition-delay: 0.06s; }
  .fsmenu[aria-hidden="false"] .fsmenu__nav li:nth-child(5) a { transition-delay: 0.1s; }
  .fsmenu[aria-hidden="false"] .fsmenu__nav li:nth-child(7) a { transition-delay: 0.14s; }
  .fsmenu[aria-hidden="false"] .fsmenu__nav li:nth-child(9) a { transition-delay: 0.18s; }
}
.fsmenu__meta { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: 0.4em; color: var(--color-muted); font-size: 0.875rem; }
.fsmenu__meta .tel { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.1em; color: var(--color-text); }
.fsmenu__sns { display: flex; gap: 1.4em; margin-top: 0.6em; }
.fsmenu__sns a { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.24em; color: var(--color-cyan); }
@media (min-width: 1024px) {
  .fsmenu__meta { position: absolute; left: clamp(18px, 5vw, 60px); bottom: var(--space-lg); }
}

/* ---------- ヒーロー ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: calc(var(--topbar-h) + var(--space-md)) 0 var(--space-lg);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background: url("../images/hero-crystal.webp") center 42% / cover no-repeat;
}
.hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(46% 60% at 68% 30%, rgba(124, 92, 255, 0.42), transparent 65%),
    radial-gradient(40% 55% at 25% 75%, rgba(79, 216, 235, 0.28), transparent 60%),
    linear-gradient(90deg, rgba(5, 6, 14, 0.82), rgba(5, 6, 14, 0.28) 62%, rgba(5, 6, 14, 0.58));
  animation: hero-drift 18s ease-in-out infinite alternate;
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(115deg, transparent 0 60px, rgba(233, 237, 251, 0.035) 60px 61px),
    repeating-linear-gradient(65deg, transparent 0 90px, rgba(79, 216, 235, 0.04) 90px 91px);
}
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero__panel {
  width: min(680px, calc(100% - 36px));
  padding: clamp(28px, 5vw, 56px);
  text-align: center;
}
.hero__eyebrow { font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.5em; color: var(--color-cyan); }
.hero__title {
  font-family: var(--font-display); font-weight: 800; line-height: 1.05;
  font-size: clamp(2.6rem, 8vw, 5rem); letter-spacing: 0.04em;
  margin-top: 0.4em;
}
.hero__tagline { margin-top: 1.2em; font-size: 1.05rem; letter-spacing: 0.2em; font-weight: 500; }
.hero__lead { margin-top: 0.8em; color: var(--color-muted); font-size: 0.92rem; }
.hero__actions { margin-top: var(--space-md); display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }
.hero__scroll {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.5em; color: var(--color-muted);
}
.hero__scroll::after {
  content: ""; display: block; width: 1px; height: 34px; margin: 8px auto 0;
  background: linear-gradient(var(--color-cyan), transparent);
  animation: scroll-line 1.8s ease-in-out infinite;
}
@keyframes scroll-line { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- ボタン ---------- */
.btn {
  position: relative; display: inline-block; overflow: hidden;
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.18em; font-size: 0.875rem;
  padding: 0.95em 2.2em; border-radius: 999px; text-align: center;
}
.btn--solid { color: var(--color-black); background: var(--grad-neon); background-size: 200% 100%; transition: background-position 0.6s ease; }
.btn--solid:hover { background-position: 100% 0; }
.btn--line { border: 1px solid var(--color-line); transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.4s ease; }
.btn--line:hover { border-color: var(--color-cyan); color: var(--color-cyan); box-shadow: 0 0 18px rgba(79, 216, 235, 0.25); }
/* 光の移動（ホバー時にハイライトが走る） */
.btn::after, .cast-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(233, 237, 251, 0.22) 50%, transparent 70%);
  background-size: 250% 100%; background-position: 120% 0; background-repeat: no-repeat;
}
.btn:hover::after, .cast-card:hover::after { transition: background-position 0.7s ease; background-position: -120% 0; }

.text-link { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.22em; color: var(--color-cyan); }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- 斜めセクション区切り ---------- */
.slant { height: clamp(40px, 6vw, 90px); position: relative; overflow: hidden; }
.slant::before {
  content: ""; position: absolute; inset: -20% -5%;
  transform: skewY(-3deg);
  background: linear-gradient(100deg, rgba(124, 92, 255, 0.16), rgba(79, 216, 235, 0.1));
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

/* ---------- セクション共通 ---------- */
.sec { padding-block: var(--space-xl); position: relative; }
.sec--black { background: linear-gradient(180deg, transparent, rgba(5, 6, 14, 0.75) 18% 82%, transparent); }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 1.4em; margin-bottom: var(--space-md); }
.sec-head__en {
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0.06em;
  font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.1;
}
.sec-head__en .grad-text { padding-right: 0.06em; /* グラデ切れ防止 */ }
.sec-head__jp { color: var(--color-muted); font-size: 0.875rem; letter-spacing: 0.24em; }
.sec-head__count { margin-left: auto; font-family: var(--font-display); color: var(--color-cyan); letter-spacing: 0.2em; font-size: 0.9rem; }
.sec-more { margin-top: var(--space-md); }

/* ---------- 横スクロールトラック（意図的な内部スクロール） ---------- */
.hscroll-wrap { position: relative; }
.hscroll {
  display: flex; gap: clamp(14px, 2vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 6px 6px 18px;
  scrollbar-color: var(--color-violet) transparent;
  scrollbar-width: thin;
}
.hscroll::-webkit-scrollbar { height: 6px; }
.hscroll::-webkit-scrollbar-thumb { background: var(--grad-neon); border-radius: 999px; }
.hscroll::-webkit-scrollbar-track { background: rgba(233, 237, 251, 0.06); border-radius: 999px; }
.hscroll > * { scroll-snap-align: start; flex: 0 0 auto; }
.hscroll .closed-note { flex: 1 1 100%; }
.track-nav { position: absolute; top: -62px; right: 0; display: flex; gap: 8px; }
.track-nav__btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-line); display: grid; place-items: center;
  font-family: var(--font-display); transition: border-color 0.3s ease, color 0.3s ease;
}
.track-nav__btn:hover { border-color: var(--color-cyan); color: var(--color-cyan); }
@media (max-width: 767px) { .track-nav { display: none; } }

/* ---------- キャストカード ---------- */
.cast-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(16, 26, 60, 0.5), rgba(5, 6, 14, 0.7));
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.cast-card:hover { transform: translateY(-6px); border-color: rgba(79, 216, 235, 0.5); box-shadow: 0 14px 40px rgba(5, 6, 14, 0.6), 0 0 24px rgba(124, 92, 255, 0.2); }
.cast-card--snap { width: clamp(220px, 62vw, 280px); }
@media (min-width: 768px) { .cast-card--snap { width: 260px; } }
.cast-card__photo { position: relative; }
.cast-card__photo .ph { border-radius: var(--radius) var(--radius) 0 0; }
.cast-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.badge {
  font-size: 0.8125rem; letter-spacing: 0.14em; font-weight: 700;
  padding: 0.35em 0.9em; border-radius: 999px;
  background: rgba(5, 6, 14, 0.7); border: 1px solid var(--glass-line);
}
.badge--today { color: var(--color-cyan); border-color: rgba(79, 216, 235, 0.5); }
.badge--new { color: #ffd6f2; border-color: rgba(255, 148, 235, 0.5); }
.badge--pick { color: var(--color-black); background: var(--grad-neon); border: 0; }
.cast-card__body { padding: 14px 16px 18px; }
.cast-card__name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.12em; font-size: 1.05rem; display: flex; align-items: baseline; gap: 0.8em; }
.cast-card__ja { font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; color: var(--color-muted); }
.cast-card__catch { margin-top: 0.4em; font-size: 0.875rem; color: var(--color-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.cast-card__tags { margin-top: 0.5em; display: flex; flex-wrap: wrap; gap: 0.5em; }
.tag { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.16em; color: var(--color-cyan); }
.tag--btn { border: 1px solid var(--color-line); border-radius: 999px; padding: 0.5em 1.1em; min-height: 44px; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.tag--btn:hover { border-color: var(--color-cyan); }
.tag--btn[aria-pressed="true"] { background: var(--grad-neon); color: var(--color-black); border-color: transparent; }

/* PICK UP グリッド */
.pickup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px); }
@media (max-width: 900px) { .pickup-grid { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); } }

/* ---------- イベント（最大面積・カウントダウン） ---------- */
.event-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden; }
.event-hero__photo .ph { border-radius: 0; height: 100%; }
.event-hero__body { padding: clamp(22px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 0.6em; }
.event-hero__meta { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.26em; color: var(--color-cyan); }
.event-hero__title { font-size: clamp(1.15rem, 2.4vw, 1.7rem); font-weight: 700; line-height: 1.5; }
.event-hero:hover .event-hero__title { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--color-violet); }
.countdown { display: flex; align-items: baseline; gap: 0.8em; }
.countdown__num {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem);
  background: var(--grad-neon); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-right: 0.06em;
}
.countdown__sub { font-size: 0.8125rem; color: var(--color-muted); letter-spacing: 0.2em; }
@media (max-width: 860px) { .event-hero { grid-template-columns: minmax(0, 1fr); } }

/* ---------- ニュース ---------- */
.news-list { display: grid; gap: 14px; }
.news-item { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 2vw, 24px); padding: 12px; }
.news-item__thumb .ph { border-radius: 10px; }
.news-item__meta { display: flex; align-items: center; gap: 1em; font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.18em; color: var(--color-muted); }
.news-item__cat { padding: 0.2em 0.9em; border-radius: 999px; border: 1px solid var(--color-line); font-size: 0.8125rem; }
.news-item__cat--event { color: var(--color-cyan); border-color: rgba(79, 216, 235, 0.45); }
.news-item__title { margin-top: 0.3em; font-size: 0.95rem; font-weight: 500; line-height: 1.6; }
.news-item__arrow { color: var(--color-violet); font-family: var(--font-display); transition: transform 0.3s ease, color 0.3s ease; }
.news-item:hover .news-item__arrow { transform: translateX(6px); color: var(--color-cyan); }
@media (max-width: 600px) {
  .news-item { grid-template-columns: 96px minmax(0, 1fr); }
  .news-item__arrow { display: none; }
}

/* ---------- ギャラリー ---------- */
.gallery-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .gallery-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: clamp(14px, 2vw, 22px); }
.gallery__item { position: relative; display: block; width: 100%; border-radius: var(--radius); overflow: hidden; transition: transform 0.4s ease; }
.gallery__item:hover { transform: translateY(-4px); }
.gallery__cat {
  position: absolute; left: 12px; bottom: 12px;
  font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.24em;
  padding: 0.4em 1em; border-radius: 999px;
  background: rgba(5, 6, 14, 0.65); border: 1px solid var(--glass-line); color: var(--color-cyan);
}

/* ---------- 料金 ---------- */
.sys-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
@media (max-width: 860px) { .sys-cards { grid-template-columns: minmax(0, 1fr); } }
.sys-card { padding: clamp(20px, 3vw, 32px); text-align: center; transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.sys-card:hover { border-color: rgba(79, 216, 235, 0.4); box-shadow: 0 0 24px rgba(124, 92, 255, 0.16); }
.sys-card__name { font-size: 0.875rem; letter-spacing: 0.08em; color: var(--color-muted); min-height: 3em; display: grid; place-items: center; }
.sys-card__price {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  background: var(--grad-neon); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-right: 0.06em;
}
.sys-card__time { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.3em; color: var(--color-cyan); margin-top: 0.4em; }
.sys-rows { display: grid; gap: 10px; }
.sys-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1em; flex-wrap: wrap;
  padding: 0.9em 1.2em; border: 1px solid var(--glass-line); border-radius: 10px;
  background: rgba(16, 26, 60, 0.35);
}
.sys-row__name { font-size: 0.9rem; }
.sys-row__price { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; color: var(--color-cyan); }
.sys-row__price--sm { font-size: 0.875rem; font-weight: 500; color: var(--color-text); }
.sys-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.sys-meta__box { border: 1px solid var(--glass-line); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); }
.sys-meta__box h3, .sys-meta__box h2 { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.24em; color: var(--color-cyan); margin-bottom: 0.8em; font-weight: 600; }
.sys-meta__strong { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.08em; }
.sys-meta__note { color: var(--color-muted); font-size: 0.875rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid var(--color-line); border-radius: 999px; padding: 0.4em 1.2em; font-size: 0.875rem; }
.note-list { display: grid; gap: 0.5em; color: var(--color-muted); font-size: 0.88rem; }
.note-list li { padding-left: 1.2em; position: relative; }
.note-list li::before { content: "—"; position: absolute; left: 0; color: var(--color-violet); }

/* ---------- 出勤 ---------- */
.sched-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.sched-tabs__btn {
  flex: 1 1 140px; min-height: 56px;
  border: 1px solid var(--color-line); border-radius: 999px;
  font-family: var(--font-display); letter-spacing: 0.2em; font-size: 0.875rem; font-weight: 600;
  display: grid; place-items: center; line-height: 1.3;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}
.sched-tabs__btn small { font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem; letter-spacing: 0.3em; color: var(--color-muted); }
.sched-tabs__btn:hover { border-color: var(--color-cyan); }
.sched-tabs__btn[aria-selected="true"] { background: var(--grad-neon); color: var(--color-black); border-color: transparent; box-shadow: 0 0 22px rgba(124, 92, 255, 0.35); }
.sched-tabs__btn[aria-selected="true"] small { color: rgba(5, 6, 14, 0.7); }
.sched-day-label { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: 0.06em; margin: var(--space-md) 0 var(--space-sm); }
.sched-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.sched-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px 10px 10px; transition: border-color 0.3s ease; }
.sched-card:hover { border-color: rgba(79, 216, 235, 0.45); }
.sched-card__photo .ph { border-radius: 10px; }
.sched-card__name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; display: flex; flex-direction: column; }
.sched-card__name span { font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; color: var(--color-muted); }
.sched-card__time { font-family: var(--font-display); font-size: 0.875rem; color: var(--color-cyan); letter-spacing: 0.1em; }
.sched-week { padding: 16px 18px; margin-top: 14px; }
.sched-week__day { font-family: var(--font-display); letter-spacing: 0.2em; font-size: 0.9rem; display: flex; align-items: baseline; gap: 1em; font-weight: 700; }
.sched-week__day span { color: #9480ff; /* violet可読トーン 6.1:1 */ font-size: 0.875rem; }
.sched-week__list { margin-top: 0.6em; display: flex; flex-wrap: wrap; gap: 8px; }
.sched-week__list a {
  display: inline-flex; align-items: baseline; gap: 0.6em;
  border: 1px solid var(--glass-line); border-radius: 999px; padding: 0.45em 1.1em;
  font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.1em;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.sched-week__list a:hover { border-color: var(--color-cyan); color: var(--color-cyan); }
.sched-week__list small { font-family: var(--font-body); color: var(--color-muted); font-size: 0.875rem; }
.sched-note { margin-top: var(--space-md); color: var(--color-muted); font-size: 0.875rem; }
.closed-note { text-align: center; padding: var(--space-lg) var(--space-sm); border: 1px dashed var(--color-line); border-radius: var(--radius); }
.closed-note__en { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.5em; font-size: 1.3rem; background: var(--grad-neon); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.closed-note__jp { margin-top: 0.6em; }
.closed-note__sub { color: var(--color-muted); font-size: 0.85rem; }

/* ---------- フィルタ ---------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filter__btn {
  border: 1px solid var(--color-line); border-radius: 999px;
  padding: 0.55em 1.3em; min-height: 44px;
  font-size: 0.875rem; letter-spacing: 0.1em;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.filter__btn:hover { border-color: var(--color-cyan); }
.filter__btn[aria-pressed="true"] { background: var(--grad-neon); color: var(--color-black); border-color: transparent; font-weight: 700; }
.filter-bar__sort { margin-left: auto; display: flex; align-items: center; gap: 0.6em; font-size: 0.875rem; color: var(--color-muted); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- 詳細 ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 56px); }
@media (max-width: 900px) { .detail { grid-template-columns: minmax(0, 1fr); } }
.detail__main { cursor: zoom-in; }
.detail__subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.detail__sub { border-radius: 10px; overflow: hidden; transition: opacity 0.3s ease; padding: 0; }
.detail__sub:hover { opacity: 0.85; }
.detail__name { font-size: clamp(2.2rem, 6vw, 3.6rem); font-family: var(--font-display); font-weight: 800; letter-spacing: 0.05em; line-height: 1.1; }
.detail__ja { color: var(--color-muted); letter-spacing: 0.24em; font-size: 0.875rem; margin-top: 0.4em; }
.detail__catch { font-size: 1.1rem; font-weight: 500; margin-top: 1em; }
.detail__profile { margin-top: var(--space-md); padding: clamp(16px, 2.5vw, 26px); display: grid; gap: 0.7em; }
.detail__profile div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 1em; align-items: baseline; }
.detail__profile dt { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.26em; color: var(--color-cyan); }
.day-chip {
  display: inline-grid; place-items: center; width: 2em; height: 2em; margin-right: 0.3em;
  border: 1px solid var(--color-line); border-radius: 50%; font-size: 0.875rem;
}
.detail__comment { margin-top: var(--space-md); color: var(--color-muted); }
.detail__tags { margin-top: 0.8em; display: flex; gap: 0.8em; flex-wrap: wrap; }
.detail__sns { display: flex; gap: 10px; margin-top: var(--space-md); }
.detail__sns a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-line); font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.08em;
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.detail__sns a:hover { border-color: var(--color-cyan); color: var(--color-cyan); box-shadow: 0 0 14px rgba(79, 216, 235, 0.3); }
.detail__diary { margin-top: var(--space-lg); }
.detail__diary-title { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.2em; font-size: 1.1rem; margin-bottom: 0.8em; }
.diary { padding: 18px 20px; margin-top: 10px; }
.diary__meta { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.2em; color: var(--color-cyan); }
.diary__title { font-size: 0.98rem; margin-top: 0.4em; font-weight: 700; }
.diary__body { margin-top: 0.4em; color: var(--color-muted); font-size: 0.9rem; }
.detail__actions { margin-top: var(--space-lg); display: flex; gap: 12px; flex-wrap: wrap; }
.detail-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: var(--space-lg); }
.detail-nav__link {
  display: flex; align-items: center; gap: 0.9em;
  font-family: var(--font-display); letter-spacing: 0.16em; font-size: 0.875rem;
  border: 1px solid var(--glass-line); border-radius: 999px; padding: 0.8em 1.6em;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.detail-nav__link:hover { border-color: var(--color-cyan); color: var(--color-cyan); }
.detail-nav__link small { display: block; font-family: var(--font-body); font-size: 0.875rem; color: var(--color-muted); letter-spacing: 0.1em; }
.detail-nav__arrow { color: var(--color-violet); }

/* ---------- 記事 ---------- */
.article { max-width: 820px; margin-inline: auto; }
.article__meta { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.2em; color: var(--color-muted); }
.article__meta .countdown { margin-left: auto; }
.article__meta .countdown__num { font-size: 1.6rem; }
.article__title { font-size: clamp(1.4rem, 3.4vw, 2.1rem); font-weight: 700; line-height: 1.5; margin-top: 0.6em; }
.article__photo { margin-top: var(--space-md); }
.article__body { margin-top: var(--space-md); color: var(--color-text); }
.article__nav { display: flex; justify-content: space-between; gap: 1em; margin-top: var(--space-lg); flex-wrap: wrap; }
.pager { display: flex; gap: 8px; justify-content: center; margin-top: var(--space-md); }
.pager__btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-line); font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.1em;
  display: grid; place-items: center; transition: background 0.3s ease, color 0.3s ease;
}
.pager__btn:hover { border-color: var(--color-cyan); }
.pager__btn[aria-current="page"] { background: var(--grad-neon); color: var(--color-black); border-color: transparent; font-weight: 700; }

/* ---------- 採用 ---------- */
.recruit-switch-row { display: flex; gap: 10px; flex-wrap: wrap; }
.recruit-switch {
  border: 1px solid var(--color-line); border-radius: 999px; padding: 0.7em 1.8em; min-height: 48px;
  font-family: var(--font-display); letter-spacing: 0.14em; font-size: 0.875rem; font-weight: 600;
  transition: background 0.3s ease, color 0.3s ease;
}
.recruit-switch[aria-pressed="true"] { background: var(--grad-neon); color: var(--color-black); border-color: transparent; }
.merits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.merit { padding: clamp(18px, 3vw, 28px); }
.merit__no { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; }
.merit__title { font-size: 1rem; font-weight: 700; margin-top: 0.4em; }
.merit__body { margin-top: 0.5em; color: var(--color-muted); font-size: 0.88rem; }
.cond-list { display: grid; gap: 0.5em; }
.cond-list li { padding-left: 1.4em; position: relative; }
.cond-list li::before { content: "◇"; position: absolute; left: 0; color: var(--color-cyan); }
.acc { overflow: hidden; }
.acc + .acc { margin-top: 10px; }
.acc__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1em;
  padding: 1em 1.3em; text-align: left; font-size: 0.92rem; font-weight: 500; min-height: 56px;
}
.acc__icon { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; inset: 50% auto auto 0; width: 100%; height: 1px; background: var(--color-cyan); transition: transform 0.3s ease; }
.acc__icon::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(0deg); }
.acc__panel { padding: 0 1.3em 1.2em; color: var(--color-muted); font-size: 0.9rem; }

/* ---------- フォーム ---------- */
.form-note { color: var(--color-cyan); font-size: 0.875rem; border: 1px dashed rgba(79, 216, 235, 0.4); border-radius: 10px; padding: 0.9em 1.2em; }
.form { margin-top: var(--space-md); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
@media (max-width: 700px) { .form__grid { grid-template-columns: minmax(0, 1fr); } }
.form__row { margin-top: 18px; }
.form__grid .form__row { margin-top: 0; }
.form__label { display: flex; align-items: center; gap: 0.7em; font-size: 0.875rem; letter-spacing: 0.1em; margin-bottom: 0.5em; }
.req { font-size: 0.875rem; color: var(--color-black); background: var(--grad-neon); border-radius: 999px; padding: 0.2em 0.8em; font-weight: 700; }
.form__input, .form__select, .form__textarea {
  width: 100%; min-height: 52px;
  background: rgba(5, 6, 14, 0.55);
  border: 1px solid var(--glass-line); border-radius: 10px;
  color: var(--color-text); font: inherit; padding: 0.7em 1em;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form__input:focus, .form__select:focus, .form__textarea:focus { outline: none; border-color: var(--color-cyan); box-shadow: 0 0 0 3px rgba(79, 216, 235, 0.18); }
.form__textarea { min-height: 150px; resize: vertical; }
.form__select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-cyan) 50%), linear-gradient(135deg, var(--color-cyan) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.form__check { display: flex; gap: 0.8em; align-items: flex-start; font-size: 0.88rem; cursor: pointer; }
.form__check input { width: 20px; height: 20px; margin-top: 0.3em; accent-color: var(--color-violet); flex: 0 0 auto; }
.form__actions { margin-top: var(--space-md); display: flex; justify-content: center; }
.confirm { border: 1px solid var(--color-line); border-radius: var(--radius); padding: clamp(20px, 4vw, 40px); background: rgba(16, 26, 60, 0.4); }
.confirm__title { font-family: var(--font-display); letter-spacing: 0.1em; font-size: 1.2rem; font-weight: 700; }
.confirm__note { color: var(--color-muted); font-size: 0.875rem; margin-top: 0.5em; }
.confirm__list { margin-top: var(--space-md); }
.confirm__row { display: grid; grid-template-columns: minmax(8em, 200px) minmax(0, 1fr); gap: 1em; padding: 0.8em 0; border-bottom: 1px solid var(--glass-line); }
.confirm__row dt { color: var(--color-muted); font-size: 0.875rem; }
.confirm__actions { margin-top: var(--space-md); display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- アクセス ---------- */
.access-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
@media (max-width: 860px) { .access-grid { grid-template-columns: minmax(0, 1fr); } }
.access-table { display: grid; gap: 0; }
.access-table div { display: grid; grid-template-columns: minmax(7em, 140px) minmax(0, 1fr); gap: 1em; padding: 1em 0.4em; border-bottom: 1px solid var(--glass-line); }
.access-table dt { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.28em; color: var(--color-cyan); align-self: baseline; padding-top: 0.4em; }
.tel-link { font-family: var(--font-display); letter-spacing: 0.08em; }
.tel-link:hover { color: var(--color-cyan); }

/* ---------- CTAバンド ---------- */
.cta-band { position: relative; padding-block: var(--space-xl); overflow: hidden; text-align: center; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 90% at 50% 110%, rgba(124, 92, 255, 0.35), transparent 65%),
    linear-gradient(180deg, transparent, rgba(5, 6, 14, 0.8));
}
.cta-band__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: 0.05em; }
.cta-band__text { color: var(--color-muted); margin-top: 0.8em; }
.cta-band__tel { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 4.4vw, 2.4rem); letter-spacing: 0.1em; }
.cta-band__tel:hover { color: var(--color-cyan); }
.cta-band__hours { color: var(--color-muted); font-size: 0.875rem; }
.cta-band__actions { margin-top: var(--space-md); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- フッター（斜めの発光エッジ＋横並びチップナビ） ---------- */
.site-footer { position: relative; padding: var(--space-xl) 0 calc(var(--space-md) + 10px); background: var(--color-black); }
.site-footer::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 60px;
  transform: skewY(-2deg); transform-origin: left;
  background: linear-gradient(100deg, rgba(124, 92, 255, 0.3), rgba(79, 216, 235, 0.2));
  border-top: 1px solid var(--color-line);
}
.site-footer__inner { position: relative; }
.site-footer__logo { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.3em; font-size: clamp(1.8rem, 5vw, 2.6rem); background: var(--grad-neon); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: 0.1em; }
.site-footer__tagline { color: var(--color-muted); letter-spacing: 0.2em; font-size: 0.875rem; margin-top: 0.4em; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-md); }
.site-footer__nav a {
  border: 1px solid var(--glass-line); border-radius: 999px; padding: 0.5em 1.2em; min-height: 44px;
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.18em;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.site-footer__nav a:hover, .site-footer__nav a[aria-current="page"] { border-color: var(--color-cyan); color: var(--color-cyan); }
.site-footer__info { margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: 0.2em 2em; color: var(--color-muted); font-size: 0.875rem; font-style: normal; }
.site-footer__sns { display: flex; gap: 1.6em; margin-top: var(--space-sm); }
.site-footer__sns a { font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.26em; color: var(--color-cyan); }
.site-footer__sns a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__colophon {
  margin-top: var(--space-lg); padding-top: var(--space-sm); padding-right: 76px;
  border-top: 1px solid rgba(233, 237, 251, 0.08);
  color: var(--color-muted); font-size: 0.875rem; display: grid; gap: 0.3em;
}

/* ---------- モバイル固定CTA（円形フローティング・展開式） ---------- */
.fab { position: fixed; right: 14px; bottom: 18px; z-index: 150; display: none; }
@media (max-width: 1023px) { .fab { display: block; } }
.fab__menu {
  position: absolute; right: 4px; bottom: 68px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
.fab__menu li { opacity: 0; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease; }
.fab.is-open .fab__menu { pointer-events: auto; }
.fab.is-open .fab__menu li { opacity: 1; transform: none; }
.fab.is-open .fab__menu li:nth-child(1) { transition-delay: 0.12s; }
.fab.is-open .fab__menu li:nth-child(2) { transition-delay: 0.08s; }
.fab.is-open .fab__menu li:nth-child(3) { transition-delay: 0.04s; }
.fab__menu a {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em;
}
.fab__menu a .fab__chip {
  background: rgba(5, 6, 14, 0.85); border: 1px solid var(--glass-line);
  border-radius: 999px; padding: 0.4em 1em;
}
.fab__menu a .fab__circle {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glass-bg); border: 1px solid var(--color-line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.fab__menu a.fab__primary .fab__circle { background: var(--grad-neon); border: 0; color: var(--color-black); }
.fab__circle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fab__toggle {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-neon); color: var(--color-black);
  box-shadow: 0 6px 22px rgba(124, 92, 255, 0.45);
  transition: transform 0.3s ease;
}
.fab__toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 0.3s ease; }
.fab.is-open .fab__toggle svg { transform: rotate(45deg); }
@media (max-width: 1023px) { body { padding-bottom: 96px; } }

/* ---------- ページトップ ---------- */
.page-top {
  position: fixed; right: clamp(16px, 3vw, 40px); bottom: clamp(104px, 16vh, 130px); z-index: 110;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--color-line); background: rgba(5, 6, 14, 0.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, border-color 0.3s ease;
}
.page-top.is-visible { opacity: 1; visibility: visible; }
.page-top:hover { border-color: var(--color-cyan); }
.page-top span { width: 10px; height: 10px; border-top: 1px solid var(--color-cyan); border-left: 1px solid var(--color-cyan); transform: rotate(45deg) translateY(2px); }
@media (max-width: 1023px) { .page-top { right: 20px; bottom: 170px; } }

/* ---------- パンくず・ページヘッダ ---------- */
.breadcrumb-wrap { padding-top: calc(var(--topbar-h) + 18px); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.8em; font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.2em; color: var(--color-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.8em; color: var(--color-violet); }
.breadcrumb a:hover { color: var(--color-cyan); }
.page-head { padding: var(--space-md) 0 var(--space-lg); position: relative; }
.page-head__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 7vw, 4.4rem); letter-spacing: 0.04em; line-height: 1.05; }
.page-head__jp { color: var(--color-muted); letter-spacing: 0.3em; font-size: 0.875rem; margin-top: 0.6em; }

/* ---------- モーダル・ライトボックス ---------- */
.modal, .lb { position: fixed; inset: 0; z-index: 300; visibility: hidden; }
.modal[aria-hidden="false"], .lb[aria-hidden="false"] { visibility: visible; }
.modal__overlay, .lb__overlay { position: absolute; inset: 0; background: rgba(5, 6, 14, 0.82); opacity: 0; transition: opacity 0.3s ease; }
.modal[aria-hidden="false"] .modal__overlay, .lb[aria-hidden="false"] .lb__overlay { opacity: 1; }
.modal__panel {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: min(480px, calc(100% - 32px)); max-height: min(80vh, 640px); overflow-y: auto;
  padding: clamp(24px, 5vw, 40px);
}
.modal__eyebrow { font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.5em; color: var(--color-cyan); }
.modal__title { font-size: 1.25rem; font-weight: 700; margin-top: 0.5em; }
.modal__text { color: var(--color-muted); margin-top: 0.8em; font-size: 0.92rem; }
.modal__panel .btn { margin-top: var(--space-md); }
.modal__close, .lb__close {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--glass-line);
}
.modal__close span, .lb__close span { position: absolute; width: 18px; height: 1px; background: var(--color-text); transform: rotate(45deg); }
.modal__close span:last-child, .lb__close span:last-child { transform: rotate(-45deg); }
.lb__panel { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(16px, 4vw, 56px); }
.lb__stage { width: min(920px, 100%); }
.lb__stage .ph--lb { max-height: 76vh; }
.lb__counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); letter-spacing: 0.3em; font-size: 0.875rem; color: var(--color-muted); }
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--glass-line);
  background: rgba(5, 6, 14, 0.5); display: grid; place-items: center;
  transition: border-color 0.3s ease;
}
.lb__nav:hover { border-color: var(--color-cyan); }
.lb__nav--prev { left: 16px; }
.lb__nav--next { right: 16px; }
.lb__nav span { width: 12px; height: 12px; border-top: 1px solid var(--color-cyan); border-left: 1px solid var(--color-cyan); }
.lb__nav--prev span { transform: rotate(-45deg) translate(2px, 2px); }
.lb__nav--next span { transform: rotate(135deg) translate(2px, 2px); }

/* ---------- 汎用 ---------- */
.empty-note { color: var(--color-muted); padding: var(--space-md) 0; }
.privacy-body h2 { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.14em; margin: var(--space-md) 0 0.6em; color: var(--color-cyan); font-weight: 700; }
.privacy-body p, .privacy-body li { color: var(--color-muted); font-size: 0.92rem; }
.privacy-body ul { display: grid; gap: 0.4em; padding-left: 1.2em; }
.privacy-body li { list-style: disc; }

/* ---------- リビール ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}


/* ==================================================================
   design-guide.md 適用ブロック（可読性・操作性の最低基準）
   - 世界観・配色・レイアウトは変更しない。寸法・ウェイトのみ。
   - 根拠: design-guide.md §7(ウェイト) §8(操作領域) §10(分類A是正)
   ================================================================== */
/* ボタン・ピル型UI: タップ領域44px（§8） */
.btn, .tag--btn, .filter__btn, .pager__btn, .sec-more, .recruit-switch, .btn-reserve {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* インラインリンク: タッチ環境で44px、PCでも行箱を確保（§8） */
.tel-link, .text-link, .breadcrumb a, .topbar__tel, .site-footer__nav a, .site-footer__sns a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
@media (max-width: 767px) {
  .tel-link, .text-link, .breadcrumb a, .topbar__tel, .site-footer__nav a, .site-footer__sns a { min-height: 44px; }
}
/* チェックボックス行: 44px確保（§8） */
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
.form__check { min-height: 44px; display: flex; align-items: center; }
/* ボタンのウェイト（§7: 500以上） */
.btn, .cta-bar a, button[type="submit"] { font-weight: 500; }
/* 出勤情報・定休日表示は装飾例外にしない（§2） */
.badge--today { font-size: 14px; }
.closed-note__sub { font-size: 14px; }