@charset "UTF-8";

.p-index-mv__wrap {
	margin-left: calc((100vw - 100%)/ 2 * -1);
	margin-right: calc((100vw - 100%)/ 2 * -1);
	overflow: hidden;
	position: relative;
	padding-left: 0;
	padding-right: 0;
	height: calc(100vh - 108px);
	height: calc(100dvh - 108px);
	overflow:hidden;
	background: #000;
}

.p-index-mv__wrap .p-index-mv__inner {
	position: relative;
	z-index: 1;
	display:grid;
	height:100%;
	align-content:center;
	justify-items:center;
	grid-row-gap:20px;
	padding-bottom: 120px;
}

.p-index-mv__wrap .p-index-mv__inner.video-fixed-active {
	align-content:flex-end;
	padding: 0 0 20vw;
}


.p-index-mv__wrap .p-index-mv__inner .fix {
	opacity: 0;
	transition:.5s;
}

.p-index-mv__wrap .p-index-mv__inner .fix.fix2 {
	opacity: 1;
	transition:1s;
}

.p-index-mv__wrap .p-index-mv__inner h1 {
	font-feature-settings:"palt";
	letter-spacing:normal;
	/*font-size:11.0rem; */
	font-weight:900;
	text-align:center;
	line-height:1.5;
	display: grid;
	justify-content: center;
	align-items: center;
	transition: opacity 0.5s ease-in-out, transform 0.6s ease-out;
	will-change: opacity, transform;
}

.p-index-mv__wrap .p-index-mv__inner h1 span {
	font:inherit;
}
.p-index-mv__wrap .p-index-mv__inner h1 span img {
	height: 1.1em; /* line-heightに合わせる */
	vertical-align: middle;
}


/* 動画再生開始で非表示にするクラス */
.p-index-mv__wrap .p-index-mv__inner h1.video-fadeout {
	opacity: 0 !important;
}

/* 動画再生後のh1を左下に配置するクラス */
.p-index-mv__wrap .p-index-mv__inner h1.video-fixed {
	opacity: 0; /* 初期状態は透明 */
	filter: blur(5px); /* 初期状態はボケた状態 */
	padding: 0 40px; 
	font-size: 5.5rem; 
	display: flex; 
	/* フェードインアニメーション */
	transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}


/* 左下配置時のh1内のspan調整 */
.p-index-mv__wrap .p-index-mv__inner h1.video-fixed span {
	opacity: 0; /* spanは初期状態は透明 */
	transition: opacity 0.5s ease-out; /* 個別のフェードインアニメーション */
	/* dl02とdl03の間の余白を調整 */
	margin-bottom: 0.1em;
}

/* フェードイン開始前の待機状態 */
.p-index-mv__wrap .p-index-mv__inner h1.video-fixed.video-fixed-ready {
	opacity: 0;
	filter: blur(30px);
}

/* フェードインアクティブ状態 */
.p-index-mv__wrap .p-index-mv__inner h1.video-fixed.video-fixed-active {
	opacity: 1; /* フェードイン */
	filter: blur(0px); /* 鮮明化 */
}

/* spanの順番描画アニメーション */

.p-index-mv__wrap .p-index-mv__inner h1.video-fixed.video-fixed-active span.anim-txt.dl01 {
	transition-delay: 0.0s;
}

.p-index-mv__wrap .p-index-mv__inner h1.video-fixed.video-fixed-active span.anim-txt.dl02 {
	transition-delay: 0.15s; /* 相対的なディレイ */
}

.p-index-mv__wrap .p-index-mv__inner h1.video-fixed.video-fixed-active span.anim-txt.dl03 {
	transition-delay: 0.3s;
}
/* dl01もあれば追記が必要ですが、htmlに無いためここでは省略 */
/* .p-index-mv__wrap .p-index-mv__inner h1.video-fixed.video-fixed-active span.anim-txt.dl01 {
	transition-delay: 0.0s;
}
.p-index-mv__wrap .p-index-mv__inner h1.video-fixed.video-fixed-active span.anim-txt.dl02 {
	transition-delay: 0.3s;
}
.p-index-mv__wrap .p-index-mv__inner h1.video-fixed.video-fixed-active span.anim-txt.dl03 {
	transition-delay: 0.6s;
} */


/* アクティブになったspanを表示 */
.p-index-mv__wrap .p-index-mv__inner h1.video-fixed.video-fixed-active span {
	opacity: 1;
}

/* --- /改修箇所 --- */

.p-index-mv__wrap .p-index-mv__inner .btn1 {
	color:#FFF;
	background: #000;
	font-size:2.4rem;
	width: 320px;
	height: 64px;
	display: grid;
	align-items: center;
	justify-content: center;
	transition:.3s;
	position: absolute;
	bottom:90px;
	left:50%;
	opacity: 0;
	transform: translate(-50%,50px);
	pointer-events: none;
	animation-timing-function: ease-out;
}

.p-index-mv__wrap .btn1.active {
	transition-delay: .5s;
	transition-duration:.5s;
	transform: translate(-50%,0);
	pointer-events:all;
	opacity: 1;
}
.p-index-mv__wrap .btn1.active.active2 {
	transition-delay: 0s;
	transition-duration:.3s;
}
.p-index-mv__wrap .p-index-mv__inner .btn1:hover {
	color:#000;
	background: #FFFFFF;
}
.p-index-mv__wrap .p1 {
	width:990px;
	height:auto;
	position:absolute;
	z-index:2;
	bottom:5%;
	left:100%;
	opacity:0;
	transition:.75s;
	animation-timing-function: ease-out;
	will-change: left,right,opacity;
}
.p-index-mv__wrap .p2 {
	width:620px;
	height:auto;
	position:absolute;
	z-index:2;
	top:11%;
	right:100%;
	opacity:0;
	transition:.75s;
	animation-timing-function: ease-out;
	will-change: left,right,opacity;
}
.p-index-mv__wrap .p1.active {
	left:calc(50% + 320px);
	opacity:1;
}
.p-index-mv__wrap .p2.active {
	right:calc(50% + 350px);
	opacity:1;
}
.p-index-mv__wrap .p1.active.hide {
	transition:1s;
	left:100%;
	opacity:0;
}
.p-index-mv__wrap .p2.active.hide {
	transition:1s;
	right:100%;
	opacity:0;
}
.p-index-mv__wrap #opmov {
	position: absolute;
	width: 100%;
	height: 100%;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	z-index: 0;
	object-fit: cover;
	transition:1s;
	opacity: 0;
}
.p-index-mv__wrap #opmov.play {
	opacity: 1;
}
.p-index-mv__wrap #loading {
	position:absolute;
	z-index:5;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
	display:grid;
	justify-content:center;
	align-items:center;
 transition:.5s;
}
.p-index-mv__wrap #loading .loading {
	position: relative;
	width: 280px;
	height: 5px;
}
.p-index-mv__wrap #loading .loading #prbar {
	position: absolute;
	left:0;
	bottom:0;
}
.p-index-mv__wrap #loading.loaded {
	opacity: 0;
}

.p-index-mv__wrap .anim-txt {
	transition-duration: 1.25s;
	animation-timing-function: ease-out;
	opacity: 0;
}
.p-index-mv__wrap .anim-txt.dl01 {
	transition-delay: .15s;
}
.p-index-mv__wrap .anim-txt.dl02 {
	transition-delay: .3s;
}
.p-index-mv__wrap .anim-txt.dl03 {
	transition-delay: .45s;
}
.p-index-mv__wrap .anim-txt.active {
	opacity: 1;
}

.p-index-mv__wrap .anim-txt.active3 {
	transition-duration: 1.25s;
	animation-timing-function: ease-out;
	opacity: 1;
}

.p-index-mv__wrap .video-fixed-active .anim-txt.dl01.active3 {
	display: none;
}

.p-index-mv__wrap .cpy.active3 {
	transition-duration: 1.25s;
	animation-timing-function: ease-out;
	display: inline-block;
}



/* 画像の配置調整（レスポンシブも同様に調整が必要な可能性がありますが、一旦PC・スマホの基本スタイルのみ調整） */
.p-index-mv__wrap .p-index-mv__inner h1 .anim-txt {
	justify-content: center;
	align-items: center;
}
.p-index-mv__wrap .p-index-mv__inner h1 .anim-txt img {
	max-width: 100%;
	height: auto;
}


@media screen and (max-width:1399px){
	
	.p-index-mv__wrap {
		height: calc(100vh - 76px);
		height: calc(100dvh - 76px);
	}

}

@media screen and (max-width:1300px){
	.p-index-mv__wrap .p1 {
		width:64vw;
	}
	.p-index-mv__wrap .p2 {
		width:42vw;
	}
	.p-index-mv__wrap .p1.active {
		left:calc(50% + 24vw);
		opacity:1;
	}
	.p-index-mv__wrap .p2.active {
		right:calc(50% + 20vw);
		opacity:1;
	}
}

@media screen and (max-width:768px){
	.p-index-mv__wrap {
		min-height: 0;
	}

	.p-index-mv__wrap .p-index-mv__inner {
		z-index: 5;
		padding: 0 0 80px 0;
	}

	.p-index-mv__wrap .p-index-mv__inner h1 {
		overflow:hidden;
		text-align:center;
		display: flex;
		flex-flow: column;
		align-items: center;
		padding: 0 2rem;
		line-height: 3;
	}

	.p-index-mv__wrap .p-index-mv__inner h1.video-fixed {
		flex-flow: row;
	}

	.p-index-mv__wrap .p-index-mv__inner h1 span {
		display: inline-block;
		justify-content: center;
		align-items: center;
		
	}
	.p-index-mv__wrap .p-index-mv__inner h1 .anim-txt:first-child {
		grid-area: 1/1/2/3;
	}
	.p-index-mv__wrap .p-index-mv__inner h1 span img {
		height: 1.1em;
		max-height: 100%;
		vertical-align: middle;
	}
	.p-index-mv__wrap .p-index-mv__inner .btn1 {
		width: 80%;
		max-width: 400px;
		bottom:15px;
		font-size:2rem;
		height:50px;
	}
	.p-index-mv__wrap .p-index-mv__inner .btn1:hover {
		color:#FFFFFF;
		background: #000;
	}

	.p-index-mv__wrap .p1 {
		width:80vw;
		bottom:14%;
		top: auto;
		left:auto;
		right:-100vw;
		z-index:4;
	}
	.p-index-mv__wrap .p2 {
		width: 40vw;
		top: -5vw;
		right:auto;
		left:-100vw;
		transition:.75s;
		animation-timing-function: ease-out;
	}
	.p-index-mv__wrap .p1.active {
		left:auto;
		right:-26vw;
		opacity:1;
	}
	.p-index-mv__wrap .p2.active {
		right:auto;
		left:-3vw;
		opacity:1;
	}
	/*
	.p-index-mv__wrap .p1.active.hide {
		left:auto;
		right:-100vw;
	}
	.p-index-mv__wrap .p2.active.hide {
		right:auto;
		left:-100vw;
	}
	*/
	.p-index-mv__wrap #loading .loading {
		width: 200px;
	}

	.dl01 img {
		width: 100%;
	}

	.dl02 img {
		width: 100%;
	}

	.dl03 img {
		width: 100%;
	}
	/* --- 改修箇所: スマホ調整 --- */
	.p-index-mv__wrap .p-index-mv__inner h1.video-fixed {
		font-size: 5vw;
		line-height: 1.4;
	}
	/* --- /改修箇所 --- */

}


@media screen and (min-width:500px) and (max-width: 768px) {
	.p-index-mv__wrap .p-index-mv__inner.video-fixed-active {
		padding: 0 0 12vw;
	}
	.p-index-mv__wrap .p-index-mv__inner h1 {
		line-height: 2;
	}
	.p-index-mv__wrap .p1.active {
		bottom: 9%;
		left: calc(50% + 10vw);
	}
}



@media screen and (max-height:870px) and (min-width:769px) and (orientation: landscape) {

	.p-index-mv__wrap .p-index-mv__inner {
		grid-row-gap:2vh;
		padding-bottom: 13.8vh;
	}
	/*
	.p-index-mv__wrap .p-index-mv__inner h1 {
		font-size:12.0vh;
	}
	*/
	.p-index-mv__wrap .p-index-mv__inner .btn1 {
		bottom: 0;
		font-size: 2.75vh;
		height: 9vh;
	}
	/* --- 改修箇所: PC横長調整 --- */
	.p-index-mv__wrap .p-index-mv__inner h1.video-fixed {
		font-size: 5.5vh;
		padding: 0 4vh;

	}
	/* --- /改修箇所 --- */

}

@media screen and (max-height:870px) and (max-width:768px) and (orientation: landscape) {
	
	.p-index-mv__wrap {
		min-height: 0;
	}
	.p-index-mv__wrap .p-index-mv__inner {
		padding-top: 0;
		padding-bottom: 0;
		grid-row-gap: 0;
		align-content: start;
	}

	.p-index-mv__wrap .p-index-mv__inner h1 {
		font-size: 4.5vw;
		overflow:hidden;
		text-align:center;
		line-height:1;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;
	}
	.p-index-mv__wrap .p-index-mv__inner h1 .anim-txt:first-child {
		grid-area: 1/1/2/3;
	}
	.p-index-mv__wrap .p-index-mv__inner .btn1 {
		max-width: 40vw;
		bottom:2vw;
		font-size: 16px;
		height: 2.4em;
	}
	.p-index-mv__wrap .p1 {
		width:38vw;
		right:-50vw;
		top:0;
	}
	.p-index-mv__wrap .p2 {
		width:30vw;
		left:-50vw;
	}
	.p-index-mv__wrap .p1.active {
		left: auto;
		right:-11vw;
	}
	.p-index-mv__wrap .p2.active {
		left:-4vw;
	}
	/*
	.p-index-mv__wrap .p1.active.hide {
		left:auto;
		right:-50vw;
	}
	.p-index-mv__wrap .p2.active.hide {
		right:auto;
		left:-50vw;
	}
	*/
	/* --- 改修箇所: スマホ横長調整 --- */
	.p-index-mv__wrap .p-index-mv__inner h1.video-fixed {
		font-size: 3.5vh;
		padding: 0 3vh;
		line-height: 1.2;
	}
	/* --- /改修箇所 --- */

}

@media screen and (max-height:550px) and (orientation: landscape){
	.p-index-mv__wrap .p-index-mv__inner h1 {
		font-size: 10vh;
	}
	.p-index-mv__wrap .p-index-mv__inner .btn1 {
		font-size: 4.4vh;
	}
	.p-index-mv__wrap .p-index-mv__inner h1 .anim-txt:first-child {
		grid-area: 1/1/2/3;
	}
}

@media screen and (min-width:769px) {
	.t-top .l-header{
		background-color: rgba(255,255,255,0.6) !important;
	}

	.t-top .l-header.is-active {
		background-color: rgba(255,255,255,1) !important;
	}

	.l-header__list-mega:hover~.l-header__hbg .l-header__hbg__in:after{
		background: rgba(0,0,0,0.5) ;
	}

	.t-top .l-main {
		padding-top: 0;
	}

	.p-index-mv__wrap .p-index-mv__inner.video-fixed-active {
		display: flex;
		align-items: end;
		padding: 0;
	}
	.p-index-mv__wrap .p-index-mv__inner h1 {
		margin-top: 150px;
		line-height: 2.5;
	}

	.p-index-mv__wrap .p-index-mv__inner h1.video-fixed {
		margin: 0 0 13rem 5rem;
		padding: 0;
		align-items: center;
		align-self: flex-end; /* grid-rowの末尾に配置 */
		justify-self: flex-start; /* grid-columnの先頭に配置 */
		text-align: left;
		line-height: 1.2;
		align-items: flex-start;
	}

	.p-index-mv__wrap .p-index-mv__inner h1.video-fixed .anim-txt img {
		max-width: inherit;
		width: max(20vw, 212px);
	}

	.p-index-mv__wrap .p-index-mv__inner h1 .anim-txt.dl01 img {
		width: max(33vw, 220px);
	}

	.p-index-mv__wrap {
		height: 100dvh;
	}

	.p-index-mv__wrap .p-index-mv__inner .btn1 {
		bottom:0;
		left: calc(100% - 160px);
	}

}

@media screen and (min-width:769px) and (orientation: portrait){

	.p-index-mv__wrap .p-index-mv__inner h1.video-fixed {
		margin: 0 auto 0 2rem;
		padding: 0;
		flex-direction: row;
		align-items: center;
		align-self: flex-end; /* grid-rowの末尾に配置 */
		justify-self: flex-start; /* grid-columnの先頭に配置 */
		text-align: left;
		line-height: 1.2;
		align-items: flex-start;

	}

	.p-index-mv__wrap .p-index-mv__inner h1 .anim-txt.dl01 img {
		width: max(60vw, 220px);
	}



}