@charset "utf-8";


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

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

   このテンプレートは白(#fff)・黄(#FEEC37)・濃灰(#323232)の配色なので、
   映像の上に敷く幕は「白のベール（明幕）」です。基準濃度は0.28。

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


/*==========================================================================
  1. 固定シーケンスレイヤー（最背面）
==========================================================================*/
.seq-layer {
	position: fixed;
	inset: 0;
	z-index: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	/*ポスター（先頭フレーム）を背景に敷いておきます。
	  デコード前・読み込み失敗時もこれが見えます。
	  ※映像を差し替える時は js/scrub.js のSEQと、この1行の両方のハッシュ名を更新します。*/
	background: #f2f1ea url("../videos/seq-poster-hd.41011152.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.28;		/*白ベールの基準値（0=素通し、1=真っ白）*/
	--hero-gutter: 22px;	/*ヒーローのスマホでの左右の余白*/

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

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

/*セクション全面の背景色・パターン・背景写真は、局所パネルへ置き換えます。*/
body.scrub main section {
	background: none;
}


/*==========================================================================
  3. ヘッダー（濃灰の文字。白い下地でナビを読みやすく）
==========================================================================*/
body.scrub > #container > header {
	z-index: 4;
	background: linear-gradient(180deg,
		rgba(255,255,255,0.94) 0%,
		rgba(255,255,255,0.80) 62%,
		rgba(255,255,255,0) 100%);
}
body.scrub > #container > header nav > ul > li > a {
	color: var(--base-inverse-color);
	font-weight: 700;
}


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

body.scrub .scrub-hero-inner {
	width: 100%;
	padding: 0 var(--hero-gutter);
	margin-top: auto;
	margin-bottom: clamp(20px, 4vh, 48px);
}

/*本文パネル（白。左→右へ0.96→0.88、文字の外側で透明へ）*/
body.scrub .scrub-hero-panel {
	position: relative;
	padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 3vw, 2.4rem);
	border-radius: 8px;
	background: linear-gradient(100deg,
		rgba(255,255,255,0.96) 0%,
		rgba(255,255,255,0.93) 66%,
		rgba(255,255,255,0.88) 92%,
		rgba(255,255,255,0.72) 100%);
	box-shadow: 0 16px 42px rgba(50,50,50,0.16);
	color: var(--base-inverse-color);
}

/*キッカー*/
body.scrub .scrub-kicker {
	margin: 0 0 0.8rem;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.06em;
}

/*大見出し*/
body.scrub .scrub-title {
	margin: 0 0 1.1rem;
	font-size: clamp(28px, 7.4vw, 36px);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.01em;
}

/*リード*/
body.scrub .scrub-lead {
	max-width: 32em;
	margin: 0 0 1.5rem;
	font-size: clamp(15px, 4vw, 16px);
	font-weight: 400;
	line-height: 1.9;
}

/*CTA（お問い合わせ＝黄色地・濃灰文字／資料請求＝濃灰地・白文字）*/
body.scrub .scrub-hero-btn {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
body.scrub .scrub-hero-btn p {margin: 0;}
body.scrub .scrub-hero-btn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 clamp(14px, 3.2vw, 26px);
	text-decoration: none;
	border-radius: 4px;
}
body.scrub .scrub-hero-btn i {
	padding-right: 0.5em;
	font-size: 1.1em;
}
body.scrub .scrub-hero-btn p:nth-of-type(1) a {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}
body.scrub .scrub-hero-btn p:nth-of-type(2) a {
	background: var(--base-inverse-color);
	color: var(--base-color);
	letter-spacing: 0.1em;
}


/*==========================================================================
  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 + 60px);
	min-height: calc(100svh + 60px);
	padding: 12vh var(--hero-gutter);
}

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

body.scrub .mlabel {
	margin: 0 0 0.9rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--primary-inverse-color);
	opacity: 0.7;
}

body.scrub .mheading {
	margin: 0 0 0.9rem;
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	font-weight: 800;
	line-height: 1.35;
	color: var(--base-inverse-color);
}
body.scrub .mheading .mhosoku {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.5em;
	font-weight: 500;
	opacity: 0.7;
}

body.scrub .mtext {
	margin: 0;
	font-size: 1rem;
	line-height: 1.9;
}
body.scrub .mtext a {
	color: var(--base-inverse-color);
	font-weight: 700;
	text-decoration: underline;
}
body.scrub .mtext.mcta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}
body.scrub .mtext.mcta a {
	display: inline-block;
	padding: 0.6rem 1.6rem;
	border-radius: 4px;
	background: var(--primary-color);
	text-decoration: none;
}

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

	body.scrub .mscene {padding: 8vh var(--hero-gutter);}

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


/*==========================================================================
  6. 最後のシーン（フッター）
==========================================================================*/
/*黄色。上→下へ96%→100%。著作表示（.pr）は既存どおり濃灰の独立帯です。*/
body.scrub .scrub-outro {
	position: relative;
	/*最後のシーンの明幕（data-dim）は「区画が画面中央に来た時」に切り替わる為、
	  画面の中央線を跨げるだけの高さを持たせています（画面高の58%以上）。
	  総スクロール量を5,000〜7,000pxへ寄せる為、他のシーンと近い高さにしています。*/
	min-height: clamp(500px, 90vh, 900px);
	min-height: clamp(500px, 90svh, 900px);
	background: linear-gradient(180deg,
		rgba(254,236,55,0.96) 0%,
		rgba(254,236,55,1) 100%);
}


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

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

	/*ヒーローの文字は中央より少し上。右側に建築空間の奥行きを残します。*/
	body.scrub .scrub-hero-inner {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 12vh;
		padding-bottom: 6vh;
	}
	body.scrub .scrub-hero-panel {
		width: 46%;
		min-width: 560px;
		max-width: 640px;
	}
	body.scrub .scrub-kicker {font-size: clamp(14px, 1.05vw, 16px);}
	/*「WEBサイトを制作」がパネル幅（560〜640px）内で1行に収まるサイズにしています*/
	body.scrub .scrub-title {font-size: clamp(34px, 3.3vw, 48px);}
	body.scrub .scrub-lead {font-size: clamp(16px, 1.25vw, 18px);margin-bottom: 1.8rem;}
	body.scrub .scrub-hero-btn {gap: 14px;font-size: 16px;}
	body.scrub .scrub-hero-btn a {padding: 0 32px;}

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


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

	body.scrub .scrub-title {margin-bottom: 0.7rem;}
	body.scrub .scrub-lead {margin-bottom: 1.1rem;line-height: 1.8;}
	body.scrub .scrub-hero-inner {padding-top: 8vh;}

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

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

}