/* ============================================================
   pages.css — 各ページのセクション固有スタイル
   Front page follows Figma layout: section-split components,
   bottom-bar after hero, banners, visual sections, news grid
   ============================================================ */

/* ───── 共通: セクション基本 ───── */
/* 標準セクション padding（section-split / section-visual / section-banner は除外） */
.section-news,
.section-intro,
.section-menu,
.section-shop-info,
.section-philosophy,
.section-concept,
.section-drink-concept,
.section-interior,
.section-history,
.section-tsuboichi-philosophy,
.section-message,
.section-recommend,
.section-store-info,
.section-menu-intro,
.section-menu-concept,
.section-tea-types,
.section-characteristics,
.section-tea-info,
.section-related,
.section-news-list,
.section-recruit-intro,
.section-recruit-gallery,
.section-job-detail,
.section-contact-banner,
.section-contact-form,
.section-thanks,
.section-privacy,
.section-supervision {
	padding: 100px var(--space-8);
}

/* section-split: Figma準拠で padding なし */
.section-split {
	padding: 0;
}

/* section-visual: フル幅画像なので padding なし */
.section-visual {
	padding: 0;
}

/* section-banner: padding handled in components.css */

/* セクション内コンテンツ幅制限 */
[class^="section-"] > [class$="__content"] {
	max-width: var(--content-area-width); /* 1740px */
	margin: 0 auto;
}

/* ──────────────────────────────────────────────────────────
   Top — Front Page Sections
   Hero → BottomBar → AboutUs → Tradition → Lineup →
   Banner → Visual → News → Footer
   ────────────────────────────────────────────────────────── */

/* Intro / Washi background section */
.section-intro {
	background-color: var(--color-bg-washi); /* #F5F1EA fallback */
	/* background-image: url('../images/washi-texture.jpg'); */
	text-align: center;
}

.section-intro__heading {
	font-family: var(--font-jp);
	font-size: var(--fs-display); /* 45px */
	font-weight: 700;
	color: var(--color-text);
	margin: var(--space-4) 0 var(--space-6);
}

.section-intro__body {
	max-width: var(--content-narrow);
	margin: 0 auto var(--space-10);
	font-family: var(--font-jp);
	font-size: var(--fs-body); /* 16px */
	line-height: 36px; /* 2.25em */
	letter-spacing: var(--ls-body); /* 0.032em */
	color: var(--color-text);
}

/* ───── Section Split — Modifier-specific positioning ───── */
/* AboutUs: 左寄せ（x=0） */
.section-split--about-us {
	margin-left: 0;
	margin-right: auto;
}

/* Tradition: 右寄せ（x=405 in Figma） — reverse は components.css で処理済み */
.section-split--tradition {
	margin-left: auto;
	margin-right: 0;
}

/* Lineup: 左寄せ（x~0） */
.section-split--lineup {
	margin-left: 0;
	margin-right: auto;
}

/* Experience (About page): 左寄せ（x=1） */
.section-split--experience {
	margin-left: 0;
	margin-right: auto;
}

/* About Link (About page): 右寄せ = reverse */
.section-split--about-link {
	margin-left: auto;
}

/* ───── Section Banner (centered text block between sections) ───── */
/* Uses .section-banner component from components.css */

/* ───── Section Visual (full-width immersive image) ───── */
/* Uses .section-visual component from components.css */

/* ───── News Section ───── */
.section-news {
	background: var(--color-bg);
	padding: 100px var(--space-8);
}

.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;
}

/* Menu (Top) */
.section-menu {
	background: var(--color-bg-soft);
}

.section-menu__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 240px));
	gap: var(--space-8);
	justify-content: center;
	margin-bottom: var(--space-12);
}

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

/* Supervision (横並び 画像 + テキスト, reversed) */
.section-supervision {
	background: var(--color-bg);
}

.section-supervision__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: center;
	max-width: var(--container-max);
	margin: 0 auto;
	direction: rtl;
}

.section-supervision__content > * {
	direction: ltr;
}

.section-supervision__image img {
	width: 100%;
	height: auto;
}

.section-supervision__heading {
	font-family: var(--font-jp);
	font-size: var(--fs-display);
	color: var(--color-text);
	margin-bottom: var(--space-6);
}

.section-supervision__body {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	line-height: 36px;
	letter-spacing: var(--ls-body);
	color: var(--color-text);
	margin-bottom: var(--space-8);
}

/* Shop Info */
.section-shop-info {
	background: var(--color-bg-soft);
}

.section-shop-info__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-8);
	max-width: var(--container-max);
	margin: 0 auto var(--space-12);
}

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

/* ──────────────────────────────────────────────────────────
   About ページ
   ────────────────────────────────────────────────────────── */
.section-philosophy,
.section-concept {
	background: var(--color-bg);
}

.section-philosophy__content,
.section-concept__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: center;
	max-width: var(--container-max);
	margin: 0 auto;
}

.section-concept__content {
	direction: rtl;
}

.section-concept__content > * { direction: ltr; }

.section-philosophy__heading,
.section-concept__heading {
	font-family: var(--font-jp);
	font-size: var(--fs-display);
	margin-bottom: var(--space-6);
}

.section-philosophy__body,
.section-concept__body {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	line-height: 36px;
	letter-spacing: var(--ls-body);
}

.section-philosophy__image img,
.section-concept__image img {
	width: 100%;
	border-radius: var(--radius-md);
}

/* DrinkConcept */
.section-drink-concept {
	background: var(--color-bg-soft);
}

.section-drink-concept__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-8);
	justify-items: center;
	max-width: var(--container-max);
	margin: 0 auto;
}

/* Interior */
.section-interior {
	background: var(--color-bg);
}

.section-interior__content {
	max-width: var(--container-max);
	margin: 0 auto;
}

.section-interior__gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

.section-interior__gallery img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.section-interior__body {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	line-height: 36px;
	letter-spacing: var(--ls-body);
	text-align: center;
	max-width: var(--content-narrow);
	margin: 0 auto var(--space-8);
}

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

/* ──────────────────────────────────────────────────────────
   Tsuboichi ページ
   ────────────────────────────────────────────────────────── */
.section-history,
.section-tsuboichi-philosophy,
.section-message {
	background: var(--color-bg);
}

.section-history__content,
.section-tsuboichi-philosophy__content,
.section-message__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: center;
	max-width: var(--container-max);
	margin: 0 auto;
}

.section-tsuboichi-philosophy__content {
	direction: rtl;
}

.section-tsuboichi-philosophy__content > * { direction: ltr; }

.section-history__heading,
.section-tsuboichi-philosophy__heading,
.section-message__heading {
	font-family: var(--font-jp);
	font-size: var(--fs-display);
	margin-bottom: var(--space-6);
}

.section-history__body,
.section-tsuboichi-philosophy__body,
.section-message__body {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	line-height: 36px;
	letter-spacing: var(--ls-body);
}

.section-history__image img,
.section-tsuboichi-philosophy__image img,
.section-message__image img {
	width: 100%;
	border-radius: var(--radius-md);
}

.section-recommend,
.section-store-info {
	background: var(--color-bg-soft);
}

.section-recommend__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 240px));
	gap: var(--space-8);
	justify-content: center;
	max-width: var(--container-max);
	margin: 0 auto var(--space-12);
}

.section-recommend__cta,
.section-store-info__cta {
	display: flex;
	justify-content: center;
}

.section-store-info__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-8);
	max-width: var(--container-max);
	margin: 0 auto var(--space-12);
}

/* ──────────────────────────────────────────────────────────
   MenuList ページ
   ────────────────────────────────────────────────────────── */
.section-menu-intro {
	background-color: var(--color-bg-washi);
	text-align: center;
}

.section-menu-intro__heading {
	font-family: var(--font-jp);
	font-size: var(--fs-display);
	margin-bottom: var(--space-6);
}

.section-menu-intro__body {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	line-height: 36px;
	letter-spacing: var(--ls-body);
	max-width: var(--content-narrow);
	margin: 0 auto;
}

.section-menu-concept {
	background: var(--color-bg);
}

.section-menu-concept__description {
	max-width: var(--content-narrow);
	margin: 0 auto var(--space-10);
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	color: var(--color-text-secondary);
	text-align: center;
}

.section-menu-concept__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 240px));
	gap: var(--space-10);
	justify-content: center;
	max-width: var(--container-max);
	margin: 0 auto;
}

/* コンセプト別アクセント色 */
.section-menu-concept--chill   .section-header__title-jp { color: var(--concept-chill); }
.section-menu-concept--energy  .section-header__title-jp { color: var(--concept-energy); }
.section-menu-concept--harmony .section-header__title-jp { color: var(--concept-harmony); }
.section-menu-concept--sweets  .section-header__title-jp { color: var(--concept-sweets); }

/* TeaTypes */
.section-tea-types {
	background: var(--color-bg-soft);
}

.section-tea-types__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	max-width: var(--container-max);
	margin: 0 auto;
}

.section-tea-types__item {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--space-8);
	align-items: center;
	padding: var(--space-8);
	background: var(--color-bg);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.section-tea-types__name {
	font-family: var(--font-jp);
	font-size: var(--fs-h1);
	color: var(--color-text);
	margin-bottom: var(--space-3);
}

.section-tea-types__gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}

.section-tea-types__gallery img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.section-tea-types__body {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	line-height: 36px;
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

/* ──────────────────────────────────────────────────────────
   MenuDetail（single-menu.php）
   ────────────────────────────────────────────────────────── */
.single-menu {
	margin-top: var(--space-16);
}

.menu-header {
	background: var(--color-bg);
	padding: var(--space-16) var(--space-8);
}

.menu-header__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: center;
	max-width: var(--container-max);
	margin: 0 auto;
}

.menu-header__image img,
.menu-header__slide img {
	width: 100%;
	border-radius: var(--radius-md);
}

.menu-header__slider {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
}

.menu-header__slide {
	display: none;
}

.menu-header__slide.is-active {
	display: block;
}

.menu-header__slider-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.menu-header__slider-prev,
.menu-header__slider-next {
	width: 36px;
	height: 36px;
	border: 1px solid #C8C6C2;
	border-radius: 50%;
	background: var(--color-bg);
	color: var(--color-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--easing);
}

.menu-header__slider-prev:hover,
.menu-header__slider-next:hover {
	background: var(--color-brand-light);
}

.menu-header__slider-dots {
	display: flex;
	gap: var(--space-2);
}

.menu-header__slider-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #C8C6C2;
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--easing),
	            transform var(--duration-fast) var(--easing);
}

.menu-header__slider-dot.is-active {
	background: var(--color-brand-green);
	transform: scale(1.3);
}

.menu-header__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.menu-header__name {
	font-family: var(--font-jp);
	font-size: var(--fs-display);
	font-weight: 700;
	color: var(--color-text);
}

.menu-header__name-en {
	font-family: var(--font-en);
	font-size: var(--fs-body-lg);
	color: var(--color-text-muted);
	letter-spacing: var(--ls-wide);
}

.menu-header__pricing {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4) 0;
	border-top: 1px solid var(--color-divider);
	border-bottom: 1px solid var(--color-divider);
}

.menu-header__price-row {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
}

.menu-header__price-label {
	font-size: var(--fs-body-sm);
	font-weight: 700;
	color: var(--color-text-secondary);
	min-width: 100px;
}

.menu-header__price-value {
	font-family: var(--font-en-serif);
	font-size: var(--fs-h2);
	font-weight: 700;
	color: var(--color-text);
}

.menu-header__price-unit {
	font-size: var(--fs-body);
	margin-left: var(--space-1);
}

.menu-header__takeout-notice {
	font-size: var(--fs-body-sm);
	color: var(--color-text-muted);
}

.menu-header__tags {
	display: flex;
	gap: var(--space-2);
}

.menu-header__description {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	line-height: 36px;
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

.section-characteristics {
	background: var(--color-bg-soft);
}

.section-characteristics__heading {
	font-family: var(--font-jp);
	font-size: var(--fs-h1);
	margin-bottom: var(--space-8);
	text-align: center;
}

.section-characteristics__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: var(--content-narrow);
	margin: 0 auto var(--space-8);
}

.section-characteristics__item {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-divider);
}

.section-characteristics__body {
	max-width: var(--content-narrow);
	margin: 0 auto;
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	line-height: 36px;
	letter-spacing: var(--ls-body);
}

.section-tea-info {
	background: var(--color-bg);
}

.section-tea-info__heading {
	font-family: var(--font-jp);
	font-size: var(--fs-h1);
	margin-bottom: var(--space-6);
	text-align: center;
}

.section-tea-info__body {
	max-width: var(--content-narrow);
	margin: 0 auto;
	font-family: var(--font-jp);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-loose);
}

.section-related {
	background: var(--color-bg-soft);
}

.section-related__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 240px));
	gap: var(--space-8);
	justify-content: center;
	max-width: var(--container-max);
	margin: 0 auto var(--space-12);
}

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

/* ──────────────────────────────────────────────────────────
   NewsArchive
   ────────────────────────────────────────────────────────── */
.section-news-list {
	background: var(--color-bg);
}

.section-news-list__intro {
	max-width: var(--content-narrow);
	margin: 0 auto var(--space-12);
	text-align: center;
}

.section-news-list__heading {
	font-family: var(--font-jp);
	font-size: var(--fs-h1);
	margin-bottom: var(--space-4);
}

.section-news-list__body {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	line-height: 36px;
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

.section-news-list__grid {
	display: grid;
	grid-template-columns: repeat(3, 302px);
	gap: 20px;
	justify-content: center;
	max-width: var(--container-max);
	margin: 0 auto var(--space-12);
	min-height: 240px;
	transition: opacity var(--duration-fast) var(--easing);
}

.section-news-list__grid[aria-busy="true"] {
	opacity: 0.5;
}

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

/* ──────────────────────────────────────────────────────────
   Recruit
   ────────────────────────────────────────────────────────── */
.section-recruit-intro {
	background-color: var(--color-bg-washi);
	text-align: center;
}

.section-recruit-intro__heading {
	font-family: var(--font-jp);
	font-size: var(--fs-display);
	margin-bottom: var(--space-6);
}

.section-recruit-intro__body {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	line-height: 36px;
	letter-spacing: var(--ls-body);
	max-width: var(--content-narrow);
	margin: 0 auto;
}

.section-recruit-gallery {
	background: var(--color-bg);
	padding-block: 0;
}

.section-recruit-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
	max-width: var(--container-max);
	margin: 0 auto;
}

.section-recruit-gallery__grid img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.section-job-detail {
	background: var(--color-bg-soft);
}

.section-contact-banner {
	background: var(--color-brand-green); /* #154D01 */
	color: var(--color-text-white);
	text-align: center;
}

.section-contact-banner__content {
	max-width: var(--content-max);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
}

.section-contact-banner__heading {
	font-family: var(--font-jp);
	font-size: var(--fs-h1);
	color: var(--color-text-white);
}

/* ──────────────────────────────────────────────────────────
   Contact
   ────────────────────────────────────────────────────────── */
.section-contact-form {
	background: var(--color-bg);
}

.section-contact-form__content {
	max-width: var(--content-max);
	margin: 0 auto;
}

.section-contact-form__heading {
	font-family: var(--font-jp);
	font-size: var(--fs-display);
	text-align: center;
	margin-bottom: var(--space-6);
}

.section-contact-form__body {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	line-height: 36px;
	letter-spacing: var(--ls-body);
	text-align: center;
	max-width: var(--content-narrow);
	margin: 0 auto var(--space-12);
	color: var(--color-text-secondary);
}

/* ──────────────────────────────────────────────────────────
   Thanks
   ────────────────────────────────────────────────────────── */
.section-thanks {
	background-color: var(--color-bg-washi);
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.section-thanks__content {
	max-width: var(--content-narrow);
	margin: 0 auto;
	text-align: center;
}

.section-thanks__heading-en {
	font-family: var(--font-en);
	font-size: var(--fs-en-label);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-2);
}

.section-thanks__heading {
	font-family: var(--font-jp);
	font-size: var(--fs-h1);
	color: var(--color-text);
	margin-bottom: var(--space-8);
}

.section-thanks__body {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	line-height: 36px;
	letter-spacing: var(--ls-body);
	color: var(--color-text);
	margin-bottom: var(--space-12);
}

.section-thanks__body p + p {
	margin-top: var(--space-4);
}

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

/* ──────────────────────────────────────────────────────────
   Privacy
   ────────────────────────────────────────────────────────── */
.section-privacy {
	background: var(--color-bg);
}

.section-privacy__content {
	max-width: var(--content-max);
	margin: 0 auto;
}

.section-privacy__label-en {
	text-align: center;
	font-family: var(--font-en);
	font-size: var(--fs-en-label);
	letter-spacing: var(--ls-wide);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-2);
}

.section-privacy__heading {
	text-align: center;
	font-family: var(--font-jp);
	font-size: var(--fs-display);
	color: var(--color-text);
	margin-bottom: var(--space-12);
}

.section-privacy__body {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	line-height: 36px;
	letter-spacing: var(--ls-body);
	color: var(--color-text);
}

.section-privacy__body h2 {
	font-family: var(--font-jp);
	font-size: var(--fs-h2);
	color: var(--color-text);
	margin: var(--space-10) 0 var(--space-3);
}

.section-privacy__body h3 {
	font-family: var(--font-jp);
	font-size: var(--fs-body-lg);
	color: var(--color-text);
	margin: var(--space-6) 0 var(--space-2);
}

.section-privacy__body p + p {
	margin-top: var(--space-4);
}