/**
 * MESSAGE（メッセージ）ページ
 * デザイン: 6/2_Message.jpg
 * 配色: 橙 #F5A313 / 黄 #FDCE00 / 青緑 #10A9AC / 文字 #493B3B / クリーム #FFF8EA
 */

.p-message {
	overflow: clip;
}

/* このページのコンテンツ幅は一律1140px（1140 + 左右padding40 / w-1280のmax-widthを上書き）
 * ブリード要素（PHILOSOPHYカード・写真・波帯など）ははみ出したまま */
.p-message .w-1280 {
	max-width: 1220px;
}

/* このページだけタイトル帯の英字を濃色に（デザイン準拠 / 他ページは橙のまま） */
.p-message .l-page-head__eng {
	color: #493B3B;
}
/* このページはタイトル帯の日本語を英字の右端揃えに（他ページは左揃え） */
.p-message .l-page-head__title .l-page-head__jp {
	align-self: flex-end;
}
/* このページはタイトル帯の下線なし（クリームが波にそのまま繋がるデザイン） */
.p-message .l-page-head {
	border-bottom: none;
}
/* このページだけタイトル帯のインナーを全幅に（PC: 左80px / SP: 左右20px） */
.p-message .l-page-head__inner {
	max-width: 100%;
	padding-left: 80px;
}
@media screen and (max-width: 768px) {
	.p-message .l-page-head__inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ページ内アンカーのスムーススクロール（このページがある時だけ） */
@media (prefers-reduced-motion: no-preference) {
	html:has(.p-message) {
		scroll-behavior: smooth;
	}
}

/* =========================================================
 * 共通: 見出し（英字大 + 日本語小）
 * ========================================================= */
.p-message__heading {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: #493B3B;
}
.p-message__heading-eng {
	font-weight: 700;
	font-size: 40px;
	line-height: 100%;
	text-transform: uppercase;
}
.p-message__heading-jp {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.2em;
}
.p-message__heading--center {
	align-items: center;
}

/* =========================================================
 * イントロ（橙 + ロゴウォーターマーク）
 * ========================================================= */
.p-message__intro {
	position: relative;
	background: #F5A313;
	color: #fff;
	padding: 300px 0 220px;
	overflow: hidden; /* ウォーターマークのはみ出しをセクション内にクリップ */
}
/* ロゴウォーターマーク（TOP challengeと同じsvg）
 * インナー基準の擬似要素: 幅690px(1440基準・max690)・インナー右端から80px右へズラす */
.p-message__intro-inner {
	position: relative;
	z-index: 0; /* スタッキングコンテキスト化: ::after(z:-1)を背景より前・テキストより後ろに */
}
.p-message__intro-inner::after {
	content: "";
	position: absolute;
	top: -40px;
	right: -80px;
	width: min(47.9vw, 690px);
	aspect-ratio: 827 / 772; /* svg実寸比 */
	background: url("../images/top/challenge-before.svg") no-repeat center / contain;
	z-index: -1; /* テキストの背面 */
	pointer-events: none;
}
/* クリーム→橙の境目（TOP FVと同一のサイン波 + rAF横流れ / wave-flow.js）
 * relation_wave_path は下塗りのため、コンテナを scaleY(-1) でクリームを上側に */
.p-message__intro-curve {
	position: absolute;
	top: -2px;
	left: 0;
	width: 100%;
	height: 200px;
	overflow: hidden;
	line-height: 0;
	pointer-events: none;
	transform: scaleY(-1);
}
.p-message__intro-curve svg {
	display: block;
	width: 400%; /* viewBox 4000(2周期) → 1周期=100vw（TOPと同スケール） */
	height: 100%;
}
.p-message__intro-title {
	font-weight: 700;
	font-size: 24px;
	line-height: 2;
	letter-spacing: 0.2em;
	margin-bottom: 24px;
}
.p-message__intro-text {
	font-weight: 700;
	font-size: 15px;
	line-height: 2.3;
	letter-spacing: 0.06em;
}
.p-message__intro-text + .p-message__intro-text {
	margin-top: 12px;
}

/* =========================================================
 * PHILOSOPHY（橙地 + クリームカード + 都市写真）
 * ========================================================= */
.p-message__philosophy {
	position: relative;
	background: #F5A313;
}
/* CONTENTS追従範囲（PHILOSOPHY〜MVVを包む = TOP MESSAGE直前までstickyが効く） */
.p-message__contents-range {
	position: relative;
	background: #F5A313; /* ナビ帯の背景（前後セクションと同じ橙で継ぎ目なし） */
}
/* CONTENTS アンカー（カード左の橙余白 / PCはスクロールに追従） */
.p-message__contents {
	position: sticky;
	top: 120px; /* 固定ヘッダーの下 */
	height: 0; /* 追従用の器。カードのレイアウトに影響させない */
	overflow: visible;
	z-index: 5; /* MVVの波レイヤー(z:2,3)より前面 */
	/* 1140インナーの左端（コンテンツ左）に揃える */
	margin-left: max(40px, calc(50% - 570px));
	width: fit-content; /* stickyで全幅化すると矢印が右端に離れるため内容幅に */
	color: #493B3B;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}
/* クリームの波が競り上がる頃（--mvv-progress > 0.86 / js/message.js）にフェードアウト */
.p-message__contents-range.is-contents-hidden .p-message__contents {
	opacity: 0;
	visibility: hidden;
}
.p-message__contents-label {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	margin-bottom: 18px;
}
.p-message__contents-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 160px;
}
.p-message__contents-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-width: 165px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: #493B3B;
	text-decoration: none;
}
.p-message__contents-arrow {
	position: relative;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #493B3B;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}
.p-message__contents-arrow::after {
	content: "↓";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 10px;
	line-height: 1;
	left: 2px; /* 光学中央合わせ */
}
.p-message__contents-list a:hover .p-message__contents-arrow {
	transform: translateY(3px);
}

/* クリームカード（左はCONTENTS(160px)+余白40を残し、右端までブリード）
 * 左端 = 1140インナー左 + 200px */
.p-message__philosophy-card {
	margin-left: max(240px, calc(50% - 370px));
	background: #FFF8EA;
	border-radius: 60px 0 0 60px;
	overflow: hidden;
}
.p-message__philosophy-inner {
	display: flex;
	flex-direction: column;
	gap: 56px;
	/* max-width 980 + 右padding40 で、中身の右端が1140インナーの右端に一致
	 * （カード左 = 50%-370 → 右端 = 50%-370+980-40 = 50%+570） */
	max-width: 980px;
	padding: 120px 40px 80px 110px;
}
.p-message__philosophy-body {
	margin-left: auto;
}
.p-message__philosophy-catch {
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.2em;
	color: #493B3B;
	margin-bottom: 36px;
}
.p-message__philosophy-text {
	font-weight: 700;
	font-size: 15px;
	line-height: 2.15;
	letter-spacing: 0.05em;
	color: #493B3B;
}
.p-message__philosophy-text + .p-message__philosophy-text {
	margin-top: 14px;
}
/* 都市写真のリビール:
 * クリームのカバー（下端に「流れる波」付き）が写真全面を覆った状態から
 * is-reveal で丸ごと競り上がり、波エッジがそのまま写真上端の定位置に着地する。
 * → 競り上がり中も着地後も同じ波が流れ続けるため、演出が一体化する。 */
.p-message__philosophy-photo {
	position: relative;
	height: 430px;
	overflow: hidden;
}
.p-message__philosophy-photo-cover {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: calc(100% + 1px);
	background: #FFF8EA;
	z-index: 1;
	pointer-events: none;
	transition: transform 2.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-message__philosophy-photo.is-reveal .p-message__philosophy-photo-cover {
	transform: translateY(calc(-100% + 1px)); /* 波帯が写真上端の定位置に着地 */
}
/* カバー下端の波帯（クリームが線の上側 / relation_wave_path は下塗りのため反転） */
.p-message__philosophy-photo-curve {
	position: absolute;
	top: calc(100% - 1px);
	left: 0;
	width: 100%;
	height: 150px;
	overflow: hidden;
	line-height: 0;
	transform: scaleY(-1);
}
.p-message__philosophy-photo-curve svg {
	display: block;
	width: 400%;
	height: 100%;
}
@media (prefers-reduced-motion: reduce) {
	.p-message__philosophy-photo-cover {
		transition: none;
		transform: translateY(calc(-100% + 1px));
	}
}
.p-message__philosophy-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* =========================================================
 * MVV（MISSION→VISION→VALUE / スクロールで波が競り上がる）
 * 380svh のセクション内で 100svh をスティッキーホールドし、
 * --mvv-progress（js/message.js が 0→1 で更新）で
 *   0.06〜0.32: 黄の波が競り上がる → 0.30〜: VISION表示
 *   0.40〜0.66: 青緑の波が競り上がる → 0.64〜: VALUE表示
 *   0.78〜0.98: クリーム(TOP MESSAGE背景色)の波が覆って次セクションへ
 * ========================================================= */
.p-message__mvv {
	--mvv-progress: 0;
	position: relative;
	height: 580svh; /* MISSION後とVALUE後にそれぞれ1画面分の空転を挟む */
	background: #F5A313;
}
.p-message__mvv-hold {
	position: sticky;
	top: 0;
	height: 100svh;
	min-height: 100vh;
	overflow: clip;
}
.p-message__mvv-panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 44px;
	text-align: center;
	padding: 0 20px;
}
/* MISSION/VISION/VALUE の中身はクリームのカードに載せる（背景の橙・黄・青緑に対する可読性確保） */
.p-message__mvv-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 44px; /* パネル側と同じ間隔 */
	width: min(100%, 760px);
	min-height: 384px; /* 3枚同一サイズ（最大=VISION 3行に揃える） */
	padding: 64px 56px;
	background: #FFF8EA;
	color: #493B3B;
	border-radius: 10px;
}
.p-message__mvv-text {
	font-weight: 700;
	font-size: 24px;
	line-height: 2;
	letter-spacing: 0.1em;
	color: #493B3B;
}
/* 波レイヤー（下から競り上がる塗り + 上端の波キャップ） */
.p-message__mvv-layer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}
.p-message__mvv-cap {
	position: absolute;
	bottom: calc(100% - 1px); /* 塗りに1px食い込ませて隙間予防 */
	left: 0;
	width: 100%;
	height: 200px;
	overflow: hidden;
	line-height: 0;
	pointer-events: none;
}
.p-message__mvv-cap svg {
	display: block;
	width: 400%; /* TOP FVと同スケールのサイン波 + rAF横流れ */
	height: 100%;
}
.p-message__mvv-layer--yellow {
	z-index: 2;
	background: #FDCE00;
	/* 初期は下に10svhだけ覗く（低め）→ 0.26まで空転してから競り上がる */
	height: calc(10svh + 102svh * clamp(0, (var(--mvv-progress) - 0.21) / 0.16, 1));
}
.p-message__mvv-layer--teal {
	z-index: 3;
	background: #10A9AC;
	height: calc(4svh + 108svh * clamp(0, (var(--mvv-progress) - 0.49) / 0.16, 1));
}
/* クリーム: VALUEの後、画面外(下)から競り上がってTOP MESSAGEの背景色に引き継ぐ
 * bottom:-202px 起点なので初期は波キャップごと画面外に隠れる */
.p-message__mvv-layer--cream {
	z-index: 4;
	background: #FFF8EA;
	bottom: -202px;
	/* VALUE表示(〜0.70)後の空走を短縮: 競り上がり開始を 0.90→0.83 に前倒し（rise 0.83→0.98） */
	height: calc(1px + (112svh + 202px) * clamp(0, (var(--mvv-progress) - 0.83) / 0.15, 1));
}
/* レイヤー内パネルは「覆い切った画面」に合わせて下端から100svhで固定 */
.p-message__mvv-layer .p-message__mvv-panel {
	inset: auto 0 0 0;
	height: 100svh;
}
/* テキストは波が覆い切る頃にフワッと出す（進捗ゲート） */
.p-message__mvv-panel--vision {
	opacity: clamp(0, (var(--mvv-progress) - 0.35) / 0.07, 1);
	transform: translateY(calc((1 - clamp(0, (var(--mvv-progress) - 0.35) / 0.07, 1)) * 28px));
}
.p-message__mvv-panel--value {
	opacity: clamp(0, (var(--mvv-progress) - 0.63) / 0.07, 1);
	transform: translateY(calc((1 - clamp(0, (var(--mvv-progress) - 0.63) / 0.07, 1)) * 28px));
}

/* =========================================================
 * TOP MESSAGE（クリーム / 代表写真 + メッセージ）
 * ========================================================= */
.p-message__top {
	background: #FFF8EA;
	color: #493B3B;
	/* 波が覆い切った直後の1画面に中身が縦センターで現れる（空走スクロールをなくす） */
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding: 80px 0 120px;
}
.p-message__top-inner {
	width: 100%;
	display: grid;
	grid-template-columns: 38% 1fr;
	gap: 72px;
	align-items: start;
}
/* 左: 見出し + 大きめキャッチ */
.p-message__top-head .p-message__heading {
	margin-bottom: 40px;
}
.p-message__top-catch {
	font-weight: 700;
	font-size: 48px;
	line-height: 1.8;
	letter-spacing: 0.08em;
}
/* 右: 本文 + 署名（左との間に細い区切り線） */
.p-message__top-body {
	border-left: 1px solid rgba(73, 59, 59, 0.15);
	padding-left: 72px;
}
.p-message__top-text {
	font-weight: 500;
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.05em;
}
.p-message__top-text + .p-message__top-text {
	margin-top: 32px;
}
.p-message__top-name {
	margin-top: 56px;
	text-align: right;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.1em;
}
.p-message__top-name-lg {
	font-size: 28px;
	margin-left: 12px;
}

/* =========================================================
 * 表示順（グループ発火 + is-anim-in スコープのディレイ）
 * ========================================================= */
html.js-text-anim .p-message__intro-title.is-anim-in { transition-delay: 0.05s; }
html.js-text-anim .p-message__intro-text.is-anim-in:nth-of-type(1) { transition-delay: 0.3s; }
html.js-text-anim .p-message__intro-text.is-anim-in:nth-of-type(2) { transition-delay: 0.45s; }
html.js-text-anim .p-message__intro-text.is-anim-in:nth-of-type(3) { transition-delay: 0.6s; }

/* philosophy: 見出し(2=文字ｽｽｽ)が先行 → キャッチ → 本文の順 */
html.js-text-anim .p-message__philosophy-catch.is-anim-in { transition-delay: 0.45s; }
/* philosophy-body内は catch も p のため nth-of-type は 2始まり */
html.js-text-anim .p-message__philosophy-text.is-anim-in:nth-of-type(2) { transition-delay: 0.6s; }
html.js-text-anim .p-message__philosophy-text.is-anim-in:nth-of-type(3) { transition-delay: 0.75s; }
html.js-text-anim .p-message__philosophy-text.is-anim-in:nth-of-type(4) { transition-delay: 0.9s; }

html.js-text-anim .p-message__mvv-panel--mission .p-message__heading.is-anim-in { transition-delay: 0.05s; }
html.js-text-anim .p-message__mvv-panel--mission .p-message__mvv-text.is-anim-in { transition-delay: 0.25s; }

/* top-body は本文4つ(nth 1..4)→署名(nth 5) の順で表示 */
html.js-text-anim .p-message__top-text.is-anim-in:nth-of-type(1) { transition-delay: 0.3s; }
html.js-text-anim .p-message__top-text.is-anim-in:nth-of-type(2) { transition-delay: 0.45s; }
html.js-text-anim .p-message__top-text.is-anim-in:nth-of-type(3) { transition-delay: 0.6s; }
html.js-text-anim .p-message__top-text.is-anim-in:nth-of-type(4) { transition-delay: 0.75s; }
html.js-text-anim .p-message__top-name.is-anim-in { transition-delay: 0.9s; }

/* =========================================================
 * レスポンシブ
 * ========================================================= */
@media screen and (max-width: 1080px) {
	.p-message__philosophy-inner {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 90px 60px 80px;
	}
	.p-message__top-inner {
		gap: 60px;
	}
}

@media screen and (max-width: 768px) {
	.p-message__heading-eng { font-size: 32px; }

	.p-message__intro {
		padding: 120px 0 80px; /* 上120は波(100px)との兼ね合い */
	}
	.p-message__intro-title {
		font-size: 20px;
		margin-bottom: 28px;
	}
	.p-message__intro-text { font-size: 14px; }

	.p-message__contents {
		display: none; /* SPは目次ナビなし */
	}
	.p-message__philosophy-card {
		margin-left: 20px;
		border-radius: 24px 0 0 24px;
	}
	.p-message__philosophy-inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 56px 20px 48px 24px;
	}
	.p-message__philosophy-catch { font-size: 20px; margin-bottom: 24px; }
	.p-message__philosophy-text { font-size: 14px; }
	.p-message__philosophy-photo { height: 220px; }
	.p-message__philosophy-photo-curve { height: 64px; }

	.p-message__mvv-text { font-size: 18px; }
	.p-message__mvv-panel { gap: 28px; }
	.p-message__mvv-box { gap: 28px; padding: 40px 24px; min-height: 312px; /* SPの最大=MISSION 4行に揃える */ }
	.p-message__mvv-cap { height: 96px; }
	.p-message__intro-curve { height: 100px; }

	.p-message__top { padding: 80px 0 80px; }
	.p-message__top-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.p-message__top-head .p-message__heading { margin-bottom: 24px; }
	.p-message__top-catch { font-size: 28px; line-height: 1.7; }
	/* SPは1カラム: 区切り線をなくして左padも解除 */
	.p-message__top-body {
		border-left: 0;
		padding-left: 0;
	}
	.p-message__top-text { font-size: 14px; }
	.p-message__top-name { margin-top: 40px; }
	.p-message__top-name-lg { font-size: 22px; }
}

/* フッター共通CONTACTの上波色 */
:root {
	--contact-wave-color: #FFF8EA;
}