@charset "utf-8";


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

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

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


/*==========================================================================
  1. 固定シーケンスレイヤー（最背面）
==========================================================================*/
.seq-layer {
	position: fixed;
	inset: 0;
	z-index: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	/*ポスター（先頭フレーム）を背景に敷いておきます。
	  デコード前・読み込み失敗時もこれが見えるので黒画面になりません。
	  JSが動く時はjs/scrub.jsが同じ画像を改めて指定します。ここでCSSにも書いておく事で、
	  JS無効・js/scrub.jsの読み込み失敗の時もポスターが出ます。
	  ※映像を差し替える時は js/scrub.js のSEQと、この1行の両方のハッシュ名を更新します。*/
	background: #050505 url("../videos/seq-poster-hd.08ef7649.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: #000;
	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.18;		/*暗幕の基準値（0=素通し、1=真っ黒）。文言を減らした分、背景を広く見せる為に薄めにしています*/
	--hero-gutter: 24px;	/*ヒーローのスマホでの左右の余白*/

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

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


/*==========================================================================
  3. シーン（映像の上に浮かぶ各セクション）
==========================================================================*/
/*1シーンの高さ。ページの総スクロール量÷フレーム数＝1フレームあたりのpxで、
  これが映像の進む速さになります。241フレーム（24fps・10秒）に対して
  20〜30px/フレームへ収める為、画面の高さに比例させつつ上下限を付けています。
  （svhだけで指定すると、背の高い画面ほどページが伸びて30px/フレームを超えます）*/
body.scrub .scrub-scene {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(560px, 100vh, 1000px);
	min-height: clamp(560px, 100svh, 1000px);
	padding: 8vh 0;
}

/*見出しは箱を作らず、文字の側だけに影で局所スクリムを掛けます*/
body.scrub main h2,
body.scrub .title-bg h2 {
	text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 0 34px rgba(0,0,0,0.7);
}

/*本文の局所スクリム（パネル）。全面暗転させずに可読性を確保します。*/
body.scrub .scrub-panel {
	position: relative;
	padding: clamp(1.4rem, 2.4vw, 2.4rem) clamp(1.2rem, 2.4vw, 2.6rem);
	background: linear-gradient(105deg,
		rgba(0,0,0,0.68) 0%,
		rgba(0,0,0,0.48) 55%,
		rgba(0,0,0,0.32) 100%);
	border-left: 1px solid rgba(255,255,255,0.22);
}

/*画像は映像の上でもそのまま見えるので、輪郭だけ締めます*/
body.scrub main figure img {
	box-shadow: 0 18px 46px rgba(0,0,0,0.55);
}

/*簡素化した本文シーン: ラベル＋見出し＋短文のみのパネル。
  左寄せの小さな箱に留め、パネルの外側では映像が広く見えるようにします。*/
body.scrub .scrub-scene .scrub-panel {
	max-width: 34rem;
}
body.scrub .scrub-scene .scrub-panel .label {
	margin: 0 0 0.9rem;
	font-family: "Cinzel", serif;
	font-weight: 400;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #eacd6a;
}
body.scrub .scrub-scene .scrub-panel h2 {
	margin: 0 0 1rem;
	font-size: clamp(1.6rem, 4.4vw, 2.2rem);
	letter-spacing: 0.08em;
	text-indent: 0;
	text-align: left;
}
body.scrub .scrub-scene .scrub-panel h2 span {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.42em;
	letter-spacing: 0.18em;
	opacity: 0.75;
}
body.scrub .scrub-scene .scrub-panel p {
	margin: 0;
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.02em;
}
body.scrub .scrub-scene .scrub-panel .animation-btn {
	margin-top: 1.6rem;
}


/*==========================================================================
  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;
	margin-bottom: 100px;	/*ヘッダーが持っていた「下に空けるスペース」を引き継ぎます*/
	color: #f0f0f0;
}

/*文字を読ませる為の幕。スマホは上から下へ濃くなる縦方向の幕です。*/
body.scrub .scrub-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(0,0,0,0.46) 0%,
		rgba(0,0,0,0.20) 30%,
		rgba(0,0,0,0.58) 62%,
		rgba(0,0,0,0.86) 100%);
}


/*ヘッダー（縦書きロゴ＋メニュー）。ヒーローの上に重ねます。*/
body.scrub .scrub-hero header {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	z-index: 4;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: clamp(18px, 2.4vw, 30px) clamp(20px, 3vw, 40px);
	margin: 0;
	pointer-events: none;	/*映像の上の透明な帯がクリックを奪わないように*/
}
body.scrub .scrub-hero header a {pointer-events: auto;}

/*縦書きロゴ（PC150px前後／スマホ100px前後）*/
body.scrub .scrub-hero #logo {
	width: auto;
	height: clamp(100px, 11vw, 150px);
	order: 0;	/*.home #logo の order:1 を戻して左端へ*/
	margin: 0;
	filter: drop-shadow(0 1px 6px rgba(0,0,0,0.7));
}

/*右上のメニュー。ハンバーガーアイコン（fixed／right:30px・top:30px・60×35px）を
  避ける為に、上から52px下げた位置から始めています。*/
body.scrub .scrub-hero header nav {
	margin-top: 52px;
	font-size: 0.85rem;
}

/*「English」。ハンバーガーアイコンの左隣に置きます。*/
body.scrub .scrub-hero .lang-menu {
	position: absolute;
	left: auto;
	right: 104px;
	top: 34px;
	z-index: 4;
	text-shadow: 1px 1px 2px #000;
}


/*ヒーローの文字ブロック*/
body.scrub .scrub-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 var(--hero-gutter);
	margin-bottom: 32px;	/*帯との間に32px以上*/
}

/*キッカー*/
body.scrub .scrub-kicker {
	margin: 0 0 16px;
	font-family: "Cinzel", serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.18em;
	color: #eacd6a;
}

/*大見出し（2行）*/
body.scrub .scrub-title {
	margin: 0 0 24px;
	font-weight: 400;
	font-size: clamp(28px, 7.6vw, 36px);
	line-height: 1.55;
	letter-spacing: 0.06em;
}
body.scrub .scrub-line {
	display: block;
	white-space: nowrap;	/*指定の2行組を必ず維持します*/
}

/*リード*/
body.scrub .scrub-lead {
	margin: 0 0 28px;
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.04em;
}

/*CTA（既存の枠線アニメーションボタンをそのまま使います）*/
body.scrub .scrub-hero .animation-btn {
	font-size: 14px;
	letter-spacing: 0.10em;
}
body.scrub .scrub-hero .animation-btn-inner {
	padding: 0 1.8em;
	line-height: 50px;	/*枠線1pxと合わせて高さ52px前後*/
}


/*下部の帯（本文にある文言をそのまま4項目）*/
body.scrub .scrub-facts {
	position: relative;
	z-index: 3;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));	/*スマホは2列×2段*/
	border-top: 1px solid rgba(255,255,255,0.3);
	background: rgba(0,0,0,0.72);
}

body.scrub .scrub-facts li {
	/*320px幅でも「渓谷を望む全十五室」等が1行に収まるよう、セルの左右は16pxです。
	  折り返すのは「奥多摩駅より送迎車で約10分」だけになります。*/
	padding: 10px 16px;
	border-right: 1px solid rgba(255,255,255,0.3);
	font-size: 13px;
	line-height: 1.8;
	letter-spacing: 0.03em;
}
body.scrub .scrub-facts li:nth-child(2n) {border-right: 0;}
body.scrub .scrub-facts li:nth-child(-n+2) {
	border-bottom: 1px solid rgba(255,255,255,0.3);
}


/*==========================================================================
  5. 最後のシーン（フッター）
==========================================================================*/
/*最下部で映像が最終フレームへ到達します。余韻の分だけ高さを持たせます。*/
body.scrub .scrub-outro {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(360px, 60vh, 640px);
	min-height: clamp(360px, 60svh, 640px);
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 62%, rgba(0,0,0,0.92) 100%);
}


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

	body.scrub .scrub-kicker {margin-bottom: 12px;}
	body.scrub .scrub-title {margin-bottom: 18px;}
	body.scrub .scrub-lead {margin-bottom: 22px;line-height: 1.85;}
	body.scrub .scrub-hero #logo {height: 92px;}

	}
	/*ここまで*/


	/*画面幅900px以上の追加指定（PCの見え方）*/
	@media screen and (min-width:900px) {

	body.scrub {
		--hero-gutter: 0px;
	}

	/*PCは1シーンあたりを少し詰めます（1カラムより中身が短くなる分、上限も下げます）*/
	body.scrub .scrub-scene {
		min-height: clamp(560px, 96vh, 940px);
		min-height: clamp(560px, 96svh, 940px);
	}

	/*PCは左から右へ薄くなる横方向の幕*/
	body.scrub .scrub-hero::before {
		background: linear-gradient(90deg,
			rgba(0,0,0,0.76) 0%,
			rgba(0,0,0,0.68) 40%,
			rgba(0,0,0,0.22) 72%,
			rgba(0,0,0,0.16) 100%);
	}

	/*上下の補助幕を横幕に重ねます*/
	body.scrub .scrub-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background: linear-gradient(180deg,
			rgba(0,0,0,0.40) 0%,
			rgba(0,0,0,0) 25%,
			rgba(0,0,0,0) 65%,
			rgba(0,0,0,0.78) 100%);
	}

	/*文字群は左端から8%、幅は画面の52%以内*/
	body.scrub .scrub-hero-inner {
		width: 52%;
		padding: 0 0 0 8%;
		margin-bottom: clamp(40px, 7vh, 96px);
	}

	body.scrub .scrub-kicker {font-size: 13px;}
	body.scrub .scrub-title {font-size: clamp(34px, 4.6vw, 64px);}
	body.scrub .scrub-lead {font-size: 16px;max-width: 38em;}
	body.scrub .scrub-hero .animation-btn {font-size: 15px;}
	body.scrub .scrub-hero .animation-btn-inner {padding: 0 2.4em;}

	/*帯はPCで4列*/
	body.scrub .scrub-facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	body.scrub .scrub-facts li {
		padding: 14px clamp(16px, 2.2vw, 34px);
		font-size: 14px;
		border-right: 1px solid rgba(255,255,255,0.3);
		border-bottom: 0;
	}
	body.scrub .scrub-facts li:first-child {padding-left: 8%;}
	body.scrub .scrub-facts li:last-child {border-right: 0;}

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


/*==========================================================================
  6. ヒーローの入場演出（初回のみ・約0.8秒で完了）
==========================================================================*/
/*「動きを減らす」設定では1つも動かさない為、まとめてno-preferenceに置いています。
  JSに依存しないCSSアニメーションなので、jQueryが読めなくても文字は必ず出ます。*/
@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-kicker {animation: scrubRiseIn 0.4s 0.04s cubic-bezier(.22,.61,.36,1) backwards;}
	body.scrub .scrub-line:nth-child(1) {animation: scrubRiseIn 0.4s 0.12s cubic-bezier(.22,.61,.36,1) backwards;}
	body.scrub .scrub-line:nth-child(2) {animation: scrubRiseIn 0.4s 0.22s cubic-bezier(.22,.61,.36,1) backwards;}
	body.scrub .scrub-lead {animation: scrubRiseIn 0.4s 0.32s cubic-bezier(.22,.61,.36,1) backwards;}
	body.scrub .scrub-hero .btn-container {animation: scrubRiseIn 0.4s 0.40s cubic-bezier(.22,.61,.36,1) backwards;}

}