.wp-body {
	padding-top: 72px;
	padding-bottom: 104px;
	background: var(--c-white);
}

.wp-body__inner--narrow {
	width: min(760px, 100% - 64px);
}

/* --- news + store lists ------------------------------------ */

.wp-empty {
	padding: 48px 0;
	color: #6b6b6b;
	font-size: 15px;
	text-align: center;
}

/* The grid is a fixed 3x320px, so the empty notice has to span all of it. */
.stores__empty {
	grid-column: 1 / -1;
	padding: 32px 0;
	color: #6b6b6b;
	font-size: 15px;
}

/* --- article ------------------------------------------------ */

.wp-article__head {
	padding-bottom: 24px;
	border-bottom: 1px solid #e2e2e2;
	margin-bottom: 40px;
}

.wp-article__date {
	display: block;
	margin-bottom: 12px;
	color: var(--c-gold);
	font-family: var(--font-en);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.wp-article__title {
	margin: 0;
	color: var(--c-navy);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.6;
}

.wp-article__figure {
	margin: 0 0 40px;
	border-radius: 16px;
	overflow: hidden;
}

.wp-article__figure img {
	width: 100%;
	height: auto;
}

/* --- editor output ------------------------------------------ */

.wp-prose {
	color: var(--c-text);
	font-size: 16px;
	line-height: 2;
}

.wp-prose > * + * {
	margin-top: 1.6em;
}

.wp-prose h2 {
	padding-left: 14px;
	border-left: 4px solid var(--c-gold);
	color: var(--c-navy);
	font-size: 22px;
	line-height: 1.5;
}

.wp-prose h3 {
	color: var(--c-navy);
	font-size: 18px;
	line-height: 1.6;
}

.wp-prose a {
	color: var(--c-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wp-prose img {
	height: auto;
	border-radius: 12px;
}

.wp-prose ul,
.wp-prose ol {
	padding-left: 1.4em;
	list-style: revert;
}

.wp-prose blockquote {
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--c-menu-bg);
	margin-inline: 0;
	color: #555;
}

.wp-prose hr {
	border: 0;
	border-top: 1px solid #c4c4c4;
}

/* --- legal prose -------------------------------------------- */

/* Privacy policy and the like: the artboard sets these out as plain
   numbered clauses divided by full-width rules, not as the gold-barred
   headings the rest of the editor content uses. */

.wp-prose--legal h2 {
	padding-left: 0;
	border-left: 0;
	color: var(--c-text);
	font-size: 24px;
}

.wp-prose--legal hr {
	margin-top: 40px;
}

.wp-prose--legal hr + h2 {
	margin-top: 20px;
}

.wp-prose--legal h2 + p {
	margin-top: 20px;
}

@media (width <= 767px) {
	.wp-prose--legal h2 {
		font-size: 20px;
	}
}

/* --- pagination + post nav ---------------------------------- */

.wp-pagination {
	margin-top: 64px;
}

.wp-pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.wp-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border: 1px solid var(--c-navy);
	border-radius: 4px;
	color: var(--c-navy);
	font-family: var(--font-en);
	font-size: 14px;
	font-weight: 700;
	transition: background-color 0.2s, color 0.2s;
}

.wp-pagination .page-numbers:hover,
.wp-pagination .page-numbers.current {
	background: var(--c-navy);
	color: var(--c-white);
}

.wp-pagination .page-numbers.dots {
	border-color: transparent;
}

.wp-postnav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 72px;
	padding-top: 32px;
	border-top: 1px solid #e2e2e2;
}

.wp-postnav__link {
	color: var(--c-navy);
	font-size: 14px;
	font-weight: 500;
}

.wp-postnav__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wp-postnav__link--index {
	order: 1;
	margin-inline: auto;
	font-family: var(--font-en);
	font-weight: 700;
}

.wp-postnav__link--prev { order: 0; }
.wp-postnav__link--next { order: 2; }

.wp-actions {
	display: flex;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 48px;
}

/* Form completion — page-complete.php, shared by contact and recruit. */
.wp-complete {
	text-align: center;
}

.wp-complete__lead {
	color: var(--c-navy);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.6;
}

.wp-complete__text {
	margin-top: 24px;
	color: #4a4a4a;
	font-size: 15px;
	line-height: 2;
}

.wp-complete__text > * + * {
	margin-top: 16px;
}

@media (width<=767px) {
	.wp-complete__lead {
		font-size: 20px;
	}

	.wp-complete__text {
		text-align: left;
		font-size: 14px;
		line-height: 1.9;
	}
}

/* ===========================================================
   Store detail — Figma node 3344:635

   The artboard is 1440 wide with the content column running 240 → 1200,
   so this page uses a 960px container rather than the 1200px one the
   ABOUT and RECRUIT pages use.
   =========================================================== */

:root {
	--store-w: 960px;
}

.container--store {
	width: min(var(--store-w), 100% - 64px);
}

/* --- hero + reserve button ----------------------------------- */

.store-hero {
	position: relative;
}

/* Pinned to the bottom of the screen, flush right with no page gutter, and
   revealed by main.js once the reader scrolls past the hero. Below the drawer
   (60) and the hamburger (70). */
.store-reserve {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 40;
	transition: opacity 0.3s, transform 0.3s, visibility 0.3s, background-color 0.2s;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 320px;
	height: 52px;
	padding: 0 16px 0 24px;
	background: var(--c-navy);
	border: 1px solid var(--c-navy);
	color: var(--c-white);
}

/* main.js adds .is-reveal on init, so without JS the button simply stays
   visible rather than being hidden with no way to bring it back. */
.store-reserve.is-reveal {
	visibility: hidden;
	opacity: 0;
	transform: translateY(100%);
}

.store-reserve.is-reveal.is-visible {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.store-reserve:hover {
	background: var(--c-navy-strong);
}

.store-reserve__label {
	font-family: var(--font-jp);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
}

.store-reserve__rule {
	flex: none;
	width: 40px;
	height: 2px;
	background: var(--c-gold);
}

/* --- intro --------------------------------------------------- */

.store-intro {
	padding-top: 73px;
	padding-bottom: 99px;
}

.store-intro__inner {
	display: flex;
	align-items: flex-start;
	gap: 99px;
}

/* Deliberately not a grid: `height:100%` on a grid item sitting in an auto row
   is a cyclic percentage, so the row sized itself to the image's intrinsic
   height (408px at 675px wide) while the box stayed 180px — the photo spilled
   over the text below it. A plain block gives the image a definite height to
   resolve against, and object-fit already centres it. */
.store-intro__logo {
	flex: none;
	width: 320px;
	height: 240px;
}

.store-intro__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.store-intro__body {
	width: 464px;
	max-width: 100%;
}

/* With no logo the body would sit at the container edge; hold the artboard's
   659px text start so the column does not jump between stores. */
.store-intro__inner:not(:has(.store-intro__logo)) .store-intro__body {
	margin-left: 419px;
}

.store-sns__text {
	color: var(--c-navy);
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.store-intro__catch {
	margin: 0 0 20px;
	color: var(--c-navy);
	font-family: var(--font-jp);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
}

/* The artboard sets this in Jost, which the project does not load and which
   carries no Japanese glyphs — Noto Sans JP at the same size and tracking is
   what actually renders. */
.store-intro__name {
	position: relative;
	margin: 0 0 45px;
	padding-left: 22px;
	color: #000;
	font-family: var(--font-jp);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.1em;
}

/* Same navy tick as the INFORMATION labels: it sits on the inner edge and the
   name is indented past it, rather than hanging out into the page gutter. */
.store-intro__name::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--c-navy);
}

.store-intro__text {
	color: #000;
	font-family: var(--font-jp);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
}

.store-intro__text > * + * {
	margin-top: 1.6em;
}

.store-intro__text p {
	margin: 0;
}

.store-sns {
	display: flex;
	gap: 18px;
	margin-top: 32px;
}

.store-sns img {
	width: 37px;
	height: 37px;
	object-fit: contain;
	transition: opacity 0.2s;
}

.store-sns a:hover img {
	opacity: 0.6;
}

/* --- photo strip --------------------------------------------- */

/* PhotoMarquee reads its geometry from these; the artboard uses square
   320x200 tiles rather than the rounded 226x151 of the top page. */
.store-strip {
	--tile-w: 320px;
	--tile-h: 200px;
	--tile-gap: 30px;
	--tile-radius: 0px;
	--row-gap: 0px;
}

/* --- INFORMATION --------------------------------------------- */

.store-info {
	padding-top: 93px;
	padding-bottom: 143px;
}

.info {
	width: 858px;
	max-width: 100%;
	/* 24 + the row's 16px padding puts the first label 40px under the heading,
	   which is where the artboard has it. */
	margin: 24px 0 0;
}

.info__row {
	display: grid;
	grid-template-columns: 339px 1fr;
	padding: 16px 0;
	border-bottom: 1px solid #d9d9d9;
}

.info__label {
	position: relative;
	padding-left: 22px;
	color: #3c3c3c;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}

/* The 4px navy tick beside every label. Sized in em so it tracks the text
   rather than standing 6px taller than the line it belongs to. */
.info__label::before {
	content: '';
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 4px;
	height: 1.2em;
	background: var(--c-navy);
}

.info__value {
	margin: 0;
	color: #3c3c3c;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.05em;
}

.info__value a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* SNS / reservation rows: one link per line. */
.info__link {
	display: block;
	width: fit-content;
}

.info__link + .info__link {
	margin-top: 8px;
}

/* --- map ----------------------------------------------------- */

.store-map {
	height: 240px;
	margin-top: 52px;
	overflow: hidden;
}

.store-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.store-map--empty {
	display: grid;
	place-items: center;
	background: #afafaf;
}

.store-map--empty span {
	color: var(--c-white);
	font-family: var(--font-en);
	font-size: 44px;
	font-weight: 600;
}

/* The band is the last thing before the footer. */
.store > .marquee:last-child {
	margin-bottom: 102px;
}

/* --- responsive ---------------------------------------------- */

@media (max-width: 1023px) {
	.store-intro__inner {
		gap: 48px;
	}

	.info__row {
		grid-template-columns: 240px 1fr;
	}
}

@media (max-width: 767px) {
	.wp-body {
		padding-top: 48px;
		padding-bottom: 72px;
	}

	.wp-article__title { font-size: 22px; }

	.wp-postnav {
		justify-content: center;
	}

	.wp-postnav__link--index {
		order: 3;
		width: 100%;
		text-align: center;
	}

	/* 320px of button has nowhere to go on a phone — span the full width. */
	.store-reserve {
		left: 0;
		width: 100%;
		height: auto;
		min-height: 52px;
		padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) 24px;
	}

	/* Room under the footer so the pinned bar never covers its last row. */
	.ld-page:has(.store-reserve) {
		padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
	}

	.store-intro {
		padding-top: 48px;
		padding-bottom: 56px;
	}

	.store-intro__inner {
		flex-direction: column;
		gap: 32px;
	}

	.store-intro__inner:not(:has(.store-intro__logo)) .store-intro__body {
		margin-left: 0;
	}

	/* Stacked, so the text column follows the container instead of holding the
	   artboard's 464px — which left dead space to its right above ~600px. */
	.store-intro__body {
		width: 100%;
	}

	/* Full inner width, natural aspect — contain inside a fixed 180px box just
	   letterboxed the photo with dead space either side. */
	.store-intro__logo {
		width: 100%;
		height: auto;
	}

	.store-intro__logo img {
		height: auto;
	}

	.store-intro__name {
		margin-bottom: 24px;
		font-size: 22px;
	}

	.store-info {
		padding-top: 56px;
		padding-bottom: 72px;
	}

	/* Stack the label above the value — a 339px label column leaves nothing. */
	.info__row {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.info__label,
	.info__value {
		font-size: 14px;
	}

	.store-map {
		height: 200px;
	}

	.store-map--empty span {
		font-size: 32px;
	}

	.store > .marquee:last-child {
		margin-bottom: 56px;
	}
}

/* ===========================================================
   Contact form

   The field markup lives in the Contact Form 7 form body in
   wp-admin, so these selectors match what that body already
   emits (.entry-form*) rather than the other way round. The
   .wpcf7-* rules cover what the plugin adds by itself:
   validation tips, the spinner, the response line.
   =========================================================== */

.entry-form {
	margin-top: 48px;
	font-family: var(--font-jp);
}

.entry-form__row {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 20px 0;
	border-bottom: 1px solid #e2e8ee;
}

.entry-form__row:first-child {
	border-top: 1px solid #e2e8ee;
}

/* Set on the textarea row, where a centred label would float away
   from the first line of the field. */
.entry-form__row.is-align-top {
	align-items: flex-start;
}

.entry-form__label {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	width: 190px;
}

.entry-form__label label {
	color: var(--c-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.tag {
	flex: none;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.tag--required {
	background: var(--c-navy);
	color: var(--c-white);
}

.tag--optional {
	border: 1px solid #b6c2ce;
	color: #6b7a89;
}

.entry-form__input {
	flex: 1;
	min-width: 0;
}

.entry-form__input input[type="text"],
.entry-form__input input[type="tel"],
.entry-form__input input[type="email"],
.entry-form__input input[type="date"],
.entry-form__input select,
.entry-form__input textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #c9d4de;
	border-radius: 0;
	background: var(--c-white);
	color: var(--c-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
	transition: border-color 0.2s, box-shadow 0.2s;
	-webkit-appearance: none;
	appearance: none;
}

.entry-form__input input[type="date"] {
	width: auto;
	min-width: 220px;
}

/* appearance:none above takes the native arrow with it, so draw one back on. */
.entry-form__input select {
	padding-right: 40px;
	background-image: linear-gradient(45deg, transparent 50%, var(--c-navy) 50%),
		linear-gradient(135deg, var(--c-navy) 50%, transparent 50%);
	background-position: right 20px center, right 14px center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.entry-form__input input:focus,
.entry-form__input select:focus,
.entry-form__input textarea:focus {
	outline: none;
	border-color: var(--c-navy);
	box-shadow: 0 0 0 3px #0e437726;
}

.entry-form__input ::-moz-placeholder {
	color: #9aa7b4;
}

.entry-form__input ::placeholder {
	color: #9aa7b4;
}

.entry-form__input textarea {
	min-height: 168px;
	resize: vertical;
}

.entry-form__consent {
	margin-top: 32px;
	color: var(--c-text);
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
}

.entry-form__consent a {
	color: var(--c-navy);
	text-decoration: underline;
}

.entry-form__consent .wpcf7-list-item {
	margin: 12px 0 0;
}

.entry-form__consent .wpcf7-list-item-label {
	margin-left: 6px;
	font-weight: 700;
}

.entry-form__submit {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

/* Matches .btn--navy; the submit button is an <input>, so it cannot
   carry the .btn markup the rest of the site uses. */
.entry-form__submit input[type="submit"] {
	width: 320px;
	max-width: 100%;
	height: 52px;
	border: 1px solid var(--c-navy);
	border-radius: 0;
	background: var(--c-navy);
	color: var(--c-white);
	font-family: inherit;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s;
	-webkit-appearance: none;
	appearance: none;
}

.entry-form__submit input[type="submit"]:hover {
	background: #0a355f;
}

.entry-form__submit input[type="submit"]:disabled {
	opacity: 0.6;
	cursor: default;
}

.wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #c0392b;
	font-size: 13px;
	line-height: 1.5;
}

.wpcf7-spinner {
	margin: 0 0 0 12px;
}

.wpcf7 .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--c-navy);
	color: var(--c-navy);
	font-size: 14px;
	line-height: 1.6;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #c0392b;
	color: #c0392b;
}

/* The editor-only hint under an empty page. */
.wp-empty--note {
	padding: 0 0 48px;
	color: var(--c-navy);
	font-size: 14px;
}

@media (width<=767px) {
	.entry-form {
		margin-top: 32px;
	}

	.entry-form__row,
	.entry-form__row.is-align-top {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 16px 0;
	}

	.entry-form__label {
		width: auto;
	}

	.entry-form__submit input[type="submit"] {
		width: 100%;
		font-size: 16px;
	}
}