/*
 * 新トップ (template-home.php) 専用 CSS。common.css の後に読み込む。
 *
 * Figma: andfactoryHPデザイン_2026 > PC (1440px / 960px) + レスポンシブ仕様メモ
 *   - 1024px 以下: NEWS 2列→1列、事業トグルのサムネイル非表示
 *   -  768px 以下: SP レイアウト (事業カード縦積み、トグル 2×2)
 */

/* ------------------------------------------------------------------
 * First view (Figma: main visual = FirstViewCard + FVBusinessToggle)
 * ---------------------------------------------------------------- */
.fv {
	display: flex;
	justify-content: center;
}

.fv__inner {
	width: 100%;
	max-width: 1440px;
	display: flex;
	align-items: center;
	gap: 32px;
}

.fv__cards {
	position: relative;
	flex: 1 0 0;
	min-width: 527px;
}

/* --- card --- */
.fv-card {
	position: relative;
	display: flex;
	align-items: stretch;
	height: 670px;
	border-radius: 16px;
	/*
	 * overflow: hidden だとコーナーボタン (right/bottom: -1px) の分だけ「スクロール可能なはみ出し」が生まれ、
	 * focus / scrollIntoView (タップや Playwright の hover) でカード内容が 1px ずれて角に隙間が出る。
	 * clip はスクロールコンテナにならないので、はみ出しを固定したまま見た目だけ切り抜ける (未対応の古い Safari は hidden にフォールバック)
	 */
	overflow: hidden;
	overflow: clip;
	/* 下地は透明。切替時に写真とパネルが白からじわっと浮かび上がるようにする (デザイナーの参考動画) */
	background: transparent;
}

/*
 * 事業カードの切替アニメーション (Figma Make プロトタイプ + デザイナーの参考動画に準拠)
 *   離脱: カード全体を 0.4s で白に消す
 *   登場: 写真 (1.7s、わずかに拡大した状態から等倍へ) → パネル (1.3s フェード)
 *         → タイトル (0.5s 遅れて下から) → 説明文 (0.9s 遅れて下から) → ウォーターマーク (1.5s 遅れて下から)
 * 初期表示のカードにも登場アニメーションを付ける (template-home.php で is-entering を付与)
 */
/* 離脱: カードをその場で 0.4s かけて白に消す。消え切ってから次のカードの登場が始まる (参考動画の順序) */
.fv-card.is-leaving {
	animation: af-fv-out 0.4s ease-out forwards;
	pointer-events: none;
}

.fv-card.is-entering .fv-card__img {
	animation: af-fv-img-in 1.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fv-card.is-entering .fv-card__panel {
	animation: af-fv-panel-in 1.3s ease-out both;
}

.fv-card.is-entering .fv-card__title {
	animation: af-fv-text-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

.fv-card.is-entering .fv-card__desc {
	animation: af-fv-text-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}

.fv-card.is-entering .fv-card__watermark {
	animation: af-fv-watermark-in 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both;
}

@keyframes af-fv-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes af-fv-img-in {
	from {
		opacity: 0;
		transform: scale(1.03);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes af-fv-panel-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes af-fv-text-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes af-fv-watermark-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fv-card.is-leaving,
	.fv-card.is-entering .fv-card__img,
	.fv-card.is-entering .fv-card__panel,
	.fv-card.is-entering .fv-card__title,
	.fv-card.is-entering .fv-card__desc,
	.fv-card.is-entering .fv-card__watermark {
		animation: none;
	}

	.fv-toggle {
		transition: none;
	}
}

.fv-card__image {
	flex: none;
	width: 414px;
	height: 670px;
	overflow: hidden;
}

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

.fv-card__img--sp {
	display: none;
}

.fv-card__panel {
	position: relative;
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 80px 64px 32px;
	color: #fff;
	background: linear-gradient(180deg, var(--biz-color) 30%, var(--biz-grad-to) 100%);
	overflow: hidden;
}

.fv-card__text {
	position: relative;
	z-index: 1;
	flex: 1 0 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
	word-break: break-word;
}

.fv-card__title {
	font-size: 36px;
	font-weight: 900;
	line-height: 40px;
	letter-spacing: 0.2em;
}

.fv-card__desc {
	font-size: 14px;
	font-weight: 500;
	line-height: 36px;
	letter-spacing: 0.24em;
}

/* 事業名の英字ウォーターマーク (縦書きで右端に沿わせる) */
.fv-card__watermark {
	position: absolute;
	top: 30px;
	right: 24px;
	font-size: 130px;
	font-weight: 900;
	line-height: 0.9;
	color: rgba(255, 255, 255, 0.1);
	/* Figma と同じ高さ 534px で折り返す (Entertainment は 2 行になる)。縦書きなので 2 行目は左側に並ぶ */
	max-height: 534px;
	white-space: normal;
	word-break: break-all;
	writing-mode: vertical-rl;
	pointer-events: none;
	user-select: none;
}

/* Localization は Figma で高さ 433px の枠 (Locali / zation の 2 行) */
.fv-card--localize .fv-card__watermark {
	max-height: 433px;
}

/* 右下角: カードの角丸とサブピクセルの隙間から背景色が 1px 見えるので、1px 外側まではみ出させて覆う */
.fv-card__link {
	position: absolute;
	right: -1px;
	bottom: -1px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 89px;
	height: 89px;
	padding: 0 1px 1px 0;
	border-radius: 16px 0 0 0;
	background: #fff;
	transition: background-color 0.4s;
}

/* Figma parts/FirstViewCardIconButton state=hover: 背景が事業部の淡色 (--business/xxx-light) になる。縁取りは無い */
.fv-card__link:hover,
.fv-card__link:focus-visible {
	background: var(--biz-light);
}

.fv-card__link img {
	width: 42px;
	height: 42px;
}

/* --- toggles --- */
/* 5 事業 (ローカライズ追加後の Figma 選択領域): 高さ 122px を 4px 間隔で並べ、カードの高さ 670px に収める */
.fv__toggles {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-right: var(--af-gutter);
}

.fv-toggle {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 417.5px;
	height: 122px;
	padding: 16px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.4s;
}

.fv-toggle:hover,
.fv-toggle[aria-selected="true"] {
	background: var(--biz-light);
}

.fv-toggle__label {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.fv-toggle__radio {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(216, 216, 216, 0.3);
	transition: background-color 0.2s;
}

.fv-toggle[aria-selected="true"] .fv-toggle__radio {
	background: radial-gradient(circle, var(--biz-color) 8px, #fff 8.5px);
}

.fv-toggle__text {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	color: var(--af-fg-sub);
	word-break: break-word;
}

.fv-toggle[aria-selected="true"] .fv-toggle__text {
	color: var(--af-fg);
}

.fv-toggle__thumb {
	flex: none;
	width: 162px;
	height: 91px;
	border-radius: 8px;
	border: 1px solid #fff;
	overflow: hidden;
	/* 非選択時は画像を透かすので、下地は白 (Figma の state=unselected は白 60% のオーバーレイ) */
	background: #fff;
}

.fv-toggle__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * 未選択: グレースケール + 白 60%。
	 * Figma の state=unselected はグレー化した画像に白 60% を重ねたもので、
	 * 白地の上で不透明度 40% にすると 0.4*gray + 0.6*white となり同じ結果になる。
	 */
	filter: grayscale(1);
	opacity: 0.4;
	transition: filter 0.2s, opacity 0.2s;
}

.fv-toggle[aria-selected="true"] .fv-toggle__thumb img {
	filter: none;
	opacity: 1;
}

/* ------------------------------------------------------------------
 * Message (Figma: mainvisual > group "日常に & を届ける")
 * ---------------------------------------------------------------- */
.message {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 64px var(--af-gutter) 80px;
	overflow: hidden;
}

.message__bg {
	position: absolute;
	top: 3px; /* デザイナー指示: -7px だと上端が切れる */
	right: 78px;
	width: 388px;
	height: 422px;
	pointer-events: none;
}

.message__inner {
	position: relative;
	width: 100%;
	max-width: var(--af-content-max);
	display: flex;
	align-items: flex-end;
	gap: 40px;
}

.message__body {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* 「日常に & を届ける」は Figma の書き出し SVG 3 点を 398x70 の枠に配置 */
.message__copy {
	position: relative;
	width: 398px;
	max-width: 100%;
	height: 70px;
}

/* 各 SVG は Figma の配置 (398x70 内の inset) を % に直して枠いっぱいに描く。枠が縮んでも比率が保たれる */
.message__copy img {
	position: absolute;
	max-width: none;
	object-fit: contain;
}

.message__copy-1 {
	top: 28.01%;
	left: 1.13%;
	width: 30.35%;
	height: 43.48%;
}

.message__copy-mark {
	top: 7.14%;
	left: 37.69%;
	width: 13.82%;
	height: 84.29%;
}

.message__copy-2 {
	top: 29.57%;
	left: 56.75%;
	width: 42.11%;
	height: 41.92%;
}

.message__lines {
	display: flex;
	flex-direction: column;
	gap: 24px;
	font-size: 14px;
	font-weight: 500;
	line-height: 36px;
	letter-spacing: 0.24em;
	word-break: break-word;
}

/* ------------------------------------------------------------------
 * IR NEWS (Figma: IR NEWS section, IRNewsList, IRLibraryLabel)
 * ---------------------------------------------------------------- */
.ir {
	display: flex;
	justify-content: center;
	padding: 72px var(--af-gutter);
}

.ir__inner {
	width: 100%;
	max-width: var(--af-content-max);
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* ------------------------------------------------------------------
 * <= 1279px: ファーストビューの事業トグルをサムネイル無しの細い幅にする
 *
 * サムネイル付き (幅 418px) のままだと、1220px 前後より狭い画面ではカードの文章の幅が足りず、
 * 説明文が右下の矢印に回り込む (1025px では幅 0)。横並びのまま、トグルを細くしてカードに幅を回す
 * ---------------------------------------------------------------- */
@media (max-width: 1279px) {
	.fv-toggle {
		width: 211.5px;
	}

	.fv-toggle__thumb {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * <= 1024px: NEWS 1列、フッター 1列、ファーストビューは SP と同じ縦並び (カードの下にトグル 2 列、サムネイル無し)
 *
 * ファーストビューを横並びにするには幅が足りない (写真 414px + トグルで、769〜1000px 前後は説明文の幅が 0 になる)。
 * Figma は 959px 以下を縦並びにしているが、960〜1024px も説明文が矢印に回り込むので 1024px まで広げた (2026-10-30 デザイナー了承)
 * ---------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* first view (SP と共通) */
	.fv {
		padding: 0 var(--af-gutter);
	}

	.fv__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	/* SP はカードの高さが説明文の行数で変わる。表示中の 1 枚だけを置くと、切り替えのたびに下のトグルが上下に動くので、
	   全カードを同じマスに重ね、表示していないカードも場所だけ残す (高さは一番高いカードに揃う) */
	.fv__cards {
		display: grid;
		min-width: 0;
	}

	.fv-card {
		grid-area: 1 / 1;
		flex-direction: column;
		height: auto;
		border-radius: 8px;
	}

	.fv-card[hidden] {
		display: flex !important;
		visibility: hidden;
	}

	.fv-card__image {
		width: 100%;
		height: auto;
		aspect-ratio: 327 / 246;
	}

	.fv-card__img--pc {
		display: none;
	}

	.fv-card__img--sp {
		display: block;
	}

	/* 一番高いカードに揃えて伸びた分は、色のパネルで埋める */
	.fv-card__panel {
		flex: 1 0 auto;
		min-height: 312px;
		padding: 32px 24px 64px;
		justify-content: flex-start;
	}

	.fv-card__text {
		flex: none;
		gap: 16px;
	}

	.fv-card__title {
		font-size: 26px;
		line-height: 32px;
	}

	/* PC だけの改行 ('card_title' の「ローカライズ / 事業」)。SP は 1 行 */
	.fv-card__title br {
		display: none;
	}

	.fv-card__desc {
		line-height: 28px;
	}

	/* SP のウォーターマーク: 幅 307px で折り返し (Entertainment は 2 行)。
	   Figma の書き出し値 (下端から 50px 中心) だと実描画より約 35px 低くなるため、実描画に合わせて 85px にしている */
	.fv-card__watermark {
		top: auto;
		right: auto;
		bottom: 85px;
		left: 10px; /* Figma: 幅 307px の枠をカード左端から 10px に置き、枠内は左揃え (中央揃えにすると広い画面で中央に寄る) */
		width: 307px;
		max-width: calc(100% - 10px);
		max-height: none;
		transform: translateY(50%);
		font-size: 81px;
		line-height: 0.9;
		text-align: left;
		writing-mode: horizontal-tb;
	}

	/* SP の登場アニメーション (プロトタイプの mobile 版): タイトル 0.9s 遅れ、説明 1.3s 遅れ、ウォーターマークは動かさない */
	.fv-card.is-entering .fv-card__title {
		animation: af-fv-text-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
	}

	.fv-card.is-entering .fv-card__desc {
		animation: af-fv-text-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.3s both;
	}

	.fv-card.is-entering .fv-card__watermark {
		animation: none;
	}

	.fv-card__link {
		width: 41px;
		height: 41px;
		border-radius: 8px 0 0 0;
	}

	.fv-card__link img {
		width: 19px;
		height: 19px;
	}

	.fv__toggles {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		padding: 0;
	}

	.fv-toggle {
		width: auto;
		height: auto;
		padding: 16px 12px;
	}

	.fv-toggle__text {
		font-size: 16px;
	}

}

/* ------------------------------------------------------------------
 * <= 768px: SP
 * ---------------------------------------------------------------- */
@media (max-width: 768px) {

	/* message */
	/* SP のメッセージ: ロゴ・本文・ボタンを中央揃え、背景ロゴは非表示 (Figma SP フレーム) */
	.message {
		padding: 64px var(--af-gutter) 80px;
	}

	.message__bg {
		display: none;
	}

	.message__inner {
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}

	.message__body {
		width: 100%;
		align-items: center;
		gap: 40px;
	}

	.message__copy {
		width: 100%;
		max-width: 314px;
		height: auto;
		aspect-ratio: 398 / 70;
	}

	.message__lines {
		gap: 24px;
		line-height: 28px;
		letter-spacing: 0.24em;
		text-align: center;
	}

	.message__lines p {
		white-space: nowrap;
	}

	/* ir */
	.ir {
		padding: 72px var(--af-gutter);
	}

	.ir__inner {
		gap: 40px;
	}
}

/* aspect-ratio 非対応ブラウザ向けの保険 */
@supports not (aspect-ratio: 1 / 1) {
	@media (max-width: 1024px) {
		.fv-card__image {
			height: 246px;
		}
	}

	@media (max-width: 768px) {
		.message__copy {
			height: 56px;
		}
}
}