html{
	position: relative;
	margin: 0;
	padding: 0;
}

body{
	position: relative;
	margin: 0;
	padding: 0;
	background: url("../img/bg.png") no-repeat center top;
	background-attachment: fixed;
}


/*--------------------------------------------------

header

--------------------------------------------------*/
header{
	position: absolute;
	z-index: 10000;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(0,0,0,0.7);
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}



/*--------------------------------------------------

[section] main visual

--------------------------------------------------*/

section#main_visual{
	position: relative;
	background-image: url("../img/main.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

img#main_concept{
	position: relative;
	display: block;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}




/*--------------------------------------------------

[section] menu

--------------------------------------------------*/
/*
section#menu{
	position: relative;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	width: 90%;
	max-width: 1000px;
	margin-right: auto;
	margin-bottom: 4em;
	margin-left: auto;
}
div.menu_cont{
	position: relative;
	width: 20%;
}
*/
div.menu_cont > a{
	position: relative;
	display: block;
	width: 100%;
}
div.menu_cont > a:hover{
	opacity: 0.8;
}

img.menu_img{
	position: relative;
	display: block;
	width: 100%;
}





/*--------------------------------------------------

[section] info

--------------------------------------------------*/

section#info{
	position: relative;
	margin-bottom: 8em;
}

div#news_area{
	position: relative;
	display: inline-block;
}

div#tweet_area{
	position: relative;
	display: inline-block;
}

h2.info_title{
	position: relative;
	z-index: 100;
	margin-bottom: -0.4em;
}
h2.info_title > img{
	position: relative;
	display: block;
	width: 100%;
}

div.info_body{
	position: relative;
	padding: 1em;
	border: solid 0.4em rgba(120,120,120,0.1);
	border-radius: 0.3em;
	background-color: #FFF;
	box-shadow: 0px 0px 20px #333;
	overflow-y: scroll;
}


dl.news_dl{
	position: relative;
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: dotted 1px #999;
}

dl.news_dl > dt{
	font-size: 1.4em;
	color: #5CC;
}
dl.news_dl > dd{
	font-size: 1.6em;
	color: #555;
}




/*--------------------------------------------------

[section] point (charcter, battle, story)

--------------------------------------------------*/

section.point{
	width: 80%;
	max-width: 1000px;
	margin-right: auto;
	margin-bottom: 4em;
	margin-left: auto;
	padding-bottom: 4em;
	border-bottom: dotted 1px #555;
}

h2.point_title > img{
	width: 100%;
}






/*--------------------------------------------------

[section] store

--------------------------------------------------*/

section#store{
	position: relative;
	width: 90%;
	max-width: 1000px;
	margin-right: auto;
	margin-bottom: 4em;
	margin-left: auto;
}
div#store_cont{
	position: absolute;
	top: 20%;
	height: calc(100% - 20%);
	margin-left: 35%;
	text-align: center;
}

ul.storeData{
	text-align: left;
	color:#FFF;
	list-style-type: none;
}
ul.storeData > li{
}








/*--------------------------------------------------

footer

--------------------------------------------------*/
footer{
	position: relative;
	padding-top: 4em;
	padding-bottom: 4em;
	border-top: #0971A1 solid 1px;
	background: -webkit-linear-gradient(top, #54C2E0 0%, #0971A1 100%);
	background: linear-gradient(to bottom, #54C2E0 0%, #0971A1 100%);
}
footer h5{
	line-height: 2em;
}
footer h5 > a{
	text-decoration: none;
	color:#FFF;
}
















/*--------------------------------------------------

page => play 

--------------------------------------------------*/

body#play{
	padding-top: 3.5em;
}

h1#play_h1{
	position: relative;
	width: 80%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
h1#play_h1 > img{
	width: 100%;
}



section.play{
	position: relative;
	width: 80%;
	max-width: 1000px;
	margin-right: auto;
	margin-bottom: 4em;
	margin-left: auto;
	padding: 0 1em 1em 1em;
	background-color: #FFF;
	border-radius: 0.5em;
	box-shadow: 0px 0px 8px #333;
}
section.play > h1{
	margin-top: 0;
}
section.play > h1 > img{
	width: 100%;
}



div.play_cont > div{
	position: relative;
	margin-bottom: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	background-color: #FFF;
	border-radius: 0.5em;
	box-shadow: 0px 0px 10px #000;
}

div.play_cont > div > h2{
	margin-bottom: 1em;
	padding: 0.5em 10px 0.5em 10px;
	text-align:center;
	color:#333;
	background:#f0e800;
	-webkit-transform: rotate(-3deg) skew(-3deg);
	-moz-transform: rotate(-3deg) skew(-3deg);
	-o-transform: rotate(-3deg) skew(-3deg);
	-ms-transform: rotate(-3deg) skew(-3deg);
	transform: rotate(-3deg) skew(-3deg);
	text-shadow:1px 1px 0 rgba(255,255,255,1);
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),
		        25px 0 0 0 #f0e800,
		        -25px 0 0 0 #f0e800;

}
div.play_cont > div > img{
	display: block;
	position: relative;
	width: 95%;
	margin-right: auto;
	margin-left: auto;
	border: solid 1px #555;
	border-radius: 0.5em;
}







/*--------------------------------------------------

page => faq

--------------------------------------------------*/

body#faq{
	padding-top: 3.5em;
}

h1#faq_h1{
	position: relative;
	width: 80%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
h1#faq_h1 > img{
	width: 100%;
}


section#faq_area{
	position: relative;
	width: 80%;
	max-width: 1000px;
	margin-right: auto;
	margin-bottom: 4em;
	margin-left: auto;
	padding: 1em;
	background-color: #FFF;
	border-radius: 0.5em;
	box-shadow: 0px 0px 8px #333;
}

section#faq_area > dl{
	margin-bottom: 2em;
}

section#faq_area > dl > dt{
	position: relative;
	font-size: 1.6em;
	margin-bottom: 0.5em;
	padding: 0.5em 0 0.5em 0.5em;
	background-color: #E2FBFB;
	border-bottom: solid 2px #0059B2;
	color: #0059B2;
	cursor: pointer;
}
section#faq_area > dl > dd{
	display: none;
	font-size: 1.4em;
	padding-bottom: 2em;
	padding-left: 2em;
}






#movie_wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    box-shadow: 0px 0px 30px #0AF;
}
 
#movie_wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


a#overlayer{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}





@media screen and (orientation: landscape) {

	section#main_visual{
		min-height: 100vh;
	}
	img#main_concept{
		padding-top: 100vh;
	}

	div.info_body{
		min-height: 40vh;
		max-height: 40vh;
	}

	h5.foot_h5_l{
		text-align: left;
	}
	h5.foot_h5_r{
		text-align: left;
	}

	section#faq_area > dl > dt{
		font-size: 1.6em;
	}
	section#faq_area > dl > dd{
		font-size: 1.4em;
	}

	div.play_cont > div{
		position: relative;
		max-width: 600px;
		margin-right: auto;
		margin-left: auto;
	}

	div.play_cont > div > h2{
		font-size: 1.8vw;
	}


	/* movie area
	------------------------------*/
	div#movie_area_pc{
		position: absolute;
		bottom: 45vh;
		left: 20%;
		width: 20%;
	}
	section#movie_area_mb{
		display: none;
	}

}

@media screen and (orientation: portrait) {

	section#main_visual{
		min-height: 55vh;
	}

	img#main_concept{
		padding-top: 45vh;
	}


	ul.storeData{
		width: 200%;
		transform:  translateX(-25%) translateY(-40%) scale(0.5);
	}

	div.info_body{
		min-height: 60vh;
		max-height: 60vh;
	}

	h5.foot_h5_l{
		text-align: left;
	}
	h5.foot_h5_r{
		text-align: left;
	}

	section#faq_area > dl > dt{
		font-size: 3vh;
	}
	section#faq_area > dl > dd{
		font-size: 2vh;
	}


	div.play_cont > div > h2{
		font-size: 2.8vh;
	}


	/* movie area
	------------------------------*/
	div#movie_area_pc{
		display: none;
	}
	section#movie_area_mb{
		position: relative;
		width: 80%;
		margin-top: 2em;
		margin-right: auto;
		margin-bottom: 2em;
		margin-left: auto;
	}


}