/* ============================================================
   components.css — 再利用パーツ
     - Button/CTA, Button/Link
     - Tag/Category, Tag/Temperature
     - Cat-filter (Button/Cat)
     - Section/Header
     - Section Split (AboutUs / Tradition / Lineup pattern)
     - Section Banner
     - Section Visual
     - Card/News, Card/Menu, Card/Shop, Card/Concept
     - Rating/Leaf
     - Form/Contact
     - Nav/Article
     - News/Detail
     - Job/Detail
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   Button/CTA — height 69px, border-radius 40px
   background: gradient(#E8F3EB → #FFFFFF)
   label: 21px Bold Zen Old Mincho, color #333631
   icon: 10x18 arrow
   ────────────────────────────────────────────────────────── */
.button-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 300px;
	height: 69px;
	padding: 20px 40px;
	background: var(--gradient-cta); /* linear-gradient(to bottom, #E8F3EB, #FFFFFF) */
	border: none;
	border-radius: 40px;
	box-shadow: var(--shadow-cta);
	color: var(--color-text); /* #333631 */
	font-family: var(--font-jp);
	font-size: var(--fs-button); /* 21px */
	font-weight: 700;
	letter-spacing: var(--ls-normal);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--duration-fast) var(--easing),
	            box-shadow var(--duration-fast) var(--easing),
	            opacity var(--duration-fast) var(--easing);
}

.button-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
	opacity: 1;
}

.button-cta:active {
	transform: translateY(0);
}

/* Arrow icon: 10x18 */
.button-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 18px;
	transition: transform var(--duration-fast) var(--easing);
}

.button-cta__icon img,
.button-cta__icon svg {
	width: 10px;
	height: 18px;
}

.button-cta:hover .button-cta__icon {
	transform: translateX(4px);
}

/* Legacy arrow class */
.button-cta__arrow {
	display: inline-block;
	font-size: 1em;
	line-height: 1;
	transition: transform var(--duration-fast) var(--easing);
}

.button-cta:hover .button-cta__arrow {
	transform: translateX(4px);
}

.button-cta__label {
	font-family: var(--font-jp);
	font-size: var(--fs-button); /* 21px */
	font-weight: 700;
	color: var(--color-text); /* #333631 */
}

/* Width variants */
.button-cta--section {
	width: 300px;
}

.button-cta--standalone {
	width: 360px;
}

.button-cta--submit,
.button-cta--load-more {
	border: 0;
	font-family: var(--font-jp);
}

/* Button/Link — テキストリンク */
.button-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-brand-green);
	font-family: var(--font-en);
	font-size: var(--fs-body-sm);
	letter-spacing: var(--ls-wide);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* ──────────────────────────────────────────────────────────
   Tag/Category — カテゴリタグ（ピル型）
   height 24px, border-radius 70px, 12px Zen Old Mincho
   背景色は --tag-bg で動的切替
   ────────────────────────────────────────────────────────── */
.tag-category {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 84px;
	height: 24px;
	padding: 0 var(--space-3);
	background-color: var(--tag-bg, var(--tag-default));
	border-radius: var(--radius-pill); /* 70px */
	color: var(--color-text-white);
	font-family: var(--font-jp);
	font-size: var(--fs-card-category); /* 12px */
	line-height: 1;
	letter-spacing: var(--ls-normal);
	white-space: nowrap;
}

.tag-category.tag--default  { --tag-bg: var(--tag-default); }
.tag-category.tag--oshirase { --tag-bg: var(--tag-oshirase); }  /* お知らせ #CE3A3A */
.tag-category.tag--event    { --tag-bg: var(--tag-event); }     /* イベント #61468B */
.tag-category.tag--inbound  { --tag-bg: var(--tag-inbound); }   /* インバウンド #9BB75C */
.tag-category.tag--recruit  { --tag-bg: var(--tag-recruit); }

/* menu_concept でも tag-category クラスを再利用 */
.tag-category.tag--chill   { --tag-bg: var(--concept-chill); }
.tag-category.tag--energy  { --tag-bg: var(--concept-energy); }
.tag-category.tag--harmony { --tag-bg: var(--concept-harmony); }
.tag-category.tag--sweets  { --tag-bg: var(--concept-sweets); }

/* ──────────────────────────────────────────────────────────
   Tag/Temperature — ICE/HOT
   ────────────────────────────────────────────────────────── */
.tag-temp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	height: 24px;
	padding: 0 var(--space-3);
	border-radius: var(--radius-pill);
	color: var(--color-text-white);
	font-family: var(--font-jp);
	font-size: var(--fs-body-sm);
	line-height: 1;
	letter-spacing: var(--ls-wide);
	background-color: var(--temp-default, var(--tag-default));
}

.tag-temp--ice { background-color: var(--temp-ice); }
.tag-temp--hot { background-color: var(--temp-hot); }

/* ──────────────────────────────────────────────────────────
   Cat-filter — Button/Cat（カテゴリフィルターボタン群）
   ────────────────────────────────────────────────────────── */
.cat-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-bottom: var(--space-12);
}

.cat-filter-btn {
	min-height: 48px;
	padding: var(--space-3) var(--space-6);
	background-color: #C8C6C2;
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--color-text-white);
	font-family: var(--font-jp);
	font-size: var(--fs-cat-btn); /* 15px */
	letter-spacing: var(--ls-cat-btn);
	cursor: pointer;
	transition: background-color var(--duration-normal) var(--easing);
}

.cat-filter-btn.is-active        { background-color: var(--cat-active, var(--color-brand-green)); }
.cat-filter--all.is-active       { --cat-active: var(--color-brand-green); }
.cat-filter--oshirase.is-active  { --cat-active: var(--tag-oshirase); }
.cat-filter--event.is-active     { --cat-active: var(--tag-event); }
.cat-filter--inbound.is-active   { --cat-active: var(--tag-inbound); }
.cat-filter--recruit.is-active   { --cat-active: var(--tag-recruit); }

/* ──────────────────────────────────────────────────────────
   Section/Header — 英語ラベル + 日本語見出し
   Label: 18px Regular, color #333631
   Title: varies (36px or 45px Bold)
   ────────────────────────────────────────────────────────── */
.section-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-12);
	text-align: center;
}

.section-header__label-en {
	font-family: var(--font-jp);
	font-size: var(--fs-section-label); /* 18px */
	font-weight: 400;
	letter-spacing: var(--ls-wide);
	color: var(--color-text); /* #333631 */
}

.section-header__title-jp {
	font-family: var(--font-jp);
	font-size: var(--fs-display); /* 45px */
	font-weight: 700;
	letter-spacing: var(--ls-normal);
	color: var(--color-text); /* #333631 */
}

/* Smaller section title variant (36px) */
.section-header__title-jp--sm {
	font-size: var(--fs-section-title); /* 36px */
	letter-spacing: var(--ls-section-title); /* 0.045em */
}

/* ──────────────────────────────────────────────────────────
   Section Split — AboutUs / Tradition / Lineup pattern
   1515px wide, 420px tall, grid: 810px image + 1fr text
   ────────────────────────────────────────────────────────── */
.section-split {
	max-width: var(--section-split-width); /* 1515px */
	overflow: hidden;
	padding: 0;
}

.section-split__inner {
	display: grid;
	grid-template-columns: var(--section-split-image) 1fr; /* 810px + rest */
	min-height: var(--section-split-height); /* 420px */
}

/* Reverse: text left, image right (Tradition pattern) */
/* Figma: reverse sections span x=405 to x=1920 (behind sidebar) */
.section-split--reverse {
	margin-left: auto;
	margin-right: calc(-1 * var(--sidebar-width)); /* extend behind sidebar */
}

.section-split--reverse .section-split__inner {
	grid-template-columns: 1fr var(--section-split-image);
}

.section-split--reverse .section-split__image {
	order: 2;
}

.section-split--reverse .section-split__text {
	order: 1;
}

.section-split__image {
	width: var(--section-split-image); /* 810px */
	height: var(--section-split-height); /* 420px */
	overflow: hidden;
}

.section-split__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section-split__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-10) var(--space-12);
	padding-left: 85px; /* text starts at ~895px from section left: 895 - 810 = 85px */
	gap: var(--space-4);
}

.section-split--reverse .section-split__text {
	padding-left: var(--space-12);
	padding-right: 85px;
}

.section-split__label {
	font-family: var(--font-jp);
	font-size: var(--fs-section-label); /* 18px */
	font-weight: 400;
	color: var(--color-text); /* #333631 */
}

.section-split__title {
	font-family: var(--font-jp);
	font-size: var(--fs-section-title); /* 36px */
	font-weight: 700;
	letter-spacing: var(--ls-section-title); /* 0.045em */
	color: var(--color-text);
	margin-bottom: var(--space-3);
}

.section-split__divider {
	width: 621px;
	height: 1px;
	border: none;
	background: var(--color-divider); /* #333631 */
	margin: 0;
}

.section-split__body {
	font-family: var(--font-jp);
	font-size: var(--fs-body); /* 16px */
	font-weight: 400;
	line-height: 36px; /* 2.25em at 16px */
	letter-spacing: var(--ls-body); /* 0.032em */
	color: var(--color-text);
}

.section-split__cta {
	margin-top: var(--space-4);
}

/* ──────────────────────────────────────────────────────────
   Section Banner — centered heading
   45px Bold, letter-spacing 0.04em, white-space: pre-line
   ────────────────────────────────────────────────────────── */
.section-banner {
	text-align: center;
	padding: 58px var(--space-8); /* Figma: banner at y=1218, bottombar ends at y=1140, so 78px gap but content centered */
	max-width: 718px;
	margin: 0 auto;
}

.section-banner__heading {
	font-family: var(--font-jp);
	font-size: var(--fs-display); /* 45px */
	font-weight: 700;
	letter-spacing: var(--ls-banner); /* 0.04em */
	color: var(--color-text);
	white-space: pre-line;
	line-height: var(--lh-tight);
}

/* ──────────────────────────────────────────────────────────
   Section Visual — full-width image, 960px tall
   edge to edge of content area
   ────────────────────────────────────────────────────────── */
.section-visual {
	width: calc(100% + var(--sidebar-width)); /* Figma: visual spans full 1920px behind sidebar */
	height: 960px; /* Figma: Top page visual */
	overflow: hidden;
}

.section-visual--about {
	height: 693px; /* Figma: About page visual */
}

.section-visual img,
.section-visual__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ──────────────────────────────────────────────────────────
   Card/News — 302x336 (image 302x201 + body 302x135)
   border-radius 5px, gradient body bg
   ────────────────────────────────────────────────────────── */
.card-news {
	display: block;
	width: var(--card-news-width); /* 302px */
	max-width: 302px;
	box-shadow: var(--shadow-card);
	overflow: hidden;
	border-radius: var(--radius-card); /* 5px */
	transition: transform var(--duration-normal) var(--easing);
}

.card-news:hover {
	transform: translateY(-4px);
}

.card-news__link {
	display: block;
	color: inherit;
}

.card-news__link:hover {
	opacity: 1;
}

.card-news__thumbnail {
	width: 302px;
	height: var(--card-news-thumb-h); /* 201px */
	overflow: hidden;
	background: var(--color-brand-light);
}

.card-news__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--easing);
}

.card-news:hover .card-news__thumbnail img {
	transform: scale(1.05);
}

/* Card body: 302x135, gradient background */
.card-news__body,
.card-news__info {
	width: 302px;
	height: var(--card-news-body-h); /* 135px */
	padding: 26px; /* date positioned at (26, 26) from body top */
	background: var(--gradient-card);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.card-news__meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* Date: 12px Lato Regular, color #302D2C */
.card-news__date {
	font-family: var(--font-en-serif); /* Lato */
	font-size: var(--fs-date); /* 12px */
	font-weight: 400;
	color: var(--color-text-secondary); /* #302D2C */
	letter-spacing: var(--ls-normal);
}

/* Category badge: 12px, white text, colored bg, pill 70px, height 24px */
.card-news__category {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 var(--space-3);
	border-radius: var(--radius-pill); /* 70px */
	color: var(--color-text-white);
	font-family: var(--font-jp);
	font-size: var(--fs-card-category); /* 12px */
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}

/* Title: 18px Zen Old Mincho Bold, color #333631 */
.card-news__title {
	font-family: var(--font-jp);
	font-size: var(--fs-card-title); /* 18px */
	font-weight: 700;
	color: var(--color-text); /* #333631 */
	line-height: var(--lh-tight);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ──────────────────────────────────────────────────────────
   Section News — centered header + 3-column grid
   ────────────────────────────────────────────────────────── */
.section-news {
	background: var(--color-bg);
}

.section-news__header {
	text-align: center;
	margin-bottom: var(--space-12);
}

.section-news__header .section-header__label-en {
	font-size: var(--fs-section-label); /* 18px */
}

.section-news__header .section-header__title-jp {
	font-size: var(--fs-section-title-lg); /* 45px */
}

.section-news__grid {
	display: grid;
	grid-template-columns: repeat(3, 302px);
	gap: 20px;
	justify-content: center;
	margin-bottom: var(--space-12);
}

.section-news__more {
	display: flex;
	justify-content: center;
}

/* ──────────────────────────────────────────────────────────
   Card/Menu — 円形サムネイル
   ────────────────────────────────────────────────────────── */
.card-menu {
	width: 100%;
	max-width: 240px;
	text-align: center;
}

.card-menu__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	color: inherit;
}

.card-menu__link:hover {
	opacity: 1;
}

.card-menu__thumbnail {
	width: 200px;
	height: 200px;
	border-radius: var(--radius-full);
	overflow: hidden;
	background: var(--color-brand-light);
	transition: transform var(--duration-normal) var(--easing);
}

.card-menu:hover .card-menu__thumbnail {
	transform: scale(1.05);
}

.card-menu__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-menu__name {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	font-weight: 400;
	color: var(--color-text);
}

.card-menu__name-en {
	font-family: var(--font-en);
	font-size: var(--fs-body-sm);
	color: var(--color-text-muted);
	letter-spacing: var(--ls-normal);
}

/* ──────────────────────────────────────────────────────────
   Card/Shop — 横並び
   ────────────────────────────────────────────────────────── */
.card-shop {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--space-6);
	padding: var(--space-6);
	background: var(--color-bg);
	box-shadow: var(--shadow-card);
}

.card-shop--footer {
	grid-template-columns: 1fr;
	background: transparent;
	box-shadow: none;
	padding: 0;
	gap: var(--space-3);
}

.card-shop--footer .card-shop__thumbnail {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-sm);
}

.card-shop--footer .card-shop__name {
	font-size: var(--fs-body-lg);
}

.card-shop__thumbnail {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-brand-light);
}

.card-shop__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-shop__details {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.card-shop__name {
	font-family: var(--font-jp);
	font-size: var(--fs-h2);
	font-weight: 700;
	color: var(--color-text);
}

.card-shop__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.card-shop__row {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: var(--space-3);
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
}

.card-shop__label {
	color: var(--color-text-secondary);
	font-weight: 700;
}

.card-shop__value {
	color: var(--color-text);
	margin: 0;
}

.card-shop__map {
	margin-top: var(--space-3);
	align-self: flex-start;
}

/* ──────────────────────────────────────────────────────────
   Card/Concept — Chill / Energy / Harmony
   ────────────────────────────────────────────────────────── */
.card-concept {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-8);
	max-width: 320px;
	text-align: center;
	background: var(--color-bg);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.card-concept__icon {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-concept__icon img {
	max-width: 100%;
	max-height: 100%;
}

.card-concept__title {
	font-family: var(--font-jp);
	font-size: var(--fs-body-lg);
	font-weight: 700;
	color: var(--color-text);
}

.card-concept__description {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	color: var(--color-text-secondary);
	line-height: var(--lh-normal);
}

.card-concept--chill   .card-concept__title { color: var(--concept-chill); }
.card-concept--energy  .card-concept__title { color: var(--concept-energy); }
.card-concept--harmony .card-concept__title { color: var(--concept-harmony); }

/* ──────────────────────────────────────────────────────────
   Rating/Leaf — 5段階葉評価
   ────────────────────────────────────────────────────────── */
.rating-leaf {
	display: inline-flex;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
}

.rating-leaf__label {
	display: inline-block;
	min-width: 80px;
	margin-right: var(--space-3);
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	color: var(--color-text);
}

.leaf {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: #C8C6C2;
	-webkit-mask: url('../images/leaf.svg') no-repeat center / contain;
	        mask: url('../images/leaf.svg') no-repeat center / contain;
}

.leaf--filled { background-color: var(--color-brand-green); }
.leaf--empty  { background-color: #C8C6C2; }

/* ──────────────────────────────────────────────────────────
   Form/Contact
   ────────────────────────────────────────────────────────── */
.form-contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	max-width: 720px;
	margin: 0 auto;
}

.form-contact__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.form-contact__label {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	font-weight: 700;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.form-contact__required {
	color: var(--form-error);
	font-weight: 700;
}

.form-contact__field input[type="text"],
.form-contact__field input[type="tel"],
.form-contact__field input[type="email"],
.form-contact__field textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--form-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	transition: border-color var(--duration-fast) var(--easing);
}

.form-contact__field input:focus,
.form-contact__field textarea:focus {
	outline: none;
	border-color: var(--form-border-focus);
}

.form-contact__field--radio {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-6);
	border: 0;
	padding: 0;
	margin: 0;
	align-items: center;
}

.form-contact__field--radio legend.form-contact__label {
	display: block;
	margin-bottom: var(--space-2);
	width: 100%;
}

.form-contact__field--radio label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
}

.form-contact__field--checkbox {
	align-items: center;
}

.form-contact__privacy {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-body);
	cursor: pointer;
}

.form-contact__privacy a {
	color: var(--color-brand-green);
	text-decoration: underline;
}

.form-contact__submit {
	display: flex;
	justify-content: center;
	margin-top: var(--space-4);
}

.form-contact__errors {
	padding: var(--space-4);
	background: rgba(206, 58, 58, 0.08);
	border-left: 4px solid var(--form-error);
	color: var(--form-error);
	border-radius: var(--radius-sm);
}

.form-contact__errors p {
	margin-bottom: var(--space-2);
	font-weight: 700;
}

.form-contact__errors ul {
	padding-left: var(--space-5);
	list-style: disc;
	font-size: var(--fs-body);
}

/* ──────────────────────────────────────────────────────────
   Nav/Article — 前後記事 + 一覧へ戻る
   ────────────────────────────────────────────────────────── */
.nav-article {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-6);
	max-width: var(--content-max);
	margin: var(--space-16) auto;
	padding: 0 var(--space-6);
}

.nav-article__prev,
.nav-article__next {
	min-height: 44px;
	display: flex;
	align-items: center;
}

.nav-article__prev { justify-content: flex-start; }
.nav-article__next { justify-content: flex-end; }

.nav-article__prev a,
.nav-article__next a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	color: var(--color-text);
}

/* ──────────────────────────────────────────────────────────
   News/Detail — 記事ページ
   ────────────────────────────────────────────────────────── */
.news-detail {
	max-width: var(--content-max);
	margin: var(--space-16) auto var(--space-12);
	padding: 0 var(--space-6);
}

.news-detail__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-bottom: var(--space-10);
	text-align: center;
}

.news-detail__title {
	font-family: var(--font-jp);
	font-size: var(--fs-h1); /* 36px */
	font-weight: 700;
	color: var(--color-text);
	line-height: var(--lh-tight);
}

.news-detail__meta {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-3);
}

.news-detail__date {
	font-family: var(--font-en-serif);
	font-size: var(--fs-date);
	color: var(--color-text-secondary);
}

.news-detail__thumbnail {
	margin-bottom: var(--space-10);
}

.news-detail__body {
	font-family: var(--font-jp);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-loose);
	color: var(--color-text);
}

.news-detail__body > * + * {
	margin-top: var(--space-5);
}

.news-detail__body img {
	margin: var(--space-8) 0;
	border-radius: var(--radius-sm);
}

/* ──────────────────────────────────────────────────────────
   Job/Detail — 募集テーブル
   ────────────────────────────────────────────────────────── */
.job-detail {
	max-width: var(--content-max);
	margin: 0 auto var(--space-16);
	padding: var(--space-10);
	background: var(--color-bg);
	box-shadow: var(--shadow-card);
}

.job-detail__header {
	margin-bottom: var(--space-8);
	border-bottom: 1px solid var(--color-divider);
	padding-bottom: var(--space-4);
}

.job-detail__heading {
	font-family: var(--font-jp);
	font-size: var(--fs-h2);
	color: var(--color-text);
}

.job-detail__date {
	margin-top: var(--space-2);
	font-family: var(--font-en-serif);
	font-size: var(--fs-date);
	color: var(--color-text-secondary);
}

.job-detail__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.job-detail__item {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: var(--space-6);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-divider);
	font-size: var(--fs-body);
}

.job-detail__label {
	font-weight: 700;
	color: var(--color-text);
}

.job-detail__value {
	color: var(--color-text);
	line-height: var(--lh-normal);
}

.job-detail__cta {
	display: flex;
	justify-content: center;
	margin-top: var(--space-8);
}