@charset "utf-8";


/*スクロール連動シーケンス背景（スクラブ）
---------------------------------------------------------------------------*/
/*
   index.html（スクラブ版）専用のスタイルです。style.css の後に読み込む事で、
   .section / .cta / .site-footer などの全面背景を透過へ差し替えています。
   （index.html は従来のピン留めヒーロー版なので、こちらの影響を受けません）

   仕組み: 全キーフレーム化した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/scrub.js のSEQと、この1行の両方の名前を更新します。*/
	background: #f7f5f0 url("../videos/seq-poster-hd.89eca157.jpg") center center / cover no-repeat;
}

.seq-layer video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;	/*style.cssの img,picture,svg,iframe{max-width:100%} と同じ発想の打ち消し*/
	object-fit: cover;
	object-position: center;
}

/*映像の上に乗せる生成りのベール。data-dim付きの区画が画面中央に来ると濃さが変わります。*/
.seq-dim {
	position: absolute;
	inset: 0;
	background: #f7f5f0;
	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=生成り一色）。文言を減らした分、背景を広く見せる為に薄めにしています*/
	background: var(--paper);
}

/*本文ブロックを映像より前面へ。
  .site-header（z-index:90）・.drawer（80）・.pagetop（70）は
  この外側に置いたままなので、重なり順はstyle.cssのままです。*/
body.scrub .scrub-container {
	position: relative;
	z-index: 1;
}

/*セクションの全面背景を外し、余白から映像が見え続けるようにします*/
body.scrub .section,
body.scrub .section-paper,
body.scrub .section-navy,
body.scrub .cta {
	background: transparent;
}
body.scrub .cta::before,
body.scrub .cta::after {display: none;}

body.scrub .section-navy {color: rgba(255,255,255,0.86);}


/*==========================================================================
  3. 本文の局所パネル（可読性の確保）
==========================================================================*/
/*全体ベールだけでは文章を支えきれないので、文字の直下にだけ濃い面を置きます。
  簡素化後は各シーンとも「番号＋見出し＋短文」だけの小さな1枚パネルです。*/
body.scrub .sp {
	position: relative;
	padding: clamp(0.75rem, 1.3vw, 1.1rem) clamp(1.1rem, 2.2vw, 2.2rem);
}

/*白（事務所について・サービス）*/
body.scrub .sp-white {
	background: linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 100%);
}
/*生成り（選ばれる理由・料金の目安）*/
body.scrub .sp-paper-flat {
	background: rgba(247,245,240,0.94);
}
/*ネイビー（お問い合わせ）*/
body.scrub .sp-navy-h {
	background: linear-gradient(100deg, rgba(11,34,57,0.94) 0%, rgba(11,34,57,0.88) 100%);
	color: #fff;
}

/*見出しの面。番号・見出し・短文を一枚に収めます。左寄せの小さな箱に留め、
  パネルの外側では映像が広く見えるようにします。*/
body.scrub .panel-mini {
	max-width: 34rem;
	padding-bottom: clamp(0.9rem, 1.5vw, 1.2rem);
}


/*==========================================================================
  4. 1シーン目（ヒーロー）
==========================================================================*/
/*ピン留めをやめ、ヒーローは「最初の1画面」を受け持つだけの区画にしています。*/
body.scrub .scrub-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	padding: calc(var(--headerH) + 24px) 0 0;
	color: #fff;
}

/*文字ブロックを包む濃紺のパネル*/
body.scrub .scrub-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	margin-bottom: clamp(26px, 4vh, 54px);
}

body.scrub .scrub-hero-panel {
	padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 3vw, 2.6rem);
	background: linear-gradient(180deg, rgba(7,24,39,0.90) 0%, rgba(7,24,39,0.96) 100%);
}

/*肩書き*/
body.scrub .scrub-kicker {
	font-family: var(--mono);
	font-size: 0.64rem;
	letter-spacing: 0.24em;
	color: var(--gold-light);
	margin: 0 0 1rem;
	line-height: 1.6;
}

/*見出し（2行）*/
body.scrub .scrub-title {
	margin: 0 0 1rem;
	font-weight: 500;
	font-size: clamp(1.6rem, 6.6vw, 2.1rem);
	line-height: 1.55;
	letter-spacing: 0.05em;
	color: #fff;
}
body.scrub .scrub-title span {display: block;}
body.scrub .scrub-title .gold {display: inline;color: var(--gold-light);}

/*金の罫線*/
body.scrub .scrub-rule {
	display: block;
	width: 84px;
	height: 2px;
	margin: 0 0 1.1rem;
	background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 62%, rgba(200,180,122,0) 100%);
}

/*リード*/
body.scrub .scrub-lead {
	margin: 0 0 1.6rem;
	font-size: 0.92rem;
	line-height: 1.95;
	color: rgba(255,255,255,0.86);
}

/*下端の実績バー*/
body.scrub .scrub-facts {
	position: relative;
	z-index: 3;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid rgba(255,255,255,0.20);
	background: rgba(7,24,39,0.80);
}
body.scrub .scrub-facts > div {
	padding: 0.8rem var(--gutter);
	border-bottom: 1px solid rgba(255,255,255,0.12);
	border-right: 1px solid rgba(255,255,255,0.12);
	line-height: 1.5;
}
body.scrub .scrub-facts > div:nth-child(2n) {border-right: 0;}
body.scrub .scrub-facts > div:nth-child(n+3) {border-bottom: 0;}
body.scrub .scrub-facts dt {
	font-family: var(--mono);
	font-size: 0.54rem;
	letter-spacing: 0.2em;
	color: var(--gold-light);
	margin-bottom: 0.2rem;
}
body.scrub .scrub-facts dd {
	font-family: var(--serif);
	font-size: clamp(0.84rem, 2.6vw, 1rem);
	letter-spacing: 0.04em;
	color: #fff;
}


/*==========================================================================
  5. 各シーンのレイアウト圧縮（総スクロール量を設計値へ収める）
==========================================================================*/
/*各シーンとも「番号＋見出し＋短文」だけなので、パネルの高さでなく区画自体の
  min-heightで1フレームあたりの進む速さを揃えます（テンプレ13の設計を踏襲）。*/
body.scrub .section,
body.scrub .cta {
	--sec-space: 0px;
	display: flex;
	align-items: center;
	min-height: clamp(600px, 110vh, 1000px);
	min-height: clamp(600px, 110svh, 1000px);
}
body.scrub .section > .wrap,
body.scrub .cta > .wrap {
	width: 100%;
}


/*==========================================================================
  6. フッター（最後のシーン。ここで映像が最終フレームへ到達します）
==========================================================================*/
body.scrub .site-footer {
	background: transparent;
	padding-top: 0;
	display: flex;
	align-items: flex-end;
	min-height: clamp(380px, 65vh, 680px);
	min-height: clamp(380px, 65svh, 680px);
}
body.scrub .site-footer .footer-bottom {
	width: 100%;
	background: rgba(7,24,39,0.86);
}
body.scrub .pr {background: rgba(6,15,24,0.97);}


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

	/*ヒーローのパネルは左端に寄せ、右側に映像の奥行きを見せます*/
	body.scrub .scrub-hero-inner {
		display: flex;
		margin-bottom: clamp(34px, 6vh, 82px);
	}
	body.scrub .scrub-hero-panel {
		width: min(620px, 54%);
		padding: clamp(2rem, 2.8vw, 2.8rem) clamp(1.8rem, 2.6vw, 2.6rem);
		background: linear-gradient(100deg, rgba(7,24,39,0.96) 0%, rgba(7,24,39,0.90) 78%, rgba(7,24,39,0.86) 100%);
	}
	body.scrub .scrub-title {font-size: clamp(1.9rem, 2.9vw, 2.5rem);}
	body.scrub .scrub-lead {font-size: 0.95rem;}

	/*実績バーは4列*/
	body.scrub .scrub-facts {grid-template-columns: repeat(4, minmax(0, 1fr));}
	body.scrub .scrub-facts > div {
		padding-inline: clamp(16px, 2.2vw, 32px);
		border-bottom: 0;
		border-right: 1px solid rgba(255,255,255,0.12);
	}
	body.scrub .scrub-facts > div:first-child {padding-left: var(--gutter);}
	body.scrub .scrub-facts > div:last-child {border-right: 0;padding-right: var(--gutter);}

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


/*==========================================================================
  7. 簡素化した各シーンの文字サイズ
==========================================================================*/
body.scrub .sec-num {margin-bottom: 0.6rem;}
body.scrub .sec-title {font-size: clamp(1.5rem, 4vw, 2rem);}
body.scrub .sec-lead {margin-top: 0.9rem;font-size: 0.92rem;line-height: 1.85;}

body.scrub .cta-title {font-size: clamp(1.4rem, 3.6vw, 2rem);margin-bottom: 0.9rem;}
body.scrub .cta-lead {font-size: 0.9rem;margin-bottom: 1.4rem;}


/*==========================================================================
  8. ヒーローの入場演出（初回のみ・約0.4秒で完了）
==========================================================================*/
/*「動きを減らす」設定では1つも動かさない為、まとめてno-preferenceに置いています。
  JSに依存しないCSSアニメーションなので、文言・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-panel {animation: scrubRiseIn 0.4s 0.05s cubic-bezier(.22,.61,.36,1) backwards;}
	body.scrub .scrub-facts {animation: scrubRiseIn 0.4s 0.18s cubic-bezier(.22,.61,.36,1) backwards;}

}