@charset "utf-8";


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

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

   このテンプレートは白地・濃灰(#333)・シアン(#59d5e0)の明るい配色なので、
   映像の上に敷く幕は「白のベール（明幕）」です。基準濃度は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: #eef3f5 url("../videos/seq-poster-hd.cedab080.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=真っ白）*/
	--hero-gutter: 20px;	/*ヒーローのスマホでの左右の余白*/

	overflow-x: clip;
	background: #eef3f5;
}

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

/*本文の外周は透明。映像がフッターまで続いて見える構成にします。*/
body.scrub #contents {
	background: none;
}


/*==========================================================================
  3. ヘッダー（白92%の下地でナビを常に読みやすく）
==========================================================================*/
body.scrub > #container > header {
	z-index: 4;
	background: rgba(255,255,255,0.92);
	box-shadow: 0 1px 0 rgba(51,51,51,0.08);
	color: var(--text-color);
}

/*ハンバーガーアイコン（fixed）と重ならないようにします*/
body.scrub.large-screen > #container > header > #menubar {
	margin-right: 60px;
}


/*==========================================================================
  4. 1シーン目（ヒーロー）
==========================================================================*/
/*ピン留め版（hero.css）と違い、ここでは映像を固定レイヤーへ預けているので
  ヒーローは「最初の1画面」を受け持つだけの、ただの区画です。*/
body.scrub .scrub-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	padding: 0 0 clamp(28px, 7vh, 80px);
}

body.scrub .scrub-hero-inner {
	width: 100%;
	padding: 0 var(--hero-gutter);
}

/*本文パネル（白。スマホは下→上へ0.96→0.88、外縁だけ透明へ）*/
body.scrub .scrub-hero-panel {
	position: relative;
	padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.4rem, 3vw, 2.2rem);
	border-radius: 6px;
	background: linear-gradient(0deg,
		rgba(255,255,255,0.96) 0%,
		rgba(255,255,255,0.92) 70%,
		rgba(255,255,255,0.88) 94%,
		rgba(255,255,255,0.74) 100%);
	box-shadow: 0 16px 42px rgba(51,51,51,0.14);
	color: var(--text-color);
}

/*社名（キッカー）とその下の短い罫線*/
body.scrub .scrub-kicker {
	margin: 0 0 0.9rem;
	font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
}
body.scrub .scrub-kicker::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 0.6rem;
	background: var(--primary-color);
}

/*大見出し*/
body.scrub .scrub-title {
	margin: 0 0 1.1rem;
	font-size: clamp(30px, 7.2vw, 38px);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--text-color);
}

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

/*CTA（シアン背景＋濃灰文字）*/
body.scrub .scrub-hero-btn {
	margin: 0;
}
body.scrub .scrub-hero-btn a {
	display: inline-block;
	text-decoration: none;
	min-height: 48px;
	padding: 0.7rem 2.2rem;
	border-radius: 4px;
	background: var(--primary-color);
	color: var(--text-color);
	font-weight: 700;
	letter-spacing: 0.04em;
}
body.scrub .scrub-hero-btn a:hover {
	filter: brightness(1.1);
	color: var(--text-color);
}


/*==========================================================================
  5. ミニマルシーン（映像の上に浮かぶ、ラベル＋見出し＋短文だけの区画）
==========================================================================*/
/*各シーンは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 + 250px);
	min-height: calc(100svh + 250px);
	padding: 12vh 6vw;
}

body.scrub .mpanel {
	position: relative;
	max-width: 34rem;
	padding: clamp(1.6rem, 3.6vw, 2.4rem) clamp(1.4rem, 3vw, 2.2rem);
	border-radius: 6px;
	background: linear-gradient(180deg,
		rgba(255,255,255,0.97) 0%,
		rgba(255,255,255,0.90) 100%);
	box-shadow: 0 12px 32px rgba(51,51,51,0.10);
	color: var(--text-color);
}

body.scrub .mlabel {
	margin: 0 0 0.9rem;
	font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--primary-color);
}

body.scrub .mheading {
	margin: 0 0 0.9rem;
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--primary-color);
}
body.scrub .mheading .mhosoku {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.56em;
	font-weight: 500;
	color: var(--text-color);
}

body.scrub .mtext {
	margin: 0;
	font-size: 1rem;
	line-height: 1.9;
	color: var(--text-color);
}
body.scrub .mtext a {
	color: var(--primary-color);
	font-weight: 700;
	text-decoration: underline;
}

	/*画面幅900px未満は余白を詰めます*/
	@media screen and (max-width:899px) {

	body.scrub .mscene {
		padding: 8vh 6vw;
	}

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


/*==========================================================================
  6. 最後のシーン（フッター）
==========================================================================*/
/*白92%→98%の上→下グラデーション。ここで映像が最終フレームへ到達します。*/
body.scrub .scrub-outro {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/*最後のシーンの明幕（data-dim）は「区画が画面中央に来た時」に切り替わる為、
	  画面の中央線を跨げるだけの高さを持たせています（画面高の58%以上）。
	  総スクロール量を5,000〜7,000pxへ寄せる為、他のシーンと近い高さにしています。*/
	min-height: clamp(650px, 100vh, 950px);
	min-height: clamp(650px, 100svh, 950px);
	background: linear-gradient(180deg,
		rgba(255,255,255,0.92) 0%,
		rgba(255,255,255,0.96) 60%,
		rgba(255,255,255,0.98) 100%);
	color: var(--text-color);
}


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

	body.scrub {
		--hero-gutter: var(--global-space);
	}

	/*ヒーローは左5vw・天地中央にパネル。中央から右側に回廊の奥行きを見せます。*/
	body.scrub .scrub-hero {
		justify-content: center;
		padding-bottom: 0;
	}
	body.scrub .scrub-hero-panel {
		width: 54%;
		min-width: 460px;
		/*PCは左→右に0.96→0.88、文字領域の外で透明へ*/
		background: linear-gradient(90deg,
			rgba(255,255,255,0.96) 0%,
			rgba(255,255,255,0.92) 68%,
			rgba(255,255,255,0.88) 92%,
			rgba(255,255,255,0.70) 100%);
	}
	body.scrub .scrub-title {
		font-size: clamp(40px, 3.6vw, 56px);
	}
	body.scrub .scrub-lead {
		max-width: 34em;
		font-size: 1.05rem;
	}

	}/*画面幅900px以上の追加指定ここまで*/


	/*縦に余裕がない端末では、ヒーローの文字群が画面に収まるように詰めます*/
	@media screen and (max-height:700px) {

	body.scrub .scrub-title {margin-bottom: 0.7rem;font-size: clamp(28px, 5vw, 34px);}
	body.scrub .scrub-lead {margin-bottom: 1.1rem;line-height: 1.8;}

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


/*==========================================================================
  8. ヒーローの入場演出（初回のみ・0.4秒＋最大6pxの移動）
==========================================================================*/
/*「動きを減らす」設定では1つも動かさない為、no-preferenceの中に置いています。
  JSに依存しないCSSアニメーションなので、jQueryが読めなくても文字は必ず出ます。*/
@media (prefers-reduced-motion: no-preference) {

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

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

}