/*デスクトップ表示のときはヘッダー文の余白をつける*/
@media (min-width: 769px) {
	body {
		padding-top: 164px;
	}
}

/* ========================================
   店舗ナビゲーションタブ
======================================== */
.store-nav {
	position: sticky;
	top: 81px;
	z-index: 100;
	background: #fff;
	padding: 20px; /* 上下に余白 */
}

.store-nav__inner {
	display: flex;
	gap: 12px; /* ボタン間の隙間 */
	justify-content: center;
	max-width: 1080px;
	margin: 0 auto;
}

.store-nav__item {
	display: block;
	padding: 14px 24px;
	text-align: center;
	font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: #333;
	text-decoration: none;
	border: 1px solid #8c6945; /* 枠線色 */
	background-color: #fff;
	transition: background-color 0.3s ease;
	min-width: 160px;
}

.store-nav__item:hover,
.store-nav__item.active {
	background-color: #f9f8f6; /* アクティブ時の背景色 */
	color: #333; /* 文字色は変化なし */
}

/* ========================================
   店舗セクション共通
======================================== */
.store-section {
	background-color: #fff;
	padding: 60px 20px 80px;
}

.store-section__inner {
	max-width: 1080px;
	margin: 0 auto;
	background-color: #f9f8f6;
	padding: 50px;
	border-radius: 2px;
}

/* 店舗名タイトル */
.store-section__title {
	font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--text-main);
	letter-spacing: 0.1em;
	margin-bottom: 30px;
	padding-bottom: 16px;
	border-bottom: 2px solid #333;
}

/* 上段：写真＋説明 */
.store-section__top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-bottom: 50px;
	align-items: start;
}

.store-section__photo img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
}

.store-section__desc {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.store-section__desc p {
	font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
	font-size: 14px;
	line-height: 2;
	color: var(--text-main);
}

/* WEB予約ボタン */
.store-reserve-btn {
	display: inline-block !important;
	margin-top: 20px;
	padding: 16px 40px;
	background-color: var(--btn-bg) !important; /* 追加 */
	background: var(--btn-bg) !important; /* 追加（backgroundも上書き） */
	color: #fff !important; /* 追加 */
	font-family: 'Montserrat', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
	font-size: 15px;
	letter-spacing: 0.12em;
	text-decoration: none;
	transition: background-color 0.3s ease;
	align-self: flex-start;
	width: fit-content;
	position: relative;
	z-index: 10;
}

.store-reserve-btn:hover {
	background-color: var(--btn-hover);
}

/* 下段：店舗情報＋地図 */
.store-section__bottom {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

/* 店舗情報テーブル */
.store-info {
	width: 100%;
}

.store-info__row {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid #ddd;
	align-items: start;
}

.store-info__row:first-child {
	border-top: 1px solid #ddd;
}

.store-info dt {
	font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-main);
	padding-top: 2px;
}

.store-info dd {
	font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
	font-size: 13px;
	line-height: 1.9;
	color: var(--text-main);
	margin: 0;
}

/* Googleマップ埋め込み */
.store-section__map iframe {
	width: 100%;
	height: 450px;
	border: none;
	display: block;
}

/* ========================================
   店舗ナビゲーション：デザイン維持とレスポンシブ
======================================== */
.store-nav {
	position: sticky;
	top: 81px; /* PCヘッダーの高さ */
	z-index: 100;
	background: #fff;
	padding: 20px;
}

.store-nav__inner {
	display: flex;
	gap: 12px;
	justify-content: center;
	max-width: 1080px;
	margin: 0 auto;
}

.store-nav__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 160px; /* PCでの幅を維持 */
	padding: 14px 24px;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	text-decoration: none;
	border: 1px solid #8c6945;
	background-color: #fff;
	transition: all 0.3s ease;
}

/* ホバー・アクティブ状態を復活 */
.store-nav__item:hover,
.store-nav__item.active {
	background-color: #f9f8f6;
	color: #8c6945; /* 文字色にアクセント */
	border-color: #8c6945;
}

/* スマホ用レスポンシブ設定 */
@media (max-width: 768px) {
	.store-nav {
		position: -webkit-sticky; /* Safari対策 */
		position: sticky;
		top: 0;

		z-index: 1000; /* ヘッダーより前面、コンテンツより前面に */
		background: rgba(255, 255, 255, 0.98); /* 少しだけ透かすとおしゃれです */
		padding: 15px 16px;
	}

	.store-nav__inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.store-nav__item {
		min-width: unset; /* スマホでは固定幅を解除 */
		padding: 12px 5px;
		font-size: 12px;
	}

	/* セクション周りのスマホ調整 */
	.store-section {
		padding: 40px 15px;
	}
	.store-section__inner {
		padding: 20px 15px;
	}
	.store-section__top,
	.store-section__bottom {
		display: block; /* 縦並びに変更 */
	}
	.store-section__photo {
		margin-bottom: 20px;
	}
	.store-info {
		margin-bottom: 30px;
	}
	.store-section__map iframe {
		height: 280px;
	}
}

/* ========================================
   WEB予約ボタン：PC/スマホ共通
======================================== */
/* どの状態でもデザインが崩れないように強力に指定 */
a.store-reserve-btn,
a.store-reserve-btn:link,
a.store-reserve-btn:visited {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 16px 40px !important;
	background: #333550 !important;
	color: #fff !important;
	font-size: 15px !important;
	text-decoration: none !important;
	transition: 0.3s !important;
	width: fit-content;
}

a.store-reserve-btn:hover {
	background: #e8243e !important;
}

@media (max-width: 768px) {
	a.store-reserve-btn {
		width: 100% !important; /* スマホではボタンを大きく */
		max-width: 320px;
		margin: 0 auto;
	}
}