@charset "utf-8";


/*スクロール連動シーケンス背景（スクラブ）
---------------------------------------------------------------------------*/
/*
   index.html（スクラブ版）専用のスタイルです。style.css の後に読み込む事で、
   壁紙・bg1などの全面背景を透過へ差し替えています。
   （index.html は hero.css を読み込む別実装なので、こちらの影響を受けません）

   仕組み: 全キーフレーム化した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: #f2f1f3 url("../videos/seq-poster-hd.48952570.jpg") center center / cover no-repeat;
}

.seq-layer video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;	/*style.cssの img{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=真っ白）。文言を減らした分、背景を広く見せる為に薄めにしています*/
	/*壁紙とページ下地を外し、固定レイヤーの映像がそのまま見えるようにします。
	  bodyの背景色はcanvasへ伝播し、固定レイヤーの更に下に描かれます。*/
	background: #f2f1f3;
	animation: none;	/*style.cssのフェードイン（opa1）は映像とタイミングが合わない為*/
}

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

/*セクションの全面背景を外し、余白から映像が見え続けるようにします*/
body.scrub #contents {
	background: none;
	padding-top: 4vw;
	padding-bottom: 4vw;
}
body.scrub #footer-contents {
	background: none;
}

/*sectionの間隔（総スクロール量の調整用）*/
body.scrub section + section {margin-top: 6vw;}

/*シーン（映像の上を通過する章）。1シーンの高さがそのまま映像の進み方になります。
  簡素化後はどのシーンも「番号＋見出し＋短文」だけなので、同じ高さで揃えます。*/
body.scrub main > section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(600px, 140vh, 1200px);
	min-height: clamp(600px, 140svh, 1200px);
}


/*==========================================================================
  3. 本文の局所パネル（可読性の確保）
==========================================================================*/
/*全体ベールは雰囲気の調整に使い、読みやすさは局所スクリムで確保します。
  簡素化後はどのシーンも「番号＋見出し＋短文」だけの小さな1枚パネルです。*/
body.scrub .sp {
	position: relative;
	padding: clamp(1rem, 2.2vw, 2rem) clamp(1rem, 2.4vw, 2.2rem);
	border-radius: 1vw;
}

/*見出しの下地（白94%）：観光地*/
body.scrub .sp-white-head {
	background: rgba(255,255,255,0.94);
}

/*アクティビティの本文（白98%→92%）*/
body.scrub .sp-white-h {
	background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 100%);
}

/*お知らせ（淡青98%→白96%、上→下）*/
body.scrub .sp-news {
	background: linear-gradient(180deg, rgba(202,236,249,0.98) 0%, rgba(255,255,255,0.96) 100%);
}

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


/*==========================================================================
  4. シーン1（ヒーロー）
==========================================================================*/
/*ピン留めをやめ、ヘッダー・コピー・主要メニューの帯までを1画面に収めます。*/
body.scrub .scrub-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

body.scrub .scrub-hero header {
	position: relative;
	z-index: 3;
}

/*ヘッダーは、映像を透かせる為に半透明にします*/
body.scrub .scrub-hero .header-inner {
	background: rgba(255,255,255,0.90);
	min-height: 46px;
}

/*コピーのブロック。上下中央付近に置きます。*/
body.scrub .scrub-hero-inner {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	align-items: center;
	padding: 6vw var(--global-space);
}

/*青い局所パネル。文字領域の外側で透明へ抜きます。*/
body.scrub .scrub-hero-panel {
	width: 100%;
	padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 3vw, 2.4rem);
	border-radius: 1vw;
	background: linear-gradient(0deg,
		rgba(17,95,134,0.96) 0%,
		rgba(17,95,134,0.92) 72%,
		rgba(17,95,134,0.72) 100%);
	color: var(--primary-inverse-color);
}

body.scrub .scrub-kicker {
	margin: 0 0 0.6rem;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	color: #caecf9;
	line-height: 1.6;
}

body.scrub .scrub-title {
	margin: 0 0 0.8rem;
	font-size: clamp(1.5rem, 6.4vw, 2.1rem);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.06em;
	color: var(--primary-inverse-color);
}
body.scrub .scrub-title span {display: block;}

body.scrub .scrub-lead {
	margin: 0 0 1.2rem;
	font-size: 0.95rem;
	line-height: 1.8;
}

/*CTA（観光地）*/
body.scrub .scrub-cta {margin: 0;}
body.scrub .scrub-cta a {
	display: inline-block;
	text-decoration: none;
	padding: 0.6rem 2.4rem;
	border: 2px solid var(--primary-inverse-color);
	border-radius: 3px;
	color: var(--primary-inverse-color);
	letter-spacing: 0.1em;
}
body.scrub .scrub-cta a:hover {
	background: var(--primary-inverse-color);
	color: var(--primary-color);
	filter: none;
}

/*ヒーロー下端の帯（主要メニュー4項目）*/
body.scrub .scrub-nav {
	position: relative;
	z-index: 3;
	background: rgba(17,95,134,0.82);
	color: var(--primary-inverse-color);
}
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.28);
	border-bottom: 1px solid rgba(255,255,255,0.28);
}
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;
	color: inherit;
	padding: 0.6rem 1rem;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
}
body.scrub .scrub-nav a:hover {
	background: rgba(255,255,255,0.14);
	filter: none;
}
body.scrub .scrub-nav span {
	display: block;
	font-size: 0.7em;
	opacity: 0.8;
	line-height: 1.4;
}


/*==========================================================================
  5. 各シーンの調整
==========================================================================*/
/*見出し*/
body.scrub main h2 {
	margin: 0 0 0.8rem;
	font-size: 1.5rem;
	display: block;
}
body.scrub main h2 .small {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.6em;
	letter-spacing: 0.08em;
	opacity: 0.75;
}
body.scrub .panel-mini p {margin: 0;}

/*シーン6 会社情報・フッター: 主色98%→94%（下→上）。地図・フッターメニューを外したので
  .left が単独になった分、幅いっぱいに広げます。*/
body.scrub .scrub-outro #footer-contents {
	background: linear-gradient(0deg, rgba(17,95,134,0.92) 0%, rgba(17,95,134,0.55) 100%);
}
body.scrub .scrub-outro #footer-contents .left {
	max-width: 34rem;
}
	@media screen and (min-width:900px) {
	body.scrub .scrub-outro #footer-contents .left {width: 100%;}
	}
/*著作表示は既存の細い帯のまま*/
body.scrub .scrub-outro footer {background: #1d1b1b;}
body.scrub .scrub-outro #footer-contents {
	display: flex;
	align-items: center;
	min-height: clamp(400px, 80vh, 760px);
	min-height: clamp(400px, 80svh, 760px);
}


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

	/*コピーは左端から約7%、幅は画面の52%以内。右側にターコイズの海を広く見せます。*/
	body.scrub .scrub-hero-inner {
		padding: 4vw 7%;
	}
	body.scrub .scrub-hero-panel {
		width: min(52%, 720px);
		padding: clamp(1.8rem, 2.6vw, 2.6rem) clamp(1.6rem, 2.4vw, 2.4rem);
		background: linear-gradient(90deg,
			rgba(17,95,134,0.96) 0%,
			rgba(17,95,134,0.92) 74%,
			rgba(17,95,134,0.70) 100%);
	}
	body.scrub .scrub-title {font-size: clamp(1.9rem, 2.9vw, 2.5rem);}

	/*帯は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.28);}
	body.scrub .scrub-nav li:last-child {border-right: 0;}
	body.scrub .scrub-nav a {text-align: center;padding: 0.7rem 1rem;}

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


/*==========================================================================
  6. ヒーローの入場演出（初回のみ・約0.3秒で完了）
==========================================================================*/
/*「動きを減らす」設定では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.3s 0.05s cubic-bezier(.22,.61,.36,1) backwards;}
	body.scrub .scrub-nav {animation: scrubRiseIn 0.3s 0.16s cubic-bezier(.22,.61,.36,1) backwards;}

}