/* ============================================================
   front-page sections
   ============================================================ */

/* ---------- hero ---------- */
.hero {
	position: relative;
	height: 100vh;
	min-height: 600px;
	overflow: hidden;
	color: var(--c-on-dark);
}
.hero__media,
.hero__overlay,
.hero__inner {
	position: absolute;
	inset: 0;
}
.hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	background-position: center;
	background-size: cover;
	opacity: 0;
	transition: opacity 1.2s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__overlay {
	background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.55));
	pointer-events: none;
}
.hero__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--gutter);
	text-align: center;
}
.hero__copy {
	font-size: clamp(1.7rem, 4.4vw + 0.5rem, 3.6rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	max-width: 14em;
	margin-inline: auto;
	padding-inline: 1em;
	text-shadow: 0 2px 30px rgba(0,0,0,0.4);
	opacity: 0;
	transform: translateY(20px);
	animation: heroFadeIn 2s var(--ease) 0.4s forwards;
}
@keyframes heroFadeIn {
	to { opacity: 1; transform: translateY(0); }
}

.hero__scroll-guide {
	position: absolute;
	left: 50%;
	bottom: 2.5rem;
	transform: translateX(-50%);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	color: var(--c-on-dark);
	font-family: var(--ff-display);
	font-size: clamp(0.62rem, 0.2vw + 0.58rem, 0.68rem);
	letter-spacing: 0.3em;
	opacity: 0.85;
}
.hero__scroll-guide__line {
	width: 1px;
	height: 70px;
	background: linear-gradient(to bottom, transparent, var(--c-on-dark));
	position: relative;
	overflow: hidden;
}
.hero__scroll-guide__line::after {
	content: "";
	position: absolute;
	left: 0; top: -30%;
	width: 100%; height: 30%;
	background: var(--c-brand);
	animation: scrollGuide 2.2s var(--ease) infinite;
}
@keyframes scrollGuide {
	0%   { top: -30%; }
	100% { top: 100%; }
}
.hero__scroll-guide__label { line-height: 1; }

/* ---------- second-view ---------- */
.second-view {
	text-align: center;
}
.second-view__lead {
	font-size: clamp(1.15rem, 2.2vw + 0.5rem, 1.75rem);
	font-weight: 500;
	line-height: 1.7;
	max-width: 22em;
	margin-inline: auto;
	padding-inline: 0.5em;
	margin-block: 1.5rem 2.5rem;
}
.second-view__body {
	display: flex;
	flex-direction: column;
	gap: 1.4em;
	font-size: clamp(0.85rem, 0.4vw + 0.78rem, 0.94rem);
	color: var(--c-ink-soft);
	max-width: 32em;
	margin-inline: auto;
}
.second-view__highlight {
	font-size: clamp(1rem, 1.6vw + 0.5rem, 1.4rem);
	letter-spacing: 0.1em;
	color: var(--c-brand);
}

/* ---------- philosophy ---------- */
.philosophy {
	position: relative;
	background-size: cover;
	background-position: center;
	color: var(--c-on-dark);
	text-align: center;
	overflow: hidden;
}
.philosophy__overlay {
	position: absolute; inset: 0;
	background: rgba(0,0,0,0.55);
	pointer-events: none;
}
.philosophy__inner {
	position: relative;
}
.philosophy .section-eyebrow { color: rgba(255,255,255,0.7); }
.philosophy .section-heading__sub { color: rgba(255,255,255,0.7); }
.philosophy__main {
	font-size: clamp(1.55rem, 3.2vw + 0.6rem, 2.5rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--c-brand);
	max-width: 14em;
	margin: 0.5em auto 0.6em;
	padding-inline: 0.5em;
}
.philosophy__sub {
	font-size: clamp(0.82rem, 0.3vw + 0.74rem, 0.9rem);
	letter-spacing: 0.06em;
	max-width: 32em;
	margin: 0 auto 2.5rem;
}
.philosophy__cta { margin-top: 1.5rem; }

/* ---------- soba ---------- */
.soba {
	text-align: center;
}
.soba__header { margin-bottom: 2rem; }
.soba__body {
	max-width: 32em;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 1.2em;
	font-size: clamp(0.86rem, 0.35vw + 0.8rem, 0.94rem);
	color: var(--c-ink-soft);
}
.soba__body--en {
	font-size: clamp(0.74rem, 0.3vw + 0.66rem, 0.82rem);
	color: var(--c-mute);
}
.soba__cta { margin-top: 2rem; }

/* allergen-cta */
.allergen-cta {
	margin-top: 4rem;
	background: var(--c-bg-warm);
	padding-block: 3rem;
	border-radius: 0;
}
.allergen-cta__inner { text-align: center; }
.allergen-cta__title {
	font-size: clamp(0.98rem, 0.6vw + 0.85rem, 1.1rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: 0.8rem;
}
.allergen-cta__lead { color: var(--c-ink-soft); margin-bottom: 0.4em; font-size: clamp(0.85rem, 0.3vw + 0.78rem, 0.92rem); }
.allergen-cta__lead--en { color: var(--c-mute); font-size: clamp(0.74rem, 0.25vw + 0.68rem, 0.8rem); margin-bottom: 1.5rem; }
/* 2026-05-06 アレルゲン+FAQ の 2 ボタン横並び（SP は縦並び） */
.allergen-cta__btn-wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: center; align-items: center; }
.allergen-cta__btn-wrap .c-btn { flex: 0 1 auto; }
@media (max-width: 560px) {
	.allergen-cta__btn-wrap { flex-direction: column; gap: 0.6rem; }
	.allergen-cta__btn-wrap .c-btn { width: 100%; max-width: 22rem; }
}

/* shop-list / shop-card のスタイルは components.css に移動済み（/shop/ 親ページとも共有） */
.shop-list__header { text-align: center; margin-bottom: 1.5rem; }

/* ---------- home news（一覧の見出しと余白を SOBA / SHOP セクションに合わせる）---------- */
.home-news__header {
	margin-bottom: 2.5rem;
	text-align: center;
}
.home-news .l-container { max-width: 1080px; }
.home-news .eibun-news { max-width: 920px; margin-inline: auto; }
.home-news .eibun-news__row { padding-block: 1.35em; }

/* ---------- home recruit ---------- */
.home-recruit__inner {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 880px) {
	.home-recruit__inner { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.home-recruit__media {
	aspect-ratio: 3 / 2;
	background-size: cover;
	background-position: center;
}
.home-recruit__body { display: flex; flex-direction: column; gap: 1.5rem; }
.home-recruit__copy { color: var(--c-ink-soft); display: flex; flex-direction: column; gap: 0.6em; font-size: clamp(0.85rem, 0.35vw + 0.78rem, 0.94rem); }
.home-recruit__copy--en { color: var(--c-mute); font-size: clamp(0.74rem, 0.25vw + 0.68rem, 0.82rem); }
.home-recruit__buttons {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
}
.home-recruit__buttons .c-btn { width: 100%; max-width: 380px; }

/* ---------- common eyebrow with sub ---------- */
.section-eyebrow .section-heading__sub {
	display: block;
	margin-top: 0.4em;
	letter-spacing: 0.18em;
	font-size: 0.7rem;
}