@charset "UTF-8";
/* ==========================================================================
   GRAVITATE OSAKA メインスタイル
   構成:
   1. デザイントークン(色・フォント・余白)
   2. リセット・ベース
   3. 共通パーツ(ボタン、セクション、カード)
   4. ヘッダー / モバイルメニュー
   5. トップページ各セクション
   6. 下層ページ共通
   7. フッター
   8. レスポンシブ調整
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン
   ブランドカラーはロゴのオレンジを採用。
   参考デザインのゴールドに戻す場合は --c-accent を #b5a15c に変更するだけです。
   -------------------------------------------------------------------------- */
:root {
	--c-navy: #101f33;        /* 基本の紺 */
	--c-navy-deep: #0a1524;   /* より深い紺(フッター・特徴セクション) */
	--c-ink: #1a2433;         /* 白背景上の文字色 */
	--c-white: #ffffff;
	--c-gray: #6b7684;        /* 補足テキスト */
	--c-line: #d9dee5;        /* 罫線 */
	--c-accent: #ef8200;      /* ブランドオレンジ(ロゴ準拠) */
	--c-accent-dark: #c96e00; /* ホバー時 */

	/* 欧文:ロゴに近いFutura系。PC標準フォント優先、無い環境はJostで代替 */
	--font-en: "Futura", "Century Gothic", "Jost", "Noto Sans JP", sans-serif;
	/* 和文 */
	--font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

	--header-h: 84px;
	--container: 1120px;
}

/* --------------------------------------------------------------------------
   2. リセット・ベース
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
	font-family: var(--font-jp);
	color: var(--c-ink);
	background: var(--c-white);
	line-height: 1.8;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

/* スクリーンリーダー専用テキスト */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* キーボード操作時のフォーカス表示(アクセシビリティ) */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* 本文へスキップするリンク */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--c-navy);
	color: var(--c-white);
	padding: 10px 16px;
	z-index: 200;
}
.skip-link:focus { left: 0; }

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 24px;
}

/* --------------------------------------------------------------------------
   3. 共通パーツ
   -------------------------------------------------------------------------- */

/* --- セクション --- */
.section { padding: 96px 0; }
.section--white { background: var(--c-white); }

.section__label {
	font-family: var(--font-en);
	font-weight: 500;
	letter-spacing: 0.25em;
	color: var(--c-accent);
	text-align: center;
	font-size: 14px;
	margin-bottom: 12px;
}
.section__label--light { text-align: left; }
.section__label--left { text-align: left; }

.section__title {
	text-align: center;
	font-size: clamp(24px, 3.2vw, 32px);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.6;
	margin-bottom: 48px;
}
.section__title--left { text-align: left; }

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

/* --- ボタン --- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	letter-spacing: 0.12em;
	padding: 14px 28px;
	transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn__arrow { font-family: var(--font-en); }

/* 白枠ボタン(写真の上で使用) */
.btn--ghost {
	border: 1px solid rgba(255, 255, 255, 0.8);
	color: var(--c-white);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.15); }

/* 白背景用の枠線ボタン */
.btn--line {
	border: 1px solid var(--c-ink);
	color: var(--c-ink);
}
.btn--line:hover { background: var(--c-ink); color: var(--c-white); }

/* アクセント色ボタン */
.btn--accent {
	background: var(--c-accent);
	color: var(--c-white);
}
.btn--accent:hover { background: var(--c-accent-dark); }

/* --- カード --- */
.card-grid { display: grid; gap: 32px; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

.card__link { display: block; }
.card__image {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	margin-bottom: 18px;
	background: var(--c-navy);
}
.card__image img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.card__link:hover .card__image img { transform: scale(1.05); }

/* 画像未設定時のプレースホルダー(紺のグラデーション) */
.card__image--placeholder {
	background: linear-gradient(135deg, #16283f 0%, #0a1524 100%);
}

.card__head { display: flex; align-items: center; gap: 12px; }
.card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--c-navy);
	color: var(--c-white);
	flex-shrink: 0;
}
.card__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: 8px;
}
.card__title .btn__arrow { color: var(--c-ink); }
.card__text { font-size: 14px; color: var(--c-gray); }

/* 第3階層アクティビティ(現段階では個別ページ非公開)のカード。
   リンクではないので、リンクらしい見た目・動きを出さない */
.card__link--nolink { cursor: default; }
.card__link--nolink:hover .card__image img { transform: none; }

/* カードのバッジ(「期間限定」など)
   画像の左上に重ねて表示。スマホでは少し小さくして写真の邪魔をしないようにする */
.card { position: relative; }
.card__badge {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: var(--c-accent);
	color: var(--c-white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 6px 12px;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
}
@media (max-width: 640px) {
	.card__badge { font-size: 10px; padding: 5px 9px; }
}

/* --- パンくずリスト --- */
.breadcrumb {
  margin-bottom: 32px;
  padding-bottom: 10px;
  color: var(--c-gray);
  border-bottom: 1px solid var(--c-line);
  position: relative;
}
.breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.18em;
}
.breadcrumb li { display: flex; align-items: center; gap: 10px; }
.breadcrumb li + li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--c-line);
}
.breadcrumb a { color: var(--c-gray); transition: color 0.25s ease; }
.breadcrumb a:hover { color: var(--c-accent); }
.breadcrumb li:last-child, .breadcrumb li:last-child a { color: var(--c-navy); font-weight: 700; }
@media (max-width: 640px) {
  .breadcrumb ol {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .breadcrumb ol::-webkit-scrollbar { display: none; }
  .breadcrumb li { flex: none; white-space: nowrap; }
  .breadcrumb::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: calc(100% - 1px);
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
  }
}

/* --------------------------------------------------------------------------
   4. ヘッダー / モバイルメニュー
   -------------------------------------------------------------------------- */
/* バーなし: ロゴは流れる(追尾しない)。右側のメニュー類だけ画面に固定 */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background: transparent;
	pointer-events: none;
}
.site-header__logo { pointer-events: auto; }
.site-header.is-transparent,
.site-header.is-transparent.is-scrolled {
	position: absolute;
	background: transparent;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	height: var(--header-h);
	padding-inline: 28px;
}

.site-header__logo a { display: block; }
.site-header__logo .logo-horizontal { width: 200px; height: auto; }
.site-header__logo .logo-mark { display: none; width: 40px; height: auto; }

.site-header__nav { margin-left: auto; }

.gnav { display: flex; gap: 28px; }
.gnav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.3;
	padding: 6px 2px;
}
.gnav__en {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--c-white);
}
.gnav__jp {
	font-size: 10px;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.65);
}
.gnav a:hover .gnav__en { color: var(--c-accent); }

/* ヘッダーの予約ボタン */
.btn-reserve {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.3;
	background: var(--c-accent);
	color: var(--c-white);
	padding: 10px 22px;
	transition: background-color 0.25s;
}
.btn-reserve:hover { background: var(--c-accent-dark); }
.btn-reserve__en {
	font-family: var(--font-en);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.18em;
}
.btn-reserve__jp { font-size: 10px; letter-spacing: 0.1em; }

/* ハンバーガー(スマホのみ表示) */
.site-header__nav { display: none; } /* PCでもハンバーガーに統一 */
.menu-toggle {
	display: flex; /* PC・スマホともハンバーガーに統一 */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 54px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	margin-left: auto; /* 電話番号なしの時は自身が右端へ */
	-webkit-tap-highlight-color: transparent; /* タップ時の青いハイライトを消す */
	overflow: hidden; /* ボタン内部の想定外の描画を封じる */
}
.menu-toggle:focus { outline: none; }
.menu-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.menu-toggle__label {
	font-family: var(--font-en);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--c-white);
	line-height: 1;
	margin-top: 4px;
}
.menu-toggle__bar {
	display: block;
	width: 26px;
	height: 2px;
	margin: 4px auto; /* gapに頼らず確実に3本の間隔を作る */
	background: #fff;
	background: var(--c-white);
	transition: transform 0.3s, opacity 0.3s;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ドロワーメニュー */
/* 全画面オーバーレイメニュー(PC・スマホ共通) */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--c-navy-deep);
	padding: calc(var(--header-h) + 40px) 0 60px;
	overflow-y: auto;
}
/* フェードイン(アニメーション非対応・無効環境ではそのまま表示され、消えない) */
.mobile-menu.is-open { animation: grvFadeIn 0.4s ease; }
@keyframes grvFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.mobile-menu__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: start;
}
.mobile-menu__list { max-width: 640px; }
.mobile-menu__list li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.mobile-menu.is-open .mobile-menu__list li {
	animation: grvMenuIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.mobile-menu.is-open .mobile-menu__list li:nth-child(1) { animation-delay: 0.06s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(2) { animation-delay: 0.12s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(3) { animation-delay: 0.18s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(4) { animation-delay: 0.24s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(5) { animation-delay: 0.30s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(6) { animation-delay: 0.36s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(7) { animation-delay: 0.42s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(8) { animation-delay: 0.48s; }
@keyframes grvMenuIn {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}
/* 動きを控えたい設定の人にはアニメーションなしで即表示 */
@media (prefers-reduced-motion: reduce) {
	.mobile-menu.is-open,
	.mobile-menu.is-open .mobile-menu__list li { animation: none; opacity: 1; transform: none; }
}
.mobile-menu__list a {
	display: flex;
	align-items: baseline;
	gap: 20px;
	color: var(--c-white);
	padding: 18px 4px;
	text-decoration: none;
	transition: color 0.3s, padding-left 0.3s;
}
.mobile-menu__list a:hover { color: var(--c-accent); padding-left: 12px; }
.mobile-menu__en {
	font-family: var(--font-en);
	font-size: clamp(24px, 3.4vw, 40px);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.1;
	min-width: 4.4em;
}
.mobile-menu__jp {
	font-size: 13px;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.7);
}
.mobile-menu__list a:hover .mobile-menu__jp { color: var(--c-accent); }

.mobile-menu__side {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-top: 12px;
}
.mobile-menu__tickets {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	background: var(--c-accent);
	color: var(--c-white);
	text-decoration: none;
	padding: 18px 32px;
	transition: background-color 0.25s, transform 0.25s;
}
.mobile-menu__tickets:hover { background: #d97400; transform: translateY(-2px); }
.mobile-menu__tickets-en {
	font-family: var(--font-en);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.22em;
}
.mobile-menu__tickets-jp { font-size: 11px; letter-spacing: 0.1em; }
.mobile-menu__sns { display: flex; gap: 20px; }
.mobile-menu__sns a { color: var(--c-white); transition: color 0.25s; }
.mobile-menu__sns a:hover { color: var(--c-accent); }

@media (max-width: 900px) {
	.mobile-menu { padding-top: calc(var(--header-h) + 24px); }
	.mobile-menu__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 0 28px;
	}
	.mobile-menu__list a { gap: 14px; padding: 15px 4px; }
	.mobile-menu__en { font-size: 22px; min-width: 4em; }
	.mobile-menu__jp { font-size: 11.5px; }
	.mobile-menu__side { flex-direction: row; align-items: center; justify-content: space-between; }
	.mobile-menu__tickets { padding: 14px 24px; }
}

/* スマホ用固定予約ボタン(PCでは非表示) */
/* スマホの予約ボタンもチケット半券風(四隅を削り、左にミシン目) */
.fixed-reserve {
	--ticket-notch: 11px;
	display: none;
	position: fixed;
	left: 16px; right: 16px; bottom: 16px;
	z-index: 80;
	background: var(--c-accent);
	color: var(--c-white);
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 17px 16px 17px 34px;
	border-radius: 0;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28));
	-webkit-mask:
		radial-gradient(circle var(--ticket-notch) at 0 0, transparent 98%, #000 100%) top left / 51% 51% no-repeat,
		radial-gradient(circle var(--ticket-notch) at 100% 0, transparent 98%, #000 100%) top right / 51% 51% no-repeat,
		radial-gradient(circle var(--ticket-notch) at 0 100%, transparent 98%, #000 100%) bottom left / 51% 51% no-repeat,
		radial-gradient(circle var(--ticket-notch) at 100% 100%, transparent 98%, #000 100%) bottom right / 51% 51% no-repeat;
	mask:
		radial-gradient(circle var(--ticket-notch) at 0 0, transparent 98%, #000 100%) top left / 51% 51% no-repeat,
		radial-gradient(circle var(--ticket-notch) at 100% 0, transparent 98%, #000 100%) top right / 51% 51% no-repeat,
		radial-gradient(circle var(--ticket-notch) at 0 100%, transparent 98%, #000 100%) bottom left / 51% 51% no-repeat,
		radial-gradient(circle var(--ticket-notch) at 100% 100%, transparent 98%, #000 100%) bottom right / 51% 51% no-repeat;
}
.fixed-reserve::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 11px;
	bottom: 11px;
	width: 2px;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0 4px, transparent 4px 9px);
	background-size: 2px 9px;
	background-repeat: repeat-y;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. トップページ
   -------------------------------------------------------------------------- */

/* --- メインビジュアル --- */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh; /* スマホのアドレスバーを考慮 */
	display: flex;
	align-items: center;
	background: var(--c-navy) center / cover no-repeat;
	color: var(--c-white);
}
.hero__overlay {
	position: absolute;
	inset: 0;
	/* 文字の可読性を確保するグラデーション */
	background: linear-gradient(100deg, rgba(6, 14, 26, 0.55) 0%, rgba(6, 14, 26, 0.15) 55%, rgba(6, 14, 26, 0.35) 100%);
}
.hero__content {
	position: relative;
	padding-inline: max(6vw, 28px);
	max-width: 900px;
}
.hero__title {
	font-family: var(--font-en);
	font-weight: 300;
	font-size: clamp(52px, 8.5vw, 104px);
	letter-spacing: 0.14em;
	line-height: 1.15;
	margin-bottom: 24px;
}
.hero__catch {
	font-size: clamp(16px, 2vw, 21px);
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 2;
	margin-bottom: 16px; /* タイトルの上に配置するため余白を調整 */
}
.hero__location {
	position: relative;
	font-size: 16px; /* スライド連動の説明文を読みやすく拡大 */
	letter-spacing: 0.12em;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.9);
	padding-top: 20px;
	margin-bottom: 32px;
}
/* 場所表記の上の短い区切り線 */
.hero__location::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 44px; height: 1px;
	background: rgba(255, 255, 255, 0.6);
}

/* SNSアイコン(右端に縦並び) */
.hero__sns {
	position: absolute;
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.hero__sns a { color: rgba(255, 255, 255, 0.85); }
.hero__sns a:hover { color: var(--c-accent); }

/* 下部:お知らせ+SCROLL */
.hero__bottom {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px max(6vw, 28px);
	background: linear-gradient(to top, rgba(6, 14, 26, 0.6), transparent);
}
.hero__news {
	max-width: 42%;
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	min-width: 0;
}
.hero__news:hover .hero__news-title { color: var(--c-accent); }
.hero__news-date { font-family: var(--font-en); letter-spacing: 0.08em; }
.hero__news-label {
	background: var(--c-accent);
	color: var(--c-white);
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: 0.14em;
	padding: 2px 10px;
	flex-shrink: 0;
}
.hero__news-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 0.25s;
}
/* SCROLLは画面中央に配置(お知らせと重ならないよう絶対配置) */
.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.8);
	flex-shrink: 0;
	/* クリック可能なボタンとして(見た目は従来のまま) */
	background: none;
	border: none;
	padding: 8px 4px;
	cursor: pointer;
	transition: color 0.3s;
}
.hero__scroll::after {
	content: "↓";
	display: inline-block;
	margin-left: 8px;
	animation: heroScrollHint 1.8s ease-in-out infinite;
}
.hero__scroll:hover { color: var(--c-accent); }
@keyframes heroScrollHint {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}

/* --- GODAブリッジ バナー --- */
.banner-panel {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	max-width: var(--container);
	margin-inline: auto;
	background: var(--c-navy);
	color: var(--c-white);
}
.banner-panel__body {
	padding: 64px 56px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 18px;
}
.banner-panel__title {
	font-size: clamp(24px, 2.8vw, 30px);
	font-weight: 700;
	letter-spacing: 0.08em;
}
.banner-panel__text { font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.banner-panel__image { background: var(--c-navy-deep) center / cover no-repeat; min-height: 320px; }

/* --- アクセス --- */
.access__inner {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 56px;
	align-items: center;
}
.access__address { margin-bottom: 28px; }
.access__map {
	aspect-ratio: 16 / 10;
	background: #e9edf2 center / cover no-repeat;
}

/* --- イベントバナー --- */
.event-banner {
	position: relative;
	background: var(--c-navy-deep) center / cover no-repeat;
	color: var(--c-white);
	padding: 110px 0;
}
.event-banner__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(6, 14, 26, 0.75) 0%, rgba(6, 14, 26, 0.25) 100%);
}
.event-banner__body { position: relative; max-width: 640px; }
.event-banner__lead { letter-spacing: 0.12em; margin-bottom: 10px; }
.event-banner__title {
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--c-accent);
	margin-bottom: 18px;
}
.event-banner__text { font-size: 14px; margin-bottom: 30px; }

/* --- 施設の特徴 --- */
.features {
	background: var(--c-navy-deep);
	color: var(--c-white);
	padding: 88px 0;
}
.features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.features__item {
	text-align: center;
	padding: 8px 36px;
}
/* 項目間の区切り線 */
.features__item + .features__item { border-left: 1px solid rgba(255, 255, 255, 0.15); }
.features__icon {
	display: inline-flex;
	color: var(--c-accent);
	margin-bottom: 18px;
}
.features__title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
}
.features__text { font-size: 13px; color: rgba(255, 255, 255, 0.75); }

/* --------------------------------------------------------------------------
   6. 下層ページ共通
   -------------------------------------------------------------------------- */

/* ページ上部のタイトル帯 */
.page-hero {
	background: var(--c-navy);
	color: var(--c-white);
	padding: 72px 0 56px;
	text-align: center;
}
.page-hero__en {
	display: block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.25em;
	color: var(--c-accent);
	margin-bottom: 10px;
}
.page-hero__title {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	letter-spacing: 0.1em;
}

.page-body { padding: 56px 0 96px; }

/* 記事本文(ブロックエディタの出力)の基本整形 */
.entry-content > * + * { margin-top: 1.4em; }
.entry-content h2 {
	font-size: 24px;
	border-left: 4px solid var(--c-accent);
	padding-left: 14px;
	margin-top: 2.2em;
}
.entry-content h3 { font-size: 19px; margin-top: 2em; }
.entry-content a { color: var(--c-accent); text-decoration: underline; }
.entry-content ul { list-style: disc; padding-left: 1.4em; }
.entry-content ol { list-style: decimal; padding-left: 1.4em; }

/* 一覧ページ */
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.news-list li { border-bottom: 1px solid var(--c-line); }
.news-list a {
	display: flex;
	gap: 20px;
	padding: 20px 4px;
	align-items: baseline;
}
.news-list a:hover .news-list__title { color: var(--c-accent); }
.news-list__date {
	font-family: var(--font-en);
	color: var(--c-gray);
	font-size: 14px;
	flex-shrink: 0;
}
.news-list__title { transition: color 0.25s; }

/* ページネーション */
.pagination { margin-top: 48px; text-align: center; }
.pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 8px 0;
	border: 1px solid var(--c-line);
	margin: 0 3px;
}
.pagination .page-numbers.current {
	background: var(--c-navy);
	color: var(--c-white);
	border-color: var(--c-navy);
}

/* --------------------------------------------------------------------------
   7. フッター
   -------------------------------------------------------------------------- */
.site-footer {
	background: var(--c-navy-deep);
	color: var(--c-white);
	padding-top: 72px;
}
.site-footer__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 24px;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 48px;
}
.site-footer__brand img { width: 220px; }
.site-footer__sns { display: flex; gap: 18px; margin-top: 24px; }
.site-footer__sns a { color: rgba(255, 255, 255, 0.8); }
.site-footer__sns a:hover { color: var(--c-accent); }

.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.fnav-col__title {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--c-accent);
	margin-bottom: 14px;
}
.fnav-col a {
	display: block;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
	padding: 5px 0;
}
.fnav-col a:hover { color: var(--c-white); }

.site-footer__bottom {
	margin-top: 64px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	max-width: var(--container);
	margin-inline: auto;
}
.site-footer__policies { display: flex; gap: 20px; }
.site-footer__policies a:hover { color: var(--c-white); }

/* --------------------------------------------------------------------------
   8. レスポンシブ調整
   -------------------------------------------------------------------------- */

/* タブレット以下 */
@media (max-width: 1024px) {
	.site-header__nav,
	.site-header__reserve { display: none; }   /* ナビと予約ボタンはドロワーへ */
	.menu-toggle { display: flex; }

	/* ロゴマークのみ表示に切り替え */
	.site-header__logo .logo-horizontal { display: none; }
	.site-header__logo .logo-mark { display: block; }

	:root { --header-h: 64px; }

	.card-grid--3 { grid-template-columns: 1fr 1fr; }
	.features__grid { grid-template-columns: 1fr; gap: 40px; }
	.features__item + .features__item {
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		padding-top: 40px;
	}
}

/* スマートフォン */
@media (max-width: 640px) {
	.section { padding: 64px 0; }

	.fixed-reserve { display: block; }
	body { padding-bottom: 76px; } /* 固定ボタンと本文が重ならないように */

	.card-grid--3,
	.card-grid--2,
	.archive-grid { grid-template-columns: 1fr; }

	.hero__sns { display: none; }             /* スマホでは非表示(フッターに集約) */
	.hero__scroll { display: none; }
	.hero__news-title { max-width: 60vw; }

	.banner-panel { grid-template-columns: 1fr; }
	.banner-panel__body { padding: 44px 28px; }
	.banner-panel__image { min-height: 220px; }

	.access__inner { grid-template-columns: 1fr; gap: 32px; }

	.site-footer__inner { grid-template-columns: 1fr; }
	.site-footer__nav { grid-template-columns: 1fr 1fr; }
	.site-footer__bottom { flex-direction: column; }
}

/* ==========================================================================
   下層ページ用コンポーネント(第2フェーズ追加分)
   トップページのCSS変数・ボタン・見出しルールをそのまま継承しています。
   ========================================================================== */

/* 幅の狭い読み物用コンテナ(FAQ・注意事項・ポリシーなど) */
.container--narrow { max-width: 800px; }

/* --- アクティビティ詳細:メインビジュアル --- */
.act-hero {
	position: relative;
	min-height: 440px;
	display: flex;
	align-items: flex-end;
	background: var(--c-navy) center / cover no-repeat;
	color: var(--c-white);
}
.act-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(6, 14, 26, 0.75) 0%, rgba(6, 14, 26, 0.15) 60%);
}
.act-hero__body {
	position: relative;
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding: 0 24px 48px;
}
.act-hero__en {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.28em;
	color: var(--c-accent);
	margin-bottom: 8px;
}
.act-hero__title {
	font-size: clamp(30px, 4.4vw, 46px);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
}
.act-hero__catch { font-size: 16px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.9); }

/* --- 紹介文 --- */
.act-lead { padding: 40px 0 8px; }
.act-lead__text { max-width: 800px; font-size: 16px; }

/* --- 基本情報+予約サマリー --- */
.act-info__inner {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 56px;
	align-items: start;
}

/* スペック表(定義リスト型。料金ページでも再利用) */
.spec-table { border-top: 1px solid var(--c-line); }
.spec-table__row {
	display: grid;
	grid-template-columns: 170px 1fr;
	border-bottom: 1px solid var(--c-line);
}
.spec-table__row dt {
	background: #f5f7fa;
	font-weight: 700;
	font-size: 14px;
	padding: 18px 20px;
}
.spec-table__row dd { padding: 18px 20px; font-size: 14px; }

/* PC: 追従する予約サマリーカード */
.act-summary { position: sticky; top: calc(var(--header-h) + 24px); }
.act-summary__card {
	background: var(--c-navy);
	color: var(--c-white);
	padding: 28px;
}
.act-summary__title { font-weight: 700; letter-spacing: 0.06em; margin-bottom: 12px; }
.act-summary__price { font-size: 15px; margin-bottom: 6px; }
.act-summary__meta { font-size: 13px; color: rgba(255, 255, 255, 0.75); margin-bottom: 20px; }
.act-summary__btn { width: 100%; justify-content: center; }

/* --- 体験の魅力(写真とテキストの左右交互) --- */
.media-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.media-row + .media-row { margin-top: 64px; }
.media-row__image { aspect-ratio: 3 / 2; overflow: hidden; }
.media-row__image img { width: 100%; height: 100%; object-fit: cover; }
.media-row--reverse .media-row__image { order: 2; }
.media-row__title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: 14px;
	padding-left: 14px;
	border-left: 4px solid var(--c-accent);
}
.media-row__text { font-size: 15px; color: var(--c-gray); }

/* --- 体験の流れ(番号付きステップ) --- */
.step-list { counter-reset: step; }
.step-list__item {
	position: relative;
	counter-increment: step;
	padding: 20px 20px 20px 76px;
	border-bottom: 1px solid var(--c-line);
}
.step-list__item::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 20px;
	color: var(--c-accent);
}

/* --- 安全対策・注意事項ボックス --- */
.note-box {
	border: 1px solid var(--c-line);
	padding: 24px 28px;
	font-size: 14px;
}
.note-box + .note-box { margin-top: 20px; }
.note-box--caution { border-left: 4px solid var(--c-accent); }
.note-box__title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }

/* --- FAQアコーディオン --- */
.accordion__item { border-bottom: 1px solid var(--c-line); }
.accordion__q {
	position: relative;
	display: block;
	cursor: pointer;
	font-weight: 700;
	font-size: 15px;
	padding: 20px 48px 20px 40px;
	list-style: none;
}
.accordion__q::-webkit-details-marker { display: none; }
/* Qマーク */
.accordion__q::before {
	content: "Q";
	position: absolute;
	left: 4px;
	top: 20px;
	font-family: var(--font-en);
	color: var(--c-accent);
	font-weight: 600;
}
/* 開閉アイコン(+/−) */
.accordion__icon {
	position: absolute;
	right: 8px;
	top: 50%;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
}
.accordion__icon::before,
.accordion__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: var(--c-ink);
}
.accordion__icon::before { width: 14px; height: 2px; }
.accordion__icon::after { width: 2px; height: 14px; transition: transform 0.25s; }
.accordion__item[open] .accordion__icon::after { transform: scaleY(0); }
.accordion__a { padding: 0 8px 22px 40px; font-size: 14px; color: var(--c-gray); }

/* --- 予約CTA帯 --- */
.cta-band {
	background: var(--c-navy);
	color: var(--c-white);
	padding: 64px 0;
}
.cta-band__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.cta-band__en {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.25em;
	color: var(--c-accent);
	margin-bottom: 8px;
}
.cta-band__title { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: 0.08em; margin-bottom: 10px; }
.cta-band__text { font-size: 14px; color: rgba(255, 255, 255, 0.85); }

/* --- 下層ページ用レスポンシブ --- */
@media (max-width: 1024px) {
	.act-info__inner { grid-template-columns: 1fr; gap: 32px; }
	.act-summary { position: static; }
}

@media (max-width: 640px) {
	.act-hero { min-height: 300px; }
	.act-hero__body { padding-bottom: 32px; }

	.spec-table__row { grid-template-columns: 1fr; }
	.spec-table__row dt { padding: 12px 16px; }
	.spec-table__row dd { padding: 14px 16px; }

	.media-row { grid-template-columns: 1fr; gap: 20px; }
	.media-row + .media-row { margin-top: 44px; }
	.media-row--reverse .media-row__image { order: 0; }

	.cta-band__inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   下層ページ個別コンポーネント(第3フェーズ追加分)
   ========================================================================== */

/* 写真背景付きタイトル帯 */
.page-hero--photo {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 110px 0 72px;
}
.page-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(6, 14, 26, 0.55);
}
.page-hero__inner { position: relative; }

/* ページ導入文 */
.page-intro {
	font-size: 16px;
	margin-bottom: 56px;
}

/* --- 料金カード --- */
.price-section + .price-section { margin-top: 72px; }
.price-section .section__title--left { margin-bottom: 32px; }

.price-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.price-grid--2 { grid-template-columns: repeat(2, 1fr); }

.price-card {
	position: relative;
	border: 1px solid var(--c-line);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
}
.price-card--featured { border: 2px solid var(--c-accent); }
.price-card__badge {
	position: absolute;
	top: -13px;
	left: 24px;
	background: var(--c-accent);
	color: var(--c-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 3px 14px;
}
.price-card__name {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.06em;
	margin-bottom: 14px;
}
.price-card__price {
	font-family: var(--font-en);
	font-weight: 600;
	font-size: 34px;
	color: var(--c-navy);
	margin-bottom: 18px;
	line-height: 1.2;
}
.price-card__unit {
	font-family: var(--font-jp);
	font-weight: 400;
	font-size: 13px;
	color: var(--c-gray);
	margin-left: 6px;
}
.price-card__includes { border-top: 1px solid var(--c-line); padding-top: 16px; }
.price-card__includes li {
	position: relative;
	font-size: 13px;
	color: var(--c-gray);
	padding: 5px 0 5px 18px;
}
/* リード線代わりの小さなアクセントマーク */
.price-card__includes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 8px;
	height: 2px;
	background: var(--c-accent);
}

/* 注意ボックスとの間隔 */
.price-section + .note-box,
.price-grid + .note-box { margin-top: 56px; }
.container > .note-box { margin-top: 56px; }

/* --- アクセス --- */
.access-top {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 48px;
	align-items: start;
	margin-bottom: 72px;
}

/* --- FAQ --- */
.faq-contact {
	margin-top: 56px;
	border: 1px solid var(--c-line);
	padding: 32px;
	text-align: center;
}
.faq-contact p { margin-bottom: 18px; font-size: 14px; }

/* --- お問い合わせフォーム --- */
.contact-form { border-top: 1px solid var(--c-line); padding-top: 40px; }
.form-field { margin-bottom: 26px; }
.form-field label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 8px;
}
.form-required {
	display: inline-block;
	background: var(--c-accent);
	color: var(--c-white);
	font-size: 11px;
	font-weight: 700;
	padding: 1px 8px;
	margin-left: 10px;
	vertical-align: middle;
}
.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	font-family: var(--font-jp);
	font-size: 15px;
	padding: 12px 14px;
	border: 1px solid var(--c-line);
	background: #fbfcfe;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: 2px solid var(--c-accent);
	outline-offset: 0;
	border-color: var(--c-accent);
}
.form-privacy { font-size: 13px; margin: 8px 0 28px; }
.form-privacy a { color: var(--c-accent); text-decoration: underline; }
.form-submit { text-align: center; }
.form-submit .btn { min-width: 260px; justify-content: center; }
.form-note { font-size: 12px; color: var(--c-gray); margin-top: 12px; }

/* --- 下層ページレスポンシブ --- */
@media (max-width: 1024px) {
	.price-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.price-grid,
	.price-grid--2 { grid-template-columns: 1fr; }
	.access-top { grid-template-columns: 1fr; gap: 28px; }
	.page-hero--photo { padding: 80px 0 48px; }
	.page-intro { margin-bottom: 40px; }
}

/* ==========================================================================
   スポット詳細・お知らせカテゴリー(第4フェーズ追加分)
   ========================================================================== */

/* スポットのキャッチコピー */
.spot-catch {
	font-size: clamp(19px, 2.4vw, 24px);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 16px;
}

/* フォトギャラリー(メイン1枚+サブ3枚) */
.spot-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}
.spot-gallery__main {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 8;
	overflow: hidden;
}
.spot-gallery__item {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.spot-gallery__main img,
.spot-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* お知らせ一覧のカテゴリーチップ */
.news-list__chip {
	flex-shrink: 0;
	align-self: center;
	background: var(--c-navy);
	color: var(--c-white);
	font-size: 11px;
	letter-spacing: 0.08em;
	padding: 2px 12px;
}
.news-list__chip--event { background: var(--c-accent); }

@media (max-width: 640px) {
	.spot-gallery { gap: 10px; }
	.spot-gallery__main { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   ヒーロースライドショー(第5フェーズ追加分)
   ========================================================================== */
.hero { overflow: hidden; }
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
	position: absolute;
	inset: 0;
	background: var(--c-navy) center / cover no-repeat;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.hero__slide.is-active { opacity: 1; }

/* ページャー(右上に縦並び: 現在番号 + ドット + 総数) */
.hero__pager {
	position: absolute;
	right: 30px;
	top: 22%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.85);
}
.hero__pager-num {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.15em;
}
.hero__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.8);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.25s, border-color 0.25s;
}
.hero__dot.is-active {
	background: var(--c-accent);
	border-color: var(--c-accent);
}

@media (max-width: 640px) {
	.hero__pager { right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero__slide { transition: none; }
}

/* スライド連動の場所表記(重ねて配置しクロスフェード) */
.hero__locations { display: grid; margin-bottom: 32px; }
.hero__locations .hero__location {
	grid-area: 1 / 1;
	margin-bottom: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
}
.hero__locations .hero__location.is-active { opacity: 1; }

/* GODAブリッジバナー: テキスト面から写真へのフェード表現 */
.banner-panel__image { position: relative; }
.banner-panel__image::before {
	content: "";
	position: absolute;
	inset: 0;
	/* 左(紺)から右(透明)へのグラデーションで境界を溶かす */
	background: linear-gradient(to right, var(--c-navy) 0%, rgba(16, 31, 51, 0) 45%);
	pointer-events: none;
}
@media (max-width: 640px) {
	/* スマホは縦積みのため上から下へのフェードに切り替え */
	.banner-panel__image::before {
		background: linear-gradient(to bottom, var(--c-navy) 0%, rgba(16, 31, 51, 0) 45%);
	}
}

/* Googleマップ埋め込み */
.map-embed { background: #e9edf2; }
.map-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
}

/* ==========================================================================
   スマホ: アクティビティカードの横スクロールカルーセル
   (PCは従来どおり3カラムグリッド。CSSスクロールスナップのみで実装)
   ========================================================================== */
@media (max-width: 640px) {
	.card-grid--3 {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 16px;
		/* 画面端までカードが流れるようコンテナの余白ぶん広げる */
		margin-inline: -24px;
		padding-inline: 24px;
		padding-bottom: 12px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox: スクロールバー非表示 */
	}
	.card-grid--3::-webkit-scrollbar { display: none; } /* Chrome/Safari */
	.card-grid--3 > .card {
		flex: 0 0 78%; /* 次のカードが少し見える幅にしてスクロールを示唆 */
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   スマホ: GODAブリッジバナーを写真+文字の重ね表示に変更
   (PCは従来どおり左テキスト/右写真のまま)
   ========================================================================== */
@media (max-width: 640px) {
	.banner-panel {
		position: relative;
		display: block; /* 縦積みをやめて重ね表示にする */
	}
	.banner-panel__image {
		position: absolute;
		inset: 0;
		min-height: 0; /* 全面背景にするため高さ指定を解除 */
	}
	/* うっすら紺を全面に重ねて文字とボタンを読みやすくする */
	.banner-panel__image::before {
		background: rgba(16, 31, 51, 0.62);
	}
	.banner-panel__body {
		position: relative;
		z-index: 1;
		min-height: 300px;
	}
}

/* ==========================================================================
   パララックス(ヒーロー・イベントバナー)
   ========================================================================== */
.hero__slides { will-change: transform; }

.event-banner { overflow: hidden; }
.event-banner__bg {
	position: absolute;
	inset: 0;
	background: var(--c-navy-deep) center / cover no-repeat;
	will-change: transform;
}

/* GTranslate言語スイッチャー: スマホでは固定予約ボタンと重ならない位置へ */
@media (max-width: 640px) {
	#gt_float_wrapper {
		bottom: 84px !important; /* 固定予約ボタン(高さ約52px+余白)の上に配置 */
		right: 12px !important;
	}
}

/* ==========================================================================
   GTranslate言語スイッチャーのデザイン統一
   (紺背景・角丸なし・欧文フォント・ホバーでオレンジ)
   ========================================================================== */
#gt_float_wrapper .gt_float_switcher {
	font-family: var(--font-en) !important;
	font-size: 12px !important;
	letter-spacing: 0.14em;
	/* 半透明の紺+背景ぼかし(すりガラス風)で写真の上でも読みやすく */
	background: rgba(16, 31, 51, 0.7) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--c-white) !important;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 0 !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
	overflow: hidden;
}

/* 国旗画像は使わずテキスト主体のミニマル表示に */
#gt_float_wrapper .gt_float_switcher img { display: none !important; }

/* 現在の言語(閉じた状態のボタン部分) */
#gt_float_wrapper .gt_float_switcher .gt-selected {
	background: transparent !important;
	border-radius: 0 !important;
}
#gt_float_wrapper .gt_float_switcher .gt-selected .gt-current-lang {
	padding: 10px 16px !important;
	color: var(--c-white) !important;
	font-weight: 500;
	text-transform: uppercase;
}

/* 矢印アイコンを白に(暗色画像のため反転) */
#gt_float_wrapper .gt_float_switcher-arrow { filter: invert(1) brightness(1.6); }

/* ドロップダウンの言語リスト */
#gt_float_wrapper .gt_float_switcher .gt_options {
	background: rgba(16, 31, 51, 0.7) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: 0 !important;
}
#gt_float_wrapper .gt_float_switcher .gt_options a {
	color: rgba(255, 255, 255, 0.85) !important;
	padding: 10px 16px !important;
	font-size: 12px !important;
	letter-spacing: 0.1em;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	transition: background-color 0.2s, color 0.2s;
}
#gt_float_wrapper .gt_float_switcher .gt_options a:hover {
	background: var(--c-accent) !important;
	color: var(--c-white) !important;
}

/* 現在表示中の言語は選択肢から隠す(切替先だけを見せる) */
#gt_float_wrapper .gt_float_switcher .gt_options a.gt-current { display: none; }

/* ==========================================================================
   下層ページ: ヘッダーを半透明(すりガラス風)に
   ※ トップページ(.is-transparent)は従来どおり
   ========================================================================== */
.site-header:not(.is-transparent) { background: transparent; }

/* ==========================================================================
   料金表(スプレッドシート構造に対応したグループヘッダー付きテーブル)
   ========================================================================== */
.fee-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.fee-table {
	width: 100%;
	min-width: 820px; /* 列が潰れないよう確保(狭い画面では横スクロール) */
	border-collapse: collapse;
	font-size: 14px;
}
.fee-table th,
.fee-table td {
	border: 1px solid var(--c-line);
	padding: 12px 14px;
	text-align: center;
	vertical-align: middle;
}
.fee-table thead th {
	background: var(--c-navy);
	color: var(--c-white);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.05em;
	border-color: rgba(255, 255, 255, 0.2);
}
/* 平日限定割引のグループ見出しはアクセント色で区別 */
.fee-table thead .fee-table__discount { background: var(--c-accent); }

/* 行見出し(チケット種類) */
.fee-table tbody th {
	background: #f5f7fa;
	font-weight: 700;
	font-size: 13px;
	text-align: left;
	min-width: 220px;
}
.fee-table__desc { font-size: 13px; color: var(--c-gray); white-space: nowrap; }
.fee-table__price { font-family: var(--font-en); letter-spacing: 0.04em; }
.fee-table tbody tr:nth-child(even) td { background: #fbfcfe; }
.fee-table-note { font-size: 12px; color: var(--c-gray); margin-top: 12px; }

/* スマホ: 横スクロール時にチケット種類の列を固定 */
@media (max-width: 800px) {
	.fee-table__name,
	.fee-table tbody th {
		position: sticky;
		left: 0;
		z-index: 1;
		box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
	}
	/* 画面端いっぱいまで使う */
	.fee-table-wrap {
		margin-inline: -24px;
		padding-inline: 24px;
	}
}

/* 料金セクションのリード文(割引の対象条件など) */
.price-section__lead {
	font-size: 14px;
	color: var(--c-gray);
	margin: -16px 0 28px;
}

/* 料金ページ冒頭の注意書き */
.price-notice {
	margin-top: 0;
	margin-bottom: 48px;
}
.price-notice strong {
	font-weight: 700;
	color: var(--c-accent); /* 太字+アクセント色で強調 */
}
.note-box a {
	color: var(--c-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 公式料金サイトへのボタン(重力系アクティビティ関連ページ) */
.act-price-link {
	text-align: center;
	margin-top: 40px;
}
.act-price-link--lead {
	text-align: left;
	margin: 20px 0 8px;
}

/* ==========================================================================
   下層ページ: タイトル帯をヘッダーの背後まで引き上げる
   (半透明メニュー越しに画像が透けて見えるようにする)
   ========================================================================== */
.page-hero {
	margin-top: calc(-1 * var(--header-h));
	padding-top: calc(var(--header-h) + 72px);
}
.page-hero--photo {
	padding-top: calc(var(--header-h) + 96px);
}
.act-hero {
	margin-top: calc(-1 * var(--header-h));
	min-height: calc(440px + var(--header-h));
}

@media (max-width: 640px) {
	.page-hero {
		padding-top: calc(var(--header-h) + 48px);
	}
	.page-hero--photo {
		padding-top: calc(var(--header-h) + 64px);
	}
	.act-hero {
		min-height: calc(300px + var(--header-h));
	}
}

/* ==========================================================================
   チケット選択ページ(/tickets/)
   ========================================================================== */
.tickets-page {
	/* ヘッダーの背後まで背景を引き上げ、全面ダークの選択画面にする */
	margin-top: calc(-1 * var(--header-h));
	padding: calc(var(--header-h) + 96px) 0 120px;
	min-height: 88vh;
	background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-deep) 100%);
	color: var(--c-white);
	text-align: center;
	display: flex;
	align-items: center;
}
.tickets-page .container { width: 100%; }
.tickets-page .section__title { color: var(--c-white); }
.tickets-page__lead {
	color: rgba(255, 255, 255, 0.8);
	font-size: 15px;
	letter-spacing: 0.08em;
	margin-bottom: 56px;
}

.tickets-choice {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	max-width: 960px;
	margin-inline: auto;
}
.ticket-choice {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 52px 44px 48px;
	text-align: left;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.04);
	transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}
.ticket-choice:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
	transform: translateY(-4px);
}
.ticket-choice__en {
	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.25em;
	color: var(--c-accent);
	transition: color 0.3s;
}
.ticket-choice:hover .ticket-choice__en { color: var(--c-white); }
.ticket-choice__title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.8;
}
.ticket-choice__arrow {
	position: absolute;
	right: 36px;
	bottom: 32px;
	font-family: var(--font-en);
	font-size: 20px;
	transition: transform 0.3s;
}
.ticket-choice:hover .ticket-choice__arrow { transform: translateX(8px); }

.tickets-page__note {
	margin-top: 48px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
}
.tickets-page__note a {
	color: var(--c-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 640px) {
	.tickets-page { padding-bottom: 80px; min-height: 0; }
	.tickets-choice { grid-template-columns: 1fr; gap: 16px; }
	.ticket-choice { padding: 36px 28px 40px; }
	.ticket-choice__title { font-size: 16px; }
}

/* ==========================================================================
   バス時刻表ページ(/bus/)
   ========================================================================== */
.bus-app { max-width: 760px; }
.bus-step { margin-top: 64px; }
.bus-step:first-child { margin-top: 8px; }
.bus-step.is-hidden { display: none; }
.bus-step.is-enter { animation: busEnter 0.45s ease both; }
@keyframes busEnter {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

/* 選択カード(曜日・乗車場所) */
.bus-choice-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.bus-choice {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 24px;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--c-ink);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.25s, background-color 0.25s, transform 0.25s;
}
.bus-choice:hover,
.bus-choice:focus-visible {
	border-color: var(--c-accent);
	transform: translateY(-2px);
}
.bus-choice[aria-pressed="true"] {
	background: var(--c-navy);
	border-color: var(--c-navy);
	color: var(--c-white);
}
.bus-choice__icon { font-size: 22px; }
.bus-choice__sub {
	font-family: var(--font-en);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--c-accent);
	display: block;
}
.bus-choice__label { flex: 1; }
.bus-choice__arrow {
	font-family: var(--font-en);
	color: var(--c-accent);
	transition: transform 0.25s;
}
.bus-choice:hover .bus-choice__arrow { transform: translateX(5px); }
.bus-choice[aria-pressed="true"] .bus-choice__arrow { color: var(--c-white); }

/* 選択サマリー */
.bus-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
}
.bus-chip {
	display: inline-block;
	padding: 7px 16px;
	background: var(--c-navy);
	color: var(--c-white);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
}
.bus-summary__change,
.bus-summary__map {
	font-size: 13px;
	color: var(--c-accent);
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-family: inherit;
	padding: 4px 2px;
}

/* 時刻表カード */
.bus-times {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	padding: 28px 28px 20px;
	margin-bottom: 24px;
}
.bus-times__title {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding-bottom: 14px;
	margin-bottom: 6px;
	border-bottom: 2px solid var(--c-navy);
}
.bus-times__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bus-time {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 4px;
	border-bottom: 1px solid var(--c-line);
}
.bus-time:last-child { border-bottom: none; }
.bus-time__clock {
	font-family: var(--font-en);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.08em;
}
.bus-time--past { opacity: 0.38; }
.bus-time--next { background: rgba(239, 130, 0, 0.07); margin-inline: -4px; padding-inline: 8px; }
.bus-time__badge {
	font-size: 12px;
	font-weight: 700;
	color: var(--c-accent);
	border: 1px solid var(--c-accent);
	padding: 3px 10px;
}
.bus-time__badge--soon {
	background: var(--c-accent);
	color: var(--c-white);
}
.bus-empty {
	text-align: center;
	color: var(--c-gray);
	padding: 36px 0 20px;
}

@media (max-width: 640px) {
	.bus-step { margin-top: 48px; }
	.bus-choice-grid { grid-template-columns: 1fr; gap: 12px; }
	.bus-choice { padding: 18px 20px; }
	.bus-times { padding: 22px 18px 14px; }
	.bus-time__clock { font-size: 20px; }
}

/* バス時刻表: 到着時刻の表示 */
.bus-time__arrive {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--c-gray);
}

/* バス時刻表への導線 */
.access-bus-link { margin-top: 24px; }
.access__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* バス時刻表: 臨時便などのラベルバッジ */
.bus-time__note {
	font-size: 12px;
	font-weight: 700;
	color: var(--c-navy);
	border: 1px solid var(--c-navy);
	padding: 3px 10px;
	letter-spacing: 0.04em;
}

/* バス時刻表: 曜日ごとの運行案内(運行会社・経由・限定運行など) */
.bus-day-note {
	background: #f5f7fa;
	border-left: 3px solid var(--c-accent);
	padding: 14px 18px;
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 24px;
	white-space: pre-line; /* 改行入力をそのまま反映 */
}

/* バス時刻表: 予約ボタン(予約制のバス) */
.bus-reserve { margin: 0 0 28px; }

/* ==========================================================================
   バス案内バー(トップページ・メインビジュアル直下)
   ========================================================================== */
.bus-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	background: var(--c-navy-deep);
	color: var(--c-white);
	padding: 15px 24px;
	font-size: 14px;
	letter-spacing: 0.04em;
	transition: background-color 0.3s;
}
.bus-bar:hover { background: var(--c-navy); }
.bus-bar__icon { font-size: 17px; line-height: 1; }
.bus-bar__label {
	font-family: var(--font-en);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.25em;
	color: var(--c-accent);
}
.bus-bar__text { font-weight: 500; }
.bus-bar__link {
	color: var(--c-accent);
	font-weight: 700;
	white-space: nowrap;
}
.bus-bar:hover .bus-bar__link { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
	.bus-bar { padding: 13px 16px; font-size: 12.5px; gap: 4px 10px; }
	.bus-bar__text { width: 100%; text-align: center; order: 3; }
}

/* ==========================================================================
   ヘッダー下辺の弧: 橋をイメージした曲線
   現在: 吊り橋ケーブル型(中央がわずかに垂れ下がる)
   ※ アーチ型(中央が細い)にする場合はborder-radiusを消して以下を有効にする
      -webkit-mask: radial-gradient(50% 24px at 50% 100%, transparent 98.5%, #000 99.5%);
      mask: radial-gradient(50% 24px at 50% 100%, transparent 98.5%, #000 99.5%);
   ========================================================================== */
.grv-clip-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ヘッダー下辺はまっすぐ(弧は使わない) */

/* ==========================================================================
   浮遊ヘッダーの配色自動切替(明るい背景では紺、暗い背景では白)
   ========================================================================== */
.site-header__logo img,
.menu-toggle__bar,
.menu-toggle__label,
.header-tel {
	transition: filter 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}
.site-header__logo img { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); }
.menu-toggle__bar { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.menu-toggle__label { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }

/* 明るい背景の上では紺に反転(ロゴと右側メニューは別々に判定) */
/* ロゴは常にカラーのまま(冒頭の紺グラデーションが下地になる) */
.logo-on-light .site-header__logo img {
	filter: drop-shadow(0 2px 10px rgba(16, 31, 51, 0.28));
}

/* ページ冒頭の紺グラデーション: 上から下へ自然に消える */
.page-top-veil {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 190px;
	z-index: 99;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(16, 31, 51, 0.72) 0%, rgba(16, 31, 51, 0.38) 45%, rgba(16, 31, 51, 0.12) 75%, transparent 100%);
}
@media (max-width: 640px) {
	.page-top-veil { height: 150px; }
}
.utils-on-light .menu-toggle__bar {
	background: var(--c-navy);
	box-shadow: none;
}
.utils-on-light .menu-toggle__label {
	color: var(--c-navy);
	text-shadow: none;
}
.utils-on-light .header-tel { color: var(--c-navy); }
.menu-is-open .site-header__logo img {
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
.menu-is-open .menu-toggle__bar { background: var(--c-white); }
.menu-is-open .menu-toggle__label { color: var(--c-white); }

/* ==========================================================================
   イベント開催中バッジ(ヒーロー・イベントスライド表示中のみ)
   ========================================================================== */
.hero-event-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--c-accent);
	color: var(--c-white);
	padding: 7px 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 20px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.5s, transform 0.5s;
	pointer-events: none;
}
.hero-event-badge[hidden] { display: none; }
.hero-event-badge.is-visible { opacity: 1; transform: none; }
.hero-event-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-white);
	animation: badgePulse 1.6s ease-out infinite;
}
.hero-event-badge__en {
	font-family: var(--font-en);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
}
@keyframes badgePulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
	70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* ==========================================================================
   スポット/店舗詳細: フォトカルーセル
   ========================================================================== */
.spot-carousel {
	position: relative;
	margin-top: 16px;
	margin-bottom: 24px;
}
.spot-carousel__viewport { overflow: hidden; }
.spot-carousel__track {
	display: flex;
	transition: transform 0.55s ease;
}
.spot-carousel__slide {
	flex: 0 0 100%;
	aspect-ratio: 16 / 9;
	background: var(--c-navy);
}
.spot-carousel__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.spot-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: rgba(16, 31, 51, 0.65);
	color: var(--c-white);
	border: none;
	font-family: var(--font-en);
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.25s;
}
.spot-carousel__nav:hover { background: var(--c-accent); }
.spot-carousel__nav--prev { left: 0; }
.spot-carousel__nav--next { right: 0; }
.spot-carousel__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.spot-carousel__dot {
	width: 22px;
	height: 3px;
	background: rgba(255, 255, 255, 0.45);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.25s;
}
.spot-carousel__dot.is-active { background: var(--c-accent); }

/* 店舗メニュー(名前と価格) */
.menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 640px;
}
/* 区切りは点線、名前と価格の間の線はなし */
.menu-list__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 2px;
	border-bottom: 1px dotted #c3cbd4;
	font-size: 15px;
}
.menu-list__item:first-child { border-top: 1px dotted #c3cbd4; }
.menu-list__name { font-weight: 500; }
.menu-list__leader { display: none; }
.menu-list__price {
	font-family: var(--font-en);
	font-weight: 500;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.spot-carousel__slide { aspect-ratio: 4 / 3; }
	.spot-carousel__nav { width: 38px; height: 38px; }
}

/* ==========================================================================
   スポット/店舗詳細: サブ写真グリッド(正方形×3列+メニュー名・価格)
   ========================================================================== */
/* 横スクロール(写真が増えたらスワイプで送れる。3枚以内なら並ぶだけ) */
.spot-grid {
	display: flex;
	gap: 16px;
	margin-top: 16px;
	margin-bottom: 24px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 14px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(16, 31, 51, 0.28) transparent;
	cursor: grab;
}
.spot-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.spot-grid::-webkit-scrollbar { height: 6px; }
.spot-grid::-webkit-scrollbar-track { background: rgba(16, 31, 51, 0.06); }
.spot-grid::-webkit-scrollbar-thumb { background: rgba(16, 31, 51, 0.28); }
.spot-grid__item {
	margin: 0;
	flex: 0 0 calc((100% - 32px) / 3);
	min-width: 0; /* 長い名前でも幅が広がらないように */
	scroll-snap-align: start;
}
.spot-grid__caption { min-width: 0; }
.spot-grid__name { overflow-wrap: anywhere; }
.spot-grid__item img { pointer-events: none; }
.spot-grid__image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #eef1f5;
}
.spot-grid__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.spot-grid__item:hover .spot-grid__image img { transform: scale(1.04); }
.spot-grid__caption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding-top: 10px;
	font-size: 14px;
}
.spot-grid__name { font-weight: 600; }
.spot-grid__price {
	font-family: var(--font-en);
	letter-spacing: 0.06em;
	color: var(--c-gray);
	white-space: nowrap;
}

@media (max-width: 640px) {
	.spot-grid { gap: 12px; }
	.spot-grid__item { flex-basis: calc((100% - 12px) / 2); }
	.spot-grid__caption { font-size: 12.5px; flex-wrap: wrap; }
}

/* ==========================================================================
   GODA BRIDGE 特別ページ(ダークレイアウト・このページ専用)
   ========================================================================== */
.goda {
	background: var(--c-navy-deep);
	color: var(--c-white);
	overflow: hidden;
}
.goda-container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}
.goda-container--narrow { max-width: 760px; }
.goda-section { padding: 96px 0; }
.goda-label {
	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3em;
	color: var(--c-accent);
	margin-bottom: 18px;
}
.goda-heading {
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	margin-bottom: 28px;
}
.goda-text {
	font-size: 15.5px;
	line-height: 2.1;
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 1.4em;
}

/* --- ヒーロー --- */
.goda-hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: flex-end;
	/* メニューバーの下に潜り込ませる(下層ヒーローと同じ引き上げ方式) */
	margin-top: calc(-1 * var(--header-h));
	overflow: hidden; /* パララックスの拡大ぶんを見切る */
}
.goda-hero__bg { will-change: transform; }
.goda-hero__bg,
.goda-hero__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.goda-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 22, 38, 0.35) 0%, rgba(11, 22, 38, 0.15) 45%, var(--c-navy-deep) 100%);
}
.goda-hero__giant {
	position: absolute;
	right: -0.06em;
	top: 16vh;
	font-family: var(--font-en);
	font-weight: 700;
	font-size: clamp(120px, 24vw, 360px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.28);
	user-select: none;
	pointer-events: none;
}
.goda-hero__giant span { font-size: 0.4em; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.28); }
.goda-hero__content {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
	width: 100%;
	padding: 0 24px 96px;
}
.goda-hero__label {
	font-family: var(--font-en);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3em;
	color: var(--c-accent);
	margin-bottom: 14px;
}
.goda-hero__title {
	font-family: var(--font-en);
	font-size: clamp(56px, 10vw, 128px);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: 0.02em;
	margin-bottom: 22px;
}
.goda-hero__lead {
	font-size: clamp(16px, 2.2vw, 22px);
	font-weight: 600;
	letter-spacing: 0.14em;
}

/* --- スペック --- */
.goda-stats { padding-top: 40px; }
.goda-stats__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 40px 32px;
	margin-top: 48px;
}
.goda-stat__num {
	font-family: var(--font-en);
	font-weight: 700;
	font-size: clamp(44px, 4.6vw, 64px);
	line-height: 1;
	color: var(--c-accent);
	letter-spacing: -0.01em;
	margin-bottom: 16px;
}
.goda-stat__unit {
	font-size: 0.45em;
	margin-left: 4px;
	color: var(--c-accent);
}
.goda-stat__title {
	font-size: 15px;
	font-weight: 700;
	padding-bottom: 10px;
	margin-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.goda-stat__desc {
	font-size: 13px;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.7);
}

/* --- 一般図(設計図面パネル) --- */
.goda-blueprint { padding-bottom: 32px; }
.goda-blueprint__panel {
	margin: 0;
	background: #f2f4f7;
	padding: clamp(16px, 3vw, 36px);
}
.goda-blueprint__panel img {
	width: 100%;
	height: auto;
	display: block;
}
.goda-blueprint__caption {
	font-family: var(--font-en);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: #5b6b7d;
	text-align: center;
	padding-top: 14px;
}

/* --- 写真×文章 --- */
.goda-split__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.goda-split--reverse .goda-split__text { order: 2; }
.goda-split--reverse .goda-split__photo { order: 1; }
.goda-split__photo img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.goda-split__text .goda-text:last-child { margin-bottom: 0; }

/* --- CTA --- */
.goda-cta {
	text-align: center;
	padding-bottom: 120px;
}
.goda-cta__title { margin-bottom: 20px; }
.goda-cta__buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 36px;
}
.btn--line-white {
	color: var(--c-white);
	border-color: rgba(255, 255, 255, 0.6);
}
.btn--line-white:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* --- レスポンシブ --- */
@media (max-width: 960px) {
	.goda-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.goda-stat:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.goda-section { padding: 64px 0; }
	.goda-hero { min-height: 78vh; }
	.goda-hero__content { padding-bottom: 64px; }
	.goda-hero__giant { top: 10vh; }
	.goda-split__inner { grid-template-columns: 1fr; gap: 28px; }
	.goda-split--reverse .goda-split__text { order: 1; }
	.goda-split--reverse .goda-split__photo { order: 2; }
	.goda-stats__grid { gap: 32px 20px; }
}

/* ==========================================================================
   フォトスポット: コラージュギャラリー+ライトボックス
   ========================================================================== */
.collage-section { margin-top: 56px; }
.collage-note {
	font-size: 13px;
	color: var(--c-gray);
	margin-bottom: 24px;
}
.collage {
	columns: 3 260px; /* 画面幅に応じて自動で3列→2列 */
	column-gap: 14px;
}
.collage__item {
	display: block;
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
	break-inside: avoid;
	overflow: hidden;
}
.collage__item img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.45s ease, opacity 0.45s ease;
}
.collage__item:hover img { transform: scale(1.03); opacity: 0.92; }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: rgba(11, 22, 38, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
	max-width: min(1100px, 92vw);
	max-height: 84vh;
	object-fit: contain;
	display: block;
}
.lightbox__close,
.lightbox__nav {
	position: fixed;
	background: rgba(255, 255, 255, 0.12);
	color: var(--c-white);
	border: none;
	width: 48px;
	height: 48px;
	font-size: 20px;
	font-family: var(--font-en);
	cursor: pointer;
	transition: background-color 0.25s;
	z-index: 2001;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--c-accent); }
.lightbox__close { top: 18px; right: 18px; font-size: 26px; line-height: 1; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }

@media (max-width: 640px) {
	.collage { columns: 2 140px; column-gap: 10px; }
	.collage__item { margin-bottom: 10px; }
	.lightbox { padding: 12px; }
	.lightbox__img { max-width: 96vw; max-height: 78vh; }
	.lightbox__nav { top: auto; bottom: 22px; transform: none; }
	.lightbox__nav--prev { left: calc(50% - 58px); }
	.lightbox__nav--next { right: calc(50% - 58px); }
}

/* ライトボックス: 撮影場所キャプション */
.lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: min(1100px, 92vw);
}
.lightbox__figure .lightbox__img { max-width: 100%; }
.lightbox__caption {
	color: rgba(255, 255, 255, 0.9);
	font-size: 13.5px;
	line-height: 1.8;
	text-align: center;
	letter-spacing: 0.04em;
}

/* ==========================================================================
   フォトスポット: コラージュヒーロー(掲載写真のモザイク・自動生成)
   ========================================================================== */
.collage-hero {
	position: relative;
	margin-top: calc(-1 * var(--header-h)); /* メニューバーの下に潜り込ませる */
	overflow: hidden;
}
.collage-hero__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	height: clamp(360px, 52vh, 520px);
}
.collage-hero__cell { overflow: hidden; }
.collage-hero__cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.collage-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 31, 51, 0.66) 0%, rgba(16, 31, 51, 0.5) 55%, rgba(16, 31, 51, 0.72) 100%);
}
.collage-hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--c-white);
	padding: var(--header-h) 24px 0;
}
.collage-hero__en {
	font-family: var(--font-en);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3em;
	color: var(--c-accent);
	margin-bottom: 14px;
}
.collage-hero__title {
	font-size: clamp(28px, 4.4vw, 42px);
	font-weight: 700;
	letter-spacing: 0.08em;
}

@media (max-width: 640px) {
	.collage-hero__grid {
		grid-template-columns: repeat(2, 1fr);
		height: clamp(300px, 46vh, 400px);
	}
	/* スマホは先頭4枚のみ表示(2×2) */
	.collage-hero__cell:nth-child(n+5) { display: none; }
}

/* ==========================================================================
   店舗ページ スタイリング強化(キャッチ見出し・リード・メニューパネル・
   フィラー・他店舗カード)
   ========================================================================== */
.spot-head {
	margin: 24px 0 34px;
	text-align: center; /* 中央配置 */
}
.spot-head__catch {
	/* 明朝体のエレガントな見出し(装飾なし) */
	font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: 0.12em;
}
.spot-lead > p:first-child {
	font-size: 16.5px;
	line-height: 2.15;
}

/* 写真未設定のフィラー(COMING SOON) */
.spot-filler {
	position: relative;
	aspect-ratio: 16 / 9;
	background: repeating-linear-gradient(45deg, #f2f5f9 0 16px, #e9eef4 16px 32px);
	overflow: hidden;
}
.spot-filler::after {
	content: "PHOTO COMING SOON";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.28em;
	color: #9aa7b5;
}
.spot-filler--small::after { font-size: 10px; letter-spacing: 0.22em; }

/* メニューをパネル化 */
.menu-panel {
	background: #f6f8fa;
	padding: 30px 28px 20px;
	border-top: 3px solid var(--c-accent);
}
.menu-panel .menu-list { max-width: none; }
.menu-panel .menu-list__item:last-child { border-bottom: none; }

/* 他の店舗カード */
.other-shops { margin-top: 64px; }
.other-shops__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.other-card {
	display: block;
	border: 1px solid var(--c-line);
	background: var(--c-white);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.3s;
}
.other-card:hover { border-color: var(--c-accent); }
.other-card__image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.other-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.other-card:hover .other-card__image img { transform: scale(1.05); }
.other-card__body { padding: 18px 20px 20px; }
.other-card__title { font-size: 16px; font-weight: 700; }
.other-card__catch {
	font-size: 12.5px;
	color: var(--c-gray);
	margin-top: 6px;
	line-height: 1.7;
}
.other-card__more {
	font-family: var(--font-en);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--c-accent);
	margin-top: 12px;
}

@media (max-width: 640px) {
	.spot-head { margin: 18px 0 26px; }
	.menu-panel { padding: 22px 18px 12px; }
	.other-shops__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   下層ヒーロー用の汎用部品(パララックス・キャッチ)
   ※現在は未使用。page-heroにarray('parallax'=>true,'catch'=>…)を渡すと有効。
   ========================================================================== */
.page-hero--parallax {
	position: relative;
	overflow: hidden;
}
.page-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	will-change: transform;
	z-index: 0;
}
.page-hero--parallax::before { z-index: 1; }
.page-hero--parallax .page-hero__inner { z-index: 2; }
.page-hero__catch {
	margin-top: 18px;
	font-size: clamp(14px, 1.7vw, 17px);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.94);
}



/* ==========================================================================
   フローティング予約ボタン(PC・画面右下の言語選択の上)
   ========================================================================== */
/* チケット半券風: 四隅を丸く削り、左側にミシン目の点線を入れる */
.floating-tickets {
	--ticket-notch: 13px; /* 角の削り具合 */
	position: fixed;
	right: 20px;
	/* GRVFT: 右下に落とし、ヒーロー下部NEWSラインと同じ高さに揃える */
	bottom: 18px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	background: var(--c-accent);
	color: var(--c-white);
	text-decoration: none;
	padding: 15px 20px 14px 34px; /* 左はミシン目のぶん広く */
	transition: background-color 0.25s, transform 0.25s, filter 0.25s;
	filter: drop-shadow(0 6px 18px rgba(16, 31, 51, 0.28));
	/* 四隅を円形に切り取る(4分割したマスクの合成) */
	-webkit-mask:
		radial-gradient(circle var(--ticket-notch) at 0 0, transparent 98%, #000 100%) top left / 51% 51% no-repeat,
		radial-gradient(circle var(--ticket-notch) at 100% 0, transparent 98%, #000 100%) top right / 51% 51% no-repeat,
		radial-gradient(circle var(--ticket-notch) at 0 100%, transparent 98%, #000 100%) bottom left / 51% 51% no-repeat,
		radial-gradient(circle var(--ticket-notch) at 100% 100%, transparent 98%, #000 100%) bottom right / 51% 51% no-repeat;
	mask:
		radial-gradient(circle var(--ticket-notch) at 0 0, transparent 98%, #000 100%) top left / 51% 51% no-repeat,
		radial-gradient(circle var(--ticket-notch) at 100% 0, transparent 98%, #000 100%) top right / 51% 51% no-repeat,
		radial-gradient(circle var(--ticket-notch) at 0 100%, transparent 98%, #000 100%) bottom left / 51% 51% no-repeat,
		radial-gradient(circle var(--ticket-notch) at 100% 100%, transparent 98%, #000 100%) bottom right / 51% 51% no-repeat;
}
/* ミシン目(切り取り線)の点々 */
.floating-tickets::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0 4px, transparent 4px 9px);
	background-size: 2px 9px;
	background-repeat: repeat-y;
	pointer-events: none;
}
.floating-tickets:hover {
	background: #d97400;
	transform: translateY(-2px);
}
.floating-tickets__en {
	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
}
.floating-tickets__jp {
	font-size: 10.5px;
	letter-spacing: 0.1em;
}
@media (max-width: 960px) {
	.floating-tickets { display: none; }
}


/* ==========================================================================
   ヘッダー電話リンク(スマホ・ハンバーガーの横)
   ========================================================================== */
.header-tel {
	display: none;
	align-items: center;
	gap: 7px;
	color: var(--c-white);
	text-decoration: none;
	margin-left: auto;
}
.header-tel__icon { width: 15px; height: 15px; }
.header-tel__num {
	font-family: var(--font-en);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
}
/* 電話リンクが表示されている時は、電話が右寄せ役になりトグルはその隣 */
.header-tel ~ .menu-toggle { margin-left: 10px; }
@media (max-width: 960px) {
	.header-tel { display: flex; }
}


/* ==========================================================================
   店舗名タイポグラフィ見出し(写真帯の代わり)
   ========================================================================== */
.shop-title {
	position: relative;
	padding: calc(var(--header-h) + 72px) 0 8px;
	text-align: center;
	overflow: hidden;
}
/* 背後の巨大な透かし文字(店名を薄く重ねて奥行きを出す) */
.shop-title::before {
	content: attr(data-name);
	position: absolute;
	top: 56%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: clamp(88px, 17vw, 210px);
	font-weight: 500;
	letter-spacing: 0.08em;
	white-space: nowrap;
	color: rgba(16, 31, 51, 0.045);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}
/* 極薄のドットグリッド(中央から外へ自然に消える) */
.shop-title::after {
	content: "";
	position: absolute;
	inset: 0;
	/* ダイヤ格子(45度のクロスハッチ) */
	background-image:
		repeating-linear-gradient(45deg, rgba(16, 31, 51, 0.10) 0 1px, transparent 1px 26px),
		repeating-linear-gradient(-45deg, rgba(16, 31, 51, 0.10) 0 1px, transparent 1px 26px);
	-webkit-mask-image: radial-gradient(ellipse 66% 76% at 50% 52%, #000 12%, transparent 74%);
	mask-image: radial-gradient(ellipse 66% 76% at 50% 52%, #000 12%, transparent 74%);
	pointer-events: none;
	z-index: 0;
}
.shop-title > .container { position: relative; z-index: 1; }

/* 四隅のコーナーブラケット(幾何学的な枠) */
.shop-title > .container::before {
	content: "";
	position: absolute;
	top: -34px;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	width: min(760px, 92%);
	pointer-events: none;
	background:
		linear-gradient(#b9c0ca, #b9c0ca) left top / 26px 1px no-repeat,
		linear-gradient(#b9c0ca, #b9c0ca) left top / 1px 26px no-repeat,
		linear-gradient(#b9c0ca, #b9c0ca) right top / 26px 1px no-repeat,
		linear-gradient(#b9c0ca, #b9c0ca) right top / 1px 26px no-repeat,
		linear-gradient(#b9c0ca, #b9c0ca) left bottom / 26px 1px no-repeat,
		linear-gradient(#b9c0ca, #b9c0ca) left bottom / 1px 26px no-repeat,
		linear-gradient(#b9c0ca, #b9c0ca) right bottom / 26px 1px no-repeat,
		linear-gradient(#b9c0ca, #b9c0ca) right bottom / 1px 26px no-repeat;
	opacity: 0;
	animation: grvTitleFade 1s ease 0.75s forwards;
}
.shop-title__en {
	position: relative;
	display: inline-block;
	font-family: var(--font-en);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	color: var(--c-accent);
	margin-bottom: 26px;
	padding: 20px 26px;
	opacity: 0;
	animation: grvTitleFade 0.8s ease 0.1s forwards;
}
/* ラベルを囲む菱形の輪郭 */
.shop-title__en::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 58px;
	height: 58px;
	border: 1px solid rgba(16, 31, 51, 0.18);
	transform: translate(-50%, -50%) rotate(45deg);
	pointer-events: none;
}
.shop-title__name {
	font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	font-size: clamp(32px, 6.4vw, 64px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.14em;
	color: var(--c-navy);
}
.shop-title__name .char {
	display: inline-block;
	animation: grvCharUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes grvCharUp {
	from { opacity: 0; transform: translateY(0.5em); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes grvTitleFade {
	to { opacity: 1; }
}
.shop-title__rule {
	position: relative;
	display: block;
	width: 190px;
	height: 7px;
	margin: 34px auto 0;
	background:
		linear-gradient(to right, transparent, rgba(16, 31, 51, 0.38) 22%, rgba(16, 31, 51, 0.38) 78%, transparent) top center / 100% 1px no-repeat,
		linear-gradient(to right, transparent, rgba(16, 31, 51, 0.16) 30%, rgba(16, 31, 51, 0.16) 70%, transparent) bottom center / 100% 1px no-repeat;
	transform: scaleX(0);
	transform-origin: center;
	animation: grvRuleIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}
.shop-title__rule::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	background: var(--c-accent);
	box-shadow: 0 0 0 6px var(--c-white);
	transform: translate(-50%, -50%) rotate(45deg);
}
@keyframes grvRuleIn {
	to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
	.shop-title__en,
	.shop-title__name .char,
	.shop-title__rule { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 640px) {
	.shop-title { padding-top: calc(var(--header-h) + 48px); }
	.shop-title__en { margin-bottom: 16px; letter-spacing: 0.32em; }
	.shop-title__rule { margin-top: 24px; width: 140px; }
	.shop-title::before { font-size: clamp(64px, 26vw, 120px); }
	.shop-title::after {
		background-image:
			repeating-linear-gradient(45deg, rgba(16, 31, 51, 0.10) 0 1px, transparent 1px 20px),
			repeating-linear-gradient(-45deg, rgba(16, 31, 51, 0.10) 0 1px, transparent 1px 20px);
	}
	.shop-title > .container::before { top: -26px; bottom: -22px; width: 94%; }
	.shop-title__en { padding: 16px 20px; margin-bottom: 20px; }
	.shop-title__en::before { width: 48px; height: 48px; }
}


/* ==========================================================================
   横長フォトバンド(強めのパララックス)
   ========================================================================== */
.photo-band {
	position: relative;
	height: clamp(260px, 34vw, 420px);
	overflow: hidden;
	margin: 8px 0 0;
	background: var(--c-navy-deep);
}
.photo-band--slim { height: clamp(300px, 38vw, 460px); margin-top: 64px; }
.photo-band__bg {
	position: absolute;
	inset: -18% 0;
	background-size: cover;
	background-position: center;
	will-change: transform;
}
/* ビネットは使わない(写真をそのまま見せる) */
.photo-band__vignette { display: none; } /* 予備クラス(未使用) */
/* コンテナの内側に置いても画面幅いっぱいに広げる */
.photo-band--bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
@media (max-width: 640px) {
	.photo-band { height: 220px; }
	.photo-band--slim { height: 260px; margin-top: 44px; }
}


/* ==========================================================================
   ヘッダー右側: 言語切替 / TEL / 区切り線 / MENU
   ========================================================================== */
.header-utils {
	position: fixed;
	top: 0;
	right: 28px;
	height: var(--header-h);
	z-index: 101;
	display: flex;
	align-items: center;
	gap: 20px;
	pointer-events: auto;
}
.header-lang { display: flex; align-items: center; }
.lang-in-header #gt_float_wrapper {
	position: static !important;
	bottom: auto !important;
	right: auto !important;
	left: auto !important;
	transform: none !important;
	z-index: auto !important;
}
/* 言語ボタン: サイト共通の角丸なし・線だけの佇まいに(色は背景に応じて切替) */
.lang-in-header #gt_float_wrapper .gt_float_switcher {
	position: relative !important;
	height: auto !important;
	line-height: 1.2 !important;
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	font-family: var(--font-en) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em;
	overflow: visible !important;
	transition: border-color 0.3s, color 0.3s;
}
.lang-in-header #gt_float_wrapper .gt_float_switcher .gt-selected .gt-current-lang {
	display: flex !important;
	align-items: center;
	gap: 7px;
	padding: 9px 13px !important;
	color: var(--c-white) !important;
	text-transform: uppercase;
}
/* 地球儀アイコン(文字色に合わせて色が変わる) */
.lang-in-header #gt_float_wrapper .gt_float_switcher .gt-selected .gt-current-lang::before {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='12' cy='12' r='10'/><path d='M2 12h20M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='12' cy='12' r='10'/><path d='M2 12h20M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20'/></svg>") center / contain no-repeat;
	flex: none;
}
/* 明るい背景では紺に */
.utils-on-light #gt_float_wrapper .gt_float_switcher { border-color: rgba(16, 31, 51, 0.45) !important; }
.utils-on-light #gt_float_wrapper .gt_float_switcher .gt-selected .gt-current-lang { color: var(--c-navy) !important; }
/* 言語リストはプルダウン(角丸なし) */
.lang-in-header #gt_float_wrapper .gt_float_switcher .gt_options {
	position: absolute !important;
	top: calc(100% + 6px) !important;
	right: 0 !important;
	left: auto !important;
	min-width: 156px;
	max-height: 60vh;
	overflow-y: auto;
	border-radius: 0 !important;
	background: var(--c-navy-deep) !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 10px 30px rgba(10, 21, 36, 0.35);
	display: none !important;
}
.lang-in-header #gt_float_wrapper .gt_float_switcher .gt_options.gt-open { display: block !important; }
.lang-in-header #gt_float_wrapper .gt_float_switcher .gt_options a {
	color: rgba(255, 255, 255, 0.86) !important;
	padding: 10px 14px !important;
	font-size: 12.5px !important;
	letter-spacing: 0.06em;
}
.lang-in-header #gt_float_wrapper .gt_float_switcher .gt_options a:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: var(--c-accent) !important;
}

.header-tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--c-white);
	text-decoration: none;
	margin-left: 0;
}
.header-tel__icon { width: 20px; height: 20px; }
.header-tel__label {
	font-family: var(--font-en);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.14em;
}
.header-tel:hover { color: var(--c-accent); }

.header-utils__divider {
	width: 1px;
	height: 34px;
	background: rgba(255, 255, 255, 0.5);
}
.utils-on-light .header-utils__divider { background: rgba(16, 31, 51, 0.35); }

.menu-toggle__label { text-transform: uppercase; letter-spacing: 0.2em; font-size: 10px; }
.menu-toggle { margin-left: 0; }

@media (max-width: 640px) {
	.header-utils { gap: 12px; }
	.header-tel__label { font-size: 15px; }
	.header-tel__icon { width: 18px; height: 18px; }
	.header-utils__divider { height: 26px; }
	.lang-in-header #gt_float_wrapper .gt_float_switcher { font-size: 12px !important; }
	.lang-in-header #gt_float_wrapper .gt_float_switcher .gt-selected .gt-current-lang { padding: 5px 10px !important; }
}


/* ==========================================================================
   サブ写真の横スクロール: 「横に送れる」ことが一目で分かるようにする
   ========================================================================== */
.spot-grid-wrap {
	position: relative;
}
/* スクロールできるときだけ、右端をぼかして「続きがある」ことを示す */
.spot-grid-wrap.is-scrollable::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 14px;
	width: 76px;
	pointer-events: none;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92));
}
/* スワイプの案内 */
.spot-grid__hint {
	display: none;
	position: absolute;
	right: 0;
	top: -26px;
	font-family: var(--font-en);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.22em;
	color: var(--c-gray);
	align-items: center;
	gap: 6px;
}
.spot-grid-wrap.is-scrollable .spot-grid__hint { display: inline-flex; }
.spot-grid__hint-arrow {
	display: inline-block;
	color: var(--c-accent);
	animation: grvSwipeHint 1.8s ease-in-out infinite;
}
@keyframes grvSwipeHint {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
	.spot-grid__hint-arrow { animation: none; }
}
/* 送れるときは次の1枚が少し覗くように幅を詰める */
.spot-grid-wrap.is-scrollable .spot-grid__item { flex-basis: calc((100% - 32px) / 3.4); }
@media (max-width: 640px) {
	.spot-grid-wrap.is-scrollable .spot-grid__item { flex-basis: calc((100% - 12px) / 2.3); }
	.spot-grid-wrap.is-scrollable::after { width: 48px; }
}


/* ==========================================================================
   季節限定などのバッジ(「名前|価格|バッジ文言」の3つ目に入力すると表示)
   ========================================================================== */
.spot-grid__image { position: relative; }
.spot-grid__badge {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--c-accent);
	color: var(--c-white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 6px 12px;
	line-height: 1.2;
}
.menu-list__badge {
	display: inline-block;
	margin-left: 10px;
	vertical-align: 2px;
	background: var(--c-accent);
	color: var(--c-white);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 3px 8px;
	line-height: 1.2;
	white-space: nowrap;
}
@media (max-width: 640px) {
	.spot-grid__badge { font-size: 10px; padding: 5px 9px; }
	.menu-list__badge { font-size: 9.5px; padding: 2px 6px; margin-left: 6px; }
}


/* ============================================================
   電話番号の選択シート(TELタップ時)
   スマホ: 用途を選ぶと tel: で発信 / PC: 番号を表示するのみ
   ============================================================ */

/* .header-tel を button に変更したためのリセット */
button.header-tel {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.tel-sheet[hidden] { display: none; }
.tel-sheet {
	position: fixed;
	inset: 0;
	z-index: 10000;
}
.tel-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 31, 51, 0.6);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.tel-sheet.is-open .tel-sheet__backdrop { opacity: 1; }

.tel-sheet__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	border-radius: 16px 16px 0 0;
	padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
	box-shadow: 0 -6px 24px rgba(16, 31, 51, 0.18);
	transform: translateY(100%);
	transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.tel-sheet.is-open .tel-sheet__panel { transform: translateY(0); }

.tel-sheet__title {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
	color: #666;
	text-align: center;
}

.tel-opt {
	display: block;
	min-height: 64px;
	padding: 15px 16px;
	margin-bottom: 10px;
	border: 1px solid #e3e3e3;
	border-radius: 12px;
	color: #1a1a1a;
	text-decoration: none;
}
.tel-opt:active { background: #f6f6f6; }
.tel-opt__label {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
}
.tel-opt__num {
	display: block;
	margin-top: 6px;
	font-family: var(--font-en);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--c-accent);
}
.tel-opt__time {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #888;
}

/* 受付時間外は色を落として注記を出す(発信自体は妨げない) */
.tel-opt.is-closed { background: #fafafa; }
.tel-opt.is-closed .tel-opt__num { color: #9a9a9a; }
.tel-opt.is-closed .tel-opt__time::after {
	content: "(ただいま受付時間外)";
	margin-left: 4px;
	color: #c0392b;
}

.tel-sheet__cancel {
	appearance: none;
	display: block;
	width: 100%;
	padding: 14px;
	background: none;
	border: 0;
	font-size: 15px;
	color: #666;
	cursor: pointer;
}

/* PC: 中央カード表示。発信リンクは無効化し、番号は選択してコピーできるように */
@media (min-width: 768px) {
	.tel-sheet__panel {
		inset: 0;
		max-width: 420px;
		height: max-content;
		margin: auto;
		border-radius: 16px;
		padding: 24px;
		box-shadow: 0 12px 40px rgba(16, 31, 51, 0.24);
		transform: scale(0.96);
		transition: transform 0.2s ease, opacity 0.2s ease;
		opacity: 0;
	}
	.tel-sheet.is-open .tel-sheet__panel {
		transform: scale(1);
		opacity: 1;
	}
	.tel-opt {
		pointer-events: none;
		cursor: default;
	}
	.tel-opt__num { user-select: all; }
	.tel-opt__time::after { content: none; }
	.tel-opt.is-closed .tel-opt__time::after { content: "(ただいま受付時間外)"; }
}


/* ============================================================
/* ============================================================
   タイトル帯(紺)に内包する紹介動画
   動画を上、見出し(ACTIVITY/アクティビティ)を下に置く構成。
   画面の端ぎりぎりまで広げ、下のカード一覧より一段大きく見せる。
   ============================================================ */
.page-hero--movie {
	/* GRVMOVPAD: ヘッダー(メニューバー)分の余白を確保してから動画を配置 */
	padding-top: calc(var(--header-h) * 2 + 20px);
	padding-bottom: clamp(30px, 4vw, 48px);
}
.hero-movie {
	max-width: 1560px;
	margin: 0 auto clamp(26px, 3.5vw, 40px);
	padding-inline: 16px;
}
.hero-movie__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: #000;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
}
.hero-movie__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* ホバー時に出るYouTubeのタイトル表示・ロゴボタンを出さないため操作を無効化
	   (音なしの自動再生で映像だけを見せる想定) */
	pointer-events: none;
}
/* aspect-ratio 非対応ブラウザ向けのフォールバック */
@supports not (aspect-ratio: 16 / 9) {
	.hero-movie__frame {
		height: 0;
		padding-top: 56.25%;
	}
}
/* スマホは左右8pxまで詰めて、可能な限り端まで見せる */
@media (max-width: 640px) {
	.hero-movie {
		margin-bottom: 22px;
		padding-inline: 8px;
	}
	.hero-movie__frame {
		border-radius: 6px;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	}
}

/* 動画の操作UI: カーソルを乗せた時だけ表示する(消音の切替 / 字幕選択) */
.hero-movie__ui {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}
.hero-movie__ui[hidden] { display: none; }
.hero-movie__frame:hover .hero-movie__ui,
.hero-movie__ui:focus-within {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
/* ホバーできない端末(スマホ)では常時表示 */
@media (hover: none) {
	.hero-movie__ui {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}
.hero-movie__btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(16, 31, 51, 0.62);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.hero-movie__btn:hover { background: rgba(16, 31, 51, 0.88); }
.hero-movie__btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.hero-movie__ico { width: 20px; height: 20px; }
.hero-movie__ico--sound { display: none; }
.hero-movie__btn.is-sound .hero-movie__ico--muted { display: none; }
.hero-movie__btn.is-sound .hero-movie__ico--sound { display: block; }

.hero-movie__cc[hidden] { display: none; }
.hero-movie__cc select {
	appearance: none;
	height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 18px;
	background: rgba(16, 31, 51, 0.62);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
}
.hero-movie__cc select:hover { background: rgba(16, 31, 51, 0.88); }
.hero-movie__cc select option { color: #1a1a1a; }

@media (max-width: 640px) {
	.hero-movie__ui { left: 8px; bottom: 8px; gap: 6px; }
	.hero-movie__btn { width: 38px; height: 38px; }
	.hero-movie__ico { width: 17px; height: 17px; }
	.hero-movie__cc select { height: 32px; font-size: 12px; padding: 0 10px; }
}

/* API がここを iframe に置き換える */
.hero-movie__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ============================================================
   GRVLEAD: 一覧ページの見出し + キャッチコピー(白背景側)
   ============================================================ */
.page-lead {
	text-align: center;
	margin: 4px 0 clamp(32px, 5vw, 56px);
}
.page-lead__en {
	display: block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.25em;
	color: var(--c-accent);
	margin-bottom: 10px;
}
.page-lead__title {
	margin: 0;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--c-navy);
}
.page-lead__copy {
	margin: clamp(14px, 2.2vw, 22px) auto 0;
	max-width: 36em;
	font-size: clamp(15px, 1.4vw, 18px);
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: 0.06em;
	color: var(--c-navy);
}
@media (max-width: 599px) {
	.page-lead__copy {
		font-size: 14px;
		line-height: 1.85;
	}
}

/* ############################################################
   GRVDRAW2: CTAを図面(線画)のパララックスの上に重ねる
   線画は白線・背景透過PNGなので、どの背景色でも色味が変わらない
   ############################################################ */
.goda-cta--draw {
	position: relative;
	overflow: hidden;
	margin-top: clamp(24px, 4vw, 56px);
	padding-top: clamp(80px, 11vw, 168px);
	padding-bottom: clamp(88px, 12vw, 180px);
}
/* 図面レイヤー: 画面幅いっぱい */
.goda-cta__draw {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: 0;
	pointer-events: none;
}
.goda-cta__draw-img {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	opacity: 0.85;
	will-change: transform;
}
/* 文字の可読性を守る中央のヴィネット */
.goda-cta--draw::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(ellipse 44% 56% at 50% 52%, rgba(10, 21, 36, 0.88) 0%, rgba(10, 21, 36, 0.6) 55%, rgba(10, 21, 36, 0) 100%);
}
.goda-cta--draw > .goda-container {
	position: relative;
	z-index: 2;
}
@media (max-width: 640px) {
	.goda-cta--draw {
		margin-top: 24px;
		padding-top: 72px;
		padding-bottom: 80px;
	}
	.goda-cta__draw-img {
		background-size: 118% auto;
		background-position: center 60%;
		opacity: 0.7;
	}
	.goda-cta--draw::before {
		background: radial-gradient(ellipse 72% 44% at 50% 60%, rgba(10, 21, 36, 0.9) 0%, rgba(10, 21, 36, 0.6) 60%, rgba(10, 21, 36, 0) 100%);
	}
}

/* ############################################################
   GRVTOP: フッター表示中はフローティングTICKETSをフェードアウトし、
           代わりにページトップへ戻るボタンを表示する
   ############################################################ */
.floating-tickets {
	transition: background-color .25s, transform .3s, filter .25s, opacity .3s, visibility .3s;
}
.floating-tickets.is-hidden {
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	pointer-events: none;
}

.back-to-top {
	position: fixed;
	right: 20px;
	bottom: 108px;
	z-index: 91;
	width: 52px;
	height: 52px;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 50%;
	background: rgba(16, 31, 51, 0.62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--c-white);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .3s, visibility .3s, transform .3s, bottom .35s, background-color .25s, border-color .25s;
}
.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.back-to-top:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
}
.back-to-top:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}
.back-to-top__arrow {
	width: 9px;
	height: 9px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(-45deg);
	margin-bottom: -2px;
}
.back-to-top__label {
	font-family: var(--font-en);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
}
/* TICKETSが消えたら空いた右下へ降りる */
.back-to-top.is-low {
	bottom: 18px;
}
@media (max-width: 960px) {
	/* スマホは下部固定CTAバー(.fixed-reserve)の上に置く */
	.back-to-top,
	.back-to-top.is-low {
		right: 14px;
		bottom: 92px;
		width: 46px;
		height: 46px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.floating-tickets,
	.back-to-top {
		transition: opacity .2s, visibility .2s;
	}
}

/* ############################################################
   GRVFACTS: FACTS & FIGURES の背景に一般図(透過線画)をパララックスで敷く
   線画は白線・背景透過PNGなので紺の上でも色味が変わらない
   ############################################################ */
/* 図をセクション外まではみ出すため、.goda を独立した重なり文脈にして
   z-index:-1 のレイヤーが紺の背景の上・本文の下に入るようにする */
.goda { isolation: isolate; }
.goda-stats--draw {
	position: relative;
	padding-top: clamp(72px, 9vw, 112px);
	padding-bottom: clamp(72px, 9vw, 112px);
}
.goda-stats__draw {
	position: absolute;
	/* GRVFACTS2: 上下のセクションにも絵をはみ出させて帯の境目を消す */
	top: -280px;
	bottom: -280px;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	/* 本文の背後に回して前後セクションの文字と干渉しないようにする */
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}
.goda-stats__draw-img {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center 50%;
	/* 画面幅いっぱい。絵の上端から下端まで切らない（マスクなし） */
	background-size: 100% auto;
	opacity: 0.36;
	will-change: transform;
}
.goda-stats--draw::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(ellipse 92% 46% at 50% 56%, rgba(10, 21, 36, 0.86) 0%, rgba(10, 21, 36, 0.5) 62%, rgba(10, 21, 36, 0) 100%);
}
.goda-stats--draw > .goda-container {
	position: relative;
	z-index: 2;
}
@media (max-width: 640px) {
	.goda-stats--draw { padding-top: 64px; padding-bottom: 64px; }
	.goda-stats__draw { top: -180px; bottom: -180px; }
	.goda-stats__draw-img { background-size: 400% auto; background-position: center 50%; opacity: 0.34; }
	.goda-stats--draw::before { background: radial-gradient(ellipse 110% 46% at 50% 56%, rgba(10, 21, 36, 0.9) 0%, rgba(10, 21, 36, 0.6) 62%, rgba(10, 21, 36, 0) 100%); }
}


/* ############################################################
   GRVMOVIEHERO: /activity/ の紹介動画を全画面ヒーローに変更
   ・動画をビューポート全体に敷き詰め(cover)、下端を白へフェードアウト
   ############################################################ */
.page-hero--movie {
	position: relative;
	padding: 0;
	/* .page-hero の負のマージン(ヘッダー分)を打ち消して画面を覆い切る */
	min-height: calc(100vh + var(--header-h));
	min-height: calc(100svh + var(--header-h));
	overflow: hidden;
	background: var(--c-navy);
}
.page-hero--movie .hero-movie {
	position: absolute;
	inset: 0;
	max-width: none;
	margin: 0;
	padding-inline: 0;
}
.page-hero--movie .hero-movie__frame {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
	box-shadow: none;
}
/* YouTubeは16:9固定のため、画面比率に合わせてはみ出させ object-fit:cover と同じ見え方にする */
.page-hero--movie .hero-movie__player,
.page-hero--movie .hero-movie__frame iframe {
	position: absolute;
	inset: auto;
	top: 50%;
	left: 50%;
	width: 177.7778vh;
	min-width: 100%;
	height: 56.25vw;
	min-height: 100%;
	transform: translate(-50%, -50%);
}
/* 上端のスクリムのみ（ヘッダー視認用）。下端の白フェードは弧のカットに置き換えたため廃止 */
.hero-movie__fade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to bottom,
		rgba(10, 21, 36, 0.62) 0%,
		rgba(10, 21, 36, 0.22) 14%,
		rgba(16, 31, 51, 0.00) 42%,
		rgba(16, 31, 51, 0.00) 100%);
}
/* 音声ボタンは従来どおり左下。白い紙面の重なり分だけ持ち上げて隠れないようにする */
.page-hero--movie .hero-movie__ui {
	z-index: 3;
	left: 20px;
	bottom: calc(16px + clamp(40px, 5vw, 72px) + clamp(78px, 13vw, 178px) * 0.62);
}
@media (max-width: 640px) {
	.page-hero--movie .hero-movie__ui { left: 12px; bottom: 44px; }
}
/* 下端が白へフェードするため、ボタンは白背景でも視認できる濃さにする */
.page-hero--movie .hero-movie__btn {
	background: rgba(16, 31, 51, 0.82);
	border-color: rgba(255, 255, 255, 0.55);
	box-shadow: 0 4px 16px rgba(10, 21, 36, 0.22);
}
.page-hero--movie .hero-movie__btn:hover {
	background: rgba(16, 31, 51, 0.95);
}
@media (max-width: 640px) {
	.page-hero--movie { min-height: calc(76vh + var(--header-h)); min-height: calc(76svh + var(--header-h)); }
	.page-hero--movie .hero-movie { margin: 0; padding-inline: 0; }
	.page-hero--movie .hero-movie__frame { border-radius: 0; box-shadow: none; }
}

/* ############################################################
   GRVGODABANNER: /activity/ 末尾に置くGODAブリッジ(吊り橋)詳細バナー
   ・一覧は白地、バナーパネル自体はトップページと同じ紺
   ############################################################ */
.activity-goda {
	padding-top: clamp(64px, 8vw, 96px);
	padding-bottom: clamp(64px, 8vw, 96px);
}

/* ############################################################
   GRVACTWHITE: /activity/ の一覧側は白地。ヒーロー動画の下端を白へ
   フェードさせ、白い紙面がそのまま立ち上がるように地続きに見せる
   ############################################################ */
.page-body--movie {
	position: relative;
	z-index: 2;
	background: var(--c-white);
	/* 白い紙面が動画の上へ少し持ち上がるように重ねる */
	margin-top: calc(-1 * clamp(40px, 5vw, 72px));
	padding-top: calc(56px + clamp(40px, 5vw, 72px));
	border-radius: 0;
	box-shadow: none;
	/* 弧の深さ(中央の最下点から両端が持ち上がる量) */
	--grv-arc-h: clamp(78px, 13vw, 178px);
}
/* 白い面の始まりを弧に: 中央が下がり、両端が上がる(吊り橋のケーブルと同じ向き)
   楕円(横半径=幅の半分/縦半径=弧の深さ)の内側をマスクで抜いている */
.page-body--movie::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--grv-arc-h);
	background: var(--c-white);
	pointer-events: none;
	-webkit-mask-image: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,0) 99.4%, #000 100%);
	mask-image: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,0) 99.4%, #000 100%);
}

/* ############################################################
   GRVHEROBRIDGE: /activity/ ヒーロー動画の上に吊り橋の線画を浮かせる
   ・GODAブリッジ詳細ページのCTAと同じPNGを使用
   ・js-parallax-strong で transform を上書きされるため、中央寄せは
     inset+margin:auto で行い transform は使わない
   ############################################################ */
.hero-movie__draw {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
	animation: grvHeroBridgeIn 1.6s cubic-bezier(0.16, 0.84, 0.36, 1) 0.35s both;
}
.hero-movie__draw-img {
	/* 線画の幅 / 白い面が動画に重なる量 / PNG下端の余白+細く消える脚先ぶんの逃がし(約3%) */
	--grv-bridge-w: min(1240px, 84vw);
	--grv-overlap: clamp(40px, 5vw, 72px);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(var(--grv-overlap) - var(--grv-bridge-w) * 0.0423);
	width: var(--grv-bridge-w);
	aspect-ratio: 1536 / 371;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	opacity: 0.95;
	/* 明るい映像でも白フェードの上でも読めるよう、細い暗いフチ + 落ち影 */
	filter: drop-shadow(0 0 5px rgba(10, 21, 36, 0.85)) drop-shadow(0 10px 26px rgba(10, 21, 36, 0.45));
}
@keyframes grvHeroBridgeIn {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-movie__draw { animation: none; }
}

/* ############################################################
   GRVSPHERO: スマホでは動画を全画面カバーせず16:9のまま小さく表示
   ・カバー(トリミング)をやめ、映像全体が見える縦横比固定に
   ・ヘッダーの下に配置し、動画のすぐ下から白い一覧が始まる
   ############################################################ */
@media (max-width: 640px) {
	.page-hero--movie {
		min-height: 0;
		height: auto;
		/* .page-hero の負のマージン(ヘッダー分)を打ち消し、さらにヘッダーの下へ */
		padding: calc(var(--header-h) * 2 + 8px) 0 0;
		background: var(--c-navy);
	}
	.page-hero--movie .hero-movie {
		position: relative;
		inset: auto;
		max-width: none;
		margin: 0;
		padding-inline: 0;
	}
	.page-hero--movie .hero-movie__frame {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 0;
		box-shadow: none;
	}
	.page-hero--movie .hero-movie__player,
	.page-hero--movie .hero-movie__frame iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		transform: none;
	}
	/* 映像全体を見せたいので、白フェードは下端をなでる程度に */
	.page-hero--movie .hero-movie__fade {
		background: none;
	}
	/* 橋脚の下端は動画の下辺(＝白い一覧のはじまり)に接地 */
	.hero-movie__draw-img {
		--grv-bridge-w: 90vw;
		--grv-overlap: 0px;
		opacity: 0.92;
		filter: drop-shadow(0 0 4px rgba(10, 21, 36, 0.8)) drop-shadow(0 6px 16px rgba(10, 21, 36, 0.4));
	}
	/* 動画が全画面ではないので白い面の重なりは無し。弧は浅めに */
	.page-body--movie {
		margin-top: 0;
		padding-top: 32px;
		border-radius: 0;
		box-shadow: none;
		--grv-arc-h: 11vw;
	}
	.page-hero--movie .hero-movie__ui { left: 12px; bottom: calc(12px + 8vw); }
}


/* ############################################################
   GRVACTHEROMOVIE: アクティビティ詳細のメインビジュアルをYouTubeに
   ・/activity/ 一覧のヒーローと同じ全画面(cover)表示にそろえる
   ・音声のオン/オフボタン(hero-movie__ui)も一覧と共通のものを使う
   ############################################################ */
.act-hero--movie {
	display: block;
	position: relative;
	padding: 0;
	/* .act-hero の負のマージン(ヘッダー分)を打ち消して画面を覆い切る */
	min-height: calc(100vh + var(--header-h));
	min-height: calc(100svh + var(--header-h));
	height: auto;
	overflow: hidden;
	background: var(--c-navy);
}
.act-hero--movie .act-hero__movie {
	position: absolute;
	inset: 0;
	width: auto;
	aspect-ratio: auto;
	overflow: hidden;
	border-radius: 0;
	box-shadow: none;
	background: var(--c-navy);
}
/* YouTubeは16:9固定のため、画面比率に合わせてはみ出させ object-fit:cover と同じ見え方にする */
.act-hero--movie .act-hero__movie .hero-movie__player,
.act-hero--movie .act-hero__movie iframe {
	position: absolute;
	inset: auto;
	top: 50%;
	left: 50%;
	width: 177.7778vh;
	min-width: 100%;
	height: 56.25vw;
	min-height: 100%;
	transform: translate(-50%, -50%);
	border: 0;
	display: block;
	/* ホバー時にタイトルや共有ボタンが出ないよう操作を無効化 */
	pointer-events: none;
}
@media (max-width: 640px) {
	.act-hero--movie { min-height: calc(76vh + var(--header-h)); min-height: calc(76svh + var(--header-h)); }
}

/* ############################################################
   GRVMOVIECOVER: 動画ヒーローの黒帯(レターボックス)対策 + スマホ最適化
   ・cover計算をコンテナ基準(cq単位)にして上下左右の黒帯を無くす
   ・アクティビティ詳細のスマホはトリミングせず16:9で全幅表示
   ・タップ端末はホバーが無いため音声ボタンを常時表示
   ############################################################ */
.page-hero--movie .hero-movie__frame,
.act-hero--movie .act-hero__movie {
	container-type: size;
}
@supports (width: 1cqh) {
	.page-hero--movie .hero-movie__player,
	.page-hero--movie .hero-movie__frame iframe,
	.act-hero--movie .act-hero__movie .hero-movie__player,
	.act-hero--movie .act-hero__movie iframe {
		width: 177.7778cqh;
		min-width: 100cqw;
		height: 56.25cqw;
		min-height: 100cqh;
	}
}

/* スマホ: 全画面だとトリミングが強すぎるので、画面幅基準の高さに抑える */
@media (max-width: 640px) {
	.act-hero--movie {
		min-height: calc(66vw + var(--header-h));
		height: auto;
	}
	/* タップでも使えるように音声ボタンを常時表示 */
	.act-hero--movie .hero-movie__ui {
		opacity: 1;
		transform: none;
		pointer-events: auto;
		left: 8px;
		bottom: 8px;
	}
}

/* ホバーできない端末では音声ボタンを常に見せる(一覧・詳細 共通) */
@media (hover: none) {
	.page-hero--movie .hero-movie__ui,
	.act-hero--movie .hero-movie__ui {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* ############################################################
   GRVACTHEROFULL: 一覧(/activity/)ヒーローを詳細ページと同じ見え方に
   ・白い本文の持ち上げ(margin-top のマイナス)をやめ、初見で動画が
     画面下端まで敷き詰まるようにする
   ・持ち上げ分を padding-top から差し引くので、本文以下の位置は不変
   ############################################################ */
.page-hero--movie + .page-body--movie {
  margin-top: 0;
  padding-top: 56px;
}

/* ############################################################
   GRVMENUSNS: メニュー内のチケットボタンを廃止し、SNSを主役に
   ・右下の追従ボタン(.floating-tickets)と重複するため非表示
   ・空いた場所にSNSを大きな円形ボタンで配置し、FOLLOW US の
     ラベルと細い罫線で見出しをつける
   ############################################################ */
.mobile-menu__tickets { display: none !important; }

.mobile-menu__side { gap: 0; padding-top: 26px; }

.mobile-menu__sns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mobile-menu__sns::before {
  content: "FOLLOW US";
  flex: 0 0 100%;
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.55);
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.mobile-menu__sns li { display: flex; }
.mobile-menu__sns a {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: var(--c-white);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.mobile-menu__sns a svg { width: 28px; height: 28px; display: block; }
.mobile-menu__sns a:hover {
  color: var(--c-white);
  background: var(--c-accent);
  border-color: var(--c-accent);
  transform: translateY(-4px);
}
@media (max-width: 900px) {
  .mobile-menu__side { padding-top: 10px; }
  .mobile-menu__sns { gap: 14px; justify-content: flex-start; }
  .mobile-menu__sns::before { padding-bottom: 12px; }
  .mobile-menu__sns a { width: 56px; height: 56px; }
  .mobile-menu__sns a svg { width: 24px; height: 24px; }
}


/* ############################################################
   GRVMOVIESCROLL: /activity/ ヒーロー動画の中央下に置くスクロール誘導
   ・トップページの .hero__scroll と同じ考え方。サイズは少し大きめ
   ・V字（山かっこ）の矢印を線2本で作り、ゆっくり上下させる
   ############################################################ */
.hero-movie__scroll {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 8px 6px;
	background: none;
	border: none;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--font-en);
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.3em;
	text-shadow: 0 2px 12px rgba(10, 21, 36, 0.5);
	transition: color 0.3s, opacity 0.3s;
}
/* letter-spacing の分だけ右へ寄せて、文字の見た目を中央に合わせる */
.hero-movie__scroll-text {
	padding-left: 0.3em;
}
/* V字の矢印（右下の2辺を残して45度回転） */
.hero-movie__scroll-arrow {
	display: block;
	width: 15px;
	height: 15px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	animation: grvMovieScrollHint 1.8s ease-in-out infinite;
}
.hero-movie__scroll:hover {
	color: var(--c-accent);
}
@keyframes grvMovieScrollHint {
	0%, 100% { transform: rotate(45deg) translate(0, 0); }
	50%      { transform: rotate(45deg) translate(3px, 3px); }
}
@media (max-width: 640px) {
	.hero-movie__scroll {
		bottom: 16px;
		font-size: 11px;
		gap: 6px;
	}
	.hero-movie__scroll-arrow {
		width: 12px;
		height: 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.hero-movie__scroll-arrow { animation: none; }
}

/* ------------------------------------------------------------------
 * 写真の拡大表示ボタン(ライトボックス起動)
 * spot-content.php のメイン写真/サブ写真グリッドで使用。
 * button の既定スタイルを消して、見た目は画像のままにする。
 * ------------------------------------------------------------------ */
.spot-photo-btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: zoom-in;
}
.spot-photo-btn:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
}
.spot-grid__image .spot-photo-btn {
	height: 100%;
	overflow: hidden;
}