/* =====================================================================
   カシキル リニューアル プロトタイプ - Design System
   Brand: Gold (#dbbd36) × Cream (#f7f5f0) × Coral (#ec6262)
   現行サイトのカラーモチーフ・ロゴを継承し、洗練・上質に再構築
   ===================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand gold (ロゴ由来) */
  --gold: #dbbd36;
  --gold-deep: #a57800;
  --gold-rich: #c17b11;
  --gold-soft: #e4b25b;
  --gold-pale: #eccb90;

  /* Accent coral (CTA・現行のメインアクセント継承) */
  --coral: #ec6262;
  --coral-deep: #d15f5f;
  --coral-soft: #e59689;

  /* LINE */
  --line: #06c755;
  --line-deep: #05a648;

  /* Neutrals - 暖色寄りで統一感を出す */
  --ink: #2c2620;          /* 見出し・本文 */
  --ink-2: #6b6155;        /* サブテキスト */
  --ink-3: #9c9286;        /* キャプション */
  --cream: #f7f5f0;        /* ベース背景 */
  --cream-deep: #efe9dd;   /* セクション差し色 */
  --paper: #fffdf9;        /* カード白 */
  --white: #ffffff;
  --border: #e8e1d4;       /* 区切り線 */
  --border-soft: #f0ebe0;

  /* Effects */
  --shadow-sm: 0 2px 8px rgba(63, 52, 35, .06);
  --shadow-md: 0 8px 28px rgba(63, 52, 35, .10);
  --shadow-lg: 0 22px 60px rgba(63, 52, 35, .16);
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Type */
  --serif: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --maxw: 1180px;
  --ease: cubic-bezier(.16, .84, .44, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.8;
  font-size: 15px;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--gold-rich); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(56px, 8vw, 110px); }
.section--cream { background: var(--cream-deep); }
.section--ink { background: #211d18; color: #f3ede1; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .22em;
  color: var(--gold-deep); text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--gold); }
.section-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.35;
  letter-spacing: .04em;
  margin-top: 14px;
}
.section-title .accent { color: var(--gold-rich); }
.section-lead { color: var(--ink-2); margin-top: 16px; max-width: 640px; font-size: 15px; }
.section-head { margin-bottom: 44px; }
.section-head--center { text-align: center; }
.section-head--center .section-lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 15px; letter-spacing: .04em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 19px; height: 19px; }
.btn--primary { background: linear-gradient(135deg, var(--coral), var(--coral-deep)); color: #fff; box-shadow: 0 10px 24px rgba(236, 98, 98, .32); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(236, 98, 98, .42); }
.btn--gold { background: linear-gradient(135deg, var(--gold-soft), var(--gold-rich)); color: #2c2110; box-shadow: 0 10px 24px rgba(193, 123, 17, .28); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(193, 123, 17, .38); }
.btn--line { background: var(--line); color: #fff; box-shadow: 0 10px 24px rgba(6, 199, 85, .30); }
.btn--line:hover { background: var(--line-deep); transform: translateY(-2px); }
.btn--ghost { background: var(--white); color: var(--ink); border: 1.5px solid var(--border); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-deep); }
.btn--lg { padding: 18px 40px; font-size: 16px; }
.btn--block { width: 100%; }

/* =====================================================================
   Header
   ===================================================================== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 253, 249, .82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow .3s var(--ease);
}
.header.is-scrolled { box-shadow: var(--shadow-sm); }
.header__inner { display: flex; align-items: center; gap: 28px; height: 76px; }
.header__logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header__logo img { height: 34px; width: auto; }
.header__nav { display: flex; gap: 26px; margin-left: auto; }
.header__nav a { font-size: 14px; font-weight: 500; color: var(--ink-2); position: relative; }
.header__nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: var(--gold); transition: width .25s var(--ease);
}
.header__nav a:hover { color: var(--ink); }
.header__nav a:hover::after { width: 100%; }
.header__actions { display: flex; align-items: center; gap: 12px; }
.header__icon {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink-2); border: 1px solid var(--border); background: var(--white);
  transition: all .2s var(--ease); position: relative;
}
.header__icon:hover { color: var(--gold-deep); border-color: var(--gold); }
.header__icon .badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--coral); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 9px; display: grid; place-items: center; border: 2px solid var(--paper);
}
.header__burger { display: none; width: 42px; height: 42px; }

/* =====================================================================
   Hero
   ===================================================================== */
.hero { position: relative; overflow: hidden; background: var(--cream); }
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(219, 189, 54, .16), transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 100%, rgba(236, 98, 98, .08), transparent 55%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
  padding-block: clamp(48px, 7vw, 92px);
}
.hero__copy { max-width: 560px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--gold-pale);
  padding: 8px 16px 8px 10px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 700; color: var(--gold-deep);
  box-shadow: var(--shadow-sm); margin-bottom: 26px;
}
.hero__badge .crown { font-size: 15px; }
.hero h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(32px, 5.2vw, 56px); line-height: 1.3; letter-spacing: .02em;
}
.hero h1 .hl { position: relative; color: var(--gold-rich); white-space: nowrap; }
.hero h1 .hl::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: 6%; height: 28%;
  background: rgba(219, 189, 54, .26); z-index: -1; border-radius: 3px;
}
.hero__lead { margin-top: 26px; font-size: 16px; color: var(--ink-2); line-height: 2; }
.hero__cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero__trust { display: flex; gap: 26px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); }
.hero__trust .num { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--gold-rich); line-height: 1; }
.hero__trust .lbl { font-size: 12px; color: var(--ink-2); margin-top: 7px; }

.hero__visual { position: relative; }
.hero__visual .frame {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}
.hero__visual .frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__float {
  position: absolute; background: var(--paper); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 14px 18px; display: flex; align-items: center; gap: 12px;
}
.hero__float--tl { top: 26px; left: -34px; }
.hero__float--br { bottom: 30px; right: -28px; }
.hero__float .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.hero__float .ic--g { background: rgba(219,189,54,.18); color: var(--gold-deep); }
.hero__float .ic--c { background: rgba(236,98,98,.14); color: var(--coral-deep); }
.hero__float .t1 { font-weight: 700; font-size: 14px; }
.hero__float .t2 { font-size: 11.5px; color: var(--ink-2); }

/* =====================================================================
   Search bar (Hero下) - 新検索体験
   ===================================================================== */
.searchbar {
  position: relative; z-index: 2; margin-top: -38px;
}
.searchbar__card {
  background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 12px; border: 1px solid var(--border-soft);
}
.searchbar__row { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 4px; align-items: stretch; }
.searchbar__field { position: relative; padding: 12px 18px; border-radius: var(--radius); transition: background .2s; cursor: pointer; }
.searchbar__field:hover { background: var(--cream); }
.searchbar__field + .searchbar__field::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 60%; background: var(--border);
}
.searchbar__field .lbl { font-size: 11px; font-weight: 700; color: var(--gold-deep); letter-spacing: .08em; display: flex; align-items: center; gap: 6px; }
.searchbar__field .val { font-size: 15px; font-weight: 500; color: var(--ink); margin-top: 4px; }
.searchbar__field .val.placeholder { color: var(--ink-3); font-weight: 400; }
.searchbar__submit { align-self: center; }
.searchbar__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; justify-content: center; }
.searchbar__tags .label { font-size: 12px; color: var(--ink-2); margin-right: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: var(--radius-pill);
  background: var(--white); border: 1px solid var(--border); font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: all .2s var(--ease);
}
.chip:hover, .chip.is-active { border-color: var(--gold); background: rgba(219,189,54,.12); color: var(--gold-deep); }
.chip .ic { font-size: 14px; }

/* =====================================================================
   Stat strip
   ===================================================================== */
.statstrip { background: var(--white); border-block: 1px solid var(--border); }
.statstrip__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.statstrip__item { text-align: center; padding: 30px 16px; position: relative; }
.statstrip__item + .statstrip__item::before { content: ""; position: absolute; left: 0; top: 28%; height: 44%; width: 1px; background: var(--border); }
.statstrip__num { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; color: var(--gold-rich); }
.statstrip__num small { font-size: .5em; margin-left: 2px; color: var(--ink-2); }
.statstrip__lbl { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }

/* =====================================================================
   Venue cards grid
   ===================================================================== */
.venue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.venue-card {
  background: var(--paper); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  display: flex; flex-direction: column;
}
.venue-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.venue-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.venue-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.venue-card:hover .venue-card__media img { transform: scale(1.06); }
.venue-card__media.ph { background: linear-gradient(135deg, var(--gold-pale), var(--cream-deep)); display: grid; place-items: center; }
.venue-card__media.ph.c2 { background: linear-gradient(135deg, #f0c9c2, var(--cream-deep)); }
.venue-card__media.ph.c3 { background: linear-gradient(135deg, #d9cfa0, var(--cream-deep)); }
.venue-card__media.ph .ph-ic { font-size: 40px; opacity: .5; }
.venue-card__ribbon {
  position: absolute; top: 14px; left: 14px; display: flex; gap: 7px;
}
.tag-pill {
  font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: var(--radius-pill);
  background: rgba(44,38,32,.72); color: #fff; backdrop-filter: blur(4px);
}
.tag-pill--gold { background: linear-gradient(135deg, var(--gold-soft), var(--gold-rich)); color: #2c2110; }
.tag-pill--coral { background: var(--coral); }
.venue-card__fav {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.9); display: grid; place-items: center; color: var(--ink-3);
  backdrop-filter: blur(4px); transition: all .2s var(--ease); box-shadow: var(--shadow-sm);
}
.venue-card__fav:hover { color: var(--coral); transform: scale(1.1); }
.venue-card__fav.is-active { color: var(--coral); background: #fff; }
.venue-card__fav.is-active svg { fill: var(--coral); }
.venue-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.venue-card__area { font-size: 12px; color: var(--gold-deep); font-weight: 700; letter-spacing: .04em; display: flex; align-items: center; gap: 5px; }
.venue-card__name { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.45; margin-top: 7px; }
.venue-card__desc { font-size: 13px; color: var(--ink-2); margin-top: 9px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.venue-card__meta { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.venue-card__meta span { font-size: 12.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; }
.venue-card__meta .ic { color: var(--gold-rich); }
.venue-card__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border-soft); margin-top: 16px; }
.venue-card__price .p { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink); }
.venue-card__price .u { font-size: 11px; color: var(--ink-3); }
.venue-card__cmp { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.venue-card__cmp input { accent-color: var(--gold-rich); width: 15px; height: 15px; }

.center-cta { text-align: center; margin-top: 48px; }

/* =====================================================================
   Feature steps (ご利用の流れ)
   ===================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step {
  background: var(--paper); border-radius: var(--radius-lg); padding: 32px 24px; position: relative;
  border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.step__num {
  font-family: var(--serif); font-size: 15px; font-weight: 700; color: #fff;
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-rich));
}
.step__ic { font-size: 30px; margin: 18px 0 14px; }
.step h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.step p { font-size: 13.5px; color: var(--ink-2); margin-top: 9px; line-height: 1.75; }
.step::after {
  content: "→"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 20px; font-weight: 700; z-index: 2;
}
.step:last-child::after { display: none; }

/* =====================================================================
   AI Concierge band (新機能)
   ===================================================================== */
.concierge { position: relative; overflow: hidden; }
.concierge__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
  background: linear-gradient(135deg, #2a2520, #3a322a);
  border-radius: var(--radius-lg); padding: clamp(34px, 5vw, 64px); color: #f3ede1;
  position: relative; overflow: hidden;
}
.concierge__inner::before {
  content: ""; position: absolute; top: -40%; right: -10%; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(219,189,54,.22), transparent 70%);
}
.concierge__copy { position: relative; }
.concierge__copy .eyebrow { color: var(--gold); }
.concierge__copy h2 { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 38px); font-weight: 600; line-height: 1.4; margin-top: 14px; }
.concierge__copy h2 .accent { color: var(--gold); }
.concierge__copy p { color: #cfc6b8; margin-top: 18px; line-height: 2; font-size: 15px; }
.concierge__copy .btn { margin-top: 28px; }
.concierge__chat {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg); padding: 22px; position: relative; backdrop-filter: blur(6px);
}
.chat-msg { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; }
.chat-msg__av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 18px; }
.chat-msg__av--ai { background: linear-gradient(135deg, var(--gold-soft), var(--gold-rich)); }
.chat-msg__av--user { background: rgba(236,98,98,.3); margin-left: auto; }
.chat-msg__bubble { background: rgba(255,255,255,.10); padding: 12px 16px; border-radius: 14px; font-size: 13.5px; line-height: 1.7; max-width: 80%; }
.chat-msg--user { flex-direction: row-reverse; }
.chat-msg--user .chat-msg__bubble { background: rgba(236,98,98,.22); }
.chat-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chat-quick button { font-size: 12.5px; padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,.10); color: #f3ede1; border: 1px solid rgba(255,255,255,.16); transition: all .2s; }
.chat-quick button:hover { background: var(--gold); color: #2c2110; border-color: var(--gold); }

/* =====================================================================
   Feature cards (幹事サポート機能)
   ===================================================================== */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feat {
  background: var(--paper); border-radius: var(--radius-lg); padding: 32px 28px;
  border: 1px solid var(--border-soft); transition: all .3s var(--ease); position: relative; overflow: hidden;
}
.feat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--coral)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.feat:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.feat:hover::before { transform: scaleX(1); }
.feat__ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: rgba(219,189,54,.14); margin-bottom: 18px; }
.feat__ic.c { background: rgba(236,98,98,.12); }
.feat__new { position: absolute; top: 20px; right: 20px; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #fff; background: var(--coral); padding: 4px 9px; border-radius: var(--radius-pill); }
.feat h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.feat p { font-size: 13.5px; color: var(--ink-2); margin-top: 10px; line-height: 1.75; }

/* =====================================================================
   Browse by (条件から探す)
   ===================================================================== */
.browse-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.browse-item {
  background: var(--paper); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 22px 12px; text-align: center; transition: all .25s var(--ease);
}
.browse-item:hover { border-color: var(--gold); background: rgba(219,189,54,.07); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.browse-item .ic { font-size: 28px; }
.browse-item .t { font-size: 13px; font-weight: 600; margin-top: 10px; }
.browse-item .c { font-size: 11px; color: var(--ink-3); margin-top: 3px; }

/* =====================================================================
   Calendar (繁忙目安)
   ===================================================================== */
.calwrap { background: var(--paper); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-soft); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cal-head h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.cal-legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-2); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .dot { width: 12px; height: 12px; border-radius: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.cal-grid .dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-2); padding-bottom: 6px; }
.cal-cell { aspect-ratio: 1; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; position: relative; transition: transform .15s; cursor: pointer; }
.cal-cell:hover { transform: scale(1.08); }
.cal-cell.empty { background: transparent; cursor: default; }
.cal-cell.lv-3 { background: rgba(121,179,19,.16); color: #4d7a0a; }
.cal-cell.lv-2 { background: rgba(219,189,54,.20); color: var(--gold-deep); }
.cal-cell.lv-1 { background: rgba(236,98,98,.16); color: var(--coral-deep); }
.cal-cell .mk { font-size: 14px; margin-top: 1px; }

/* =====================================================================
   Magazine / 特集
   ===================================================================== */
.mag-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
.mag-card { border-radius: var(--radius-lg); overflow: hidden; position: relative; background: var(--paper); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease); display: flex; flex-direction: column; }
.mag-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.mag-card--feature { grid-row: span 1; }
.mag-card__media { aspect-ratio: 16/10; overflow: hidden; }
.mag-card--feature .mag-card__media { aspect-ratio: 16/11; }
.mag-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mag-card__media.ph { background: linear-gradient(135deg, var(--gold-pale), #e7d8b8); display: grid; place-items: center; font-size: 38px; opacity: .9; }
.mag-card__media.ph.b { background: linear-gradient(135deg, #e9b6ad, #f0d9c2); }
.mag-card:hover .mag-card__media img { transform: scale(1.05); }
.mag-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.mag-card__cat { font-size: 11px; font-weight: 700; color: var(--coral-deep); letter-spacing: .08em; }
.mag-card__title { font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.5; margin-top: 9px; }
.mag-card--feature .mag-card__title { font-size: 22px; }
.mag-card__date { font-size: 12px; color: var(--ink-3); margin-top: auto; padding-top: 14px; }

/* =====================================================================
   LINE CTA band (LINE登録強化 - 重点施策)
   ===================================================================== */
.lineband { background: linear-gradient(135deg, #f3f9ec, #e8f5dc); border-radius: var(--radius-lg); padding: clamp(34px,5vw,56px); display: grid; grid-template-columns: 1.3fr auto; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.lineband__copy .tag { display: inline-flex; align-items: center; gap: 8px; background: var(--line); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-pill); }
.lineband__copy h2 { font-family: var(--serif); font-size: clamp(24px,3.4vw,34px); font-weight: 600; margin-top: 16px; line-height: 1.4; }
.lineband__copy p { color: var(--ink-2); margin-top: 14px; line-height: 1.9; }
.lineband__copy .pts { display: flex; gap: 22px; margin-top: 20px; flex-wrap: wrap; }
.lineband__copy .pts span { font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.lineband__copy .pts .ic { color: var(--line-deep); }
.lineband__qr { background: #fff; border-radius: var(--radius); padding: 22px; text-align: center; box-shadow: var(--shadow-md); }
.lineband__qr .qr { width: 130px; height: 130px; margin: 0 auto 12px; border-radius: 10px; background:
  conic-gradient(from 0deg, #222 0 25%, #fff 0 50%, #222 0 75%, #fff 0) 0 0/22px 22px,
  #fff; border: 6px solid #fff; box-shadow: inset 0 0 0 1px var(--border); position: relative; }
.lineband__qr .qr::after { content: "LINE"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--line-deep); background: rgba(255,255,255,.78); border-radius: 6px; }
.lineband__qr .t { font-size: 12.5px; font-weight: 700; }
.lineband__qr .c { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* =====================================================================
   Footer
   ===================================================================== */
.footer { background: #211d18; color: #cdc4b6; padding-block: 64px 0; }
.footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer__brand img { height: 32px; filter: brightness(0) invert(1) opacity(.9); }
.footer__brand p { font-size: 13px; line-height: 1.9; margin-top: 18px; color: #a59c8e; max-width: 300px; }
.footer__brand .tel { margin-top: 20px; }
.footer__brand .tel .n { font-family: var(--serif); font-size: 24px; font-weight: 700; color: #fff; }
.footer__brand .tel .h { font-size: 12px; color: #a59c8e; }
.footer__col h4 { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .08em; margin-bottom: 16px; }
.footer__col a { display: block; font-size: 13px; padding: 6px 0; color: #a59c8e; }
.footer__col a:hover { color: var(--gold); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-block: 24px; font-size: 12px; color: #8a8174; flex-wrap: wrap; gap: 12px; }
.footer__bottom .sns { display: flex; gap: 12px; }
.footer__bottom .sns a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.06); display: grid; place-items: center; transition: all .2s; }
.footer__bottom .sns a:hover { background: var(--gold); color: #2c2110; }

/* =====================================================================
   Mobile sticky CTA bar
   ===================================================================== */
.mobile-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--paper); border-top: 1px solid var(--border); padding: 10px 14px; gap: 10px; box-shadow: 0 -6px 20px rgba(63,52,35,.10); }
.mobile-cta .btn { flex: 1; padding: 13px; font-size: 14px; }

/* =====================================================================
   Modal (AI Concierge / 検索)
   ===================================================================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(33,29,24,.55); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .25s;
}
.modal-overlay.is-open { display: flex; opacity: 1; }
.modal {
  background: var(--paper); border-radius: var(--radius-lg); width: 100%; max-width: 520px; max-height: 90vh;
  overflow: hidden; box-shadow: var(--shadow-lg); transform: translateY(16px) scale(.98); transition: transform .3s var(--ease);
  display: flex; flex-direction: column;
}
.modal-overlay.is-open .modal { transform: none; }
.modal__head { padding: 22px 24px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 12px; }
.modal__head .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-soft), var(--gold-rich)); display: grid; place-items: center; font-size: 20px; }
.modal__head h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.modal__head p { font-size: 12px; color: var(--ink-2); }
.modal__close { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); background: var(--cream); }
.modal__close:hover { background: var(--cream-deep); }
.modal__body { padding: 24px; overflow-y: auto; }
.q-step h4 { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.5; }
.q-step .sub { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.q-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.q-opt { padding: 18px 16px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--white); text-align: left; transition: all .2s var(--ease); display: flex; align-items: center; gap: 12px; }
.q-opt:hover { border-color: var(--gold); background: rgba(219,189,54,.08); transform: translateY(-2px); }
.q-opt .ic { font-size: 24px; }
.q-opt .t { font-weight: 600; font-size: 14px; }
.q-opt .d { font-size: 11.5px; color: var(--ink-2); }
.q-progress { height: 5px; background: var(--cream-deep); border-radius: 3px; margin-bottom: 22px; overflow: hidden; }
.q-progress__bar { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-rich)); border-radius: 3px; transition: width .4s var(--ease); }
.q-result { text-align: center; padding: 12px 0; }
.q-result .big { font-size: 46px; }
.q-result h4 { font-family: var(--serif); font-size: 22px; margin-top: 12px; }
.q-result p { color: var(--ink-2); margin-top: 10px; font-size: 14px; }
.q-result .rcount { color: var(--gold-rich); font-weight: 700; }

/* =====================================================================
   Reveal animation
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .hero__visual { max-width: 460px; }
  .hero__float--tl { left: 8px; } .hero__float--br { right: 8px; }
  .venue-grid, .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .browse-grid { grid-template-columns: repeat(4, 1fr); }
  .mag-grid { grid-template-columns: 1fr 1fr; }
  .mag-card--feature { grid-column: span 2; }
  .concierge__inner { grid-template-columns: 1fr; }
  .searchbar__row { grid-template-columns: 1fr 1fr; }
  .searchbar__field + .searchbar__field:nth-child(odd)::before { display: none; }
  .searchbar__submit { grid-column: span 2; margin-top: 6px; }
  .searchbar__submit .btn { width: 100%; }
}
@media (max-width: 680px) {
  body { padding-bottom: 72px; }
  .header__nav { display: none; }
  .header__burger { display: grid; place-items: center; }
  .header__actions .btn { display: none; }
  .hero__inner { padding-block: 36px; }
  .hero__trust { gap: 16px; }
  .statstrip__inner { grid-template-columns: 1fr 1fr; }
  .statstrip__item:nth-child(3)::before, .statstrip__item:nth-child(1)::before { display: none; }
  .venue-grid, .feat-grid, .steps, .mag-grid { grid-template-columns: 1fr; }
  .mag-card--feature { grid-column: span 1; }
  .browse-grid { grid-template-columns: repeat(3, 1fr); }
  .lineband { grid-template-columns: 1fr; text-align: center; }
  .lineband__copy .pts { justify-content: center; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: span 2; }
  .q-options { grid-template-columns: 1fr; }
  .mobile-cta { display: flex; }
  .searchbar { margin-top: 18px; }
  .searchbar__row { grid-template-columns: 1fr; }
  .searchbar__field + .searchbar__field::before { display: none; }
  .searchbar__submit { grid-column: span 1; }
}

/* =====================================================================
   Sub-pages（検索結果 / 会場詳細＋プラン / 一括リクエスト）
   ===================================================================== */
.btn--sm { padding: 9px 16px; font-size: 13px; }

/* ---- Breadcrumb ---- */
.breadcrumb { padding: 16px 0 0; font-size: 12.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb a:hover { color: var(--gold-deep); }
.breadcrumb .sep { color: var(--ink-3); }
.breadcrumb .cur { color: var(--ink); }

/* ---- Page intro ---- */
.page-intro { padding: 22px 0 8px; }
.page-intro h1 { font-family: var(--serif); font-size: clamp(22px, 3.2vw, 30px); font-weight: 600; }
.page-intro p { color: var(--ink-2); font-size: 14px; margin-top: 6px; }

/* ---- Rank note banner ---- */
.rank-note { display: flex; align-items: center; gap: 12px; background: rgba(219,189,54,.10); border: 1px solid var(--gold-pale); border-radius: var(--radius); padding: 12px 16px; font-size: 13px; color: var(--ink-2); margin: 16px 0 22px; }
.rank-note .ic { font-size: 18px; }
.rank-note b { color: var(--gold-deep); }

/* =================== Search layout =================== */
.searchlayout { display: grid; grid-template-columns: 268px 1fr; gap: 28px; align-items: start; padding-bottom: 30px; }
.filters { position: sticky; top: 92px; background: var(--paper); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 8px 20px 20px; box-shadow: var(--shadow-sm); }
.filter-group { padding: 18px 0; border-bottom: 1px solid var(--border-soft); }
.filter-group:last-child { border-bottom: none; }
.filter-group h4 { font-size: 13px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.filter-opt { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.filter-opt input { accent-color: var(--gold-rich); width: 16px; height: 16px; }
.filter-opt:hover { color: var(--ink); }
.filter-opt .ct { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-reset { width: 100%; margin-top: 14px; font-size: 12.5px; color: var(--coral-deep); text-align: center; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.filter-reset:hover { background: var(--cream); }

.results-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.results-count { font-size: 14px; color: var(--ink-2); }
.results-count b { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-right: 2px; }
.results-tools { display: flex; gap: 10px; align-items: center; }
.sortbar { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.sortbar select { font-family: inherit; font-size: 13px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--white); color: var(--ink); cursor: pointer; }
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.view-toggle button { padding: 8px 14px; font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
.view-toggle button.is-active { background: var(--ink); color: #fff; }
.filters-toggle { display: none; }

.results-list { display: grid; gap: 16px; }
.map-ph { display: none; height: 540px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #eef0ea, #e3e7dc); border: 1px solid var(--border); position: relative; overflow: hidden; }
.map-ph.is-on { display: block; }
.map-ph::after { content: "🗺  地図表示（プロトタイプ）"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-2); font-size: 14px; }
.map-ph .pin { position: absolute; width: 30px; height: 30px; background: var(--coral); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: var(--shadow-md); }

/* venue card — horizontal row variant for results */
.venue-card--row { flex-direction: row; }
.venue-card--row .venue-card__media { aspect-ratio: auto; width: 240px; flex-shrink: 0; }
.venue-card--row .venue-card__body { flex: 1; }
.venue-card__rank { position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--gold-soft), var(--gold-rich)); color: #2c2110; font-family: var(--serif); font-weight: 700; font-size: 14px; display: grid; place-items: center; box-shadow: var(--shadow-sm); }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 34px; }
.pagination a { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--border); font-size: 14px; color: var(--ink-2); background: var(--white); }
.pagination a:hover { border-color: var(--gold); color: var(--gold-deep); }
.pagination a.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* =================== Venue detail =================== */
.detail-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-top: 18px; height: 440px; }
.detail-gallery__main { border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.detail-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery__side { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.detail-gallery__side > div { border-radius: var(--radius); overflow: hidden; position: relative; }
.detail-gallery__side img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery .more { position: absolute; inset: 0; background: rgba(33,29,24,.5); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 600; cursor: pointer; }
.ph-photo { background: linear-gradient(135deg, var(--gold-pale), var(--cream-deep)); display: grid; place-items: center; font-size: 40px; opacity: .7; width: 100%; height: 100%; }
.ph-photo.c2 { background: linear-gradient(135deg, #f0c9c2, var(--cream-deep)); }
.ph-photo.c3 { background: linear-gradient(135deg, #d9cfa0, var(--cream-deep)); }

.detail-layout { display: grid; grid-template-columns: 1fr 344px; gap: 36px; align-items: start; padding: 30px 0 40px; }
.detail-header h1 { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 34px); font-weight: 600; line-height: 1.4; }
.detail-area { color: var(--gold-deep); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.detail-rating { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.detail-rating .stars { color: var(--gold-rich); font-size: 15px; letter-spacing: 2px; }

.infobar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; margin: 24px 0; }
.infobar .cell { background: var(--paper); padding: 16px; text-align: center; }
.infobar .lbl { font-size: 11.5px; color: var(--ink-3); }
.infobar .val { font-size: 15px; font-weight: 700; margin-top: 4px; }
.infobar .val small { font-size: 11px; font-weight: 400; color: var(--ink-2); }

.detail-section { padding: 26px 0; border-top: 1px solid var(--border-soft); }
.detail-section > h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.detail-section p.lead { color: var(--ink-2); line-height: 1.9; font-size: 14.5px; }

/* plan cards */
.plan-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 16px; transition: all .25s var(--ease); background: var(--paper); }
.plan-card:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.plan-card.is-featured { border-color: var(--gold); border-width: 1.5px; }
.plan-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.plan-card__name { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.plan-card__badge { font-size: 11px; font-weight: 700; color: #2c2110; background: linear-gradient(135deg, var(--gold-soft), var(--gold-rich)); padding: 4px 10px; border-radius: var(--radius-pill); margin-left: 8px; }
.plan-card__price { text-align: right; flex-shrink: 0; }
.plan-card__price .p { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--coral-deep); }
.plan-card__price .u { font-size: 11px; color: var(--ink-3); display: block; }
.plan-card__desc { font-size: 13.5px; color: var(--ink-2); margin: 10px 0 14px; line-height: 1.8; }
.plan-card__list { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.plan-card__list span { font-size: 12.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.plan-card__list .ic { color: var(--gold-rich); }
.plan-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
.plan-card__foot .meta { font-size: 12.5px; color: var(--ink-2); }

/* facilities */
.facility-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.facility { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius); font-size: 13px; }
.facility .ic { font-size: 18px; }
.facility.off { color: var(--ink-3); opacity: .55; }
.facility.off .ic { filter: grayscale(1); }

/* reviews */
.review { padding: 18px 0; border-bottom: 1px solid var(--border-soft); }
.review:last-child { border-bottom: none; }
.review__head { display: flex; align-items: center; gap: 12px; }
.review__av { width: 40px; height: 40px; border-radius: 50%; background: rgba(219,189,54,.18); color: var(--gold-deep); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.review__meta .n { font-weight: 600; font-size: 14px; }
.review__meta .s { color: var(--gold-rich); font-size: 13px; letter-spacing: 1px; }
.review__date { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.review__body { font-size: 13.5px; color: var(--ink-2); line-height: 1.85; margin-top: 10px; }

/* access / faq */
.access-map { height: 260px; border-radius: var(--radius); background: linear-gradient(135deg, #eef0ea, #e3e7dc); position: relative; overflow: hidden; border: 1px solid var(--border); }
.access-map::after { content: "🗺  地図（プロトタイプ）"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-2); font-size: 13px; }
.access-info { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); line-height: 1.9; }
.faq-item { padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.faq-item .q { font-weight: 600; font-size: 14.5px; display: flex; gap: 10px; }
.faq-item .q::before { content: "Q"; color: var(--gold-rich); font-family: var(--serif); font-weight: 700; }
.faq-item .a { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; padding-left: 22px; line-height: 1.85; }

/* detail sticky CTA */
.cta-box { position: sticky; top: 92px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-md); }
.cta-box__price { display: flex; align-items: baseline; gap: 6px; }
.cta-box__price .p { font-family: var(--serif); font-size: 30px; font-weight: 700; }
.cta-box__price .u { font-size: 12px; color: var(--ink-3); }
.cta-box__note { font-size: 12px; color: var(--ink-2); margin: 4px 0 18px; }
.cta-box .btn { width: 100%; margin-bottom: 10px; }
.cta-box__mini { display: flex; gap: 10px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.cta-box__mini button { flex: 1; font-size: 12.5px; color: var(--ink-2); padding: 9px; border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; gap: 6px; }
.cta-box__mini button:hover { border-color: var(--gold); color: var(--gold-deep); }
.cta-box__trust { font-size: 11.5px; color: var(--ink-3); margin-top: 14px; text-align: center; line-height: 1.7; }

/* =================== Request form =================== */
.req-layout { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: start; padding: 24px 0 50px; }
.req-steps { display: flex; gap: 8px; margin-bottom: 26px; }
.req-steps .st { flex: 1; text-align: center; font-size: 12.5px; color: var(--ink-3); padding-bottom: 12px; border-bottom: 3px solid var(--border-soft); }
.req-steps .st.is-active { color: var(--gold-deep); font-weight: 700; border-color: var(--gold); }
.req-steps .st .n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cream-deep); margin-right: 6px; font-size: 11px; }
.req-steps .st.is-active .n { background: var(--gold); color: #2c2110; }

.form-card { background: var(--paper); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.form-row { margin-bottom: 22px; }
.form-row:last-child { margin-bottom: 0; }
.form-label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 9px; }
.form-label .req { color: var(--coral); font-size: 11px; margin-left: 6px; }
.form-label .opt { color: var(--ink-3); font-size: 11px; font-weight: 400; margin-left: 6px; }
.form-input, .form-select, .form-textarea { width: 100%; font-family: inherit; font-size: 14px; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); color: var(--ink); transition: border-color .2s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(219,189,54,.15); }
.form-textarea { resize: vertical; min-height: 92px; }
.form-help { font-size: 12px; color: var(--ink-3); margin-top: 7px; }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.date-pref { display: grid; gap: 10px; }
.date-pref .row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; }
.date-pref .row .lab { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }

.pillselect { display: flex; flex-wrap: wrap; gap: 9px; }
.pill-opt { padding: 10px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); font-size: 13px; color: var(--ink-2); cursor: pointer; transition: all .2s var(--ease); user-select: none; }
.pill-opt:hover { border-color: var(--gold); }
.pill-opt.is-sel { border-color: var(--gold-rich); background: rgba(219,189,54,.12); color: var(--gold-deep); font-weight: 600; }

/* selected venues summary */
.req-summary { position: sticky; top: 92px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-md); }
.req-summary h3 { font-family: var(--serif); font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.sel-venue { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.sel-venue__img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.sel-venue__img.ph { background: linear-gradient(135deg, var(--gold-pale), var(--cream-deep)); display: grid; place-items: center; font-size: 20px; }
.sel-venue__name { font-size: 13px; font-weight: 600; line-height: 1.4; }
.sel-venue__area { font-size: 11.5px; color: var(--ink-3); }
.sel-venue__rm { margin-left: auto; color: var(--ink-3); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; flex-shrink: 0; }
.sel-venue__rm:hover { background: var(--cream); color: var(--coral); }
.req-summary__note { font-size: 12px; color: var(--ink-2); background: var(--cream); border-radius: var(--radius); padding: 12px; margin-top: 16px; line-height: 1.7; }
.trust-row { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.trust-row span { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.trust-row .ic { color: var(--line-deep); }

/* success screen */
.success-screen { display: none; text-align: center; padding: 50px 20px; }
.success-screen.is-on { display: block; }
.success-icon { width: 84px; height: 84px; border-radius: 50%; background: rgba(121,179,19,.15); display: grid; place-items: center; font-size: 40px; margin: 0 auto 22px; }
.success-screen h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.success-screen p { color: var(--ink-2); margin-top: 12px; line-height: 1.9; }
.success-actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* ---- Sub-page responsive ---- */
@media (max-width: 1024px) {
  .searchlayout { grid-template-columns: 1fr; }
  .filters { position: static; display: none; }
  .filters.is-open { display: block; }
  .filters-toggle { display: inline-flex; }
  .detail-layout, .req-layout { grid-template-columns: 1fr; }
  .cta-box, .req-summary { position: static; }
  .infobar { grid-template-columns: repeat(2, 1fr); }
  .facility-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .detail-gallery { grid-template-columns: 1fr; height: auto; }
  .detail-gallery__main { height: 240px; }
  .detail-gallery__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; height: 110px; }
  .venue-card--row { flex-direction: column; }
  .venue-card--row .venue-card__media { width: 100%; aspect-ratio: 3/2; }
  .facility-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid2 { grid-template-columns: 1fr; }
  .results-head { align-items: flex-start; }
}

/* ---- Auth（会員登録 / SSO） ---- */
.header__login { font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 0 6px; }
.header__login:hover { color: var(--gold-deep); }
.auth-providers { display: flex; flex-direction: column; gap: 12px; }
.auth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--white); font-size: 14px; font-weight: 600; color: var(--ink); transition: all .2s var(--ease); }
.auth-btn:hover { border-color: var(--ink-3); background: var(--cream); transform: translateY(-1px); }
.auth-divider { text-align: center; position: relative; margin: 4px 0; }
.auth-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); }
.auth-divider span { position: relative; background: var(--paper); padding: 0 14px; font-size: 12px; color: var(--ink-3); }
.auth-note { font-size: 11.5px; color: var(--ink-3); text-align: center; margin-top: 16px; line-height: 1.7; }
.auth-note a { color: var(--gold-deep); }
.auth-toggle { font-size: 13px; color: var(--ink-2); text-align: center; margin-top: 14px; }
.auth-toggle a { color: var(--gold-deep); font-weight: 600; }
@media (max-width: 680px) { .header__login { display: none; } }

/* =================== Messages / Chat（ユーザー⇄店舗・CMS連携） =================== */
.notif-banner { display: flex; align-items: center; gap: 12px; background: rgba(219,189,54,.12); border: 1px solid var(--gold-pale); border-radius: var(--radius); padding: 12px 16px; font-size: 13px; color: var(--ink-2); margin: 16px 0; }
.notif-banner .ic { font-size: 18px; }
.notif-banner b { color: var(--gold-deep); }
.msg-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; height: 620px; margin-bottom: 40px; }
.thread-list { background: var(--paper); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.thread-list__head { padding: 16px 18px; border-bottom: 1px solid var(--border-soft); font-family: var(--serif); font-weight: 600; font-size: 16px; }
.thread-list__scroll { overflow-y: auto; flex: 1; }
.thread { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background .15s; }
.thread:hover { background: var(--cream); }
.thread.is-active { background: rgba(219,189,54,.10); box-shadow: inset 3px 0 0 var(--gold); }
.thread__av { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.thread__av.ph { background: linear-gradient(135deg, var(--gold-pale), var(--cream-deep)); display: grid; place-items: center; font-size: 18px; }
.thread__main { flex: 1; min-width: 0; }
.thread__name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.thread__name .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex-shrink: 0; }
.thread__preview { font-size: 12px; color: var(--ink-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread__time { font-size: 11px; color: var(--ink-3); flex-shrink: 0; }
.chat-panel { background: var(--paper); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.chat-head { padding: 14px 20px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 12px; }
.chat-head__av { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.chat-head__name { font-weight: 700; font-size: 15px; }
.chat-head__meta { font-size: 12px; color: var(--ink-2); }
.chat-head__status { margin-left: auto; font-size: 11.5px; color: var(--line-deep); display: flex; align-items: center; gap: 5px; }
.chat-head__status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.chat-context { padding: 10px 20px; background: var(--cream); border-bottom: 1px solid var(--border-soft); font-size: 12px; color: var(--ink-2); display: flex; gap: 16px; flex-wrap: wrap; }
.chat-context b { color: var(--ink); }
.chat-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; background: var(--cream); }
.msg-sys { text-align: center; font-size: 11.5px; color: var(--ink-3); }
.msg-row { display: flex; gap: 10px; max-width: 82%; }
.msg-row--store { align-self: flex-start; }
.msg-row--user { align-self: flex-end; flex-direction: row-reverse; }
.msg-av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 15px; }
.msg-av--store { background: rgba(219,189,54,.18); }
.msg-av--user { background: rgba(236,98,98,.16); }
.msg-bubble { padding: 11px 15px; border-radius: 14px; font-size: 13.5px; line-height: 1.7; }
.msg-row--store .msg-bubble { background: var(--white); border: 1px solid var(--border-soft); border-top-left-radius: 4px; }
.msg-row--user .msg-bubble { background: linear-gradient(135deg, var(--coral), var(--coral-deep)); color: #fff; border-top-right-radius: 4px; }
.msg-time { font-size: 10.5px; color: var(--ink-3); margin-top: 5px; }
.msg-row--user .msg-time { text-align: right; }
.quote-card { background: var(--white); border: 1px solid var(--gold-pale); border-radius: var(--radius); overflow: hidden; max-width: 340px; }
.quote-card__head { background: rgba(219,189,54,.14); padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--gold-deep); display: flex; align-items: center; gap: 7px; }
.quote-card__body { padding: 14px; }
.quote-card__line { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); padding: 4px 0; }
.quote-card__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--border-soft); margin-top: 8px; padding-top: 10px; }
.quote-card__total .lbl { font-size: 12px; color: var(--ink-2); }
.quote-card__total .v { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--coral-deep); }
.quote-card__file { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); margin-top: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.quote-card__file .ic { font-size: 16px; }
.quote-card__actions { display: flex; gap: 8px; margin-top: 12px; }
.quote-card__actions .btn { flex: 1; }
.chat-input { padding: 12px 16px; border-top: 1px solid var(--border-soft); display: flex; gap: 10px; align-items: flex-end; background: var(--paper); }
.chat-input__attach { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); flex-shrink: 0; }
.chat-input__attach:hover { background: var(--cream); color: var(--gold-deep); }
.chat-input textarea { flex: 1; resize: none; font-family: inherit; font-size: 13.5px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 20px; max-height: 100px; min-height: 42px; }
.chat-input textarea:focus { outline: none; border-color: var(--gold); }
.chat-input__send { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--coral), var(--coral-deep)); color: #fff; display: grid; place-items: center; flex-shrink: 0; transition: transform .15s; }
.chat-input__send:hover { transform: scale(1.06); }
.master-note { font-size: 11px; color: var(--ink-3); text-align: center; padding: 9px; background: var(--cream); border-top: 1px solid var(--border-soft); }
@media (max-width: 900px) {
  .msg-layout { grid-template-columns: 1fr; height: auto; }
  .thread-list { height: auto; max-height: 240px; }
  .chat-panel { height: 560px; }
}