@charset "utf-8";


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

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

   このテンプレートは白地・青（#0e28e5）・濃紺（#121a5a）の明るい配色なので、
   映像の上に敷く幕は「白のベール（明幕）」です。基準濃度は0.28。

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

   ※クラス名は既存のメインビジュアル実装（mainimg-系）と衝突しないよう
     scrub- / seq- を接頭辞にしています。
*/


/*==========================================================================
  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: #eef1f6 url("../videos/seq-poster-hd.36f783f7.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.16;		/*白ベールの基準値（0=素通し、1=真っ白）。文言を減らした分、背景を広く見せる為に薄めにしています*/
	--hero-gutter: 24px;	/*ヒーローのスマホでの左右の余白*/

	/*style.cssのoverflow-x:hiddenはbody自身をスクロールコンテナにしてしまいます。
	  スクロールコンテナを作らないclipへ差し替え、はみ出しを抑える働きは保ちます。*/
	overflow-x: clip;
	background: #eef1f6;
}

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

/*セクション全面の背景画像・不透明背景は、局所パネルへ置き換えます。*/
body.scrub #kodawari,
body.scrub #flow {
	background: none;
}


/*==========================================================================
  3. ヘッダー（白いロゴ・メニューの背後に濃紺の局所スクリム）
==========================================================================*/
body.scrub > #container > header {
	z-index: 4;
	padding-bottom: 3rem;
	background: linear-gradient(180deg,
		rgba(18,26,90,0.88) 0%,
		rgba(18,26,90,0.72) 45%,
		rgba(18,26,90,0.28) 78%,
		rgba(18,26,90,0) 100%);
}

/*ハンバーガーアイコン（fixed・70×70）と重ならないようにします*/
body.scrub #header-box {
	margin-right: 80px;
}

/*開閉メニューは画面全面の固定ブロックです。style.cssには初期状態を隠す指定が無く、
  js/main.jsが読み込まれて初めて隠れる為、JSが無効・CDNが無応答だと青一色の面で
  ページが覆われてしまいます。ここで初期状態を「隠す」に揃えておきます。
  （ハンバーガーを押した時はjQueryの.show()がインラインのdisplayを付けるので、
    この指定より後勝ちになり、従来どおり開きます。）*/
body.scrub #menubar {
	display: none;
}


/*==========================================================================
  4. 1シーン目（ヒーロー）
==========================================================================*/
/*ピン留め版（mainimg.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, 6vh, 72px);
}

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

/*本文パネル（白。左→右へ0.96→0.88、外縁だけ透明へ）*/
body.scrub .scrub-hero-panel {
	position: relative;
	max-width: 520px;
	padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 2.6vw, 2.4rem);
	border-radius: 6px;
	border-left: 4px solid var(--primary-color);
	background: linear-gradient(105deg,
		rgba(255,255,255,0.96) 0%,
		rgba(255,255,255,0.93) 62%,
		rgba(255,255,255,0.88) 92%,
		rgba(255,255,255,0.74) 100%);
	box-shadow: 0 18px 46px rgba(18,26,90,0.18);
	color: #555;
}

/*キッカー（英字）*/
body.scrub .scrub-kicker {
	margin: 0 0 0.6rem;
	font-size: 0.85rem;
	line-height: 1.4;
	letter-spacing: 0.14em;
	color: var(--primary-color);
}

/*大見出し*/
body.scrub .scrub-title {
	margin: 0 0 1rem;
	font-size: clamp(28px, 6.4vw, 34px);
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--secondary-color);
}

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

/*CTA（既存のbtnスタイルをそのまま使います）*/
body.scrub .scrub-hero-btn {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}
body.scrub .scrub-hero-btn a {
	border-radius: 5px;
	padding: 0.7rem 1.4rem;
	font-size: 1rem;
}
body.scrub .scrub-hero-btn i {
	margin-right: 0.8rem;
}


/*==========================================================================
  5. シーン（映像の上に浮かぶ各区画）
==========================================================================*/
/*1シーンの高さ＝そのシーンに割り当てるスクロール距離です。
  総スクロール量6,000px前後 ÷ 240フレーム間隔 ≒ 25px／コマになるよう配分しています。*/
body.scrub .scrub-scene {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--scene-h, 600px);
	padding-top: 3vh;
	padding-bottom: 3vh;
}

/*簡素化後はどのシーンも「番号＋見出し＋短文」だけなので、同じ高さで揃えます。*/
body.scrub #kodawari,
body.scrub #service,
body.scrub #flow       {--scene-h: min(180vh, 1500px);}
body.scrub #reserve    {--scene-h: 500px;}

	/*スマホも「番号＋見出し＋短文」だけなので、デスクトップと同じ考え方で
	  画面の高さに比例させたシーン高を保ちます（空白の穴は作りません）。*/
	@media screen and (max-width:899px) {

	body.scrub .scrub-scene {
		min-height: min(165vh, 1400px);
		padding: 2vh 1.6rem;	/*左右は約21px。20px以上を確保しています。*/
	}
	body.scrub #reserve {min-height: min(76vh, 600px);}

	/*フッターも同じ左右の余白に揃えます*/
	body.scrub .scrub-outro {
		padding: 2rem 1.6rem;
	}

	body.scrub main h2 {
		padding: 0.8rem 1.2rem;
		margin-bottom: 3vw;
		font-size: 1.9rem;
	}

	body.scrub .scrub-panel {
		padding: 1.2rem 1.1rem;
	}
	body.scrub .scrub-panel p {
		line-height: 1.85;
	}
	body.scrub .scrub-panel-navy {
		padding: 1.4rem 1rem;
	}

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


/*見出しは白い小さな面に載せます*/
body.scrub main h2 {
	width: fit-content;
	max-width: 100%;
	padding: 1.2rem 2rem;
	border-radius: 6px;
	background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.86) 100%);
	color: var(--secondary-color);
	box-shadow: 0 10px 28px rgba(18,26,90,0.12);
}
body.scrub main h2.c {
	margin-left: auto;
	margin-right: auto;
}


/*==========================================================================
  6. 局所スクリム（パネル）
==========================================================================*/
/*白パネル。全面を白くせず、文字の下だけ十分な濃さを残します。*/
body.scrub .scrub-panel {
	position: relative;
	padding: clamp(1.4rem, 2.4vw, 2.2rem) clamp(1.2rem, 2.2vw, 2rem);
	border-radius: 6px;
	background: linear-gradient(100deg,
		rgba(255,255,255,0.97) 0%,
		rgba(255,255,255,0.94) 64%,
		rgba(255,255,255,0.90) 100%);
	box-shadow: 0 12px 34px rgba(18,26,90,0.10);
	color: #555;
}

/*見出し・短文だけの小さな箱に留め、パネルの外側では映像が広く見えるようにします。
  見出しは既に外側のパネル（.scrub-panel / .scrub-panel-navy）に載っているので、
  main h2 の白いピル背景は重ねて敷きません。*/
body.scrub .panel-mini {
	max-width: 34rem;
}
body.scrub .panel-mini h2 {
	padding: 0;
	background: none;
	box-shadow: none;
	margin-bottom: 0.8rem;
}
body.scrub .panel-mini .label {
	margin: 0 0 0.7rem;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--primary-color);
	opacity: 0.85;
}
body.scrub .scrub-panel-navy .label {color: #cfd6ff;opacity: 0.9;}
body.scrub .panel-mini p:not(.label) {margin: 0;line-height: 1.9;}

/*濃紺パネル（サービス紹介）*/
body.scrub .scrub-panel-navy {
	position: relative;
	padding: clamp(1.8rem, 3vw, 3rem) clamp(1.2rem, 2.4vw, 2.4rem);
	border-radius: 8px;
	background: linear-gradient(180deg,
		rgba(18,26,90,0.96) 0%,
		rgba(18,26,90,0.93) 55%,
		rgba(18,26,90,0.90) 100%);
	color: var(--secondary-inverse-color);
	box-shadow: 0 18px 44px rgba(18,26,90,0.22);
}

/*濃紺パネルの中の見出しは白。白い面は重ねません。*/
body.scrub .scrub-panel-navy h2 {
	padding: 0;
	background: none;
	box-shadow: none;
	color: var(--secondary-inverse-color);
}

/*予約ボタンのパネル（白。下→上へ0.96→0.88）*/
body.scrub .scrub-panel-cta {
	padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 2vw, 2rem);
	border-radius: 8px;
	background: linear-gradient(0deg,
		rgba(255,255,255,0.96) 0%,
		rgba(255,255,255,0.92) 60%,
		rgba(255,255,255,0.88) 100%);
	box-shadow: 0 14px 36px rgba(18,26,90,0.12);
}

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


/*==========================================================================
  7. （旧: シーン2「１行お知らせ」〜シーン7「よく頂く質問」）
==========================================================================*/
/*お知らせ帯・カードグリッド・Step開閉・横スクロールの声・FAQは
  コンテンツ簡素化で撤去した為、対応するCSSも削除しています。*/


/*==========================================================================
  12. シーン8「オンライン予約」「お電話でのご予約」
==========================================================================*/
/*既存の height:80vh は、シーンの高さ配分と二重になるので解除します*/
body.scrub .btn-box .btn {
	height: auto;
	gap: 1.2rem;
}
body.scrub .btn-box .btn li {
	width: 100%;
}

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

	body.scrub .btn-box .btn li {width: 40%;}

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


/*==========================================================================
  13. 最後のシーン（ウェーブ＋フッター）
==========================================================================*/
/*ウェーブは静的な境界装飾にします（横移動アニメーションは止めます）*/
body.scrub .wave .wave-wrap {
	animation: none;
}

/*フッターは青の局所パネル。下→上へ0.98→0.94。*/
body.scrub .scrub-outro {
	position: relative;
	display: flex;
	align-items: center;
	background: linear-gradient(0deg,
		rgba(14,40,229,0.86) 0%,
		rgba(14,40,229,0.38) 100%);
	min-height: var(--scene-h, 560px);
	--scene-h: min(64vh, 560px);
}
/*地図・受付時間の表・footer2を撤去したので、footer1を全幅で使います*/
body.scrub .scrub-outro .footer1 {width: 100%;max-width: 34rem;}


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

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

	/*ヒーローは左中央にパネル、右側に建築の奥行きを広く見せます*/
	body.scrub .scrub-hero {
		justify-content: center;
		padding-bottom: 0;
	}
	body.scrub .scrub-hero-inner {
		padding: 0 0 0 8%;
	}
	body.scrub .scrub-hero-panel {
		max-width: 520px;
		min-width: 440px;
	}
	body.scrub .scrub-title {
		font-size: clamp(34px, 3.2vw, 44px);
	}
	body.scrub .scrub-hero-btn {
		flex-direction: row;
		flex-wrap: wrap;
	}
	body.scrub .scrub-hero-btn li {
		flex: 1 1 auto;
	}

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


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

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

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


/*==========================================================================
  15. ヒーローの入場演出（初回のみ・0.4秒＋最大8pxの移動）
==========================================================================*/
/*「動きを減らす」設定では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-hero-panel {
		animation: scrubRiseIn 0.4s 0.05s cubic-bezier(.22,.61,.36,1) backwards;
	}

}