@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: -364px;
	z-index: 10;
}
#contents .main .bg_img01 {
	width: 100%;
	height: 100%;
	background-color: #0c0c00;
	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: -374px;
	top: 250px;
}
#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: 190px 222px;
	background-size: 190px 222px; 
	width: 190px;
	height: 222px;
	left: 50%;
	margin-left: 50px;
	z-index: 2;
	top: 264px;
}
#contents .main .bg_txt img {
	width:190px;
}
#contents .main .txt01 {
	left: 50%;
	margin-left: 407px;
	z-index: 11;
	top: 120px;
}
#contents .main .txt02 {
	left: 50%;
	margin-left: 230px;
	z-index: 11;
	top: 193px;
}
#contents .main .txt03 {
	left: 50%;
	margin-left: -440px;
	z-index: 11;
	top: 277px;
}
#contents .main .txt04 {
	left: 50%;
	margin-left: -425px;
	z-index: 11;
	top: 495px;
}

body.show.retreat .bg_img03 {
	transform: scale(0.4) translate(480px, -42px);
}
body.show.retreat .bg_txt {
	transform: scale(0.4) translate(-187px, -120px);
}
body.show.retreat .txt01 {
	transform: scale(0.4) translate(-600px, 30px);
}
body.show.retreat .txt02 {
	transform: scale(0.4) translate(-440px, -163px);
}
body.show.retreat .txt03 {
	transform: scale(0.4) translate(540px, -277px);
}
body.show.retreat .txt04 {
	transform: scale(0.4) translate(630px, -522px);
}

#contentsWrap h2 {
	top: -47px;
}
#contents {
	text-align: center;
}

.tab_wrap {
	padding-bottom: 8px;
	border-bottom: 2px solid #fff;
	position: relative;
	z-index: 0;
}
.tab_top {
	margin: 26px 0 43px;
}
.tab_bottom {
	margin: 100px 0 80px;
}
.tab_wrap ul {
	width: 1000px;
	margin: 0 auto;
}
.tab_wrap ul:after {
	content: "";
	display: block;
	clear: both;
}
.tab_wrap li {
	float: left;
	margin-left: 8px;
}
.tab_wrap li:first-child {
	margin: 0;
}
.tab_wrap li img {
	opacity: 0;
}
.tab_wrap li a {
	display: block;
	width: 244px;
	height: 95px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.tab_wrap li.tab01 a{
	background: url(../img/tab_01.png) no-repeat 0 0;
}
.tab_wrap li.tab01 a:hover,
.tab_wrap li.tab01.crnt a{
	background: url(../img/tab_01_on.png) no-repeat 0 0;
}
.tab_wrap li.tab02 a{
	background: url(../img/tab_02.png) no-repeat 0 0;
}
.tab_wrap li.tab02 a:hover,
.tab_wrap li.tab02.crnt a{
	background: url(../img/tab_02_on.png) no-repeat 0 0;
}
.tab_wrap li.tab03 a{
	background: url(../img/tab_03.png) no-repeat 0 0;
}
.tab_wrap li.tab03 a:hover,
.tab_wrap li.tab03.crnt a{
	background: url(../img/tab_03_on.png) no-repeat 0 0;
}
.tab_wrap li.tab04 a{
	background: url(../img/tab_04.png) no-repeat 0 0;
}
.tab_wrap li.tab04 a:hover,
.tab_wrap li.tab04.crnt a{
	background: url(../img/tab_04_on.png) no-repeat 0 0;
}

.tabContent {
	display: none;
	opacity: 0;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
.tabContent.crnt {
	display: block;
	opacity: 1;
}

#tabContent01 {
	width: 1000px;
	margin: 0 auto;
	position: relative;
	z-index: 4;
}
#tabContent01 h3 {
	margin-left: -8px;
	margin-bottom: 40px;
}
#tabContent01 .tab_read {
	margin-bottom: 60px;
}
#tabContent01 .col2 {
	position: relative;
}
#tabContent01 .col2:after {
	content: "";
	display: block;
	clear: both;
}
#tabContent01 .col2 .content01 {
	float: left;
	position: relative;
	z-index: 3;
}
#tabContent01 .col2 .content02 {
	float: right;
	position: relative;
	z-index: 1;
}
#tabContent01 .col2 .content03 {
	position: absolute;
	left: -3px;
	top: 1578px;
	z-index: 2;
}
#tabContent01 .content04 {
	position: relative;
	top: -18px;
	z-index: 0;
}


#tabContent02 {
	width: 1000px;
	margin: 0 auto;
	position: relative;
	z-index: 3;
}
#tabContent02 .content01 {
	margin-top: 70px;
}
#tabContent02 .content02 {
	margin-top: 40px;
}


#tabContent03 {
	width: 1000px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
#tabContent03 h3 {
	margin-top: 50px;
}
#tabContent03 .tab_read {
	margin-top: 40px;
}
#tabContent03 .content01 {
	margin-top: 95px;
}
#tabContent03 .content02,
#tabContent03 .content03,
#tabContent03 .content04 {
	margin-top: 70px;
}


#tabContent04 {
	width: 1000px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
#tabContent04 h3 {
	margin-top: 50px;
}
#tabContent04 .content01 {
	margin-top: 40px;
}
#tabContent04 .content02,
#tabContent04 .content03 {
	margin-top: 70px;
}

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

.sns_btn {
    margin-top: -22px;
}