@charset "UTF-8";

/* =========================================================
   CASTON WEDDING
   ベース：白／余白／写真　アクセント：くすんだゴールド
   ========================================================= */

/* ---------- 1. トークン ---------- */
:root {
  --ink:        #23201d;
  --ink-soft:   #55504a;
  --ink-mute:   #6f6862;
  --line:       #e6e0d6;
  --line-soft:  #f0ebe3;

  --bg:         #ffffff;
  --bg-soft:    #faf7f2;
  --bg-warm:    #f4ece0;
  --bg-blush:   #f7f0ec;

  --gold:       #836731;   /* 文字・ボタン用（白背景で 5.3:1、淡い背景でも4.5:1以上） */
  --gold-deep:  #66512a;
  --gold-light: #a98a55;   /* 罫線・装飾用（旧 --gold） */
  --gold-soft:  #c8b083;   /* うすい装飾線用 */
  --gold-pale:  #efe5d1;

  --font-serif: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "MS PMincho", serif;
  --font-jp-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "MS PMincho", serif;
  --font-sans:  "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;

  --wrap:       1180px;
  --wrap-wide:  1480px;
  --wrap-narrow: 840px;
  --gutter:     clamp(20px, 5vw, 40px);
  --sec-pad:    clamp(72px, 10vw, 136px);

  --radius:     2px;
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --header-h:   68px;
}

/* ---------- 2. リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .04em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 500; line-height: 1.5; letter-spacing: .06em; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- 3. レイアウト ---------- */
.wrap        { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide   { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }

.section        { padding-block: var(--sec-pad); }
.section-tight  { padding-block: clamp(48px, 7vw, 88px); }
/* 前のセクションと中身が別物のとき、境目に線を1本引いて切れ目を分かりやすくする */
.section-divided { border-top: 1px solid var(--line); }
.bg-soft  { background: var(--bg-soft); }
.bg-warm  { background: var(--bg-warm); }
.bg-blush { background: var(--bg-blush); }
.bg-ink   { background: var(--ink); color: #fff; }
.bg-ink .lead, .bg-ink :where(p:not(.eyebrow)) { color: rgba(255,255,255,.82); }

/* ---------- 4. タイポグラフィ部品 ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--font-serif);
  font-size: 12px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.eyebrow::before {
  content: ""; width: 34px; height: 1px; background: var(--gold-soft);
}
.eyebrow-center { justify-content: center; }
.eyebrow-center::after { content: ""; width: 34px; height: 1px; background: var(--gold-soft); }

.sec-head { margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head-center { text-align: center; }

.sec-title {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: clamp(25px, 4.4vw, 42px);
  line-height: 1.55;
  letter-spacing: .08em;
  margin-top: 18px;
}
.sec-title .thin { color: var(--ink-soft); }
.sec-title em { font-style: normal; color: var(--gold-deep); }

.sec-lead {
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 2.1;
  max-width: 46em;
}
.sec-head-center .sec-lead { margin-inline: auto; }

.serif { font-family: var(--font-jp-serif); }
.num-en { font-family: var(--font-serif); letter-spacing: .06em; }

.lead { color: var(--ink-soft); line-height: 2.1; }
.note { font-size: 12.5px; line-height: 1.9; color: var(--ink-mute); max-width: 46em; }
.note-center { margin-inline: auto; text-align: center; }
.note a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }

.plan-price .num, .price-table td, .menu-table td, .stat .num,
.cta-tel a, .footer-tel a, .mm-tel a, .card-price {
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1;
}

/* ---------- 5. ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .8em;
  min-height: 58px; padding: 0 34px;
  font-size: 15px; letter-spacing: .12em; font-weight: 500;
  border: 1px solid var(--ink); color: var(--ink); background: #fff;
  border-radius: 999px;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn::after { content: "→"; font-size: 14px; transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: translateX(4px); }

.btn-primary {
  background: var(--gold); border-color: var(--gold); color: #fff;
  box-shadow: 0 10px 30px -14px rgba(131,103,49,.7);
}
.btn-primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); }

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

.btn-ghost { background: #fff; border-color: #cfc5b4; color: var(--ink); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-deep); }

/* 暗い写真バンドの上では、白い枠のボタンにする（そのままだと枠も文字も背景に溶ける） */
.cta-band .btn-ghost,
.feature-band .btn-ghost,
.page-hero .btn-ghost {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.7); color: #fff;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.cta-band .btn-ghost:hover,
.feature-band .btn-ghost:hover,
.page-hero .btn-ghost:hover {
  background: #fff; border-color: #fff; color: var(--ink);
}

.btn-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-light:hover { background: var(--gold-pale); border-color: var(--gold-pale); }

.btn-sm { min-height: 46px; padding: 0 24px; font-size: 13px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row-center { justify-content: center; }

/* テキストリンク（矢印付き） */
.link-arrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: 14px; letter-spacing: .1em; color: var(--gold-deep);
  border-bottom: 1px solid var(--gold-pale); padding-bottom: 6px;
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow::after { content: "→"; }
.link-arrow:hover { border-color: var(--gold); gap: 1em; }

/* 本文へスキップ（キーボード操作用） */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-size: 13px; transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

/* ---------- 6. ヘッダー ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-header.is-solid {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--line-soft);
}
.header-inner {
  width: 100%; max-width: var(--wrap-wide); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

/* ロゴは2枚用意して切り替える。
   通常＝カラー版／暗いヒーローに重なるとき＝白抜き版（赤い文字が沈むため） */
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand-logo { display: block; height: 36px; width: auto; }
.brand-logo-light { display: none; }

.gnav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.gnav a {
  position: relative; font-size: 13px; letter-spacing: .1em; color: var(--ink);
  padding-block: 6px;
}
.gnav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.gnav a:hover::after, .gnav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.gnav a[aria-current="page"] { color: var(--gold-deep); }

.header-actions { display: flex; align-items: center; gap: 16px; }
.header-cta {
  display: inline-flex; align-items: center; height: 42px; padding: 0 22px;
  border-radius: 999px; background: var(--gold); color: #fff;
  font-size: 12.5px; letter-spacing: .12em; white-space: nowrap;
  transition: background .3s var(--ease);
}
.header-cta:hover { background: var(--gold-deep); }

.nav-toggle {
  display: none; width: 42px; height: 42px; position: relative; flex: 0 0 auto;
}
.nav-toggle span {
  position: absolute; left: 10px; width: 22px; height: 1px; background: var(--ink);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* 下層ページ：暗いヒーローの上ではヘッダーを白抜きにする */
.has-dark-hero .site-header:not(.is-solid) .gnav a { color: #fff; }
.has-dark-hero .site-header:not(.is-solid) .brand-logo { display: none; }
.has-dark-hero .site-header:not(.is-solid) .brand-logo-light { display: block; }
.has-dark-hero .site-header:not(.is-solid) .gnav a[aria-current="page"] { color: var(--gold-soft); }
.has-dark-hero .site-header:not(.is-solid) .nav-toggle span { background: #fff; }

/* ---------- 6-2. メニューパネル ----------
   メニューボタンで開くカード型のメニュー（script.jsが<body>に差し込む）。
   縦一列のリンクだと項目が流れて選びにくいので、
   「プラン・料金」→「演出から選ぶ」→「はじめての方へ」の3段に分け、
   どれも指で押しやすい大きさのブロックにしている。 */
.menu-panel { display: none; }

body.menu-open { overflow: hidden; }

/* 開いている間はヘッダーを必ず白地にする（暗いヒーローの白抜き文字を戻す） */
body.menu-open .site-header {
  background: #fff;
  border-bottom-color: var(--line-soft);
}
body.menu-open .site-header:not(.is-solid) .brand-logo { display: block; }
body.menu-open .site-header:not(.is-solid) .brand-logo-light { display: none; }
body.menu-open .site-header:not(.is-solid) .nav-toggle span { background: var(--ink); }

@keyframes menu-panel-in {
  from { opacity: 0; transform: translateY(10px); }
}

body.menu-open .menu-panel {
  display: block;
  position: fixed; inset: 0; z-index: 99;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 上：ヘッダーに隠れない分／下：セーフエリア。左右は560pxを上限に中央へ */
  padding: calc(var(--header-h) + 18px) max(var(--gutter), calc((100% - 560px) / 2))
           calc(36px + env(safe-area-inset-bottom));
  animation: menu-panel-in .28s var(--ease);
}

/* 一番上の横長カード：まず見たい「プラン・料金」を目立たせる */
.mm-card--wide {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  background: var(--bg-warm);
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  color: var(--ink);
}
.mm-wide-body { display: flex; flex-direction: column; gap: 3px; }
.mm-card--wide .mm-en {
  font-family: var(--font-serif); font-size: 10.5px; letter-spacing: .22em; color: var(--gold);
}
.mm-card--wide .mm-jp {
  font-family: var(--font-jp-serif); font-size: 19px; letter-spacing: .08em; line-height: 1.4;
}
.mm-card--wide .mm-note { font-size: 12px; color: var(--ink-mute); line-height: 1.5; }
.mm-card--wide .mm-ico { width: 46px; height: 46px; }

/* 見出しラベル：頭に短いゴールドの線を添える */
.mm-label {
  display: flex; align-items: center; gap: 10px;
  margin: 28px 0 10px;
  font-family: var(--font-jp-serif); font-size: 12.5px; letter-spacing: .18em; color: var(--ink-mute);
}
.mm-label::before {
  content: ""; width: 18px; height: 1px; background: var(--gold-light); flex: 0 0 auto;
}

/* 演出メニュー：丸い写真つきの一覧。1行の高さを大きめにとって押しやすくする */
.mm-items { display: grid; gap: 8px; }
.mm-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  color: var(--ink);
}
.mm-item img {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: var(--bg-warm);
}
.mm-item-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-item-ttl { font-family: var(--font-jp-serif); font-size: 16px; letter-spacing: .06em; line-height: 1.4; }
.mm-item-sub { font-size: 11.5px; color: var(--ink-mute); line-height: 1.4; }
.mm-item::after {
  content: "→"; flex: 0 0 auto; color: var(--gold); font-size: 14px;
  transition: transform .3s var(--ease);
}

/* はじめての方へ：2列のカード */
.mm-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-card-grid .mm-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 16px 8px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink); text-align: center;
}
.mm-card-grid .mm-ico { width: 32px; height: 32px; margin-bottom: 2px; }
.mm-card-grid .mm-en {
  font-family: var(--font-serif); font-size: 9.5px; letter-spacing: .2em; color: var(--gold);
}
.mm-card-grid .mm-jp { font-family: var(--font-jp-serif); font-size: 14.5px; letter-spacing: .04em; }

/* アイコンは淡いゴールドの丸に線画を入れる */
.mm-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  border-radius: 50%; background: var(--gold-pale); color: var(--gold-deep);
}
.mm-ico svg { width: 55%; height: 55%; }

/* いま見ているページ */
.menu-panel [aria-current="page"] {
  border-color: var(--gold-light);
  background: var(--bg-blush);
}
.menu-panel [aria-current="page"] .mm-jp,
.menu-panel [aria-current="page"] .mm-item-ttl { color: var(--gold-deep); }

/* 足元：相談ボタン・電話・サイト案内 */
.mm-foot { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.mm-foot .btn { width: 100%; }
.mm-tel { text-align: center; margin: 14px 0 0; }
.mm-tel a {
  display: inline-block; padding-block: 8px;
  font-family: var(--font-serif); font-size: 25px; letter-spacing: .06em;
}
.mm-foot .note { text-align: center; margin-top: 0; }
.mm-sub {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px;
  margin-top: 22px;
}
.mm-sub a { padding: 8px 2px; font-size: 13px; color: var(--ink-soft); letter-spacing: .06em; }
.mm-sub a[aria-current="page"] { color: var(--gold-deep); background: none; }

@media (hover: hover) {
  .mm-item:hover, .mm-card:hover { border-color: var(--gold-light); }
  .mm-item:hover::after { transform: translateX(4px); }
  .mm-sub a:hover { color: var(--gold-deep); }
}

/* ---------- 7. ファーストビュー ---------- */
.hero { position: relative; padding-top: var(--header-h); background: var(--bg-warm); overflow: hidden; }
.hero-grid {
  max-width: var(--wrap-wide); margin-inline: auto; background: var(--bg-soft);
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  /* 画面いっぱいにせず、下の料金診断が少しのぞく高さに収める */
  min-height: min(calc(100vh - var(--header-h) - 78px), 720px);
  min-height: min(calc(100svh - var(--header-h) - 78px), 720px);
}
.hero-copy {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  /* 下側はスクロール導線の場所として空けておく */
  padding: clamp(26px, 2.8vw, 36px) clamp(24px, 4.5vw, 76px) clamp(42px, 3.8vw, 50px);
}
.hero-eyebrow {
  font-family: var(--font-serif); font-size: 11.5px; letter-spacing: .38em;
  color: var(--gold); text-transform: uppercase; margin-bottom: 16px;
}
.hero-title {
  font-family: var(--font-jp-serif); font-weight: 500;
  font-size: clamp(29px, 4.1vw, 52px);
  line-height: 1.55; letter-spacing: .09em;
}
.hero-title span { display: block; }
.hero-title .accent {
  display: inline; background-image: linear-gradient(transparent 62%, var(--gold-pale) 62%);
}
.hero-sub { margin-top: 22px; color: var(--ink-soft); font-size: 15px; line-height: 2.15; max-width: 30em; }
.hero-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero-meta {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.hero-meta li {
  font-size: 12px; letter-spacing: .1em; color: var(--ink-soft);
  display: flex; align-items: center; gap: .5em;
}
.hero-meta li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-soft); }

.hero-media { position: relative; overflow: hidden; }
/* 画像は絶対配置にする。縦横比でファーストビューの高さが決まってしまうのを防ぐ */
.hero-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* 写真は上端にぼかした余白を継ぎ足してある。PCではその余白を見せない位置で切る */
  object-position: center 61%;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(250,247,242,.85) 0%, rgba(250,247,242,0) 34%);
  pointer-events: none;
}
/* 下へのスクロール導線（クリックで料金診断へ） */
.hero-scroll {
  position: absolute; left: clamp(24px, 4.5vw, 76px); bottom: 14px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 4px; z-index: 2;
  font-size: 12px; letter-spacing: .1em; color: var(--ink-soft);
  text-decoration: none; transition: color .3s var(--ease);
}
.hero-scroll:hover { color: var(--gold-deep); }
.hero-scroll .hs-text b { font-weight: 600; color: var(--gold-deep); }
.hero-scroll .hs-arrow {
  flex: none; position: relative; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--gold-soft);
  animation: scrollPulse 1.8s var(--ease) infinite;
}
/* 丸の中の下向き矢印 */
.hero-scroll .hs-arrow::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -6px 0 0 -4px;
  border-right: 1px solid var(--gold-deep); border-bottom: 1px solid var(--gold-deep);
  transform: rotate(45deg);
  animation: scrollArrow 1.8s var(--ease) infinite;
}
@keyframes scrollPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(169, 138, 85,.28); }
  55%      { box-shadow: 0 0 0 7px rgba(169, 138, 85,0); }
}
@keyframes scrollArrow {
  0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: .45; }
  50%      { transform: rotate(45deg) translate(2px, 2px);   opacity: 1; }
}
.hero-scroll:hover .hs-arrow { border-color: var(--gold-deep); }

/* 写真の帯（横スクロール） */
.marquee { overflow: hidden; background: var(--bg); padding-block: 18px; }
.marquee-track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; gap: 14px; padding-right: 14px; flex: 0 0 auto; }
.marquee figure { margin: 0; width: clamp(190px, 24vw, 320px); flex: 0 0 auto; }
.marquee img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 8. 下層ページのヘッダー ---------- */
.page-hero { position: relative; padding-top: var(--header-h); background: var(--ink); overflow: hidden; }
.page-hero-media { position: absolute; inset: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.page-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(35,32,29,.58) 0%, rgba(35,32,29,.5) 50%, rgba(35,32,29,.72) 100%),
    radial-gradient(ellipse 72% 62% at 50% 52%, rgba(35,32,29,.34), transparent 72%);
}
.page-hero-inner {
  position: relative; z-index: 1; color: #fff;
  padding-block: clamp(62px, 10vw, 130px);
  text-align: center;
}
.page-hero .eyebrow { color: var(--gold-soft); }
.page-hero .eyebrow::before, .page-hero .eyebrow::after { background: rgba(255,255,255,.4); }
.page-hero h1 {
  font-family: var(--font-jp-serif); font-size: clamp(26px, 4.4vw, 44px);
  margin-top: 18px; letter-spacing: .1em; line-height: 1.6;
  text-shadow: 0 1px 24px rgba(0,0,0,.32);
}
.page-hero :where(p:not(.eyebrow)) { margin-top: 20px; color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 2.1; }
.page-hero .wrap-narrow { max-width: 720px; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-block: 8px; font-size: 11.5px; color: var(--ink-mute); letter-spacing: .06em;
}
.breadcrumb a { display: inline-block; padding-block: 11px; }
.breadcrumb a:hover { color: var(--gold-deep); }
.breadcrumb span[aria-current] { color: var(--ink-soft); }

/* ---------- 9. カード・グリッド ---------- */
.grid { display: grid; gap: clamp(20px, 3vw, 34px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
a.card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -34px rgba(35,32,29,.4); border-color: var(--gold-pale); }
.card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-soft); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
a.card:hover .card-media img { transform: scale(1.05); }
.card-media-tall { aspect-ratio: 3 / 4; }
/* 写真を持たない、短いカード */
.card-compact { background: var(--bg-soft); border-color: var(--line); }
.card-compact .card-body { padding: 26px 24px 28px; }
.card-body { padding: 26px 24px 30px; display: flex; flex-direction: column; flex: 1; }
.card-index { font-family: var(--font-serif); font-size: 12px; letter-spacing: .22em; color: var(--gold); }
.card-title { font-family: var(--font-jp-serif); font-size: 19px; margin-top: 10px; letter-spacing: .07em; }
.card-title .en { display: block; font-family: var(--font-serif); font-size: 11px; letter-spacing: .24em; color: var(--ink-mute); margin-top: 7px; }
.card-text { margin-top: 14px; font-size: 13.5px; line-height: 2; color: var(--ink-soft); flex: 1; }
.card-foot { margin-top: 20px; }
.card-price {
  margin-top: 16px; font-family: var(--font-serif); font-size: 20px; color: var(--gold-deep); letter-spacing: .04em;
}
.card-price small { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-mute); letter-spacing: .08em; margin-left: 6px; }

/* ---------- 10. 交互レイアウト（写真＋文章） ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 76px); align-items: center; }
.split-media { position: relative; }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.split-media.is-tall img { aspect-ratio: 3 / 4; }
.split-media .frame {
  position: absolute; inset: auto -16px -16px auto; width: 55%; height: 55%;
  border: 1px solid var(--gold-light); border-radius: var(--radius); z-index: -1;
}
.split.is-reverse .split-media { order: 2; }
.split-body h3 {
  font-family: var(--font-jp-serif); font-size: clamp(21px, 2.6vw, 30px); line-height: 1.7; letter-spacing: .08em;
}
.split-body :where(p:not(.eyebrow)) { margin-top: 20px; color: var(--ink-soft); font-size: 14.5px; line-height: 2.15; max-width: 42em; }
.split-body .btn-row { margin-top: 30px; }

/* ---------- 11. 理由・番号付きブロック ---------- */
.reason-list { display: grid; gap: clamp(28px, 4vw, 54px); }
.reason {
  display: grid; grid-template-columns: 88px 1fr; gap: clamp(18px, 3vw, 40px); align-items: start;
  padding-top: 30px; border-top: 1px solid var(--line);
}
.reason-no { font-family: var(--font-serif); font-size: clamp(38px, 5vw, 58px); line-height: 1; color: var(--gold-light); }
.reason h3 { font-family: var(--font-jp-serif); font-size: clamp(19px, 2.3vw, 26px); line-height: 1.65; letter-spacing: .08em; }
.reason > div > p { margin-top: 16px; color: var(--ink-soft); font-size: 14.5px; line-height: 2.15; max-width: 42em; }

/* ---------- 12. 課題提起（大きい写真の上にコピー） ---------- */
.feature-band { position: relative; overflow: hidden; }
.feature-band-media { position: absolute; inset: 0; }
.feature-band-media img { width: 100%; height: 100%; object-fit: cover; }
/* 左端から右へ抜ける一枚のフェードだけで文字を読ませる。
   板や枠を重ねると写真の中に四角い境目が出てしまうので、重ねない */
.feature-band-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(95deg,
      rgba(14,12,11,.94) 0%,
      rgba(14,12,11,.86) 26%,
      rgba(14,12,11,.62) 48%,
      rgba(14,12,11,.30) 70%,
      rgba(14,12,11,.12) 100%),
    linear-gradient(180deg, rgba(14,12,11,.26) 0%, rgba(14,12,11,0) 34%, rgba(14,12,11,0) 66%, rgba(14,12,11,.30) 100%);
}
.feature-band-inner { position: relative; z-index: 1; color: #fff; padding-block: clamp(76px, 11vw, 150px); }
.feature-band-inner h2 {
  font-family: var(--font-jp-serif); font-size: clamp(24px, 3.9vw, 42px); line-height: 1.75; letter-spacing: .1em;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.feature-band-inner :where(p:not(.eyebrow)) { margin-top: 26px; color: rgba(255,255,255,.93); font-size: 15px; line-height: 2.25; max-width: 40em; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.feature-band-inner .btn-row { margin-top: 36px; }
.feature-band-inner .eyebrow { color: var(--gold-soft); }
.feature-band-inner .eyebrow::before, .feature-band-inner .eyebrow::after { background: rgba(255,255,255,.4); }

/* ---------- 13. 料金比較テーブル ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table { min-width: 560px; background: #fff; }
.price-table th, .price-table td { padding: 20px 18px; text-align: center; border-bottom: 1px solid var(--line-soft); }
.price-table thead th {
  font-size: 12.5px; letter-spacing: .12em; color: var(--ink-mute); font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.price-table thead th.is-ours { color: #fff; background: var(--gold); border-bottom-color: var(--gold); }
.price-table tbody th { text-align: left; font-size: 14px; font-weight: 500; letter-spacing: .05em; white-space: nowrap; }
.price-table td.is-market { color: var(--ink-mute); font-family: var(--font-serif); font-size: 18px; }
.price-table td.is-ours {
  background: var(--gold-pale); font-family: var(--font-serif); font-size: 23px; color: var(--gold-deep); font-weight: 500;
}
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: 0; }

/* 単品メニューの表 */
.menu-table { background: #fff; min-width: 520px; max-width: 720px; margin-inline: auto; }
.menu-table th, .menu-table td { padding: 16px 18px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.menu-table thead th { background: var(--bg-soft); font-size: 12px; letter-spacing: .12em; color: var(--ink-mute); font-weight: 500; text-align: left; }
.menu-table tbody th { text-align: left; font-weight: 400; letter-spacing: .04em; }
.menu-table td { text-align: right; white-space: nowrap; font-family: var(--font-serif); font-size: 18px; color: var(--gold-deep); }
.menu-table .cat-row th {
  background: var(--bg-warm); font-family: var(--font-jp-serif); letter-spacing: .14em;
  font-size: 13px; color: var(--gold-deep);
}

/* ---------- 14. プランカード ---------- */
.plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.plan-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); }
.plan-media img { width: 100%; height: 100%; object-fit: cover; }
/* ライトプランの写真だけ縦長（2:3）で、上半分はほぼ天井の白。
   16:10で中央を切ると天井ばかりが写り、テーブルの装花が下に見切れる。
   装花とグラスが収まる位置まで切り取りを下げる */
#light .plan-media img { object-position: center 78%; }
.plan-body { padding: 30px 26px 34px; display: flex; flex-direction: column; flex: 1; }
.plan-tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--ink); color: #fff; font-size: 11px; letter-spacing: .16em;
  padding: 7px 14px; border-radius: 999px;
}
.plan.is-recommended { border-color: var(--gold); box-shadow: 0 30px 60px -40px rgba(131,103,49,.55); }
.plan.is-recommended .plan-tag { background: var(--gold); }
.plan-name { font-family: var(--font-jp-serif); font-size: 22px; letter-spacing: .1em; }
.plan-name .en { display: block; font-family: var(--font-serif); font-size: 11px; letter-spacing: .26em; color: var(--gold); margin-bottom: 8px; }
.plan-for { margin-top: 14px; font-size: 13px; color: var(--ink-soft); line-height: 1.95; min-height: calc(1.95em * 2); }
.plan-price { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; align-items: baseline; gap: 6px; }
.plan-price .num { font-family: var(--font-serif); font-size: 40px; line-height: 1; color: var(--ink); letter-spacing: .02em; }
.plan-price .unit { font-size: 13px; color: var(--ink-soft); }
.plan-price .tax { font-size: 11px; color: var(--ink-mute); margin-left: auto; }
.plan-items { margin-top: 22px; display: grid; gap: 11px; align-content: start; flex: 1; }
.plan-items li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
.plan-items li::before {
  content: ""; position: absolute; left: 0; top: 11px; width: 11px; height: 6px;
  border-left: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(-45deg);
}
/* 基本に含まれないオプションは、チェックではなく＋で示す（含まれると誤読されないように） */
.plan-opt-head {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  font-size: 13px; letter-spacing: .06em; color: var(--ink);
}
.plan-options { margin-top: 13px; display: grid; gap: 11px; }
.plan-options li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
.plan-options li::before { content: "＋"; position: absolute; left: 0; top: 0; font-size: 12px; color: var(--gold); }

.plan-body .btn { margin-top: 26px; width: 100%; }

/* ---------- 15. ステップ ---------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 108px 1fr; gap: clamp(16px, 3vw, 36px);
  padding-block: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line);
  align-items: start;
}
.step:first-child { border-top: 1px solid var(--line); }
.step-no { font-family: var(--font-serif); font-size: 13px; letter-spacing: .2em; color: var(--gold); }
.step-no b { display: block; font-size: clamp(34px, 4.5vw, 48px); font-weight: 500; line-height: 1.1; color: var(--gold-light); }
.step h3 { font-family: var(--font-jp-serif); font-size: clamp(18px, 2.2vw, 23px); letter-spacing: .08em; }
.step > div > p { margin-top: 14px; color: var(--ink-soft); font-size: 14px; line-height: 2.1; max-width: 42em; }
.step-note {
  margin-top: 16px; padding: 16px 18px; background: var(--bg-soft);
  border-left: 2px solid var(--gold-light); font-size: 13px; line-height: 1.95; color: var(--ink-soft);
}

/* ---------- 16. FAQ ---------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; align-items: flex-start; gap: 16px; text-align: left;
  padding: 24px 4px; font-family: var(--font-jp-serif); font-size: clamp(15px, 1.9vw, 17.5px);
  letter-spacing: .05em; line-height: 1.8;
}
.faq-q .mark { font-family: var(--font-serif); font-size: 17px; color: var(--gold); flex: 0 0 auto; line-height: 1.6; }
.faq-q .txt { flex: 1; }
.faq-q .toggle { position: relative; width: 16px; height: 16px; flex: 0 0 auto; margin-top: 8px; }
.faq-q .toggle::before, .faq-q .toggle::after {
  content: ""; position: absolute; background: var(--gold); transition: transform .35s var(--ease);
}
.faq-q .toggle::before { left: 0; top: 7.5px; width: 16px; height: 1px; }
.faq-q .toggle::after  { left: 7.5px; top: 0; width: 1px; height: 16px; }
.faq-q[aria-expanded="true"] .toggle::after { transform: scaleY(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-item:not(.is-open) .faq-a-inner { visibility: hidden; }
.faq-item.is-open .faq-a-inner { visibility: visible; }
.faq-a-inner > div {
  display: flex; gap: 16px; padding: 0 4px 26px; max-width: 44em;
  font-size: 14px; line-height: 2.1; color: var(--ink-soft);
}
.faq-a-inner .mark { font-family: var(--font-serif); font-size: 17px; color: var(--ink-mute); flex: 0 0 auto; }

/* ---------- 17. ギャラリー ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; transition: transform 1.2s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }
.gallery .span-2 { grid-column: span 2; grid-row: span 2; }
.gallery .span-2 img { aspect-ratio: 1 / 1; }

/* ---------- 18. 出演メンバー ---------- */
.member-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 30px); }
.member { background: #fff; }
.member-media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-soft); border-radius: var(--radius); }
.member-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.member:hover .member-media img { transform: scale(1.04); }
.member-name { margin-top: 18px; font-family: var(--font-jp-serif); font-size: 18px; letter-spacing: .08em; }
.member-role { margin-top: 6px; font-family: var(--font-serif); font-size: 11px; letter-spacing: .22em; color: var(--gold); }
.member-text { margin-top: 12px; font-size: 13px; line-height: 1.95; color: var(--ink-soft); }
.member-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.member-tags li {
  font-size: 11px; letter-spacing: .06em; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
}

/* ---------- 19. 注記ボックス ---------- */
.notice {
  border: 1px solid var(--gold-pale); background: var(--bg-soft);
  border-radius: var(--radius); padding: clamp(22px, 3vw, 32px);
}
.notice h3 {
  font-family: var(--font-jp-serif); font-size: 17px; letter-spacing: .08em;
  display: flex; align-items: center; gap: 10px;
}
.notice h3::before { content: ""; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
.notice p { margin-top: 14px; font-size: 13.5px; line-height: 2.05; color: var(--ink-soft); max-width: 46em; }
.notice-ink { background: var(--ink); border-color: var(--ink); }
.notice-ink h3 { color: #fff; }
.notice-ink p { color: rgba(255,255,255,.78); }

/* 一覧（チェック付き） */
.check-list { display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 2; color: var(--ink-soft); }
.check-list li::before {
  content: ""; position: absolute; left: 2px; top: 12px; width: 12px; height: 6px;
  border-left: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(-45deg);
}
.check-list strong { color: var(--ink); font-weight: 500; }

/* 数値・特徴の並び */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); }
.stat { text-align: center; padding: clamp(22px, 3vw, 34px) 14px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: #fff; }
.stat .num { font-family: var(--font-serif); font-size: clamp(30px, 4.4vw, 46px); line-height: 1; color: var(--gold-deep); }
.stat .label { margin-top: 14px; font-size: 13px; letter-spacing: .06em; color: var(--ink-soft); }

/* 用語の定義リスト */
.def-list { border-top: 1px solid var(--line); }
.def-list > div { display: grid; grid-template-columns: 210px 1fr; gap: 20px; padding: 20px 4px; border-bottom: 1px solid var(--line-soft); }
.def-list dt { font-size: 13.5px; letter-spacing: .08em; color: var(--ink-mute); }
.def-list dd { margin: 0; font-size: 14.5px; line-height: 2; }

/* ---------- 20. お問い合わせ帯 ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--ink); }
.cta-band-media { position: absolute; inset: 0; }
.cta-band-media img { width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.cta-band-inner { position: relative; z-index: 1; text-align: center; color: #fff; padding-block: clamp(66px, 9vw, 118px); }
.cta-band h2 { font-family: var(--font-jp-serif); font-size: clamp(23px, 3.6vw, 38px); line-height: 1.7; letter-spacing: .1em; margin-top: 20px; }
.cta-band :where(p:not(.eyebrow)) { margin-top: 22px; color: rgba(255,255,255,.8); font-size: 14.5px; line-height: 2.1; max-width: 42em; margin-inline: auto; }
.cta-band .btn-row { margin-top: 36px; justify-content: center; }
.cta-band .eyebrow { color: var(--gold-soft); }
.cta-band .eyebrow::before, .cta-band .eyebrow::after { background: rgba(255,255,255,.35); }
.cta-tel { margin-top: 34px; }
.cta-tel a { display: inline-flex; align-items: baseline; gap: 12px; font-family: var(--font-serif); font-size: clamp(26px, 3.6vw, 36px); letter-spacing: .06em; color: #fff; }
.cta-tel small { font-family: var(--font-sans); font-size: 11px; letter-spacing: .16em; color: rgba(255,255,255,.6); }

/* ---------- 21. フォーム ---------- */
.form { display: grid; gap: 28px; }
.form-field { display: grid; gap: 10px; }
.form-label { display: flex; align-items: center; gap: 10px; font-size: 13.5px; letter-spacing: .08em; }
.form-field > legend { margin-bottom: 10px; }
.req, .opt {
  font-size: 10.5px; letter-spacing: .1em; padding: 3px 8px; border-radius: 2px; line-height: 1.6;
}
.req { background: var(--gold); color: #fff; }
.opt { background: var(--bg-warm); color: var(--ink-soft); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="date"], .form select, .form textarea {
  width: 100%; padding: 15px 16px; font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.form textarea { min-height: 170px; resize: vertical; line-height: 1.9; }
.form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%), linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
  background-position: calc(100% - 20px) 25px, calc(100% - 14px) 25px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.form :is(input, select, textarea):focus {
  outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(131,103,49,.14);
}
.form-hint { font-size: 12px; color: var(--ink-mute); line-height: 1.85; max-width: 46em; }
.tel-lg {
  font-family: var(--font-serif); font-size: 26px; letter-spacing: .05em;
  color: var(--ink); font-variant-numeric: lining-nums;
}
.checks input[type="radio"] { accent-color: var(--gold); width: 15px; height: 15px; }
.checks label:has(input:checked) { border-color: var(--gold); background: var(--gold-pale); }
.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.checks label {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px;
  font-size: 13px; letter-spacing: .04em; transition: border-color .25s var(--ease), background .25s var(--ease);
}
.checks input { accent-color: var(--gold); width: 15px; height: 15px; }
.checks label:has(input:checked) { border-color: var(--gold); background: var(--gold-pale); }
.form-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-submit { margin-top: 8px; display: grid; gap: 16px; justify-items: center; }
.form-submit .btn { min-width: 300px; }

/* ---------- 22. フッター ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); padding-top: clamp(56px, 7vw, 88px); font-size: 13px; }
.footer-top { display: grid; grid-template-columns: 1.25fr 2fr; gap: clamp(32px, 5vw, 70px); }
.footer-logo { display: block; height: 46px; width: auto; }
.footer-brand-jp { margin-top: 10px; font-size: 10.5px; letter-spacing: .26em; color: var(--gold-soft); }
.footer-tagline { margin-top: 22px; line-height: 2.05; color: rgba(255,255,255,.62); font-size: 13px; max-width: 26em; }
.footer-tel { margin-top: 26px; }
.footer-tel a { display: inline-block; padding-block: 8px; font-family: var(--font-serif); font-size: 25px; letter-spacing: .05em; color: #fff; }
.footer-tel small { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.5); }
.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer-nav h3 { font-family: var(--font-serif); font-size: 11px; letter-spacing: .24em; color: var(--gold-soft); margin-bottom: 16px; }
.footer-nav li + li { margin-top: 2px; }
.footer-nav a { display: inline-block; padding-block: 10px; color: rgba(255,255,255,.72); transition: color .25s var(--ease); }
.footer-nav a:hover { color: var(--gold-soft); }
.footer-bottom {
  margin-top: clamp(40px, 5vw, 64px); padding-block: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 11.5px; color: rgba(255,255,255,.48); letter-spacing: .06em;
}
.footer-bottom a:hover { color: var(--gold-soft); }

/* 追従CTA（スマホ）
   画面下に浮かせたカード型。背景は下に向かって濃くなるフェードで、
   本文の上に乗せてもボタンだけが浮いて見えるようにしている。
   幅の広い端末（〜860px）でも間延びしないよう、中身は520pxで頭打ちにする */
.sp-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: 8px;
  padding: 12px max(12px, calc((100% - 520px) / 2));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg,
    rgba(250,247,242,0)   0%,
    rgba(250,247,242,.78) 38%,
    rgba(250,247,242,.97) 100%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transform: translateY(130%); transition: transform .45s var(--ease);
}
.sp-cta.is-visible { transform: none; }

.sp-cta a {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 0; min-height: 56px; padding: 0 14px;
  border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sp-cta a:active { transform: translateY(1px) scale(.99); }

/* 電話：白のカード。控えめに置いて、右のゴールドを主役にする */
.sp-cta .tel {
  flex: 0 1 auto;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(35,32,29,.09);
}
/* 相談：ゴールドのグラデーション＋影で、面から持ち上がって見せる */
.sp-cta .mail {
  flex: 1 1 auto;
  background: linear-gradient(118deg, var(--gold-deep) 0%, var(--gold) 46%, var(--gold-light) 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(131,103,49,.34), inset 0 1px 0 rgba(255,255,255,.22);
}

.sp-cta-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sp-cta-main { font-size: 13.5px; letter-spacing: .06em; line-height: 1.45; white-space: nowrap; }
.sp-cta-sub  { font-size: 10px; letter-spacing: .02em; line-height: 1.4; white-space: nowrap; color: var(--ink-mute); }
.sp-cta .mail .sp-cta-sub { color: rgba(255,255,255,.85); }

.sp-cta-ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-warm); color: var(--gold-deep);
}
.sp-cta-ico svg { width: 16px; height: 16px; }

.sp-cta-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 0 8px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--gold-deep);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; line-height: 1;
}

.sp-cta-arrow { flex: 0 0 auto; display: grid; place-items: center; opacity: .9; }
.sp-cta-arrow svg { width: 15px; height: 15px; }

/* 光がゆっくり横切る。押せることに気づいてもらうための控えめな動き */
.sp-cta .mail::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 42%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg); pointer-events: none;
  animation: cta-shine 5s var(--ease) 1.4s infinite;
}
@keyframes cta-shine {
  0%        { left: -60%; }
  26%, 100% { left: 130%; }
}

/* 画面が狭いときは、飾りの矢印を省いて文字が詰まらないようにする */
@media (max-width: 380px) {
  .sp-cta { gap: 7px; padding-inline: 10px; }
  .sp-cta a { padding: 0 12px; gap: 8px; }
  .sp-cta-arrow { display: none; }
}
/* さらに狭いときは、電話側の補足も省いて相談ボタンに幅を譲る */
@media (max-width: 340px) {
  .sp-cta .tel .sp-cta-sub { display: none; }
}

/* ---------- 23. スクロール演出 ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  /* 自動スライドを止め、横スクロールで見られるようにする */
  .mg-track { animation: none; }
  .mg-slider { overflow-x: auto; }
  .hero-scroll .hs-arrow, .hero-scroll .hs-arrow::before { animation: none; }
  .sp-cta .mail::after { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---------- 24. レスポンシブ ---------- */
@media (max-width: 1080px) {
  .gnav { display: none; }
  .nav-toggle { display: block; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .member-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --header-h: 60px; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  /* ヘッダーは写真の上に重ねる（そのぶん縦が詰まる） */
  .hero { padding-top: 0; }
  /* スマホ用の写真（hero-main-sm.jpg）は上端に木々をぼかした余白を継ぎ足してある。
     ヘッダーが新郎新婦に重ならないよう、その余白ぶんまで見せる高さにする。
     下側は、見出しを写真に重ねるぶんだけ長めに取る。
     高さは aspect-ratio ではなく padding-top（= 4:4.3）で作る。
     iOS Safari で aspect-ratio が効かず高さ0になるのを避けるため */
  .hero-media { order: -1; height: 0; padding-top: 124%; }
  .hero-media img { object-position: center 55%; }
  /* 写真の上端だけを背景色でフェードさせ、ヘッダーの文字を読ませる */
  .hero-media::after {
    background: linear-gradient(180deg,
      rgba(250,247,242,.96) 0%,
      rgba(250,247,242,.92) calc(var(--header-h) - 6px),
      rgba(250,247,242,.45) calc(var(--header-h) + 12px),
      rgba(250,247,242,0)   calc(var(--header-h) + 44px));
  }
  /* 写真の下端は、重ねる見出しが読めるよう白いフェードで背景色に溶かす */
  .hero-media::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 210px; z-index: 1;
    background: linear-gradient(180deg,
      rgba(250,247,242,0) 0%,
      rgba(250,247,242,.42) 32%,
      rgba(250,247,242,.84) 60%,
      rgba(250,247,242,.98) 85%,
      var(--bg-soft) 100%);
    pointer-events: none;
  }
  /* 見出しは写真の下端に重ねる（そのぶん本文ブロックを上に食い込ませる） */
  .hero-copy { margin-top: -104px; padding: 0 var(--gutter) 46px; z-index: 2; }
  /* ロゴがヘッダーにあるので、見出しの上のラベルは省く */
  .hero-eyebrow { display: none; }
  /* 「その一日の、驚きと記録を、」までを1行に */
  .hero-title { font-size: clamp(20px, 6.1vw, 30px); letter-spacing: .04em; line-height: 1.6; }
  .hero-title span { display: inline; }
  .hero-title .ht-last { display: block; }
  .hero-sub { margin-top: 16px; line-height: 1.95; }
  .hero-scroll { display: none; }
  .split { grid-template-columns: 1fr; }
  .split.is-reverse .split-media { order: 0; }
  .split-media .frame { display: none; }
  .stat-row { grid-template-columns: 1fr; }
  .def-list > div { grid-template-columns: 1fr; gap: 6px; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
  .sp-cta { display: flex; }
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  /* 幅が狭いと文字が右端まで届くので、横グラデではなく全面＋下寄りを濃く */
  .feature-band-media::after {
    background: linear-gradient(180deg, rgba(14,12,11,.62) 0%, rgba(14,12,11,.78) 55%, rgba(14,12,11,.86) 100%);
  }
}

/* ファーストビューの写真：タブレット幅は大きく写るので、そのぶん縦を詰める（= 4:3.4） */
@media (min-width: 601px) and (max-width: 860px) {
  .hero-media { padding-top: 96%; }
  .hero-media img { object-position: center 50%; }
}
/* 画面が狭いほどヘッダーが相対的に大きくなるので、写真の上側を少し多めに残す */
@media (max-width: 380px) {
  .hero-media img { object-position: center 53%; }
}

/* スマホ：比較表を横スクロールさせず、行ごとのカードにして見せる */
@media (max-width: 700px) {
  .table-wrap { overflow-x: visible; }
  .price-table { min-width: 0; display: block; background: transparent; }
  .price-table thead { display: none; }
  .price-table tbody { display: grid; gap: 14px; }
  .price-table tr {
    display: block; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius);
  }
  .price-table tbody th {
    display: block; padding: 15px 18px 13px;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-jp-serif); font-size: 15px; white-space: normal;
  }
  .price-table tbody td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 13px 18px; text-align: right; border-bottom: 0;
  }
  .price-table tbody td::before {
    content: attr(data-label);
    font-family: var(--font-sans); font-size: 12px; letter-spacing: .08em;
    color: var(--ink-mute); flex: 0 0 auto;
  }
  .price-table tbody td.is-market { font-size: 17px; }
  .price-table tbody td.is-ours {
    font-size: 24px; border-top: 1px solid var(--gold-pale);
  }
  .price-table tbody td.is-ours::before { color: var(--gold-deep); }

  /* 単品メニューの表も、そのままの幅で読めるようにする */
  .menu-table { min-width: 0; }
  .menu-table th, .menu-table td { padding: 14px 12px; }
  .menu-table tbody th { font-size: 13.5px; line-height: 1.7; }
  .menu-table td { font-size: 16px; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  .header-cta { display: none; }
  .brand-logo { height: 30px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .member-grid { grid-template-columns: repeat(2, 1fr); }
  .member-name { font-size: 16px; }
  .reason { grid-template-columns: 1fr; gap: 10px; }
  .reason-no { font-size: 34px; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .step-no { display: flex; align-items: baseline; gap: 10px; }
  .step-no b { font-size: 30px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .form-submit .btn { min-width: 0; width: 100%; }
  .card-body { padding: 22px 20px 26px; }
}


/* ---------- 25. 印刷 ---------- */
@media print {
  .site-header, .menu-panel, .sp-cta, .marquee, .hero-scroll, .skip { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { padding-bottom: 0; font-size: 11pt; background: #fff; }
  .page-hero-media, .feature-band-media, .cta-band-media { display: none; }
  .page-hero, .feature-band, .cta-band, .site-footer,
  .bg-soft, .bg-warm, .bg-blush { background: #fff !important; }
  .page-hero-inner, .page-hero h1, .feature-band-inner, .cta-band-inner,
  .site-footer, .site-footer * { color: #000 !important; }
  .page-hero h1 { text-shadow: none; }
  .cta-band .btn-ghost, .feature-band .btn-ghost, .page-hero .btn-ghost {
    background: #fff !important; border-color: #000 !important; color: #000 !important;
  }
  .section { padding-block: 16pt; break-inside: avoid; }
  .card, .plan, .step, .reason { break-inside: avoid; }
  a[href^="http"]::after, a[href^="tel"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .faq-item .faq-a { grid-template-rows: 1fr !important; }
  .faq-item .faq-a-inner { visibility: visible !important; }
}


/* ==========================================================================
   26. マジシャン紹介（YOURI）
   magic.html / index.html のマジシャン紹介で使う。
   ========================================================================== */
.magician-band { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.magician-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 80% 0%, rgba(168,138,85,.22) 0%, rgba(35,32,29,0) 60%);
  pointer-events: none;
}
.magician-band > .wrap,
.magician-band > .wrap-narrow { position: relative; z-index: 1; }
.magician-band .eyebrow { color: var(--gold-soft); }
.magician-band .eyebrow::before, .magician-band .eyebrow::after { background: rgba(255,255,255,.4); }
.magician-band .sec-title { color: #fff; }
.magician-band .sec-lead { color: rgba(255,255,255,.78); }
.magician-band .note { color: rgba(255,255,255,.55); }
.magician-band .note a { color: var(--gold-soft); }

.magician-lead {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(28px, 5vw, 70px); align-items: center;
}
.magician-lead-media { position: relative; }
.magician-lead-media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%;
  border-radius: var(--radius); filter: grayscale(.15);
}
.magician-lead-media .frame {
  position: absolute; inset: 16px -16px -16px 16px; border: 1px solid rgba(200,176,131,.45);
  border-radius: var(--radius); pointer-events: none;
}
.magician-role {
  font-family: var(--font-serif); font-size: 11px; letter-spacing: .26em; color: var(--gold-soft);
}
.magician-name {
  margin-top: 14px; font-family: var(--font-serif); font-size: clamp(38px, 6vw, 62px);
  line-height: 1; letter-spacing: .1em; color: #fff;
}
.magician-name .jp {
  display: block; margin-top: 12px; font-family: var(--font-jp-serif);
  font-size: 14px; letter-spacing: .2em; color: rgba(255,255,255,.62);
}
.magician-catch {
  margin-top: 26px; font-family: var(--font-jp-serif); font-size: clamp(18px, 2.4vw, 25px);
  line-height: 1.85; letter-spacing: .08em; color: #fff;
}
.magician-band p.magician-text {
  margin-top: 22px; font-size: 14.5px; line-height: 2.15; color: rgba(255,255,255,.82); max-width: 40em;
}
.magician-facts { margin-top: 30px; display: grid; gap: 11px; }
.magician-facts li {
  position: relative; padding-left: 24px; font-size: 14px; line-height: 1.95; color: rgba(255,255,255,.88);
}
.magician-facts li::before {
  content: ""; position: absolute; left: 0; top: .78em; width: 11px; height: 1px; background: var(--gold-soft);
}
.magician-facts strong { color: #fff; font-weight: 500; }
.magician-quote {
  margin-top: 30px; padding: 18px 22px; border-left: 2px solid var(--gold-light);
  background: rgba(255,255,255,.05);
  font-family: var(--font-jp-serif); font-size: 14.5px; line-height: 2; letter-spacing: .05em;
  color: rgba(255,255,255,.9);
}
.magician-quote small { display: block; margin-top: 8px; font-size: 11.5px; letter-spacing: .12em; color: rgba(255,255,255,.55); }
/* 受賞バッジ（プロフィール右カラムの受賞欄に並べる） */
.awards-badges { margin-top: 26px; }
.awards-badges img { display: block; width: 100%; max-width: 560px; height: auto; }

/* 数字の帯 */
.stat-row-4 { grid-template-columns: repeat(4, 1fr); }
.magician-band .stat { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.14); }
.magician-band .stat .num { color: var(--gold-soft); }
.magician-band .stat .label { color: rgba(255,255,255,.72); }
.stat .num small { font-family: var(--font-sans); font-size: .36em; letter-spacing: .06em; margin-left: 3px; white-space: nowrap; }

/* 所属マジシャンのスライド（index.html）
   右から左へ自動で流れる。カードを2グループ複製し、-50% まで動かして継ぎ目なくループさせる。
   カードを増減したときは、2つのグループの中身を必ず同じにすること。 */
.mg-slider {
  position: relative; z-index: 1;
  margin-top: clamp(30px, 4.5vw, 52px);
  overflow: hidden;
  /* 左右の端をふわっと消して、画面外へ続いているように見せる */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.mg-track { display: flex; width: max-content; animation: mg-slide 60s linear infinite; }
.mg-slider:hover .mg-track,
.mg-slider:focus-within .mg-track { animation-play-state: paused; }
.mg-group { display: flex; gap: clamp(14px, 1.6vw, 22px); padding-right: clamp(14px, 1.6vw, 22px); flex: 0 0 auto; }
@keyframes mg-slide { to { transform: translateX(-50%); } }

.mg-card {
  position: relative; margin: 0; flex: 0 0 auto;
  width: clamp(196px, 21vw, 280px);
  border-radius: var(--radius); overflow: hidden;
  background: rgba(255,255,255,.05);
}
.mg-card img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%;
  filter: grayscale(.15);
}
.mg-card figcaption {
  position: absolute; inset: auto 0 0 0; padding: 46px 16px 15px;
  background: linear-gradient(180deg, rgba(20,18,16,0) 0%, rgba(20,18,16,.82) 55%, rgba(20,18,16,.94) 100%);
}
.mg-name {
  display: block; font-family: var(--font-jp-serif); font-size: 15.5px; letter-spacing: .06em; color: #fff;
}
.mg-name small {
  display: block; margin-top: 5px; font-family: var(--font-sans);
  font-size: 10.5px; letter-spacing: .14em; color: rgba(255,255,255,.6);
}
.mg-tag { display: block; margin-top: 9px; font-size: 11px; letter-spacing: .08em; color: var(--gold-soft); }

/* テレビ出演の小見出し */
.mg-tv-label {
  margin-top: clamp(38px, 5vw, 58px); text-align: center;
  font-size: 11.5px; letter-spacing: .2em; color: rgba(255,255,255,.55);
}
.mg-tv-label + .tv-grid { margin-top: 22px; }

/* テレビ出演（画像は背景透過。カードを敷かず、そのまま並べる） */
.tv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 36px); justify-items: center; align-items: center;
}
.tv-grid figure { margin: 0; width: 100%; }
.tv-grid img { width: 100%; height: auto; display: block; object-fit: contain; opacity: .94; }
.tv-more { margin-top: 26px; border-top: 1px solid rgba(255,255,255,.16); }
.tv-more summary {
  list-style: none; cursor: pointer; padding: 18px 2px; font-size: 13.5px; letter-spacing: .08em;
  display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.9);
}
.tv-more summary::-webkit-details-marker { display: none; }
.tv-more summary::after { content: "＋"; margin-left: auto; color: var(--gold-soft); font-size: 15px; }
.tv-more[open] summary::after { content: "−"; }
.tv-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 26px; padding-bottom: 22px;
}
.tv-list li {
  display: flex; gap: 10px; align-items: baseline; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; color: rgba(255,255,255,.8);
}
.tv-list .station {
  margin-left: auto; flex: 0 0 auto; font-size: 11px; letter-spacing: .08em; color: var(--gold-soft);
}

/* 世界での公演 */
.world-photo { margin-top: 34px; border-radius: var(--radius); overflow: hidden; }
.world-photo img { width: 100%; height: auto; display: block; }


/* ==========================================================================
   27. お客様の声
   ========================================================================== */
.rating-summary {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: center;
  padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.rating-score { text-align: center; }
.rating-score .num {
  font-family: var(--font-serif); font-size: clamp(48px, 7vw, 72px); line-height: 1; color: var(--gold-deep);
}
.rating-score .max { font-family: var(--font-serif); font-size: 18px; color: var(--ink-mute); }
.rating-stars { margin-top: 10px; font-size: 17px; letter-spacing: .18em; color: var(--gold-light); }
.rating-count { margin-top: 10px; font-size: 12px; letter-spacing: .06em; color: var(--ink-mute); }
.rating-note { font-size: 12.5px; line-height: 1.95; color: var(--ink-mute); }
.rating-note strong { color: var(--ink); font-weight: 500; }

.voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.voice-card {
  display: flex; flex-direction: column; padding: clamp(22px, 3vw, 30px);
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.voice-card .stars { font-size: 13px; letter-spacing: .16em; color: var(--gold-light); }
.voice-card h3 {
  margin-top: 14px; font-family: var(--font-jp-serif); font-size: 16.5px; line-height: 1.75; letter-spacing: .06em;
}
.voice-card .body { margin-top: 14px; font-size: 13.5px; line-height: 2.05; color: var(--ink-soft); flex: 1; }
.voice-card .meta {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: 12px; letter-spacing: .04em; color: var(--ink-mute); line-height: 1.9;
}
.voice-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.voice-tags li {
  font-size: 11px; letter-spacing: .06em; color: var(--gold-deep);
  border: 1px solid var(--gold-pale); background: var(--bg-soft); border-radius: 999px; padding: 4px 11px;
}


/* ==========================================================================
   28. 出演実績
   ========================================================================== */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 30px); }
.work-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden;
}
.work-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); }
.work-media img { width: 100%; height: 100%; object-fit: cover; }
.work-cat {
  position: absolute; left: 0; bottom: 0; padding: 7px 14px; font-size: 11px; letter-spacing: .1em;
  background: rgba(35,32,29,.82); color: #fff;
}
.work-body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.work-body h3 {
  font-family: var(--font-jp-serif); font-size: 16.5px; line-height: 1.75; letter-spacing: .06em;
}
.work-body > p { margin-top: 12px; font-size: 13px; line-height: 2; color: var(--ink-soft); flex: 1; }
.work-spec { margin-top: 18px; border-top: 1px solid var(--line-soft); }
.work-spec > div {
  display: grid; grid-template-columns: 5.5em 1fr; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.work-spec dt { font-size: 11.5px; letter-spacing: .08em; color: var(--ink-mute); }
.work-spec dd { margin: 0; font-size: 12.5px; line-height: 1.8; }

.work-list { border-top: 1px solid var(--line); }
.work-list li {
  display: grid; grid-template-columns: 8.5em 1fr auto; gap: 8px 20px; align-items: baseline;
  padding: 17px 4px; border-bottom: 1px solid var(--line-soft);
}
.work-list .place { font-size: 13px; letter-spacing: .05em; color: var(--ink-mute); }
.work-list .what { font-size: 14px; line-height: 1.8; }
.work-list .size { font-size: 12px; letter-spacing: .06em; color: var(--gold-deep); white-space: nowrap; }


/* ==========================================================================
   29. コラム
   ========================================================================== */
.column-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 30px); }
.column-card {
  display: flex; flex-direction: column; padding: clamp(24px, 3vw, 32px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .3s var(--ease), transform .4s var(--ease);
}
.column-card:hover { border-color: var(--gold-soft); transform: translateY(-3px); }
.column-card .date { font-family: var(--font-serif); font-size: 12px; letter-spacing: .16em; color: var(--gold); }
.column-card h3 {
  margin-top: 12px; font-family: var(--font-jp-serif); font-size: 17px; line-height: 1.8; letter-spacing: .05em;
}
.column-card .excerpt { margin-top: 14px; font-size: 13px; line-height: 2; color: var(--ink-soft); flex: 1; }
.column-tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.column-tags li {
  font-size: 11px; letter-spacing: .06em; color: var(--ink-mute);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
}
.column-card .card-foot { margin-top: 18px; }

/* 記事本文 */
.article { max-width: 800px; margin-inline: auto; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  font-size: 12px; letter-spacing: .08em; color: var(--ink-mute);
}
.article-meta .date { font-family: var(--font-serif); font-size: 13px; letter-spacing: .16em; color: var(--gold); }
.article-lead {
  margin-top: 34px; padding: clamp(22px, 3vw, 32px);
  background: var(--bg-soft); border-radius: var(--radius);
}
.article-lead p { font-size: 14.5px; line-height: 2.15; color: var(--ink-soft); }
.article-lead p + p { margin-top: 16px; }
.article-lead strong { color: var(--ink); font-weight: 500; }

.article-toc {
  margin-top: 34px; padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.article-toc > p {
  font-family: var(--font-serif); font-size: 12px; letter-spacing: .2em; color: var(--gold);
}
.article-toc ol { margin-top: 16px; display: grid; gap: 2px; counter-reset: toc; }
.article-toc li { counter-increment: toc; }
.article-toc a {
  display: flex; gap: 12px; padding: 9px 0; font-size: 13.5px; line-height: 1.85; color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}
.article-toc li:last-child a { border-bottom: 0; }
.article-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-serif); font-size: 12px; color: var(--gold-light); flex: 0 0 auto; line-height: 1.9;
}
.article-toc a:hover { color: var(--gold-deep); }

.article-body { margin-top: clamp(40px, 6vw, 64px); }
.article-section + .article-section { margin-top: clamp(44px, 6vw, 70px); }
.article-section > h2 {
  font-family: var(--font-jp-serif); font-size: clamp(20px, 2.7vw, 27px); line-height: 1.7; letter-spacing: .07em;
  padding-bottom: 16px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px;
}
.article-section > h3 {
  margin-top: clamp(28px, 4vw, 40px);
  font-family: var(--font-jp-serif); font-size: clamp(17px, 2.1vw, 20px); line-height: 1.75; letter-spacing: .06em;
  padding-left: 14px; border-left: 2px solid var(--gold-light);
}
.article-section p { margin-top: 18px; font-size: 14.5px; line-height: 2.15; color: var(--ink-soft); }
.article-section strong { color: var(--ink); font-weight: 500; }
.article-section a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.article-section ul, .article-section ol { margin-top: 18px; display: grid; gap: 10px; }
.article-section ul li {
  position: relative; padding-left: 22px; font-size: 14px; line-height: 2; color: var(--ink-soft);
}
.article-section ul li::before {
  content: ""; position: absolute; left: 3px; top: .92em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--gold-light);
}
.article-section ol { counter-reset: al; }
.article-section ol li {
  counter-increment: al; position: relative; padding-left: 30px;
  font-size: 14px; line-height: 2; color: var(--ink-soft);
}
.article-section ol li::before {
  content: counter(al) "."; position: absolute; left: 2px;
  font-family: var(--font-serif); font-size: 14px; color: var(--gold);
}
.article-table-wrap { margin-top: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-table { min-width: 480px; background: #fff; font-size: 13.5px; }
.article-table th, .article-table td {
  padding: 14px 16px; text-align: left; border: 1px solid var(--line-soft); line-height: 1.85;
}
.article-table thead th {
  background: var(--bg-soft); font-size: 12.5px; font-weight: 500; letter-spacing: .08em; white-space: nowrap;
}
.article-table tbody th { font-weight: 500; background: #fff; }
.article-table .is-ours { color: var(--gold-deep); font-weight: 500; }

.article-point {
  margin-top: 26px; padding: clamp(20px, 3vw, 28px);
  background: var(--bg-warm); border-radius: var(--radius);
}
.article-point > p:first-child {
  margin-top: 0; font-family: var(--font-jp-serif); font-size: 15.5px; letter-spacing: .06em; color: var(--ink);
}
.article-point p { font-size: 13.5px; line-height: 2.05; }

.article-note {
  margin-top: 26px; padding: 18px 22px; border-left: 2px solid var(--gold-light); background: var(--bg-soft);
}
.article-note p { margin-top: 0; font-size: 13px; line-height: 2; color: var(--ink-soft); }

.article-cta {
  margin-top: clamp(44px, 6vw, 66px); padding: clamp(28px, 4vw, 44px);
  background: var(--ink); border-radius: var(--radius); text-align: center; color: #fff;
}
.article-cta h2 {
  font-family: var(--font-jp-serif); font-size: clamp(19px, 2.6vw, 25px); line-height: 1.75; letter-spacing: .08em; color: #fff;
}
.article-cta p {
  margin-top: 18px; font-size: 13.5px; line-height: 2.05; color: rgba(255,255,255,.8);
  max-width: 34em; margin-inline: auto;
}
.article-cta .btn-row { margin-top: 28px; justify-content: center; }

.article-related { margin-top: clamp(44px, 6vw, 66px); }
.article-related > p {
  font-family: var(--font-serif); font-size: 12px; letter-spacing: .2em; color: var(--gold);
}
.article-related ul { margin-top: 18px; border-top: 1px solid var(--line); }
.article-related li { border-bottom: 1px solid var(--line-soft); }
.article-related a {
  display: grid; gap: 6px; padding: 18px 2px;
}
.article-related .ttl { font-size: 14.5px; line-height: 1.8; letter-spacing: .04em; }
.article-related .desc { font-size: 12.5px; line-height: 1.9; color: var(--ink-mute); }
.article-related a:hover .ttl { color: var(--gold-deep); }


/* ==========================================================================
   30. 新規セクションのレスポンシブ
   ========================================================================== */
@media (max-width: 1080px) {
  .stat-row-4 { grid-template-columns: repeat(2, 1fr); }
  .voice-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid  { grid-template-columns: repeat(2, 1fr); }
  .column-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .magician-lead { grid-template-columns: 1fr; }
  .magician-lead-media { max-width: 420px; }
  .magician-lead-media .frame { display: none; }
  .rating-summary { grid-template-columns: 1fr; text-align: center; }
  .rating-note { text-align: left; }
  .tv-list { grid-template-columns: 1fr; }
  .work-list li { grid-template-columns: 1fr; gap: 4px; }
  .work-list .size { margin-top: 2px; }
}

@media (max-width: 620px) {
  .tv-grid { grid-template-columns: repeat(2, 1fr); }
  .voice-grid, .work-grid, .column-grid { grid-template-columns: 1fr; }
  .stat-row-4 { grid-template-columns: repeat(2, 1fr); }
  .article-table { min-width: 420px; }
  .article-table th, .article-table td { padding: 11px 12px; font-size: 12.5px; }
  .work-spec > div { grid-template-columns: 5em 1fr; }
}


/* グローバルナビが7項目になったぶん、ハンバーガーへの切り替えを少し早める */
@media (max-width: 1180px) {
  .gnav { display: none; }
  .nav-toggle { display: block; }
}


/* =========================================================
   ファーストビューの「呼べるもの」一覧
   ========================================================= */
.hero-menu {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.hero-menu-lead {
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.hero-menu-lead b { color: var(--gold-deep); font-weight: 600; }

.hero-menu-list {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 8px;
}
.hero-menu-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.hm-ico {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--gold-pale);
  color: var(--gold);
}
.hm-ico svg { width: 22px; height: 22px; }
.hm-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.hm-body b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
.hm-price {
  font-size: 12.5px;
  color: var(--ink-mute);
  letter-spacing: .02em;
  font-feature-settings: "palt" 0;
}

@media (max-width: 1080px) {
  .hero-menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hero-menu { margin-top: 22px; padding-top: 18px; }
  .hero-menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
  .hm-ico { width: 36px; height: 36px; }
  .hm-ico svg { width: 20px; height: 20px; }
  .hm-body b { font-size: 14px; }
}
@media (max-width: 360px) {
  .hero-menu-list { grid-template-columns: 1fr; }
}


/* =========================================================
   料金シミュレーター
   ========================================================= */
.sim-section {
  /* 上は詰めて、ファーストビューから見出しがのぞくようにする */
  padding-top: clamp(30px, 2.6vw, 32px);
  padding-bottom: clamp(56px, 8vw, 104px);
  background: var(--bg-soft);
  border-top: 1px solid var(--line-soft);
}
.sim-section .sec-lead { max-width: 34em; margin-inline: auto; }
.sim-section .sec-title { margin-top: 12px; }

.sim {
  margin-top: clamp(28px, 4vw, 44px);
  max-width: 860px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 40px);
}
.sim-q { border: 0; margin: 0 0 clamp(26px, 3.6vw, 38px); padding: 0; }
.sim-q:last-of-type { margin-bottom: 0; }

.sim-q-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.6;
}
.sim-num {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0;
}
.sim-q-note {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: .04em;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ---- ラジオ（カード型） ---- */
.sim-opts { margin-top: 14px; display: grid; gap: 8px; }
.sim-opts > * { min-width: 0; }
.sim-opt-box { min-width: 0; }
.sim-opt-box b, .sim-opt-box small { min-width: 0; overflow-wrap: break-word; }
.sim-opts-3 { grid-template-columns: repeat(3, 1fr); }
.sim-opts-4 { grid-template-columns: repeat(4, 1fr); }
.sim-opts-5 { grid-template-columns: repeat(5, 1fr); }

.sim-opt { position: relative; display: block; cursor: pointer; }
.sim-opt input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.sim-opt-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.sim-opt-box b { font-size: 13.5px; font-weight: 600; letter-spacing: .04em; }
.sim-opt-box small { font-size: 11.5px; color: var(--ink-mute); line-height: 1.6; }
.sim-opt-sm .sim-opt-box { padding: 11px 12px; }

.sim-opt:hover .sim-opt-box { border-color: var(--gold-soft); }
.sim-opt input:checked + .sim-opt-box {
  border-color: var(--gold);
  background: var(--bg-warm);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.sim-opt input:focus-visible + .sim-opt-box {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---- チェックボックス（項目） ---- */
.sim-items { margin-top: 14px; display: grid; gap: 8px; }
.sim-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.sim-item.is-on { border-color: var(--gold); background: var(--bg-warm); }
.sim-item[hidden] { display: none; }

.sim-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
}
.sim-check input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.sim-check-box {
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--gold-light);
  border-radius: 3px;
  background: #fff;
  position: relative;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.sim-check-box::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 1.8px 1.8px 0;
  transform: translateY(-1px) rotate(45deg) scale(.4);
  opacity: 0;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.sim-check input:checked + .sim-check-box { background: var(--gold); border-color: var(--gold); }
.sim-check input:checked + .sim-check-box::after { opacity: 1; transform: translateY(-1px) rotate(45deg) scale(1); }
.sim-check input:focus-visible + .sim-check-box { outline: 2px solid var(--gold); outline-offset: 2px; }

.sim-check-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sim-check-body b { font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.sim-check-body small { font-size: 11.5px; color: var(--ink-mute); line-height: 1.6; }
.sim-check-price {
  flex: none;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: .02em;
  font-feature-settings: "palt" 0;
  white-space: nowrap;
}

/* ---- 選んだときだけ出るサブ選択 ---- */
.sim-sub {
  display: none;
  padding: 0 15px 14px 47px;
  gap: 6px 18px;
  flex-wrap: wrap;
}
.sim-item.is-on .sim-sub { display: flex; }
.sim-sub label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.6;
}
.sim-sub input { accent-color: var(--gold); width: 14px; height: 14px; margin: 0; flex: none; }

/* ---- 送信 ---- */
.sim-submit { margin-top: clamp(26px, 3.4vw, 36px); text-align: center; }
.btn-lg { padding: 17px 40px; font-size: 14px; }
.sim-submit-note { margin-top: 12px; font-size: 11.5px; color: var(--ink-mute); }

/* ---- 結果 ---- */
.sim-result {
  max-width: 860px;
  margin: 22px auto 0;
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.sim-result[hidden] { display: none; }
.sim-result-inner { padding: clamp(24px, 4vw, 40px); }

.sim-result-head {
  text-align: center;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}
.sim-result-label {
  font-size: 11.5px;
  letter-spacing: .18em;
  color: var(--ink-mute);
}
.sim-result-total {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: clamp(46px, 9vw, 72px);
  line-height: 1.05;
  color: var(--gold-deep);
  letter-spacing: .02em;
}
.sim-yen {
  font-family: var(--font-jp-serif);
  font-size: clamp(17px, 2.6vw, 22px);
  margin-left: 4px;
  letter-spacing: .04em;
}
.sim-result-sub { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }

.sim-breakdown { margin-top: 20px; display: grid; gap: 1px; background: var(--line-soft); }
.sim-breakdown li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 2px;
  background: #fff;
  font-size: 13px;
}
.sim-breakdown li span:first-child { color: var(--ink-soft); }
.sim-breakdown li span:last-child {
  font-feature-settings: "palt" 0;
  letter-spacing: .02em;
  white-space: nowrap;
}
.sim-breakdown li.is-discount span { color: var(--gold-deep); }
.sim-breakdown li.is-total {
  border-top: 1px solid var(--line);
  font-weight: 600;
  font-size: 14px;
  padding-top: 13px;
}

.sim-compare {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  text-align: center;
}
.sim-compare[hidden] { display: none; }
.sim-compare-label { font-size: 11.5px; letter-spacing: .1em; color: var(--ink-mute); }
.sim-compare-price {
  margin-top: 2px;
  font-family: var(--font-jp-serif);
  font-size: 22px;
  color: var(--ink-soft);
  letter-spacing: .04em;
}
.sim-compare-note { margin-top: 8px; font-size: 11.5px; color: var(--ink-mute); line-height: 1.8; }

/* 二次会を選んだときの案内。シミュレーターは単品の積み上げなので、
   二次会プランに含まれる運営まわり（進行台本・音響・受付・ディレクター）が入っていない */
.sim-party {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
}
.sim-party[hidden] { display: none; }
.sim-party-label { font-size: 12.5px; letter-spacing: .04em; color: var(--ink); }
.sim-party-text { margin-top: 8px; font-size: 12px; color: var(--ink-soft); line-height: 1.9; }
.sim-party a { margin-top: 10px; display: inline-block; font-size: 12px; color: var(--gold); }

.sim-notes { margin-top: 22px; display: grid; gap: 7px; }
.sim-notes li {
  position: relative;
  padding-left: 15px;
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.85;
}
.sim-notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}
.sim-notes li b { color: var(--ink-soft); font-weight: 600; }

.sim-cta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.sim-cta-note {
  margin-top: 12px;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.8;
}

@media (max-width: 720px) {
  .sim-opts-3, .sim-opts-4 { grid-template-columns: repeat(2, 1fr); }
  .sim-opts-5 { grid-template-columns: repeat(3, 1fr); }
  .sim-check { gap: 10px; padding: 12px 13px; }
  .sim-check-body b { font-size: 13.5px; }
  .sim-check-price { font-size: 12px; }
  .sim-sub { padding-left: 43px; }
  .sim-cta .btn { width: 100%; text-align: center; }
}
@media (max-width: 480px) {
  .sim-check-price { display: none; }
  .sim-opts-4, .sim-opts-5 { grid-template-columns: repeat(2, 1fr); }
  .sim-opt-box { padding: 11px 10px; }
  .sim-opt-box b { font-size: 13px; }
}

@media print {
  .sim { border-color: #ccc; }
  .sim-submit, .sim-cta { display: none; }
}

/* シミュレーターから引き継いだときのお知らせ */
.form-prefill {
  margin-bottom: 22px;
  padding: 13px 16px;
  background: var(--bg-warm);
  border-left: 2px solid var(--gold);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}


/* コラム記事のページヘッダー（タイトルが長いので見出しを小さくする） */
.page-hero.is-article h1 { font-size: clamp(20px, 3.1vw, 33px); line-height: 1.65; }
.page-hero.is-article .page-hero-inner { padding-block: clamp(56px, 8vw, 96px); }
.page-hero.is-article .article-meta { justify-content: center; margin-top: 22px; color: rgba(255,255,255,.7); }
.page-hero.is-article .article-meta .date { color: var(--gold-soft); }
.page-hero.is-article .article-meta .tag {
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 4px 12px; font-size: 11px;
}

/* スマホのときだけ改行する */
.br-sp { display: none; }
@media (max-width: 640px) {
  .br-sp { display: inline; }
  .sim-section .sec-title { font-size: clamp(19px, 5.6vw, 26px); }
}