/* ============================================================
   SHOP 個別ページ
   ============================================================ */

/* shop-gallery（アイキャッチ大 + サブ 3 枚をギャラリー形式で並べる）
   ホテル・レストランサイトなどでよくある「ヒーロー + 3 サムネ」の一般的な構成。 */
.shop-gallery--grid {
	display: grid;
	gap: clamp(0.5rem, 1.2vw, 1rem);
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
}

/* メイン（1 枚目）: アイキャッチ。横長 16:9 で大きく */
.shop-gallery--grid .shop-gallery__cell {
	margin: 0;
	overflow: hidden;
	background: var(--c-bg-soft);
}
.shop-gallery--grid .shop-gallery__cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.6s var(--ease);
}
.shop-gallery--grid .shop-gallery__cell:hover img { transform: scale(1.04); }

.shop-gallery--grid .shop-gallery__cell--1 {
	aspect-ratio: 16 / 9;
}
.shop-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.5rem, 1.2vw, 1rem);
}
.shop-gallery__thumbs .shop-gallery__cell {
	aspect-ratio: 4 / 3;
}

/* SP では 1 枚目をやや小さい 4/3、サムネを 3 列維持（小さめ） */
@media (max-width: 600px) {
	.shop-gallery--grid .shop-gallery__cell--1 { aspect-ratio: 4 / 3; }
	.shop-gallery__thumbs { gap: 0.4rem; }
}

/* shop-info */
.shop-info { display: flex; flex-direction: column; }
.shop-info__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.4rem 2rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--c-line-soft);
}
@media (min-width: 720px) { .shop-info__row { grid-template-columns: 8em 1fr; } }
.shop-info__row dt { font-weight: 600; color: var(--c-ink); font-size: clamp(0.85rem, 0.3vw + 0.78rem, 0.92rem); }
.shop-info__row dd { color: var(--c-ink-soft); margin: 0; font-size: clamp(0.85rem, 0.3vw + 0.78rem, 0.92rem); }
.shop-info__row a { color: var(--c-brand); }

.shop-info__en { margin-top: 1.5rem; font-size: clamp(0.74rem, 0.25vw + 0.68rem, 0.82rem); color: var(--c-mute); line-height: 1.8; }
.shop-info__en p { margin-block: 0.3em; }

.shop-info__note {
	margin-top: 1.5rem;
	padding: 1rem 1.2rem;
	background: var(--c-bg-warm);
	border-left: 2px solid var(--c-brand);
	color: var(--c-ink-soft);
	font-size: clamp(0.82rem, 0.3vw + 0.74rem, 0.9rem);
	line-height: 1.8;
}

/* shop-map */
.shop-map iframe {
	width: 100%;
	height: 360px;
	border: 0;
	display: block;
}