/* ==========================================================
   掘床（ほりどこ） style.css
   基準：design-system/MASTER.md
   ========================================================== */

/* ---------- トークン ---------- */
:root {
  --color-sumi: #22343A;
  --color-mizu: #7D98A1;
  --color-mizu-deep: #46656F;
  --color-hori: #E5ECEA;      /* 掘割の水を淡くした基調色 */
  --color-hori-light: #EDF2F0; /* ページ上部・水面のひかり */
  --color-hori-deep: #D3DEDB;  /* ページ下部・深い水 */
  --color-shiro: #FFFFFF;
  --color-ki: #9A6A4A;
  --color-akari: #C97B3D;
  --color-yanagi: #88936F;
  --color-line: #C8D4D1;

  --font-mincho: "Shippori Mincho", serif;
  --font-sans: "Noto Sans JP", sans-serif;
  --font-en: "EB Garamond", serif;

  --text-hero: clamp(2.6rem, 9vw, 5rem);
  --text-h2: clamp(1.5rem, 4vw, 2.25rem);
  --text-h3: clamp(1.25rem, 3vw, 1.5rem);
  --text-small: 0.8125rem;

  --section-gap: 96px;
  --shadow-float: 0 8px 32px rgba(34, 52, 58, .16);
}
@media (min-width: 1024px) {
  :root { --section-gap: 160px; }
}

/* ---------- リセット・ベース ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--color-hori-deep); }
body {
  font-family: var(--font-sans);
  font-weight: 350;
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--color-sumi);
  /* 下に行くほど水が深くなる */
  background: linear-gradient(180deg, var(--color-hori-light) 0%, var(--color-hori) 45%, var(--color-hori-deep) 100%);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-mizu-deep); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-mizu-deep); outline-offset: 2px; }

.container { max-width: 1152px; margin-inline: auto; padding-inline: 20px; }
.container.narrow { max-width: 720px; }
.container.wide { max-width: 1280px; }

.section { margin-top: var(--section-gap); }
main > .section:first-child { margin-top: var(--section-gap); }

/* セクション冒頭の波線（水面のしるし。ゆっくり流れる） */
.section::before {
  content: "";
  display: block;
  width: 96px;
  height: 10px;
  margin: 0 auto 56px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="10" viewBox="0 0 40 10"><path d="M0 5 Q10 1 20 5 T40 5" fill="none" stroke="%237D98A1" stroke-width="1.2"/></svg>') repeat-x 0 50%;
  animation: wave-drift 7s linear infinite;
  opacity: .55;
}

/* ---------- ゆらぎモーション（掘床の体験の核） ----------
   振幅は小さく・周期は長く・要素ごとに位相をずらす。 */
@keyframes wave-drift { to { background-position-x: 40px; } }
/* クリップされる画像用：常時わずかに拡大し、上下しても縁が見えない */
@keyframes yuragi-clip {
  0%, 100% { transform: translateY(3px) scale(1.04); }
  50%      { transform: translateY(-4px) scale(1.04); }
}
/* 単体で浮いている要素用 */
@keyframes yuragi-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ---------- 見出しの型（英字＋和文明朝） ---------- */
.heading-en {
  font-family: var(--font-en);
  font-size: var(--text-small);
  letter-spacing: 0.22em;
  color: var(--color-mizu-deep);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.heading-jp {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: var(--text-h2);
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin-bottom: 40px;
}

/* ---------- スクロールリビール ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-slide { transition: none !important; }
  .hero-slides, .hero-content, .use-img img, .g img,
  .section::before { animation: none !important; }
  .about-canals path { transition: none; stroke-dashoffset: 0; }
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  /* 右上の固定予約ボタンと重ならない余白 */
  padding-right: 140px;
}
.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.logo img {
  height: 40px;
  width: auto;
  display: block;
  /* 写真の上でも視認できるよう、ごく淡く影を添える */
  filter: drop-shadow(0 1px 8px rgba(34, 52, 58, .35));
}
/* ---------- 起動イントロ ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-hori-light);
  opacity: 1;
  transition: opacity .9s ease;
}
.intro.is-done {
  opacity: 0;
  pointer-events: none;
}
.intro-logo {
  width: auto;
  height: min(34vh, 260px);
  animation: intro-rise 1.4s ease both;
}
@keyframes intro-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-logo { animation: none; }
}

.header-right { display: flex; align-items: center; gap: 20px; }
.lang {
  font-family: var(--font-en);
  font-size: var(--text-small);
  letter-spacing: 0.12em;
  color: var(--color-shiro);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.lang-sep { opacity: .5; }
.lang-btn {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  opacity: .5;
  transition: opacity .2s ease;
}
.lang-btn:hover { opacity: .8; }
.lang-btn.is-active { opacity: 1; cursor: default; }

/* ---------- 英語モード：縦書きの見出しを横書きへ ---------- */
html[lang="en"] .hero-copy,
html[lang="en"] .use-vert {
  writing-mode: horizontal-tb;
}
html[lang="en"] .use-vert {
  letter-spacing: 0.04em;
  line-height: 1.15;
  white-space: nowrap;
}
html[lang="en"] .hero-copy {
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* ---------- 予約ボタン（行灯色は縁取りだけ・透過・右上に常時固定） ---------- */
.btn-reserve {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid var(--color-akari);
  color: var(--color-shiro);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: background-color .2s ease, color .3s ease, border-color .2s ease;
}
.btn-reserve:hover { background: rgba(201, 123, 61, .14); }
/* ヒーローを過ぎたら：淡背景の上でも読めるよう墨文字＋磨りガラス */
.btn-reserve.is-scrolled {
  color: var(--color-sumi);
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-reserve.is-scrolled:hover { background: rgba(201, 123, 61, .14); }
@media (min-width: 1024px) {
  .btn-reserve { top: 20px; right: 24px; }
}

/* ---------- ヒーロー ---------- */
.hero { position: relative; height: 100svh; min-height: 540px; overflow: hidden; }
/* スマホでは高さを抑えて、横長写真の見える範囲を広げる */
@media (max-width: 767px) {
  .hero { height: 70svh; min-height: 460px; }
}
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slides picture { position: absolute; inset: 0; display: contents; }
/* 水に浮かんでいるような、ゆっくりとした呼吸 */
.hero-slides { animation: hero-sway 18s ease-in-out infinite; }
@keyframes hero-sway {
  0%, 100% { transform: scale(1.02) translateY(0); }
  50%      { transform: scale(1.05) translateY(-8px); }
}
.hero-slide {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-overlay { position: absolute; inset: 0; background: rgba(34, 52, 58, .25); }
.hero-content {
  position: absolute;
  left: 28px;
  top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 6vh;
  z-index: 10;
  color: var(--color-shiro);
  animation: yuragi-float 8s ease-in-out infinite;
}
/* 左に縦書きで添えるコピー */
.hero-copy {
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(1.125rem, 4.2vw, 1.625rem);
  letter-spacing: 0.26em;
  line-height: 2.2;
  text-shadow: 0 1px 18px rgba(34, 52, 58, .4);
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hero-dots {
  position: absolute;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 10px;
}
.hero-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: background-color .3s ease;
}
.hero-dots span.is-active { background: var(--color-shiro); }
@media (min-width: 1024px) {
  .hero-content { left: 6vw; }
}

/* ---------- 掘床とは ---------- */
.about { position: relative; overflow: hidden; }
.about > .container { position: relative; z-index: 1; }
.about-text { margin-bottom: 1.6em; max-width: 38em; }
.about-text:last-child { margin-bottom: 0; }

/* 掘割マップ（見出し・本文の背面で、水路が描かれていく） */
.about-canals {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .3;
}
.about-canals path {
  fill: none;
  stroke: var(--color-mizu);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s cubic-bezier(.25,.1,.25,1) var(--d, 0s);
}
.about-canals .c-main { stroke-width: 7;    transition-duration: 3.4s; }
.about-canals .c-sub  { stroke-width: 4.5;  transition-duration: 3s; }
.about-canals .c-moat { stroke-width: 3.5;  transition-duration: 2.8s; }
.about-canals .c-grid { stroke-width: 2; }
.about-canals .c-fine { stroke-width: 1.25; transition-duration: 1.1s; }
.about.is-visible .about-canals path { stroke-dashoffset: 0; }

/* ---------- 使い方3種（縦書き章タイトル＋端まで抜ける写真の章立て） ---------- */
.use-chapters { display: flex; flex-direction: column; gap: 96px; margin-top: 16px; }
.use-head { display: flex; align-items: stretch; gap: 16px; }
.use-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  padding: 8px 0;
}
.use-vert {
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  letter-spacing: 0.5em;
  line-height: 1;
}
.use-img {
  flex: 1;
  overflow: hidden;
  border-radius: 2px;
  /* 写真は画面右端まで抜ける */
  margin-right: -20px;
}
.use-img img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  animation: yuragi-clip 10s ease-in-out infinite;
}
/* 偶数章は写真が左端まで抜け、縦書きタイトルが右に */
.use-chapter:nth-child(even) .use-head { flex-direction: row-reverse; }
.use-chapter:nth-child(even) .use-img { margin-right: 0; margin-left: -20px; }
.use-chapter:nth-child(2) .use-img img { animation-delay: -3.3s; }
.use-chapter:nth-child(3) .use-img img { animation-delay: -6.6s; animation-duration: 12s; }
.use-body { margin-top: 24px; }
.use-text {
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  line-height: 2.2;
  max-width: 38em;
}
@media (min-width: 768px) {
  .use-chapters { gap: 128px; }
  .use-chapter { display: flex; align-items: center; gap: 56px; }
  .use-head { flex: 1 1 56%; }
  .use-body { flex: 1 1 44%; margin-top: 0; }
  .use-chapter:nth-child(even) { flex-direction: row-reverse; }
  .use-img { margin-right: 0; }
  .use-chapter:nth-child(even) .use-img { margin-left: 0; }
  .use-img img { aspect-ratio: 4 / 3; }
  .use-side { min-width: 72px; }
}
.btn-detail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 4px;
  font-size: var(--text-small);
  letter-spacing: 0.12em;
  color: var(--color-mizu-deep);
  border-bottom: 1px solid var(--color-mizu);
  transition: color .2s ease, border-color .2s ease;
}
.btn-detail:hover { color: var(--color-ki); border-color: var(--color-ki); }

/* 参考価格（すごす・お披露目価格）
   サイトの「囲まず、余白とヘアラインで仕切る」作りに合わせ、枠も塗りも使わない。
   通常→新価格の流れを明朝体で見せ、灯り色はラベル一語だけに添える。 */
.use-price {
  margin-top: 28px;
  padding-top: 20px;
  max-width: 38em;
  border-top: 1px solid var(--color-line);
}
.use-price-eyebrow {
  font-size: var(--text-small);
  letter-spacing: 0.18em;
  color: var(--color-akari);
  margin-bottom: 12px;
}
.use-price-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  font-family: var(--font-mincho);
  color: var(--color-sumi);
}
.use-price-was {
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  color: var(--color-mizu-deep);
}
.use-price-was s {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.use-price-arrow { color: var(--color-mizu); }
.use-price-now {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.use-price-num {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.03em;
}
.use-price-unit {
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
}
.use-price-note {
  margin-top: 12px;
  font-size: var(--text-small);
  letter-spacing: 0.05em;
  color: var(--color-mizu-deep);
}

/* ---------- ギャラリー（流れる水辺の情景） ---------- */
.gallery-head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 72px); }

/* 掘割をすべるどんこ舟から眺めるように、情景がゆっくり流れていく帯。
   両端は水面のひかりへ溶けて、護岸が遠ざかるように見せる。 */
.g-rail {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.g-track {
  display: flex;
  width: max-content;
  animation: g-current 64s linear infinite;
}
/* ふと目を留めたら、流れがやさしく止まる */
.g-rail:hover .g-track,
.g-rail:focus-within .g-track { animation-play-state: paused; }

@keyframes g-current {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 帯のリズム：間隔を margin で持たせ、複製とシームレスに繋ぐ */
.g {
  position: relative;
  flex: 0 0 auto;
  height: clamp(150px, 38vw, 220px);
  margin-right: clamp(12px, 2vw, 24px);
  border-radius: 2px;
  overflow: hidden;
}
.g img {
  border-radius: 2px;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.g:hover img { transform: scale(1.04); }

/* 幅はアスペクト比から導く。護岸のように高さを揃えつつ横幅でゆらす */
.g--wide { aspect-ratio: 16 / 10; }
.g--tall { aspect-ratio: 3 / 4; }
.g--std  { aspect-ratio: 4 / 3; }
.g--sq   { aspect-ratio: 1 / 1; }

/* 動きを抑える設定では、流れを止めて自分の手でたぐれる帯にする */
@media (prefers-reduced-motion: reduce) {
  .g-rail { -webkit-mask-image: none; mask-image: none; }
  .g-track {
    width: auto;
    animation: none;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .g { scroll-snap-align: center; }
  .g[aria-hidden="true"] { display: none; }
}

/* タブレット以上では少し大きく、PCでは3枚ほどが同時に流れる */
@media (min-width: 768px) {
  .g { height: clamp(200px, 24vw, 250px); }
}

/* ---------- 柳川掘床物語（制作秘話） ---------- */
/* 見出しとリード文の間に置く一枚（水面の縁にあわせ、ごく淡い角丸） */
.story-figure {
  margin: 8px 0 28px;
  overflow: hidden;
  border-radius: 2px;
}
.story-figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.story-lead {
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  line-height: 2.1;
  max-width: 38em;
}
/* 「制作秘話を見る」ボタン（使い方の詳しくボタンと同じ型） */
.story-detail { margin-top: 28px; }
/* モーダル内に流し込む制作秘話の本文 */
.story-text {
  margin-bottom: 1.6em;
  letter-spacing: 0.06em;
  line-height: 2.1;
}
.story-text:last-child { margin-bottom: 0; }

/* モーダル内の動画（16:9） */
.modal-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 24px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--color-sumi);
}
.modal-video iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ---------- お知らせ ---------- */
.news-lead {
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.9;
}
.news-cta, .reserve-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 20px;
  padding: 0 28px;
  border-radius: 9999px;
  background: var(--color-akari);
  color: var(--color-shiro);
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: background-color .2s ease;
}
.news-cta:hover, .reserve-cta-btn:hover { background: var(--color-ki); }

/* 予約はこちら（ふれる→ギャラリーの間のCTA）／お知らせ ともに中央ぞろえ */
.reserve-cta-section, .news { text-align: center; }
.reserve-cta-inner, .news .container { display: flex; flex-direction: column; align-items: center; }
.reserve-cta-lead {
  margin-top: 12px;
  max-width: 34em;
  font-size: 0.9375rem;
  line-height: 1.9;
}
.news-lead { max-width: 34em; }

/* ---------- アクセス ---------- */
.access-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .access-grid { grid-template-columns: 7fr 5fr; align-items: start; }
}
.access-map iframe {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 2px;
  filter: grayscale(.4);
}
@media (min-width: 1024px) {
  .access-map iframe { height: 420px; }
}
.access-info dt {
  font-family: var(--font-mincho);
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-top: 24px;
  padding-left: 12px;
  border-left: 2px solid var(--color-ki);
}
.access-info dt:first-child { margin-top: 0; }
.access-info dd { margin-top: 8px; font-size: 0.9375rem; }
.access-info small { color: var(--color-mizu-deep); }

/* ---------- フッター ---------- */
.site-footer {
  margin-top: var(--section-gap);
  background: var(--color-sumi);
  color: var(--color-hori);
  text-align: center;
  padding: 64px 20px 40px;
}
.footer-logo {
  line-height: 0;
}
.footer-logo img {
  height: 150px;
  width: auto;
  display: block;
  margin: 0 auto;
}
.footer-en {
  font-family: var(--font-en);
  font-size: var(--text-small);
  letter-spacing: 0.22em;
  opacity: .7;
  margin-top: 8px;
}
.footer-credit { font-size: var(--text-small); opacity: .8; margin-top: 32px; line-height: 2.1; }
/* 導入検討者（B2B）向けの導線。利用者向けの世界観を壊さないようフッター内に置きつつ、
   押せるCTAとして視認できるピルボタンにする */
.footer-b2b {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.footer-b2b-lead {
  font-size: var(--text-small);
  letter-spacing: 0.08em;
  opacity: .8;
  margin-bottom: 16px;
}
.footer-b2b-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 9999px;
  background: var(--color-akari);
  color: var(--color-shiro);
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: background-color .2s ease;
}
.footer-b2b-cta:hover { background: var(--color-ki); }
.footer-copy { font-family: var(--font-en); font-size: 0.75rem; opacity: .55; margin-top: 24px; letter-spacing: 0.1em; }

/* ---------- モーダル（ページインページ） ---------- */
.modal { position: fixed; inset: 0; z-index: 50; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(34, 52, 58, .6);
  opacity: 0;
  transition: opacity .3s ease;
}
.modal.is-open .modal-backdrop { opacity: 1; }
.modal-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 86vh;            /* svh 非対応ブラウザ（古い iOS Safari 等）向けフォールバック */
  max-height: 86svh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;  /* 古い iOS で慣性スクロールを有効化 */
  overscroll-behavior: contain;       /* 背面ページへスクロールが伝播するのを防ぐ */
  background: var(--color-shiro);
  border-radius: 8px 8px 0 0;
  padding: 24px 20px 48px;
  transform: translateY(24px);
  opacity: 0;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.modal.is-open .modal-panel { transform: none; opacity: 1; }
@media (min-width: 768px) {
  .modal-panel {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -48%);
    width: min(640px, calc(100vw - 48px));
    max-height: 84vh;
    border-radius: 4px;
    padding: 40px 40px 48px;
    box-shadow: var(--shadow-float);
  }
  .modal.is-open .modal-panel { transform: translate(-50%, -50%); }
}
.modal-close {
  position: sticky;
  top: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-hori);
  transition: background-color .2s ease;
  z-index: 1;
}
.modal-close:hover { background: var(--color-line); }
.modal-body img { border-radius: 2px; margin-bottom: 24px; max-height: 320px; width: 100%; object-fit: cover; }

/* モーダル内スライダー */
.modal-slider { position: relative; margin-bottom: 24px; }
.modal-slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 2px;
}
.modal-slider-track::-webkit-scrollbar { display: none; }
.modal-slider-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 260px;
  margin: 0;
  max-height: none;
  object-fit: cover;
  scroll-snap-align: center;
}
@media (min-width: 768px) {
  .modal-slider-track img { height: 340px; }
}
.modal-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--color-sumi);
  background: rgba(255, 255, 255, .85);
  box-shadow: var(--shadow-float);
  transition: background-color .2s ease;
}
.modal-slider-arrow:hover { background: var(--color-shiro); }
.modal-slider-arrow.prev { left: 10px; }
.modal-slider-arrow.next { right: 10px; }
.modal-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.modal-slider-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-line);
  transition: background-color .2s ease, transform .2s ease;
}
.modal-slider-dot.is-active {
  background: var(--color-mizu-deep);
  transform: scale(1.25);
}
.modal-title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: var(--text-h3);
  letter-spacing: 0.3em;
  margin-bottom: 16px;
}
.modal-body p { margin-bottom: 1.2em; font-size: 0.9375rem; }
.modal-note { color: var(--color-mizu-deep); font-size: var(--text-small); }
/* モーダル内の予約導線（固定ボタンと同じリンク先・灯り色のピル）
   単独CTAは中央に置き、「ここを押せばよい」を一目で伝える */
.modal-cta {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  margin-top: 8px;
  margin-inline: auto;
  padding: 0 28px;
  border-radius: 9999px;
  background: var(--color-akari);
  color: var(--color-shiro);
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: background-color .2s ease;
}
.modal-cta:hover { background: var(--color-ki); }
.modal-body .news-date { display: block; margin-bottom: 4px; }
body.modal-open { overflow: hidden; }