@charset "utf-8";
/*-----------------------------------------------
 * Keyframes
 * Loading
 * First view
-------------------------------------------------*/
.header{
	position: relative;
	left: 0!important;
}
/*-----------------------------------------------
 * Keyframes
-------------------------------------------------*/
@keyframes vsAni {
	0%,30% {
		filter: brightness(100%);
	}
	40% {
		filter: brightness(100%);
	}
	41% {
		filter: brightness(100%);
	}
	42% {
		filter: brightness(110%);
	}
	43% {
		filter: brightness(100%);
	}
	45% {
		filter: brightness(120%);
	}
	46% {
		filter: brightness(105%);
	}
	47% {
		filter: brightness(110%);
	}
	48% {
		filter: brightness(100%);
	}
	49% {
		filter:  brightness(110%);
	}
	50%,100% {
		filter: brightness(100%);
	}
}
@keyframes gauge {
	0% {
		width: 0;
	}
	90% {
		width: 100%;
	}
	100% {
		width: 100%;
	}
}
@keyframes giggle {
	0%     { transform:translate(0, 0) }
	16.66% { transform:translate(6px, -3px) }
	33.32% { transform:translate(6px, 3px) }
	49.98% { transform:translate(0, 0) }
	66.64% { transform:translate(-6px, -3px) }
	83.30% { transform:translate(-6px, 3px) }
	100%   { transform:translate(0, 0) }
}
 @keyframes vertical {
	0%, 100% {
		transform:translateY(-1px);
	}
	50% {
		transform:translateY(1px);
	}
}

@keyframes glitch {
	0%, 20%, 33%, 60%, 64%, 66%, 69%, 73%, 75%, 90%, 93%, 100% {
		transform: skew(0deg);
	}
	21%, 81% {
		transform: skew(30deg, 0deg);
	}
	22%, 82% {
		transform: skew(-30deg, 0deg);
	}
	61% {
		transform: skew(35deg);
	}
	62% {
		transform: skew(-15deg, -8deg);
	}
	65% {
		transform: skew(15deg, -8deg);
	}
	70% {
		transform: skew(-65deg);
	}
	74% {
		transform: skew(15deg, -15deg);
	}
}

@keyframes spriteAnimation {
	from {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
	to {
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
	}
}

@keyframes lineAnimation {
	0% {
		transform: translate(-100%,-100%);
	}
	35% {
		transform: translate(0,0);
	}
	55% {
		transform: translate(0,0);
	}
	100% {
		transform: translate(100%,100%);
	}
}


/*-----------------------------------------------
 * Loading
-------------------------------------------------*/
.loading {
	background-color: #ffff04;
	overflow: hidden;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	-webkit-mask: url(../img/common/bg/bg_sprite.png);
	mask: url(../img/common/bg/bg_sprite.png);
	-webkit-mask-size: 2300% 100%;
	mask-size: 2300% 100%;
}
.loading.is-active {
	animation: spriteAnimation .3s steps(22) 1.8s forwards;
}

/* noice */
.loading:after {
	content: "";
	background: url(../img/common/bg/noise.jpg) center;
    width: 150%;
    height: 150%;
    animation: rumble .3s linear infinite;
    position: absolute;
    top: -25%;
    left: -25%;
    opacity: .7;
	z-index: 0;
}

/* logo */
.loading:before {
	content: "";
	background: url(../img/common/logo/logo_loading.png) no-repeat 0 0 / 100%;
	width: 204px;
	height: 99px;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

/* line */
.loading__line {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
	transform: translate(-100%,-100%);
	/* transition: width .5s cubic-bezier(0.25, 1, 0.5, 1),
				height .5s cubic-bezier(0.25, 1, 0.5, 1); */
}
.loading.is-active .loading__line {
	/* transition-delay: .5s;
	width: 100%;
	height: 100%; */
	animation: lineAnimation .8s cubic-bezier(0.25, 1, 0.5, 1) .6s forwards;
}


/*-----------------------------------------------
 * First view
-------------------------------------------------*/
.firstView {
	display: flex;
	position: relative;
}
@media screen and (max-width:767px){
	.firstView {
		flex-direction: column;
		padding-bottom: 50px;
	}
}

/**
 * visualWrap
 */
.visualWrap {
	width: 51%;
	margin-left: auto;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.visual {
	width: 100%;
	padding-top: 135.94%;
	position: relative;
}
@media screen and (max-width:767px){
	.visualWrap {
		width: 100%;
		margin-left: 0;
		order: 1;
	}
	.visual {
		width: 100%;
		padding-top: 138.6667%;
	}
}

/* top, bottom */
.visual__top {
	background: url(../img/top/visual2.png) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
	opacity: 0;
	transform: translate(0%, 8%) scale(0.8);
	transition: all .8s cubic-bezier(0.25, 1, 0.5, 1);
}
.firstView.is-active .visual__top {
	transition-delay: .6s;
	opacity: 1;
	transform: translate(0, 0) scale(1);
}
.visual__bottom {
	background: url(../img/top/visual_bg2.png) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 0;
	opacity: 0;
	transform: translate(20%, 0);
	transition: all .6s cubic-bezier(0.25, 1, 0.5, 1);
}

.firstView.is-active .visual__bottom {
	transition-delay: .3s;
	opacity: 1;
	transform: translate(0, 0);
	animation: vsAni 5s infinite;
}

@media screen and (max-width: 767px){
	.visual__top {
		background-image: url(../img/top/visual2_sp.png);
	}
	.visual__bottom {
		background-image: url(../img/top/visual_bg2_sp.jpg);
	}
}

/**
 * posFixWrap
 */
.posFixWrap {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 2;
}
.posFix {
	width: 100%;
	height: 100vh;
	/*min-height: 640px;*/
	min-height: 800px;
	position: sticky;
	top: 0;
}
.posFix.is-posFix--per {
	height: 100%;
}
@media screen and (max-width:767px){
	.posFixWrap {
		order: 2;
		position: relative;
	}
	.posFix {
		height: auto;
		min-height: auto;
		position: relative;
		top: auto;
	}
	.posFix.is-posFix--per {
		height: auto;
	}
}

/* left */
.posFix__left {
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
@media screen and (max-width:767px){
	.posFix__left {
		width: 100%;
		height: auto;
		position: relative;
		top: auto;
		left: auto;
	}
}

/**
 * posFix__title
 */
.posFix__titleWrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: calc(100% - 128px);
	max-width: 900px;
	margin: 0 auto;
}
@media screen and (max-width:767px){
	.posFix__titleWrap {
		height: auto;
		max-width: 100%;
		margin-top: -12.8%;
	}
}

/* title */
.posFix__title {
	background: url(../img/common/logo/logo.svg) no-repeat 0 0 / 100%;
	width: 66.6%;
	padding-top: 33%;
	filter: drop-shadow(0 0 2px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF);
}

/**
 * glitch
 */
.glitchWrap {
	background: url(../img/top/startdate.png) no-repeat 0 0 / 100%;
	width: 50%;
	margin-top: 28px;
	padding-top: 18.72%;
	position: relative;
}
@media screen and (max-width:767px){
	.glitchWrap {
		width: 64%;
		margin-top: 24px;
		padding-top: 23.97%;
	}
}

.onair_txtWrap{
	width: 539px;
	width: 89.8334%;
	padding-top: 37px;
	padding-top: 6.1667%;
	margin-top: 42px;
	position: relative;
	opacity: 0;
	transform: translate(0%, 8%) scale(0.8) rotate3d(1, 1, 1, 15deg);;
	transition: opacity .4s ease, transform .4s ease;
}
.posFix.is-active .onair_txtWrap{
	opacity: 1;
	transform: translate(0,0) scale(1) rotate3d(0, 0, 0, 0deg);;
}

.oa_txt{
	width: 21.89239%;
	margin-left: auto;
	position: absolute;
	top: 0;
	left: 46.75324%;
	bottom: 0;
	right: 29.1281%;
	background: url(../img/top/oa_txt.svg) no-repeat center / contain;
	filter: drop-shadow(0 0 2px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF);
}

@media screen and (max-width: 767px){
	.onair_txtWrap{
		width: 417px;
		width: 55.6%;
		padding-top: 152px;
		padding-top: 20.2667%;
		margin-top: 6.9334%;
	}
	.oa_txt{
		width: 178px;
		width: 42.6859%;
		padding-top: 13.1895%;
		top: unset;
		right: unset;
		left: 0;
	}
}

/**
 * text1
 */
.glitch__text1Wrap {
	width: 100%;
	height: 50%;
	position: absolute;
	top: 0;
	left: 0;
}
.glitch__text1Wrap.is-ani {
	animation: glitch 1s infinite;
}

.oa_txt1Wrap{
	width: 252px;
	width: 46.75324%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.oa_txt1Wrap.is-ani {
	animation: glitch 1s infinite;
}

@media screen and (max-width: 767px){
	.oa_txt1Wrap{
		width: 90.6475%;
		height: auto;
		padding-top: 13.1895%;
		left: 4.67625%;
	}
}



/* glitch__text1__org */
.glitch__text1__org {
	content: "";
	background: url(../img/top/gr_text1_org.png) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 3;
}
.glitch__text1Wrap.is-ani .glitch__text1__org {
	animation: vertical 2s ease infinite;
}

.oa_txt1__org {
	content: "";
	background: url(../img/top/oa_text1_org.svg) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 3;
	filter: drop-shadow(0 0 2px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF);
}
.oa_txt1Wrap.is-ani .oa_txt1__org {
	animation: vertical 2s ease infinite;
}


/* glitch__text1__pink */
.glitch__text1__pink {
	content: "";
	background: url(../img/top/gr_text1_pink.png) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 2;
}
.glitch__text1Wrap.is-ani .glitch__text1__pink {
	animation: giggle 2s ease infinite;
}


.oa_txt1__pink {
	content: "";
	background: url(../img/top/oa_text1_pink.svg) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 2;
}
.oa_txt1Wrap.is-ani .oa_txt1__pink {
	animation: giggle 2s ease infinite;
}

/* glitch__text1__blue */
.glitch__text1__blue {
	content: "";
	background: url(../img/top/gr_text1_blue.png) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
}
.glitch__text1Wrap.is-ani .glitch__text1__blue {
	animation: giggle 1.4s ease infinite;
	animation-delay:-.7s;
}


.oa_txt1__blue {
	content: "";
	background: url(../img/top/oa_text1_blue.svg) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
}
.oa_txt1Wrap.is-ani .oa_txt1__blue {
	animation: giggle 1.4s ease infinite;
	animation-delay:-.7s;
}


/**
 * text2
 */
.glitch__text2Wrap {
	width: 100%;
	height: 50%;
	position: absolute;
	bottom: 0;
	left: 0;
}
.glitch__text2Wrap.is-ani {
	animation: glitch 1s infinite;
}


.oa_txt2Wrap{
	width: 157px;
	width: 29.1281%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
}
.oa_txt2Wrap.is-ani {
	animation: glitch 1s infinite;
}

@media screen and (max-width: 767px){
	.oa_txt2Wrap{
		width: 56.8346%;
		height: auto;
		padding-top: 13.1895%;
		top: unset;
		right: 0;
		bottom: 0;
	}
}

/* glitch__text2__org */
.glitch__text2__org {
	content: "";
	background: url(../img/top/gr_text2_org.png) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 3;
}
.glitch__text2Wrap.is-ani .glitch__text2__org {
	animation: vertical 2s ease infinite;
}


.oa_txt2__org {
	content: "";
	background: url(../img/top/oa_text2_org.svg) no-repeat center / contain;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 3;
	filter: drop-shadow(0 0 2px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF);
}
.oa_txt2Wrap.is-ani .oa_txt2__org {
	animation: vertical 2s ease infinite;
}

/* glitch__text2__pink */
.glitch__text2__pink {
	content: "";
	background: url(../img/top/gr_text2_pink.png) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 2;
}
.glitch__text2Wrap.is-ani .glitch__text2__pink {
	animation: giggle 2s ease infinite;
}


.oa_txt2__pink {
	content: "";
	background: url(../img/top/oa_text2_pink.svg) no-repeat center / contain;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 2;
}
.oa_txt2Wrap.is-ani .oa_txt2__pink {
	animation: giggle 2s ease infinite;
}

/* glitch__text2__blue */
.glitch__text2__blue {
	content: "";
	background: url(../img/top/gr_text2_blue.png) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
}
.glitch__text2Wrap.is-ani .glitch__text2__blue {
	animation: giggle 1.4s ease infinite;
	animation-delay:-.7s;
}


.oa_txt2__blue {
	content: "";
	background: url(../img/top/oa_text2_blue.svg) no-repeat center / contain;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
}
.oa_txt2Wrap.is-ani .oa_txt2__blue {
	animation: giggle 1.4s ease infinite;
	animation-delay:-.7s;
}

/**
 * topicsListsArea
 */
.topicsListsArea {
	background-color: rgba(255,255,255,.8);
	width: 100%;
	height: 128px;
	opacity: 0;
	transition: opacity .4s ease;
}
.posFix.is-active .topicsListsArea {
	opacity: 1;
}
@media screen and (max-width:767px){
	.topicsListsArea {
		height: auto;
		margin-top: 50px;
	}
}

/**
 * topicsTitleWrap
 */
.topicsTitleWrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 0 40px;
}
@media screen and (max-width:767px){
	.topicsTitleWrap {
		height: auto;
		padding: 12px 24px 6px;
	}
}

/* title */
.topicsTitle {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.01em;
	width: 100%;
	white-space: nowrap;
}
.topicsTitle:after {
	content: "";
	background-color: rgba(0,0,0,.2);
	display: block;
	width: 100%;
	height: 1px;
	margin: 0 12px;
}
@media screen and (max-width:767px){
	.topicsTitle {
		font-size: 1.4rem;
	}
}

/* moreLink */
.topicsTitle__moreLink {
	background-color: #000;
	display: block;
	color: #fff;
	font-size: 12px;
	margin-left: auto;
	padding: 0 8px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .3s ease;
}
.topicsTitle__moreLink:hover {
	background-color: #e60012;
}
@media screen and (max-width:767px){
	.topicsTitle__moreLink {
		font-size: 1.2rem;
	}
}

/**
 * topicsListsWrap
 */
.topicsListsWrap {
	height: calc(100% - 60px);
	position: relative;
}
@media screen and (max-width:767px){
	.topicsListsWrap {
		height: auto;
	}
}

/* item */
.topicsLists__item {
	padding: 0 40px;
}
@media screen and (max-width:767px){
	.topicsLists__item {
		padding: 0 24px;
	}
}

/* a */
.topicsLists__link {
	display: flex;
	text-decoration: none;
}
@media screen and (max-width:767px){
	.topicsLists__link {
		display: block;
	}
}

/* date */
.topicsLists--date {
	color: #e60012;
	font-size: 16px;
	margin-right: 24px;
	white-space: nowrap;
}
@media screen and (max-width:767px){
	.topicsLists--date {
		font-size: 12px;
		font-size: 1.2rem;
	}
}

/* title */
.topicsLists--title {
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .3s ease;
	line-height: 1.4;
}
.topicsLists__link:hover .topicsLists--title {
	color: #e60012;
}
@media screen and (max-width:767px){
	.topicsLists--title {
		font-size: 12px;
		font-size: 1.2rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		white-space: unset;
		transition: color .3s ease;
	}
}

/**
 * gauge - swiper
 */
.gaugeWrap {
	display: flex;
	align-items: center;
	width: 100%;
	height: 47px;
	position: absolute;
	bottom: 0;
	z-index: 1;
}
@media screen and (max-width:767px){
	.gaugeWrap {
		height: 35px;
		position: relative;
	}
}

.gauge {
	background-color: rgba(0,0,0,.2);
	width: 100%;
	height: 1px;
	position: relative;
}
.gauge:before {
	content: "";
	background-color: #e60012;
	width: 0;
	height: 100%;
	position: absolute;
	top: 0;
}
.gauge.is-active:before {
    animation: gauge 4.63s linear .3s;
}

/**
 * posFix__bnrLists
 */
.posFix__bnrLists {
	display: flex;
	position: absolute;
	right: 0;
	bottom: 0;
	opacity: 0;
    transition: opacity .4s ease;
}
.posFix.is-active .posFix__bnrLists {
	opacity: 1;
}
.posFix__bnrLists__item {
	height: 80px;
}
@media screen and (max-width:767px){
	.posFix__bnrLists {
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 50px;
		padding: 0 20%;
		position: relative;
		right: auto;
		bottom: auto;
	}
	.posFix__bnrLists__item {
		width: 100%;
		height: auto;
		margin-bottom: 16px;
	}
	.posFix__bnrLists__item:last-child {
		margin-bottom: 0;
	}
	.posFix__bnrLists__item img {
		width: 100%;
	}
}

/* twitter link */
.posFix__bnrLists__item.is-twLinkWrap {
	padding: 20px;
}
.posFix__bnrLists__item__twlink {
	background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
	font-size: 15px;
    height: 100%;
    padding: 0 20px;
	transition: background-color .4s ease;
}
.posFix__bnrLists__item__twlink:before {
	content: "";
	background: url(../img/common/sns/sns_tw.svg) no-repeat 0 0 / 100%;
	display: block;
	width: 20px;
	height: 20px;
	margin-right: 10px;
}
.posFix__bnrLists__item__twlink:hover {
	background-color: #e60012;
}
@media screen and (max-width:767px){
	.posFix__bnrLists__item.is-twLinkWrap {
		padding: 0;
	}
	.posFix__bnrLists__item__twlink {
		font-size: 13px;
		font-size: 1.3rem;
		padding: 8px 4px;
		white-space: nowrap;
	}
	.posFix__bnrLists__item__twlink:before {
		width: 18px;
		height: 18px;
	}
}


/* visualbg */
.fullBg:before {
	content: "";
	background: url(../img/common/bg/bg_vs2.jpg) no-repeat top center / cover;
	width: 100%;
	height: 100%;
	mix-blend-mode: screen;
	position: absolute;
	top: 0;
	z-index: 2;
}
.fullBgIn {
	background: url(../img/common/bg/bg_vs2.jpg) no-repeat top center / cover;
	width: 100%;
	height: 100%;
	mix-blend-mode: screen;
	position: absolute;
	top: 0;
	z-index: 2;
}
@media screen and (max-width:767px){
	.fullBg:before {
		background-image: url(../img/common/bg/bg_vs2.jpg);
	}
}

/** TOP MOVIE **/
.posFix__title{
	margin-top: 48px;
}
.tMovWrap{
	width: 320px;
	margin: 48px 0 24px;
	opacity: 0;
	transition: opacity .4s ease;
}
.posFix.is-active .tMovWrap {
	opacity: 1;
}
.tMov{
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	overflow: hidden;
}
.tMov a{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: .3s ease;
}
.tMov a:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #000;
	opacity: 0.45;
	transition: .3s ease;
}
.tMov a:after{
	content: '';
	position: absolute;
	top: calc(50% - 40px);
	left: calc(50% - 40px);
	width: 80px;
	padding-top: 80px;
	background: url(../img/movie/play.svg) no-repeat center / contain;
	transition: .3s ease;
}
.tMov a:hover{
	transform: scale(1.05);
}
.tMov a:hover::before,
.tMov a:hover::after{
	opacity: 0;
}

@media screen and (max-width: 767px){
	.tMovWrap{
		width: 87.2%;
	}
	.tMov a:after{
		top: calc(50% - 20px);
		left: calc(50% - 20px);
		width: 40px;
		padding-top: 40px;
	}
}

/** CURSOR **/
.cursor .cur:before{
	background-image: url(../img/movie/cursor_circle.svg);
	animation: curspin 5s linear infinite;
}