@charset "utf-8";

/*
******************************************************************
* MJP top.css
******************************************************************
*/
html.Has-modal {
	overflow: hidden !important;
	width: auto;
}
html {
	background-color: #191919;
}
body {
	color: #4b4b4b;
	line-height: 1.6;
	word-wrap: break-word;
	overflow: hidden;
	position: fixed;
	top: 0;
}
@-moz-keyframes shakeAnime {
	0% {top:0;}
	16% {top:-10px;}
	32% {top:0;}
	48% {top:-20px;}
	64% {top:0;}
	80% {top:-10px;}
	100% {top:0;}
}
@-webkit-keyframes shakeAnime {
	0% {top:0;}
	16% {top:-10px;}
	32% {top:0;}
	48% {top:-20px;}
	64% {top:0;}
	80% {top:-10px;}
	100% {top:0;}
}
body.shake {
	-moz-animation-name: shakeAnime;
	-moz-animation-duration: 0.2s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: 4;

	-webkit-animation-name: shakeAnime;
	-webkit-animation-duration: 0.2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 4;
}
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;
}
*[data-sf] {
 opacity: 0;
}
*[data-sf="toggle"] {
 opacity: 1;
}

/*
******************************************************************
* header
******************************************************************/
header {
	display: none;
	background: url(../img/bg_header.jpg) repeat-x;
	position: relative;
	z-index: 200;
}
header .headerInner {
	width: 1366px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
header .headerInner .logo {
	position: absolute;
	top: 3px;
	left: 109px;
}
header nav:after {
	content: "";
	display: block;
	clear: both;
}
header nav ul {
	width: 887px;
	float: right;
	margin-right: 44px;
}
header nav li:after {
	content: "";
	display: block;
	clear: both;
}
header nav li {
	width: 175px;
	float: left;
}
header nav li a {
	display: block;
	box-sizing: border-box;
	height: 63px;
	padding: 8px 0 0 0;
	background: url(../img/bg_navi_border.png) left bottom no-repeat;
	text-align: center;
}
header nav li:first-child a{
	padding-left: 13px;
}
header nav li:nth-child(2) a {
	padding-left: 7px;
}
header nav li:nth-child(3) a {
	padding-left: 6px;
}
header nav li:nth-child(4) a {
	padding-left: 15px;
}
header nav li:nth-child(5) a {
	padding-left: 3px;
}
header nav ul:after {
	content: "";
	width: 12px;
	height: 63px;
	background: url(../img/bg_navi_border.png) left bottom no-repeat;
	float: left;
}

.sns_btn {
	position: absolute;
	bottom: -47px;
	right: 60px;
}
.sns_btn li {
	display: inline-block;
	vertical-align: top;
	margin-left: 20px;
}

/*
******************************************************************
* #pre-loader
******************************************************************/
.loading_wrap {
	width: 100%;
	height: 100%;
	background: #111;
	position: fixed;
	z-index: 999;
}
.loading_wrap .loading {
	width: 500px;
	height: 142px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background: url(../img/ld_base.png) 0 0 no-repeat;
}
.loading_wrap .loading_inner {
	position: relative;
	width: 500px;
	height: 142px;
}
.loading_wrap .message {
	width: 164px;
	height: 101px;
	position: absolute;
	z-index: 51;
	top: 5px;
	right: 0;
	left: 0;
	margin: auto;
	background: url(../img/ld_window.png) 0 0 no-repeat;
	-webkit-transform: scaleY(0);
	-ms-transform: scaleY(0);
	-o-transform: scaleY(0);
	transform: scaleY(0);
}
.loading_wrap .message > div {
	width: 142px;
	height: 79px;
	margin: 10px 11px;
	background: url(../img/ld_ms01.png) 0 0 no-repeat;
}
.loading_wrap .EVALOAD_start .message {
	opacity: 1;
	animation:show 1s ease 0s 1 normal;
	-webkit-animation:show 1s ease 0s 1 normal;
	-webkit-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	transform: scaleY(1);
}
.loading_wrap .EVALOAD_loaded .message {
	-webkit-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	transform: scaleY(1);
}
.loading_wrap .EVALOAD_loaded .message > div {background-image: url(../img/ld_ms02.png);}
@keyframes show {
	  0% {transform: scaleY(0);}
	 50% {
	 	transform: scaleY(1);
	 	opacity: 1;
	 }
	 60% {opacity: 0.2}
	 65% {opacity: 1}
	 70% {opacity: 0.2}
	 75% {opacity: 1}
	 80% {opacity: 0.2}
	 85% {opacity: 1}
	100% {opacity: 1}
}
@-webkit-keyframes show {
	  0% {transform: scaleY(0);}
	 50% {
	 	transform: scaleY(1);
	 	opacity: 1;
	 }
	 60% {opacity: 0.2}
	 65% {opacity: 1}
	 70% {opacity: 0.2}
	 75% {opacity: 1}
	 80% {opacity: 0.2}
	 85% {opacity: 1}
	100% {opacity: 1}
}
.loading_wrap .bar {
	width: 0%;
	height: 46px;
	position: absolute;
	top: 32px;
	background: url(../img/ld_bar.png) left center repeat;
	-webkit-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
.loading_wrap *[class^="graph0"] {
	width: 500px;
	height: 142px;
	position: absolute;
}
.loading_wrap *[class^="graph0"] > * {
	position: absolute;
	-webkit-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.loading_wrap .graph01 > * {
	position: relative;
	width: 0px;
	max-width: 250px;
	height: 3px;
	background: #f9cc2f;
}
.loading_wrap .graph01 .g01 {top: 103px;}
.loading_wrap .graph01 .g02 {top: 112px;}
.loading_wrap .graph01 .g03 {top: 122px;}
.loading_wrap .graph02 > * {
	bottom: 5px;
	width: 35px;
	height: 35px;
	background: url(../img/ld_graph.png) 0 0 no-repeat;
	-webkit-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
.loading_wrap .graph02 > .g01 {right: 0}
.loading_wrap .graph02 > .g02 {right: 45px}

#contentsWrap {
	background: url(../img/bg_emergency.png) repeat-x center top;
	min-width: 1366px;
	width: 100%;
}
#contents {
	min-width: 1366px;
	margin: auto;
	background: url(../img/bg_emergency.png) repeat-x center top;
	position: relative;
	height: 2000px;
}

.scene01 {
	position: absolute;
	overflow: hidden;
	width: 1134px;
	height: 596px;
	margin: auto ;
	top: 140px;
	left: 0;
	right: 0;
	z-index: 100;
}
.scene02 {
	opacity: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
	overflow: hidden;
	width: 1366px;
	z-index: 103;
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	-webkit-transition: all .7s ease-out;
	-ms-transition: all .7s ease-out;
	transition: all .7s ease-out;
}
.scene02.move {
	opacity: 1;
	-webkit-transform: scale(4);
	-ms-transform: scale(4);
	transform: scale(4);
}
.scene02.move02 {
	opacity: 0;
}

main {
	position: absolute;
	width: 1366px;
	height: 626px;
	margin: auto;
	top: 140px;
	left: 0;
	right: 0;
	z-index: 1;
}
main h1 {
	opacity: 0;
	position: absolute;
	top: 249px;
	left: 335px;
	z-index: 4;
	-webkit-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
main h2 {
	opacity: 0;
	position: absolute;
	top: 451px;
	left: 208px;
	z-index: 4;
	-webkit-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
main h1.move,
main h2.move {
	opacity: 1;
}

main .mainEmergency {
	opacity: 0;
	position: absolute;
	left: 186px;
	top: 76px;
	z-index: 1;
	-webkit-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
main .mainEmergency.move {
	opacity: 0.6;
}
@-moz-keyframes emergencyAnime {
	0% {opacity: 0.6;}
	40% {opacity: 0.6;}
	50% {opacity: 0;}
	60% {opacity: 0.6;}
	100% {opacity: 0.6;}
}
@-webkit-keyframes emergencyAnime {
	0% {opacity: 0.6;}
	40% {opacity: 0.6;}
	50% {opacity: 0;}
	60% {opacity: 0.6;}
	100% {opacity: 0.6;}
}
main .mainEmergency.move02 {
	-moz-animation-name: emergencyAnime;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	-webkit-animation-name: emergencyAnime;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

main .mainChara {
	opacity: 0;
	position: absolute;
	right: -147px;
	top: -13px;
	z-index: 2;
	-webkit-transform: translate(400px,0);
	-ms-transform: translate(400px,0);
	transform: translate(400px,0);
	-webkit-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
main .mainChara.move {
	opacity: 1;
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
}
main .mainFg,
main .mainFg01 {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 3;
}
main #mainInner {
	position: absolute;
	overflow: hidden;
	width: 1134px;
	height: 596px;
	margin: auto ;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
main #mainInner:before {
	content: "";
	background: url(../img/bg_main_anime.gif) no-repeat center top;
	width: 1134px;
	height: 596px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 0;
}
main .scatter {
	opacity: 0;
	position: absolute;
	width: 1134px;
	height: 655px;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 3;
}
main .scatter.move {
	opacity: 1;
}
main .scatter img {
	position: absolute;
	z-index: 4;
	-webkit-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

main .scatter .scatter01 {
	left: 95px;
	top: -117px;
	-webkit-transform: translate(30px,30px);
	-ms-transform: translate(30px,30px);
	transform: translate(30px,30px);
}
main .scatter .scatter02 {
	left: -84px;
	top: 156px;
	-webkit-transform: translate(30px,0);
	-ms-transform: translate(30px,0);
	transform: translate(30px,0);
}
main .scatter .scatter03 {
	bottom: -51px;
	left: 71px;
	-webkit-transform: translate(30px,-30px);
	-ms-transform: translate(30px,-30px);
	transform: translate(30px,-30px);
}
main .scatter .scatter04 {
	right: -88px;
	top: 467px;
	-webkit-transform: translate(-30px,-30px);
	-ms-transform: translate(-30px,-30px);
	transform: translate(-30px,-30px);
}
main .scatter .scatter05 {
	right: -134px;
	top: -33px;
	-webkit-transform: translate(-30px,10px);
	-ms-transform: translate(-30px,10px);
	transform: translate(-30px,10px);
}
main .scatter.move .scatter01,
main .scatter.move .scatter02,
main .scatter.move .scatter03,
main .scatter.move .scatter04,
main .scatter.move .scatter05 {
	transform: translate(0,0);
}

@-moz-keyframes scatterAnime1 {
	0% {transform: translate(0,0);}
	50% {transform: translate(10px,10px);}
	100% {transform: translate(0,0);}
}
@-webkit-keyframes scatterAnime1 {
	0% {transform: translate(0,0);}
	50% {transform: translate(10px,10px);}
	100% {transform: translate(0,0);}
}
main .scatter.move02 .scatter01 {
	-moz-animation-name: scatterAnime1;
	-moz-animation-duration: 5s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	-webkit-animation-name: scatterAnime1;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

@-moz-keyframes scatterAnime2 {
	0% {transform: translate(0,0);}
	50% {transform: translate(10px,0);}
	100% {transform: translate(0,0);}
}
@-webkit-keyframes scatterAnime2 {
	0% {transform: translate(0,0);}
	50% {transform: translate(10px,0);}
	100% {transform: translate(0,0);}
}
main .scatter.move02 .scatter02 {
	-moz-animation-name: scatterAnime2;
	-moz-animation-duration: 5s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	-webkit-animation-name: scatterAnime2;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

@-moz-keyframes scatterAnime3 {
	0% {transform: translate(0,0);}
	50% {transform: translate(10px,-10px);}
	100% {transform: translate(0,0);}
}
@-webkit-keyframes scatterAnime3 {
	0% {transform: translate(0,0);}
	50% {transform: translate(10px,-10px);}
	100% {transform: translate(0,0);}
}
main .scatter.move02 .scatter03 {
	-moz-animation-name: scatterAnime3;
	-moz-animation-duration: 5s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	-webkit-animation-name: scatterAnime3;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

@-moz-keyframes scatterAnime4 {
	0% {transform: translate(0,0);}
	50% {transform: translate(-10px,-10px);}
	100% {transform: translate(0,0);}
}
@-webkit-keyframes scatterAnime4 {
	0% {transform: translate(0,0);}
	50% {transform: translate(-10px,-10px);}
	100% {transform: translate(0,0);}
}
main .scatter.move02 .scatter04 {
	-moz-animation-name: scatterAnime4;
	-moz-animation-duration: 5s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	-webkit-animation-name: scatterAnime4;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

@-moz-keyframes scatterAnime5 {
	0% {transform: translate(0,0);}
	50% {transform: translate(-10px,4px);}
	100% {transform: translate(0,0);}
}
@-webkit-keyframes scatterAnime5 {
	0% {transform: translate(0,0);}
	50% {transform: translate(-10px,4px);}
	100% {transform: translate(0,0);}
}
main .scatter.move02 .scatter05 {
	-moz-animation-name: scatterAnime5;
	-moz-animation-duration: 5s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	-webkit-animation-name: scatterAnime5;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

/* モーダル用 */
#lean_overlay{
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background: #000;
	display: none;
}
.modalWrap{
	height: 100%;
	width: 100%;
	width: 1120px;
	margin: 0 auto!important;
	left: 0!important;
	right: 0!important;
}
.modalCont {
	width: 1110px;
	overflow: hidden;
	height: 100%;
}
.modalScroll {
	height: 100%;
	overflow-y: scroll;
	padding: 0 20px 0 10px;
	width: 1100px;
}
.modalInner{
	width: 1100px;
	margin: auto;
}
.modal_close {
	display: block;
	position: absolute;
	top: 59px;
	right: -38px;
	z-index: 2;
	background-color: #fff;
}
.modal_close:hover {
	cursor: pointer;
}
.modal_close:hover img {
	opacity: 0.7;
}
.fixed {
  position: fixed !important;
}