/*
Theme Name: LIBERTY DINING
Description: LIBERTY DINING corporate site. Built from the Nuxt prerender output.
Version: 1.0.0
Text Domain: liberty-dining
*/

/* Bundled from the Nuxt build, with the build's scoped-style attributes
   (data-v-*) stripped — selectors are plain classes. Three families were
   renamed to keep that collision-free: the store card is .shop-card*, the
   recruit hero is .recruit-hero*, and the page shell is .ld-page (WordPress
   puts a bare `page` class on <body>). Hand edits live at the bottom. */

.marquee {
	gap: var(--row-gap, 24px);
	flex-direction: column;
	display: flex;
}
.marquee__row {
	height: var(--tile-h, 151px);
	overflow: hidden;
}
.marquee__track {
	will-change: transform;
	width: max-content;
	animation: marquee-scroll-a95f56ac var(--duration) linear infinite;
	display: flex;
}
.marquee__track--reverse {
	animation-name: marquee-scroll-reverse-a95f56ac;
}
.marquee__tile {
	width: var(--tile-w, 226px);
	height: var(--tile-h, 151px);
	margin-right: var(--tile-gap, 38px);
	border-radius: var(--tile-radius, 24px);
	flex: none;
	overflow: hidden;
}
.marquee__tile img {
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
	height: 100%;
}
@keyframes marquee-scroll-a95f56ac {
	0% {
		transform: translateZ(0);
	}
	to {
		transform: translate3d(var(--shift), 0, 0);
	}
}
@keyframes marquee-scroll-reverse-a95f56ac {
	0% {
		transform: translate3d(var(--shift), 0, 0);
	}
	to {
		transform: translateZ(0);
	}
}
@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		animation: none;
		transform: translate(-16%);
	}
}
.hero {
	--tile-w: 226px;
	--tile-h: 151px;
	--tile-gap: 38px;
	--row-gap: 24px;
	--tile-radius: 24px;
	background: #08203a;
	border-bottom-left-radius: 160px;
	height: 769px;
	position: relative;
	overflow: hidden;
}
.hero__marquee {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.hero__rows {
	position: absolute;
	top: -41px;
	left: 0;
	right: 0;
}
.hero__overlay {
	background: linear-gradient(90deg, #0e437799 0, #1a7cdd80 45%, #fff6);
	position: absolute;
	inset: 0;
}
.hero__inner {
	padding-top: 240px;
	position: relative;
}
.hero__title {
	font-family: var(--font-en);
	color: var(--c-white);
	flex-direction: column;
	margin: 0;
	font-size: 88px;
	font-weight: 700;
	line-height: 1.1;
	display: flex;
}
.hero__title em {
	color: var(--c-gold);
	font-style: normal;
}
.hero__rule {
	background: var(--c-gold);
	width: 360px;
	max-width: 100%;
	height: 4px;
	margin-top: 25px;
	display: block;
}
.hero__lead {
	font-family: var(--font-jp);
	color: var(--c-white);
	margin-top: 22px;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.35;
}
@media (width<=1023px) {
	.hero {
		border-bottom-left-radius: 96px;
	}
	.hero__title {
		font-size: 64px;
	}
}
@media (width<=767px) {
	.hero {
		--tile-w: 168px;
		--tile-h: 112px;
		--tile-gap: 20px;
		--row-gap: 16px;
		--tile-radius: 16px;
		border-bottom-left-radius: 56px;
		height: auto;
		min-height: 560px;
		padding-bottom: 80px;
	}
	.hero__rows {
		top: -30px;
	}
	.hero__inner {
		padding-top: 160px;
	}
	.hero__title {
		font-size: 40px;
	}
	.hero__rule {
		width: 220px;
		margin-top: 20px;
	}
	.hero__lead {
		font-size: 22px;
	}
}
.btn {
	border: 1px solid var(--c-navy);
	width: 320px;
	max-width: 100%;
	height: 52px;
	font-family: var(--font-jp);
	justify-content: space-between;
	align-items: center;
	padding-inline: 24px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	transition:
		background-color 0.25s,
		color 0.25s;
	display: flex;
}
.btn--navy {
	background: var(--c-navy);
	color: var(--c-white);
}
.btn--outline {
	background: var(--c-white);
	color: var(--c-navy);
}
.btn__rule {
	background: var(--c-gold);
	flex: none;
	width: 40px;
	height: 2px;
	transition: width 0.25s;
}
.btn:hover .btn__rule,
.recruit-hero__cta:hover .btn__rule {
	width: 56px;
}
.btn--navy:hover {
	background: #0a355f;
}
.btn--outline:hover {
	background: #eef4fa;
}
@media (width<=767px) {
	.btn {
		width: 100%;
		padding-inline: 20px;
		font-size: 16px;
	}
}
.about {
	z-index: 0;
	background: var(--c-gray-bg);
	margin-top: -154px;
	padding-top: 234px;
	padding-bottom: 90px;
	position: relative;
}
.about__lead {
	margin-top: 40px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
}
.about__body,
.about__lead {
	font-family: var(--font-jp);
	color: var(--c-navy);
}
.about__body {
	margin-top: 22px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
}
.about__cta {
	margin-top: 68px;
}
@media (width<=767px) {
	.about {
		margin-top: -60px;
		padding-top: 140px;
		padding-bottom: 64px;
	}
	.about__lead {
		margin-top: 28px;
		font-size: 24px;
	}
	.about__cta {
		margin-top: 40px;
	}
}
.news {
	background: var(--c-white);
	padding-top: 66px;
	padding-bottom: 100px;
}
.news__list {
	margin-top: 40px;
}
.news__item + .news__item {
	margin-top: 8px;
}
.news__link {
	border-bottom: 1px solid var(--c-navy);
	align-items: center;
	height: 52px;
	transition: background-color 0.2s;
	display: flex;
}
.news__link:hover {
	background: #f7f9fb;
}
.news__bar {
	background: var(--c-navy);
	flex: none;
	width: 4px;
	height: 52px;
}
.news__date {
	width: 154px;
	color: var(--c-navy);
	flex: none;
	margin-left: 30px;
	font-weight: 500;
}
.news__date,
.news__title {
	font-family: var(--font-jp);
	font-size: 16px;
	line-height: 1;
}
.news__title {
	min-width: 0;
	color: var(--c-text);
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	font-weight: 400;
	overflow: hidden;
}
.news__cta {
	margin-top: 40px;
}
@media (width<=767px) {
	.news {
		padding-top: 56px;
		padding-bottom: 64px;
	}
	.news__link {
		align-items: flex-start;
		height: auto;
		padding-block: 14px;
	}
	.news__bar {
		height: 46px;
	}
	.news__date {
		width: auto;
		margin-left: 16px;
	}
	.news__title {
		white-space: normal;
		flex-basis: 100%;
		margin-top: 10px;
		margin-left: 20px;
		line-height: 1.5;
	}
	.news__link {
		flex-wrap: wrap;
	}
}
.stores {
	background: var(--c-gray-bg);
	padding-top: 60px;
	padding-bottom: 71px;
}
.stores__grid {
	grid-template-columns: repeat(3, 320px);
	gap: 32px 34.5px;
	margin-top: 40px;
	display: grid;
}
.shop-card {
	aspect-ratio: 320/240;
	border-left: 4px solid var(--c-navy-strong);
	background: #493b3b;
	position: relative;
	overflow: hidden;
}
.shop-card__overlay {
	z-index: 2;
	position: absolute;
	inset: 0;
}
.shop-card__overlay:focus-visible {
	outline: 2px solid var(--c-white);
	outline-offset: -4px;
}
.shop-card__img {
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform 0.5s;
}
.shop-card:hover .shop-card__img,
.shop-card:focus-within .shop-card__img {
	transform: scale(1.05);
}
.shop-card__shade {
	background: #00000080;
	position: absolute;
	inset: 0;
}
.shop-card__body {
	position: absolute;
	bottom: 11.5px;
	left: 22px;
	right: 16px;
}
.shop-card__name {
	letter-spacing: 1.8px;
	font-size: 18px;
}
.shop-card__cta,
.shop-card__name {
	font-family: var(--font-jp);
	color: var(--c-white);
	font-weight: 700;
	line-height: 1;
}
.shop-card__name {
	line-height: 1.6;
}
.shop-card__cta {
	border: 1px solid var(--c-white);
	letter-spacing: 1.4px;
	align-items: center;
	gap: 18px;
	margin-top: 12.5px;
	padding: 12px 25px;
	font-size: 14px;
	transition: background-color 0.25s;
	display: inline-flex;
}
.shop-card__cta img {
	width: 16.5px;
	height: 1.5px;
	transition: transform 0.25s;
}
.shop-card:hover .shop-card__cta,
.shop-card:focus-within .shop-card__cta {
	background: #ffffff29;
}
.shop-card:hover .shop-card__cta img,
.shop-card:focus-within .shop-card__cta img {
	transform: translate(4px);
}
@media (width<=1120px) {
	.stores__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (width<=900px) {
	.stores__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (width<=767px) {
	.stores {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.stores__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.shop-card__name {
		font-size: 16px;
	}
}
.recruit {
	--tile-w: 320px;
	--tile-h: 214px;
	--tile-gap: 30px;
	--row-gap: 30px;
	--tile-radius: 32px;
	background: var(--c-white);
	height: 570px;
	position: relative;
	overflow: hidden;
}
.recruit__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.recruit__stage {
	transform-origin: 50%;
	width: 130%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-11deg);
}
.recruit__inner {
	padding-top: 142px;
	position: relative;
}
.panel {
	background: var(--c-navy-plate);
	border-bottom-left-radius: 64px;
	height: 267px;
	padding: 32px 25px 0 103px;
}
.panel__row {
	align-items: flex-start;
	gap: 32px;
	margin-top: 28px;
	display: flex;
}
.panel__body {
	font-family: var(--font-jp);
	color: var(--c-white);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
}
.panel__cta {
	margin-top: 6px;
	margin-left: auto;
}
@media (width<=1023px) {
	.panel {
		padding-left: 48px;
	}
}
@media (width<=767px) {
	.recruit {
		--tile-w: 220px;
		--tile-h: 147px;
		--tile-gap: 20px;
		--row-gap: 20px;
		--tile-radius: 22px;
		height: auto;
		padding-block: 64px;
	}
	.recruit__stage {
		width: 170%;
	}
	.recruit__inner {
		padding-top: 0;
	}
	.panel {
		border-bottom-left-radius: 40px;
		height: auto;
		padding: 32px 24px 40px;
	}
	.panel__row {
		flex-direction: column;
		gap: 28px;
	}
	.panel__body {
		font-size: 16px;
	}
	.panel__cta {
		margin-left: 0;
	}
}
.ld-page {
	position: relative;
	overflow-x: clip;
}
.ld-page .hero,
.ld-page .recruit-hero {
	z-index: 1;
}
:root {
	--c-navy: #0e4377;
	--c-navy-strong: #00447b;
	/* 写真の上に敷く半透明ネイビー。トップの採用セクションと採用ページFVで共有する。 */
	--c-navy-plate: #0e4377b8;
	--c-gold: #e8a33d;
	--c-gold-soft: #ebaf55;
	--c-white: #fff;
	--c-gray-bg: #f4f4f4;
	--c-menu-bg: #dce8f2;
	--c-recruit-bg: #9cc8df;
	--c-text: #2a2a2a;
	--content-w: 1024px;
	--footer-w: 1278px;
	--page-w: 1200px;
	--font-en: "Figtree", "Helvetica Neue", Arial, sans-serif;
	--font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	--header-h: 92px;
}
*,
:after,
:before {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	background: var(--c-white);
	color: var(--c-text);
	font-family: var(--font-jp);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
	margin: 0;
}
body.is-menu-open {
	overflow: hidden;
}
img {
	max-width: 100%;
	display: block;
}
a {
	text-decoration: none;
}
a,
button {
	color: inherit;
}
button {
	font: inherit;
	cursor: pointer;
	background: 0 0;
	border: 0;
	padding: 0;
}
p,
ul {
	margin: 0;
}
ul {
	padding: 0;
	list-style: none;
}
.container {
	width: min(var(--content-w), 100% - 64px);
	margin-inline: auto;
}
.container--footer {
	width: min(var(--footer-w), 100% - 64px);
}
.container--page {
	width: min(var(--page-w), 100% - 64px);
}

.header {
	z-index: 50;
	height: var(--header-h);
	position: absolute;
	inset: 0 0 auto;
}
/* The logo is fixed, so a white logo disappears over light sections. This bar
   rides along behind it and fades in once the page is scrolled. */
.header:before {
	content: "";
	background: linear-gradient(90deg, #0e437799 0, #1a7cdd80 45%, #fff6);
	height: var(--header-h);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s;
	position: fixed;
	inset: 0 0 auto;
}
.header.is-scrolled:before {
	opacity: 1;
}
/* Fixed and as tall as the header, so the logo centres on the bar at any
   --header-h instead of riding a hand-tuned `top`. */
.header__logo {
	align-items: center;
	width: 280px;
	height: var(--header-h);
	display: flex;
	position: fixed;
	top: 0;
	left: 16px;
}
.header__logo img {
	-o-object-fit: contain;
	object-fit: contain;
	-o-object-position: left center;
	object-position: left center;
	width: 100%;
	height: auto;
	display: block;
}
.hamburger {
	--size: 72px;
	z-index: 70;
	background: var(--c-navy);
	border-radius: 48px;
	place-items: center;
	width: var(--size);
	height: var(--size);
	display: grid;
	position: fixed;
	top: calc((var(--header-h) - var(--size)) / 2);
	right: 20px;
}
.hamburger__bars,
.hamburger__close {
	grid-area: 1/1;
	transition:
		opacity 0.25s,
		transform 0.25s;
}
.hamburger__bars {
	flex-direction: column;
	gap: 7.83px;
	display: flex;
}
.hamburger__bars span {
	background: var(--c-white);
	width: 32px;
	height: 2px;
	display: block;
}
.hamburger__bars.is-hidden {
	opacity: 0;
	transform: rotate(-45deg);
}
.hamburger__close {
	opacity: 0;
	width: 30px;
	height: 30px;
	transform: rotate(45deg);
}
.hamburger__close.is-visible {
	opacity: 1;
	transform: rotate(0);
}
.scrim {
	z-index: 55;
	background: 0 0;
	position: fixed;
	inset: 0;
}
.drawer {
	z-index: 60;
	background: var(--c-menu-bg);
	border-bottom-left-radius: 64px;
	width: 572px;
	max-width: 100%;
	height: 612px;
	max-height: 100dvh;
	padding: 78px 0 0 63px;
	position: fixed;
	top: 0;
	right: 0;
	overflow-y: auto;
}
.drawer__list {
	flex-direction: column;
	gap: 34.5px;
	display: flex;
}
.drawer__link {
	align-items: center;
	gap: 23px;
	width: max-content;
	display: flex;
}
.drawer__bar {
	background: var(--c-navy);
	flex: none;
	width: 7px;
	height: 50px;
	transition: background-color 0.25s;
}
.drawer__link:hover .drawer__bar {
	background: var(--c-gold);
}
.drawer__text {
	flex-direction: column;
	gap: 6px;
	display: flex;
}
.drawer__en {
	font-family: var(--font-en);
	color: var(--c-navy);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
}
.drawer__jp {
	font-family: var(--font-jp);
	color: var(--c-gold-soft);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transition: color 0.25s;
}
.drawer__link:hover .drawer__jp {
	color: var(--c-gold);
}
.drawer-enter-active,
.drawer-leave-active {
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.3s;
}
.drawer-enter-from,
.drawer-leave-to {
	opacity: 0;
	transform: translate(24px);
}
.scrim-enter-active,
.scrim-leave-active {
	transition: opacity 0.3s;
}
.scrim-enter-from,
.scrim-leave-to {
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	.drawer-enter-active,
	.drawer-leave-active,
	.hamburger__bars,
	.hamburger__close,
	.scrim-enter-active,
	.scrim-leave-active {
		transition-duration: 0.01ms;
	}
}
@media (width<=767px) {
	/* Set on .header, not :root — the logo, hamburger and the bar all inherit
	   it from here, so the SP header shrinks as one piece. */
	.header {
		--header-h: 72px;
	}
	.header__logo {
		width: 200px;
		left: 16px;
	}
	.hamburger {
		--size: 44px;
		right: 14px;
	}
	.hamburger__bars {
		gap: 5px;
	}
	.hamburger__bars span {
		width: 20px;
	}
	.hamburger__close {
		width: 20px;
		height: 20px;
	}
	.drawer {
		border-bottom-left-radius: 0;
		width: 100%;
		height: 100dvh;
		padding: 110px 0 40px 40px;
	}
}
.footer {
	background: var(--c-navy);
	color: var(--c-white);
	font-family: var(--font-en), var(--font-jp);
	padding-top: 55px;
	padding-bottom: 50px;
}
.footer__inner {
	display: flex;
}
.footer__brand {
	flex: none;
	width: 685px;
	padding-top: 6px;
}
.footer__logo {
	width: 266px;
	height: 43px;
	display: block;
}
.footer__logo img {
	-o-object-fit: contain;
	object-fit: contain;
	-o-object-position: left center;
	object-position: left center;
	width: 100%;
	height: 100%;
}
.footer__contact {
	margin-top: 81px;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.7;
}
.footer__nav {
	flex: none;
	width: 195px;
}
.footer__nav a {
	white-space: nowrap;
	height: 48px;
	font-size: 16px;
	font-weight: 800;
	line-height: 40px;
	transition: color 0.2s;
	display: block;
}
.footer__nav a:hover {
	color: var(--c-gold);
}
@media (width<=1120px) {
	.footer__brand {
		flex: 1;
		width: auto;
	}
}
@media (width<=767px) {
	.footer {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.footer__inner {
		flex-direction: column;
		gap: 32px;
	}
	.footer__brand {
		padding-top: 0;
	}
	.footer__contact {
		margin-top: 32px;
	}
	.footer__nav {
		width: 100%;
	}
	.footer__nav a {
		height: 40px;
		line-height: 40px;
	}
}

.heading {
	align-items: flex-end;
	gap: 28px;
	display: flex;
}
.heading__en {
	font-family: var(--font-en);
	letter-spacing: 0.01em;
	margin: 0;
	font-size: 64px;
	font-weight: 800;
	line-height: 1.2;
}
.heading--navy .heading__en {
	color: var(--c-navy);
}
.heading--white .heading__en {
	color: var(--c-white);
}
.heading__jp {
	font-family: var(--font-jp);
	color: var(--c-gold);
	white-space: nowrap;
	margin-bottom: 13px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}
@media (width<=767px) {
	.heading {
		gap: 16px;
	}
	.heading__en {
		font-size: 40px;
	}
	.heading__jp {
		margin-bottom: 8px;
		font-size: 14px;
	}
}

.page-hero {
	background: #0d1e2f;
	height: 280px;
	position: relative;
	overflow: hidden;
}
.page-hero__bg {
	opacity: 0.5;
	background-position: 0.07% 44.96%;
	background-repeat: no-repeat;
	background-size: 146.07% 517.51%;
	position: absolute;
	inset: 0;
}
.page-hero__scrim {
	background: linear-gradient(#0e437766 0, #0d1e2fb3);
	position: absolute;
	inset: 0;
}
.page-hero__inner {
	padding-top: 170px;
	position: relative;
}
@media (width<=767px) {
	.page-hero {
		height: 200px;
	}
	.page-hero__inner {
		padding-top: 112px;
	}
}
.index {
	background: var(--c-white);
	width: 296px;
	padding-top: 3px;
}
.index__item {
	justify-content: space-between;
	align-items: center;
	height: 78px;
	padding-inline: 26px 22px;
	transition:
		background-color 0.2s,
		color 0.2s;
	display: flex;
}
.index li + li .index__item {
	border-top: 1px solid #ccc;
}
.index__text {
	flex-direction: column;
	gap: 8px;
	display: flex;
}
.index__en {
	font-family: var(--font-en);
	letter-spacing: 1.2px;
	color: var(--c-navy-strong);
	font-size: 12px;
}
.index__en,
.index__jp {
	font-weight: 700;
	line-height: 1;
}
.index__jp {
	font-family: var(--font-jp);
	letter-spacing: 1.6px;
	color: #493b3b;
	font-size: 16px;
}
.index__rule {
	background: var(--c-gold);
	flex: none;
	width: 40px;
	height: 2px;
	transition: width 0.2s;
}
.index__item.is-active {
	background: var(--c-navy);
}
.index__item.is-active .index__en,
.index__item.is-active .index__jp {
	color: var(--c-white);
}
.index__item:not(.is-active):hover {
	background: #eef4fa;
}
@media (width<=1023px) {
	.index {
		width: 100%;
	}
	.index ul {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		display: grid;
	}
	.index li + li .index__item {
		border-top: 0;
	}
	.index__item {
		border-bottom: 1px solid #ccc;
		height: 64px;
	}
}
.card {
	background: var(--c-white);
	border-top: 4px solid var(--c-navy);
	padding: 54px 35px 0;
	position: relative;
	overflow: hidden;
}
@media (width>=1024px) {
	.card {
		min-height: var(--card-min-h, auto);
	}
}
.card__body {
	align-items: center;
	gap: 0;
	display: flex;
}
.card__head {
	flex: none;
	width: 296px;
}
.card__aside {
	flex: 1;
	min-width: 0;
}
.card__label {
	font-family: var(--font-en);
	letter-spacing: 1.4px;
	color: var(--c-gold-soft);
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	display: flex;
}
.card__label-rule {
	background: var(--c-navy-strong);
	width: 18px;
	height: 1px;
}
.card__title {
	font-family: var(--font-jp);
	letter-spacing: 0.1em;
	color: #493b3b;
	margin: 16px 0 0;
	font-weight: 700;
	line-height: 1;
}
.card__watermark {
	font-family: var(--font-en);
	letter-spacing: 6.4px;
	color: #0e43771a;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	font-size: 64px;
	font-weight: 700;
	line-height: 54px;
	position: absolute;
	bottom: 0;
	right: 0;
}
@media (width<=900px) {
	.card {
		padding: 54px 24px 24px;
	}
	.card__body {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.card__head {
		width: auto;
	}
	.card__aside {
		width: 100%;
	}
	.card__watermark {
		font-size: 44px;
		line-height: 38px;
	}
}
.values {
	grid-template-columns: repeat(5, 1fr);
	gap: 11.2px;
	max-width: 769px;
	display: grid;
}
.value {
	padding-top: 10px;
	position: relative;
}
.value__badge {
	background: var(--c-navy-strong);
	width: 76px;
	height: 20px;
	font-family: var(--font-en);
	color: var(--c-white);
	white-space: nowrap;
	border-radius: 50px;
	place-items: center;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	display: grid;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%);
}
.value__card {
	background: var(--c-white);
	border: 1px solid #ccc;
	flex-direction: column;
	align-items: center;
	height: 135px;
	padding: 21px 8px 0;
	display: flex;
}
.value__icon {
	-o-object-fit: contain;
	object-fit: contain;
	width: 30px;
	height: 30px;
}
.value__title {
	font-family: var(--font-jp);
	letter-spacing: 0.8px;
	color: var(--c-navy-strong);
	margin-top: 23px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}
.value__text {
	font-family: var(--font-jp);
	letter-spacing: 0.5px;
	text-align: center;
	color: #000;
	margin-top: 13px;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.6;
}
@media (width<=900px) {
	.values {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		max-width: none;
	}
}
.table {
	margin: 0;
}
.table,
.table__row {
	flex-direction: column;
	gap: 14px;
	display: flex;
}
.table__row {
	border-bottom: 1px solid #ccc;
	padding-bottom: 14px;
}
.table__cells {
	align-items: flex-start;
	display: flex;
}
.table__label {
	flex: none;
	width: 148px;
	font-size: 16px;
}
.table__label,
.table__value {
	font-family: var(--font-jp);
	color: #000;
	font-weight: 500;
	line-height: 1.6;
}
.table__value {
	letter-spacing: 0.7px;
	margin: 0;
	padding-top: 2px;
	font-size: 14px;
}
.table__line {
	display: block;
}
.table__map {
	-o-object-fit: cover;
	object-fit: cover;
	background: #e5e5e5;
	width: 765px;
	max-width: 100%;
	height: 259px;
}
@media (width<=767px) {
	.table__cells {
		flex-direction: column;
		gap: 6px;
	}
	.table__label {
		width: auto;
		font-size: 14px;
		font-weight: 700;
	}
	.table__value {
		padding-top: 0;
		font-size: 13px;
	}
}
.body {
	background: var(--c-gray-bg);
	padding-top: 72px;
	padding-bottom: 164px;
}
.body__inner {
	align-items: flex-start;
	gap: 23px;
	display: flex;
}
.body__index {
	flex: none;
	position: sticky;
	top: 24px;
}
.body__cards {
	flex-direction: column;
	flex: 1;
	gap: 24px;
	min-width: 0;
	display: flex;
}
.company {
	margin-top: 34px;
}
.statement {
	font-family: var(--font-jp);
	letter-spacing: 0.1em;
	color: var(--c-gold-soft);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5;
}
.statement--lg {
	font-size: 32px;
	line-height: 1;
}
.lead {
	font-family: var(--font-jp);
	color: #2b2925;
	font-size: 14px;
	font-weight: 500;
	line-height: 2;
}
.values {
	margin-top: 40px;
	margin-bottom: 62px;
}
.company__table {
	margin-top: 32px;
	margin-bottom: 44px;
}
@media (width<=1023px) {
	.body__inner {
		flex-direction: column;
		gap: 24px;
	}
	.body__index {
		width: 100%;
		position: static;
	}
}
@media (width<=767px) {
	.body {
		padding-top: 40px;
		padding-bottom: 80px;
	}
	.statement {
		font-size: 22px;
	}
	.statement--lg {
		font-size: 24px;
	}
}
.ph {
	background: #656565;
	place-items: center;
	width: 100%;
	height: 100%;
	display: grid;
}
.ph--dim {
	background: #656565cc;
}
.req__tabs {
	gap: 49px;
	display: flex;
}
.req__tab {
	width: 259px;
	height: 56px;
	font-family: var(--font-jp);
	color: var(--c-navy);
	background: var(--c-menu-bg);
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	transition:
		background-color 0.25s,
		color 0.25s;
}
/* Nothing styled .is-active, so the selected tab was indistinguishable from an
   unselected one. Filled navy is the same "this one is chosen" cue as .btn--navy. */
.req__tab.is-active {
	background: var(--c-navy);
	color: var(--c-white);
}
.req__tab:disabled {
	color: #0e43774d;
	cursor: not-allowed;
	background: var(--c-gray-bg);
}
/* Second level of the 募集要項 tabs: the job under an employment type. Smaller
   than the level above it, outlined rather than filled until selected. */
.req__tabs--sub {
	gap: 16px;
	margin-top: 28px;
}
.req__tab--sub {
	background: var(--c-white);
	border: 1px solid var(--c-navy);
	width: auto;
	min-width: 168px;
	height: 44px;
	padding-inline: 24px;
	font-size: 18px;
}
.req__tab--sub.is-active {
	background: var(--c-navy);
	color: var(--c-white);
}

/* The store the requirements below belong to. Same navy tick the shop pages put
   beside a store name, with the accent in gold because the name itself is navy. */
.req__shop {
	margin: 40px 0 0;
	padding-left: 20px;
	font-family: var(--font-jp);
	color: var(--c-navy);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
	position: relative;
}
.req__shop::before {
	content: "";
	background: var(--c-gold);
	width: 4px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.req__shop + .req__table {
	margin-top: 24px;
}
.req__table {
	border-top: 1px solid #1a1a1a;
	margin: 44px 0 0;
}
.req__row {
	font-family: var(--font-jp);
	color: #3c3c3c;
	border-bottom: 1px solid #1a1a1a;
	align-items: flex-start;
	padding: 24px 0;
	font-size: 16px;
	line-height: 1.45;
	display: flex;
}
.req__row dt {
	flex: none;
	width: 295px;
	padding-left: 32px;
}
.req__row dd {
	margin: 0;
}
.req__row dd span {
	display: block;
}
@media (width<=767px) {
	.req__tabs {
		gap: 12px;
	}
	.req__tab {
		flex: 1;
		width: auto;
		height: 48px;
		font-size: 20px;
	}
	.req__tabs--sub {
		gap: 10px;
		margin-top: 20px;
	}
	.req__tab--sub {
		min-width: 0;
		height: 40px;
		padding-inline: 12px;
		font-size: 15px;
	}
	.req__shop {
		margin-top: 28px;
		padding-left: 14px;
		font-size: 20px;
	}
	.req__shop + .req__table,
	.req__table {
		margin-top: 20px;
	}
	.req__row {
		flex-direction: column;
		gap: 8px;
	}
	.req__row dt {
		color: #1a1a1a;
		width: auto;
		padding-left: 0;
		font-weight: 700;
	}
}
.container--recruit {
	width: min(960px, 100% - 64px);
}
.recruit-hero {
	height: 720px;
	position: relative;
	overflow: hidden;
}
.recruit-hero__mosaic {
	flex-direction: column;
	display: flex;
	position: absolute;
	inset: 0;
}
.recruit-hero__row {
	height: 360px;
	display: flex;
}
.recruit-hero__row > * {
	flex: 1;
}
.recruit-hero__tile {
	position: relative;
	overflow: hidden;
}
.recruit-hero__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Keeps the two-tone rhythm the grey placeholders had, and stops a bright photo
   from competing with the navy plate on top of it. */
.recruit-hero__tile--dim::after {
	content: "";
	background: #0000002e;
	position: absolute;
	inset: 0;
}
.recruit-hero__panel {
	text-align: center;
	background: var(--c-navy-plate);
	width: min(960px, 100% - 64px);
	height: 263px;
	padding-top: 40px;
	position: absolute;
	top: 228px;
	left: 50%;
	transform: translate(-50%);
}
.recruit-hero__title {
	color: var(--c-white);
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.45;
}
.recruit-hero__body,
.recruit-hero__title {
	font-family: var(--font-jp);
}
.recruit-hero__body {
	color: var(--c-white);
	width: 650px;
	max-width: 100%;
	margin: 41px auto 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 32px;
}
.recruit-hero__cta {
	/* The white-on-navy pairing the top page already uses for this same section:
	   a .btn--outline sitting under the navy .panel. Only the scale differs. */
	background: var(--c-white);
	width: 531px;
	max-width: calc(100% - 64px);
	height: 64px;
	padding-inline: 32px;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-jp);
	color: var(--c-navy);
	border: 3px solid var(--c-navy);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	transition:
		background-color 0.2s,
		color 0.2s;
	display: flex;
	position: absolute;
	top: 521px;
	left: 50%;
	transform: translate(-50%);
}
.recruit-hero__cta:hover {
	color: var(--c-white);
	background: var(--c-navy);
}
.intro {
	padding-top: 140px;
}
.intro__inner {
	justify-content: space-between;
	gap: 40px;
	display: flex;
}
.intro__text {
	width: 519px;
	font-family: var(--font-jp);
	color: #3c3c3c;
	flex: none;
	font-size: 16px;
	font-weight: 500;
	line-height: 32px;
}
.intro__photo {
	flex: none;
	width: 342.554px;
	height: 256.915px;
}
.intro__img,
.merit__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.merits {
	padding-top: 69px;
}
.merits__grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 29.5px;
	margin-top: 35px;
	display: grid;
}
.merit__media {
	height: 180px;
}
.merit__title {
	min-height: 54px;
	margin: 34px 0 0;
	font-family: var(--font-jp);
	color: #000;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}
.merit__body {
	font-family: var(--font-jp);
	color: #3c3c3c;
	font-size: 16px;
	font-weight: 500;
	line-height: 32px;
}
.requirements {
	padding-top: 140px;
}
.requirements__table {
	margin-top: 54px;
}
.entry {
	padding-top: 140px;
	padding-bottom: 120px;
}
.entry__form {
	margin-top: 34px;
}
@media (width<=1023px) {
	.recruit-hero {
		height: 560px;
	}
	.recruit-hero__row {
		height: 280px;
	}
	.recruit-hero__panel {
		height: auto;
		padding: 32px 24px;
		top: 150px;
	}
	.recruit-hero__cta {
		top: 400px;
	}
}
@media (width<=767px) {
	/* The panel and the CTA were pinned at fixed offsets over a fixed-height
	   panel, so once the lead wrapped to five lines the button sat on top of its
	   last line. Stack the two in normal flow and let the panel size to its text;
	   the mosaic stays behind as the background. */
	.recruit-hero {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 20px;
		height: auto;
		min-height: 480px;
		padding-block: 48px;
		display: flex;
	}
	.recruit-hero__row {
		flex: 1;
		height: auto;
	}
	/* relative, not static: the mosaic is absolutely positioned, so a static
	   sibling would paint underneath it. */
	.recruit-hero__panel,
	.recruit-hero__cta {
		transform: none;
		position: relative;
		top: auto;
		left: auto;
	}
	.recruit-hero__panel {
		width: calc(100% - 32px);
		height: auto;
		padding: 28px 20px;
	}
	.recruit-hero__title {
		font-size: 20px;
	}
	.recruit-hero__body {
		margin-top: 20px;
		font-size: 14px;
		line-height: 26px;
	}
	.recruit-hero__cta {
		height: 56px;
		padding-inline: 20px;
		font-size: 18px;
	}
	.intro {
		padding-top: 64px;
	}
	.intro__inner {
		flex-direction: column;
	}
	.intro__text {
		width: auto;
	}
	.intro__photo {
		width: 100%;
		height: 220px;
	}
	.entry,
	.merits,
	.requirements {
		padding-top: 64px;
	}
	.merits__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.requirements__table {
		margin-top: 32px;
	}
}

/* Hand-written overrides. Keep after the bundled rules above. */

/* SP footer: drop the column gap so the two nav lists read as one list with a
   uniform 40px rhythm, and keep the 32px breathing room under the logo. */
@media (width<=767px) {
	.footer__inner {
		gap: 0;
	}
	.footer__brand {
		margin-bottom: 32px;
	}
}

/* SP page headings: 40px pushed "ABOUT US" onto two lines next to the JP label,
   which is nowrap. 32px keeps the pair on one line. */
@media (width<=767px) {
	.heading__en {
		font-size: 32px;
	}
	/* The recruit page pairs a short EN label with a long JP line. Let the pair
	   wrap rather than push past the viewport; short labels never reach this. */
	.heading {
		flex-wrap: wrap;
		gap: 8px 20px;
	}
	.heading__jp {
		white-space: normal;
	}
}

/* Global menu: fills the viewport at every width, and always keeps a bottom
   gutter so the last item never sits on the edge of a short screen. */
.drawer {
	height: 100vh; /* fallback for browsers without dvh */
	height: 100dvh;
	max-height: 100dvh;
	padding-bottom: 40px;
}

/* SP drawer: at the build's sizes the six items came to ~622px, so short
   phones had to scroll the menu. The vh-clamped values below tighten the list
   as the viewport shortens instead of letting it scroll — ~460px at 812px
   tall, ~330px at 480px tall. The top padding stays above the hamburger's
   74px (14px inset + 60px). */
@media (width<=767px) {
	.drawer {
		padding: clamp(80px, 11vh, 88px) 0 clamp(24px, 5vh, 40px) 32px;
	}
	.drawer__list {
		gap: clamp(12px, 2.6vh, 24px);
	}
	.drawer__link {
		gap: 16px;
	}
	.drawer__bar {
		height: clamp(28px, 4.8vh, 40px);
	}
	.drawer__en {
		font-size: clamp(16px, 2.5vh, 20px);
	}
	.drawer__jp {
		font-size: clamp(10px, 1.5vh, 12px);
	}
}

/* SP news rows: the 46px bar was the tallest item on the first flex line, so
   the wrapped title was pushed ~40px down. Match the bar to the date instead. */
@media (width<=767px) {
	.news__bar {
		height: 1.2em;
	}
}

/* Card titles carried their size as an inline font-size, which no media query
   could beat. page-about.php now passes --card-title-size instead, so the PC
   sizes stay per-card and SP can override them below. */
.card__title {
	font-size: var(--card-title-size, 24px);
}

/* SP section headings: the gap under .heading was 28px where an SP override
   existed (about, recruit) and 40px where the PC value fell through (news,
   stores). Settle on the deliberate SP value, 28px, for all four. */
@media (width<=767px) {
	.about__lead,
	.news__list,
	.stores__grid,
	.panel__row {
		margin-top: 28px;
	}
}

/* SP page index (about): carry the PC layout over instead of stacking — the
   index stays a sticky sidebar next to the cards, just narrowed to fit. The
   scroll spy in main.js keeps driving .is-active. */
@media (width<=767px) {
	/* Tighter side gutters here only, so the two columns have room. */
	.body .container--page {
		width: min(var(--page-w), 100% - 24px);
	}
	.body__inner {
		flex-direction: row;
		gap: 10px;
	}
	.body__index {
		flex: none;
		/* Flush to the viewport edge: cancels the container's 12px gutter and
		   gives the width back to the cards. */
		margin-left: -12px;
		width: auto;
		position: sticky;
		top: 12px;
	}
	/* 100px is the narrowest that still fits the longest JP label
	   (「果たすべき使命」= 7 chars at 11px) on one line. */
	.index {
		width: 100px;
		padding-top: 0;
	}
	/* Undo the tablet grid (minmax(180px,1fr) would blow past the rail) and go
	   back to the PC column with its dividers between items. */
	.index ul {
		display: block;
	}
	.index li + li .index__item {
		border-top: 1px solid #ccc;
	}
	.index__item {
		justify-content: flex-start;
		height: auto;
		min-height: 56px;
		padding: 10px 8px;
		border-bottom: 0;
	}
	/* min-width:0, or the flex item refuses to shrink and long labels
	   ("COMPANY INFORMATION") spill out of the rail and over the cards. */
	.index__text {
		min-width: 0;
		gap: 4px;
	}
	.index__en {
		letter-spacing: 0.4px;
		font-size: 9px;
		line-height: 1.3;
	}
	.index__jp {
		letter-spacing: 0.2px;
		font-size: 11px;
		line-height: 1.4;
	}
	/* The gold rule has no room in a 92px rail. */
	.index__rule {
		display: none;
	}
	/* Buy the narrowed cards back some content width. */
	.card {
		padding: 28px 16px 16px;
		scroll-margin-top: 16px;
	}
	.card__title {
		font-size: 16px;
	}
	.card__watermark {
		font-size: 32px;
		line-height: 28px;
	}
	.statement--lg {
		font-size: 20px;
	}
}