@charset "utf-8";
.tContentsWrap{
	position: relative;
}

@media screen and (min-width:768px){
	.header__navBtn{
		transform: translateX(100%);
		transition: .6s ease;
	}
	.js-tNavbtn.-show .header__navBtn{
		transform: translateX(0%);
	}
}

/*-----------------------------------------------
 * FIRSTVIEW
-------------------------------------------------*/
.fv{
	width: 100%;
	position: relative;
}
@media screen and (max-width:767px){
	.fv{
		padding-bottom: min(16%, 120px);
	}
}

/* fv_infoWrap */
.fv_infoWrap{
	width: 567px;
	width: min(47.25%, 567px);
	position: absolute;
	top: 0;
	left: 0;
	margin-left: min(2.5%, 30px);/* 30px */
	margin-top: min(1.6667%, 20px);/* 20px */
	z-index: 2;
}
.t_logo{
	width: 100%;
	position: relative;
}
.t_logoIn{
	display: block;
	width: 100%;
	position: relative;
	padding-top: 34.9207%;/* 198px */
}
.fv_onairTxt{
	width: 95.9436%;/* 544px */
	position: relative;
	margin-top: -0.7055%;
	margin-left: auto;
	margin-right: auto;
}
.fv_onairTxtIn{
	display: block;
	width: 100%;
	position: relative;
	padding-top: 21.875%;/* 119px */
}
.t_logo img,
.fv_onairTxt img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
@media screen and (max-width:767px){
	.fv_infoWrap{
		width: 100%;
		top: unset;
		bottom: 0;
		margin-top: unset;
		margin-left: unset;
	}
	.t_logo{
		width: min(75.6%, 567px);
		margin-left: auto;
		margin-right: auto;
	}
	.fv_onairTxt{
		width: min(81.8667%, 614px);
		margin-top: calc(var(--sp-size-16) * -1);
	}
}


/* fv_visualWrap */
.fv_visualWrap{
	width: 100%;/* 950px */
	margin-left: auto;
}
.visualIn{
	width: 100%;
	padding-top: 127.2916%;
	position: relative;
}
.visualIn img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media screen and (max-width:767px){
	.fv_visualWrap{
		width: 100%;
	}
	.visualIn{
		padding-top: 141.4667%;
	}
}


/* fv_catch */
.fv_catchWrap{
	position: absolute;
	top: 0;
	right: 0;
	margin-top: min(1%, 12px);/* 12px */
	margin-right: min(1.3334%, 16px);/* 16px */
	width: min(10.25%, 123px);/* 123px */
}
.fv_catchTxt{
	width: 100%;
	padding-top: 485.3659%;/* 597px */
	position: relative;
}
.fv_catchTxt img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right top;
}
@media screen and (max-width:767px){
	.fv_catchWrap{
		right: unset;
		left: 0;
		width: var(--sp-size-120);
		margin-top: var(--sp-size-26);
		margin-right: unset;
		margin-left: var(--sp-size-16);
	}
	.fv_catchTxt img{
		object-position: left top;
	}
}


/* p-contentsNav */
.p-contentsNavWrap{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-top: min(26.6667%, 320px);
}
.p-contentsNavInWrap{
	position: sticky;
	min-height: min(100%, 640px);
	height: 100%;
	max-height: 100vh;
	top: 0;
}

.p-contentsNav{
	width: 300px;
	width: clamp(264px, 25%, 300px);
	padding-top: 40px;
}
.p-contentsNav__dt{
	width: 100%;
	position: relative;
	padding-left: 40px;
	line-height: 0.825;
	padding-bottom: 8px;
	font-family: var(--font-eng);
	color: var(--color-blue);
	letter-spacing: 0;
}
.p-contentsNav__dt:before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 9px;
	background: linear-gradient(180deg, var(--color-blue) 0%, var(--color-blue) 22%, #FFF 22%, #FFF 56%, var(--color-blue) 56%, var(--color-blue) 100%);
}

.p-contentsNav .navLists{
	padding-top: 20px;
}
.p-contentsNav .navList{
	padding-left: 30px;
	pointer-events: none;
	font-size: 28px;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-right: 72px;
	position: relative;
}
.p-contentsNav .navList:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto 0;
	width: 50px;
	height: 15px;
	mask: url(../img/common/icon_sword.svg) no-repeat right center / contain;
	-webkit-mask: url(../img/common/icon_sword.svg) no-repeat right center / contain;
	background-color: var(--color-blue);
	transform: translateX(0%) rotateX(90deg);
	opacity: 1;
	transition: opacity .2s ease, transform .35s ease .05s;
}

.p-contentsNav .navList__link{
	color: #000;
	pointer-events: auto;
	transition: .3s ease;
}


/* p-contentsNav__snsLists */
.p-contentsNav .nav_snsLists__dl{
	padding-top: 20px;
	padding-left: 30px;
	position: relative;
}
.p-contentsNav .nav_snsLists__dt{
	line-height: 0.825;
}
.p-contentsNav .nav_snsLists__dd{
	margin-top: 12px;
}
.p-contentsNav .nav_snsList{
	width: 40px;
	padding: 0 5px;
}
.p-contentsNav .nav_snsList__link{
	width: 100%;
	padding-top: 100%;
	position: relative;
	display: block;
}
.p-contentsNav .nav_snsList__linkIcon{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.p-contentsNav .nav_snsList__linkIcon:after{
	background-color: #000;
}


/* hover */
@media (hover: hover) and (pointer: fine){
	.p-contentsNav .navList:hover::after{
		opacity: 1;
		transform: translateX(-50%) rotateX(0deg);
	}
	.p-contentsNav .navList__link:hover{
		color: var(--color-blue);
	}
	.p-contentsNav .nav_snsList__link:hover .nav_snsList__linkIcon:after{
		background-color: var(--color-blue);
	}
}


/**
* SEASONNAV
**/
.p-contentsNav .navList.seasonNavListsWrap.__top_fv{
	padding: 0;
	margin-bottom: 20px;
}
.p-contentsNav .navList.seasonNavListsWrap.__top_fv:after{
	content: unset;
}
.navList.__top_fv .seasonNavLists{
	width: 100%;
	padding-bottom: 19px;
	position: relative;
}
.navList.__top_fv .seasonNavLists:after{
	content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 9px;
    background: linear-gradient(180deg, var(--color-blue) 0%, var(--color-blue) 22%, transparent 22%, transparent 56%, var(--color-blue) 56%, var(--color-blue) 100%);
}




/** LOAING **/
.visualIn{
	filter: blur(8px) brightness(2);
	transition: 1s cubic-bezier(.17,.67,.45,1.03);
}
.fv_infoInWrap,
.p-contentsNavWrap{
	filter: blur(2px);
	opacity: 0;
	transition: 1.6s cubic-bezier(.17,.67,.45,1.03) .2s;
}
.fv_catchWrap{
	opacity: 0;
	filter: blur(4px);
	transform: translateY(10%);
	transition: 1.2s ease .2s;
}

body.--is-loaded .visualIn,
body.--is-loaded .fv_infoInWrap,
body.--is-loaded .p-contentsNavWrap{
	opacity: 1;
	filter: blur(0px) brightness(1);
}
body.--is-loaded .fv_catchWrap{
	opacity: 1;
	filter: blur(0px);
	transform: translateY(0%);
}

/*-----------------------------------------------
 * MOVIE
-------------------------------------------------*/
.tMovie{
	width: 100%;
	padding-top: 56.9167%;/* 683px */
	position: relative;
	background-color: red;
	margin-top:-13vw;
	overflow: hidden;
	-webkit-mask:url(../img/top/t_movieFrame_mask.svg) no-repeat center center / cover;
	mask:url(../img/top/t_movieFrame_mask.svg) no-repeat center center / cover;
}
/*.tMovie:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../img/top/t_movieFrame.svg) no-repeat center / cover;
}*/

.bg_ytplayer {
	position: absolute;
	top: -6.25%;
	left: -6.25%;
	width: 112.5%;
	height: 112.5%;
	transition: .3s ease;
}

.btn_moviePlay{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: min(14.8334%, calc(178px * var(--max-percent)));
	height: min(14.8334vw, calc(178px * var(--max-percent)));
	margin: auto;
	z-index: 2;
}
.btn_moviePlayIn{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.btn_moviePlayIn:before,
.btn_moviePlayIn:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.btn_moviePlayIn:before{
	width: 100%;
	height: 100%;
	background: url(../img/common/btn_moviePlay_frame.svg) no-repeat center / contain;
	animation: 18s rotate linear infinite reverse;
}
.btn_moviePlayIn:after{
	width: 86.5169%;
	height: 86.5169%;
	background: url(../img/common/btn_moviePlay_txt.svg) no-repeat center / contain;
	animation: 18s rotate linear infinite;
}
.btn_moviePlay__icon{
	width: 12.3596%;/* 22px */
	height: 15.7304%;/* 28px */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: url(../img/common/arrow_r.svg) no-repeat center / contain;
	transition: .3s ease;
}

@media screen and (max-width:767px){
	.tMovie{
		padding-top: min(74.6667%, 560px);
		margin-top: 3vw;
		-webkit-mask:url(../img/top/t_movieFrame_mask-s.svg) no-repeat center center / cover;
		mask:url(../img/top/t_movieFrame_mask-s.svg) no-repeat center center / cover;
	}
/*	.tMovie:after{
		background-image: url(../img/top/t_movieFrame-s.svg);
	}*/
	.bg_ytplayer {
		top: -16%;
		left: -16%;
		width: 132%;
		height: 132%;
	}
	.btn_moviePlay{
		width: min(22.6667%, 170px);
		height: min(22.6667vw, 170px);
	}
	.btn_moviePlayIn:after{
		width: min(90.5883%, 154px);
		height: min(90.5883%, 154px);
	}
	.btn_moviePlay__icon{
		width: var(--sp-size-24);
		height: var(--sp-size-36);
	}
}

@media (hover: hover) and (pointer: fine){
	.btn_moviePlay{
		transition: .3s ease;
	}
	.btn_moviePlay:hover{
		transform: scale(1.05);
	}
	.btn_moviePlay:hover .btn_moviePlayIn::before,
	.btn_moviePlay:hover .btn_moviePlayIn::after{
		animation-play-state: paused;
	}
	.btn_moviePlay:hover .btn_moviePlay__icon{
		transform: scale(1.275) translateX(5%);
	}
}



/*-----------------------------------------------
 * NEWS
-------------------------------------------------*/
.newsLists{
	width: 100%;
}
.newsList{
	width: 100%;
	position: relative;
	border-bottom: 1px solid #1db8ec;
}
.newsList:nth-of-type(1){
	border-top: 1px solid #1db8ec;
}
.newsList__link{
	text-decoration: none;
	line-height: 1.75;
	padding: 20px;
	display: flex;
	align-items: center;
	position: relative;
}
.newsTitle__date{
	display: inline-block;
	flex-shrink: 0;
	font-family: var(--font-eng);
	color: var(--color-blue);
	position: relative;
	padding-right: 30px;
	letter-spacing: 0;
	z-index: 2;
	transition: .3s ease;
}
.newsTitle__date:after{
	content: '';
	position: absolute;
	top: 0;
	right: 10px;
	bottom: 0;
	width: 10px;
	height: 10px;
	margin: auto 0;
	-webkit-mask: url(../img/common/icon_star.svg) no-repeat center / contain;
	mask: url(../img/common/icon_star.svg) no-repeat center / contain;
	background-color: var(--color-blue);
	transition: .3s ease;
}
.newsTitle__txt{
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	position: relative;
	z-index: 2;
	font-weight: 500;
	transition: .3s ease .05s;
}

.newsMore{
	text-align: right;
	margin-top: 32px;
}
.newsMore a{
	display: inline-block;
	padding-right: 24px;
	position: relative;
	line-height: 1;
	font-size: 20px;
	font-family: var(--font-eng);
	color: var(--color-blue);
	text-decoration: none;
}
.newsMore a:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 14px;
	height: 16px;
	margin: auto 0;
	-webkit-mask: url(../img/common/arrow_r.svg) no-repeat right center / contain;
	mask: url(../img/common/arrow_r.svg) no-repeat right center / contain;
	background-color: var(--color-blue);
}

@media (hover: hover) and (pointer: fine){
	.newsList__link:before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: linear-gradient(var(--color-blue), var(--color-blue));
		background-repeat: no-repeat;
		background-size: 0% 100%;
		background-position: right bottom;
		transition: background-size .4s ease;
		opacity: 80%;
	}
	.newsList__link:hover::before{
		background-size: 100% 100%;
		background-position: left bottom;
	}
	.newsList__link:hover .newsTitle__date,
	.newsList__link:hover .newsTitle__txt{
		color: #FFF;
	}
	.newsList__link:hover .newsTitle__date:after{
		background-color: #fff;
	}

	.newsMore a:after{
		transition: .3s ease;
	}
	.newsMore a:hover:after{
		transform: translateX(4px);
	}
	.newsMore a span{
		display: inline-block;
		position: relative;
		padding: 1px 0;
	}
	.newsMore a span:before{
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 1px;
		background-image: linear-gradient(var(--color-blue), var(--color-blue));
		background-repeat: no-repeat;
		background-size: 0% 100%;
		background-position: right bottom;
		transition: background-size .4s ease;
	}
	.newsMore a:hover span:before{
		background-size: 100% 100%;
		background-position: left bottom;
	}
}

@media screen and (max-width:767px){
	.newsList__link{
		padding: var(--sp-size-20);
		display: block;
		line-height: 1.8;
	}
	.newsTitle__date{
		padding-right: var(--sp-size-24);
	}
	.newsTitle__date:after{
		width: var(--sp-size-16);
		height: var(--sp-size-16);
		right: 0;
	}
	.newsMore{
		margin-top: var(--sp-size-48);
	}
	.newsMore a{
		font-size: var(--sp-size-36);
		padding-right: var(--sp-size-40);
	}
	.newsMore a:after{
		width: var(--sp-size-24);
		height: var(--sp-size-32);
	}
}

/** is-ani **/
.newsList,
.newsMore{
	opacity: 0;
	transform: translateY(24px);
	transition: .4s cubic-bezier(.25,.46,.45,.94);
}
.newsList:nth-of-type(1){
	transition-delay: .4s;
}
.newsList:nth-of-type(2){
	transition-delay: .5s;
}
.newsList:nth-of-type(3){
	transition-delay: .6s;
}
.newsMore{
	transition-delay: .7s;
}
#news .contentIn.is-ani .newsList,
#news .contentIn.is-ani .newsMore{
	opacity: 1;
	transform: translateY(0);
}



/*-----------------------------------------------
 * INTRODUCTION
-------------------------------------------------*/
.introText{
	font-size: 18px;
	line-height: 2;
	font-weight: 500;
	letter-spacing: 0.03em;
}
.introText:not(:first-child){
	padding-top: 48px;
}
.introText.-mds{
	font-size: 24px;
	font-weight: 700;
	color: var(--color-blue);
}

@media screen and (max-width:767px){
	.introText{
		font-size: var(--sp-size-24);
	}
	.introText:not(:first-child){
		padding-top: var(--sp-size-48);
	}
	.introText.-mds{
		font-size: var(--sp-size-32);
		text-align: center;
	}
	.introText.-mds small{
		font-size: min(2.9334vw, 22px);
	}
}

/** is-ani **/
#introduction{
	overflow: hidden;
}
.introText{
	transform: scale(1.1) translate(5%,10%);
	opacity: 0;
	filter: blur(4px);
	transition: 1s ease .8s;
}
.introText:nth-of-type(1){
	transition-delay: 0.4s;
}
.introText:nth-of-type(2){
	transition-delay: 0.6s;
}
.introText:nth-of-type(3){
	transition-delay: 0.8s;
}
.introText:nth-of-type(4){
	transition-delay: 1.0s;
}
.introText:nth-of-type(5){
	transition-delay: 1.2s;
}
#introduction .contentIn.is-ani .introText{
	transform: scale(1) translate(0%,0%);
	opacity: 1;
	filter: blur(0px);
}