/*
 * WordPress テーマで足した見た目。承認済みの試作の CSS（western.css）は変えず、ここで次だけを足す。
 * - JavaScript が動かないときの表示（開閉する一覧を最初から見せる）
 * - コース・お席の件数が見本と違うときの並び（見本の件数のときは試作と同じ）
 * - 営業時間
 * - 公開トップ以外のページ（固定ページなど）
 */

/* JavaScript が動かないとき：開閉のボタンを出さず、中身を最初から見せる */
html:not(.wr-js) .wr-menu-button,
html:not(.wr-js) [data-wr-pick-toggle] {
	display: none;
}

html:not(.wr-js) .wr-pick__list[hidden] {
	display: grid !important;
}

/* コース：件数に合わせて列を決める（スマートフォン最大3列、タブレット最大6列） */
.wr-course--custom .wr-course__list {
	grid-template-columns: repeat(var(--wr-course-cols-sp, 3), minmax(0, 1fr));
}

/* タブレット：コースは最大6列、お席は最大3列 */
@media (min-width: 600px) and (max-width: 1024px) {
	.wr-course--custom .wr-course__list {
		grid-template-columns: repeat(var(--wr-course-cols, 6), minmax(0, 1fr));
	}

	.wr-seats--custom .wr-seats__list {
		grid-template-columns: repeat(var(--wr-seat-cols, 3), minmax(0, 1fr));
	}
}

/*
 * 店舗情報の店名・住所・電話番号・営業時間：長い文字や、区切りのない英数字（URL など）も欄の中で折り返す。
 * 欄（グリッドの中の要素）が長い文字に合わせて広がらないよう、最小の幅を 0 にする。
 */
.wr-shop__info {
	min-width: 0;
}

.wr-shop__name,
.wr-shop__address,
.wr-shop__hours {
	overflow-wrap: anywhere;
}

/* 営業時間（店舗情報の中） */
.wr-shop__hours {
	margin-top: 14px;
	color: var(--wr-on-dark-soft);
	font-size: 14.5px;
	letter-spacing: 0.04em;
	line-height: 1.75;
}

.wr-shop__hours-title {
	color: var(--wr-on-dark);
	font-weight: 500;
}

.wr-shop__hours-note {
	margin-top: 4px;
}

@media (min-width: 1025px) {
	/* コース 6件以下：1段に並べ、中央へ寄せる（6件のときは試作と同じ位置） */
	.wr-course--custom .wr-course__list {
		left: calc(var(--u) * (454 - 63.5 * var(--wr-course-cols, 6)));
		grid-template-columns: repeat(var(--wr-course-cols, 6), calc(var(--u) * 127));
		width: calc(var(--u) * 127 * var(--wr-course-cols, 6));
	}

	/* コース 7件以上：6列で折り返し、欄の高さを伸ばす。線は段ごとに引く */
	.wr-course--rows {
		height: auto;
		min-height: calc(var(--u) * 248);
		padding-bottom: calc(var(--u) * 24);
	}

	.wr-course--rows .wr-course__list {
		position: relative;
		top: auto;
		left: auto;
		row-gap: calc(var(--u) * 16);
		margin: calc(var(--u) * 15) auto 0;
	}

	.wr-course--rows .wr-course__list::before {
		content: none;
	}

	.wr-course--rows .wr-course__list li::before {
		content: "";
		position: absolute;
		top: calc(var(--u) * 36);
		right: 0;
		left: 0;
		height: 1px;
		background: var(--wr-gold-line);
	}

	.wr-course--rows .wr-course__list img {
		position: relative;
		z-index: 1;
	}

	/* お席 1〜2件：同じ幅の列で並べる */
	.wr-seats--custom .wr-seats__list {
		grid-template-columns: repeat(var(--wr-seat-cols, 3), calc(var(--u) * 156));
	}

	/* お席 4件以上：3列で折り返し、欄の高さを伸ばす */
	.wr-seats--rows {
		display: grid;
		grid-template-columns: calc(var(--u) * 174) calc(var(--u) * 482);
		align-items: start;
		height: auto;
		min-height: calc(var(--u) * 230);
		padding-bottom: calc(var(--u) * 24);
	}

	.wr-seats--rows .wr-seats__list {
		position: static;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: calc(var(--u) * 14);
		margin-top: calc(var(--u) * -2);
	}

	/*
	 * 店舗情報：試作は住所を折り返さずに1行で出していた。長い住所が写真に重ならないよう、欄の中で折り返す。
	 * 欄の高さは文字の量に合わせて伸ばす。短いときは試作と同じ高さ（225）のまま。
	 */
	.wr-shop {
		height: auto;
		min-height: calc(var(--u) * 225);
	}

	.wr-shop__info {
		height: auto;
		min-height: calc(var(--u) * 225);
		padding-bottom: calc(var(--u) * 14);
	}

	.wr-shop__address {
		white-space: normal;
	}

	.wr-shop__hours {
		margin-top: calc(var(--u) * 6);
		font-size: max(11.5px, calc(var(--u) * 10));
		line-height: calc(var(--u) * 16.4);
	}

	.wr-shop__hours-note {
		margin-top: calc(var(--u) * 2);
	}

	/* JavaScript が動かないとき：見えている予約サイトの一覧のぶんだけ欄を伸ばす */
	html:not(.wr-js) .wr-reserve:has(.wr-pick__list) {
		min-height: calc(var(--u) * 178);
	}
}

/* 公開トップ以外のページ */
.wr-body--sub .wr-header {
	position: relative;
	background: var(--wr-wine);
}

.wr-content {
	background: var(--wr-cream);
	color: var(--wr-ink);
}

.wr-content__inner {
	max-width: 760px;
	margin-inline: auto;
	padding: 44px var(--wr-gutter) 56px;
}

.wr-content__title {
	font-size: clamp(24px, 6vw, 32px);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.5;
}

.wr-content__subtitle {
	margin-top: 28px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
}

.wr-content__subtitle a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wr-content__date {
	margin-top: 6px;
	color: var(--wr-text);
	font-size: 13px;
}

.wr-content__body {
	margin-top: 18px;
	color: var(--wr-text);
	font-size: 15px;
	line-height: 1.95;
	overflow-wrap: anywhere;
}

.wr-content__body > * + * {
	margin-top: 1em;
}

.wr-content__body h2,
.wr-content__body h3 {
	margin-top: 1.8em;
	color: var(--wr-ink);
	font-weight: 500;
	line-height: 1.5;
}

.wr-content__body h2 {
	font-size: 21px;
}

.wr-content__body h3 {
	font-size: 18px;
}

.wr-content__body ul,
.wr-content__body ol {
	padding-left: 1.5em;
}

.wr-content__body ul {
	list-style: disc;
}

.wr-content__body ol {
	list-style: decimal;
}

.wr-content__body a {
	color: var(--wr-wine);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wr-content__body img {
	height: auto;
}

.wr-content__back {
	margin-top: 32px;
}

.wr-content .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}

.wr-content .nav-links a,
.wr-content .nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--wr-gold);
}

/* 公開トップ以外のページの PC ヘッダー：試作の配置のまま、ワイン色の帯にする */
@media (min-width: 1025px) {
	.wr-body--sub .wr-header {
		height: calc(var(--u) * 58);
	}
}

/* コースが1品だけのときは、つなぐ線を引かない */
.wr-course--single .wr-course__list::before {
	content: none;
}

/*
 * 店名（ヘッダー・フッター）：長い店名でも、メニューのボタンやナビを画面の外へ押し出さない。
 * 試作は1行に固定していた。短い店名のときは試作と同じ見た目のまま。
 */
.wr-logo {
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}

.wr-menu-button {
	flex: none;
}

.wr-footer__logo {
	max-width: 100%;
}

.wr-footer__logo-text {
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: center;
}

@media (min-width: 1025px) {
	/* ヘッダー：ナビの手前（幅 205）までで折り返す */
	.wr-logo {
		max-width: calc(var(--u) * 205);
	}

	/* フッター：高さが決まっているので折り返さず、ナビの手前（幅 120）で「…」にする。店名は全部、ヘッダーと店舗情報に出る */
	.wr-footer__logo {
		max-width: calc(var(--u) * 120);
	}

	.wr-footer__logo-text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

/* コースの欄の幕：左の幕は左端、右の幕は右端のひだを見せる（幕の画像は外側にひだがある） */
.wr-course__curtain--left {
	object-position: 0% 50%;
}

.wr-course__curtain--right {
	object-position: 100% 50%;
}