/* =========================================================
   イベント詳細ページ
   ========================================================= */

.event-detail__media {
	position: relative;
	border-radius: var(--radius-l);
	overflow: hidden;
	margin-bottom: 20px;
	background: var(--c-surface-alt);
}
.event-detail__media img {
	width: 100%;
}
/* ステータスバッジ(開催中/開催予定/終了)は一覧カードと共通のクラス(.event-card__status)を
   使っているが、詳細ページの画像は一覧のカード画像よりかなり大きく表示されるため、
   同じ絶対サイズのままだと相対的に小さく見えてしまう。詳細ページでは画像サイズに合わせて
   バッジ自体も一回り大きく表示されるよう上書きする。 */
.event-detail__media .event-card__status {
	top: 16px;
	left: 16px;
	font-size: 15px;
	padding: 7px 18px;
}

.event-detail__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--c-heading);
	margin: 0 0 8px;
}
.event-detail__subtitle {
	color: var(--c-text-muted);
	margin: 0 0 20px;
}

.event-detail__meta {
	margin-bottom: 24px;
}

.event-detail__cta-inline {
	margin-bottom: 20px;
}
.event-detail__cta-inline .btn-primary {
	width: 100%;
}

/* アピール画像(画像1枚 または 2枚横並び)をクリックすると下に詳細文がスライド表示される
   ボタン+アコーディオンパネルの組み合わせ。2枚並びの場合は画像ごとに個別のボタン・
   パネルを持ち、それぞれ独立して開閉する(詳細文も画像ごとに別々に設定できる)。
   CSS Gridの0fr→1frアニメーションで高さの計算不要のスライド開閉を実現している
   (JS側はクラスの付け外しのみ)。最大15ブロックまで縦に並べられ、
   .event-detail__appeal-listでブロック間の間隔を管理する。 */
.event-detail__appeal-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
}
.event-detail__appeal {
	border: 1px solid var(--c-border);
	border-radius: var(--radius-l);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
/* 2枚並びブロックは、外枠(このブロック自体)には角丸・枠線・影を付けず、
   代わりに画像ごとの.event-detail__appeal-colの方に個別に付ける。
   1つの外枠で2枚を囲むと中央の境目が直角になり「2枚セットの1つの箱」に見えてしまうため、
   左右それぞれが独立したカードに見えるようにしている。 */
.event-detail__appeal--double {
	border: none;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}
.event-detail__appeal-image-btn {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
}
.event-detail__appeal-image-btn img {
	display: block;
	width: 100%;
	height: auto;
}
.event-detail__appeal-image-static {
	display: block;
	width: 100%;
	height: auto;
}
/* 画像2枚を横並びで表示する場合、画像ごとに独立したボタン+詳細パネルを1組ずつ持たせ、
   それぞれの画像をクリックすると自分専用の詳細文だけが開閉するようにしている
   (もう片方の画像・詳細文には影響しない)。左右それぞれに角丸・枠線・影を付けた上で
   カード同士の間に見た目のgapを取り、「2枚で1組の箱」ではなく左右独立したカードに
   見えるようにしている。 */
.event-detail__appeal-double {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.event-detail__appeal-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-l);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
/* 2枚並び用の画像は横長比率(16:9)を基準に高さを揃える。
   【2026-09-17追加修正】当初は縦長比率(4:5)でトリミングしていたが、実際にお客様が
   ご用意される画像(特典バナーのような横長のテキスト入り画像)は横長のため、
   4:5でトリミングすると文字が見切れてしまっていた。実際にお客様が用意する画像の比率
   (横長16:9)に合わせて修正済み。 */
.event-detail__appeal-col img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
.event-detail__appeal-toggle-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 16px;
	background: var(--c-surface);
	border-top: 1px solid var(--c-border);
	color: var(--c-heading);
	font-size: 13px;
	font-weight: 700;
}
.event-detail__appeal-toggle-icon {
	color: var(--c-navy);
	transition: transform 0.25s ease;
	line-height: 1;
}
.event-detail__appeal-image-btn[aria-expanded="true"] .event-detail__appeal-toggle-icon {
	transform: rotate(180deg);
}

.event-detail__appeal-panel-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}
.event-detail__appeal-panel-wrap.is-open {
	grid-template-rows: 1fr;
}
.event-detail__appeal-panel-inner {
	overflow: hidden;
	min-height: 0;
}
.event-detail__appeal-panel-text {
	margin: 0;
	padding: 16px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--c-text);
	background: #fff;
}

.event-detail__gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 32px;
}
.event-detail__gallery img {
	border-radius: var(--radius-m);
}

.event-detail__body-heading {
	font-size: 17px;
	font-weight: 700;
	color: var(--c-heading);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--c-border);
}
.event-detail__body {
	line-height: 1.9;
	margin-bottom: 32px;
}
.event-detail__body img {
	border-radius: var(--radius-m);
	margin: 16px 0;
}

/* イベント概要(ページ一番下)。開催日時・開催会場(会場名・住所・Googleマップ)は他タブの内容を
   自動反映し、それ以降は会場アクセス・駐車場・配送・お支払い方法など任意項目の一覧。
   一覧ページのカードにある.event-card__meta-rowと同じ「ピル型ラベル+内容」の見た目を踏襲し、
   ページ全体でメタ情報の表現を統一している。空欄の項目はPHP側で除外されるため、行ごと非表示になる。 */
.event-detail__overview {
	margin: 0 0 32px;
}
.event-detail__overview-row {
	display: flex;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--c-border);
	font-size: 14px;
	align-items: baseline;
}
.event-detail__overview-row:first-child {
	padding-top: 0;
}
.event-detail__overview-row:last-child {
	border-bottom: none;
}
.event-detail__overview-row dt {
	flex-shrink: 0;
	/* 「会場までのアクセス」「不用品のお引き取り」など9文字前後のラベルでも折り返さず収まる幅。
	   以前は108pxでラベルによって右側がはみ出していたため136pxに拡大した。 */
	width: 136px;
	background: var(--c-navy);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 4px;
	white-space: nowrap;
	align-self: flex-start;
}
.event-detail__overview-row dd {
	margin: 0;
	flex: 1;
	min-width: 0;
	color: var(--c-text);
	line-height: 1.8;
}
/* スマホ幅では、ラベル(dt)と複数行になりがちな内容(dd)が横並びだと窮屈で読みにくいため、
   ラベルを上・内容を下に縦積みに切り替える(dt自体の幅指定も解除し、ラベルの文字数なりの
   幅で表示されるようにする)。 */
@media (max-width: 600px) {
	.event-detail__overview-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.event-detail__overview-row dt {
		width: auto;
	}
}
/* 「開催会場」行に会場のGoogleマップ埋め込みURLが設定されている場合に表示する地図。
   aspect-ratioで高さを確保しているため、iframeの高さ指定は不要(幅・高さともに100%で追従)。 */
.event-detail__overview-map {
	margin-top: 10px;
	border-radius: var(--radius-m);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--c-border);
}
.event-detail__overview-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.event-detail__back {
	display: inline-block;
	margin-bottom: 60px;
	font-size: 13px;
	color: var(--c-text-muted);
}

/* 右下固定の申込みボタン(スマホ表示中心。PCでも右下に表示) */
.booking-fab {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 45;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent-dark) 100%);
	color: #fff;
	border: none;
	box-shadow: 0 8px 24px rgba(22, 35, 63, 0.4);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
}
.booking-fab__free {
	background: #fff;
	color: var(--c-accent-dark);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 12px;
	margin-bottom: 2px;
}

@media (max-width: 400px) {
	/* 画面幅がかなり狭い端末では、ボタン全体が入りきるよう少し縮小 */
	.booking-fab {
		width: 88px;
		height: 88px;
		font-size: 13px;
	}
}

/* 申込みモーダル */
.booking-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: flex-end;
}
.booking-modal[hidden] {
	display: none;
}
.booking-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(22, 35, 63, 0.5);
}
.booking-modal__panel {
	position: relative;
	background: #fff;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	border-radius: 20px 20px 0 0;
	padding: 28px 20px 32px;
	box-shadow: var(--shadow-modal);
}
.booking-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--c-surface);
	border: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--c-text-muted);
}

.booking-modal__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--c-heading);
	margin: 0 0 4px;
}
.booking-modal__event-name {
	font-size: 13px;
	color: var(--c-text-muted);
	margin: 0 0 4px;
}
.booking-modal__event-date {
	font-size: 12px;
	color: var(--c-text);
	background: var(--c-surface);
	border-radius: var(--radius-s);
	padding: 6px 10px;
	margin: 0 0 12px;
}
/* 送信ボタンの直前にまとめて表示する注意書き+個人情報保護方針リンク */
.booking-form__pre-submit-notice {
	background: var(--c-surface);
	border-radius: var(--radius-s);
	padding: 10px 12px;
	margin-bottom: 12px;
}
.booking-modal__notice {
	font-size: 12px;
	color: var(--c-text-muted);
	margin: 0 0 6px;
}
.booking-modal__privacy-notice {
	font-size: 12px;
	color: var(--c-text-muted);
	margin: 0;
}
.booking-modal__privacy-notice a {
	font-weight: 700;
}

.booking-form__field {
	margin-bottom: 16px;
}
.booking-form__field label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--c-heading);
	margin-bottom: 6px;
}
.booking-form__field input[type="text"],
.booking-form__field input[type="email"],
.booking-form__field input[type="date"],
.booking-form__field select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-s);
	font-size: 15px;
	background: #fff;
	color: var(--c-text);
}
.booking-form__field input:focus,
.booking-form__field select:focus {
	outline: 2px solid var(--c-accent);
	outline-offset: 1px;
}

.booking-form__time-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.booking-form__time-row select {
	flex: 1;
}

.booking-form__hint {
	font-size: 12px;
	color: var(--c-required-fg);
	margin: 6px 0 0;
}
.booking-form__hint--muted {
	color: var(--c-text-muted);
}

.booking-form__error {
	background: var(--c-required-bg);
	color: var(--c-required-fg);
	font-size: 13px;
	padding: 10px 12px;
	border-radius: var(--radius-s);
	margin-bottom: 16px;
	white-space: pre-line;
}
.booking-form__error[hidden] {
	display: none;
}

.booking-form__submit {
	width: 100%;
	margin-top: 4px;
}

.booking-modal__success {
	text-align: center;
	padding: 40px 12px;
}
.booking-modal__success[hidden] {
	display: none;
}
.booking-modal__success p {
	font-size: 15px;
	margin-bottom: 24px;
}

@media (min-width: 640px) {
	.booking-modal {
		align-items: center;
		justify-content: center;
	}
	.booking-modal__panel {
		max-width: 480px;
		border-radius: var(--radius-l);
	}
}

/* 来場希望日のカレンダー(来場できない日・期間外の日は選べない) */
.datepicker__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-s);
	background: #fff;
	color: var(--c-text);
	font-size: 15px;
	text-align: left;
	cursor: pointer;
}
.datepicker__trigger:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 1px;
}
.datepicker__trigger-text.is-placeholder {
	color: var(--c-text-muted);
}
.datepicker__trigger-icon {
	font-size: 11px;
	color: var(--c-text-muted);
}
.datepicker__clear {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-accent-dark);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}
.datepicker__panel {
	margin-top: 8px;
	padding: 12px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-s);
	background: #fff;
}
.datepicker__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.datepicker__title {
	font-weight: 700;
	color: var(--c-heading);
}
.datepicker__nav {
	width: 36px;
	height: 36px;
	border: 1px solid var(--c-border);
	border-radius: 50%;
	background: #fff;
	color: var(--c-accent-dark);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.datepicker__nav:disabled {
	color: #c8c8c8;
	cursor: default;
}
.datepicker__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.datepicker__dow {
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 0;
	color: var(--c-text-muted);
}
.datepicker__dow--0 {
	color: #d64545;
}
.datepicker__dow--6 {
	color: #2f6fd6;
}
.datepicker__day {
	height: 38px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: #fff;
	color: var(--c-text);
	font-size: 14px;
	cursor: pointer;
}
.datepicker__day--0 {
	color: #d64545;
}
.datepicker__day--6 {
	color: #2f6fd6;
}
.datepicker__day:hover:not(:disabled) {
	background: var(--c-surface);
	border-color: var(--c-accent);
}
.datepicker__day.is-selected {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: #fff;
	font-weight: 700;
}
.datepicker__day.is-disabled {
	background: #f1f1f1;
	color: #b5b5b5;
	cursor: not-allowed;
}
.datepicker__day.is-closed {
	text-decoration: line-through;
}