/*
 * TIMEGRAPH 和食店 公開トップ。1024px 以下は横書きの読み物、1025px 以上は完成図（幅 804px）の寸法を --u で写す。
 * 承認済みの静的試作（prototypes/restaurant-japanese-product/css/japanese.css）と同じ見た目にする。
 * 試作から変えたのは、WordPress の出力に合わせた選択子、JavaScript なしのとき、件数が完成図と違うときの組み方だけ。
 */
:root {
	--jr-washi: #ece7de;
	--jr-washi-pale: #f4f0e9;
	--jr-sumi: #1f1e1c;
	--jr-sumi-soft: #282725;
	--jr-text: #4b463f;
	--jr-on-dark: #efeae1;
	--jr-on-dark-soft: #cfc9bf;
	--jr-shu: #96231f;
	--jr-shu-soft: #a4342f;
	--jr-kin: #a08a5f;
	--jr-line: #bdb29d;
	--jr-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif CJK JP", "Yu Mincho", "YuMincho", serif;
	--jr-gothic: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
	--jr-gutter: clamp(20px, 6vw, 56px);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--jr-washi) url("../images/deco-washi-grain.png");
	color: var(--jr-text);
	font-family: var(--jr-mincho);
	font-size: 15px;
	line-height: 1.9;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--jr-shu);
	outline-offset: 2px;
}

[hidden] {
	display: none !important;
}

.jr-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.jr-page {
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	container-type: inline-size;
}

.jr-page figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 縦書きは短い見出しだけ。両側の細い線まで含めて一つの部品 */
.jr-vertical {
	position: relative;
	display: inline-block;
	padding: 2px 13px;
	color: var(--jr-sumi);
	font-size: 25px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.3;
	writing-mode: vertical-rl;
	text-orientation: upright;
	white-space: nowrap;
	box-shadow: -1px 0 0 var(--jr-line), 1px 0 0 var(--jr-line);
}

.jr-vertical--seal::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 20px;
	margin-inline-start: 8px;
	background: url("../images/deco-seal.svg") center / contain no-repeat;
}

.jr-body {
	font-size: 14.5px;
	letter-spacing: 0.06em;
	line-height: 1.95;
	word-break: auto-phrase;
}

.jr-seal {
	display: block;
}

/* 最初の画面 */
.jr-top {
	position: relative;
	display: grid;
	grid-template-columns: 38% minmax(0, 1fr);
	min-height: 112cqw;
}

.jr-top__panel {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	gap: 10px;
	padding: 72px 8px 24px;
	overflow: hidden;
}

.jr-top__sprig {
	position: absolute;
	top: 0;
	left: 0;
	width: 92px;
	height: auto;
	opacity: 0.7;
	pointer-events: none;
}

.jr-name {
	position: relative;
	color: var(--jr-sumi);
	font-size: clamp(30px, 9.4cqw, 44px);
	font-weight: 500;
	letter-spacing: 0.1em;
	word-spacing: -0.56em;
	line-height: 1.2;
	white-space: nowrap;
	writing-mode: vertical-rl;
	text-orientation: upright;
}

.jr-tagline {
	position: relative;
	margin-top: 40px;
	color: var(--jr-text);
	font-size: 14px;
	letter-spacing: 0.12em;
	line-height: 1.2;
	white-space: nowrap;
	writing-mode: vertical-rl;
	text-orientation: upright;
}

.jr-top__seal {
	display: none;
}

.jr-nav {
	position: absolute;
	top: 60px;
	right: 0;
	display: none;
}

.jr-top__panel:has(.jr-nav.is-open) {
	overflow: visible;
}

.jr-nav.is-open {
	position: fixed;
	top: 60px;
	right: 12px;
	left: 12px;
	z-index: 12;
	display: grid;
	padding: 6px 16px;
	background: var(--jr-sumi);
	box-shadow: 0 10px 24px rgb(20 18 16 / 30%);
}

.jr-nav a {
	display: flex;
	align-items: center;
	min-height: 48px;
	border-bottom: 1px solid rgb(239 234 225 / 18%);
	color: var(--jr-on-dark);
	font-size: 15px;
	letter-spacing: 0.1em;
}

.jr-top__photo {
	position: relative;
	overflow: hidden;
	background: var(--jr-sumi);
}

.jr-top {
	--jr-focus: var(--jr-image-focus-sp, 74% 70%);
	--jr-video-focus: var(--jr-video-focus-sp, 72% 50%);
}

.jr-top__photo > picture {
	display: contents;
}

.jr-top__photo > img,
.jr-top__photo > picture > img,
.jr-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--jr-focus);
}

.jr-hero__video {
	object-position: var(--jr-video-focus);
}

.jr-top__message {
	position: absolute;
	top: 76px;
	right: 14px;
	color: #f6f1e7;
	font-size: 13.5px;
	letter-spacing: 0.1em;
	line-height: 1.75;
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-shadow: 0 0 8px rgb(20 12 8 / 80%);
}

.jr-tab {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: grid;
	justify-items: center;
	gap: 4px;
	width: 44px;
	padding: 8px 0;
	border: 1px solid #c75f58;
	background: var(--jr-shu);
	color: #fff;
	font-size: 14px;
	letter-spacing: 0.12em;
	line-height: 1.2;
}

.jr-tab svg {
	width: 24px;
	height: 24px;
}

.jr-tab span {
	writing-mode: vertical-rl;
	text-orientation: upright;
}

.jr-tab i {
	font-style: normal;
}

.jr-menu {
	position: absolute;
	top: 8px;
	right: 12px;
	z-index: 11;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid rgb(239 234 225 / 55%);
	border-radius: 2px;
	background: var(--jr-sumi);
	color: var(--jr-on-dark);
	font: inherit;
	font-size: 13px;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.jr-menu__bars {
	display: block;
	width: 18px;
	height: 12px;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

/* 旬の便り */
.jr-season {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	padding: 40px var(--jr-gutter);
}

.jr-season__lead {
	font-size: 14.5px;
	letter-spacing: 0.06em;
	line-height: 1.9;
	word-break: auto-phrase;
}

.jr-season__list {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 10px;
}

.jr-season__card {
	position: relative;
}

.jr-season__card figure {
	aspect-ratio: 132 / 96;
	overflow: hidden;
}

.jr-season__card h3 {
	margin-top: 6px;
	color: var(--jr-sumi);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
}

.jr-season__card--shu h3 {
	color: var(--jr-shu-soft);
}

.jr-season__card p {
	color: #6c5147;
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

/* 本日の献立 */
.jr-kondate {
	padding: 36px var(--jr-gutter) 0;
}

.jr-kondate__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px;
	align-items: center;
}

.jr-kondate__note {
	font-size: 14.5px;
	letter-spacing: 0.06em;
	line-height: 1.85;
}

.jr-kondate__price {
	margin-top: 8px;
	color: #775a2c;
	font-size: 22px;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

.jr-kondate__tax {
	font-size: 13px;
}

.jr-kondate__list {
	margin-top: 22px;
	border-top: 1px solid var(--jr-line);
}

.jr-kondate__list li {
	display: grid;
	grid-template-columns: 5em minmax(0, 1fr);
	gap: 8px;
	align-items: baseline;
	padding: 9px 0;
	border-bottom: 1px solid var(--jr-line);
}

.jr-kondate__list strong {
	color: var(--jr-sumi);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.jr-kondate__list span {
	font-size: 14.5px;
	letter-spacing: 0.04em;
}

.jr-kondate__photo {
	margin: 24px calc(var(--jr-gutter) * -1) 0;
	aspect-ratio: 16 / 11;
	overflow: hidden;
}

/* お料理 */
.jr-craft {
	padding: 44px var(--jr-gutter);
}

.jr-craft__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px 20px;
	align-items: center;
}

.jr-craft__lead {
	font-size: 17px;
	letter-spacing: 0.06em;
	line-height: 1.8;
	color: var(--jr-sumi);
}

.jr-craft__text {
	grid-column: 1 / -1;
	margin-top: 12px;
}

.jr-craft__list {
	display: grid;
	gap: 28px;
	margin-top: 26px;
}

.jr-step figure {
	aspect-ratio: 16 / 11;
	overflow: hidden;
}

.jr-step h3 {
	margin-top: 12px;
	padding-left: 10px;
	border-left: 1px solid var(--jr-shu);
	color: var(--jr-sumi);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.5;
}

.jr-step p {
	margin-top: 6px;
	font-size: 14.5px;
	letter-spacing: 0.05em;
	line-height: 1.85;
}

/* お席 */
.jr-seats {
	padding: 44px 0 0;
	background: var(--jr-sumi);
	color: var(--jr-on-dark);
}

.jr-seats__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	padding: 0 var(--jr-gutter) 28px;
}

.jr-seats .jr-vertical,
.jr-shop .jr-vertical {
	color: var(--jr-on-dark);
}

.jr-seats__lead {
	font-size: 15.5px;
	letter-spacing: 0.06em;
	line-height: 1.85;
	color: var(--jr-on-dark);
}

.jr-seat figure {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

/* 見本のカウンター席の写真は左側が PC の見出しの下地なので、1024px 以下では右側を拡大して見せる */
.jr-seat.is-zoom img {
	transform: scale(1.55);
	transform-origin: 100% 50%;
}

.jr-seat__caption {
	padding: 14px var(--jr-gutter) 26px;
}

.jr-seat h3 {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.5;
}

.jr-seat p {
	margin-top: 4px;
	color: var(--jr-on-dark-soft);
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 1.8;
	word-break: auto-phrase;
}

/* おもてなし */
.jr-care__copy {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px 20px;
	align-items: center;
	padding: 44px var(--jr-gutter) 28px;
}

.jr-care__lead {
	color: var(--jr-sumi);
	font-size: 16px;
	letter-spacing: 0.04em;
	line-height: 1.85;
	word-break: auto-phrase;
}

.jr-care__text {
	grid-column: 1 / -1;
	margin-top: 12px;
}

.jr-care__photo {
	aspect-ratio: 16 / 11;
	overflow: hidden;
}

/* ご予約方法 */
.jr-reserve {
	padding: 40px var(--jr-gutter);
}

.jr-reserve__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px;
	align-items: center;
}

.jr-reserve__lead {
	font-size: 15px;
	letter-spacing: 0.05em;
	line-height: 1.85;
	word-break: auto-phrase;
}

.jr-reserve__card {
	margin-top: 22px;
	padding: 22px 16px;
	border-radius: 4px;
	background: var(--jr-washi-pale);
	text-align: center;
}

.jr-reserve__card h2 {
	color: var(--jr-sumi);
	font-size: 23px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.5;
}

.jr-reserve__note {
	margin-top: 6px;
	color: var(--jr-sumi);
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 1.7;
	word-break: auto-phrase;
}

.jr-reserve__buttons {
	display: grid;
	gap: 10px;
	margin-top: 14px;
}

.jr-way {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 54px;
	padding: 0 14px;
	border: 1px solid var(--jr-shu);
	border-radius: 4px;
	background: var(--jr-shu);
	color: #fff;
	font: inherit;
	font-size: 15px;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.jr-way b {
	font-weight: 400;
}

.jr-way--tel {
	background: transparent;
	color: var(--jr-shu);
}

.jr-pick__list {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.jr-pick__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	border-bottom: 1px solid var(--jr-line);
	color: var(--jr-sumi);
	font-size: 14.5px;
	letter-spacing: 0.04em;
}

.jr-reserve__photo {
	margin: 22px calc(var(--jr-gutter) * -1) -40px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

/* 店舗案内 */
.jr-shop {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px;
	padding: 40px var(--jr-gutter);
	background: var(--jr-sumi-soft);
	color: var(--jr-on-dark);
}

.jr-shop .jr-vertical {
	align-self: start;
}

.jr-shop__info {
	font-size: 14px;
	letter-spacing: 0.03em;
	line-height: 1.8;
	color: var(--jr-on-dark-soft);
	min-width: 0;
}

.jr-shop__name {
	color: var(--jr-on-dark);
	font-size: 17px;
	letter-spacing: 0.08em;
}

.jr-shop__hours {
	margin-top: 8px;
}

.jr-shop__hours dt {
	color: var(--jr-on-dark);
}

.jr-shop__map-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-width: 150px;
	min-height: 46px;
	margin-top: 14px;
	border: 1px solid var(--jr-on-dark-soft);
	border-radius: 3px;
	color: var(--jr-on-dark);
	font-size: 14.5px;
	letter-spacing: 0.08em;
}

.jr-shop__map-link b {
	font-weight: 400;
}

.jr-shop__photo,
.jr-shop__map {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	margin-inline: calc(var(--jr-gutter) * -1);
}

.jr-shop__map {
	margin: -20px 0 0;
	aspect-ratio: 218 / 165;
}

/* 追尾 CTA（1024px 以下） */
.jr-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 20;
	padding: 8px var(--jr-gutter) calc(8px + env(safe-area-inset-bottom));
	background: var(--jr-sumi);
	box-shadow: 0 -6px 18px rgb(20 18 16 / 28%);
}

.jr-sticky a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	background: var(--jr-shu);
	color: #fff;
	font-size: 15px;
	letter-spacing: 0.1em;
}

/* 営業時間の備考（設定したときだけ） */
.jr-shop__note {
	margin-top: 6px;
	font-size: 13px;
}

/* プライバシーポリシーなどのページへのリンク（設定したときだけ） */
.jr-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 24px;
	padding: 6px var(--jr-gutter) 10px;
	background: var(--jr-sumi-soft);
	box-shadow: 0 0 0 100vmax var(--jr-sumi-soft);
	clip-path: inset(0 -100vmax);
	border-top: 1px solid rgb(239 234 225 / 14%);
}

.jr-legal a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--jr-on-dark-soft);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* JavaScript が動かないとき：開閉できないメニューのボタンを隠し、予約サイトの一覧は開いたままにする */
html:not(.jr-js) .jr-menu,
html:not(.jr-js) [data-jr-pick-toggle] {
	display: none !important;
}

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

html:not(.jr-js) .jr-reserve__buttons:not(:has(a)) {
	display: none;
}

html:not(.jr-js) .jr-pick:not(:has(a)) {
	display: none;
}

/* タブレット（600〜1024px）：左右に組み、余白を残す */
@media (min-width: 600px) and (max-width: 1024px) {
	.jr-top {
		grid-template-columns: 30% minmax(0, 1fr);
		min-height: 62cqw;
	}

	.jr-name {
		font-size: 42px;
	}

	.jr-top {
		--jr-focus: var(--jr-image-focus-tablet, 22% 55%);
		--jr-video-focus: var(--jr-video-focus-tablet, 58% 50%);
	}

	.jr-season__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.jr-kondate {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 28px;
	}

	.jr-kondate__head {
		grid-column: 1;
	}

	.jr-kondate__list {
		grid-column: 1;
	}

	.jr-kondate__photo {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin: 0 calc(var(--jr-gutter) * -1) 0 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.jr-craft__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.jr-seats__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.jr-seat__caption {
		padding: 12px 14px 22px;
	}

	.jr-care {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 46%;
		align-items: stretch;
	}

	.jr-care__photo {
		height: 100%;
		aspect-ratio: auto;
	}

	.jr-reserve {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 24px;
		align-items: center;
	}

	.jr-reserve__head {
		grid-column: 1;
	}

	.jr-reserve__card {
		grid-column: 2;
		margin-top: 0;
	}

	.jr-reserve__photo {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 5;
	}

	.jr-shop {
		grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
	}

	.jr-shop__photo {
		grid-column: 3;
		grid-row: 1;
		margin: 0 calc(var(--jr-gutter) * -1) 0 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.jr-shop__map {
		grid-column: 1 / -1;
		aspect-ratio: 3;
		margin-top: 0;
		background: #e9e5dd;
	}

	.jr-page .jr-shop__map img {
		object-fit: contain;
	}
}

/* PC：完成図（幅 804px）の 1px を --u として写す */
@media (min-width: 1025px) {
	.jr-page {
		--u: calc(100cqw / 804);
		background: var(--jr-washi) url("../images/deco-washi-grain.png");
	}

	.jr-sticky,
	.jr-menu {
		display: none !important;
	}

	.jr-vertical {
		padding: calc(var(--u) * 2) calc(var(--u) * 10);
		font-size: calc(var(--u) * 23);
		letter-spacing: 0.1em;
		line-height: calc(var(--u) * 28);
	}

	.jr-vertical--seal::after {
		width: calc(var(--u) * 13);
		height: calc(var(--u) * 17);
		margin-inline-start: calc(var(--u) * 8);
	}

	.jr-body {
		font-size: max(12.5px, calc(var(--u) * 9.5));
		font-weight: 500;
		letter-spacing: 0.08em;
		line-height: calc(var(--u) * 17);
		white-space: nowrap;
	}

	/* 最初の画面（高さ 375） */
	.jr-top {
		display: block;
		height: calc(var(--u) * 375);
		min-height: 0;
	}

	.jr-top__panel {
		position: absolute;
		inset: 0 auto 0 0;
		display: block;
		width: calc(var(--u) * 186);
		padding: 0;
		overflow: visible;
	}

	.jr-top__sprig {
		top: calc(var(--u) * 14);
		width: calc(var(--u) * 90);
		opacity: 1;
	}

	.jr-name {
		position: absolute;
		top: calc(var(--u) * 22);
		left: calc(var(--u) * 124);
		font-size: calc(var(--u) * 27);
		letter-spacing: 0.04em;
		line-height: calc(var(--u) * 34);
	}

	.jr-tagline {
		position: absolute;
		top: calc(var(--u) * 66);
		left: calc(var(--u) * 92);
		margin: 0;
		font-size: calc(var(--u) * 12.4);
		font-weight: 500;
		letter-spacing: 0.12em;
		line-height: calc(var(--u) * 16);
	}

	.jr-top__seal {
		position: absolute;
		top: calc(var(--u) * 210);
		left: calc(var(--u) * 134);
		display: block;
		width: calc(var(--u) * 15);
		height: calc(var(--u) * 19);
	}

	.jr-nav {
		position: absolute;
		top: calc(var(--u) * 256);
		right: auto;
		left: calc(var(--u) * 21);
		display: flex;
		flex-direction: row-reverse;
		gap: 0;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.jr-nav a {
		justify-content: flex-start;
		align-items: center;
		width: calc(var(--u) * 30.4);
		min-width: 44px;
		min-height: max(44px, calc(var(--u) * 80));
		padding: 0;
		border: 0;
		box-shadow: -1px 0 0 rgb(189 178 157 / 40%);
		color: var(--jr-sumi);
		font-size: max(11.5px, calc(var(--u) * 11.4));
		font-weight: 500;
		letter-spacing: 0.08em;
		line-height: 1.25;
		writing-mode: vertical-rl;
		text-orientation: upright;
	}

	.jr-top__photo {
		position: absolute;
		top: 0;
		left: calc(var(--u) * 186);
		width: calc(var(--u) * 618);
		height: calc(var(--u) * 375);
	}

	.jr-top {
		--jr-focus: var(--jr-image-focus-pc, 50% 50%);
		--jr-video-focus: var(--jr-video-focus-pc, 50% 50%);
	}

	.jr-top__message {
		top: calc(var(--u) * 45);
		right: calc(var(--u) * 67);
		font-size: max(12px, calc(var(--u) * 11.2));
		font-weight: 500;
		letter-spacing: 0.1em;
		line-height: calc(var(--u) * 23.4);
		text-shadow: none;
	}

	.jr-tab {
		top: calc(var(--u) * 212);
		right: calc(var(--u) * 22);
		bottom: auto;
		align-content: start;
		width: calc(var(--u) * 48);
		height: calc(var(--u) * 133);
		padding: calc(var(--u) * 9) 0 0;
		gap: calc(var(--u) * 7);
		font-size: calc(var(--u) * 12.6);
		line-height: 1.2;
	}

	.jr-tab svg {
		width: calc(var(--u) * 22);
		height: calc(var(--u) * 22);
	}

	/* 旬の便り（y 375〜533） */
	.jr-season {
		position: relative;
		display: block;
		height: calc(var(--u) * 158);
		padding: 0;
	}

	.jr-season .jr-vertical {
		position: absolute;
		top: calc(var(--u) * 28);
		left: calc(var(--u) * 26);
		padding-inline: calc(var(--u) * 12);
	}

	.jr-season__lead {
		position: absolute;
		top: calc(var(--u) * 56);
		left: calc(var(--u) * 100);
		font-size: max(12px, calc(var(--u) * 10));
		line-height: calc(var(--u) * 19);
		white-space: nowrap;
	}

	.jr-season__list {
		position: absolute;
		top: calc(var(--u) * 13);
		left: calc(var(--u) * 244);
		grid-template-columns: repeat(4, calc(var(--u) * 131));
		gap: 0 calc(var(--u) * 5.6);
	}

	.jr-season__card figure {
		height: calc(var(--u) * 128);
		aspect-ratio: auto;
		mask-image: linear-gradient(#000 62%, transparent 92%);
	}

	.jr-season__card h3 {
		position: absolute;
		top: calc(var(--u) * 88);
		left: calc(var(--u) * 12);
		margin: 0;
		font-size: calc(var(--u) * 19);
		line-height: calc(var(--u) * 26);
	}

	.jr-season__card p {
		position: absolute;
		top: calc(var(--u) * 115);
		left: calc(var(--u) * 12);
		font-size: max(11.5px, calc(var(--u) * 9.8));
		line-height: calc(var(--u) * 16);
		white-space: nowrap;
	}

	/* 本日の献立（y 533〜803） */
	.jr-kondate {
		position: relative;
		height: calc(var(--u) * 270);
		padding: 0;
	}

	.jr-kondate__head {
		position: absolute;
		top: calc(var(--u) * 16);
		left: calc(var(--u) * 42);
		display: block;
	}

	.jr-kondate .jr-vertical {
		display: inline-block;
		padding-block: calc(var(--u) * 0);
		padding-inline: calc(var(--u) * 12);
		font-size: calc(var(--u) * 22);
		letter-spacing: 0.04em;
		box-shadow: -1px 0 0 var(--jr-line);
	}

	.jr-kondate__note {
		margin-top: calc(var(--u) * 8);
		font-weight: 500;
		font-size: max(12px, calc(var(--u) * 9.6));
		letter-spacing: 0.08em;
		line-height: calc(var(--u) * 18);
		white-space: nowrap;
	}

	.jr-kondate__price {
		margin-top: calc(var(--u) * 13);
		font-size: calc(var(--u) * 16);
		line-height: calc(var(--u) * 24);
	}

	.jr-kondate__tax {
		font-size: max(11.5px, calc(var(--u) * 9));
		line-height: calc(var(--u) * 14);
	}

	.jr-kondate__list {
		position: absolute;
		top: calc(var(--u) * 26);
		left: calc(var(--u) * 186);
		display: flex;
		flex-direction: row-reverse;
		width: calc(var(--u) * 343);
		height: calc(var(--u) * 180);
		margin: 0;
		border: 0;
	}

	.jr-kondate__list li {
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		gap: calc(var(--u) * 14);
		padding: 0;
		border: 0;
		border-right: 1px solid rgb(189 178 157 / 55%);
	}

	.jr-kondate__list li:first-child {
		border-right: 0;
	}

	.jr-kondate__list strong,
	.jr-kondate__list span {
		line-height: 1.2;
		writing-mode: vertical-rl;
		text-orientation: upright;
	}

	.jr-kondate__list strong {
		min-height: calc(var(--u) * 52);
		font-size: calc(var(--u) * 13.2);
		font-weight: 700;
		letter-spacing: 0.04em;
	}

	.jr-kondate__list span {
		font-size: max(11.5px, calc(var(--u) * 10.6));
		font-weight: 500;
		letter-spacing: 0.1em;
	}

	.jr-kondate__photo {
		position: absolute;
		top: calc(var(--u) * 2);
		right: 0;
		width: calc(var(--u) * 274);
		height: calc(var(--u) * 268);
		margin: 0;
		aspect-ratio: auto;
		mask-image: linear-gradient(90deg, transparent, #000 18%);
	}

	/* お料理（y 803〜1078） */
	.jr-craft {
		position: relative;
		height: calc(var(--u) * 275);
		padding: 0;
	}

	.jr-craft__head {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: calc(var(--u) * 240);
	}

	.jr-craft__head .jr-vertical {
		position: absolute;
		top: calc(var(--u) * 28);
		left: calc(var(--u) * 28);
		padding-inline: calc(var(--u) * 12);
	}

	.jr-craft__lead {
		position: absolute;
		top: calc(var(--u) * 60);
		left: calc(var(--u) * 105);
		font-size: max(12px, calc(var(--u) * 10.6));
		line-height: calc(var(--u) * 20);
		white-space: nowrap;
	}

	.jr-craft__text {
		position: absolute;
		top: calc(var(--u) * 157);
		left: calc(var(--u) * 44);
		margin: 0;
	}

	.jr-craft__list {
		position: absolute;
		top: calc(var(--u) * 17);
		left: calc(var(--u) * 242);
		grid-template-columns: calc(var(--u) * 161) calc(var(--u) * 155) calc(var(--u) * 165);
		gap: 0 calc(var(--u) * 32);
		margin: 0;
	}

	.jr-step {
		position: relative;
	}

	.jr-step + .jr-step::before {
		content: "";
		position: absolute;
		top: calc(var(--u) * 74);
		left: calc(var(--u) * -19);
		width: calc(var(--u) * 8);
		height: calc(var(--u) * 8);
		border-top: 1px solid var(--jr-shu);
		border-right: 1px solid var(--jr-shu);
		transform: rotate(45deg) scale(1.6);
	}

	.jr-step figure {
		height: calc(var(--u) * 157);
		aspect-ratio: auto;
	}

	.jr-step h3 {
		margin-top: calc(var(--u) * 8);
		padding-left: calc(var(--u) * 15);
		font-size: calc(var(--u) * 13.4);
		line-height: calc(var(--u) * 20);
	}

	.jr-step p {
		margin-top: calc(var(--u) * 4);
		padding-left: calc(var(--u) * 15);
		font-size: max(11.5px, calc(var(--u) * 9.6));
		font-weight: 500;
		letter-spacing: 0.07em;
		line-height: calc(var(--u) * 16.8);
		white-space: nowrap;
	}

	/* お席（y 1078〜1317） */
	.jr-seats {
		position: relative;
		height: calc(var(--u) * 239);
		padding: 0;
		box-shadow: 0 0 0 100vmax var(--jr-sumi);
		clip-path: inset(0 -100vmax);
	}

	.jr-seats__head {
		position: absolute;
		inset: 0 auto auto 0;
		z-index: 2;
		display: block;
		padding: 0;
	}

	.jr-seats__head .jr-vertical {
		position: absolute;
		top: calc(var(--u) * 24);
		left: calc(var(--u) * 28);
		padding-inline: calc(var(--u) * 12);
	}

	.jr-seats__lead {
		position: absolute;
		top: calc(var(--u) * 124);
		left: calc(var(--u) * 30);
		font-size: max(11.5px, calc(var(--u) * 9.8));
		letter-spacing: 0.1em;
		line-height: calc(var(--u) * 18);
		white-space: nowrap;
	}

	.jr-seats__list {
		position: absolute;
		inset: 0;
		display: grid;
		grid-template-columns: calc(var(--u) * 328) calc(var(--u) * 250) calc(var(--u) * 226);
	}

	.jr-seat {
		position: relative;
		height: 100%;
	}

	.jr-seat:nth-child(1) {
		z-index: 2;
	}

	.jr-seat:nth-child(2) {
		z-index: 1;
	}

	.jr-seat figure {
		height: 100%;
		aspect-ratio: auto;
	}

	.jr-seat.is-zoom img {
		transform: none;
	}

	.jr-seat__caption {
		position: absolute;
		inset: 0;
		padding: 0;
	}

	.jr-seat h3 {
		position: absolute;
		top: calc(var(--u) * 139);
		display: flex;
		align-items: center;
		width: calc(var(--u) * 23);
		height: calc(var(--u) * 83);
		background: var(--jr-washi-pale);
		color: var(--jr-sumi);
		font-size: calc(var(--u) * 10.4);
		font-weight: 600;
		letter-spacing: 0.04em;
		line-height: calc(var(--u) * 23);
		writing-mode: vertical-rl;
		text-orientation: upright;
		justify-content: center;
	}

	.jr-seat:nth-child(1) h3 {
		left: calc(var(--u) * 190);
	}

	.jr-seat:nth-child(2) h3 {
		left: calc(var(--u) * 53);
	}

	.jr-seat:nth-child(3) h3 {
		left: calc(var(--u) * 26);
	}

	.jr-seat p {
		position: absolute;
		top: calc(var(--u) * 190);
		margin: 0;
		color: var(--jr-on-dark);
		font-size: max(11px, calc(var(--u) * 8.8));
		letter-spacing: 0.08em;
		line-height: calc(var(--u) * 15);
		white-space: nowrap;
	}

	.jr-seat:nth-child(1) p {
		left: calc(var(--u) * 222);
	}

	.jr-seat:nth-child(2) p {
		left: calc(var(--u) * 88);
	}

	.jr-seat:nth-child(3) p {
		left: calc(var(--u) * 59);
	}

	/* おもてなし（y 1317〜1560） */
	.jr-care {
		position: relative;
		height: calc(var(--u) * 243);
	}

	.jr-care__copy {
		position: absolute;
		inset: 0 auto auto 0;
		z-index: 1;
		display: block;
		padding: 0;
	}

	.jr-care__copy .jr-vertical {
		position: absolute;
		top: calc(var(--u) * 22);
		left: calc(var(--u) * 30);
		padding-inline: calc(var(--u) * 12);
	}

	.jr-care__lead {
		position: absolute;
		top: calc(var(--u) * 47);
		left: calc(var(--u) * 105);
		font-size: max(12px, calc(var(--u) * 10.6));
		letter-spacing: 0.08em;
		line-height: calc(var(--u) * 19.6);
		white-space: nowrap;
	}

	.jr-care__text {
		position: absolute;
		top: calc(var(--u) * 111);
		left: calc(var(--u) * 111);
		margin: 0;
		line-height: calc(var(--u) * 18);
	}

	.jr-care__photo {
		position: absolute;
		top: 0;
		right: 0;
		width: calc(var(--u) * 464);
		height: calc(var(--u) * 243);
		aspect-ratio: auto;
		mask-image: linear-gradient(90deg, transparent, #000 16%);
	}

	/* ご予約方法（y 1560〜1735） */
	.jr-reserve {
		position: relative;
		min-height: calc(var(--u) * 175);
		padding: 0;
	}

	.jr-reserve__head {
		position: absolute;
		inset: 0 auto auto 0;
		z-index: 1;
		display: block;
	}

	.jr-reserve__head .jr-vertical {
		position: absolute;
		top: calc(var(--u) * 22);
		left: calc(var(--u) * 28);
		padding-inline: calc(var(--u) * 12);
	}

	.jr-reserve__lead {
		position: absolute;
		top: calc(var(--u) * 61);
		left: calc(var(--u) * 105);
		font-size: max(12px, calc(var(--u) * 10.2));
		letter-spacing: 0.08em;
		line-height: calc(var(--u) * 19);
		white-space: nowrap;
	}

	.jr-reserve__card {
		position: relative;
		z-index: 2;
		width: calc(var(--u) * 291);
		min-height: calc(var(--u) * 143);
		margin: 0 0 0 calc(var(--u) * 270);
		top: calc(var(--u) * 17);
		padding: calc(var(--u) * 14) calc(var(--u) * 17) calc(var(--u) * 16);
		background: rgb(250 248 243 / 92%);
	}

	.jr-reserve:has(.jr-pick__list:not([hidden])),
	html:not(.jr-js) .jr-reserve:has(.jr-pick__list) {
		min-height: calc(var(--u) * 270);
	}

	.jr-reserve__card h2 {
		font-size: calc(var(--u) * 18);
		line-height: calc(var(--u) * 28);
	}

	.jr-reserve__note {
		margin-top: calc(var(--u) * 3);
		font-size: max(11.5px, calc(var(--u) * 10.2));
		line-height: calc(var(--u) * 16);
		/* 見本の文は1行に収まる。設定で長い文にしたときは折り返す */
		white-space: normal;
	}

	.jr-reserve__buttons {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: calc(var(--u) * 9);
		margin-top: calc(var(--u) * 16);
	}

	.jr-way {
		gap: calc(var(--u) * 6);
		min-height: max(44px, calc(var(--u) * 43));
		padding: 0;
		font-size: max(11.5px, calc(var(--u) * 9.6));
		letter-spacing: 0.04em;
		white-space: nowrap;
	}

	.jr-pick__link {
		min-height: 44px;
		font-size: max(12px, calc(var(--u) * 9.6));
	}

	.jr-reserve__photo {
		position: absolute;
		top: calc(var(--u) * 2);
		right: 0;
		width: calc(var(--u) * 242);
		height: calc(var(--u) * 173);
		margin: 0;
		aspect-ratio: auto;
		mask-image: linear-gradient(90deg, transparent, #000 14%);
	}

	/* 店舗案内（y 1735〜1957） */
	.jr-shop {
		position: relative;
		display: block;
		/* 店舗情報は流し込みにして、営業時間の行が増えたら欄ごと伸ばす（見本の内容では完成図の高さ 222 のまま） */
		min-height: calc(var(--u) * 222);
		padding: calc(var(--u) * 30) 0 calc(var(--u) * 16) calc(var(--u) * 111);
		box-shadow: 0 0 0 100vmax var(--jr-sumi-soft);
		clip-path: inset(0 -100vmax);
	}

	.jr-shop .jr-vertical {
		position: absolute;
		top: calc(var(--u) * 14);
		left: calc(var(--u) * 28);
		padding-inline: calc(var(--u) * 12);
		box-shadow: -1px 0 0 rgb(239 234 225 / 40%), 1px 0 0 rgb(239 234 225 / 40%);
	}

	.jr-shop__info {
		position: relative;
		font-size: max(11.5px, calc(var(--u) * 9.6));
		letter-spacing: 0.05em;
		line-height: calc(var(--u) * 17);
		white-space: nowrap;
	}

	.jr-shop__name {
		margin-bottom: calc(var(--u) * 5);
		font-size: calc(var(--u) * 12);
		line-height: calc(var(--u) * 20);
	}

	.jr-shop__hours {
		margin-top: calc(var(--u) * 5);
	}

	.jr-shop__hours div {
		display: grid;
		grid-template-columns: calc(var(--u) * 52) auto;
	}

	.jr-shop__hours dt {
		color: var(--jr-on-dark-soft);
	}

	.jr-shop__hours dd {
		color: var(--jr-on-dark);
	}

	.jr-shop__map-link {
		display: flex;
		width: calc(var(--u) * 142);
		min-width: 0;
		min-height: max(44px, calc(var(--u) * 31));
		margin-top: calc(var(--u) * 11);
		font-size: max(12px, calc(var(--u) * 10.4));
	}

	.jr-shop__photo {
		position: absolute;
		top: calc(var(--u) * 2);
		left: calc(var(--u) * 330);
		width: calc(var(--u) * 215);
		height: calc(var(--u) * 220);
		margin: 0;
		aspect-ratio: auto;
		mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
	}

	.jr-shop__map {
		position: absolute;
		top: calc(var(--u) * 23);
		left: calc(var(--u) * 558);
		width: calc(var(--u) * 218);
		height: calc(var(--u) * 165);
		margin: 0;
		aspect-ratio: auto;
	}
}

/*
 * PC で一覧の件数が完成図より多いとき（front-page.php が --many を付ける）。
 * 完成図の位置を基準に、同じ大きさのカードを次の段へ折り返し、欄の高さを中身に合わせて伸ばす。
 * 件数が完成図以下のときは、ここは使わない（完成図の配置のまま、空いた位置は空ける）。
 */
@media (min-width: 1025px) {
	.jr-shop__note {
		margin-top: calc(var(--u) * 4);
		font-size: max(11px, calc(var(--u) * 8.8));
		line-height: calc(var(--u) * 15);
	}

	.jr-legal {
		gap: 0 calc(var(--u) * 20);
		padding: calc(var(--u) * 2) 0 calc(var(--u) * 4);
	}

	.jr-legal a {
		font-size: max(11.5px, calc(var(--u) * 9));
	}

	/* 旬の便り：4枚ずつ */
	.jr-season--many {
		height: auto;
		min-height: calc(var(--u) * 158);
		padding: calc(var(--u) * 13) 0 calc(var(--u) * 17) calc(var(--u) * 244);
	}

	.jr-season--many .jr-season__list {
		position: static;
		gap: calc(var(--u) * 12) calc(var(--u) * 5.6);
	}

	/* 本日の献立：13品以上は横書きの2列にする */
	.jr-kondate--many {
		height: auto;
		min-height: calc(var(--u) * 270);
		padding: calc(var(--u) * 26) calc(var(--u) * 290) calc(var(--u) * 26) calc(var(--u) * 186);
	}

	.jr-kondate--many .jr-kondate__list {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 calc(var(--u) * 16);
		width: auto;
		height: auto;
		border-top: 1px solid var(--jr-line);
	}

	.jr-kondate--many .jr-kondate__list li,
	.jr-kondate--many .jr-kondate__list li:first-child {
		display: grid;
		grid-template-columns: 5em minmax(0, 1fr);
		gap: calc(var(--u) * 6);
		align-items: baseline;
		padding: calc(var(--u) * 5) 0;
		border: 0;
		border-bottom: 1px solid var(--jr-line);
	}

	.jr-kondate--many .jr-kondate__list strong,
	.jr-kondate--many .jr-kondate__list span {
		min-height: 0;
		writing-mode: horizontal-tb;
	}

	.jr-kondate--many .jr-kondate__list strong {
		font-size: max(12px, calc(var(--u) * 10.4));
	}

	.jr-kondate--many .jr-kondate__list span {
		font-size: max(11.5px, calc(var(--u) * 9.4));
		letter-spacing: 0.04em;
	}

	/* お料理：3つずつ */
	.jr-craft--many {
		height: auto;
		min-height: calc(var(--u) * 275);
		padding: calc(var(--u) * 17) 0 calc(var(--u) * 24) calc(var(--u) * 242);
	}

	.jr-craft--many .jr-craft__list {
		position: static;
		gap: calc(var(--u) * 20) calc(var(--u) * 32);
	}

	.jr-craft--many .jr-step:nth-child(3n + 1)::before {
		display: none;
	}

	/* お席：3つずつ。2段目からも1段目と同じ幅・同じ文字の位置 */
	.jr-seats--many {
		height: auto;
	}

	.jr-seats--many .jr-seats__list {
		position: relative;
		grid-auto-rows: calc(var(--u) * 239);
	}

	.jr-seats--many .jr-seat:nth-child(3n + 1) h3 {
		left: calc(var(--u) * 190);
	}

	.jr-seats--many .jr-seat:nth-child(3n + 2) h3 {
		left: calc(var(--u) * 53);
	}

	.jr-seats--many .jr-seat:nth-child(3n) h3 {
		left: calc(var(--u) * 26);
	}

	.jr-seats--many .jr-seat:nth-child(3n + 1) p {
		left: calc(var(--u) * 222);
	}

	.jr-seats--many .jr-seat:nth-child(3n + 2) p {
		left: calc(var(--u) * 88);
	}

	.jr-seats--many .jr-seat:nth-child(3n) p {
		left: calc(var(--u) * 59);
	}

	/* 完成図と同じく、左の列の説明は右隣の写真の上へはみ出してよいので、左の列ほど手前に重ねる */
	.jr-seats--many .jr-seat:nth-child(3n + 1) {
		z-index: 2;
	}

	.jr-seats--many .jr-seat:nth-child(3n + 2) {
		z-index: 1;
	}
}

/*
 * 見本の地図（文字の無い線画）の、印の横の店名。画像の座標（幅 218 × 高さ 165）に合わせて重ねる。
 * --jr-map-w は地図の画像が実際に出ている幅、--jr-map-x はその左端。タブレットでは画像を枠の中央に収めるので計算し直す。
 */
.jr-shop__map--sample {
	container-type: inline-size;
	--jr-map-w: 100cqw;
	--jr-map-x: 0px;
	--jr-map-y: 0px;
}

.jr-shop__map-name {
	position: absolute;
	top: calc(var(--jr-map-y) + var(--jr-map-w) * 59.4 / 218);
	left: calc(var(--jr-map-x) + var(--jr-map-w) * 140 / 218);
	max-width: calc(var(--jr-map-w) * 76 / 218);
	color: #9d2527;
	font-family: var(--jr-mincho);
	font-size: calc(var(--jr-map-w) * 10 / 218);
	font-weight: 400;
	letter-spacing: calc(var(--jr-map-w) * 0.6 / 218);
	line-height: 1;
	word-break: keep-all;
	pointer-events: none;
}

/* PC は枠が absolute のまま。1024px 以下だけ、店名の位置の基準にする */
@media (max-width: 1024px) {
	.jr-shop__map--sample {
		position: relative;
	}
}

@media (min-width: 600px) and (max-width: 1024px) {
	.jr-shop__map--sample {
		--jr-map-w: calc(100cqw / 3 * 218 / 165);
		--jr-map-x: calc((100cqw - var(--jr-map-w)) / 2);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}