/*
 * Harashina Standard — Business（正式実装・承認済みPHOTO版）
 *
 * 確定済みprototype（Harashina_Web_Project/prototypes/hero-ab-test/
 * a.html, css/variant-a.css）の「Business PHOTO版」をそのまま正式移植
 * したもの。TEXT版・TEXT/PHOTO比較トグルはプロトタイプ検証用のUIだった
 * ため移植せず、PHOTO版の見た目だけを常時表示する。
 *
 * 方針: 8事業はすべて同格のため、カードUI（角丸・box-shadow・背景色の
 * ブロック等）は使わない。ナンバリング・罫線・タイポグラフィ・余白・
 * 矢印・写真だけで構成した1本のエディトリアルなリスト。
 *
 * hoverの実装について: prototypeはJS（business-photo.js）でhover/focus
 * した行の.business__photoに.is-activeクラスを付け外ししていたが、
 * 見た目の変化（opacity/transformのtransition）はCSS側で完結しており、
 * JSを使わずCSSの:hover/:focus-withinだけで同じ効果を再現できるため、
 * 本実装ではJSを追加せず:hover/:focus-withinのみで実装している
 * （「CSSだけで実現できるhoverのために不要なJSを追加しない」方針）。
 *
 * scroll revealのみ、テーマ共通のassets/js/reveal.js + motion.cssの
 * `.js-reveal`をそのまま再利用している（Business専用JSは追加していない。
 * prototypeのjs/business-reveal.jsと同じIntersectionObserverの仕組み）。
 *
 * 色・フォントはtokens.css（--bg-alt/--text/--text-muted/--accent/
 * --border-color/--font-serif/--font-mono/--photo-frame/--ease-in）を
 * 参照する。prototype側のcommon.cssでは--borderという名前だったが、
 * このテーマのtokens.cssでは--border-colorという名前で定義されている
 * ため、そちらに合わせている（値・用途は同じ）。
 */

/* ---- 濃い側の背景色・比較試作（トップページ限定、tokens.css/theme.jsonは変更しない） ----
   --bg-alt（#eeece6）の代わりに、トップページのBusiness/Information/CTA/Footer
   のgradient濃い側だけで使うローカル変数--bg-darkを.page-id-833（トップページの
   body class）にだけ定義する。他ページ・--bg-alt自体の値には一切影響しない。
   3案の比較はこの1行の値だけを書き換えて行う（現在は案1: 現行の--bg-altと
   同値#eeece6）。
   案1（現状）: #eeece6
   案2:         #e7e4dc
   案3:         #dfdcd3
   明るい側の#f5f4f0（--bg）・gradientの範囲/長さ・spacing・typography・写真・
   hoverは変更していない。 */
.page-id-833{
	--bg-dark: #e7e4dc;
}

.business{
	/* ---- 背景交互配色＋vertical rhythm構造（比較試作・再修正） ----
	   Business自身の色（--bg-dark）は変更していない。Hero/Introduction
	   はfrozenのため触れず、Introductionが収束する色（body/--bg相当）
	   からBusiness自身の色への遷移は、下の.business::beforeという
	   独立した疑似要素が担当する（--transition-inの高さぶんのgradient
	   専用。HTML要素は追加していない）。

	   コンテンツ自身の上下solid余白（padding-top/padding-bottom）は、
	   以前は::beforeのmargin-bottomで代用していたが、DevTools上で
	   「正式なpadding」として確認できないという指摘を受け、新設した
	   .business__inner（front-page.php側に追加した最小限のwrapper。
	   .business__headと.business__listを1つに包むだけで、既存の
	   見た目・レイアウトは変更していない）に移した。
	   .business__innerのpadding-top/padding-bottomは同値
	   （--own-pad、以前のpadding-bottom値をそのまま踏襲）。

	   .business自体はbackgroundとgradient専用の::beforeだけを持ち、
	   横方向のpad-hのみ担当する（::beforeはこのpad-hを打ち消す負の
	   marginで画面幅いっぱいに広げている）。
	   Business→SHOPの遷移はSHOP側の::beforeが担当する（詳細はshop.css
	   参照）。border-topはユーザー確認の結果、gradientの連続性を
	   邪魔するため削除した（Introduction→Businessの接続を罫線なしで
	   見せる）。 */
	--pad-h: clamp(1.2rem, 4vw, 3rem);
	--transition-in: clamp(4rem, 10vw, 7rem);
	background: var(--bg-dark);
	padding: 0 var(--pad-h);
}
.business::before{
	content: "";
	display: block;
	height: var(--transition-in);
	margin: 0 calc(-1 * var(--pad-h));
	background: linear-gradient(to bottom, var(--bg) 0%, var(--bg-dark) 100%);
}
.business__inner{
	--own-pad: clamp(1.5rem, 3vw, 2.5rem);
	padding-top: var(--own-pad);
	padding-bottom: var(--own-pad);
}
/* ---- (vertical rhythm再設計により撤去) ----
   以前ここには「Landscape 1440px以上だけpadding-topを40pxへ上書きする」
   固定pxの特例があった。この特例はpadding-top（当時はgradientの停止
   位置と兼用の変数）だけを40pxに縮めており、gradient自体の長さ
   （背景のstop位置）はclamp(4rem,10vw,7rem)のまま変わっていなかった。
   そのため1440px以上では、見出しがgradient完了前（背景がまだ完全に
   --bg-darkになりきる前）の位置から始まっていた可能性が高い。
   今回の再設計（下の.business::before参照）では見出しの開始位置が
   必ずgradient完了後になる構造にしたため、この特例は撤去し、1440px
   以上も他のLandscape幅と同じ連続的なclamp()に統一した。 */
.business__head{
	max-width: 1180px; margin: 0 auto 2.5rem;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
	flex-wrap: wrap;
}
.business__eyebrow{
	font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
	color: var(--accent); text-transform: uppercase; margin-bottom: 1rem; display: block;
}
.business__title{
	font-family: var(--font-serif); font-weight: 700;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
	margin: 0.6rem 0 0; line-height: 1.5; color: var(--text);
}
/* PC（デフォルト）ではbrは常に強制改行を発生させるため、明示的に
   display:noneで無効化し1行表示を維持する（スマホのみ@media内で
   表示を戻す。2026-09十八次修正で新規追加）。 */
.business__title-break{ display: none; }
.business__count{
	font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
	color: var(--text-muted); white-space: nowrap; padding-bottom: 0.3rem;
}

.business__list{
	list-style: none; margin: 0; padding: 0;
	max-width: 1180px; margin-left: auto; margin-right: auto;
}

/* ---- row（PHOTO版の列構成をそのまま常時適用） ----
   列: index(3.5rem) / name(0.85fr) / photo(220px) / desc(0.9fr) / arrow(2.2rem)。
   行高を増やさないため、TEXT版の1.7rem paddingではなく0.5rem(8px)に
   縮小し、写真の高さ（220px×904/1536≒129px）にちょうど収まるように
   している。 */
.business__link{
	position: relative;
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 0.85fr) 220px minmax(0, 0.9fr) 2.2rem;
	align-items: center;
	column-gap: clamp(1rem, 3vw, 2.5rem);
	padding: 0.5rem 0;
	border-top: 1px solid var(--border-color);
	text-decoration: none; color: inherit;
}
.business__list li:last-child .business__link{ border-bottom: 1px solid var(--border-color); }

.business__index{
	font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted);
}
.business__name{
	font-family: var(--font-serif); font-weight: 700;
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
	color: var(--text); position: relative; width: fit-content;
}
.business__desc{
	font-size: 0.88rem; line-height: 1.85; color: var(--text-muted);
}
.business__arrow{
	font-family: var(--font-mono); font-size: 1.05rem; color: var(--text-muted);
	justify-self: end; transform: translateX(-6px); opacity: 0.55;
	transition: transform 0.35s var(--ease-in), opacity 0.35s var(--ease-in), color 0.35s var(--ease-in);
}
.business__link:hover .business__arrow,
.business__link:focus-visible .business__arrow{
	transform: translateX(0); opacity: 1; color: var(--accent);
}

/* ---- 写真列 ----
   .business__photoのoverflowはvisible（hiddenにしない）。通常時は
   imgがbox（220px×aspect-ratio 1536:904≒129px）ちょうどに収まって
   見えるが、hover/focus時はimgだけをtransform:scale()でbox外側へ
   拡大表示できるようにするため。box自体（width/aspect-ratio）や
   グリッド列幅・行のpaddingは一切変更しないため、行高・前後の行の
   位置・事業名/説明文/矢印の位置は動かない。 */
.business__photo{
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1536 / 904;
	overflow: visible;
	background: var(--photo-frame);
}
.business__photo img{
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transform-origin: center;
	/* 完全な空白(opacity:0)ではなく、常時ごく淡く見せる（prototype承認値 0.2）。 */
	opacity: 0.2; transform: scale(1);
	transition: opacity 0.5s var(--ease-in), transform 0.45s var(--ease-in);
}
/* hover/focus時: 写真だけを約290px相当（220px×1.32）まで拡大する。
   box自体やグリッド列・行のpaddingは変更していないため、行高・前後の
   行の位置・事業名/説明文/矢印の位置は動かない。拡大した写真が周囲の
   行の罫線や文字の上に自然に重なって見えるよう、hover中の行だけ
   z-indexを引き上げる（prototypeは:has()+JSクラスで実装していたが、
   本実装はhoverしている行自身に:hover/:focus-withinを直接使うため
   :has()もJSも不要）。 */
.business__link:hover .business__photo img,
.business__link:focus-within .business__photo img{
	opacity: 1; transform: scale(1.32);
}
.business__link:hover,
.business__link:focus-within{
	z-index: 5;
}

@media (max-width: 820px){
	.business__head{ flex-direction: column; align-items: flex-start; gap: 0.5rem; }

	/* ---- Business見出しの2行化（スマホのみ、2026-09十八次修正で新規追加） ----
	   PCは「原科が展開する、8つの事業です。」の1行のまま（変更禁止）。
	   スマホだけ「原科が展開する」「8つの事業です。」の2行にするため、
	   HTML側（front-page.php）に読点を囲むspanと専用のbrを追加し、
	   CSSだけで表示を出し分けている（文言・文字自体は変更していない。
	   読点はスマホでは改行に置き換わるため非表示にする）。 */
	.business__title-comma{ display: none; }
	.business__title-break{ display: block; }

	/* =========================================================================
	   各事業カード（スマホのみ、2026-09十八次修正で全面刷新）

	   従来の「小さな正方形サムネイル＋横並びテキスト」構成をやめ、
	   大きな横長写真の上に番号・事業名・説明文・矢印を重ねる構成へ
	   変更した。.business__link（<a>要素）自体がカード全体になり、
	   タップ領域は写真領域全体（＝カード全体）になる。

	   8事業すべて同一のCSSを適用しており、特定の事業だけを強調する
	   スタイルは持たない。角丸・box-shadow・カード間の大きなgapは
	   使わず、細い罫線（border-top）区切りのみで連続させることで、
	   「箱がぼんぼん置かれている」印象を避け、PCのEditorialな方針を
	   スマホでも踏襲している。 ========================================================================= */
	.business__list li:first-child .business__link{ border-top: none; }

	.business__link{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		/* PC用grid行の`align-items:center`（基本ルール）がそのまま継承され
		   テキストが中央寄せになってしまうため、明示的に左寄せへ上書きする
		   （サイト全体のEditorialな左揃えの方針に合わせる）。 */
		align-items: flex-start;
		position: relative;
		/* 2026-09十九次修正: 4/3→2/1の横長比較。固定heightではなく
		   aspect-ratioで指定し、幅に応じて自動的に高さが決まる。 */
		aspect-ratio: 2 / 1;
		padding-top: 1.1rem;
		padding-left: 1.2rem;
		padding-right: 1.2rem;
		/* ---- テキスト群の縦位置（2026-09二十一次修正で新規追加） ----
		   justify-content:flex-endは維持し（テキスト群は常に
		   padding-bottomの位置を基準に下詰めされる構造は変わらない）、
		   padding-bottomだけをviewport幅に応じて連続的に拡大している。
		   写真はaspect-ratio 2/1のため幅が広がるほど高さも大きくなるが、
		   テキスト群の高さ（文字サイズ・行間は変更禁止のためほぼ一定〜
		   幅が広がるほど折返しが減り縮む傾向）はほぼ変わらないため、
		   padding-bottomを広げることで「下詰めされたテキスト群」を
		   写真の中でより上（中央よりやや下）へ押し上げる。390pxでは
		   ほぼ現状の1.1rem(17.6px)のまま、820pxに近づくにつれて
		   なめらかに拡大する（breakpointによる急な切替ではなくclamp()の
		   連続変化）。左右padding・padding-top・文字サイズ・行間・文言は
		   変更していない。 */
		padding-bottom: clamp(1.1rem, -70.75px + 22.65vw, 115px);
		border-top: 1px solid var(--border-color);
		overflow: hidden;
	}

	.business__photo{
		position: absolute; inset: 0;
		width: 100%; height: 100%;
		aspect-ratio: unset;
		overflow: hidden;
		/* ---- 写真内側の細いライン（2026-09二十二次修正で新規追加） ----
		   box-sizing:border-boxを明示し、border追加分がinset:0で決まる
		   外形サイズ（＝2:1の写真領域そのもの）を一切変更しないように
		   している（border-boxなら境界線はサイズの内側に収まる）。
		   目的はカード化ではなく、白veilをかけた写真の輪郭をごくわずかに
		   締めるためだけの控えめな線（角丸・box-shadow・色付き枠は
		   使用していない）。 */
		box-sizing: border-box;
		border: 1px solid rgba(26, 29, 33, 0.14);
	}
	.business__photo img{
		/* PCのhover専用フェード(opacity:0.2→1)はここでは無効化し、
		   写真を常時フル表示にする（モバイルにhoverは存在しないため）。 */
		opacity: 1; transform: none; transition: none;
	}

	/* 文字を読みやすくするための白系overlay（2026-09二十次修正：
	   gradientから写真全面均一のoverlayへ変更）。
	   従来のgradient（下側濃く・上側ほぼ透明）は、上側にかかる文字が
	   写真と直接重なって読みにくくなる問題があったため、写真全面を
	   同じ濃度で覆う単一色へ変更した。写真ごとにoverlayの濃度は
	   変えていない（8事業で統一）。 */
	.business__link::after{
		content: "";
		position: absolute; inset: 0;
		background: rgba(255, 255, 255, 0.65);
		pointer-events: none;
	}

	.business__index,
	.business__name,
	.business__desc,
	.business__arrow{
		position: relative;
		/* overlay(::after)より手前に表示する */
		z-index: 1;
	}
	/* 文字色は黒〜濃いグレー基本（2026-09十九次修正）。text-shadow・
	   縁取り・個別背景ボックスは使わず、8事業で統一している。 */
	.business__index{
		color: var(--text-muted);
		/* ---- 番号横の短い細線（2026-09二十二次修正で新規追加） ----
		   「01 ─」のように番号と細線を1つのEditorialな要素として見せる。
		   HTMLは増やさず疑似要素で実現している（8事業で同一仕様）。 */
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
	}
	.business__index::after{
		content: "";
		display: inline-block;
		width: 14px; height: 1px;
		background: rgba(26, 29, 33, 0.35);
	}
	.business__name{
		color: var(--text);
		font-size: 1.2rem;
		margin-top: 0.2rem;
	}
	.business__desc{
		color: var(--text);
		font-size: 0.86rem;
		line-height: 1.6;
		margin-top: 0.4rem;
	}
	.business__arrow{
		justify-self: unset;
		margin-top: 0.7rem;
		color: var(--text);
		opacity: 0.85;
		transform: none;
	}
}