@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');


body{
	margin: 0;
	padding: 0;
	background: #030606;
	font-family: 'Noto Sans JP', sans-serif;
	}

#mainContainer{
	width: 100%;
	margin: auto;
	}

.Anser header,main{padding: 0; display: block;}
.Anser main{padding: 0 1.5em;}
.main section{padding: 0 1.5em;}
@media only screen and (max-width: 480px){.main section{padding: 0 1em;}}

h3,h4,p,li,label{letter-spacing: 2px;}
main ul{margin: 0 1em 0 1.85em; padding: 0;}
main li{padding-bottom: 0.85em;}
p,li{font-size: 1em; line-height: 1.6em; color: #FFF;}
a{display: block; text-decoration: none; outline: none;}
img{max-width: 100%;}
.main header,#Story p,#Nazo div a,.LinkButton{font-family: 'Noto Serif JP', serif;}

.small{font-size: 0.8em;}
@media only screen and (max-width: 480px){.small{font-size: 0.7em;}}

nav a:hover,#Nazo div a:hover,#SNS_share li:hover,footer a:hover{
	-webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all  0.8s ease;
	}

.main section{padding-bottom: 10%;}
section#MainVisual{padding-bottom: 20%;}
@media only screen and (max-width: 480px){section#SNS_share{padding: 10% 0 20%!important;}}
section#Story,section#Character,div#Kit,div#Nazo,section#Practice,section#Twitter{margin-top: -100px; padding-top: 100px;}



/*--------Header--------*/
.logo{display: flex; justify-content: space-between;}
.logo .collabo{flex: 0 1 35%;}
.gameTitle{flex:0 1 27%;}

@media only screen and (max-width: 480px){.logo .collabo{flex: 0 1 50%;} .gameTitle{flex:0 1 40%;}}



/*---------- menu ----------*/
.main header {height: 100%; overflow-x: hidden; position: relative;}

.overlay {
	width: 0;
	height: 0;
	content: "";
	display: block;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	opacity: 0;
	transition: opacity .5s;
	}

	.overlay.open {
		width: 100%;
		height: 100%;
		opacity: 1;
		}

.menu-trigger {
	display: inline-block;
	width: 90px;
	height: 80px;
	vertical-align: middle;
	cursor: pointer;
	position: fixed;
	top: 30px;
	right: 30px;
	z-index: 100;
	transform: translateX(0);
	transition: transform .5s;
	background: url("../images/event/shironeko_mirror_menu.png") no-repeat center;
	background-size: contain;
	}

	.menu-trigger.active {transform: translateX(-250px);}

 .menu-trigger span {
	 width: 36px;
	 height: 4px;
	 display: inline-block;
	 box-sizing: border-box;
	 position: absolute;
	 left: 27px;
	 background-color: #FFF;
	 }

.menu-trigger.active span {background-color: #fff;}
	.menu-trigger span:nth-of-type(1) {top: 26px;}
	.menu-trigger.active span:nth-of-type(1) {transform: translateY(12px) rotate(-45deg);}

	.menu-trigger span:nth-of-type(2) {top: 38px;}
	.menu-trigger.active span:nth-of-type(2) {opacity: 0;}
	
	.menu-trigger span:nth-of-type(3) {top: 50px;}
	.menu-trigger.active span:nth-of-type(3) {transform: translateY(-12px) rotate(45deg);}


@media only screen and (max-width: 860px){
	.menu-trigger {width: 60px;	height: 53px; top: 15px; right: 20px;}
	.menu-trigger span {width: 24px; height: 3px; left: 18px;}
	.menu-trigger span:nth-of-type(1) {top: 17px;}
	.menu-trigger.active span:nth-of-type(1) {transform: translateY(7px) rotate(-45deg);}
	.menu-trigger span:nth-of-type(2) {top: 26px;}
	.menu-trigger span:nth-of-type(3) {top: 35px;}
	.menu-trigger.active span:nth-of-type(3) {transform: translateY(-11px) rotate(45deg);}
	}

@media only screen and (max-width: 480px){.menu-trigger {top: 10px; right: 10px;}}
@media only screen and (max-width: 380px){.menu-trigger {top: 5px; right: 5px;}}



nav {
	width: 250px;
	height: 100%;
	padding-top: 30px;
	background-color: rgb(0,0,0,0.8);
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;
	transform: translate(250px);
	transition: all .5s;
	}

	nav.open {transform: translateZ(0);}

	nav ul {padding: 0 1em; list-style: none;}
	nav li {text-align: center; border-bottom: solid 1px #5e5e5e;}
	nav a{padding: 15px 0; color: #FFF;}
	nav a:hover{background: rgba(0,199,255,0.2);}
	header > * {box-sizing: border-box;}





/*--------MainVisual--------*/
#MainVisual{
	padding-top: 45%;
	background: url("../images/event/shironeko_mirror_mainVisual.jpg") top center no-repeat;
	background-size: contain;
	position: relative;
	}

#MainVisual .collabo{width: 35%; position: absolute; top: 0; left: 20px;}
@media only screen and (max-width: 480px){#MainVisual{margin-top: 10px;} #MainVisual .collabo{width: 55%; top: -15px; left: 5px;}}

h1{
	width: 100%;
	height: 0;
	margin: 0;
	padding-top: 13.5%;
	background-size: contain!important;
	overflow: hidden;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: 52% center;
	background-image: url(../images/event/shironeko_mirror_logo.png);
	}

#MainVisual article{max-width: 870px; margin: auto; padding: 0 1.5em;}
#MainVisual article.reserve{padding: 1.5em;}

@media only screen and (max-width: 860px){h1{padding-top: 22%; background-position: 65% center;}}

@media only screen and (max-width: 480px){
	#MainVisual{
		padding-top: 75%;
		background: url("../images/event/shironeko_mirror_mainVisual_sp.jpg") top center no-repeat;
		background-size: contain;
		}
	h1{padding-top: 28%; background-position: 5px center;}
	#MainVisual article{padding: 0 0.65em;}
	#MainVisual article p:first-child{margin: 0;}
	#MainVisual article.reserve{padding: 1.5em 0.65em;}
	}



/*--------MainContents--------*/
h2{
	width: 100%;
	height: 0;
	margin: 0 0 1em;
	padding-top: 50px;
	background-size: contain!important;
	overflow: hidden;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	}

	#Story h2{padding-top: 71px; background-image: url(../images/event/shironeko_mirror_story_title.png);}
	#Character h2{padding-top: 72px; background-image: url(../images/event/shironeko_mirror_character_title.png);}
	#Kit h2{background-image: url(../images/event/shironeko_mirror_kit_title.png);}
	#Nazo h2{background-image: url(../images/event/shironeko_mirror_nazotoki_title.png);}
	#Practice h2{background-image: url(../images/event/shironeko_mirror_nazotoki_anser.png);}
	#Twitter h2{background-image: url(../images/event/shironeko_mirror_twitter_anser.png);}

	@media only screen and (max-width: 480px){h2{margin: 0 0 .25em;} #Story h2{width: 90%; margin: 0 5%;}}


#Kit h3{
	margin: 2em 0 1em 0;
	padding: 0 0.5em 0.5em;
	border-bottom: dotted #FFF;
	font-size: 1.1em;
	color: #FFF;
	text-shadow: 0px 0px 6px #00b4ff,0px 0px 6px #00b4ff;
	}


/*reserve*/
.reserve{padding: 3em 0; text-align: center;}

.LinkButton{
	width: 100%;
	max-width: 870px;
	margin: 0 auto;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	box-shadow:0px 0px 6px 0px #ffd200 inset;
	background: #ff7e00;
	background: -webkit-linear-gradient(#ff7e00 0%, #ffba00 100%);
	background: -o-linear-gradient(#ff7e00 0%, #ffba00 100%);
	background: linear-gradient(#ff7e00 0%, #ffba00 100%);
	border-bottom: solid 4px #c28000;
	border-radius: 8px;
	}

.LinkButton a{font-size: 1.8em; padding: 0.75em 2%; color: #FFF; text-shadow: 0px 0px 6px #844003,0px 0px 6px #844003;}
.LinkButton:hover{box-shadow:0px 0px 12px 3px #ffd200 inset;}
.LinkButton:active{-webkit-transform: translateY(4px); transform: translateY(4px); border-bottom: none;}
@media only screen and (max-width: 480px){.LinkButton a{font-size: 1.4em; padding: 0.65em 2%;}}


/*Story*/
section#Story{padding: 0 0 10%;}

/*story_text*/
.storyTXT{
	padding: 6% 0;
	background-image: url("../images/event/shironeko_mirror_storybg.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	}

.storyTXT > div{
	max-width: 1480px;
	margin: auto;
	display: flex;
	align-items: center;
	}

.storyTXT > div > div:first-child{flex: 0 1 52%; text-align: center;}
.storyTXT > div > div:last-child{flex: 0 1 46%;}

.storyTXT p{line-height: 2.0em; margin-bottom: 1.5em;}
br.sp{display: none;}

@media only screen and (max-width: 860px){
	.storyTXT{padding: 3.5% 0 9.5%; background-image: url("../images/event/shironeko_mirror_storybg_sp.jpg");}
	.storyTXT > div{display: block;}
	.storyTXT > div > div:first-child{width: 60%; margin: auto;}
	.storyTXT > div > div:last-child{margin: -1.5em 1.5em 1em; text-align: center;}
	.storyTXT p{font-size: 0.9em; line-height: 1.8em; margin-bottom: 1.5em;}
	}

@media only screen and (max-width: 480px){br.sp{display: block;}}
@media only screen and (max-width: 380px){.storyTXT p{font-size: 0.8em;}}

/*story_PV*/
.PV{
	margin-top: -4.5em;
	padding: 16.8% 0 12%;
	background-image: url("../images/event/shironeko_mirror_story_pv.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	}

.PV p{margin: 0; text-align: center;}

@media only screen and (max-width: 860px){
	.PV{
		margin-top: -6.5em;
		padding: 18% 0 14%;
		background-image: url("../images/event/shironeko_mirror_story_pv_sp.png");
		background-size: contain;
		}
	
	.PV p{max-width: 90px; margin: 0 auto;}
	}

@media only screen and (max-width: 480px){.PV{margin-top: -4em;}.PV p{max-width: 50px; margin: 0 auto;}}



/*CHARACTER*/
article.mirror{padding: 0 1.5em;}
article.AR{max-width: 870px; margin: 2em auto; display: flex; align-items: center;}
article.AR div{flex: 0 1 auto; margin: 1em;}
@media only screen and (max-width: 480px){article.mirror{padding: 0 0.5em;} article.AR div{margin: 1em 0.5em;}}

.swiper-container{text-align: center;}

.swiper-button-prev{
		width: 40px!important;
		height: 48px!important;
		background: url("../images/event/shironeko_mirror_arrowL.png") no-repeat!important;
		background-size: contain!important;
		left: 0!important;
		}

	.swiper-button-next{
		width: 40px!important;
		height: 48px!important;
		background: url("../images/event/shironeko_mirror_arrowR.png") no-repeat!important;
		background-size: contain!important;
		right: 0!important;
		}

/*Kit*/
#Kit article{
	max-width: 1480px;
	margin: auto;
	display: flex;
	}

	#Kit article:last-child{display: block;}

#Kit article div{flex: 0 1 48%; margin: 0 auto;}
#Kit div.price h3{margin: 1em 0;}
#Kit div.notes h3{text-shadow: 0px 0px 6px #ff0000,0px 0px 6px #ff0000;}
#Kit h3 + p{margin: 0 0 0 .85em;}
#Kit div.notes li{font-size: 0.9em;}


@media only screen and (max-width: 860px){
	#Kit article{margin: 1em; display: block;}
	#Kit article div:first-child{padding-bottom: 1em;}
	}

@media only screen and (max-width: 480px){#Kit article{margin: 0;}}


/*Nazo*/
#Nazo article{max-width: 870px; margin: auto; padding-bottom: 2em;}
#Nazo div{margin-bottom: 1.5em; display: flex; align-items: center;}
.detailTW{border-left: solid 8px #1da1f2;}
.detailAS{border-left: solid 8px #f27c1d;}

#Nazo div > p:first-child{flex: 0 1 40%; margin: 0; padding: 0 2.5%;}
#Nazo div > p:last-child{flex: 0 1 60%; margin: 0 1%;}

#Nazo div a{
	padding: 0.5em;
	color: #FFF;
	text-align: center;
	font-weight: 600;
	border: solid 2px #FFF;
	border-radius: 8px;
	}
	.detailTW a{background: rgba(29,161,242,0.5);}
	.detailAS a{background: rgba(242,124,29,0.5);}
	.detailTW a:hover{background: rgba(29,161,242,1.00);}
	.detailAS a:hover{background: rgba(242,124,29,1.00);}

@media only screen and (max-width: 480px){
	#Nazo article{padding-bottom: 1em;}
	#Nazo div{display: block;}
	#Nazo div > p:first-child{margin: 0 0 1em; padding: 0 1em;}
	#Nazo div a{margin: 0 1em;}
	}


/*--------Nazo_Anser--------*/

/*Anser main*/
.Anser main{max-width: 750px; margin: auto; padding-top: 5%;}
.Anser section{padding: 2em 0 6em;}
.Anser article{padding-top: 2em;}
.Anser h2 + article{padding-top: 0;}
.Anser p a{color: #FFF;}
.Anser p a:hover{color: #a5cbde; transition: all  0.8s ease;}
.popup_content,.open_btn{font-family: 'Noto Serif JP', serif;}

.detail{
	padding: 0.5em 1.5em;
	border-left: solid 8px #1ea1f3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	background: #252525;
	}

	#Practice .detail{border-left: solid 8px #f17c1d;}
	#Twitter .detail p{font-size: 1.2em; font-weight: 500;}
	.detail div:first-child{flex: 0 1 41.5%!important; margin-right: 2%;}
	.detail div{flex: 0 1 20%;}

@media only screen and (max-width: 760px){
	.detail{padding: 0.5em 1.5em 1.5em; justify-content: flex-start;}
	.detail div:first-child{flex: 0 1 100%!important; margin-right: 0;}
	h3.tw_Hint + p{font-size: 1.2em;}
	}

@media only screen and (max-width: 480px){
	.Anser section{padding: 2em 0 3em;}
	.detail{display: block;}
	.detail div:nth-child(2){margin-bottom: 10px;}
	h3.tw_Hint + p{font-size: 1em;}
	}



/*Pop up*/
.popup_wrap input {display: none;}

.popup_overlay {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	transition: opacity 0.5s, transform 0s 0.5s;
	transform: scale(0);
	}

.popup_trigger {width: 100%; height: 100%; position: absolute;}

.popup_content {
	width: 90%;
	max-width: 800px;
	padding: 30px 30px 15px;
	position: relative;
	align-self: center;
	box-sizing: border-box;
	background: #252525;
	line-height: 1.4em;
	transition: 0.5s;
	}

.popup_content h3{
	margin-bottom: 2em;
	padding: 0.5em;
	font-size: 1.2em;
	color: #FFF;
	text-align: center;
	background: #1da1f3;
	}

	#Practice .popup_content h3{background: #f37c1e;}
	h3.tw_Hint{background: #685549!important;}
	@media only screen and (max-width: 480px){.popup_content h3{font-size: 1em;}}

.popup_content p{padding-bottom: 1.5em; font-size: 1.4em; text-align: center;}
@media only screen and (max-width: 480px){.popup_content p{font-size: 1.2em;}}

.close_btn {
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: 30px;
	cursor: pointer;
	color: #FFF;
	}

.popup_wrap input:checked ~ .popup_overlay {opacity: 1; transform: scale(1); transition: opacity 0.5s;}


/*Pop up Button*/
.open_btn{
	width: 170px;
	padding: 0.5em 1em;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	font-weight: 700;
	background: #1da1f3;
	border-bottom: solid 4px #146fa8;
	border-radius: 5px;
	}

	#Practice .open_btn{background: #f37c1e; border-bottom: solid 4px #9f5315;}
	#Practice .open_btn:active,.open:active,.hint:active{-webkit-transform: translateY(4px); transform: translateY(4px); border-bottom: none!important;}
	.hint{margin-right: 10px; background: #685549!important; border-bottom: solid 4px #42362f!important;}
	.soon{background: #707070; border-bottom: none;}

@media only screen and (max-width: 480px){.open_btn{width: 100%;}}


/*textLink*/
.Anser article + p{position: relative; padding-left: 15px;}
.Anser article + p:before {
	content: "";
    position: absolute;
    top: 0.25em;
    left: 0;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #FFF;
	}


/*--------SNS--------*/
#SNS_share ul{
	margin: 0 0 3em;
	padding: 0;
	display: flex;
	justify-content: center;
	list-style-type: none;
	}

#SNS_share li{
	width: 60px;
	height: 60px;
	display: block;
	cursor: pointer;
	margin: 0 1em;
	padding: 0;
	text-align: center;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	background: rgba(0,0,0,0.7);
	}

#SNS_share li:hover{
	box-shadow: inset 0 0 5px 0 rgba(255,255,255,0.8);
	-webkit-box-shadow: inset 0 0 5px 0 rgba(255,255,255,0.8);
	-moz-box-shadow: inset 0 0 5px 0 rgba(255,255,255,0.8);
	}

	.Facebook{border: solid 2px #3b579d;}
	.Twitter{border: solid 2px #55acee}
	.Line{border: solid 2px #00cc00;}

	.Facebook:hover{background: rgba(255,255,255,0.8);}
	.Twitter:hover{background: rgba(255,255,255,0.8);}
	.Line:hover{background: rgba(255,255,255,0.8);}

	li.Facebook img, li.Line img{padding-top: 21.5%;}
	li.Twitter img{padding-top: 27%;}


#SNS_share p{margin: 1em; font-size: 0.9em; text-align: center;}


/*----------Footer------------*/
footer{
	width: 100%;
	padding: 2em 0;
	color: #FFF;
	display: block;
	background: #1b1b1b;
	}

footer > div{
	max-width: 1480px;
	margin: auto;
	padding: 0 2em 1em;
	border-bottom: solid 1px #313131;
	}

	/*タイトーリンク*/
	ul.taitoLink{padding:1em 0 0;}
	
	ul.taitoLink li{
		font-size: 1.0em;
		margin-right: 1.0em;
		display: inline-block;
		}
	
	ul.taitoLink a{color: #FFF;}
	ul.taitoLink a:hover{color: #7ecef4;}

footer p:last-child{
	margin-top: 2em;
	font-size:0.8em;
	color: #FFF;
	text-align: center;
	}

@media only screen and (max-width: 480px){ul.taitoLink li{margin-right: 0; margin-bottom: 0.5em; display: block;}}