@charset "utf-8";
/* *************************************************************************************************************
 *	file name:		mv_sticky.css
 *	Alteration:		2025.07
 *	style info:		メインビジュアルを重ねて表示する（スティッキー）＋画像のはみ出し部分対策JS
----------------------------------------------------------------------------------------------------------------
 *	[前提CSS]
 *	- ビジュアルのボックスにスティッキーをかけています。後に出てくるビジュアル画像を上に重ねて表示します。
 *	- ビジュアルのボックスと画像はaspect-ratioで比率指定しています。幅は100%です。
 *	- ビジュアル画像がウィンドウの高さより大きい時はスクロールにバッファを設けます。（すぐに次の画像が出てきて画像下部が隠れてしまわないように）
 * -------------------------------------------------------------------------------------------------------------
 *	[JS]
 *	- ビジュアル画像の高さがウィンドウの高さより大きい場合は、差分（はみ出た部分）をtopに設定する（例: [ウィンドウ高さ900px] - [画像高さ1000px] = top: -100px; ）
 *	- ビジュアル画像の高さがウィンドウの高さより大きい場合は、ビジュアルのボックスに .mvHeightTall クラスを追加する（小さい場合はクラスを削除する）
************************************************************************************************************* */

											/* [CHECK] */
											/*.header-property,
											.list-property-control-wrap.only-sp {
												opacity: .2;
											}*/

/* ==========
	ANIME
========== */
@media screen {
	/* 親リセット */
	[data-js_show_target="sticky_mvPic"] {
		opacity: 1;
	}
	/* 画像：フェードスケール */
	[data-js_show_target="sticky_mvPic"] img {
		/*opacity: .8;*/
		filter: blur(3px);
		transform: scale(1.07);
		transition: opacity 500ms ease-out,
					transform 1650ms ease-out,
					filter 1000ms ease-out;
	}
	[data-js_show_target-passed="sticky_mvPic"] img {
		/*opacity: 1;*/
		filter: blur(0);
		transform: scale(1);
	}
	
	/* -- Individual --
	----------------------- */
	.mv_unit02 [data-js_show_target="sticky_mvPic"] img {
		opacity: .5;
		transition-delay: 850ms;
	}
	.mv_unit02 [data-js_show_target-passed="sticky_mvPic"] img {
		opacity: 1;
	}
}



/* =======================================================================================
 innerpageLinkSection
======================================================================================= */
	/*.wrapper {
		overflow: clip; // メインビジュアルをスティッキー固定している場合の対策 ※index.cssで設定済み //
	}*/
	.mainVisualBox {
		position: relative;
	}
	.mainVisualBox img {
		width: 100%;
		max-width: none;
		height: auto;
	}


/* mv_unit01 | 「風の邸」フェードアウトしていく
----------------------------------------------------------------*/
	.mv_unit01 {
		position: fixed;
		inset: 0;
		z-index: 100;
		width: 100%;
		height: 100lvh;
		pointer-events: none;
		/* 中央対策 */
		inset: var(--js-site-stickyHeader-height) 0 0;
		height: calc(100lvh - var(--js-site-stickyHeader-height));
	}
	.mv_unit01[data-js_show_target="fadeOut"] {
		visibility: visible;
		opacity: 1;
		transition: visibility 0ms ease-out 1600ms, opacity 1100ms ease-out 500ms;
	}
	.mv_unit01[data-js_show_target-passed="fadeOut"] {
		visibility: hidden;
		opacity: 0;
	}
	.mv_unit01 .mvPic img {
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
	}
@media screen and (max-width: 736px) {
	.mv_unit01 {
		/* 中央対策 リセット */
		inset: 0;
		height: 100lvh;
	}
}


/* stickyWrap
----------------------------------------------------------------*/
	.stickyWrap {
	}
	.stickyBox {
		display: flex;
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		aspect-ratio: 1920 / 1144;
		z-index: 1;
	}

 	.stickyBox .mvPic {
		/*position: relative;
		z-index: 0;*/
		width: 100%;
		aspect-ratio: 1920 / 1144;
		overflow: hidden;
	}
 	/*.stickyBox .mvPic::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.25);
		z-index: 1;
	}*/
	
 	.stickyCaptionBox .mvPic .imgcapkeep {	/* スティッキー画像の左下固定のキャプション（いつも通り） | div.stickyBox>div.mvPic>small.imgcapkeep */
		z-index: 5;
	}
 	.stickyCaptionBox {						/* スティッキー画像とは独立してスクロールアップするキャプション | div.stickyBox(>div.mvPic)+span.stickyCaptionBox>small.imgcapkeep */
		display: block;
		position: relative;
		inset: 0;
		z-index: 5;
		width: 100%;
	}
 	.stickyWrap .mvHeightTall + .stickyCaptionBox {
		min-height: 5em;
		background: linear-gradient(to top, rgba(255, 255, 255, .37) 5%, rgba(255, 255, 255, .05) 88%, rgba(255, 255, 255, 0) 100%);
		translate: 0 max(270px, 38vh);
	}
	
	.stickyWrap .bufferBox {
		display: none;
	}
 	.stickyWrap .mvHeightTall ~ .bufferBox { /* 画像の高さがウィンドウの高さより大きい時：スクロール量を少し増やして、次の画像の表示タイミングに少し余裕（バッファ）を持たせる */
		display: block;
		height: max(270px, 38vh);
		pointer-events: none;
	}
	
	/* -- Individual --
	----------------------- */
	.mv_unit02 + .stickyCaptionBox .imgcapkeep.wh.bg {
		background-color:rgba(0, 0, 0, .73);
	}
	.mv_unit03 + .stickyCaptionBox .imgcapkeep.bk.bg {
		background-color:rgba(250, 250, 250, .83);
	}
	.mv_unit03 + .stickyCaptionBox .imgcapkeep .SP_only {
		display: none;
	}

@media screen and (max-width: 736px) {
	.stickyBox,
 	.stickyBox .mvPic {
		aspect-ratio: 1080 / 1530;
	}
	
	/* -- Individual --
	----------------------- */
	.mv_unit03 + .stickyCaptionBox .cap1 {
		inset: auto 0 2em auto;
		background: red;
	}
	.mv_unit03 + .stickyCaptionBox .imgcapkeep .SP_only {
		display: inline;
	}
}