@charset "utf-8";

/*　各snsの画像　*/

body{ background-color:#000000;}
img{ border:0px;}
/* ===== PC用の設定 ===== */
@media only screen and (min-width: 768px) {
#imgWrap{
	height:768px;
	width:768px;
	overflow: hidden;
	text-align:center;
	margin:0 auto;
}

#tArea{
	width: 768px;
}
/*
img#I_moon{
	width: 768px;
	height: 1024px;
}
*/
p#T_moon{
	text-align: center;
	font-size: 38px;
	color: #f7fbfe;
	line-height: 44px;
	width: 100%;
	margin: 0;
}

#btn_back{
	display:block;
	width: 218px;
	height: 65px;
	background: url("../images/btn_back.png") no-repeat;
	margin: 100px auto 50px;
}

ul#sns{
	width: 630px;
	margin: 0 auto;
	padding: 0 0 30px 0;
	list-style: none;
	overflow:hidden;
}

/*ul#sns{
	width: 768px;
	margin: 0 69px;
	padding: 0 0 30px 0;
	list-style: none;
	position: absolute;
	top:935px;
}*/

ul#sns li{
	width: 150px;
	float: left;
	padding: 0 30px;
}

li#tw a{
	height: 150px;
	display: block;
}

li#fb a{
	height: 150px;
	display: block;
}

li#ln a{
	height: 150px;
	display: block;
}

div#btn_banner{
	text-align:center;
	margin:20px 10%;}

}

/* ===== タブレット用の設定 ===== */
@media screen and (min-width: 400px) and (max-width:767px) {

div#btn_banner{
	text-align:center;
	margin:20px 10%;}

#wrapMoon{
	width: 100%;
	margin: 0 auto;
}

#imgWrap{
	height:768px;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
}

#imgWrap img{
	width: 100%;
}

#tArea{
	width: 100%;
}

p#T_moon{
	text-align: center;
	font-size: 25px;
	color: #f7fbfe;
	line-height: 44px;
	width: 100%;
	margin: 0;
}

#btn_back{
	display:block;
	width: 218px;
	height: 65px;
	background: url("../images/btn_back.png") no-repeat;
	margin: 100px auto 50px;
}

ul#sns{
	margin: 0 10%;
	padding: 0;
	/*overflow: auto;*/
	list-style: none;
}

ul#sns li{
	width: 23%;
	float: left;
	padding: 0 5%;
}

ul#sns li img{
	width: 100%;
}

li#tw a{
	width: 100%;
	height: 150px;
	display: block;
}

li#fb a{
	width: 100%;
	height: 150px;
	display: block;
}

li#ln a{
	width: 100%;
	height: 150px;
	display: block;
}
}

/* ===== スマートフォン用の設定 ===== */
@media only screen and (max-width:399px) {
div#btn_banner{
	text-align:center;
	margin:20px 10%;}
div#btn_banner img{ width:100%;}
#wrapMoon{
	width: 100%;
	margin: 0 auto;
}

#imgWrap{
	/*height:768px;*/
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
}

#imgWrap img{
	width: 100%;
}

#tArea{
	width: 100%;
}

p#T_moon{
	text-align: center;
	font-size: 20px;
	color: #f7fbfe;
	line-height: 44px;
	width: 100%;
	margin: 0;

}

#btn_back{
	display:block;
	width: 218px;
	height: 65px;
	background: url("../images/btn_back.png") no-repeat;
	background-size:contain;
	margin: 100px auto 50px;
}

a#btn_back{
	width: 50%;
}

ul#sns{
	margin: 0 5%;
	padding: 0 0 30px 0;
	overflow: auto;
	list-style: none;
}

ul#sns li img{
	width: 100%;
}

ul#sns li{
	width: 30%;
	float: left;
	padding: 0 5px 0 0;
}

li#tw a{
	height: 100%;
	display: block;
}

li#fb a{
	height: 100%;
	display: block;
}

li#ln a{
	height: 100%;
	display: block;
}
}