/* ==========================================================================
   Top page — design at 1280px (PC) / 390px (SP).
   All sizes are written in design px. The whole .site wrapper is zoomed
   in common.css so the design fills the actual viewport at any width.
   ========================================================================== */

.top-page {
	position: relative;
	width: 100%;
	background: var(--color-cream);
	color: var(--color-navy);
	font-family: var(--font-jp);
}

/* ---------- Hero ---------- */
/*
 * .site が zoom: calc(100vw / 1280px) で全体を縮拡しているため、
 * 100vh をそのまま書くと zoom 倍率分だけ縦が拡縮されてしまう。
 * 100vh / 100vw * 1280px とすることで zoom 倍率を相殺し、
 * どのビューポートでも常に実画面の縦サイズいっぱいに表示される。
 */
.hero {
	position: relative;
	height: calc(100vh / 100vw * 1280px);
	min-height: 600px;
	display: grid;
	place-items: center;
	background: var(--color-cream);
}

.hero__logo {
	opacity: 0;
	animation: hero-fade-in 1s ease 0.2s forwards;
}

.hero__logo img {
	width: 179px;
	height: 180px;
	margin-top: 0px;
	object-fit: contain;
}

/* iPad / タブレット域：zoom縮小分（≒0.8倍）を打ち消し、PC実寸と同等の見え方に */
@media (min-width: 768px) and (max-width: 1279px) {
	.hero__logo img {
		width: 224px;
		height: 225px;
	}

	.hero__scroll-text {
		font-size: 30px;
	}

	.hero__scroll-line {
		margin-top: 30px;
		height: 270px;
	}

	.hero__scroll-indicator {
		height: 75px;
		animation-name: hero-scroll-indicator-tablet;
	}
}

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	animation: hero-fade-in 1s ease 1.2s forwards;
}

.site-header {
	opacity: 0;
	animation: hero-fade-in 1s ease 2.2s forwards;
}

/* ヘッダーロゴ：初期非表示。スクロールで「scroll」上端がヘッダー下端に達した瞬間に表示
   （クラス付け外しは top.js が担当）
   will-change で compositor 層を事前確保して、初回 transition が飛ばされないようにする */
.site-header__logo {
	opacity: 0;
	transition: opacity 0.6s ease-out;
	will-change: opacity;
	pointer-events: none; /* 非表示中はクリックさせない */
}

.site-header__logo.is-revealed {
	opacity: 1;
	pointer-events: auto;
}

.hero__scroll-text {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	color: var(--color-navy);
}

.hero__scroll-line {
	position: relative;
	margin-top: 20px;
	width: 2px;
	height: 180px;
	overflow: hidden;
}

.hero__scroll-line::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 1px;
	height: 100%;
	background: rgba(2, 33, 74, 0.25);
}

.hero__scroll-indicator {
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: 50px;
	background: var(--color-navy);
	animation: hero-scroll-indicator 2.4s cubic-bezier(0.65, 0.05, 0.35, 1) 3.2s infinite;
}

/* スクロールしたら「scroll」と縦棒をフェードアウト（is-hidden は top.js が付与）。
   .hero__scroll 自体の opacity はロード演出の animation が保持しているため、子要素で消す */
.hero__scroll > * {
	transition: opacity 0.4s ease;
}

.hero__scroll.is-hidden > * {
	opacity: 0;
}

@keyframes hero-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes hero-scroll-indicator {
	0%   { transform: translateY(0); opacity: 1; }
	70%  { transform: translateY(130px); opacity: 1; }
	100% { transform: translateY(130px); opacity: 0; }
}

@keyframes hero-scroll-indicator-short {
	0%   { transform: translateY(0); opacity: 1; }
	70%  { transform: translateY(60px); opacity: 1; }
	100% { transform: translateY(60px); opacity: 0; }
}

@keyframes hero-scroll-indicator-tablet {
	0%   { transform: translateY(0); opacity: 1; }
	70%  { transform: translateY(195px); opacity: 1; }
	100% { transform: translateY(195px); opacity: 0; }
}

/* 横長ウィンドウ時：中央配置のロゴとscroll線が重なるためscrollを短縮する。
   .site が zoom で縮拡される設計上、純粋な高さ検知では拾えないため
   アスペクト比（横:縦）で判定する。
   - PC域 (≥768px)：2:1 以上の横長で発動（短い縦のPC窓、超ワイド）
   - SP域 (≤767px)：7:10 以上の横長で発動（Mac半分幅、横向きスマホ等） */
@media (min-width: 768px) and (min-aspect-ratio: 2/1),
       (max-width: 767px) and (min-aspect-ratio: 7/10) {
	.hero__scroll-line {
		height: 90px;
	}

	.hero__scroll-indicator {
		height: 30px;
		animation-name: hero-scroll-indicator-short;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__logo,
	.hero__scroll,
	.site-header {
		opacity: 1;
		animation: none;
	}

	.hero__scroll-indicator {
		animation: none;
	}

	.site-header__logo {
		transition: none;
	}
}

/* ---------- FV slider（背景：盛り付け写真 / 手前：パウチ） ----------
   JS（fv-slider.js）が --fv-offset に「中央の商品からのずれ（-1 / 0 / 1）」を入れる。
   背景は --fv-bg-step、パウチは --fv-pouch-step ずつ動き、その差で奥行きを出す。
   動きの気持ちよさ（速度・イージング・拡大率・寄せ幅）はここの変数で調整する。 */
.fv-slider {
	--fv-offset: 0;
	--fv-peek: 0;                 /* ホバー中の商品の方向（-1 / 0 / 1）。JS が入れる */
	--fv-peek-steps: 0;           /* 2つ以上離れた商品をホバーしたときの追加の写真枚数。JS が入れる */
	--fv-bg-step: 640px;          /* 写真1枚分（600px + 余白40px） */
	--fv-pouch-step: 256px;       /* パウチ1個分。背景より小さくして奥行きを出す */
	/* 切り替えの動き：自動切り替えと、ユーザー操作（パウチのクリック／タップ・スワイプ）で別々に調整できる */
	--fv-auto-duration: 1.6s;                          /* 自動切り替え：ゆっくり動き出し、ゆっくり止まる */
	--fv-auto-ease: cubic-bezier(0.76, 0, 0.24, 1);
	--fv-user-duration: 0.9s;                          /* ユーザー操作：すぐ反応して、なめらかに減速して止まる */
	--fv-user-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--fv-duration: var(--fv-auto-duration);
	--fv-ease: var(--fv-auto-ease);
	--fv-hover-bg-scale: 1.1;     /* パウチホバー時の、そのパウチの商品写真の拡大率 */
	--fv-hover-bg-shift: 80px;    /* パウチホバー時に背景の写真全体をスライドさせる量 */
	--fv-hover-shift: 24px;       /* パウチホバー時に左右のパウチを中央へ寄せる量 */
	--fv-hover-duration: 0.6s;
	--fv-active-scale: 1;         /* 選択中パウチの拡大率（SPのみ拡大） */
	--fv-active-hover-scale: 1.06; /* 選択中パウチにマウスオンしたときの、さらに拡大する倍率 */
	--fv-drag-bg: 0px;            /* スワイプ／ドラッグ中の背景のずれ。JS が入れる */
	--fv-drag-pouch: 0px;         /* スワイプ／ドラッグ中のパウチのずれ。JS が入れる */
	position: relative;
	padding: 100px 0 20px; /* 下余白はパウチの影が切れないように */
	overflow: hidden;
}

.fv-slider__stage {
	position: relative;
	left: 50%;
	width: 1880px;
	height: 458px;
	margin-left: -940px;
	touch-action: pan-y; /* 横方向のスワイプはスライダー、縦方向はページスクロール */
	cursor: grab;
}

.fv-slider.is-dragging .fv-slider__stage {
	cursor: grabbing;
}

/* ホバー時のスライドは切り替え（.fv-slider__track）とは別要素で動かし、反応を速くする */
.fv-slider__bg {
	translate: calc(var(--fv-peek-steps) * var(--fv-bg-step) + var(--fv-peek) * var(--fv-hover-bg-shift)) 0;
	transition: translate var(--fv-hover-duration) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fv-slider__track {
	display: flex;
	gap: 40px;
	transform: translate3d(calc(var(--fv-offset) * -1 * var(--fv-bg-step) + var(--fv-drag-bg)), 0, 0);
}

.fv-slider__slide {
	flex-shrink: 0;
	width: 600px;
	height: 400px;
	border-radius: 30px;
	overflow: hidden;
	transition: transform var(--fv-hover-duration) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fv-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fv-slider__pouches {
	position: absolute;
	left: 0;
	right: 0;
	top: 288px;
	display: flex;
	justify-content: center;
	gap: 86px;
	transform: translate3d(calc(var(--fv-offset) * -1 * var(--fv-pouch-step) + var(--fv-drag-pouch)), 0, 0);
}

.fv-slider__pouch-item {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 170px;
	height: 170px;
}

.fv-slider__pouch {
	display: block;
	padding: 0;
	transform-origin: 50% 100%;
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), translate var(--fv-hover-duration) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fv-slider__pouch img {
	width: auto;
	max-width: 170px;
	height: 170px;
	filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.15));
}

.fv-slider__pouch.is-active {
	transform: scale(var(--fv-active-scale));
}

.fv-slider__pouch:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 6px;
}

/* ユーザー操作で切り替えたときは、操作用の速度・イージングに差し替える（JS が is-user を付け外しする） */
.fv-slider.is-user {
	--fv-duration: var(--fv-user-duration);
	--fv-ease: var(--fv-user-ease);
}

/* 位置決め後に is-ready を付与してからトランジションを有効化（初期表示で滑らせない） */
.fv-slider.is-ready .fv-slider__track,
.fv-slider.is-ready .fv-slider__pouches {
	transition: transform var(--fv-duration) var(--fv-ease);
}

/* ドラッグ中は指に追従させるためトランジションを切る */
.fv-slider.is-dragging .fv-slider__track,
.fv-slider.is-dragging .fv-slider__pouches {
	transition: none;
}

/* パウチにマウスオン：パウチ自体は拡大せず、そのパウチの商品の写真を拡大。
   選択中より左右の商品なら、背景の写真全体を少しスライドさせてその写真を中央へ寄せ、パウチも少し中央へ寄せる。
   拡大した写真が隣と重ならないよう、拡大ではみ出す量（600px × (拡大率 - 1) / 2）は余白 40px 未満にする。
   ホバー判定は動かない li 側で取る（パウチが動いてカーソルから外れ、チラつくのを防ぐ）。 */
@media (hover: hover) {
	.fv-slider__slide.is-hover {
		transform: scale(var(--fv-hover-bg-scale));
	}

	/* 選択中のパウチは、マウスオンで少しだけ拡大（外すと元に戻る） */
	.fv-slider__pouch-item:hover > .fv-slider__pouch.is-active {
		transform: scale(calc(var(--fv-active-scale) * var(--fv-active-hover-scale)));
	}

	.fv-slider__pouch-item:hover > .fv-slider__pouch.is-left {
		translate: var(--fv-hover-shift) 0;
	}

	.fv-slider__pouch-item:hover > .fv-slider__pouch.is-right {
		translate: calc(var(--fv-hover-shift) * -1) 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fv-slider.is-ready .fv-slider__track,
	.fv-slider.is-ready .fv-slider__pouches,
	.fv-slider__pouch,
	.fv-slider__bg,
	.fv-slider__slide {
		transition: none;
	}
}

/* ---------- Brand statement ---------- */
.brand {
	padding: 184px 0 0 150px;
	background: var(--color-cream);
}

.brand__lead {
	font-family: var(--font-jp);
	font-weight: 800;
	font-size: 40px;
	line-height: 1.8;
	color: var(--color-accent);
}

.brand__body {
	margin-top: 45px;
	font-family: var(--font-jp);
	font-weight: 600;
	font-size: 18px;
	line-height: 2;
	color: var(--color-navy);
}

/* ---------- Information ---------- */
.information {
	padding: 200px 50px 0;
}

.information__card {
	position: relative;
	min-height: 664px;
	padding: 96px 200px;
	background: var(--color-accent);
	border-radius: 70px;
	color: var(--color-cream);
}

.information__heading {
	position: absolute;
	left: 90px;
    top: 95px;
	margin: 0;
}

.information__heading span {
	display: inline-block;
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 30px;
	line-height: 1;
	color: var(--color-cream);
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: 0.2em;
}

.information__list {
	margin: 0;
}

.information__item {
	border-bottom: 1px solid var(--color-line-cream);
	padding-top: 44px;
}

.information__item:first-child {
	padding-top: 0;
}

.information__link {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 24px;
	row-gap: 26px;
	padding-bottom: 41px;
	color: var(--color-cream);
	text-decoration: none;
}

.information__link--placeholder {
	cursor: default;
}

.information__meta {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 20px;
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
}

.information__date {
	letter-spacing: 0.02em;
}

.information__title {
	grid-column: 1;
	grid-row: 2;
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.6;
}

.information__arrow {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.information__arrow img {
	width: 11px;
    height: 30px;
    margin-top: 38px;
	transition: transform 0.3s ease;
}

.information__title {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
	transition: text-decoration-color 0.3s ease;
}

@media (hover: hover) {
	a.information__link:hover .information__arrow img {
		transform: translateX(6px);
	}

	a.information__link:hover .information__title {
		text-decoration-color: currentColor;
	}
}

/* SP：タップ中は hover と同じ見た目にする（.is-touch は touch.js が付け外しする） */
a.information__link.is-touch .information__arrow img {
	transform: translateX(6px);
}

a.information__link.is-touch .information__title {
	text-decoration-color: currentColor;
}

.information__more {
	position: absolute;
	right: 200px;
	bottom: 100px;
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	color: var(--color-cream);
	text-decoration: none;
}

@media (hover: hover) {
	.information__more:hover {
		text-decoration: underline;
		text-underline-offset: 4px;
	}
}

.information__more.is-touch {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- Lineup ---------- */
.lineup {
	position: relative;
	padding: 200px 50px 0;
}

.lineup__heading {
	position: absolute;
	left: 55px; /* 見出しの中心をヘッダーロゴのマーク付近に合わせる */
	top: 200px;
	margin: 0;
}

.lineup__heading span {
	display: inline-block;
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 30px;
	line-height: 1;
	color: var(--color-navy);
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: 0.2em;
}

.lineup__grid {
	display: grid;
	grid-template-columns: 460px 460px;
	column-gap: 60px;
	row-gap: 100px;
	margin-left: 200px;
}

.product-card {
	width: 460px;
}

.product-card__head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.product-card__mark {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
}

.product-card__head-text {
	padding-top: 0px;
}

/* かなの左右の余白（「う」など）で数字より右に見えるため、palt で詰めて
   シリーズ名・商品数・説明文の書き出し位置を見た目で揃える */
.product-card__head-text,
.product-card__sub {
	font-feature-settings: 'palt' 1;
}

.product-card__title {
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	color: var(--color-navy);
	margin-left: -2px;
}

.product-card__sku {
	margin-top: 0;
	font-family: var(--font-jp);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-navy);
}

.product-card__sub {
	margin-top: 10px;
	margin-left: 40px;
	min-height: 45px;
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-navy);
}

.product-card__media {
	position: relative;
	margin-top: 19px;
	width: 460px;
	height: 306px;
}

.product-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 30px;
}

/* 写真右下に重ねるパッケージ */
.product-card__pouch {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: auto;
	height: 166px;
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.25));
}

.product-card__body {
	margin-top: 38px;
	font-feature-settings: 'palt' 1;
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.8;
	color: var(--color-text);
	text-align: justify;
}

/* ---------- Craft ---------- */
.craft {
	padding: 200px 50px 0;
}

.craft__inner {
	position: relative;
	height: 702px;
	border-radius: 40px;
	overflow: hidden;
	color: var(--color-cream);
}

.craft__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.craft__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.craft__content {
	position: relative;
	z-index: 1;
	height: 100%;
}

.craft__logo {
	position: absolute;
	left: 100px;
	top: 182px;
	width: 280px;
	height: 269px;
	display: grid;
	place-items: center;
}

.craft__logo img {
	width: 132px;
	height: auto;
}

.craft__label {
	position: absolute;
	left: 439px;
    top: 106px;
	width: 44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-family: var(--font-jp);
	font-weight: 600;
	font-size: 44px;
	line-height: 1.2;
	color: var(--color-cream);
}

.craft__label-bracket {
	display: inline-block;
	line-height: 1;
	transform: rotate(90deg);
}

.craft__label-text {
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: 0.22em;
}

.craft__text {
	position: absolute;
	left: 600px;
	top: 127px;
	width: 480px;
	color: var(--color-cream);
}

.craft__title {
	font-family: var(--font-jp);
	font-weight: 800;
	font-size: 32px;
	line-height: 1.8;
	letter-spacing: 0.1em;
	color: var(--color-cream);
}

.craft__body {
	margin-top: 31px;
	font-feature-settings: 'palt' 1;
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 16px;
	line-height: 2.2;
	color: var(--color-cream);
}

/* 本文の下の注記（賞味期限など）。本文より一回り小さく */
.craft__note {
	margin-top: 16px;
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-cream);
}

/* ---------- Message（社長メッセージ） ---------- */
.message {
	position: relative;
	padding-top: 180px;
}

.message__photo {
	width: 977px;
	height: 778px;
	border-radius: 0 50px 50px 0;
	overflow: hidden;
}

.message__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 67%;
}

/* 写真の下部に重ねる白カード（写真上端から370px下がった位置） */
.message__card {
	position: relative;
	margin: -408px 0 0 450px;
	width: 830px;
	padding: 100px 50px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50px 0 0 50px;
}

.message__title {
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 40px;
	line-height: 1.6;
	color: var(--color-navy);
}

.message__body {
	display: flex;
	flex-direction: column;
	gap: 52px;
	margin-top: 70px;
	color: var(--color-text);
}

.message__subtitle {
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.8;
}

.message__text {
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.8;
	text-align: justify;
	font-feature-settings: 'palt' 1;
}

.message__subtitle + .message__text {
	margin-top: 22px;
}

.message__sign {
	padding-right: 14px;
	font-family: var(--font-jp);
	font-weight: 500;
	line-height: 1.8;
	text-align: right;
}

.message__sign-org {
	display: block;
	font-size: 14px;
}

.message__sign-name {
	display: block;
	font-size: 24px;
}

/* ---------- Initiatives（うちのやの取り組み） ----------
   管理画面「取り組み」で登録された時だけ出力される。
   1枚の紺カードの中に、縦書きラベル＋取り組みを縦に並べる。 */
.initiatives {
	padding: 200px 50px 0;
}

.initiatives__inner {
	position: relative;
	min-height: 739px;
	padding: 140px 100px 165px 244px;
	border-radius: 40px;
	overflow: hidden;
	color: var(--color-cream);
}

.initiatives__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

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

.initiatives__heading {
	position: absolute;
	left: 100px;
	top: 115px;
	z-index: 1;
	width: 44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	font-family: var(--font-jp);
	font-weight: 600;
	font-size: 44px;
	line-height: 1.2;
	color: var(--color-cream);
}

.initiatives__heading-bracket {
	display: inline-block;
	line-height: 1;
	transform: rotate(90deg);
}

.initiatives__heading-text {
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: 0.22em;
}

.initiatives__list {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 120px;
}

.initiative__head {
	display: flex;
	align-items: flex-start;
}

/* 写真＋右下にはみ出すパッケージ */
.initiative__media {
	position: relative;
	flex-shrink: 0;
	width: 280px;
	height: 187px;
	margin-right: 78px;
}

.initiative__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.initiative__pouch {
	position: absolute;
	right: -38px;
	bottom: 0;
	width: auto;
	max-width: 120px;
	height: 104px;
	object-fit: contain;
	object-position: right bottom;
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.25));
}

.initiative__title {
	padding-top: 17px;
	font-family: var(--font-jp);
	font-weight: 800;
	font-size: 30px;
	line-height: 1.8;
	letter-spacing: 0.1em;
	color: var(--color-cream);
}

.initiative__body {
	margin-top: 50px;
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 16px;
	line-height: 2.2;
	color: var(--color-cream);
	font-feature-settings: 'palt' 1;
}

.initiative__body p + p {
	margin-top: 1em;
}

/* 2件以上：1件ずつ切り替えるスライダー（is-slider-ready は initiatives-slider.js が付与）
   全スライドを同じセルに重ねるので、カードの高さは一番長い取り組みに揃う */
.initiatives[data-initiatives-slider] .initiatives__inner {
	padding-bottom: 100px;
}

.initiatives.is-slider-ready .initiatives__list {
	display: grid;
}

.initiatives.is-slider-ready .initiative {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

.initiatives.is-slider-ready .initiative.is-active {
	opacity: 1;
	visibility: visible;
}

.initiatives__controls {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 70px;
}

.initiatives__arrow {
	position: relative;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--color-cream);
	border-radius: 50%;
	transition: background-color 0.3s ease;
}

.initiatives__arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 1px solid var(--color-cream);
	border-right: 1px solid var(--color-cream);
	transform: translate(-65%, -50%) rotate(45deg);
}

.initiatives__arrow--prev::before {
	transform: translate(-35%, -50%) rotate(-135deg);
}

.initiatives__dots {
	display: flex;
	align-items: center;
	gap: 14px;
}

.initiatives__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var(--color-cream);
	border-radius: 50%;
	transition: background-color 0.3s ease;
}

.initiatives__dot.is-active {
	background: var(--color-cream);
}

.initiatives__arrow:focus-visible,
.initiatives__dot:focus-visible {
	outline: 2px solid var(--color-cream);
	outline-offset: 4px;
}

@media (hover: hover) {
	.initiatives__arrow:hover {
		background-color: rgba(255, 251, 226, 0.15);
	}

	.initiatives__dot:hover {
		background-color: rgba(255, 251, 226, 0.5);
	}
}

/* SP：タップ中は hover と同じ見た目にする（.is-touch は touch.js が付け外しする） */
.initiatives__arrow.is-touch {
	background-color: rgba(255, 251, 226, 0.15);
}

.initiatives__dot.is-touch {
	background-color: rgba(255, 251, 226, 0.5);
}

@media (prefers-reduced-motion: reduce) {
	.initiatives.is-slider-ready .initiative {
		transition: none;
	}
}

/* ---------- Culture (infinite horizontal loop) ---------- */
.culture {
	position: relative;
	margin-top: 200px;
	height: 285px;
	overflow: hidden;
}

.culture__title {
	position: absolute;
	left: 250px;
	top: 37px;
	z-index: 2;
	margin: 0;
	font-family: var(--font-jp);
	font-weight: 800;
	font-size: 42px;
	line-height: 1.6;
	letter-spacing: 0.1em;
	color: var(--color-cream);
}

.culture__list {
	display: flex;
	height: 100%;
	width: max-content;
	animation: culture-loop 60s linear infinite;
}

.culture__item {
	width: 380px;
	height: 100%;
	flex-shrink: 0;
}

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

@keyframes culture-loop {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.culture__list {
		animation: none;
	}
}

/* ---------- Company ---------- */
.company {
	position: relative;
	padding: 192px 50px 0 350px;
}

.company__heading {
	position: absolute;
	left: 55px; /* 見出しの中心をヘッダーロゴのマーク付近に合わせる */
	top: 195px;
	margin: 0;
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 30px;
	line-height: 1;
	color: var(--color-navy);
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: 0.42em;
}

.company__heading span {
	display: inline;
}

.company__list {
	margin: 0;
	padding: 0;
}

.company__row {
	display: grid;
    grid-template-columns: 200px 1fr;
    align-items: start;
    padding: 18px 0 42px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--color-navy);
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-navy);
}

.company__row:first-child {
	padding: 0 0 42px;
	margin-bottom: 26px;
}

.company__row:last-child {
	margin-bottom: 0;
}

.company__row dt,
.company__row dd {
	margin: 0;
}

.company__president {
	display: block;
	margin-bottom: 36px;
}

/* 表の右下の時点表記。本文より一回り小さく、右寄せ */
.company__note {
	margin-top: 16px;
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.6;
	text-align: right;
	color: var(--color-navy);
}

/* ==========================================================================
   SP — fixed 390px width
   ========================================================================== */
@media (max-width: 767px) {

	.top-page {
		width: 100%;
	}

	/* ---------- Hero ---------- */
	.hero {
		height: calc(100vh / 100vw * 390px);
		min-height: 500px;
	}

	.hero__logo img {
		width: 120px;
		height: 121px;
		margin-top: 0;
	}

	.hero__scroll {
		top: auto;
		bottom: 0;
	}

	/* ---------- FV slider ---------- */
	.fv-slider {
		--fv-bg-step: 288px;
		--fv-pouch-step: 90px;
		--fv-active-scale: 1.43;
		padding: 80px 0 0;
	}

	.fv-slider__stage {
		width: 854px;
		height: 250px;
		margin-left: -427px;
	}

	.fv-slider__track {
		gap: 10px;
	}

	.fv-slider__slide {
		width: 278px;
		height: 185px;
		border-radius: 15px;
	}

	.fv-slider__pouches {
		top: 165px;
		gap: 20px;
	}

	.fv-slider__pouch-item {
		width: 70px;
		height: 70px;
	}

	.fv-slider__pouch img {
		max-width: 70px;
		height: 70px;
		filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.15));
	}

	/* ---------- Brand statement ---------- */
	.brand {
		padding: 135px 20px 0;
	}

	.brand__lead {
		font-size: 36px;
		line-height: 1.3;
	}

	.brand__body {
		margin-top: 41px;
		font-weight: 500;
		font-size: 13px;
		line-height: 1.8;
	}

	/* ---------- Information ---------- */
	.information {
		padding: 160px 20px 0;
	}

	.information__card {
		min-height: 617px;
		padding: 96px 20px 100px 72px;
		border-radius: 37px;
	}

	.information__heading {
		left: 22px;
		top: 100px;
	}

	.information__heading span {
		font-size: 18px;
	}

	.information__link {
		grid-template-columns: 1fr;
		row-gap: 13px;
		padding-bottom: 37px;
	}

	.information__item {
		padding-top: 37px;
	}

	.information__meta {
		gap: 20px;
		font-size: 13px;
	}

	.information__title {
		font-size: 12px;
		line-height: 1.6;
	}

	.information__arrow {
		display: none;
	}

	.information__more {
		right: 20px;
		bottom: 100px;
		font-size: 14px;
	}

	/* ---------- Lineup ---------- */
	.lineup {
		padding: 159px 20px 0 92px;
	}

	.lineup__heading {
		left: 30.5px; /* 縦書き見出し（幅18px）の中心をヘッダーロゴのマーク中心（x≒39.6px）に合わせる */
		top: 160px;
	}

	.lineup__heading span {
		font-size: 18px;
	}

	.lineup__grid {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 60px;
		margin-left: 0;
	}

	.product-card {
		width: 100%;
	}

	.product-card__head {
		gap: 10px;
	}

	.product-card__mark {
		width: 22px;
		height: 22px;
	}

	.product-card__head-text {
		padding-top: 0px;
	}

	.product-card__title {
		font-size: 16px;
	}

	.product-card__sku {
		font-size: 12px;
	}

	.product-card__sub {
		margin-top: 12px;
		margin-left: 32px; /* マーク(22px)＋間隔(10px)。シリーズ名・商品数と左端を揃える */
		min-height: 39px;
		font-size: 14px;
		line-height: 1.4;
	}

	.product-card__media {
		margin-top: 9px;
		width: 100%;
		height: 185px;
	}

	.product-card__photo {
		border-radius: 15px;
	}

	.product-card__pouch {
		right: 5px;
		bottom: 5px;
		height: 99px;
		filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.25));
	}

	.product-card__body {
		margin-top: 16px;
		font-size: 13px;
		line-height: 1.6;
	}

	/* ---------- Craft ---------- */
	.craft {
		padding: 160px 20px 0;
	}

	.craft__inner {
		height: 800px;
		border-radius: 38px;
	}

	.craft__logo {
		left: 72px;
		top: 69px;
		width: 258px;
		height: 183px;
	}

	.craft__logo img {
		width: 77px;
	}

	.craft__label {
		left: 32px;
		top: 49px;
		width: 24px;
		gap: 3px;
		font-size: 22px;
	}

	.craft__label-text {
		letter-spacing: 0.32em;
	}

	.craft__text {
		left: 72px;
		top: 293px;
		width: 258px;
	}

	.craft__title {
		font-weight: 600;
		font-size: 20px;
		line-height: 1.8;
		letter-spacing: 0;
	}

	.craft__body {
		margin-top: 32px;
		font-size: 13px;
		line-height: 1.8;
		text-align: justify;
	}

	.craft__note {
		margin-top: 12px;
		font-size: 11px;
	}

	/* ---------- Message ---------- */
	.message {
		padding-top: 160px;
	}

	.message__photo {
		width: 365px;
		height: 352px;
		border-radius: 0 30px 30px 0;
	}

	.message__photo img {
		object-position: 50% 30%;
	}

	.message__card {
		margin: 0;
		width: auto;
		padding: 43px 20px 0;
		background: none;
		border-radius: 0;
	}

	.message__title {
		font-weight: 800;
		font-size: 24px;
	}

	.message__body {
		gap: 30px;
		margin-top: 22px;
	}

	.message__subtitle {
		font-weight: 600;
		font-size: 16px;
		line-height: 1.6;
	}

	.message__subtitle + .message__text {
		margin-top: 12px;
	}

	.message__text {
		font-size: 13px;
		line-height: 1.6;
	}

	.message__sign {
		padding-right: 0;
	}

	.message__sign-org {
		font-size: 12px;
	}

	.message__sign-name {
		font-size: 20px;
	}

	/* ---------- Initiatives ---------- */
	.initiatives {
		padding: 160px 20px 0;
	}

	.initiatives__inner {
		min-height: 0;
		padding: 100px 20px 100px 72px;
		border-radius: 38px;
	}

	.initiatives__heading {
		left: 20px;
		top: 50px;
		width: 20px;
		gap: 3px;
		font-size: 20px;
	}

	.initiatives__heading-text {
		letter-spacing: 0.32em;
	}

	.initiatives__list {
		gap: 80px;
	}

	.initiative__head {
		flex-direction: column;
	}

	.initiative__media {
		width: 232px;
		height: 154px;
		margin-right: 0;
	}

	.initiative__pouch {
		right: -26px;
		max-width: 90px;
		height: 86px;
	}

	.initiative__title {
		margin-top: 43px;
		padding-top: 0;
		font-weight: 600;
		font-size: 20px;
		letter-spacing: 0;
	}

	.initiative__body {
		margin-top: 32px;
		font-size: 13px;
		line-height: 1.8;
		text-align: justify;
	}

	.initiatives[data-initiatives-slider] .initiatives__inner {
		padding-bottom: 60px;
	}

	.initiatives__controls {
		gap: 12px;
		margin-top: 50px;
	}

	.initiatives__arrow {
		width: 38px;
		height: 38px;
	}

	.initiatives__arrow::before {
		width: 8px;
		height: 8px;
	}

	/* 10件程度でも矢印と1行に収まる間隔。超える場合は折り返す */
	.initiatives__dots {
		flex-wrap: wrap;
		min-width: 0;
		gap: 8px;
	}

	.initiatives__dot {
		width: 8px;
		height: 8px;
	}

	/* ---------- Culture ---------- */
	.culture {
		margin-top: 160px;
		height: 188px;
	}

	.culture__title {
		left: 20px;
        top: 28px;
        font-size: 30px;
        line-height: 1.45;
	}

	.culture__item {
		width: 250px;
	}

	/* ---------- Company ---------- */
	.company {
		padding: 156px 20px 0 92px;
	}

	.company__heading {
		left: 30.5px; /* 縦書き見出し（幅18px）の中心をヘッダーロゴのマーク中心（x≒39.6px）に合わせる */
		top: 156px;
		font-size: 18px;
	}

	.company__row {
		grid-template-columns: 72px 1fr;
        padding: 15px 0 32px;
        margin-bottom: 20px;
        font-size: 13px;
        line-height: 1.7;
	}

	.company__row:first-child {
		padding: 0 0 32px;
		margin-bottom: 20px;
	}

	.company__president {
		display: block;
		margin-bottom: 32px;
	}

	.company__note {
		margin-top: 12px;
		font-size: 11px;
	}

}