@charset "utf-8";


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

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

   ベールは「白（#FFFFFF）」。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.4b414bf0.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: 6px;
	--panel-shadow: 0 6px 20px rgba(29,42,53,0.10);
	--ink: #33404d;			/*本文の文字色*/
	--ink-head: #1d2a35;	/*見出しの文字色*/
	--ink-em: #2b6099;		/*強調の文字色（primary-colorを少し締めた濃さ）*/

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

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

/*白いロゴの背後にだけ、ヘッダー内に青系の局所帯を敷きます*/
body.scrub header {
	z-index: 3;
	padding: 1rem var(--content-space) 2.5rem;
}
body.scrub header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(43,96,153,0.66) 0%, rgba(43,96,153,0.30) 55%, rgba(43,96,153,0) 100%);
}

/*英語の小見出しは薄くしすぎず、判読できる濃さを保ちます*/
body.scrub main h2 span.small {opacity: 0.85;}

/*テキストのフェードインは、jQuery/CDNが読めなかった時に見出しが消えないよう
  最初から可視にしておきます（main.jsが動く時は1文字ずつのフェードが乗ります）。*/
body.scrub .fade-in-text {visibility: visible;}


/*==========================================================================
  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);
}

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

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

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


/*==========================================================================
  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(--ink);
	background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.90) 100%);
}

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

body.scrub .mheading {
	margin: 0 0 0.9rem;
	font-size: clamp(1.4rem, 3.6vw, 1.9rem);
	font-weight: bold;
	line-height: 1.5;
	color: var(--ink-head);
}
body.scrub .mheading .mhosoku {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.55em;
	font-weight: 500;
	opacity: 0.7;
}

body.scrub .mtext {
	margin: 0;
	font-size: 1rem;
	line-height: 1.9;
}
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.7rem 1.6rem;
	border-radius: 5px;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	font-weight: 700;
	text-decoration: none;
}
body.scrub .mtext.mcta i {margin-right: 0.6em;}
body.scrub .mtext.mcta a:nth-child(2) {
	background: var(--secondary-color);
	color: var(--secondary-inverse-color);
}

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


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

/*スマホは下へ向かって濃くなる縦方向の幕*/
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.30) 0%,
		rgba(255,255,255,0.16) 28%,
		rgba(255,255,255,0.44) 56%,
		rgba(255,255,255,0.80) 100%);
}

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

/*診療内容（キッカー）*/
body.scrub .scrub-kicker {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--ink-em);
}

/*大見出し（2行）*/
body.scrub .scrub-title {
	margin: 0 0 1rem;
	font-size: clamp(1.7rem, 6.6vw, 2.3rem);
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--ink-head);
}
body.scrub .scrub-line {display: block;}
body.scrub .scrub-em {color: var(--ink-em);}

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

/*挨拶文*/
body.scrub .scrub-lead {
	margin: 0 0 1.4rem;
	font-size: 0.95rem;
	line-height: 1.9;
}

/*CTA（既存のボタン共通設定をそのまま使います）*/
body.scrub .scrub-btn {
	list-style: none;
	margin: 0 1rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}
body.scrub .scrub-btn a {
	padding: 0.7rem 1.8rem;
	border-radius: 5px;
}
body.scrub .scrub-btn i {margin-right: 0.8rem;}


/*==========================================================================
  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;
	margin: 0 var(--content-space) var(--content-space);
	border-radius: var(--panel-radius);
	box-shadow: var(--panel-shadow);
	background: linear-gradient(180deg, rgba(68,118,185,0.98) 0%, rgba(68,118,185,1) 100%);
}
body.scrub .scrub-outro .mpanel {
	max-width: none;
	background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.92) 100%);
}
body.scrub .scrub-outro > p,
body.scrub .scrub-outro > small {
	color: var(--primary-inverse-color);
}


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

	/*PCは左から右へ薄くなる横方向の幕*/
	body.scrub .scrub-hero::before {
		background:
			linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 78%, rgba(255,255,255,0.34) 100%),
			linear-gradient(90deg, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.26) 48%, rgba(255,255,255,0) 74%);
	}

	/*文字群は左中央からやや下に、幅560〜620pxの白いパネル*/
	body.scrub .scrub-hero {justify-content: center;}
	body.scrub .scrub-hero-inner {
		width: min(620px, 48%);
		min-width: 34rem;
		margin: 7vh 0 0 var(--content-space);
		padding: 2.4rem 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) 76%, rgba(255,255,255,0.88) 100%);
	}

	body.scrub .scrub-title {font-size: clamp(2rem, 2.6vw, 2.6rem);}
	body.scrub .scrub-kicker {font-size: 0.85rem;}

	}
	/*画面幅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.4秒で完了）
==========================================================================*/
/*「動きを減らす」設定では動かしません。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-inner {
		animation: scrubRiseIn 0.4s 0.05s cubic-bezier(.22,.61,.36,1) backwards;
	}

}