@charset "utf-8";


/*スクロール連動シーケンス背景（スクラブ）
---------------------------------------------------------------------------*/
/*
   index.html（スクラブ版）専用のスタイルです。style.css の後に読み込む事で、
   トップページの全面背景（bg1.png・墨色の全幅背景）を透過へ差し替えています。
   （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: #222 url("../videos/seq-poster-hd.cc78e773.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;
}

/*全面にかける藍色のフィルター。既存ヒーローの #2e3368 / 10% を全編へ引き継ぎ、
  映像とサイトの色を馴染ませます。data-dimで動く墨色ベールとは別の層です。*/
.seq-tint {
	position: absolute;
	inset: 0;
	background: #2e3368;
	opacity: 0.10;
}

/*映像の上に乗せる墨色のベール。data-dim付きの区画が画面中央に来ると濃さが変わります。*/
.seq-dim {
	position: absolute;
	inset: 0;
	background: #222;
	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.18;	/*墨色ベールの基準値（0=素通し、1=墨一色）。文言を減らした分、背景を広く見せる為に薄めにしています*/
	--global-space: 6vw;	/*余白を詰めて総スクロール量を設計値へ寄せます*/
	animation: none;	/*style.cssのフェードイン（opa1）は映像とタイミングが合わない為*/
}

/*トップページの全面背景画像（bg1.png）は映像に置き換えます。
  bodyの背景色はcanvasへ伝播し、固定レイヤーの更に下に描かれます。*/
body.scrub.home {
	background-image: none;
	background: #222;
}

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

/*全面の背景を外し、余白から映像が見え続けるようにします*/
body.scrub #footer-contents {background: none;}
body.scrub #footermenu {background: none;}
body.scrub #container {padding: var(--global-space);}
body.scrub section + section {margin-top: 7vw;}

/*シーン（映像の上を通過する章）。1シーンの高さがそのまま映像の進み方になります。
  簡素化後はシーン数が少ないので、1つずつを大きめに取って総スクロール量を確保します。*/
body.scrub main > section,
body.scrub #footer-contents,
body.scrub .scrub-outro {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/*シーン2・3 注目の工芸品／お知らせ*/
body.scrub main > section {
	min-height: clamp(700px, 200vh, 1700px);
	min-height: clamp(700px, 200svh, 1700px);
}
/*シーン4 館情報*/
body.scrub #footer-contents {
	min-height: clamp(560px, 130vh, 1200px);
	min-height: clamp(560px, 130svh, 1200px);
}
/*シーン5 著作権表記*/
body.scrub .scrub-outro {
	min-height: clamp(340px, 60vh, 620px);
	min-height: clamp(340px, 60svh, 620px);
	justify-content: flex-end;
}


/*==========================================================================
  3. 本文の局所パネル（可読性の確保）
==========================================================================*/
/*全体ベールは雰囲気を整え、局所スクリムが文字を支えます。
  グラデーションの透明な端に文章を置かず、内側に余白を確保します。*/
body.scrub .sp {
	position: relative;
	padding: clamp(1.2rem, 2.4vw, 2.2rem) clamp(1.2rem, 2.6vw, 2.5rem);
}

/*お知らせ（藍色 上→下 0.94→0.88）*/
body.scrub .sp-ai {
	background: linear-gradient(180deg, rgba(46,51,104,0.94) 0%, rgba(46,51,104,0.88) 100%);
}

/*館情報（墨色 上→下 0.94→0.88）*/
body.scrub .sp-sumi-box {
	background: linear-gradient(180deg, rgba(34,34,34,0.94) 0%, rgba(34,34,34,0.88) 100%);
	padding: clamp(1.2rem, 2.4vw, 2.2rem) clamp(1.2rem, 2.6vw, 2.5rem);
}

/*見出し・短文だけの小さな箱に留め、パネルの外側では映像が広く見えるようにします。*/
body.scrub .panel-mini {
	max-width: 34rem;
	margin-inline: 0;
}
body.scrub .panel-mini .label {
	margin: 0 0 0.7rem;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.75;
}
body.scrub .panel-mini p:not(.label) {margin: 0;line-height: 1.9;}


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

/*縦ロゴ（右上）*/
body.scrub .scrub-logo {
	position: absolute;
	right: 30px;
	top: 46px;
	z-index: 3;
	margin: 0;
	padding: 0;
}
body.scrub .scrub-logo img {
	width: 50px;
	filter: drop-shadow(0 1px 6px rgba(0,0,0,0.7));
}

/*言語ボックス（右上・ロゴの上）*/
body.scrub .scrub-hero .lang {
	list-style: none;margin: 0;padding: 0;
	position: absolute;
	top: 0;
	right: 30px;
	z-index: 3;
	display: flex;
	gap: 1rem;
	font-size: 0.8rem;
}
body.scrub .scrub-hero .lang a {
	display: block;text-decoration: none;
	padding: 0.2rem 1.5rem;
	background: #000;
	color: #fff;
}

/*本文ブロック（モバイルは下部にまとめます）*/
body.scrub .scrub-hero-inner {
	position: relative;
	z-index: 2;
	padding: 0;
}

/*墨色の局所スクリム。モバイルは下→上へ薄めます。*/
body.scrub .scrub-hero-panel {
	padding: clamp(1.6rem, 4vw, 2.6rem) 24px clamp(1.4rem, 3vw, 2.2rem);
	background: linear-gradient(0deg,
		rgba(34,34,34,0.88) 0%,
		rgba(34,34,34,0.72) 72%,
		rgba(34,34,34,0) 100%);
	color: var(--primary-inverse-color);
}

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

body.scrub .scrub-title {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 6.4vw, 2rem);
	font-weight: normal;
	line-height: 1.7;
	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;
}

body.scrub .scrub-actions {margin: 0;}
body.scrub .scrub-cta {
	display: inline-block;
	text-decoration: none;
	padding: 0.6rem 2.6rem;
	border: 1px solid rgba(255,255,255,0.7);
	color: var(--primary-inverse-color);
	letter-spacing: 0.16em;
}
body.scrub .scrub-cta:hover {
	background: rgba(255,255,255,0.14);
	opacity: 1;
}

/*下端の回遊用の帯*/
body.scrub .scrub-nav {
	position: relative;
	z-index: 3;
	background: rgba(34,34,34,0.86);
	border-top: 1px solid rgba(255,255,255,0.24);
}
body.scrub .scrub-nav ul {
	margin: 0;padding: 0;list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));	/*モバイルは2列×2段*/
}
body.scrub .scrub-nav li {
	border-right: 1px solid rgba(255,255,255,0.24);
	border-bottom: 1px solid rgba(255,255,255,0.24);
}
body.scrub .scrub-nav li:nth-child(2n) {border-right: 0;}
body.scrub .scrub-nav li:nth-child(n+3) {border-bottom: 0;}
body.scrub .scrub-nav a {
	display: block;
	text-decoration: none;
	padding: 0.7rem 1rem;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-align: center;
}
body.scrub .scrub-nav a:hover {
	background: rgba(255,255,255,0.12);
	opacity: 1;
}


/*==========================================================================
  5. 各シーンの調整
==========================================================================*/
/*見出し*/
body.scrub main h2 {
	margin-bottom: 1rem;
	font-size: 1.6rem;
	text-align: left;
}
body.scrub main h2 .small {opacity: 0.8;}

/*シーン4 館情報*/
body.scrub #footer-contents {
	padding: var(--global-space);
}

/*シーン5 フッター（墨色 0.98）*/
body.scrub .scrub-outro footer {
	background: rgba(34,34,34,0.98);
}


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

	/*本文パネルは左下寄り。左余白は既存の--global-space、右側に奥行きを見せます。*/
	body.scrub .scrub-hero-inner {
		padding: 0 0 clamp(24px, 5vh, 64px);
	}
	body.scrub .scrub-hero-panel {
		width: min(58%, 760px);
		padding: clamp(1.8rem, 2.6vw, 2.6rem) clamp(1.6rem, 2.4vw, 2.4rem) clamp(1.8rem, 2.6vw, 2.6rem) var(--global-space);
		background: linear-gradient(90deg,
			rgba(34,34,34,0.88) 0%,
			rgba(34,34,34,0.72) 74%,
			rgba(34,34,34,0) 100%);
	}
	body.scrub .scrub-title {font-size: clamp(1.8rem, 2.8vw, 2.4rem);}

	/*帯はPCで4列*/
	body.scrub .scrub-nav ul {grid-template-columns: repeat(4, minmax(0, 1fr));}
	body.scrub .scrub-nav li {border-bottom: 0;border-right: 1px solid rgba(255,255,255,0.24);}
	body.scrub .scrub-nav li:last-child {border-right: 0;}

	body.scrub #footer-contents .left {margin-bottom: 0;width: auto;max-width: 34rem;}

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


/*==========================================================================
  6. ヒーローの入場演出（初回のみ・約0.4秒で完了）
==========================================================================*/
/*「動きを減らす」設定では1つも動かさない為、まとめてno-preferenceに置いています。
  見出し・リード・CTAを同時に見せ、操作開始を待たせません。*/
@media (prefers-reduced-motion: no-preference) {

	@keyframes scrubFadeIn {
		from {opacity: 0;transform: translate3d(0, 6px, 0);}
		to {opacity: 1;transform: translate3d(0, 0, 0);}
	}

	body.scrub .scrub-hero-panel {animation: scrubFadeIn 0.4s 0.05s cubic-bezier(.22,.61,.36,1) backwards;}
	body.scrub .scrub-nav {animation: scrubFadeIn 0.4s 0.16s cubic-bezier(.22,.61,.36,1) backwards;}

}