@charset "utf-8";


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

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

   ベールは既存背景と同じ炭色 #31302f。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: #31302f url("../videos/seq-poster-hd.d3796116.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: #31302f;
	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 10px 28px rgba(0,0,0,0.28);

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

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

/*白いロゴとメニューの背後だけ、炭色をほんの少し足して読ませます*/
body.scrub header {
	position: relative;
	z-index: 3;
}
body.scrub header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(49,48,47,0.62) 0%, rgba(49,48,47,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 + 100px);
	min-height: calc(100svh + 100px);
	padding: 12vh var(--content-space-l);
}

	@media (max-width:700px) {

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

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


/*==========================================================================
  4. 局所スクリム（パネル）
==========================================================================*/
/*全体ベールは映像の調子を整える役割。文字の読みやすさはここで確保します。*/
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: rgba(49,48,47,0.92);	/*炭色*/
	line-height: 1.95;
}

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;
	opacity: 0.7;
}

body.scrub .mheading {
	margin: 0 0 0.9rem;
	font-size: clamp(1.4rem, 3.6vw, 1.9rem);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.04em;
}

body.scrub .mtext {
	margin: 0;
	font-size: 1rem;
	line-height: 1.9;
}
body.scrub .mtext span {
	font-size: 0.85rem;
	opacity: 0.75;
}
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.8rem;
	border-radius: var(--panel-radius);
	background: #c93f05;	/*現行ヒーローの朱色を継承*/
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
body.scrub .mtext.mcta i {margin-right: 0.6em;}
body.scrub .mtext.mcta a:nth-child(2) {
	background: rgba(255,255,255,0.14);
}

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


/*==========================================================================
  5. シーン1（ヒーロー）
==========================================================================*/
/*ピン留め版（index.html）と違い、映像は固定レイヤーへ預けているので
  ヒーローは「最初の1画面」を受け持つだけの区画です。
  ヘッダー（高さ80px・通常フロー）の分を引いて1画面に収めます。*/
body.scrub .scrub-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: calc(100vh - 80px);
	min-height: calc(100svh - 80px);
	margin: 0;
	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(49,48,47,0.30) 0%,
		rgba(49,48,47,0.10) 30%,
		rgba(49,48,47,0.46) 60%,
		rgba(49,48,47,0.80) 100%);
}

/*ヒーローの文字ブロック（局所スクリムを兼ねます。文字直下は0.88。）*/
body.scrub .scrub-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: clamp(1.4rem, 5vw, 2.2rem) var(--content-space-l);
	background: linear-gradient(180deg, rgba(49,48,47,0) 0%, rgba(49,48,47,0.80) 16%, rgba(49,48,47,0.88) 100%);
}

body.scrub .scrub-kicker {
	margin: 0 0 0.9rem;
	font-size: 0.85rem;
	letter-spacing: 0.22em;
	line-height: 1.6;
}

body.scrub .scrub-title {
	margin: 0 0 1rem;
	font-weight: 600;
	font-size: clamp(1.8rem, 7vw, 2.4rem);
	line-height: 1.55;
	letter-spacing: 0.08em;
}
body.scrub .scrub-title span {display: block;}

body.scrub .scrub-lead {
	margin: 0 0 1.4rem;
	font-size: 0.95rem;
	line-height: 1.9;
}

/*電話CTA（朱色）*/
body.scrub .scrub-cta {margin: 0 0 0.7rem;}
body.scrub .scrub-cta a {
	display: inline-block;
	text-decoration: none;
	padding: 0.7rem 1.8rem;
	border-radius: 3px;
	background: #c93f05;	/*現行ヒーローの朱色*/
	color: #fff;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
}
body.scrub .scrub-cta-tel {
	font-family: var(--accent-font), var(--base-font);
	letter-spacing: 0.02em;
}
body.scrub .scrub-hours {
	margin: 0;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
}
body.scrub .scrub-num {font-family: var(--accent-font), var(--base-font);}


/*==========================================================================
  6. シーン7（フッター）
==========================================================================*/
/*最下部で映像が最終フレームへ到達します。
  総スクロール量を5,000〜7,000pxへ寄せる為、他のシーンと近い高さにしています。*/
body.scrub .scrub-outro {
	position: relative;
	min-height: clamp(500px, 90vh, 900px);
	min-height: clamp(500px, 90svh, 900px);
	align-content: center;
	background: rgba(45,45,45,0.96);
}
body.scrub .scrub-outro .mpanel {
	max-width: none;
}


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

	/*PCは左から右へ薄くなる横方向の幕。右側に湯面と木立を見せます。*/
	body.scrub .scrub-hero::before {
		background:
			linear-gradient(180deg, rgba(49,48,47,0.46) 0%, rgba(49,48,47,0) 22%, rgba(49,48,47,0) 76%, rgba(49,48,47,0.40) 100%),
			linear-gradient(90deg, rgba(49,48,47,0.62) 0%, rgba(49,48,47,0.34) 46%, rgba(49,48,47,0) 70%);
	}

	/*文字群は左端から7vw、左側45〜55%。上下は中央寄せ。*/
	body.scrub .scrub-hero {justify-content: center;}
	body.scrub .scrub-hero-inner {
		width: 50%;
		min-width: 30rem;
		margin: 0 0 6vh var(--content-space-l);
		padding: clamp(1.8rem, 2.6vw, 2.6rem);
		border-radius: var(--panel-radius);
		background: linear-gradient(to right, rgba(49,48,47,0.88) 0%, rgba(49,48,47,0.88) 78%, rgba(49,48,47,0) 100%);
	}

	body.scrub .scrub-title {font-size: clamp(2rem, 3vw, 2.9rem);}

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


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

	body.scrub .mpanel {padding: 1rem 1.1rem;}
	body.scrub .scrub-outro {min-height: 0;}

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


/*==========================================================================
  9. ヒーローの入場演出（初回のみ・約0.5秒で完了）
==========================================================================*/
/*「動きを減らす」設定では動かしません。JSに依存しないCSSアニメーションなので、
  jQueryが読めなくてもコピーと電話CTAは必ず出ます。*/
@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-inner {
		animation: scrubRiseIn 0.5s 0.05s cubic-bezier(.22,.61,.36,1) backwards;
	}

}