@charset "utf-8";
/* *************************************************************************************************************
 *	file name:		bg_fixed.css
 *	Alteration:		2022.06
 *	style info:		背景オブジェクトfixedによる視差効果
----------------------------------------------------------------------------------------------------------------
 * 静止画、YouTube対応可能
----------------------------------------------------------------------------------------------------------------
<div class="parallaxBgFixed_Container">
	<!--背景オブジェクト-->
	div.parallaxBgFixed_bgObjWrap>div.bgObjUnit[data-parallax-bg_fixed-id="XYZ1"]>(div.bgObj>img)+(small.bgCap{xxxxx})
	div.parallaxBgFixed_bgObjWrap>div.bgObjUnit[data-parallax-bg_fixed-id="XYZ2"]>(div.bgObj>div.YT_wrap>div.YT_area>div.youtube#YYYYYP_bgYouTube_01)+(small.bgCap{xxxxx})
	div.parallaxBgFixed_bgObjWrap>div.bgObjUnit[data-parallax-bg_fixed-id="XYZ3"]>(div.bgObj>div.YT_wrap>div.YT_loading{Loading...}+div.YT_area>div.youtube#YYYYYP_bgYouTube_01)+(small.bgCap{xxxxx})
	<!--交差ターゲット-->
</div>
************************************************************************************************************* */


/* parallaxBgFixed_Container
---------------------------------------------------------------------------
 *	[z-index順位]
 -	<親>
 -	.parallaxBgFixed_Container					: 0
 -	<子孫>
 -	.parallaxBgFixed_observerElement			: ―
 -	.parallaxBgFixed_bgObjWrap					: -3
 -	.parallaxBgFixed_bgObjWrap .bgObjUnit		: inherit(-3)
 -	.parallaxBgFixed_bgObjWrap .bgObj			: inherit(-3)
 -	.parallaxBgFixed_bgObjWrap .YT_wrap			: inherit(-3)
 -	.parallaxBgFixed_bgObjWrap .YT_area			: inherit(-3)
 -	.parallaxBgFixed_bgObjWrap .bgCap			: -2
 -	.parallaxBgFixed_bgObjWrap .bgObj::after	: -1
------------------------------------------------------------------------ */
	.parallaxBgFixed_Container {
		position: relative;
		z-index: 0;
	}
	.parallaxBgFixed_Container ~ * { /* <親以降の親の兄弟要素>も z-index を設定する */
		position: relative;
		z-index: 0;
	}


/* parallaxBgFixed_observerElement | 交差ターゲット
------------------------------------------------------------------------ */
	.parallaxBgFixed_observerElement {
		/*display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;*/
		position: relative;
		min-height: 20vh;	/* feeling. */
		min-height: 20lvh;	/* feeling. | lvh = for iOS Safari */
	}


/* parallaxBgFixed_bgObjWrap | 背景オブジェクト
------------------------------------------------------------------------ */
	.parallaxBgFixed_bgObjWrap {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -3;
		width: 100%;
		min-height: 100vh;
		min-height: 100lvh; /* lvh = for iOS Safari */
		pointer-events: none;
	}
	.parallaxBgFixed_bgObjWrap .bgObjUnit {
		position: absolute;
		top: 0; bottom: 0; left: 0; right: 0;
		z-index: inherit;
	}
	.parallaxBgFixed_bgObjWrap .bgObj {
		position: absolute;
		top: 0; bottom: 0; left: 0; right: 0;
		z-index: inherit;
		opacity: 0;
		transition: opacity 1s ease-out;
	}
	.parallaxBgFixed_bgObjWrap .bgObj::after {	/* オーバーレイ */
		content: "";
		position: absolute;
		top: 0; bottom: 0; left: 0; right: 0;
		z-index: -1;
		background: rgba(0, 0, 0, .01);
	}
	.parallaxBgFixed_bgObjWrap .bgObj img {
		position: absolute;
		top: 0;
		left: 0;
		z-index: inherit;
		width: 100%;
		max-width: none;
		min-height: 100%;
		object-fit: cover;
	}
	.parallaxBgFixed_bgObjWrap .bgCap {
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -2;
		line-height: 1.5;
		color: #fff;
		font-size: .9rem;
		letter-spacing: .07em;
		/*background: rgba(0, 0, 0, .7);
		padding: .5em .8em;*/
		padding: 2em 1.75em;
		opacity: 0;
		transition: opacity .2s ease-out;
	}
	.parallaxBgFixed_bgObjWrap .parallaxActive .bgObj {
		opacity: 1;
	}
	.parallaxBgFixed_bgObjWrap .parallaxActive .bgCap {
		opacity: .45;
	}
@media screen and (max-width: 1340px) { /*{TBl}*/
	.parallaxBgFixed_bgObjWrap .bgCap {
		bottom: var(--site-actionLink-height, 60px); /* カスタムプロパティは base.css で宣言 */
	}
}


/* YouTube背景動画設定 | 背景オブジェクト
---------------------------------------------------------------------------
 *	.YT_wrap の background は、ローディング画面時＆動画が表示されないときに表示する背景画像。imageは各ページ用CSSにて設定。
 *	.YT_loading.disappear は、jQueryで付与されたdisappearクラスがついたらロゴエリアを非表示
 *	.YT_area.appear は、jQueryで付与されたappearクラスがついたらYoutubeエリアをフェードイン
------------------------------------------------------------------------ */

	/* youtube用ラッパー設定 */
	.parallaxBgFixed_bgObjWrap .YT_wrap {
		position: absolute;
		top: 0; bottom: 0; left: 0; right: 0;
		z-index: inherit;
		background: #000 center center / cover no-repeat;
	}

	/* ローディングアイコン設定 */
	/*.parallaxBgFixed_bgObjWrap .YT_loading {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-weight: bold;
	}
	.parallaxBgFixed_bgObjWrap .YT_loading.disappear {
		 display: none;
	}*/

	/* youtube設定 */
	.parallaxBgFixed_bgObjWrap .YT_area {
		position: absolute;
		top: 0; bottom: 0; left: 0; right: 0;
		z-index: inherit;
	}
	body.MACSAFARI .parallaxBgFixed_bgObjWrap .YT_area { /* Mac Safari では動画は非表示。背景画像を表示させる */
		display: none;
	}
	.parallaxBgFixed_bgObjWrap .YT_area.appear {
		animation-name: YT_PageAnimeAppear;
		animation-duration: .5s;
		animation-fill-mode: forwards;
	}
	@keyframes YT_PageAnimeAppear{
		0% {	opacity: 0;}
		100% {	opacity: 1;}
	}

	.parallaxBgFixed_bgObjWrap .YT_area .youtube {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 縦横幅指定 */
		width: 177.77777778vh;	/* 16:9の幅 →16 ÷ 9＝ 177.77% */
		height: 56.25vw;		/* 16:9の幅 → 9 ÷ 16 = 56.25% */
		min-height: 100%;
		min-width: 100%;
	}