@charset "utf-8";
/* =========================================================
   トップページ（page-front.php）
   カンプ: Figma takeuchi-01 / 基準幅1440px
   ========================================================= */

/* ---------------------------------------------------------
   ブレークポイント（max-widthは大きい順に並べる）

   | 名前 | 幅      | 役割                                   |
   |------|---------|----------------------------------------|
   | lg   | 1200px  | タブレット。PCの組みのまま余白を詰める |
   | md   |  767px  | スマートフォン。縦積み・文字を下寄せ   |
   | sm   |  480px  | 小型スマートフォン。装飾の円を外す     |

   400pxはキャッチの改行だけの例外指定（ファイル末尾）
   --------------------------------------------------------- */

.front {
	--green: #04471f;
	/* ボタン（CTA）の背景。ヘッダーのお問い合わせCTA（#008236 / #01642a）に
	   合わせた階調。--green（#04471f）は文字・見出し・装飾に使い、
	   面で塗るボタンはこちらを使う（2026-09-09にユーザー判断） */
	--green-cta: #01642a;
	--green-cta-hover: #004d20;
	--yellow: #fde500;
	--ink: #000;
	--ink-sub: rgba(43, 56, 43, .82);
	--mv-h: 800;
	--mv-w: 1440;
}

/* STORK SEは #main に max-width:900px を掛けている。
   トップページは全セクションが全幅なので、このページだけ外す */
.front #main {
	max-width: none;
	width: 100%;
}

/* =========================================================
   ① メインビジュアル
   ========================================================= */
.mv {
	position: relative;
	/* aspect-ratioとmin-heightを併記すると、高さが下限に達したとき
	   幅のほうが比率に合わせて膨らむ。width:100%で止める */
	width: 100%;
	aspect-ratio: var(--mv-w) / var(--mv-h);
	/* 1201px以上でだけ効く下限（767px以下はmdで0、768〜1200pxはlgで650pxに上書き）。
	   1201pxちょうどの高さは比率だと667pxで、中身（円の下端まで661px）に5pxしか
	   残らない。1200pxのブレークポイントで上の余白が88→130pxに跳ねるのに、高さは
	   幅に比例して小さいままなのが原因。下限を700pxにして余白を40px確保する */
	min-height: 700px;
	/* 比率のままだと広い画面ほど高さだけが伸び、中身の下に空きが増える
	   （--mv-h が904だった時点で1920px幅で516px・2560px幅で917px。2026-09-16に実測）。
	   基準幅1440pxでの高さで頭打ちにして、中身の位置を1440px幅と揃える。
	   比率と上限を同じ変数から出しているので、常に1440pxを超えたところから効く */
	max-height: calc(var(--mv-h) * 1px);
	overflow: hidden;
}
.mv__viewport {
	position: absolute;
	inset: 0;
}

.mv__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	/* visibility に遅延を入れないと、退場側がフェードせず即消えて背景が透ける */
	transition: opacity .5s ease, visibility 0s linear .5s;
}
.mv__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .5s ease, visibility 0s;
}
/* 動きを減らす設定のときは切り替えを瞬時にする。
   .mv__slide だけだと .mv__slide.is-active（詳細度0-2-0）に負けて、
   退場側は瞬時に消えるのに入場側だけフェードインする。両方を指定する */
@media (prefers-reduced-motion: reduce) {
	.mv__slide,
	.mv__slide.is-active { transition: none; }
}

.mv__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 人物や主題は右寄りにいないので中央基準でよい */
	object-position: center;
}

/* 背景の柄と文字が干渉するのを防ぐ白のグラデーション。
   カンプではスライド2にだけ下59%で入っていたが、それだと文字位置に届かず
   効果が見えなかったため80%まで広げて中間を厚くした。
   タブレットはカンプ通りスライド2のみ、SPは3枚とも出す。
   PC（1201px以上・2枚並べ）は両方に出して濃くする（各ブレークポイント参照） */
.mv__veil {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 80%;
	background: linear-gradient(0deg,
		rgba(254, 252, 248, .95) 0%,
		rgba(254, 252, 248, .72) 45%,
		rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}

.mv__inner {
	/* 位置を決めている値。DevToolsでこの2つを変えれば上下できる
	   （PC・1201px以上は2枚並べの指定で padding を上書きしているので効かない）
	   --mv-top    : 上からの開始位置（ラベルの上端）
	   --catch-gap : リードとキャッチの間隔
	   MVの高さを904→800pxに下げたので、中身も上へ詰めた（2026-09-16）。
	   ラベルとリードが50px、キャッチから下は --catch-gap の15pxぶんも足して65px上がる。
	   詰めないと1201〜1307pxの帯で中身がMVからはみ出す（円のSVGを含めた下端で実測） */
	--mv-top: 130px;
	--catch-gap: 28px;
	position: relative;
	/* --mv-w は aspect-ratio 用の単位なし数値なので、そのままでは max-width に効かない */
	max-width: calc(var(--mv-w) * 1px);
	height: 100%;
	margin-inline: auto;
	padding: var(--mv-top) 60px 0;
	box-sizing: border-box;
}

/* --- ラベル。右辺が斜めに落ちる白い帯 --- */
.mv__label {
	display: inline-block;
	/* 元は171pxで、文字の右に3.3pxしか残らず下のテキスト（キャッチ519px・
	   注記365px）に対して短すぎた。左のパディング11pxと右の余白が揃う179pxにした
	   （2026-09-09に実測・ユーザー判断） */
	width: 179px;
	margin: 0;
	padding: 6px 0 6px 11px;
	background: #fff;
	/* SVGの path（右上158.1/171.8 = 92.07%）をclip-pathで再現。
	   %指定のままだと幅を変えたとき斜めの角度も変わってしまうため、
	   元の171pxでの13.6pxをpxで固定する。SPで幅が変わっても角度が揃う */
	clip-path: polygon(0 0, calc(100% - 13.6px) 0, 100% 100%, 0 100%);
	color: var(--ink);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: .02em;
	box-sizing: border-box;
}

.mv__lead {
	margin: 19px 0 0;
	color: var(--ink);
	font-family: "Noto Sans JP", sans-serif;
	/* 1440pxで26px。狭い画面ほど画像に対して小さく見えるので、
	   単純な比例(1.81vw)より強めに効かせて下限も上げている */
	font-size: clamp(17px, 2.3vw, 26px);
	font-weight: 500;
	line-height: 1.73;
}

.mv__catch {
	margin: var(--catch-gap) 0 0;
	color: var(--green);
	font-family: "Noto Serif JP", serif;
	font-size: clamp(28px, 5.6vw, 64px);
	font-weight: 700;
	line-height: 1.3;
}

.mv__note {
	margin: 26px 0 0;
	color: var(--ink);
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(16px, 2.1vw, 24px);
	font-weight: 500;
	line-height: 1.54;
}

/* --- スライド2の丸アイコン3つ --- */
.mv__features {
	--gap: 26px;
	display: flex;
	gap: var(--gap);
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}
.feature-circle {
	position: relative;
	/* 3つ並べて入る幅を上限188pxで取る。狭い画面では自動的に縮む */
	width: min(188px, calc((100% - var(--gap) * 2) / 3));
	/* 中身をこの円の直径に比例させる。画面幅(vw)基準だと、幅に余裕がある
	   600px前後で円だけ大きくフォントだけ小さくなり、中身が上に寄ってしまう */
	container-type: inline-size;
	text-align: center;
}
.feature-circle::before {
	/* カンプの円は塗りではなく緑の線（stroke #648761 / 1.45px）で、
	   しかも上部が開いていてそこにアイコンが重なる。CSSでは再現できないのでSVGをそのまま敷く */
	content: "";
	position: absolute;
	/* カンプの165pxだと下段の「使用しません」が円の外へ出る
	   （y=186での円の半幅33pxに対し文字は半幅43.5px）。188pxに広げて収めた */
	top: 16cqw;
	left: 0;
	width: 100%;
	aspect-ratio: 188 / 185;
	background: url(../../images/circle.svg) no-repeat center / 100% 100%;
	z-index: 0;
}
.feature-circle__icon,
.feature-circle__title,
.feature-circle__note {
	position: relative;
	z-index: 1;
	display: block;
}
.feature-circle__icon {
	/* カンプはアイコンの上端を揃える（下端揃えだと小さいアイコンが沈んで見える）。
	   枠は96px確保して、タイトルの開始位置を3つとも同じにする */
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 51cqw;
}
.feature-circle__icon img {
	display: block;
	width: auto;
	max-height: 100%;
}
/* 葉のSVGは図形の上に29.3pxの余白があり（他は15〜17px）、
   そのままだと1つだけ13px下がって見える。画像側をずらして視覚的な上端を揃える */
.feature-circle--eco .feature-circle__icon img {
	margin-top: -6.9cqw;
}

.feature-circle__title {
	margin-top: 8px;
	padding-inline: 14px;
	color: var(--green);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 10.6cqw;
	font-weight: 500;
	line-height: 1.45;
}
.feature-circle__note {
	padding-inline: 14px;
	color: var(--ink-sub);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 7.4cqw;
	font-weight: 400;
	line-height: 1.64;
}

/* --- ドット --- */
.mv__dots {
	position: absolute;
	right: 40px;
	bottom: 32px;
	z-index: 2;
	display: flex;
	gap: 12px;
}
.mv__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	background: rgba(255, 255, 255, .6);
	border: 1px solid var(--green);
	border-radius: 50%;
	cursor: pointer;
	transition: background .3s ease;
}
.mv__dot.is-active {
	background: var(--green);
}
.mv__dot:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
}

/* グラデーションはカンプではスライド2だけ。PC・タブレットはそれに従う。
   SPは背景の柄と文字が近く読みにくいので3枚とも出す（下のSP指定を参照） */
@media (min-width: 768px) {
	.mv__slide:not(.mv__slide--02) .mv__veil {
		display: none;
	}
}

/* =========================================================
   PC（1201px以上）: スライドをやめて、2枚を左右に並べる
   クライアント様の依頼（2026-10-22）。タブレット以下は今のスライドのまま。
   1024pxから並べると1枚が512pxになり、スライド2の円が縮みすぎるので
   サイトのPCの区切りに合わせた。
   スライド3（製版）を戻すと3等分になるが、1枚が約400pxになり、キャッチが4行以上に
   折り返して円も縮みすぎる。戻すときは文字と円の大きさを決め直すこと。
   1201〜1387pxでは円が188pxより小さくなる（1201pxで約157px）。円の中の文字は
   円の幅に比例する（cqw）ので、1201pxでも線の内側に収まることを目視した。
   同じ条件の @media が複数あると Autoptimize が片方を落とすので、
   min-width: 1201px はここ1か所だけにする（style.css のヘッダーの注記を参照）
   ========================================================= */
@media (min-width: 1201px) {
	/* 2枚の境目を白い線で区切る。写真どうしが接すると段ボールの切れ目が目立つ */
	.mv__viewport {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 4px;
		background: #fff;
	}
	.mv__slide,
	.mv__slide.is-active {
		position: relative;
		opacity: 1;
		visibility: visible;
		transition: none;
		/* 中身の開始位置をMVの高さ（cqh）から決めるため */
		container-type: size;
	}
	/* 主役（段ボール・耐油紙）は写真の右側にあるので、縦長に切るときは右へ寄せる */
	.mv__slide--01 .mv__bg { object-position: 88% center; }
	.mv__slide--02 .mv__bg { object-position: 75% center; }
	/* 半分の幅では写真の主役と文字が重なるので、文字は下に寄せて
	   グラデーションの上に載せる。グラデーションは両方に出す */
	.mv__slide:not(.mv__slide--02) .mv__veil { display: block; }
	.mv__veil {
		height: 100%;
		background: linear-gradient(0deg,
			rgba(254, 252, 248, .95) 0%,
			rgba(254, 252, 248, .88) 45%,
			rgba(254, 252, 248, .5) 68%,
			rgba(255, 255, 255, 0) 88%);
	}
	/* ラベルの位置を左右で揃えるため、下寄せではなく上から置く。
	   中身の多いスライド2（円まで含めて約440px）が下に64px残して収まる位置を
	   MVの高さから逆算している（1440px幅で300px・1201px幅で200px） */
	.mv__inner {
		--catch-gap: 16px;
		max-width: none;
		padding: calc(100cqh - 500px) 48px 0;
	}
	.mv__lead { font-size: 20px; }
	.mv__catch { font-size: 40px; }
	.mv__note { margin-top: 16px; font-size: 18px; }
	.mv__features { --gap: 16px; margin-top: 20px; }
	/* 並べて全部見せるので、切り替え用のドットは要らない */
	.mv__dots { display: none; }
}

/* =========================================================
   タブレット以下
   ========================================================= */
/* ===== lg: タブレット ===== */
@media (max-width: 1200px) {
	/* この帯（768〜1200px）は比率どおりの高さでは中身が入りきらない。
	   いちばん厳しいのは1116px前後で、円のSVGの下端が615pxまで来る。下限を650pxに
	   上げて35px残す（620pxのままだと5px。2026-09-16に実測）。
	   あわせて上の余白も130→88pxに詰める */
	.mv { min-height: 650px; }
	/* --catch-gap はベース（28px）と同値なので指定しない */
	.mv__inner { --mv-top: 88px; padding-inline: 40px; }

	/* 円は縮めない。160pxにすると下段の文字（「おいしさをキープ」半幅56px）が
	   円の下部の半幅42.5pxを超えてはみ出す。188px×3＋gapでも596pxなので収まる */
	.mv__features { --gap: 16px; }
}

/* ===== md: スマートフォン ===== */
@media (max-width: 767px) {
	.mv {
		/* 縦積みの中身が入るよう比率を縦長にする */
		aspect-ratio: 3 / 4;
		min-height: 0;
		/* 広い画面向けの上限（--mv-h の800px）は、この縦長比率と噛み合わない。
		   3/4だと幅600pxで高さが800pxに達するので、601〜767pxの帯が切られてしまう */
		max-height: none;
	}
	/* 写真の主題を上に見せて、文字は下のグラデーションの上に載せる。
	   狭い画面では両方を同じ場所で見せようとすると柄と文字が干渉する。
	   位置は --sp-bottom（下からの距離）だけで調整する。上から測ると
	   MVの高さが幅に連動するぶん、小さい画面で中身がはみ出す */
	.mv__inner {
		--sp-bottom: 130px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 0 20px var(--sp-bottom);
	}
	.mv__bg { object-position: center top; }
	/* 12pxでは文字が122.7pxになるので、PCと同じく左右の余白を11pxで揃えると158px */
	.mv__label { width: 158px; font-size: 12px; }
	.mv__lead { margin-top: 14px; }
	.mv__inner { --catch-gap: 16px; }
	.mv__note { margin-top: 16px; }
	.mv__features { --gap: 8px; margin-top: 16px; }
	.feature-circle__title { margin-top: 4px; padding-inline: 4px; }
	.feature-circle__note { padding-inline: 4px; }
	.mv__dots { right: 16px; bottom: 16px; }
}

/* =========================================================
   スマートフォン（480px以下）
   円の直径が110px前後まで縮むと文字が輪郭からはみ出すため、
   装飾である円は外してアイコンとテキストだけにする
   ========================================================= */
/* ===== sm: 小型スマートフォン ===== */
@media (max-width: 480px) {
	/* 画面が低いので、下寄せの余白はmd（130px）より詰める */
	.mv__inner { --sp-bottom: 64px; }

	/* この幅では円の直径が110px前後まで縮み、中に文字を入れると輪郭から
	   はみ出す。円は装飾なので外し、アイコンとテキストだけにする（ユーザー判断） */
	.feature-circle { container-type: normal; }
	.feature-circle::before { display: none; }
	.feature-circle__icon { height: 40px; }
	.feature-circle__title { padding-inline: 0; font-size: 11px; }
	.feature-circle__note { padding-inline: 0; font-size: 10px; }
	.feature-circle--eco .feature-circle__icon img { margin-top: -5px; }
}

/* ===== 400px以下: キャッチの改行のみ ===== */
@media (max-width: 400px) {
	.mv__catch-br { display: none; }
}


/* =========================================================
   共通パーツ
   ========================================================= */

/* --- セクション見出し（take_section_heading() が出力） --- */
.section-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
}
.section-heading__en {
	margin: 0;
	color: #299b53;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .04em;
}
.section-heading__ja {
	margin: 0;
	color: #333;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(22px, 1.95vw, 28px);
	font-weight: 500;
}
.section-heading__wave {
	display: block;
	width: 56px;
	height: 6px;
}

/* =========================================================
   セクション見出しのスクロールリビール（2026-09-09）
   画面に入ったら下から18px、ふわっと出す。対象は .section-heading だけ。
   `.reveal` はJSが付けるので、JSが動かない環境では最初から見えている。
   ========================================================= */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s cubic-bezier(.2, .8, .2, 1), transform .55s cubic-bezier(.2, .8, .2, 1);
	/* will-change は付けない。一度きりの演出で合成レイヤーを常時確保する意味がない */
}
.reveal.is-shown {
	opacity: 1;
	transform: none;
}
/* 動きを減らす設定のときは最終状態で出す。
   transition も切らないと、クラスが付いた瞬間に .55s かけて動いてしまう */
@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal.is-shown {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* --- ボタン。緑の角丸で全セクション共通 --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 192px;
	height: 56px;
	padding: 0 28px;
	background: var(--green-cta);
	border-radius: 28px;
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	box-sizing: border-box;
	transition: background .25s;
}
.btn:hover {
	background: var(--green-cta-hover);
	color: #fff;
}
.btn__arrow {
	font-size: 16px;
	line-height: 1;
}

/* =========================================================
   ② 事業紹介
   ========================================================= */
.business {
	background: #f5f0eb;
	padding: 80px 160px;
}
.business__inner {
	max-width: 1120px;
	margin-inline: auto;
}
.business__body {
	display: flex;
	align-items: center;
	gap: 40px;
	/* カンプの見出し下端から本文までの距離 */
	margin-top: 126px;
}

.business__text {
	flex: 1 1 624px;
	min-width: 0;
}
.business__lead {
	margin: 0;
	color: var(--green);
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(19px, 1.67vw, 24px);
	font-weight: 700;
	line-height: 1.67;
}
.business__desc {
	margin-top: 48px;
	color: #3d3d3d;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(14px, 1.11vw, 16px);
	font-weight: 500;
	line-height: 1.875;
}
.business__desc p {
	margin: 0;
}
.business__text .btn {
	margin-top: 54px;
}

.business__cards {
	flex: 0 1 456px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* カード。左端の縁飾りはSVG（#F3F8F1 の薄緑） */
.business-card {
	position: relative;
	min-height: 128px;
	background: #fff;
	border: 1px solid #dce7da;
	border-radius: 18px;
	box-shadow: 0 12px 14px rgba(0, 0, 0, .05);
	box-sizing: border-box;
	transition: box-shadow .2s ease, transform .2s ease;
}
.business-card:hover {
	box-shadow: 0 16px 22px rgba(0, 0, 0, .1);
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.business-card { transition: none; }
	.business-card:hover { transform: none; }
}

/* カード全体を押せるようにする。paddingはカード本体ではなくこちらが持つ */
.business-card__link {
	display: block;
	height: 100%;
	/* 右は矢印の丸（32px）＋左右の余白ぶんを空ける */
	padding: 24px 68px 24px 62px;
	box-sizing: border-box;
	color: inherit;
	text-decoration: none;
}
.business-card::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	/* SVGは48.82×126（preserveAspectRatio="none"）。幅は固定し、カードの高さには縦に伸ばして合わせる。
	   以前は比率で幅を追従させていたが、本文が3行のカード（梱包事業）だけ図形が広がって
	   尖りの位置がずれた（2026-10-26）。カードの最小の高さ128pxに合わせた幅にしている */
	width: 50px;
	background: url(../../images/card-edge.svg) no-repeat left center / 100% 100%;
	pointer-events: none;
}
.business-card__title {
	margin: 0;
	color: var(--green);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.56;
}
.business-card__text {
	margin: 12px 0 0;
	color: #3d3d3d;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.71;
}
/* 右端の垂直中央。裸の「›」だと面の中で位置が定まらないので丸で囲む。
   左端の段ボール断面（::before）と左右で対になる */
.business-card__arrow {
	position: absolute;
	top: 50%;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--green);
	border-radius: 50%;
	color: var(--green);
	transform: translateY(-50%);
	transition: background-color .2s ease, color .2s ease;
}
/* 山形はCSSで描く。「›」の文字はグリフの中で下にずれており、円の中心に
   合わない（10倍に拡大して実測）。下層のカード（.card__arrow）と同じ */
.business-card__arrow::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-1.5px, 1.5px);
}
.business-card:hover .business-card__arrow {
	background: var(--green);
	color: #fff;
}

/* ===== lg: タブレット ===== */
@media (max-width: 1200px) {
	.business { padding: 64px 40px; }
	.business__body { margin-top: 72px; gap: 32px; }
	.business__desc { margin-top: 32px; }
	.business__text .btn { margin-top: 36px; }
}

/* ===== md: スマートフォン ===== */
/* ===== カードが横並びのままだと本文が潰れる幅 =====
   カードは左に段ボール断面（62px）、右に矢印の丸（68px）を持つので、
   本文に使える幅はカード幅から130pxを引いた残り。1000pxを切ると
   その残りが240pxを下回り、14pxの文字で17字/行に届かなくなる（実測）。
   767pxまで待つと10字/行まで潰れるため、ここで縦積みへ切り替える */
@media (max-width: 1000px) {
	/* 縦積みにすると flex-basis は「幅」ではなく「高さ」として解かれるため、
	   PCで指定した 624px / 456px が余白になってしまう。flex を外して中身の高さに戻す */
	.business__body {
		flex-direction: column;
		align-items: stretch;
	}
	.business__text,
	.business__cards { flex: none; }
}

@media (max-width: 767px) {
	.business { padding: 48px 20px; }
	.business__body {
		margin-top: 40px;
		gap: 32px;
	}
	.business__desc { margin-top: 24px; }
	.business__text .btn { margin-top: 28px; }
	.business-card__link { padding: 20px 62px 20px 58px; }
}

/* ===== sm: 小型スマートフォン ===== */
@media (max-width: 480px) {
	.business { padding: 40px 16px; }
	.business-card__title { font-size: 16px; }
	.business-card__text { font-size: 13px; }
}


/* --- 見出しの左寄せ版（採用情報） ---
   カンプは「テキストは左寄せ、波線はテキストブロックの幅に対して中央」。
   ブロック幅を中身に合わせたうえで、テキストだけ左に寄せる */
.section-heading--left {
	align-items: center;
	width: fit-content;
}
.section-heading--left .section-heading__en,
.section-heading--left .section-heading__ja {
	align-self: flex-start;
}

/* --- ボタンの白抜き版（ニュースの一覧ボタン） --- */
.btn--outline {
	background: #fff;
	border: 1px solid var(--green);
	color: var(--green);
}
.btn--outline:hover {
	background: var(--green-cta);
	color: #fff;
}

/* =========================================================
   ④ 企業情報
   ========================================================= */
.company {
	/* 2026-10-23に製品情報のセクション（白）を外したため、ベージュの事業紹介と
	   隣り合って境目が消えた。白にして、以前と同じベージュ→白の並びに戻す */
	background: #fff;
	padding: 96px 104px 68px;
}
.company__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1232px;
	margin-inline: auto;
}

.company__figure {
	width: 100%;
	/* 元画像が500×310しかないため、カンプの738pxではなく等倍で置く。
	   高解像度版を入手できたら738pxへ戻す */
	max-width: 500px;
	margin: 33px 0 0;
}
.company__img {
	display: block;
	width: 100%;
	aspect-ratio: 500 / 310;
	object-fit: cover;
	border-radius: 16px;
}

.company__lead {
	max-width: 862px;
	margin: 27px 0 0;
	color: var(--green);
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(19px, 1.67vw, 24px);
	font-weight: 700;
	line-height: 1.67;
	text-align: center;
}
.company__desc {
	max-width: 1117px;
	margin-top: 24px;
	color: #3d3d3d;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(14px, 1.11vw, 16px);
	font-weight: 500;
	line-height: 1.875;
}
.company__desc p {
	margin: 0;
}
.company__btn {
	margin-top: 100px;
}

/* ===== lg: タブレット ===== */
@media (max-width: 1200px) {
	.company { padding: 72px 40px 56px; }
	.company__figure { margin-top: 28px; }
	.company__btn { margin-top: 56px; }
}

/* ===== md: スマートフォン ===== */
@media (max-width: 767px) {
	.company { padding: 48px 20px 40px; }
	.company__figure { margin-top: 24px; }
	.company__lead { margin-top: 24px; text-align: left; }
	.company__desc { margin-top: 20px; }
	.company__btn { margin-top: 32px; }
}

/* ===== sm: 小型スマートフォン ===== */
@media (max-width: 480px) {
	.company { padding: 40px 16px 32px; }
}


/* =========================================================
   ⑤ 工場見学（動画）
   上下に段ボール断面の仕切り線が入る帯
   ========================================================= */
.factory {
	position: relative;
	/* 元は rgba(0, 0, 0, .6) だったが、下地は body の白で背景画像がないため
	   実質 #666666 と同じで、半透明である意味がなかった。白文字が5.74:1で
	   AAAに届いていなかったので #4d4d4d（8.45:1）にした。
	   2026-09-09に実測・ユーザー選択 */
	background: #4d4d4d;
	padding: 105px 104px;
}
/* 仕切り線。SVGは20×25（波1周期）なので高さを合わせて横に繰り返す */
.factory::before,
.factory::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 25px;
	background: url(../../images/divider-tile.svg) repeat-x left center / auto 100%;
	pointer-events: none;
}
.factory::before { top: 0; }
.factory::after  { bottom: 0; transform: scaleY(-1); }

.factory__inner {
	max-width: 1232px;
	margin-inline: auto;
}
/* この帯の見出しは白文字 */
.factory .section-heading__en,
.factory .section-heading__ja {
	color: #fff;
}

.factory__list {
	display: flex;
	gap: 96px;
	margin: 112px 0 0;
	padding: 0;
	list-style: none;
}
.factory__item {
	flex: 1 1 568px;
	min-width: 0;
}

/* 工場紹介の写真カード。2026-10-23からリンクにした（五霞町は段ボールケース、ベトナムは
   ベトナムのページ）。figure をやめて a を箱にしている */
.factory-photo {
	display: block;
	overflow: hidden;
	border-radius: 24px;
	background: #f3f8f1;
	box-shadow: 0 12px 14px rgba(255, 255, 255, .07);
	text-decoration: none;
	transition: transform .25s, box-shadow .25s;
}
.factory-photo:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 22px rgba(255, 255, 255, .14);
}
@media (prefers-reduced-motion: reduce) {
	.factory-photo { transition: none; }
	.factory-photo:hover { transform: none; }
}
.factory-photo__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
/* 五霞町は本社工場と第4倉庫を左右に並べる。枠全体はほかのカードと同じ16:9 */
.factory-photo__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	aspect-ratio: 16 / 9;
}
.factory-photo__pair .factory-photo__img {
	height: 100%;
	aspect-ratio: auto;
}
.factory-photo__shot {
	position: relative;
	min-width: 0;
}
/* ベトナム工場の写真の右下に載せるロゴ */
.factory-photo__logo {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff;
	line-height: 0;
}
.factory-photo__logo img {
	width: 128px;
	height: auto;
}
@media (max-width: 767px) {
	.factory-photo__logo img { width: 104px; }
}
.factory-photo__cap {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 24px 20px;
}
.factory-photo__title {
	color: #1a1a1a;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}
.factory-photo__sub {
	color: #4d4d4d;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 13px;
	line-height: 1.6;
}
.factory-photo__note {
	margin-top: 4px;
	color: var(--green);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

/* 動画カード。いまはHTMLから参照していない（工場紹介を写真に変えたため）。
   動画URLが決まったら .factory-photo と入れ替えて戻す。
   2026年内に動画が確定しない場合は、いったん消してよい */
.video-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 264px;
	padding: 63px 31px 25px;
	background: #f3f8f1;
	border: 1px solid #dce7da;
	border-radius: 24px;
	/* カンプは rgba(0,0,0,.05) だが、背景が半透明の黒なので黒い影は見えない。
	   暗い面では白い影に置き換える。強さは事業紹介のカードと同じくらい控えめに */
	box-shadow: 0 12px 14px rgba(255, 255, 255, .07);
	text-decoration: none;
	box-sizing: border-box;
	transition: transform .25s, box-shadow .25s;
}
/* 動画URLが未定の間は <span>。決まったら <a> に戻してこの指定を消す */
.video-card.is-pending {
	cursor: default;
}
.video-card.is-pending:hover {
	transform: none;
	box-shadow: 0 12px 14px rgba(255, 255, 255, .07);
}
.video-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 22px rgba(255, 255, 255, .14);
}
.video-card__play {
	/* カンプはstroke1pxの円＋▶。円はCSSで作る */
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 72px;
	height: 72px;
	border: 1px solid #ff5501;
	border-radius: 50%;
	color: #ff5501;
	font-size: 18px;
	line-height: 1;
	transition: background .25s, color .25s;
}
.video-card:hover .video-card__play {
	background: #ff5501;
	color: #fff;
}
.video-card__title {
	margin-top: 32px;
	color: var(--green);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.45;
}
.video-card__sub {
	margin-top: 8px;
	color: #3d3d3d;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.71;
}

/* ===== lg: タブレット ===== */
@media (max-width: 1200px) {
	.factory { padding: 88px 40px; }
	.factory__list { gap: 40px; margin-top: 72px; }
}

/* ===== md: スマートフォン ===== */
@media (max-width: 767px) {
	.factory { padding: 64px 20px; }
	.factory__list {
		flex-direction: column;
		gap: 24px;
		margin-top: 40px;
	}
	/* 縦積みでは flex-basis が高さになるので外す */
	.factory__item { flex: none; }
	.video-card { min-height: 0; padding: 40px 24px 24px; }
	.video-card__title { margin-top: 24px; font-size: 19px; }
}

/* ===== sm: 小型スマートフォン ===== */
@media (max-width: 480px) {
	.factory { padding: 48px 16px; }
	.video-card__play { width: 60px; height: 60px; }
}


/* =========================================================
   ⑥ ニュース（投稿を5件出す）
   ========================================================= */
.news {
	background: #fff;
	padding: 80px 160px 96px;
}
.news__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 928px;
	margin-inline: auto;
}

.news__list {
	width: 100%;
	margin: 118px 0 0;
	padding: 0;
	list-style: none;
}
.news__item {
	border-bottom: 2px solid #e6eae2;
}
.news__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 0;
	min-height: 72px;
	text-decoration: none;
	box-sizing: border-box;
	transition: opacity .2s;
}
.news__link:hover {
	opacity: .65;
}
.news__title {
	color: #2f2f2f;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
.news__date {
	flex: none;
	color: #6a7280;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.57;
	text-align: right;
}
.news__empty {
	margin: 118px 0 0;
	color: #6a7280;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
}
.news__btn {
	min-width: 240px;
	margin-top: 57px;
}

/* ===== lg: タブレット ===== */
@media (max-width: 1200px) {
	.news { padding: 72px 40px 80px; }
	.news__list,
	.news__empty { margin-top: 64px; }
	.news__btn { margin-top: 40px; }
}

/* ===== md: スマートフォン ===== */
@media (max-width: 767px) {
	.news { padding: 48px 20px 56px; }
	.news__list,
	.news__empty { margin-top: 40px; }
	/* 日付を下に回して1行あたりの幅を確保する */
	.news__link {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		min-height: 0;
		padding: 16px 0;
	}
	.news__title { font-size: 15px; }
	.news__btn { margin-top: 32px; }
}

/* ===== sm: 小型スマートフォン ===== */
@media (max-width: 480px) {
	.news { padding: 40px 16px 48px; }
}


/* =========================================================
   ⑦ サステナビリティ
   ========================================================= */
.sustainability {
	background: #f5f0eb;
	padding: 80px 256px;
}
.sustainability__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 928px;
	margin-inline: auto;
}

.sustainability__catch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 523px;
	margin-top: 56px;
	text-align: center;
}
.sustainability__icon {
	display: block;
	width: 56px;
	height: 69px;
}
.sustainability__copy {
	margin: 0;
	color: var(--green);
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(24px, 2.22vw, 32px);
	font-weight: 700;
	line-height: 1.88;
}

.sustainability__links {
	display: flex;
	flex-wrap: wrap;
	gap: 36px 32px;
	width: 100%;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}
.sustainability__item {
	/* 3列。gap32px×2を引いて割る */
	width: calc((100% - 64px) / 3);
}

.sustainability-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 88px;
	padding: 0 21px;
	background: #fff;
	border: 3px solid #dce7da;
	border-radius: 16px;
	box-shadow: 0 12px 14px rgba(0, 0, 0, .04);
	text-decoration: none;
	box-sizing: border-box;
	transition: border-color .25s, transform .25s;
}
.sustainability-link:hover {
	border-color: var(--green);
	transform: translateY(-2px);
}
.sustainability-link__label {
	color: var(--green);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
.sustainability-link__arrow {
	/* カンプはオレンジの三角。CSSのborderで作る */
	flex: none;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 8px solid #ff5501;
}

/* ===== lg: タブレット ===== */
@media (max-width: 1200px) {
	.sustainability { padding: 72px 40px; }
	.sustainability__links { gap: 24px 20px; }
	.sustainability__item { width: calc((100% - 40px) / 3); }
}

/* ===== md: スマートフォン ===== */
@media (max-width: 767px) {
	.sustainability { padding: 48px 20px; }
	.sustainability__catch { margin-top: 32px; }
	.sustainability__links { gap: 12px; margin-top: 32px; }
	/* 3列だと文字が入らないので1列にする */
	.sustainability__item { width: 100%; }
	.sustainability-link { min-height: 72px; }
}

/* ===== sm: 小型スマートフォン ===== */
@media (max-width: 480px) {
	.sustainability { padding: 40px 16px; }
	.sustainability-link { padding: 0 16px; }
	.sustainability-link__label { font-size: 15px; }
}


/* =========================================================
   ⑧ 採用情報
   ========================================================= */
.recruit {
	background: #fff;
	padding: 80px 159px;
}
.recruit__inner {
	max-width: 1122px;
	margin-inline: auto;
}
.recruit__body {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-top: 80px;
}
.recruit__text {
	flex: 1 1 583px;
	min-width: 0;
}
.recruit__copy {
	margin: 0;
	color: var(--green);
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(21px, 1.94vw, 28px);
	font-weight: 700;
	line-height: 1.5;
}
.recruit__desc {
	margin: 22px 0 0;
	color: #3d3d3d;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(14px, 1.11vw, 16px);
	font-weight: 500;
	line-height: 1.875;
}
.recruit__btn {
	flex: none;
}

/* ===== lg: タブレット ===== */
@media (max-width: 1200px) {
	.recruit { padding: 72px 40px; }
	.recruit__body { margin-top: 48px; }
}

/* ===== md: スマートフォン ===== */
@media (max-width: 767px) {
	.recruit { padding: 48px 20px; }
	/* 縦積みでは flex-basis が高さになるので外す */
	.recruit__body {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
		margin-top: 32px;
	}
	.recruit__text { flex: none; }
}

/* ===== sm: 小型スマートフォン ===== */
@media (max-width: 480px) {
	.recruit { padding: 40px 16px; }
	.recruit__btn { width: 100%; }
}


/* =========================================================
   ⑨ 関連企業・団体
   現行サイトのトップにあった3つのリンクボックスを引き継いだもの。
   **縦に3枚並べ、幅を720pxに絞って中央に置く**（2026-09-15・ユーザー判断）。
   3カラムだと枠に対してロゴが小さく見え、余白ばかりが目立つ。縦なら
   **ロゴを実寸250pxのまま置ける**（素材が250×100しかないため、拡大すると粗が出る）。
   幅を絞らないと、ロゴ＋一文に対して右側が大きく空いて間延びする。
   面は白いカードにして、直前の採用（#fff）と背景で切り分ける
   --------------------------------------------------------- */
.affiliates {
	background: #f5f0eb;
	padding: 80px 159px;
}
.affiliates__inner {
	max-width: 1122px;
	margin-inline: auto;
}
.affiliates__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	max-width: 720px;
	margin: 80px auto 0;
	padding: 0;
	list-style: none;
}
.affiliates__link {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	padding: 20px 28px;
	background: #fff;
	border-radius: 16px;
	text-decoration: none;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .04);
	transition: box-shadow .2s ease, transform .2s ease;
}
.affiliates__link:hover {
	box-shadow: 0 14px 32px rgba(0, 0, 0, .10);
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.affiliates__link { transition: none; }
	.affiliates__link:hover { transform: none; }
}
.affiliates__logo {
	display: block;
	flex: none;
}
/* 実寸 250×100 を超えて拡大しない。狭い画面でだけ縮む */
.affiliates__logo img {
	display: block;
	width: 250px;
	max-width: 100%;
	height: auto;
}
.affiliates__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}
.affiliates__name {
	color: var(--green);
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(16px, 1.25vw, 18px);
	font-weight: 700;
	line-height: 1.5;
}
.affiliates__desc {
	color: #3d3d3d;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(13px, 1vw, 14px);
	font-weight: 500;
	line-height: 1.75;
}

/* ===== lg: タブレット ===== */
@media (max-width: 1200px) {
	.affiliates { padding: 72px 40px; }
	.affiliates__list { margin-top: 48px; }
}

/* ===== md: スマートフォン ===== */
@media (max-width: 767px) {
	.affiliates { padding: 48px 20px; }
	.affiliates__list { margin-top: 32px; }
	.affiliates__link {
		gap: 20px;
		padding: 20px 24px;
	}
	.affiliates__logo img { width: 200px; }
}

/* ===== sm: 小型スマートフォン ===== */
@media (max-width: 480px) {
	.affiliates { padding: 40px 16px; }
	/* ロゴ200pxと本文が横に収まらなくなるので縦積みへ戻す */
	.affiliates__link {
		flex-direction: column;
		gap: 14px;
		padding: 24px 20px;
	}
	.affiliates__logo img { width: 220px; }
	.affiliates__body { align-items: center; }
	.affiliates__name,
	.affiliates__desc { text-align: center; }
}