@charset "utf-8";

/**
* TOP HEADER
**/
@media screen and (min-width: 768px){
	.headerNav .logo{
		display: none;
	}
}

.cont_h2{
	width: 100%;
	position: relative;
	line-height: 1;
	letter-spacing: 0.025em;
	color: #000;
}
.conth2_en{
	display: inline-block;
	position: relative;
	line-height: 0.9167;
	font-family: 'Amiri', serif;
	font-size: 48px;
	font-weight: 400;
	padding-right: 104px;
}
.conth2_en:after{
	content: '';
	width: 80px;
	height: 64px;
	position: absolute;
	right: 0;
	top: calc(50% - 32px);
	background: url(../img/common/icon_h2_deco.svg) no-repeat center / contain;
}
.conth2_ja{
	display: block;
	font-size: 16px;
	line-height: 1;
	margin-top: 12px;
}

@media screen and (max-width: 767px){
	.conth2_en{
		font-size: var(--sp-size-72);
		padding-right: min(16vw, 120px);
	}
	.conth2_en:after{
		width: var(--sp-size-96);
		height: min(10.2667vw, 77px);
		top: calc(50% - min(5.1334vw, 38.5px));
	}
	.conth2_ja{
		font-size: var(--sp-size-24);
		margin-top: var(--sp-size-12);
	}
}


/**
* #firstview
**/
#firstview{
	min-height: min(53.3334vw,640px);
	padding-bottom: 80px;
}
#firstview:before{
	content: '';
	position: absolute;
	top: 9px;
	right: 9px;
	bottom: 9px;
	left: 9px;
	background-image: url(../img/top/thead_frm_tl.svg),url(../img/top/thead_frm_tr.svg),url(../img/top/thead_frm_bl.svg),url(../img/top/thead_frm_br.svg);
	background-repeat: no-repeat;
	background-size: min(16.5834vw, 199px) min(16.5834vw, 199px);
	background-position: top left, top right, bottom left, bottom right;
}
.logoWrap{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 480px;
	width: 48%;
	z-index: 3;
}
.logoInWrap{
	position: sticky;
	width: 100%;
	height: max(100vh, 640px);
	max-height: 100%;
	min-height: 640px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	top: 0;
	padding-top: 30%;
	padding-bottom: 51.6667%;
}
.logoIn{
	width: 100%;
}
#firstview .logo{
	width: 66.6667%;
	max-width: 400px;
	padding-top: 79.1667%;
	filter: drop-shadow(0 0 2px #FFF) drop-shadow(0 0 2px #FFF) drop-shadow(0 0 4px #FFF);
	margin: 0 auto 32px;
}
@media screen and (max-width: 1500px){
	#firstview .logo{
		padding-top: 450px;
	}
}

.firstview_onair{
	width: 414px;
	padding-top: 37px;
/*	width: 71.255%;
	max-width: 427.5px;
	padding-top: 7.5%;*/
	width: 76.25%;
	max-width: 621px;
	padding-top: 7.7084%;
	background: url(../img/top/top_onair.svg) no-repeat center / contain;
	filter: drop-shadow(0 0 4px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 4px #FFF);
	margin: 0 auto;
}


.btn_toContents{
	width: 132px;
	height: 60px;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 40px;
	margin: 0 auto;
}
.toContents__link{
	display: block;
	height: 60px;
	text-align: center;
	position: relative;
	color: #000;
	text-decoration: none;
}
.toContents__link:before{
	content: '';
	width: 100%;
	padding-top: 40px;
	position: absolute;
	top: 20px;
	left: 0;
	background: url(../img/common/arrow_b.svg) no-repeat center/ contain;
	animation:toContscrAni 3s cubic-bezier(0.6, 0.1, 0.46, 0.99) infinite;
	transition: .3s ease;
}
@media screen and (min-width: 768px){
	.btn_toContents a:hover:before{
		top: 25px;
	}
}

@keyframes toContscrAni {
	0%,50%,100% {
		transform:translateY(0);
		opacity:1;
	}
	75% {
		transform:translateY(5px);
		opacity:0;
	}
	76% {
		transform:translateY(-5px);
		opacity:0;
	}
	76% {
		transform:translateY(-5px);
		opacity:0;
	}
}


.toContents__link span{
	position: relative;
	display: inline-block;
	line-height: 1;
	font-size: 16px;
}






.visualWrap{
	width: 600px;
	width: 60%;
	padding-top: 80px;
	/*padding-top: 8%;*/
	margin: 0 8% 0 32%;
	position: relative;
	z-index: 2;
}
.visualLists{
	width: 100%;
	padding-top: 848px;
	padding-top: 141.3334%;
	position: relative;
}
.visualList{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0!important;
}
.visualList.swiper-slide-active{
	opacity: 1!important;
}
.visualImage{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.visualImage img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mv3{
	overflow: hidden;
}
.mv3_p1,
.mv3_p2{
	opacity: 0;
	transform: scale(1.2);
	filter: blur(4px);
	transition: opacity .8s ease, transform 1s cubic-bezier(.22,.6,.52,1), filter 1.1s cubic-bezier(.22,.6,.52,1);
}
body.--loaded  .visualList.swiper-slide-active .mv3_p1{
	transition-delay: .4s;
	opacity: 1;
	transform: scale(1);
	filter: blur(0);
}
body.--loaded  .visualList.swiper-slide-active .mv3_p2{
	transition-delay: 0.8s;
	opacity: 1;
	transform: scale(1);
	filter: blur(0);
}



.visualCatch{
	position: absolute;
}
.visualCatch img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: center
}
.mv1_catch{
	width: 44px;
	padding-top: 436px;
	right: 42px;
	top: 0;
	margin-top: 80px;
	width: 7.3334%;
	padding-top: 72.6667%;
	right: 7%;
	margin-top: 13.3334%;
	filter: drop-shadow(0 0 2px #4c2719) drop-shadow(0 0 4px #4c2719);
}
.mv2_catch{
	width: 44px;
	padding-top: 436px;
	right: 42px;
	bottom: 0;
	margin-bottom: 30px;
	width: 7.3334%;
	padding-top: 72.6667%;
	right: 7%;
	margin-top: 13.3334%;
	filter: drop-shadow(0 0 2px #4c2719) drop-shadow(0 0 4px #4c2719);
}

.visualSelectorListsWrap{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	height: 80px;
}
.visualSelectorLists.swiper-pagination-bullets.swiper-pagination-horizontal{
	display: flex;
	justify-content: center;
	height: 24px;
	flex-shrink: 0;
	width: 100%;
	bottom: unset;
	left: unset;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.visualSelectorList{
	width: 24px;
	height: 24px;
	margin: 0 8px;
	background: unset;
	opacity: 1;
}
.visualSelectorList_link{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.visualSelectorList_link:after {
	content: '';
	position: absolute;
	top: calc(50% - 1px);
	left: calc(50% - 1px);
	width: 2px;
	height: 2px;
	background-color: #000;
	transition: .3s ease;
	border-radius: 50%;
}
.visualSelectorList svg{
	margin: 0;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(-90deg);
}
.visualSelectorList svg circle{
	cx: 12px;
	cy: 12px;
	r: 11px;
	fill: transparent;
	stroke-width: 1px;
}
.visualSelectorList svg.visualSelectorList_link__circle{
	z-index: 2;
	opacity: 0;
}
.visualSelectorList svg.visualSelectorList_link__circle circle{
	stroke: var(--main-color-red);
	animation: pCircle-out_mv 10s forwards;
}
.visualSelectorList svg.visualSelectorList_link__bg circle{
	stroke: rgba(0,0,0,20%);
}

@keyframes pCircle_mv {
	0% {
		stroke-dasharray: 0 76; /*-- 円の直径(24)x3.14 --*/
	}
	100% {
		stroke-dasharray: 76 76;
	}
}
@keyframes pCircle-out_mv {
	0% {
		stroke-dasharray: 76 76; /*-- 円の直径(24)x3.14 --*/
	}
	100% {
		stroke-dasharray: 0 76;
	}
}

.visualSelectorList.swiper-pagination-bullet-active .visualSelectorList_link:after {
	top: calc(50% - 2px);
	left: calc(50% - 2px);
	width: 4px;
	height: 4px;
	background-color: var(--main-color-red);
}
.visualSelectorList.swiper-pagination-bullet-active svg.visualSelectorList_link__circle {
	opacity: 1;
}
.visualSelectorList.swiper-pagination-bullet-active svg.visualSelectorList_link__circle circle{
	animation: pCircle_mv 16s forwards;
}


.firstview_engttl{
	width: 100%;
	height: 122px;
	background: url(../img/top/thead_engttl.png) no-repeat;
	background-repeat: repeat-x;
	animation: firstview_engttl 30s linear infinite;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-bottom: 160px;
}
@keyframes firstview_engttl{
	from {
		background-position:0 0;
	}
	to {
		background-position: -1536px 0;
	}
}


@media screen and (max-width: 767px){
	#firstview{
		min-height: unset;
		display: flex;
		flex-direction: column;
		padding-bottom: 9.6%;
	}
	#firstview:before{
		top: var(--sp-size-12);
		right: var(--sp-size-12);
		bottom: var(--sp-size-12);
		left: var(--sp-size-12);
		background-size: min(25.6vw, 192px) min(25.6vw, 192px);
	}
	.firstviewIn{
		order: 2;
	}
	.logoWrap{
		position: relative;
		width: 100%;
		margin-top: max(-32%, -240px);
	}
	.logoInWrap{
		position: unset;
		height: auto;
		max-height: unset;
		min-height: unset;
		padding-top: 0;
		padding-bottom: 0;
		display: block;
	}
	#firstview .logo{
		width: min(43.0667%,323px);
		padding-top: min(51.2%, 384px);
		max-width: unset;
		margin-bottom: min(6.6667%, 50px);
		filter: drop-shadow(0 0 6px #FFF) drop-shadow(0 0 5px #FFF) drop-shadow(0 0 4px #FFF) drop-shadow(0 0 6px #FFF);
	}
	.firstview_onair{
		width: min(66.1334%, 496px);
		max-width: unset;
		padding-top: min(6%, 45px);
		filter: drop-shadow(0 0 6px #FFF) drop-shadow(0 0 5px #FFF) drop-shadow(0 0 4px #FFF) drop-shadow(0 0 6px #FFF);
	}
	.btn_toContents{
		width: min(21.0667%, 158px);
		height: var(--sp-size-72);
		position: unset;
		bottom: 0;
		margin: min(6.6667%, 50px) auto 0;
	}
	.toContents__link{
		height: var(--sp-size-72);
	}
	.toContents__link:before{
		padding-top: var(--sp-size-48);
		top: var(--sp-size-24);
	}
	.toContents__link span{
		font-size: var(--sp-size-20);
	}

	.mv2_catch{
		margin-bottom: var(--sp-size-28);
	}

	.visualWrap{
		width: 100%;
		padding-top: 12.8%;
		padding-right: 9.6%;
		padding-left: 9.6%;
		margin: 0;
	}
	.visualSelectorListsWrap{
		height: var(--sp-size-96);
	}

	.firstview_engttl{
		height: 61px;
		margin-bottom: calc(49.6% - 30.5px);
		background-size: 768px;
	}
	@keyframes firstview_engttl{
		from {
			background-position:0 0;
		}
		to {
			background-position: -768px 0;
		}
	}
}

/***
** MOVIE
***/
#movie{
	padding: 80px 0;
}
.movieWrap{
	width: 84%;
	margin: 0 auto;
}
.movieInWrap{
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	overflow: hidden;
}
.movieInWrap:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #ff3560, #ffef3b);
	mix-blend-mode: multiply;
	z-index: 2;
	pointer-events: none;
}
.movieInWrap:after {
	content: '';
	position: absolute;
	top: 6px;
	right: 6px;
	bottom: 6px;
	left: 6px;
	background-image: url(../img/top/tmovie_frm.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	z-index: 3;
	pointer-events: none;
}
.movieInWrap iframe{
	width: 100%;
	height: 200%;
	position: absolute;
	top: -50%;
	left: 0;
}
.btn_moviePlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
}
@keyframes rotate360{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
.btn_moviePlay:before{
	content: '';
	position: absolute;
	width: 96px;
	height: 96px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: url(../img/common/mov_play_frm.svg) no-repeat center / contain;
	animation: rotate360 10s linear infinite;
	transition: .3s ease;
}
.btn_moviePlay:after{
	content: '';
	position: absolute;
	width: 96px;
	height: 96px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: url(../img/common/mov_play.svg) no-repeat center / contain;
}

.btn_moviePlay:hover::before{
	animation-play-state: paused;
}

@media screen and (max-width: 767px){
	#movie{
		padding: 6.4% 0;
	}
	.movieWrap{
		width: 87.2%;
	}
	.movieInWrap:after {
		top: min(1.2vw, 9px);
		right: min(1.2vw, 9px);
		bottom: min(1.2vw, 9px);
		left: min(1.2vw, 9px);
	}
	.btn_moviePlay:before,
	.btn_moviePlay:after{
		width: min(15.4667vw, 116px);
		height: min(15.4667vw, 116px);
	}
}




/***
** INTRODUCTION
***/
#introduction{
	width: calc(100% + 200px);
	padding: 160px 8% 160px calc(200px + 8%);
	margin-left: -200px;
	background-color: #4c2719;
	background-image: url(../img/common/bgbr_ptn.png);
	background-repeat: repeat;
	color: #fff;
}
@media screen and (min-width: 768px){
	#introduction:before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 200px;
		background-color: rgba(255,255,255,80%);
	}
}

#introduction .cont_h2{
	color: #FFF;
}
#introduction .contentIn{
	min-height: min(61.91664vw, 743px);
}
.introductionTxt{
	font-size: 20px;
	line-height: 3;
	padding: 0 19.0477%;
	position: relative;
}
.introductionTxt span.red{
	color: #f4889f;
}
.introductionTxt span.min{
	font-size: 16px;
}
.intro_ruby rt{
	transform: translateY(-5px);
}

.intro_chara_l{
	position: absolute;
	bottom: 0;
	left: -25px;
	width: 179px;
	padding-top: 641px;
	opacity: 0.6;
	width: min(21.3096%, 179px);
	padding-top: min(76.3096%, 641px);
	left: -2.9762%;
}
.intro_chara_l img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left bottom;
}
.intro_chara_r{
	position: absolute;
	bottom: 0;
	right: -40px;
	width: 199px;
	padding-top: 743px;
	opacity: 0.6;
	width: min(23.6905%, 199px);
	padding-top: min(88.4524%, 743px);
	right: max(-4.7619%, -40px);
}
.intro_chara_r img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right bottom;
}

@media screen and (max-width: 960px){
	.introductionTxt{
		padding: 0;
	}
	.intro_charaWrap{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin-top: 32px;
	}
	.intro_chara_l{
		position: relative;
		left: unset;
		margin-right: 48px;
	}
	.intro_chara_r{
		position: relative;
		right: unset;
		margin-left: 48px;
	}
}


@media screen and (max-width: 767px){
	#introduction{
		width: 100%;
		padding: 12.8% 6.4% 12.8% 6.4%;
		margin-left: 0;
	}
	#introduction .contentIn{
		min-height: unset;
	}
	.introductionTxt{
		padding: 0;
		width: 100%;
		font-size: var(--sp-size-24);
	}
	.intro_ruby rt{
		transform: translateY(var(--sp-size-12));
	}
	.intro_charaWrap{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin-top: var(--sp-size-32);
	}
	.intro_chara_l{
		position: relative;
		left: unset;
		width: min(23.8667vw, 179px);
		padding-top: min(85.4667vw, 641px);
		margin-right: min(7.2vw, 54px);
	}
	.intro_chara_r{
		position: relative;
		width: min(26.5334vw, 199px);
		padding-top: min(99.0667vw, 743px);
		right: unset;
		margin-left: min(7.2vw, 54px);;
	}
}


/***
** UPDATE
***/
#update{
	padding: 160px 8%;
}
.updateCont{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.updateContIn{
	width: 380px;
	width: 45.2381%;
}

@media screen and (max-width: 960px){
	.updateCont{
		display: block;
	}
	.updateContIn{
		width: 100%;
	}
}



.newsLists{
	width: 100%;
	display: block;
}
.newsList{
	width: 100%;
	margin-bottom: 48px;
}
.newsList:last-child{
	margin-bottom: 0;
}
.newsList__link{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	padding: 0 0 24px 32px;
	text-decoration: none;
}
.newsList__link:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 16px;
	background: url(../img/top/icon_staffcast.svg) no-repeat center/ contain;
}

.news__date{
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: var(--main-color-red);
	padding-bottom: 12px;
}
.news__date time{
	display: inline-block;
	line-height: 1;
}
.news__title{
	width: calc(100% + 6px);
	height: calc(100% - 32px);
	min-height: 64px;
	padding-right: 46px;
	font-size: 16px;
	line-height: 2;
	position: relative;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.newsList__link:hover .news__title{
	color: var(--main-color-red);
}
.news__title:after{
	content: '';
	width: 16px;
	height: 40px;
	position: absolute;
	top: calc(50% - 20px);
	right: 6px;
	background: url(../img/common/arrow_r.svg) no-repeat center / contain;
	transition: .4s ease;
}

@media screen and (min-width: 768px){
	.newsList__link:hover .news__title:after{
		right: 0px;
	}
}
.newsline{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 12px;
}
.newsline:before{
	content: '';
	position: absolute;
	top: 0;
	right: 10px;
	left: 10px;
	bottom: 0;
	height: 1px;
	margin: auto;
	background-color: #000;
}
.newsline:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/common/icon_rhombus.svg), url(../img/common/icon_rhombus.svg);
	background-repeat: no-repeat;
	background-position: left, right;
	background-size: 12px;
}


@media screen and (max-width: 767px){
	#update{
		padding: 12.8% 6.4%;
	}
	.updateCont{
		flex-direction: column;
	}
	.updateContIn{
		width: 100%;
	}
	.newsLists{
		display: block;
	}
	.newsList{
		width: 100%;
		height: min(21.7334vw, 163px);
		margin-bottom: var(--sp-size-24);
	}
	.newsList__link{
		padding-bottom: var(--sp-size-40);
		padding-left: var(--sp-size-48);
	}
	.newsList__link:before{
		width: var(--sp-size-24);
		height: var(--sp-size-24);
	}
	.news__date{
		font-size: var(--sp-size-24);
		padding-bottom: var(--sp-size-16);
	}
	.news__title{
		width: 100%;
		height: calc(100% - var(--sp-size-24));
		padding-right: var(--sp-size-48);
		font-size: var(--sp-size-24);
		min-height: unset;
	}
	.news__title:after{
		width: var(--sp-size-20);
		height: var(--sp-size-48);
		top: calc(50% - var(--sp-size-24));
	}
	.newsline{
		height: var(--sp-size-24);
	}
	.newsline:before{
		right: var(--sp-size-20);
		left: var(--sp-size-20);
		height: var(--sp-size-2);
	}
	.newsline:after{
		background-size: var(--sp-size-24);
	}
}

/** TWITTER **/
.twitterWidgetWrap{
	width: 100%;
	height: 444px;
	position: relative;
	background-image: url(../img/top/tw_frame_r.svg), url(../img/top/tw_frame_l.svg);
	background-repeat: no-repeat;
	background-position: top right, top left;
	padding: 40px;
}

.twitterWidgetWrap:before{
	content: '';
	position: absolute;
	top: 0;
	right: 40px;
	bottom: 0;
	left: 40px;
	background-image: url(../img/top/tw_frame_t.svg), url(../img/top/tw_frame_b.svg);
	background-repeat: repeat-x;
	background-position: top center, bottom center;
}
.twitterWidget{
	width: 100%;
	height: 100%;
	overflow-x: auto;
	position: relative;
}
.twitterWidgetWrap iframe{
	width: 100%!important;
}
.btn_twilink a span{
	padding: 0 30px;
	position: relative;
}
.btn_twilink a span:after{
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	top: calc(50% - 10px);
	right: 0;
	-webkit-mask: url(../img/common/icon_tw.svg) no-repeat center / contain;
	mask: url(../img/common/icon_tw.svg) no-repeat center / contain;
	background-color: #fff;
}

@media screen and (max-width: 960px){
	.twitterWidgetWrap{
		margin-top: 64px;
	}
}


@media screen and (max-width: 767px){
	.twitterWidgetWrap{
		padding: 40px;
		margin-top: var(--sp-size-72);
	}
	.btn_twilink{
		margin-top: var(--sp-size-48);
	}
	.btn_twilink a span{
		padding: 0 var(--sp-size-48);
	}
	.btn_twilink a span:after{
		width: var(--sp-size-24);
		height: var(--sp-size-24);
		top: calc(50% - var(--sp-size-12));
	}
}



/**--------------------------
***  LOADING
--------------------------**/
/** LOADING **/
#loading{
	position: fixed;
	top: 0;
	width: 100%;
	left: 0;
	height: 100%;
	z-index: 10000;
	pointer-events: none;
}
.loadWrap{
	display: flex;
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #fff;
}
.load_img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-size: cover;
}
.load_img_lWrap{
	width: 33.3334%;
	height: 100%;
	position: relative;
}
.load_img_lWrap:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	transition: .6s ease;
}
.load_img_l{
	background-image: url(../img/top/loading/load_mv_l.jpg);
	background-position: top right;
}

@media screen and (max-width: 767px){
	.load_img_lWrap{
		width: 26.6667%;
	}
}

.load_txtWrap{
	width: 33.3332%;
	height: 100%;
	position: relative;
	opacity: 0;
	transition: .3s ease;
}

.load_txtWrap:before{
	content: '';
	position: absolute;
	top: 9px;
	right: 9px;
	bottom: 9px;
	left: 9px;
	background-image: url(../img/top/thead_frm_tl.svg),url(../img/top/thead_frm_tr.svg),url(../img/top/thead_frm_bl.svg),url(../img/top/thead_frm_br.svg);
	background-repeat: no-repeat;
	background-size: 100px 100px;
	background-position: top left, top right, bottom left, bottom right;
	filter: blur(8px);
	transition: .6s ease;
}
.load_txt{
	width: 24%;
	padding-top: 56%;
	position: absolute;
	top: 50%;
	margin-top: -28%;
	left: 38%;
}
.load_txt01{
	position: absolute;
	top: 0;
	right: 0;
	width: 32.2917%;
	padding-top: 177.0834%;
	background: url(../img/top/loading/load_txt01.svg) no-repeat top center / contain;
	transition: .6s ease;
	transform: translateY(-16px);
	filter: blur(8px);
}
.load_txt02{
	position: absolute;
	top: 0;
	left: 0;
	width: 32.2917%;
	padding-top: 230.2084%;
	background: url(../img/top/loading/load_txt02.svg) no-repeat top center / contain;
	transition: .6s ease;
	transform: translateY(16px);
	filter: blur(8px);
}

@media screen and (max-width: 767px){
	.load_txtWrap{
		width: 46.6666%;
	}
	.load_txtWrap:before{
		top: 1.2vw;
		right: 1.2vw;
		bottom: 1.2vw;
		left: 1.2vw;
		background-size: 64px 64px;
	}
	.load_txt{
		width: 36%;
		padding-top: 84%;
		margin-top: -42%;
		left: 32%;
	}
}


.load_img_rWrap{
	width: 33.3334%;
	height: 100%;
	position: relative;
}

@media screen and (max-width: 767px){
	.load_img_rWrap{
		width: 26.6667%;
	}
}

.load_img_rWrap:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	transition: .6s ease;
}
.load_img_r{
	background-image: url(../img/top/loading/load_mv_r.jpg);
	background-position: top left;
}
.load_l03{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.load_03_l{
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	overflow: hidden;
}
.load_03_l:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #4c2719;
	transform: translateX(-100%);
	transition: .6s ease-in-out;
}
.load_03_r{
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	overflow: hidden;
}
.load_03_r:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #4c2719;
	transform: translateX(100%);
	transition: .6s ease-in-out;
}

/* L01 */
.l01 .load_txtWrap{
	opacity: 1;
}
.load_txtWrap:before{
	filter: blur(0px);
}
.l01 .load_txt01{
	transform: translateY(0px);
	filter: blur(0px);
}
.l01 .load_txt02{
	transform: translateY(0px);
	filter: blur(0px);
}

/* L01 */
.l01 .load_img_lWrap:after{
	transform: translateY(-100%);
}
.l01 .load_img_rWrap:after{
	transform: translateY(100%);
}

/* L03 */
.l03 .load_txtWrap{
	filter: blur(4px);
}
.l03.load_txtWrap:before{
	opacity: 0;
}
.l03 .load_txt01{
	opacity: 0;
	transform: translateY(16px);
}
.l03 .load_txt02{
	opacity: 0;
	transform: translateY(-16px);
}
.l03 .load_03_l:before{
	transform: translateX(0%);
}
.l03 .load_03_r:before{
	transform: translateX(0%);
}

/* L04 */
.l04 .load_03_l:before{
	transform: translateX(-100%);
}
.l04 .load_03_r:before{
	transform: translateX(100%);
}


/* L05 */
.mv1.l05, .mv2.l05{
	transform: scale(1.05);
}
#firstview .logo{
	transition: .8s ease-in-out;
}
#firstview .logo.l05{
	filter: blur(8px);
	opacity: 0;
}
.firstview_onair{
	transition: .4s ease-in-out;
}
.firstview_onair.l05{
	opacity: 0;
	filter: 8px;
	transform: translateY(10px);
}
.mv2_catch,.mv1_catch{
	transition: .8s ease-in-out;
}
.mv2_catch.l05,
.mv1_catch.l05{
	opacity: 0;
	filter: blur(8px);
}

/** VISITED **/
body.is-visited #loading .loadWrap{
	display: none;
}
body.is-visited #loading .load_03_l:before{
	transform: translateX(0%);
	transition-duration: 0s;
}
body.is-visited #loading .load_03_r:before{
	transform: translateX(0%);
	transition-duration: 0s;
}
body.is-visited #loading.l04 .load_03_l:before{
	transform: translateX(-100%);
	transition-duration: .6s;
}
body.is-visited #loading.l04 .load_03_r:before{
	transform: translateX(100%);
	transition-duration: .6s;
}

/** Transtion **/
body.is-transition #loading.l04 .load_03_l:before{
	transform: translateX(0%);
	transition-duration: .4s;
}
body.is-transition #loading.l04 .load_03_r:before{
	transform: translateX(0%);
	transition-duration: .4s;
}


/*-----------------------------------------------
 * Rellax
-------------------------------------------------*/
#bgp01{
	opacity: 60%;
}
#bgp02{
	opacity: 40%;
}
#bgp03{
	opacity: 20%;
}