@charset "utf-8";

/*
******************************************************************
* MJP top.css
******************************************************************
*/
#wrp-all{
	background-color:#000;
	overflow: hidden;
}

/*
******************************************************************
* #contents
******************************************************************/
#contents .main {
	background: url(../img/bg_head.png) no-repeat center 0;
	-webkit-background-size: cover;
	background-size: cover;
}
#contents .main > *{
	position: absolute;
}
#contents .main h1 {
	z-index: 100;
	left: 50%;
	margin-left: -518px;
	top: 91px;
}
#contents .main h2 {
	left: 50%;
	z-index: 150;
	top: 645px;
	margin-left: -299px;
}
#contents .main .chara {
	left: 50%;
	margin-left: -338px;
	z-index: 10;
}
#contents .main .bg_img01 {
	width: 100%;
	height: 100%;
	background-color: #010c0f;
	z-index: 1;
	top: 0;
	left: 0;
}
#contents .main .bg_img01 img {
	width: 100%;
}
#contents .main .bg_img02 {
	width: 100%;
	z-index: 1;
	top: 67%;
}
#contents .main .bg_img02 img{
	width: 100%;
}
#contents .main .bg_img03 {
	z-index: 2;
	left: 50%;
	margin-left: -380px;
	top: 170px;
}
#contents .main .bg_img03 {
	background: url(../img/main_bg_img03_2.png) no-repeat 0 0;
	-webkit-background-size: 144px 108px;
	background-size: 144px 108px; 
	width: 144px;
	height: 108px;
}
#contents .main .bg_img03 img{
	width: 144px;
}

#contents .main .bg_txt {
	background: url(../img/main_bg_txt_2.png) no-repeat 0 0;
	-webkit-background-size: 214px 194px;
	background-size: 214px 194px; 
	width: 214px;
	height: 194px;
	left: 50%;
	margin-left: 109px;
	z-index: 2;
	top: 166px;
}
#contents .main .bg_txt img {
	width:214px;
}
#contents .main .txt01 {
	left: 50%;
	margin-left: 317px;
	z-index: 11;
	top: 120px;
}
#contents .main .txt02 {
	left: 50%;
	margin-left: 150px;
	z-index: 11;
	top: 240px;
}
#contents .main .txt03 {
	left: 50%;
	margin-left: -378px;
	z-index: 11;
	top: 258px;
}
#contents .main .txt04 {
	left: 50%;
	margin-left: -445px;
	z-index: 11;
	top: 410px;
}
#contents .main .txt05 {
	left: 50%;
	margin-left: -517px;
	z-index: 11;
	top: 263px;
}

body.show.retreat .bg_img03 {
	transform: scale(0.4) translate(370px, 100px);
}
body.show.retreat .bg_txt {
	transform: scale(0.4) translate(-320px, 0px);
}
body.show.retreat .txt01 {
	transform: scale(0.4) translate(-600px, -60px);
}
body.show.retreat .txt02 {
	transform: scale(0.4) translate(-338px, -239px);
}
body.show.retreat .txt03 {
	transform: scale(0.4) translate(374px, -300px);
}
body.show.retreat .txt04 {
	transform: scale(0.4) translate(531px, -472px);
}
body.show.retreat .txt05 {
	transform: scale(0.4) translate(625px, -165px);
}

#contentsWrap h2 {
	top: -15px;
}

#contents .content01 {
	width: 960px;
	margin: 26px auto 0;
	position: relative;
	z-index: 4;
}
#contents .content02 {
	width: 960px;
	margin: -20px auto 0;
	position: relative;
	z-index: 3;
}
#contents .content03 {
	width: 960px;
	margin: -92px auto 0;
	position: relative;
	z-index: 2;
}
#contents .content04 {
	width: 960px;
	margin: 70px auto 92px;
	position: relative;
	z-index: 1;
}

#footer .box-copy{}
#footer .box-copy li{}

.sns_btn {
    margin-top: 8px;
}