@charset "UTF-8";
/* ==========================================================================
   episode / rental — design system
   --------------------------------------------------------------------------
   大阪・南森町 カフェ兼イベントスペース episode のレンタルページ共通CSS。
   全ページがこの1枚を共有する。ページ固有の微調整のみ <style> で足すこと。

   前提となる読み込み（各ページの <head>）:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&family=Noto+Serif+JP:wght@300;400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/assets/css/site.css">

   JS との約束（data属性のトグルのみ。ライブラリ不要）:
     .nav に data-scrolled="true" … スクロール40px超で付ける（白背景へ）
     .nav に data-nav-open="true" … ハンバーガーで開閉（全画面メニュー）
     <html> に data-nav-open="true" … 背面スクロールのロック
     ※ 互換のため .nav--scrolled / .nav--open クラスでも同じ見た目になる。

   ヒーロー写真はインラインの custom property で差し替える:
     <header class="hero" style="--hero-image:url('/assets/img/xxx.jpg')">

   アクセント色はセクション単位で切り替えられる（--accent 系を上書き）:
     <section class="section accent-clay"> … ワークショップ系
     .accent-purple(既定) / .accent-green / .accent-pink / .accent-clay / .accent-blue

   目次
     01 トークン
     02 リセット・基本
     03 レイアウト
     04 タイポグラフィ
     05 ナビゲーション
     06 ヒーロー
     07 カード・グリッド・小部品
     08 料金表
     09 フォーム
     10 ボタン
     11 アコーディオン（FAQ）
     12 CTAバンド
     13 フッター
     14 ユーティリティ
     15 モーション配慮
     16 印刷
   ========================================================================== */


/* ==========================================================================
   01 トークン
   ========================================================================== */

:root {
  /* --- 配色（実際の内装から。勝手に変えないこと） --- */
  --purple: #A790C4;        /* ブランドパープル … ロゴ色。主役 */
  --green: #386663;         /* ディープグリーン … カウンター腰壁 */
  --pink: #C696A8;          /* ダスティピンク … ステージカーテン */
  --clay: #C08A6E;          /* クレイ … ワークショップ用 */
  --blue: #6E8CA8;          /* 青灰 … 撮影用 */

  --ink: #2c2c2c;           /* 本文 */
  --ink-2: #555;            /* 副本文 */
  --ink-3: #777;            /* 補足 */
  --ink-4: #757575;         /* 注記 */
  --gray-bg: #F5F5F5;       /* 淡いグレー背景 */
  --gray-bg-2: #fafafa;     /* さらに淡い背景 */
  --white: #fff;
  --line: #e6e4e8;          /* 罫線（わずかに紫を含ませた灰） */
  --line-soft: #f0eef2;
  --line-input: #c6c1ce;    /* 入力欄の枠。罫線より2段濃く、白地でも明確に見える */

  /* 白地に置いても読める濃度のパープル。リンク・フォーカス用。
     ブランド色 --purple は面・大きな文字・装飾に使う（小さい文字には使わない） */
  --purple-ink: #7B5EA0;
  --danger: #B4564E;        /* 必須マーク・エラー。強すぎない赤 */

  --brand-gradient: linear-gradient(135deg, var(--purple), var(--green));

  /* --- アクセント（セクション単位で上書き可） --- */
  --accent: #A790C4;
  --accent-ink: #7B5EA0;
  --accent-soft: rgba(167, 144, 196, .30);
  --accent-tint: rgba(167, 144, 196, .07);
  --accent-shadow: rgba(167, 144, 196, .18);

  /* --- 書体 --- */
  --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;

  --fs-micro: 11px;         /* 字間の広い英字ラベル */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-h3: clamp(17px, 2vw, 21px);
  --fs-h2: clamp(22px, 3.2vw, 34px);
  --fs-h1: clamp(28px, 5vw, 48px);

  --lh-tight: 1.55;
  --lh-body: 1.7;
  --lh-loose: 2;
  --ls-label: .4em;         /* 英字ラベルの字間 */
  --ls-head: .05em;         /* 見出しの字間 */
  --measure: 42em;          /* 読みやすい1行幅 */

  /* --- 余白スケール --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --gutter: 24px;                              /* 左右の余白 */
  --sec-y: clamp(64px, 8.5vw, 104px);          /* セクションの上下 */

  /* --- 幅 --- */
  --w-wide: 1280px;
  --w-base: 1100px;
  --w-narrow: 840px;

  /* --- 角丸・影・動き --- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-soft: 0 8px 24px rgba(44, 44, 44, .06);
  --shadow-lift: 0 12px 30px rgba(44, 44, 44, .10);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .3s;
  --dur-slow: .5s;

  --nav-h: 76px;
  --focus: #7B5EA0;
}

@media (max-width: 768px) {
  :root {
    --nav-h: 64px;
    --gutter: 20px;
  }
}

/* アクセントのテーマ。任意の要素に付けると配下に効く */
.accent-purple {
  --accent: #A790C4;
  --accent-ink: #7B5EA0;
  --accent-soft: rgba(167, 144, 196, .30);
  --accent-tint: rgba(167, 144, 196, .07);
  --accent-shadow: rgba(167, 144, 196, .18);
}
.accent-green {
  --accent: #386663;
  --accent-ink: #2b5350;
  --accent-soft: rgba(56, 102, 99, .30);
  --accent-tint: rgba(56, 102, 99, .06);
  --accent-shadow: rgba(56, 102, 99, .16);
}
.accent-pink {
  --accent: #C696A8;
  --accent-ink: #9c6479;
  --accent-soft: rgba(198, 150, 168, .32);
  --accent-tint: rgba(198, 150, 168, .07);
  --accent-shadow: rgba(198, 150, 168, .18);
}
.accent-clay {
  --accent: #C08A6E;
  --accent-ink: #96604a;
  --accent-soft: rgba(192, 138, 110, .32);
  --accent-tint: rgba(192, 138, 110, .07);
  --accent-shadow: rgba(192, 138, 110, .18);
}
.accent-blue {
  --accent: #6E8CA8;
  --accent-ink: #4d6580;
  --accent-soft: rgba(110, 140, 168, .32);
  --accent-tint: rgba(110, 140, 168, .07);
  --accent-shadow: rgba(110, 140, 168, .18);
}


/* ==========================================================================
   02 リセット・基本
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* 固定ナビの下に見出しが隠れないように */
[id] {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: var(--lh-body);
  background: var(--white);
  font-feature-settings: "palt" 1;   /* 和文の詰め。字面を整える */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent-ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
a:hover {
  color: var(--accent);
}

/* 本文中のリンクは下線を残す（ナビ・ボタン・カードは除く） */
.prose a,
p > a:not(.btn):not(.card):not(.tag) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  text-decoration-color: var(--accent-soft);
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: var(--lh-tight);
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
/* 見た目を剥がすのはテキスト系だけ。ラジオ・チェックボックスは
   ネイティブの描画を残す（accent-color を効かせるため） */
/* :where() で詳細度を (0,0,1) に抑える。:not() の連鎖をそのまま書くと (0,5,1) になり、
   後段の .field input[type=…] (0,2,1) から border / background を永久に奪ってしまう */
button,
input:where(:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"])),
select,
textarea {
  background: none;
  border: 0;
  border-radius: 0;
}
button {
  cursor: pointer;
}
textarea {
  resize: vertical;
}
::placeholder {
  color: #b6b6b6;
  opacity: 1;
}

summary {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* キーボード操作にだけ出るフォーカスリング */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
/* マウスクリックで出る太い枠は消す（:focus-visible は残る） */
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: rgba(167, 144, 196, .25);
}


/* ==========================================================================
   03 レイアウト
   ========================================================================== */

.container {
  max-width: var(--w-base);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow {
  max-width: var(--w-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wide {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* セクション。上下は大きめに取る */
.section {
  padding-block: var(--sec-y);
}
.section--tint { background: var(--gray-bg); }
.section--tint-soft { background: var(--gray-bg-2); }
/* フォームを含む帯は一段深くして、白い項目カードが浮くようにする */
.section--tint-soft:has(.form) { background: #f4f3f6; }
.section--accent { background: var(--accent-tint); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* 写真と本文の2段組。狭い画面では縦積み */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}
/* 写真と本文の順序を入れ替える（縦積みになると常に上の要素が先に来る） */
.split--reverse > :first-child { order: 2; }
@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

.rule {
  height: 1px;
  border: 0;
  background: var(--line);
  margin-block: var(--sp-7);
}

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }


/* ==========================================================================
   04 タイポグラフィ
   ========================================================================== */

.serif { font-family: var(--font-serif); }
.sans { font-family: var(--font-sans); }

/* 英字の小ラベル（11px・字間広め・大文字） */
.sec-label,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  line-height: 1;
  text-transform: uppercase;
  color: #666;
  margin-bottom: var(--sp-5);
}
.sec-label::before {
  content: "";
  flex: 0 0 28px;
  height: 1px;
  background: var(--accent);
}
.sec-label--plain::before { display: none; }
.sec-label--light,
.sec-label--light.sec-label { color: rgba(255, 255, 255, .85); }
.sec-label--light::before { background: rgba(255, 255, 255, .7); }

/* セクション見出し（明朝・細身） */
.sec-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-head);
  line-height: 1.55;
  margin-bottom: var(--sp-5);
}
.sec-title {
  word-break: auto-phrase;   /* 対応ブラウザでは文節で改行される */
}
.sec-title em,
.sec-title .accent {
  font-style: normal;
  color: var(--accent);
}

.sec-sub {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-head);
  line-height: 1.7;
  margin-bottom: var(--sp-4);
}

/* 導入文 */
.sec-lead,
.lead {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: #444;
  max-width: var(--measure);
  margin-bottom: var(--sp-7);
}
.sec-lead:last-child,
.lead:last-child { margin-bottom: 0; }

/* 通常本文のかたまり */
.prose {
  max-width: var(--measure);
}
.prose > * + * { margin-top: var(--sp-4); }
.prose p { line-height: 1.95; }
.prose strong { font-weight: 500; }

/* 箇条書き（リセットで消しているので明示的に戻す） */
.list {
  padding-left: 1.35em;
  list-style: disc;
}
.list--num {
  padding-left: 1.5em;
  list-style: decimal;
}
.list li {
  line-height: 1.95;
  margin-bottom: var(--sp-2);
}
.list li::marker { color: var(--accent); }
.list--none {
  padding-left: 0;
  list-style: none;
}
/* 中黒つきの横並びリスト（含まれるもの等） */
.list--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-left: 0;
  list-style: none;
}
.list--inline li {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.list--inline li + li::before {
  content: "／";
  color: var(--line);
  margin-right: var(--sp-4);
  margin-left: calc(var(--sp-4) * -1);
}

/* 引用・やわらかい注意書き */
.note {
  border-left: 2px solid var(--accent-soft);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--ink-2);
  max-width: var(--measure);
}
.note--boxed {
  border-left-width: 2px;
  background: var(--accent-tint);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-5);
}
.note strong { font-weight: 500; color: var(--ink); }

/* 小さな注記（※〜） */
.footnote {
  font-size: var(--fs-xs);
  line-height: 1.9;
  color: var(--ink-4);
}


/* ==========================================================================
   05 ナビゲーション
   --------------------------------------------------------------------------
   markup:
     <nav class="nav" data-scrolled="false" data-nav-open="false">
       <div class="nav__bar">
         <a class="nav__logo-link" href="/"><img class="nav__logo" src="…" alt="episode"></a>
         <div class="nav__links"> <a>…</a> </div>
         <button class="nav__toggle" aria-expanded="false" aria-controls="navPanel">
           <span></span><span></span><span></span>
         </button>
       </div>
       <div class="nav__panel" id="navPanel"> <a>…</a> </div>
     </nav>
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition: background var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease);
  border-bottom: 1px solid transparent;
}

.nav__bar {
  position: relative;   /* 全画面メニューより前面に置く */
  z-index: 2;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

/* スクロール後 … 半透明の白 + backdrop-filter */
.nav--scrolled,
.nav--solid,
.nav[data-scrolled="true"] {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 10px rgba(0, 0, 0, .04);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .nav--scrolled,
  .nav--solid,
  .nav[data-scrolled="true"] { background: #fff; }
}

/* ロゴ … ヒーロー上（透明なナビ）では白抜き、白背景では本来のパープル */
.nav__logo {
  height: 32px;
  width: auto;
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
  transition: -webkit-filter var(--dur-slow) var(--ease),
              filter var(--dur-slow) var(--ease),
              height var(--dur) var(--ease);
}
.nav--scrolled .nav__logo,
.nav--solid .nav__logo,
.nav--open .nav__logo,
.nav[data-scrolled="true"] .nav__logo,
.nav[data-nav-open="true"] .nav__logo {   /* メニューを開くと背面が白になるので戻す */
  -webkit-filter: none;
  filter: none;
}

/* PC のメニュー */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: 14px;
  letter-spacing: var(--ls-head);
}
.nav__links a {
  position: relative;
  color: #fff;
  padding-block: var(--sp-1);
}
.nav--scrolled .nav__links a,
.nav--solid .nav__links a,
.nav[data-scrolled="true"] .nav__links a {
  color: var(--ink);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--purple);
  transition: width var(--dur) var(--ease);
}
.nav__links a:hover { color: var(--purple); }
.nav__links a:hover::after { width: 100%; }
.nav__links a[aria-current="page"]::after { width: 100%; }

/* ナビ内の小さなCTA */
.nav__cta {
  padding: 9px 20px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .55);
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  color: #fff;
}
.nav__cta::after { display: none !important; }
.nav__cta:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
.nav--scrolled .nav__cta,
.nav--solid .nav__cta,
.nav[data-scrolled="true"] .nav__cta {
  border-color: var(--accent-soft);
  color: var(--accent-ink);
}
.nav--scrolled .nav__cta:hover,
.nav--solid .nav__cta:hover,
.nav[data-scrolled="true"] .nav__cta:hover {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

/* ハンバーガー */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: #fff;
  transition: transform var(--dur) var(--ease),
              opacity var(--dur) var(--ease),
              background var(--dur-slow) var(--ease);
}
.nav--scrolled .nav__toggle span,
.nav--solid .nav__toggle span,
.nav--open .nav__toggle span,
.nav[data-scrolled="true"] .nav__toggle span,
.nav[data-nav-open="true"] .nav__toggle span {
  background: var(--ink);
}
.nav--open .nav__toggle span:nth-child(1),
.nav[data-nav-open="true"] .nav__toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav--open .nav__toggle span:nth-child(2),
.nav[data-nav-open="true"] .nav__toggle span:nth-child(2) {
  opacity: 0;
}
.nav--open .nav__toggle span:nth-child(3),
.nav[data-nav-open="true"] .nav__toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 全画面メニュー（スマホ） */
.nav__panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: calc(var(--nav-h) + var(--sp-6)) var(--gutter) var(--sp-8);
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}
.nav--open .nav__panel,
.nav[data-nav-open="true"] .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav__panel a {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-head);
  color: var(--ink);
  padding: var(--sp-4) var(--sp-1);
  border-bottom: 1px solid var(--line-soft);
}
.nav__panel a:hover { color: var(--purple); }
.nav__panel .btn {
  margin-top: var(--sp-6);
  border-bottom: 0;
}
.nav__panel-foot {
  margin-top: auto;
  padding-top: var(--sp-6);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--ink-4);
}

/* 開いている間は背面をスクロールさせない（JS が html に data 属性を付ける） */
html[data-nav-open="true"],
body[data-nav-open="true"] {
  overflow: hidden;
}

@media (max-width: 768px) {
  .nav__bar { padding: 19px var(--gutter); }
  .nav__logo { height: 26px; }
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
}
@media (min-width: 769px) {
  /* PC では全画面メニューは存在しない扱い */
  .nav__panel { display: none; }
}


/* ==========================================================================
   06 ヒーロー
   ========================================================================== */

.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + var(--sp-7)) var(--gutter) var(--sp-8);
  text-align: center;
  color: #fff;
  background-color: var(--green);
  background-image: var(--hero-overlay, linear-gradient(135deg, rgba(167, 144, 196, .92), rgba(56, 102, 99, .88))),
                    var(--hero-image, none);
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}
@supports (min-height: 86svh) {
  .hero { min-height: 86svh; }
}
.hero--short { min-height: 58vh; }
@supports (min-height: 58svh) {
  .hero--short { min-height: 58svh; }
}

.hero__inner {
  max-width: 760px;
  width: 100%;
}

.hero-label {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1;
  padding: 9px 20px 9px calc(20px + var(--ls-label));
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-6);
}

.hero h1,
.hero__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: 1.4;
  letter-spacing: var(--ls-head);
  margin-bottom: var(--sp-5);
  word-break: auto-phrase;
}

.hero p,
.hero__text {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: var(--lh-loose);
  max-width: 680px;
  margin: 0 auto var(--sp-7);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background: #fff;
  color: var(--purple-ink);
  padding: 15px 34px;
  border-radius: var(--r-pill);
  font-size: 14px;
  letter-spacing: .1em;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero-cta:hover {
  color: var(--purple-ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}
.hero-cta--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .6);
}
.hero-cta--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

/* ヒーロー下の小さな情報行（住所・営業時間など） */
.hero__meta {
  margin-top: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .8);
}


/* ==========================================================================
   07 カード・グリッド・小部品
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
}
.card-grid--tight {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.card-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card--flat {
  border-color: var(--line);
}
.card--tint {
  background: var(--accent-tint);
  border-color: transparent;
}
.card--pad-lg { padding: var(--sp-7) var(--sp-6); }

.card__num {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

.card__title,
.card h3,
.card h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-md);
  letter-spacing: .03em;
  line-height: 1.65;
  margin-bottom: var(--sp-3);
}

.card p,
.card__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-2);
}
.card > * + .card__foot { margin-top: auto; }
.card__foot {
  padding-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--accent-ink);
}

/* リンクになるカード */
a.card,
.card--link {
  color: inherit;
}
a.card:hover,
.card--link:hover {
  color: inherit;
  border-color: var(--accent);
  box-shadow: 0 10px 26px var(--accent-shadow);
  transform: translateY(-3px);
}
.card__arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  margin-top: var(--sp-4);
}
.card__arrow::after {
  content: "→";
  transition: transform var(--dur) var(--ease);
}
a.card:hover .card__arrow::after { transform: translateX(4px); }

/* 見出しつきの区分（①②③のような大きな括り） */
.block-head {
  margin-bottom: var(--sp-6);
}
.block-head__index {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--accent-ink);
  margin-right: var(--sp-3);
}

/* タグ・チップ（用途の例示） */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.tag {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  line-height: 1;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
  color: var(--accent-ink);
  white-space: nowrap;
}
a.tag:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 数値のスペック（収容人数・面積など） */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
}
.spec {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
.spec__label {
  font-size: var(--fs-micro);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--sp-3);
}
.spec__value {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .02em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.spec__sub {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: var(--sp-2);
}

/* 手順（ご予約までの流れ） */
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line);
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding: var(--sp-5) 0 var(--sp-5) 56px;
  border-bottom: 1px solid var(--line);
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: calc(var(--sp-5) - 2px);
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  display: grid;
  place-items: center;
}
.steps__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-base);
  margin-bottom: var(--sp-2);
}
.steps p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-2);
}

/* 写真 */
.figure {
  margin: 0;
}
.figure img {
  width: 100%;
  border-radius: var(--r-lg);
  object-fit: cover;
}
.figure--tall img { aspect-ratio: 3 / 4; }
.figure--wide img { aspect-ratio: 16 / 10; }
.figure--square img { aspect-ratio: 1 / 1; }
.figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--ink-4);
}


/* ==========================================================================
   08 料金表
   --------------------------------------------------------------------------
   markup（スマホでカード状に積むため、金額セルには data-label を必ず入れる）:
     <table class="price-table">
       <caption>前半 10:00〜15:30</caption>
       <thead><tr><th>ご人数</th><th>月〜木</th><th>金・土・日・祝</th></tr></thead>
       <tbody>
         <tr>
           <th scope="row">30〜39名</th>
           <td data-label="月〜木">80,000円<span class="tax">（88,000円）</span></td>
           <td data-label="金・土・日・祝">100,000円<span class="tax">（110,000円）</span></td>
         </tr>
       </tbody>
     </table>
   横スクロールはさせない。狭い画面では1行=1カードに積み替わる。
   ========================================================================== */

.price-table {
  width: 100%;
  font-size: var(--fs-base);
  text-align: right;
}
.price-table caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--ink-3);
  padding-bottom: var(--sp-3);
}
.price-table thead th {
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--ink-3);
  text-align: right;
  padding: 0 var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.price-table thead th:first-child {
  text-align: left;
  padding-left: 0;
}
.price-table thead th:last-child { padding-right: 0; }

.price-table tbody th {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-base);
  text-align: left;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.6;
}
.price-table tbody td {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
.price-table tbody td:first-child {
  text-align: left;
  padding-left: 0;
}
.price-table tbody td:last-child { padding-right: 0; }
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom-color: var(--line); }
.price-table tbody tr:hover { background: var(--accent-tint); }

/* 税込の併記 */
.price-table .tax,
.tax {
  font-size: .82em;
  color: var(--ink-4);
  white-space: nowrap;
  margin-left: .3em;
}

/* 強調する行 / 控えめにする行（延長料金など） */
.price-table tr.is-em th,
.price-table tr.is-em td {
  color: var(--accent-ink);
}
.price-table tr.is-muted th,
.price-table tr.is-muted td {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* 表の下に置く条件の箇条書き */
.price-notes {
  margin-top: var(--sp-4);
  padding-left: 1.2em;
  list-style: disc;
}
.price-notes li {
  font-size: var(--fs-sm);
  line-height: 1.95;
  color: var(--ink-2);
  margin-bottom: var(--sp-1);
}
.price-notes li::marker { color: var(--accent-soft); }

/* 表が続くときの間隔 */
.price-block + .price-block { margin-top: var(--sp-7); }

@media (max-width: 700px) {
  /* 1行 = 1カード。overflow-x に頼らない */
  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table th,
  .price-table td {
    display: block;
    width: auto;
  }
  .price-table caption { display: block; }
  .price-table thead {          /* 見出しは data-label が担うので視覚的に隠す */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .price-table tr {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-3);
  }
  .price-table tbody tr:hover { background: #fff; }
  .price-table tbody tr > th,
  .price-table tbody tr > td:first-child {
    padding: 0 0 var(--sp-3);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    font-family: var(--font-serif);
    font-size: var(--fs-base);
  }
  .price-table tbody td:not(:first-child) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-2) 0;
    border-bottom: 0;
    text-align: right;
  }
  .price-table tbody td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--fs-micro);
    letter-spacing: .14em;
    color: var(--ink-4);
    text-align: left;
  }
  .price-table tr.is-muted { background: var(--gray-bg); }
}


/* ==========================================================================
   09 フォーム
   ========================================================================== */

.form {
  max-width: 720px;
}
.form--wide { max-width: 100%; }

/* 項目グループはカードにして、フォームの構造を目で追えるようにする */
.fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  box-shadow: 0 1px 2px rgba(35, 30, 40, .04), 0 6px 18px rgba(35, 30, 40, .03);
}
@media (max-width: 768px) {
  .fieldset { padding: var(--sp-5) var(--sp-4); }
}
.legend {
  /* float+width100% で「fieldset の枠線上に乗る」既定の描画をやめ、
     カード内の通常の見出しとして流す */
  float: left;
  width: 100%;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-md);
  letter-spacing: .03em;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--accent);
  margin-bottom: var(--sp-5);
}
/* float した legend の隣に BFC（grid/flex）が並ぶと 0 幅に潰れるため、必ず下へ回す */
.legend + * { clear: both; }

.field {
  margin-bottom: var(--sp-6);
}
.field:last-child { margin-bottom: 0; }

/* 横に並べる（第1希望／第2希望、搬入／撤収 など） */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
}
.field-row .field { margin-bottom: 0; }
.field-row--3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .06em;
  color: #333;
  margin-bottom: var(--sp-3);
}
/* 必須マーク（<span class="req">必須</span>） */
.req {
  display: inline-block;
  margin-left: var(--sp-2);
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 3px;
  background: rgba(180, 86, 78, .09);
  color: var(--danger);
  vertical-align: 1px;
}
.opt {
  display: inline-block;
  margin-left: var(--sp-2);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--ink-4);
}

/* 入力欄。type を明示するか .input を付けること */
.input,
.field input:not([type]),
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="search"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field input[type="datetime-local"],
.field select,
.field textarea {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
  padding: 13px var(--sp-4);
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.input:hover,
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: #a49db2;
}
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.field textarea,
textarea.input {
  min-height: 140px;
  line-height: 1.9;
}
.field input[type="date"],
.field input[type="time"],
.field input[type="number"] {
  /* 和文フォントだと数値の字面が揃わないため */
  font-variant-numeric: tabular-nums;
}

/* iOS Safari は 16px 未満の入力欄にフォーカスすると画面を拡大してしまう。
   スマホでだけ 16px に上げて、意図しないズームを防ぐ */
@media (max-width: 768px) {
  .input,
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
  }
}

/* select は矢印を自前で描く */
.field select,
select.input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%23999' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* ファイル添付 */
.field input[type="file"] {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.field input[type="file"]::file-selector-button {
  font: inherit;
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  padding: 9px 18px;
  margin-right: var(--sp-4);
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--accent-ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.field input[type="file"]::file-selector-button:hover {
  background: var(--accent-tint);
  border-color: var(--accent);
}

/* 選択肢をカード状に（ラジオ・チェックボックス共通） */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-3);
}
.choice-grid--1 { grid-template-columns: 1fr; }

.radio-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 2px var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-input);
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.radio-card:hover { border-color: var(--accent-soft); }
.radio-card > input {
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  accent-color: var(--accent);
  cursor: pointer;
}
.radio-card__title {
  font-size: 14px;
  letter-spacing: .03em;
  line-height: 1.7;
}
.radio-card__desc {
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--ink-3);
}
/* 選択中 */
.radio-card:has(> input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.radio-card:has(> input:checked) .radio-card__title {
  font-weight: 400;
  color: var(--accent-ink);
}
/* :has() が無い環境でも選択は input 自体で分かるが、念のため文字色だけ変える */
.radio-card > input:checked ~ .radio-card__title { color: var(--accent-ink); }
/* フォーカスリングはカード全体に出す（小さな input の輪より分かりやすい）。
   :has() があればキーボード操作時だけに絞り、input 自身の輪は重ねない */
.radio-card:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
@supports selector(:has(*)) {
  .radio-card:focus-within { outline: none; }
  .radio-card:has(> input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .radio-card > input:focus-visible { outline: none; }
}
.radio-card:has(> input:disabled) {
  opacity: .5;
  cursor: not-allowed;
}

/* 一行のチェックボックス列（機材の使用など） */
.check-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
}
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 14px;
  cursor: pointer;
}
.check > input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* 補助テキストとエラー */
.hint {
  font-size: var(--fs-xs);
  line-height: 1.85;
  color: var(--ink-4);
  margin-top: var(--sp-2);
}
.error {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--danger);
  margin-top: var(--sp-2);
}
.field--error .input,
.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--danger);
  background: rgba(180, 86, 78, .03);
}
/* 送信を試みたあとにだけ赤くなる（対応ブラウザのみ・任意） */
.form input:user-invalid,
.form select:user-invalid,
.form textarea:user-invalid {
  border-color: var(--danger);
}

.form__foot {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}

/* 送信後の結果表示 */
.form-message {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.9;
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
}
.form-message--error {
  background: rgba(180, 86, 78, .06);
  border-color: rgba(180, 86, 78, .3);
  color: var(--danger);
}


/* ==========================================================================
   10 ボタン
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 15px 32px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .08em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--accent-ink);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border-color: var(--accent-soft);
  color: var(--accent-ink);
}
.btn--ghost:hover {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* 色地・写真の上で使う */
.btn--light {
  background: #fff;
  color: var(--accent-ink);
}
.btn--light:hover { color: var(--accent-ink); }
.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}
.btn--outline-light:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.btn--lg { padding: 18px 44px; font-size: var(--fs-base); }
.btn--sm { padding: 10px 22px; font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.btn-row--center { justify-content: center; }

/* 文字だけのリンク（→ つき） */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--accent-ink);
}
.link-arrow::after {
  content: "→";
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }


/* ==========================================================================
   11 アコーディオン（FAQ）
   ========================================================================== */

.faq {
  border-top: 1px solid var(--line);
  max-width: var(--w-narrow);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-1);
  list-style: none;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-base);
  letter-spacing: .02em;
  line-height: 1.8;
  transition: color var(--dur) var(--ease);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary:hover { color: var(--accent-ink); }

/* ＋ / − のマーカー（2本の線を背景で描き、開くと縦線が消える） */
.faq-item > summary::after {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: .5em;
  background-image: linear-gradient(var(--accent), var(--accent)),
                    linear-gradient(var(--accent), var(--accent));
  background-position: center, center;
  background-size: 14px 1px, 1px 14px;
  background-repeat: no-repeat, no-repeat;
  transition: background-size var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.faq-item[open] > summary::after {
  background-size: 14px 1px, 1px 0;
  transform: rotate(90deg);
}

/* 回答（summary 以外の子要素）。段落が複数あっても間隔が崩れない */
.faq-item > *:not(summary) {
  padding: 0 var(--sp-1) var(--sp-3);
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-2);
  max-width: 62em;
}
.faq-item > *:not(summary):last-child {
  padding-bottom: var(--sp-5);
}
.faq-item > *:not(summary) strong { font-weight: 500; color: var(--ink); }
.faq-item .list { padding-left: 1.35em; }

/* Q. / A. を出したい場合 */
.faq-item--qa > summary::before {
  content: "Q.";
  flex: 0 0 auto;
  margin-right: var(--sp-3);
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  letter-spacing: .1em;
}


/* ==========================================================================
   12 CTAバンド
   ========================================================================== */

.cta {
  background: var(--brand-gradient);
  color: #fff;
  padding: clamp(64px, 8vw, 96px) var(--gutter);
  text-align: center;
}
.cta__inner {
  max-width: 720px;
  margin-inline: auto;
}
.cta h2,
.cta__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: var(--ls-head);
  line-height: 1.6;
  margin-bottom: var(--sp-4);
}
.cta p {
  font-size: 14px;
  line-height: 1.95;
  color: rgba(255, 255, 255, .92);
  margin-bottom: var(--sp-6);
}
.cta .btn-row { justify-content: center; }
.cta__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .75);
}
.cta--quiet {
  background: var(--gray-bg);
  color: var(--ink);
}
.cta--quiet p { color: var(--ink-2); }
.cta--quiet .cta__note { color: var(--ink-4); }


/* ==========================================================================
   13 フッター
   ========================================================================== */

.footer {
  background: var(--ink);
  color: #bbb;
  padding: var(--sp-8) var(--gutter) var(--sp-6);
  font-size: 14px;
}
.footer__inner {
  max-width: var(--w-base);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-7);
}
.footer__title {
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-base);
  letter-spacing: .08em;
  margin-bottom: var(--sp-4);
}
.footer__logo {
  height: 24px;
  width: auto;
  margin-bottom: var(--sp-4);
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.footer p {
  font-size: var(--fs-sm);
  line-height: 2;
  color: #b0b0b0;
}
.footer a {
  color: #b0b0b0;
  font-size: var(--fs-sm);
  line-height: 2;
}
.footer a:hover { color: var(--purple); }
.footer ul {
  list-style: none;
  padding: 0;
}
.footer__bottom {
  max-width: var(--w-base);
  margin: var(--sp-7) auto 0;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: #a6a6a6;
}


/* ==========================================================================
   14 ユーティリティ（最小限）
   ========================================================================== */

.center { text-align: center; }
.center-x { margin-inline: auto; }
.right { text-align: right; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.micro {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.nowrap { white-space: nowrap; }
.measure { max-width: var(--measure); }
.accent-text { color: var(--accent-ink); }
.nums { font-variant-numeric: tabular-nums; }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-s { margin-top: var(--sp-4); }
.mt-m { margin-top: var(--sp-6); }
.mt-l { margin-top: var(--sp-7); }
.mb-s { margin-bottom: var(--sp-4); }
.mb-m { margin-bottom: var(--sp-6); }
.mb-l { margin-bottom: var(--sp-7); }

/* スクリーンリーダー専用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* キーボードで到達したときだけ現れるスキップリンク */
.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-soft);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}

@media (max-width: 700px) {
  .hide-sp { display: none !important; }
}
@media (min-width: 701px) {
  .hide-pc { display: none !important; }
}


/* ==========================================================================
   15 モーション配慮
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  a.card:hover,
  .card--link:hover,
  .hero-cta:hover {
    transform: none;
  }
}


/* ==========================================================================
   16 印刷（料金表を紙で渡す用）
   ========================================================================== */

@media print {
  .nav,
  .nav__panel,
  .footer,
  .skip-link {
    display: none !important;
  }

  /* ボタンは消さない。tel: リンクなどの連絡先が本文として要るため、
     地色を落として枠線だけの文字として刷る */
  .btn,
  .hero-cta {
    padding: 5pt 10pt !important;
    border: 1px solid #999 !important;
    background: none !important;
    color: #000 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* CTAバンドはグラデーションを落として文字を黒に */
  .cta {
    background: none !important;
    color: #000;
    padding: 14pt 0;
    border-top: 1px solid #bbb;
  }
  .cta p,
  .cta__note { color: #000; }

  html { scroll-behavior: auto; }

  body {
    color: #000;
    background: #fff;
    font-size: 11pt;
    line-height: 1.6;
  }

  /* ヒーローは写真を落として文字だけ残す */
  .hero {
    min-height: 0;
    padding: 0 0 12pt;
    color: #000;
    background: none !important;
    text-align: left;
    display: block;
  }
  .hero-label {
    border-color: #999;
    color: #000;
  }

  .section { padding-block: 14pt; }
  .section--tint,
  .section--tint-soft,
  .section--accent,
  .card--tint { background: none !important; }

  .container,
  .narrow,
  .wide { max-width: none; padding-inline: 0; }

  a { color: #000; text-decoration: none; }

  .card,
  .spec,
  .price-table,
  .price-table tr,
  .steps > li,
  .faq-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .card,
  .spec { border-color: #ccc; box-shadow: none; }

  /* 表は必ず横並びのまま印刷する */
  .price-table { font-size: 10pt; }
  .price-table thead th,
  .price-table tbody th,
  .price-table tbody td { border-color: #bbb; }
  .price-table tbody tr:hover { background: none; }

  /* アコーディオンは開いた状態で刷る */
  .faq-item > summary::after { display: none; }
  details { display: block; }
  details > *:not(summary) { display: block !important; }
}


/* ==========================================================================
   16 Motion & Theme（v2 追記）
   --------------------------------------------------------------------------
   写真・モーション・テーマ強化。assets/js/site.js（defer）とペアで動く。
   既存定義（01〜15・印刷）は変更しない。ここは追記のみ。

     16-1 スライドショー（クロスフェード + ケンバーンズ + ドット）
     16-2 スクロールリビール [data-reveal] / [data-reveal-stagger]
     16-3 写真の部品（.photo-band / .img-zoom / .gallery-grid）
     16-4 カード・ラベル（.card--lift / .label-bar / .label-badge）
     16-5 テーマ（body[data-theme="cafe" | "rental"]）
     16-6 ヒーローの色つきオーバーレイ（下層ページ用）
     16-7 reduced-motion（全停止）
   ========================================================================== */

/* ----------------------------------------------------------------------
   16-1 スライドショー
   design-dna: 1500msのopacityクロスフェード・約5.5秒間隔・
   アクティブ画像はゆっくり scale(1)→scale(1.06)（ケンバーンズ）。
   markup:
     <header class="hero">
       <div class="slideshow" data-slideshow data-slideshow-dots>
         <div class="slide"><img src="/assets/photo/…" alt=""></div> ×n
       </div>
       <div class="hero__overlay"></div>   ← slideshow の後に置く（黒グラデ）
       <div class="hero__inner">…</div>
     </header>
   ヒーロー外で使うときは高さを持つ枠（.photo-band 等）の中に
   .slideshow--fill を置く。
   ---------------------------------------------------------------------- */

/* 100vw ブレイクアウト（.daynight 等）はスクロールバー幅ぶん右へはみ出すことがある。
   ページ全体の横スクロールを封じる（clip はスクロールコンテナを作らない） */
html { overflow-x: clip; }

/* site.js が読み込めなかったとき（回線断・拡張ブロック）の救済。
   各ページ head の小さなインラインJSが 2.5 秒後に付与する */
html.no-motion [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.slideshow {
  position: relative;
  overflow: hidden;
}
.hero .slideshow,
.slideshow--fill {
  position: absolute;
  inset: 0;
  /* z-index を持たせない（auto）。値を与えると stacking context ができ、
     内側に生成されるドット(z2)が .hero__overlay(z0・後勝ち) の下に沈む */
  z-index: auto;
}

.slideshow .slide {
  position: absolute;
  inset: 0;
  transition: opacity 1.5s var(--ease);
}
/* JSなしのフォールバック: 1枚目だけを静止表示 */
.slideshow .slide ~ .slide { opacity: 0; }
/* JS初期化後（.is-ready）は is-active のスライドだけを表示 */
.slideshow.is-ready .slide { opacity: 0; }
.slideshow .slide.is-active { opacity: 1; }

.slideshow .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* ケンバーンズ。非アクティブ中は一時停止し、
     アクティブ化のたびに site.js が頭から再生し直す */
  animation: ep-kenburns 7s linear both;
  animation-play-state: paused;
}
.slideshow .slide.is-active img {
  animation-play-state: running;
}

@keyframes ep-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* ヒーロー内の重なり順:
   スライド(z0) → 黒グラデ(z0・後勝ち) → 本文(z1) → ドット(z2) */
.hero .hero__inner {
  position: relative;
  z-index: 1;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 現サイトのヒーローと同じ黒グラデ（from-black/40 via-black/30 to-black/50） */
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .40),
    rgba(0, 0, 0, .30) 50%,
    rgba(0, 0, 0, .50));
}

/* ドットナビ。site.js が [data-slideshow-dots] に button を生成する */
.slideshow-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.slideshow-dots button {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .5);
  transition: width var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.slideshow-dots button:hover { background: rgba(255, 255, 255, .8); }
.slideshow-dots button.is-active {
  width: 24px;              /* アクティブは 24×8px のピル */
  background: var(--accent);
}

/* ----------------------------------------------------------------------
   16-2 スクロールリビール
   design-dna: opacity 0 / translateY(40px) → 0.7s で解除。
   兄弟（[data-reveal-stagger] の子）は 120ms 刻み。
   隠すのは JS が動く環境だけ（@media (scripting)）。
   非対応の古いブラウザ・JSオフでは最初から表示され、演出だけ無くなる。
   演出完了後は site.js が data 属性を外すので、
   ここのトランジションが hover 等の邪魔をし続けることはない。
   ---------------------------------------------------------------------- */

[data-reveal],
[data-reveal-stagger] > * {
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

@media (scripting: enabled) {
  [data-reveal]:not([data-reveal-stagger]),
  [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(40px);
  }
  /* 写真帯はリビール時にわずかにズームが戻る（16-3参照） */
  .photo-band[data-reveal] img { transform: scale(1.05); }
}

[data-reveal].is-visible,
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* 段差のCSSフォールバック（6段まで・7段目以降は頭打ち。
   実際は site.js が inline で正確に刻み、完了後に消す） */
[data-reveal-stagger] > :nth-child(2) { transition-delay: 120ms; }
[data-reveal-stagger] > :nth-child(3) { transition-delay: 240ms; }
[data-reveal-stagger] > :nth-child(4) { transition-delay: 360ms; }
[data-reveal-stagger] > :nth-child(5) { transition-delay: 480ms; }
[data-reveal-stagger] > :nth-child(6) { transition-delay: 600ms; }
[data-reveal-stagger] > :nth-child(n+7) { transition-delay: 600ms; }

/* ----------------------------------------------------------------------
   16-3 写真の部品
   ---------------------------------------------------------------------- */

/* セクション間の全幅写真帯（design-dna: height 480px・edge-to-edge）。
   main 直下など全幅の流れに置くのが基本。.container 等の中に置くときだけ
   --breakout を足す（100vwで抜く） */
.photo-band {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
}
.photo-band--breakout {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1.4s var(--ease);
}
/* hover なしでも、リビール時にわずかにズームが戻る演出
   （初期 scale(1.05) は 16-2 の scripting ブロックで付与） */
.photo-band.is-visible img { transform: scale(1); }
@media (max-width: 768px) {
  .photo-band { height: 300px; }
}

/* hover でゆっくり寄る写真枠（design-dna: hover:scale-105 / 700ms） */
.img-zoom {
  display: block;
  position: relative;
  overflow: hidden;
}
.img-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease);
}
.img-zoom:hover img,
.img-zoom:focus-visible img { transform: scale(1.05); }

/* ギャラリー。縦横混在でも aspect-ratio で揃える 2〜4列 */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (min-width: 700px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}
@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gallery-grid > * {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  aspect-ratio: 4 / 3;
}
.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 変化をつけたいセルに（同じ行に通常セルがあることが前提） */
.gallery-grid > .gallery-item--tall {
  grid-row: span 2;
  aspect-ratio: auto;
}
.gallery-grid > .gallery-item--wide {
  grid-column: span 2;
  aspect-ratio: auto;
}

/* ----------------------------------------------------------------------
   16-4 カード・ラベル
   ---------------------------------------------------------------------- */

/* design-dna: hover:-translate-y-1 + shadow-lg（既存 .card は触らず追加クラス） */
.card--lift {
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card--lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px var(--accent-shadow);
}

/* 縦バー付きセクションラベル（design-dna: w-1 h-8 rounded-full + 0.3em英字） */
.label-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--sp-5);
}
.label-bar::before {
  content: "";
  flex: 0 0 4px;
  width: 4px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

/* 丸アイコンバッジ（design-dna: w-10 h-10 rounded-full + 白アイコン）。
   中身はインラインSVG（アイコンフォントは使わない） */
.label-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
}
.label-badge svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ----------------------------------------------------------------------
   16-5 テーマ
   body[data-theme="cafe"]   … カフェ文脈 = パープル基調
   body[data-theme="rental"] … レンタル文脈 = グリーン基調
   --accent 系の参照先を切り替えるだけ。--brand-gradient（紫→緑のCTA帯）は
   ブランド要素なのでどちらのテーマでも変えない。
   ---------------------------------------------------------------------- */

body[data-theme="cafe"] {
  --accent: #A790C4;
  --accent-ink: #7B5EA0;
  --accent-soft: rgba(167, 144, 196, .30);
  --accent-tint: rgba(167, 144, 196, .07);
  --accent-shadow: rgba(167, 144, 196, .18);
  --focus: #7B5EA0;
}
body[data-theme="rental"] {
  --accent: #386663;
  --accent-ink: #2b5350;
  --accent-soft: rgba(56, 102, 99, .30);
  --accent-tint: #eef3f2;
  --accent-shadow: rgba(56, 102, 99, .16);
  --focus: #2b5350;
}

/* 固定パープルだった箇所を、テーマ配下だけ --accent 参照に付け替える。
   （.btn / .faq-item / リンク / フォーカスは元から --accent 系を見ているので
   変数の切り替えだけで追従する） */

/* ナビ: 下線とホバー色 */
body[data-theme] .nav__links a::after { background: var(--accent); }
body[data-theme] .nav__links a:hover { color: rgba(255, 255, 255, .72); } /* 透明ナビ（写真上）では白を薄く */
body[data-theme] .nav--scrolled .nav__links a:hover,
body[data-theme] .nav--solid .nav__links a:hover,
body[data-theme] .nav[data-scrolled="true"] .nav__links a:hover {
  color: var(--accent-ink);
}
body[data-theme] .nav__panel a:hover { color: var(--accent-ink); }
body[data-theme] .nav--scrolled .nav__cta:hover,
body[data-theme] .nav--solid .nav__cta:hover,
body[data-theme] .nav[data-scrolled="true"] .nav__cta:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* ヒーローCTA（白ボタン）: 文字色を --accent 参照へ */
body[data-theme] .hero-cta { color: var(--accent-ink); }
body[data-theme] .hero-cta:hover { color: var(--accent-ink); }
body[data-theme] .hero-cta--ghost,
body[data-theme] .hero-cta--ghost:hover { color: #fff; }   /* ゴーストは白のまま */

/* ----------------------------------------------------------------------
   16-6 ヒーローの色つきオーバーレイ（下層ページ用。トップは黒のまま）
   既存 .hero の --hero-overlay に載せるだけなので既存定義は触らない
   ---------------------------------------------------------------------- */

.hero--tinted-purple {
  --hero-overlay: linear-gradient(180deg,
    rgba(167, 144, 196, .55),
    rgba(0, 0, 0, .45));
}
.hero--tinted-green {
  --hero-overlay: linear-gradient(180deg,
    rgba(56, 102, 99, .60),
    rgba(0, 0, 0, .45));
}

/* ----------------------------------------------------------------------
   16-7 reduced-motion — 16節の動きをすべて止める
   （15節の全体ブレーキに加えて、状態も静止側に倒す）
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .slideshow .slide { transition: none; }
  .slideshow .slide img {
    animation: none !important;   /* ケンバーンズなし = scale(1) のまま */
  }

  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }

  .photo-band img,
  .photo-band.is-visible img {
    transform: none !important;
    transition: none !important;
  }
  .img-zoom img { transition: none; }
  .img-zoom:hover img,
  .img-zoom:focus-visible img { transform: none; }

  .card--lift:hover { transform: none; }
  .slideshow-dots button { transition: none; }
}

/* ----------------------------------------------------------------------
   17 ナビの項目が 6 つになったぶんの調整（2026-10-03 Event を追加）
   横並びになる 769px から少しのあいだは、項目の間隔を 1 段詰めて 1 行に収める
   ---------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 880px) {
  .nav__links { gap: var(--sp-5); }
}

/* ==========================================================================
   18. FAQ（Q 印つき）の質問文を左寄せに
   ::before（Q 印）・文字・::after（＋）の3つを space-between で並べると、
   文字が真ん中に寄る。文字は Q 印のすぐ右から、＋は右端に置く（2026-10-03）
   ========================================================================== */
.faq-item--qa > summary { justify-content: flex-start; }
.faq-item--qa > summary::after { margin-left: auto; }