@charset "utf-8";

/*
******************************************************************
* MJP top.css
******************************************************************
*/

html.Has-modal {
	overflow: hidden !important;
	width: auto;
}
html {
	background-color: #191919;
}
body {
	min-width: 1330px;
	min-height: 2000px;
	color: #4b4b4b;
	line-height: 1.6;
	word-wrap: break-word;
	overflow: hidden;
}
a:link, a:visited {
	color: #ffffff;
	text-decoration: none;
}
a:hover, a:active {
	color: #ffffff;
}
.anime {
	-webkit-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
#wrp-all {
	display: none;
	position: relative;
	width: 100%;
	overflow: hidden;
	z-index: 1;
}
.mod-box-inr {
	width: 1180px;
	margin: 0 auto;
}



/*
******************************************************************
* #pre-loader
******************************************************************
*/

#pre-loader {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#pre-loader img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	text-align: center;
}



/*
******************************************************************
* utility
******************************************************************
*/

/* hoverで画像変更 */
a.hover-img {
	display: inline-block;
	position: relative;
}
a.hover-img img {
	-webkit-transition:all 0.25s;
	-o-transition:all 0.25s;
	transition:all 0.25s;
}
a.hover-img .img-hvr {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
a.hover-img:hover .img-def {
	opacity: 0;
}
a.hover-img:hover .img-hvr {
	opacity: 1;
}

/* 要素アクション */
*[data-sf] {
	opacity: 0;
}
*[data-sf="toggle"] {
	opacity: 1;
}



/*
******************************************************************
* #bg
******************************************************************
*/

#bg {
	display: none;
	background: #f3e60e;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 0;
	position: absolute;
}
#bg *[class^="bg"] {
	width: 100%;
	height: 100%;
	/*background: 50% 0 fixed;
	-webkit-background-size: cover;
	background-size: cover;*/
	margin: 0 auto;
	padding: 0;
	z-index: 50;
	position: absolute;
	opacity: 0;
	-webkit-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
#bg.parallax-strat *[class^="bg"] {opacity: 1;}

#bg .bg1 {
	background-image: url(../img/bg1_02.png);
	background-position: center top;
	background-size: 1366px;
	background-repeat: repeat-y;
	background-color: #0b9036;
}
#bg .bg2 {
	background: 50% 0 fixed;
	-webkit-background-size: cover;
	background-size: cover;
	background-image: url(../img/bg2.png);
}
#bg .bg3 {
	background: 50% 0 fixed;
	-webkit-background-size: cover;
	background-size: cover;
	background-image: url(../img/bg3.png);
}
#bg .bg4 {
	background: 50% 0 fixed;
	-webkit-background-size: cover;
	background-size: cover;
	background-image: url(../img/bg4.png);
}



/*
******************************************************************
* #header
******************************************************************
*/

#header {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0 auto;
	width: 100%;
	min-width: 1330px;
	height: 59px;
	background: url(../img/bg1.png) repeat-y center top #0b7636;
	background-size: 1366px;
	z-index: 101;
}
#header:before {
	display: block;
	content: '';
	width: 100%;
	height: 80px;
	background: url(../img/bg_nav02.png) repeat-x center top;
	position: absolute;
	top: 59px;
	left: 0;
	z-index: 102;
}
#header .nav-area {
	width: 100%;
	height: 59px;
	background: url(../img/bg_pattern_header.png) repeat center top;
}
#header .nav {
	width: 100%;
	height: 116px;
	background: url(../img/bg_nav.png) no-repeat center 59px;
	position: relative;
	z-index: 103;
}
#header .nav:after {
	display: block;
	content: '';
	visibility: hidden;
	clear: both;
}
#header .nav ul {
	margin: auto;
	width: 524px;
	height: 116px;
	z-index: 104;
}
#header .nav li {
	width: 134px;
	height: 116px;
	float: left;
	margin-left: 61px;
}
#header .nav li:first-child {
	margin-left: 0;
}



/*
******************************************************************
* #mainvisual
******************************************************************
*/

#mainvisual {
	width: 100%;
	height: 684px;
	margin-top: 59px;
	background: url(../img/bg_mainvisual.png) center center no-repeat;
	background-size: 100%;
	position: relative;
}
#mainvisual:after {
	display: block;
	content: '';
	width: 100%;
	height: 57px;
	background: url(../img/bg_top02.png) repeat-x center top;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
}
#mainvisual .inner:after {
	display: block;
	content: '';
	width: 100%;
	height: 57px;
	background: url(../img/bg_top.png) no-repeat center top;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 11;
}

#mainvisual .logo {
	display: block;
	margin: auto;
}
#mainvisual .page-title {
	width: 100%;
	text-align: center;
	padding-bottom: 76px;
}



/*
******************************************************************
* #contents
******************************************************************
*/

#contents {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	background: url(../img/bg_pattern.png) repeat center 59px;
	z-index: 2;
}

#contents section {
	position: relative;
	margin-top: -59px;
}
#contents section:after {
	display: block;
	content: '';
	width: 100%;
	height: 57px;
	background: url(../img/bg_section.png) no-repeat center bottom;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 11;
}

#contents .section img {
	display: block;
	margin: auto;
}
.sub #contents .section {
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.sub #contents .section > img {
	position: relative;
	z-index: 100;
}

/* section title */
.fall-title, .fall-title * {
	width: 1180px;
	height: 300px;
}
.fall-title{
	display: block;
	position: relative;
	z-index: 10;
	margin: auto auto 40px;
	-webkit-perspective: 1500;
	-ms-perspective: 1500;
	-o-perspective: 1500;
	-moz-perspective: 1500px;
	perspective: 1500;
}
.fall-title span {
	display: block;
	position: relative;
	margin:0 auto;
	padding: 50px;
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition:all .75s;
	-o-transition:all .75s;
	transition:all .75s;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transform: rotateX(40deg) translateZ(50px);
	-ms-transform: rotateX(40deg) translateZ(50px);
	-o-transform: rotateX(40deg) translateZ(50px);
	transform: rotateX(40deg) translateZ(50px);
}
.fall-title span img {
	position: absolute;
	top: 0px;
	left: 0px;
	-webkit-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
	transform: translateZ(100px);
	opacity: 0;
}
.fall-title.in span{
	-webkit-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
.fall-title.in span img {
	opacity: 1;
	-webkit-transform: translateZ(0px);
	-ms-transform: translateZ(0px);
	-o-transform: translateZ(0px);
	transform: translateZ(0px);
}

/* section bg */
.sub #contents .bg-dynamic {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.sub #contents .bg-dynamic > img {
	display: inline-block;
	position: absolute;
}
#contents .bg-dynamic:before {
	display: block;
	content: '';
	width: 32px;
	height: 100%;
	background: url(../img/bg_right.png) right top repeat-y;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}
#contents .bg-dynamic:after {
	display: block;
	content: '';
	width: 100%;
	height: 57px;
	background: url(../img/bg_section02.png) repeat-x center bottom;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
}



/*
******************************************************************
* #section-feature
******************************************************************
*/

#contents #section-feature {
	padding-top: 146px;
}
#contents #section-feature .fall-title {
	margin-bottom: 75px;
}

/* .section-01 */
#contents #section-feature .section-01 {
	height: 1418px;
}
#contents #section-feature .section-01 .img1 {
	margin-bottom: 32px;
}
#contents #section-feature .section-01 .img2 {
	margin-bottom: 33px;
}
#contents #section-feature .section-01 .img3 {
	margin-bottom: 20px;
}

#contents #section-feature .section-01 .img4 {
	margin-bottom: 13px;
}
#contents #section-feature .section-01 .img5 {
	right: -424px;
}

#contents #section-feature .section-01 .bg-dynamic {
	height: 1280px;
	background: url(../img/bg_feature.png) left top no-repeat #191919;
	top: 137px;
}
#contents #section-feature .section-01 .bg-dynamic .img-kaoru {
	left: 50%;
	top: -439px;
	margin-left: -795px;
}
#contents #section-feature .section-01 .bg-dynamic .img-shinji {
	right: 50%;
	top: -447px;
	margin-right: -760px;
	z-index: 2;
}



/*
******************************************************************
* #section-gameflow
******************************************************************
*/

#contents #section-gameflow {
	padding-top: 158px;
}
#contents #section-gameflow .fall-title {
	margin-bottom: 82px;
}

/* .section-01 */
#contents #section-gameflow .section-01 {
	height: 4191px;
}
#contents #section-gameflow .section-01 .img2 {
	top: -378px;
}

#contents #section-gameflow .section-01 .bg-dynamic {
	height:4162px;
	background: url(../img/bg_gameflow.png) left top no-repeat #191919;
	top: 29px;
}
#contents #section-gameflow .section-01 .bg-dynamic > img {
	left: 50%;
	top: -204px;
	margin-left: -764px;
}



/*
******************************************************************
* #section-spec
******************************************************************
*/

#contents #section-spec {
	padding-top: 140px;
}
#contents #section-spec .fall-title {
	margin-bottom: 42px;
}

/* .section-01 */
#contents #section-spec .section-01 {
	height: 1110px;
}
#contents #section-spec .section-01 .img1,
#contents #section-spec .section-01 .img2 {
	z-index: 3;
}
#contents #section-spec .section-01 .img3 {
	width: 1000px;
	margin-left: -500px;
	position: absolute;
	top: 0;
	left: 50%;
}
#contents #section-spec .section-01 .img3 img {
	position: absolute;
	top: 132px;
	right: -243px;
	z-index: 2;
}

#contents #section-spec .section-01 .bg-dynamic {
	height: 980px;
	background: url(../img/bg_spec.png) left top no-repeat #191919;
	top: 130px;
}
#contents #section-spec .section-01 .bg-dynamic > img {
	left: 50%;
	top: -429px;
	margin-left: -1113px;
}
#contents #section-spec .section-01 .bg-dynamic:after {
	display: none;
}

/* .section-02 */
#contents #section-spec .section-02 {
	height: 867px;
	padding: 0 0 57px;
	background: url(../img/bg_spec_graph.png) center top no-repeat;
}
#contents #section-spec .section-02 .img1 {
	padding-top: 79px;
	z-index: 3;
}
#contents #section-spec .section-02 .img2 {
	top: 19px;
	z-index: 2;
}

#contents #section-spec:after {
	display: block;
	content: '';
	width: 100%;
	height: 57px;
	background: url(../img/bg_section_spec.png) no-repeat center bottom;
	position: absolute;
	bottom: -57px;
	left: 0;
	z-index: 11;
}
#contents #section-spec .section-02:after {
	display: block;
	content: '';
	width: 100%;
	height: 57px;
	background: url(../img/bg_section_spec02.png) repeat-x center bottom;
	position: absolute;
	bottom: -57px;
	left: 0;
	z-index: 10;
}



/*
******************************************************************
* #footer
******************************************************************
*/

#footer {
	width: 100%;
	height: 550px;
	font-size: 12px;
	color: #b5b5b5;
	background: url(../img/bg_left.png) left top repeat-y #191919;
	position: relative;
}
#footer:before {
	display: block;
	content: '';
	width: 32px;
	height: 100%;
	background: url(../img/bg_right.png) right top repeat-y;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

/* page-footer */
#footer .page-footer {
	width: 100%;
	height: 237px;
	text-align: center;
	padding-top: 166px;
}
#footer .page-footer > a {
	display: block;
	bottom: 0;
	left: 0;
	width: 1104px;
	height: 212px;
	margin: 0 auto;
	text-decoration: none;
	z-index: 10;
}

/* pagetop */
#footer .page-top-btn {
	position: fixed;
	z-index: 20;
	bottom: 150px;
	/*bottom: 357px;*/
	right: 1px;
}

/* copyright */
#footer .box-copy {
	display: table;
	height: 147px;
	text-align: center;
	margin: 0 auto;
}
#footer .box-copy li {
	display: table-cell;
	vertical-align: middle;
	padding: 0 5px;
}
#footer .box-copy li.bisty {
	padding: 0 15px;
}