@charset "utf-8";
#fullWrap::after{
	content: '';
	display: block;
	width: 100%;
	height: 100vh;
	height: 100svh;
	height: 100dvh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	background: url(../img/common/bg.jpg) no-repeat center center / cover;
	pointer-events: none;
}
#fullWrap::before{
	content: '';
	display: block;
	width: 100%;
	height: 100vh;
	height: 100svh;
	height: 100dvh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	background: url(../img/top/fv_light.jpg) no-repeat center center / cover;
	transition: opacity 0.6s ease;
}
@media screen and (max-width:768px){
	#fullWrap::before{
		position: fixed;
		opacity: 1;
		background: url(../img/top/fv_light_sp.jpg) no-repeat center center / cover;
	}
}
/*
.in-fv #fullWrap::before{
	opacity: 1;
}
	*/
/*-----------------------------------------------
 * main
-------------------------------------------------*/
.main{
	position: relative;
}
/*-----------------------------------------------
 * frame
-------------------------------------------------*/
.frameWrap{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	pointer-events: none;
}
.frame{
	display: block;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	height: 100dvh;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		#102729 0,
		#102729 2px,
		#000 2px,
		#000 4px
	);
	-webkit-mask-image:
		linear-gradient(to right, #000 0%, rgba(0,0,0,.75) 8%, transparent 18%, transparent 82%, rgba(0,0,0,.75) 92%, #000 100%),
		linear-gradient(to bottom, #000 0%, rgba(0,0,0,.65) 10%, transparent 25%, transparent 75%, rgba(0,0,0,.65) 90%, #000 100%);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-composite: source-over;
	mask-image:
		linear-gradient(to right, #000 0%, rgba(0,0,0,.75) 8%, transparent 18%, transparent 82%, rgba(0,0,0,.75) 92%, #000 100%),
		linear-gradient(to bottom, #000 0%, rgba(0,0,0,.65) 10%, transparent 25%, transparent 75%, rgba(0,0,0,.65) 90%, #000 100%);
	mask-repeat: no-repeat;
	mask-composite: add;
}
@media screen and (max-width:768px){
	.frame{
		-webkit-mask-image:
			linear-gradient(to right, #000 0%, rgba(0,0,0,.8) 8%, transparent 18%, transparent 82%, rgba(0,0,0,.8) 92%, #000 100%),
			linear-gradient(to bottom, #000 0%, rgba(0,0,0,.75) 3%, transparent 8%, transparent 92%, rgba(0,0,0,.75) 97%, #000 100%);
		mask-image:
			linear-gradient(to right, #000 0%, rgba(0,0,0,.8) 8%, transparent 18%, transparent 82%, rgba(0,0,0,.8) 92%, #000 100%),
			linear-gradient(to bottom, #000 0%, rgba(0,0,0,.75) 3%, transparent 8%, transparent 92%, rgba(0,0,0,.75) 97%, #000 100%);
	}
}
/*-----------------------------------------------
 * phsliderBlock
-------------------------------------------------*/
.phsliderBlock {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	height: 100dvh;
	overflow: hidden;
	z-index: 4;
	pointer-events: none;
}
.phsliderBlock__inner {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
	height: 100%;
	padding: 0 min(calc(40 / var(--vw-min) * 100vw), 40px);
}

/* lists */
.phLists {
	width:calc(240 / var(--vw-min) * 100vw);
	height: 100%;
	overflow: hidden;
	margin: unset;
	transition: transform 0.6s ease;
}
.phLists._left {
	margin-right: auto;
}
.phLists._right {
	margin-left: auto;
}
.in-about .phLists._left,
.in-about_mv .phLists._left,
.is-phOut .phLists._left {
	transform: translate(calc(-100% - min(calc(40 / var(--vw-min) * 100vw), 40px)), -6%);
}
.in-about .phLists._right,
.in-about_mv .phLists._right,
.is-phOut .phLists._right {
	transform: translate(calc(100% + min(calc(40 / var(--vw-min) * 100vw), 40px)), 6%);
}
@media screen and (max-width:768px){
	.phsliderBlock__inner {
		flex-direction: column;
		padding: calc(48 / var(--vw-min) * 100vw) 0;
	}
	.phLists {
		width: 100%;
		height: calc(140 / var(--vw-min) * 100vw);
	}
	.phLists._left {
		margin-right: unset;
		margin-bottom: auto;
	}
	.phLists._right {
		margin-left: unset;
		margin-top: auto;
	}
	.in-about .phLists._left,
	.in-about_mv .phLists._left,
	.is-phOut .phLists._left {
		transform: translate(0, calc(-100% - calc(50 / var(--vw-min) * 100vw)));
	}
	.in-about .phLists._right,
	.in-about_mv .phLists._right,
	.is-phOut .phLists._right {
		transform: translate(0, calc(100% + calc(50 / var(--vw-min) * 100vw)));
	}
}

/* item */
.phLists__track {
	display: flex;
	flex-direction: column;
	height: auto;
	transition: none;
	animation: phMarquee 40s linear infinite;
	will-change: transform;
}
.phLists._right .phLists__track {
	animation-direction: reverse;
}
.phItem {
	width: 100%;
	height:calc(134 / var(--vw-min) * 100vw);
	margin-bottom: calc(8 / var(--vw-min) * 100vw);
	overflow: hidden;
	pointer-events: auto;
	flex-shrink: 0;
}
.phItem__inner{
	width: 100%;
	height:  100%;
	overflow: hidden;
	position: relative;
}
.phItem__inner::before{
	position: absolute;
	pointer-events: none;
	top: 0;
	left: 0;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	transition: all 0.3s ease;
	background: url(../img/top/ph/slide_ph_frame.png) no-repeat center center / 100% 100%;
}
@media screen and (max-width:768px){
	.phItem__inner::before{
		background: url(../img/top/ph/slide_ph_frame_sp.png) no-repeat center center / 100% 100%;
	}
}
.phItem__inner::after{
	position: absolute;
	pointer-events: none;
	top: 0;
	left: 0;
	z-index: 2;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	transition: all 0.3s ease;
	opacity: 0;
	background: url(../img/top/ph/slide_ph_frame_on.png) no-repeat center center / 100% 100%;
}
.phItem:hover .phItem__inner::after{
	opacity: 0.3;
}
@media (hover: hover) and (pointer: fine){
	.phItem{
		cursor: none;
	}
}
.phItem__inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@keyframes phMarquee {
	to {
		transform: translate3d(0, -50%, 0);
	}
}
@keyframes phMarqueeX {
	to {
		transform: translate3d(-50%, 0, 0);
	}
}
@media screen and (max-width:768px){
	.phLists__track {
		flex-direction: row;
		width: max-content;
		height: 100%;
		animation-name: phMarqueeX;
	}
	.phItem {
		width: calc(240 / var(--vw-min) * 100vw);
		height: calc(140 / var(--vw-min) * 100vw);
		margin-bottom: 0;
		margin-right: calc(20 / var(--vw-min) * 100vw);
	}
}

/*-----------------------------------------------
 * fv
-------------------------------------------------*/
.fv {
	width: 100%;
	height: 100vh;
	height: 100svh;
	height: 100dvh;
	min-height:calc(640 / var(--vw-min) * 100vw)!important;
	position: relative;
	z-index: 11;
    pointer-events: none;
}

.fv__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	width: 100%;
	height: 100%;
	padding: min(calc(70 / var(--vw-min) * 100vw), 70px) 0;
}
@media screen and (max-width:768px){
	.fv__inner {
		padding: calc(200 / var(--vw-min) * 100vw) 0;
	}
}
.fv_ps5 {
	background: url(../img/common/logo/logo_ps5.png) no-repeat center center / contain;
	width: calc(160 / var(--vw-min) * 100vw);
	height: calc(35 / var(--vw-min) * 100vw);
	margin-bottom: calc(30 / var(--vw-min) * 100vw);
}
.fv_ttl {
	background: url(../img/common/logo/logo.png) no-repeat center center / contain;
	width: calc(400 / var(--vw-min) * 100vw);
	height: calc(252 / var(--vw-min) * 100vw);
}
.fv_day{
	background: url(../img/top/fv_day.svg) no-repeat center center / contain;
	width: calc(238 / var(--vw-min) * 100vw);
	height: calc(29 / var(--vw-min) * 100vw);
	margin-top: calc(30 / var(--vw-min) * 100vw);
}
.fv_bnr1{
	background: url(../img/top/fv_bnr_tgs.png) no-repeat center center / contain;
	width: calc(480 / var(--vw-min) * 100vw);
	height: calc(80 / var(--vw-min) * 100vw);
	margin-top: calc(30 / var(--vw-min) * 100vw);
	pointer-events: auto;
	display: block;
	transition: transform 0.3s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1));
}
@media (hover: hover) and (pointer: fine){
	.fv_bnr1:hover {
		transform: scale(1.08);
	}
}
@media screen and (max-width:768px){
	.fv_ps5 {
		width: calc(200 / var(--vw-min) * 100vw);
		height: calc(50 / var(--vw-min) * 100vw);
		margin-bottom: calc(30 / var(--vw-min) * 100vw);
	}
	.fv_ttl {
		width: calc(485 / var(--vw-min) * 100vw);
		height: calc(320 / var(--vw-min) * 100vw);
	}
	.fv_day{
		background: url(../img/top/fv_day.svg) no-repeat center center / contain;
		width: calc(358 / var(--vw-min) * 100vw);
		height: calc(42 / var(--vw-min) * 100vw);
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
	.fv_bnr1 {
		background: url(../img/top/fv_bnr_tgs_sp.png) no-repeat center center / contain;
		width: calc(654 / var(--vw-min) * 100vw);
		height: calc(120 / var(--vw-min) * 100vw);
		margin-top: calc(70 / var(--vw-min) * 100vw);
		}
}

/*-----------------------------------------------
 * Movie
-------------------------------------------------*/
.movieBlock{
	position: relative;
	z-index: 10;
	pointer-events: none;
}
.movie__inner{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	height: 100dvh;
	z-index: 1;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
}
.in-movie .movie__inner,
.in-about .movie__inner,
.in-about_mv .movie__inner,
.is-movieFollow .movie__inner{
	opacity: 1;
}
.movie__ytWrap {
	position: absolute;
	inset: 0;
	margin: auto;
	width: calc(480 / var(--vw-min) * 100vw);
	height: calc(270 / var(--vw-min) * 100vw);
	max-width: calc(800 / var(--vw-min) * 100vw);
	max-height: calc(450 / var(--vw-min) * 100vw);
	overflow: hidden;
}

@media screen and (max-width:768px){
	.movie__ytWrap {
		width: calc(654 / var(--vw-min) * 100vw);
		height: calc(368 / var(--vw-min) * 100vw);
	}
}


.is-movieFollow .movie__inner{
	pointer-events: none;
}
.is-movieFollow .movieBtn{
	opacity: 1;
	pointer-events: all;
}
.movieBtn{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
}
.in-movie .movieBtn{
	opacity: 1;
	pointer-events: all;
}
.ic_play{
	position: absolute;
	inset: 0;
	margin: auto;
	display: block;
	width: min(calc(100 / var(--vw-min) * 100vw), 100px);
	height: min(calc(100 / var(--vw-min) * 100vw), 100px);
	background: url(../img/common/play_btn.svg) no-repeat center / min(calc(65 / var(--vw-min) * 100vw), 65px);
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
	pointer-events: none;
}
.ic_play:before{
	content: '';
	position: absolute;
	inset: 0;
	background: url(../img/common/play_txt.svg) no-repeat center / contain;
	animation: 10s ani_rotate01 linear infinite;
	pointer-events: none;
}
@media screen and (max-width:768px){
	.ic_play{
		width: calc(150 / var(--vw-min) * 100vw);
		height: calc(150 / var(--vw-min) * 100vw);
		background: url(../img/common/play_btn.svg) no-repeat center / calc(96 / var(--vw-min) * 100vw);
	}
}

/*-----------------------------------------------
 * phItem Cursor [pc / notouch]
-------------------------------------------------*/
.phCursor{
	display: none;
}
@media (hover: hover) and (pointer: fine){
	.phCursor{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 21px;
		height: 21px;
		z-index: 1000;
		pointer-events: none;
	}
	.phCursor__icon{
		width: 100%;
		height: 100%;
		background: url(../img/common/mouse.svg) no-repeat center / contain;
		transform: scale(0.15);
		opacity: 0;
		transition: transform .4s ease, opacity .2s ease;
	}
	.phCursor.is-hover .phCursor__icon{
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes ani_rotate01{
	0% {transform: rotate(0);}
	100% {transform: rotate(360deg);}
}
.movie__yt{
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.movie__yt img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.about{
	position: relative;
	z-index: 11;
	pointer-events: none;
	padding-top: calc(160 / var(--vw-min) * 100vw);
}
.about__inner{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
	padding-bottom:calc(155 / var(--vw-min) * 100vw);
}
.about_catch1{
	width: min(calc(790 / var(--vw-min) * 100vw), 790px);
	height: min(calc(231 / var(--vw-min) * 100vw), 231px);
	background: url(../img/top/catch1.svg) no-repeat center center / contain;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
	margin-bottom: calc(40 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
	.about_catch1{
		width: calc(654 / var(--vw-min) * 100vw);
		height: calc(257 / var(--vw-min) * 100vw);
		background: url(../img/top/catch1_sp.svg) no-repeat center center / contain;
	}
}
.about_mv{
	width: calc(800 / var(--vw-min) * 100vw);
	height: calc(400 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
	.about_mv{
		width: calc(654 / var(--vw-min) * 100vw);
		height: calc(368 / var(--vw-min) * 100vw);
	}
}
.about_catch2{
	width: min(calc(800 / var(--vw-min) * 100vw), 800px);
	height: min(calc(70 / var(--vw-min) * 100vw), 70px);
	background: url(../img/top/catch2.png) no-repeat center center / contain;
	margin-top: calc(55 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
	.about_catch2{
		width: calc(654 / var(--vw-min) * 100vw);
		margin: calc(50 / var(--vw-min) * 100vw) auto 0;
		height: calc(55 / var(--vw-min) * 100vw);
	}
}
.about_txt{
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	line-height: 2;
	color: #fff;
	width: min(calc(800 / var(--vw-min) * 100vw), 800px);
	margin: calc(30 / var(--vw-min) * 100vw) auto 0;
	pointer-events: all;
}
@media screen and (max-width:768px){
	.about_txt{
		font-size: calc(28 / var(--vw-min) * 100vw);
		width: 100%;
		padding: 0 calc(46 / var(--vw-min) * 100vw);
		margin: calc(40 / var(--vw-min) * 100vw) auto 0;
	}
}
.section{
	min-height: 100vh;
	min-height: 100svh;
}