@charset "utf-8";

/** COMMON **/
.animeLists{
	display: flex;
}
.animeList{
	display: block;
}
.animeList a{
	position: relative;
}
.animeList a:after{
	content: '';
	position: absolute;
	background: url("../img/common/link_arrow.svg") no-repeat center center / contain;
	width: 3px;
	height: 3px;
	top: calc(50% - 1.5px);
	right: 15px;
}

/*-----------------------------------------------
 * Top Header
-------------------------------------------------*/
#top_header{
	width: 100%;
	height: 100vh;
	min-width: 1200px;
	min-height: 630px;
	position: relative;
}
.visual{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: url("../img/common/visual.jpg") no-repeat top right / cover;
	z-index: -1;
}
.top_logoWrap{
	width: 55.75%;
	min-width: 669px;
	padding-top: 36.3334%;
	/*padding-top: 436px;*/
	position: absolute;
	top: 50%;
	/*margin-top: 4.4584%;*/
	transform: translateY(-50%);
	left: 2.3334%;
}
.top_logo{
	width: 100%;
	min-width: 669px;
	padding-top: 56.0539%;
	position: absolute;
	top: 0;
	margin-bottom: 0;
	transform: translateY(0);
	left: 0;
}

.top_logoIn{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background: url("../img/common/logo_catchIn_base.png") no-repeat center center / contain;
	position: absolute;
	top: 70px;
	left: 0;
	right: 0;
	opacity: 0;
	transform: rotate(15deg);
	transition: .4s ease;
}
.top_tohologo{
	width: 150px;
	height: 75px;
	background: url("../img/top/tohogames.png") no-repeat center center / contain;
	position: absolute;
	top: 0;
	left: 0;
}
.top_logo.a2 .top_logoIn{
	transform: rotate(0);
	opacity: 1;
	transition-delay: .3s;
}

@media screen and (min-width: 1750px){
	#top_header{
		min-height: 680px;
	}
}

@media screen and (min-width: 1800px){
	.top_logo{
		padding-top: 562.5px;
		margin-bottom: 80.25px;
	}
	.top_logo .top_logoIn{
		width: 1003.5px;
	}

	.top_logoWrap{
		width: 1003.5px;
		padding-top: 654px;
	}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
	.top_logoWrap{
		bottom: 0;
		top: auto;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

#top_header .share_animeLinkWrap{
	position: absolute;
	top: 0;
	right: 0;
	overflow: hidden;
}
#top_header .animeLists{
	width: 100%;
	flex-direction: column;
}
#top_header .animeList{
	margin: 5px 0 5px auto;
}
#top_header .animeList a{
	width: 100%;
	padding: 4px 32px 4px 16px;
	line-height: 1;
	font-size: 12px;
	color: #fff;
	background-color: #ee87a8;
	text-decoration: none;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	position: relative;
	transition: .3s ease;
	right: 0;
}
#top_header .animeList a:hover{
	right: -10px;
}
#top_header .shareLists{
	padding-top: 18px;
	padding-right: 8px;
	padding-bottom: 19px;
}

@media screen and (max-width: 768px){
	#top_header{
		height: 0;
		padding-top: 120%;
		min-width: auto;
		min-height: auto;
	}
	.visual{
		background: url("../img/common/visual_sp.jpg") no-repeat top center / contain;
	}
	.top_logoWrap{
		width: 88.8%;
		min-width: auto;
		padding-top: 57.8667%;
		top: unset;
		bottom: 0;
		margin-bottom: 3.6%;
		left: 5.6%;
		transform: translateY(0);
	}
	.top_logo{
		width: 100%;
		padding-top: 56.006%;
		min-width: auto;
	}
	.top_tohologo{
		width: 100px;
		height: 50px;
	}	
}

.storeLinkLists{
	width: 64.873%;
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 0;
	left: 17.5635%;
	transform: translateY(20px);
	opacity: 0;
	transition: .4s ease;
}
.storeLinkLists.a2{
	opacity: 1;
	transform: translateY(0);
	transition-delay: .3s;
}
.storeLinkList{
	width: 50%;
	padding: 0 1.1959%;
}
.storeLink{
	display: block;
}
.storeLink img{
	width: 100%;
}

.point_applink{
	position: absolute;
	bottom: 0;
	left: 1.4948%;
	width: 15.3962%;
	padding-top: 16.1435%;
	background: url("../img/common/icon_pre.png") no-repeat center / contain;
	margin-bottom: 4.4844%;
	opacity: 0;
	transition: .4s ease;
}
.point_applink.a2{
	opacity: 1;
	transition-delay: .3s;
	animation: bounce 0.8s ease alternate infinite;
}
@keyframes bounce {
	0% {
		transform: translateY(0px) scale(1);
	}
	100% {
		transform: translateY(-8px) scale(0.95, 1);
	}
}

/*-----------------------------------------------
 * Contents
-------------------------------------------------*/
.contents{
	padding-top: 172px;
	margin-top: -124px;
}

@media screen and (max-width: 768px){
	.contents{
		padding-top: calc(7.4667% + 68px);
		margin-top: -68px;
	}
}

/** Z-INDEX SETTING **/
#tNews{z-index: 5;}
#introduciton{z-index: 4;}
#system{z-index: 3;}
#special{z-index: 2;}


/** INTRODUCTION **/
#introduction .contIn{
	width: 960px;
	margin: 0 auto;
}
.intro_imgWrap{
	width: 100%;
	display: flex;
}
.intro_catch{
	order: 2;
	width: 226px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.intro_catchIn{
	width: 74px;
	padding-top: 342px;
	background: url("../img/top/intro_catch.png") no-repeat center / contain;
	display: block;
}
.intro_imgIn{
	order: 1;
	width: 734px;
}
.intro_imgIn img{
	width: 100%;
}
.intro_txtWrap{
	width: 100%;
	padding-top: 24px;
}
.intro_txt{
	line-height: 1.8;
	letter-spacing: 0.1em;
	font-weight: 700;
}

@media screen and (max-width: 768px){
	#introduction .contIn{
		width: 100%;
	}
	.intro_catch{
		width: 20.5334%;
	}
	.intro_catchIn{
		width: 48.0519%;
		padding-top: 222.0779%;
	}
	.intro_imgIn{
		width: 79.4666%;
	}
	.intro_txtWrap{
		padding: 0 5.3334%;
		padding-top: 3.7334%;
	}
	.intro_txt{
		font-size: 1.2rem;
		line-height: 1.7;
	}
}


/** System **/
.howtoLists{
	width: 100%;
	display: flex;
	justify-content: center;
}
.howtoList{
	width: 300px;
	margin: 0 15px;
	display: flex;
	flex-direction: column;
}
.howto_txtWrap{
	width: 100%;
	order: 2;
	padding-top: 20px;
}
.howto_title{
	font-size: 18px;
	line-height: 2;
	font-weight: 700;
	color: #f6a1c0;
	padding-bottom: 8px;
	text-align: center;
	letter-spacing: 0.1em;
}
.howto_txt{
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.1em;
}

@media screen and (max-width: 768px){
	.howtoLists{
		justify-content: flex-start;
	}
	.howtoList{
		width: 44%;
		padding: 0 2%;
		margin: 0;
	}
	.howto_title{
		font-size: 1.4rem;
		padding-bottom: 4px;
	}
	.howto_txt{
		font-size: 1.2rem;
		line-height: 1.7;
	}
	.howto_img img{
		width: 100%;
	}
}



/** MUSIC **/
.musicTxt_head{
	text-align: center;
	margin-bottom: 32px;
}
.musicTxt_head h3{
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 16px;
	color: #f6a1c0;
}
.musicTxt_head h3 span{
	display: inline-block;
	position: relative;
}
.musicTxt_head h3 span:after{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 1px;
	background-color: #f6a1c0;
}
.musicTxt_head p{
	line-height: 2;
	font-weight: 700;
}
.musicLists{
	width: 100%;
	display: flex;
	margin: 0 auto;
}
.musicList{
	width: 300px;
	margin: 0 15px;
	display: flex;
	flex-direction: column;
}
.music_txtWrap{
	width: 100%;
	order: 2;
	padding-top: 20px;
}
.music_title{
	font-size: 18px;
	line-height: 2;
	font-weight: 700;
	color: #f6a1c0;
	padding-bottom: 8px;
	text-align: center;
	letter-spacing: 0.05em;
}
.music_txt{
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
}
.music_img{
	overflow: hidden;
	border: 4px solid #f6a1c0;
	border-radius: 30px;
}
.musicTxt_foot{
	font-size: 20px;
	line-height: 2;
	font-weight: 700;
	margin-top: 48px;
	text-align: center;
	color: #f6a1c0;
}
.musicTxt_foot span{
	display: inline-block;
	position: relative;
}
.musicTxt_foot span:after{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 1px;
	background-color: #f6a1c0;
}
@media screen and (min-width: 768.1px){
	.pc_space{
		display: inline-block;
		width: 1em;
	}
}

@media screen and (max-width: 768px){
	.pc_space{
		display: none;
	}
	.musicTxt_head{
		margin-bottom: 0;
		padding-bottom: 5.0667%;
	}
	.musicTxt_head h3{
		font-size: 1.8rem;
	}
	.musicTxt_head p{
		font-size: 1.2rem;
	}
	.musicList{
		width: 44%;
		padding: 0 2%;
		margin: 0;
	}
	.music_title{
		font-size: 1.4rem;
		padding-bottom: 4px;
	}
	.music_txt{
		font-size: 1.2rem;
		line-height: 1.7;
	}
	.music_img{
		border-width: 0.5334vw;
		border-radius: 4vw;
	}
	.music_img img{
		width: 100%;
	}
	.musicTxt_foot{
		font-size: 1.6rem;
		margin-top: 0;
		padding-top: 5.0667%;
	}
}





/** Special **/
.specialWrap{
	width: 960px;
	margin: 0 auto;
}
.specialBtnLists{
	width: 100%;
	display: flex;
	justify-content: center;
}
.specialBtnList{
	width: 228px;
	height: 67px;
	position: relative;
	margin: 0 11px;
	padding: 0 3px 4px 0;
}
.specialBtnList:before{
	content: '';
	position: absolute;
	top: 4px;
	left: 3px;
	width: calc(100% - 4px);
	height: calc(100% - 3px);
	background-color: #e83e16;
	border-radius: 40px;
}
.specialBtn{
	width: 100%;
	height: 100%;
	background-color: #fff;
	border: 2px solid #e83e16;
	border-radius: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	transition: .3s ease;
	color: #e83e16;
	font-size: 20px;
	letter-spacing: 0;
	font-weight: 500;
	font-family: 'Jost', sans-serif;
	position: relative;
}
.specialBtn.is-active{
	background-color: #ffd05e;
}
.specialBtn:hover{
	transform: translate(1.5px, 2px);
}

.specialInContent{
	width: 758px;
	margin: 24px auto 0;
}

.special_movieList{
	display: flex;
	width: 758px;
	padding: 0 12px;
	flex-direction: column;
}
.special_contTtl{
	font-size: 18px;
	line-height: 2;
	font-weight: 700;
	color: #f6a1c0;
	padding-bottom: 8px;
	text-align: center;
	letter-spacing: 0.1em;
}
.special_contFrame{
	width: 728px;
	height: 413px;
	position: relative;
	border-radius: 30px;
	border:4px solid #f6a1c0;
}
.special_contFrame:before{
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 728px;
	height: 413px;
	background-color: #f6a1c0;
	border-radius: 30px;
}
.special_contInFrame{
	position: absolute;
	width: 100%;
	top: 0;
	right: 0;
	padding-top: 56.25%;
	border-radius: 26px;
	overflow: hidden;
	z-index: 1;
}
.special_contInFrame iframe{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow-x: hidden;
}

#special_movie{
	position: relative;
}
#special_movie .special_contTtl{
	order: 2;
	padding-top: 28px;
}
#special_movie .special_contFrame{
	order: 1;
}

.swiper_arrowWrap{
	position: absolute;
	top: 0;
	left: -60px;
	right: -60px;
	height: 417px;
}
.swiper_button_next,.swiper_button_prev{
	position: absolute;
	top: calc(50% - 20px);
	width: 40px;
	padding-top: 40px;
	-webkit-mask-image: url("../img/common/arrow_std.svg");
	mask-image: url("../img/common/arrow_std.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size:contain;
	background-color: #f6a1c0;
	transition: .3s ease;
}
.swiper_button_next.swiper-button-disabled,.swiper_button_prev.swiper-button-disabled{
	opacity: 0.45;
	pointer-events: none;
}
.swiper_button_next{
	right: 10px;
	transform: rotate(90deg);
}
.swiper_button_next:hover{
	right: 0;
}
.swiper_button_prev{
	left: 10px;
	transform: rotate(-90deg);
}
.swiper_button_prev:hover{
	left: 0;
}

@media screen and (max-width: 768px){
	.specialWrap{
		width: 100%;
	}
	.specialBtnList{
		width: 114px;
		height: 34px;
		margin: 0 6px;
		padding: 0 2px 4px 0;
	}
	.specialBtnList:before{
		top: 4px;
		left: 2px;
		width: calc(100% - 4px);
		height: calc(100% - 3px);
	}
	.specialBtn{
		font-size: 1.2rem;
	}
	.specialBtn:hover{
		transform: translate(1px, 2px);
	}
	.specialInContent{
		width: 94.6667%;
		margin: 12px  auto 0;
	}
	.special_movieList{
		width: 100%;
		padding: 0 2.817%;
	}
	.special_contTtl{
		font-size: 1.4rem;
	}
	.special_contFrame{
		width: 98.9553%;
		height: 0;
		padding-top: 54.4777%;
		border-width: 0.5334vw;
		border-radius: 4vw;
	}
	.special_contFrame:before{
		top: 0.5334vw;
		left: 0.5334vw;
		width: 88.4vw;
		height: 0;
		padding-top: 49.7334vw;
		border-radius: 4vw;
	}
	.special_contInFrame{
		border-radius: 3.4667vw;
	}
	#special_movie .special_contTtl{
		padding-top: 2.9851%;
	}
	.swiper_arrowWrap{
		left: 2.817%;
		right: 2.817%;
		top: unset;
		bottom: 0;
		height: auto;
	}
	.swiper_button_next,.swiper_button_prev{
		width: 28px;
		padding-top: 28px;
		top: unset;
		bottom: 8px;
		z-index: 2;
	}
	.swiper_button_next{right: 0;}
	.swiper_button_prev{left: 0;}
}




/** Notice **/
.noticeImage{
	width: 100%;
	text-align: center;
}
.noticeImage img{
	max-width: 100%;
}