@charset "utf-8";


/*スクロール連動シーケンス背景（スクラブ）
---------------------------------------------------------------------------*/
/*
   index.html（スクラブ版）専用のスタイルです。style.css の後に読み込む事で、
   既存指定を必要な箇所だけ上書きしています。
   （index.html は js/hero.js のピン留めヒーロー版なので、こちらの影響を受けません）

   仕組み: 全キーフレーム化したmp4を画面いっぱいの固定レイヤーに置き、
           ページのスクロール進行度0〜1をvideo.currentTimeへ写像します。
           上へ戻せばそのまま巻き戻ります（js/scrub.js）。

   ベールは「白」。data-dim が大きいほど白く落ち着きます（基準0.30）。

   JS無し／動きを減らす設定／映像の読み込み失敗の時は、videoを隠して
   ポスター（先頭フレーム）の静止画のままになります。
*/


/*==========================================================================
  1. 固定シーケンスレイヤー（最背面）
==========================================================================*/
.seq-layer {
	position: fixed;
	inset: 0;
	z-index: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	/*ポスター（先頭フレーム）を背景に敷いておきます。
	  デコード前・読み込み失敗時もこれが見えます。
	  ※映像を差し替える時は js/scrub.js のSEQと、この1行の両方のハッシュ名を更新します。*/
	background: #fff url("../videos/seq-poster-hd.501cf86a.jpg") center center / cover no-repeat;
}

.seq-layer video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;	/*style.cssのvideo{max-width:100%}を打ち消します*/
	object-fit: cover;
	object-position: center;
}

/*映像の上に乗せる白い明幕。data-dim付きの区画が画面中央に来ると濃さが変わります。*/
.seq-dim {
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: var(--seq-dim);
	transition: opacity 1.2s ease;
}

/*フォールバック: 動きを減らす設定／起動失敗／JS無効 → ポスター静止画*/
@media (prefers-reduced-motion: reduce) {
	.seq-layer video {display: none;}
}
html.no-motion .seq-layer video {display: none;}


/*==========================================================================
  2. 本文を映像の上に載せる
==========================================================================*/
body.scrub {
	--seq-dim: 0.30;		/*白ベールの基準値（0=素通し、1=真っ白）*/
	--panel-radius: 4px;
	--panel-shadow: 0 6px 22px rgba(16,31,58,0.08);

	/*style.cssのoverflow-x:hiddenはbody自身をスクロールコンテナにしてしまいます。
	  スクロールコンテナを作らないclipへ差し替え、はみ出しを抑える働きは保ちます。
	  ※bodyの背景色(#fff)はcanvasへ伝播し、固定レイヤーの更に下に描かれます。*/
	overflow-x: clip;
}

/*#containerを映像より前面へ。header・#menubar・#menubar_hdr・.pagetopは
  style.css側で既にz-index:99以上なので、ここでは触れません。*/
body.scrub #container {
	position: relative;
	z-index: 1;
}

/*固定ヘッダーの背後だけ、白をほんの少し足して文字を読ませます*/
body.scrub .site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0) 100%);
}


/*==========================================================================
  3. ミニマルシーン（映像の上に浮かぶ、ラベル＋見出し＋短文だけの区画）
==========================================================================*/
/*各シーンは1画面（100svh）。総スクロール量は実測で5,000〜7,000px・
  20〜30px/フレーム（240フレーム間隔）を目安にしています。*/
body.scrub .mscene {
	position: relative;
	display: flex;
	align-items: center;
	/*100svh＋固定分。総スクロール量5,000〜7,000px・20〜30px/フレームの
	  実測に合わせて、画面高だけでは足りない分を固定pxで補っています。*/
	min-height: calc(100vh + 80px);
	min-height: calc(100svh + 80px);
	padding: 12vh var(--content-space-l);
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	body.scrub .mscene {padding: 8vh var(--content-space-l);}

	}/*追加指定ここまで*/


/*==========================================================================
  4. 局所スクリム（パネル）
==========================================================================*/
/*本文の直下は0.90以上を確保します。*/
body.scrub .mpanel {
	position: relative;
	max-width: 34rem;
	padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.2rem, 2.6vw, 2rem);
	border-radius: var(--panel-radius);
	box-shadow: var(--panel-shadow);
	color: var(--bg-inverse-color);
	background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.91) 100%);
}

body.scrub .mlabel {
	margin: 0 0 0.9rem;
	font-family: var(--accent-font), var(--base-font);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent-color);
}

body.scrub .mheading {
	margin: 0 0 0.9rem;
	font-size: clamp(1.4rem, 3.6vw, 1.9rem);
	font-weight: 600;
	line-height: 1.5;
	color: var(--primary-color);
}

body.scrub .mtext {
	margin: 0;
	font-size: 1rem;
	line-height: 1.9;
}
body.scrub .mtext a {
	color: var(--primary-color);
	text-decoration: underline;
}
body.scrub .mtext.mcta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 1.2rem;
}
body.scrub .mtext.mcta a {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.6rem;
	border-radius: var(--panel-radius);
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	font-weight: 700;
	text-decoration: none;
}
body.scrub .mtext.mcta a:nth-child(2) {
	background: var(--accent-color);
	color: var(--bg-color);
}


/*==========================================================================
  5. シーン01（ヒーロー）
==========================================================================*/
/*ピン留め版（index.html）と違い、映像は固定レイヤーへ預けているので
  ヒーローは「最初の1画面」を受け持つだけの区画です。*/
body.scrub .scrub-hero {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0;	/*section既定の上下マージン（7vw）を解除します*/
	padding: 0;
	color: var(--bg-inverse-color);
}

/*スマホは下から上へ薄くなる縦方向の幕*/
body.scrub .scrub-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(255,255,255,0.62) 0%,
		rgba(255,255,255,0.22) 26%,
		rgba(255,255,255,0.55) 52%,
		rgba(255,255,255,0.86) 100%);
}

/*ヒーローの文字ブロック（局所スクリムを兼ねます）*/
body.scrub .scrub-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: clamp(1.4rem, 4vw, 2.2rem) var(--content-space-s);
	margin-bottom: 28px;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.90) 14%, rgba(255,255,255,0.96) 100%);
}

/*キッカー*/
body.scrub .scrub-kicker {
	margin: 0 0 0.9rem;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	line-height: 1.6;
	color: var(--accent-color);
}

/*大見出し（2行）*/
body.scrub .scrub-title {
	margin: 0 0 1rem;
	font-weight: 500;
	font-size: clamp(1.6rem, 6.4vw, 2.1rem);
	line-height: 1.6;
	letter-spacing: 0.06em;
}
body.scrub .scrub-line {display: block;}

/*見出し下の細い罫線*/
body.scrub .scrub-rule {
	display: block;
	width: 3rem;
	height: 1px;
	margin: 0 0 1rem;
	background: var(--primary-color);
}

/*リード*/
body.scrub .scrub-lead {
	margin: 0 0 1.4rem;
	font-size: 0.92rem;
	line-height: 1.9;
}

/*CTA（既存のボタンをそのまま使います）*/
body.scrub .scrub-hero .btn-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}
body.scrub .scrub-hero .btn {margin: 0;}
body.scrub .scrub-hero .btn a {padding: 0.6rem 1.6rem;}


/*==========================================================================
  6. シーン13（フッター）
==========================================================================*/
/*最下部で映像が最終フレームへ到達します。*/
body.scrub .scrub-outro {
	position: relative;
	/*data-dimの切り替え判定が「画面中央±5%」なので、最後のシーンが
	  最下部でも中央帯に届く高さを確保する為、他のシーンと近い高さにしています。
	  総スクロール量を5,000〜7,000pxへ寄せる目的も兼ねています。*/
	min-height: clamp(500px, 90vh, 900px);
	min-height: clamp(500px, 90svh, 900px);
	align-content: center;
	background: linear-gradient(180deg, rgba(16,31,58,0.97) 0%, rgba(16,31,58,1) 100%);
}


/*==========================================================================
  7. 画面幅900px以上（PCの見え方）
==========================================================================*/
	@media screen and (min-width:900px) {

	/*PCは左から右へ薄くなる横方向の幕。上下は控えめに。*/
	body.scrub .scrub-hero::before {
		background:
			linear-gradient(180deg, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 74%, rgba(255,255,255,0.42) 100%),
			linear-gradient(90deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.30) 46%, rgba(255,255,255,0) 72%);
	}

	/*文字群は左端から7vw、幅は画面の48%以内。縦位置は中央より少し下。*/
	body.scrub .scrub-hero {justify-content: center;}
	body.scrub .scrub-hero-inner {
		width: 48%;
		min-width: 26rem;
		margin: 8vh 0 0 var(--content-space-l);
		padding: clamp(1.8rem, 2.6vw, 2.6rem);
		border-radius: var(--panel-radius);
		box-shadow: var(--panel-shadow);
		background: linear-gradient(to right, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.90) 82%, rgba(255,255,255,0.86) 100%);
	}

	body.scrub .scrub-kicker {font-size: 0.9rem;}
	body.scrub .scrub-title {font-size: clamp(1.9rem, 2.6vw, 2.6rem);}
	body.scrub .scrub-lead {font-size: 0.95rem;}

	}
	/*画面幅900px以上ここまで*/


/*==========================================================================
  8. 画面幅700px以下（スマホ）
==========================================================================*/
	@media screen and (max-width:700px) {

	body.scrub .mscene {padding: 6vh var(--content-space-l);}

	/*700px以下はヘッダーが通常フロー（高さ80px）になるので、その分を引いて
	  ヒーローを「ちょうど1画面」に収めます。*/
	body.scrub .scrub-hero {
		min-height: calc(100vh - 80px);
		min-height: calc(100svh - 80px);
	}

	body.scrub .scrub-hero-inner {margin-bottom: 20px;}
	body.scrub .scrub-outro {min-height: 0;gap: 1.6rem;}

	}
	/*画面幅700px以下ここまで*/


/*==========================================================================
  9. ヒーローの入場演出（初回のみ・約0.4秒で完了）
==========================================================================*/
/*「動きを減らす」設定では動かしません。JSに依存しないCSSアニメーションなので、
  jQueryが読めなくても文字は必ず出ます（主見出しとCTAは最初から可読）。*/
@media (prefers-reduced-motion: no-preference) {

	@keyframes scrubRiseIn {
		from {opacity: 0;transform: translate3d(0, 8px, 0);}
		to {opacity: 1;transform: translate3d(0, 0, 0);}
	}

	body.scrub .scrub-hero-inner {
		animation: scrubRiseIn 0.4s 0.05s cubic-bezier(.22,.61,.36,1) backwards;
	}

}