@charset "utf-8";

/*
******************************************************************
* top.css
******************************************************************
*/
a:hover {
    opacity: 0.7;
}

body {
    overflow: hidden;
}
#wrap {
    display: none;
    width: 100%;
    position: relative;
}
#wrap #bg {
    position: absolute;
    min-width: 1366px;
    width: 100%;
    height: 768px;
    top: 0;
    left: 50%;
    z-index: 0;
    overflow: hidden;
}
#wrap #bg img {
    display: none;
    position: absolute;
    width: 100%;
    min-width: 1366px;
    min-height: 768px;
    z-index: 0;
}
#wrap #bg img:first-child {
    display: block;
}

#contents {
    width: 100%;
    height: 768px;
    overflow: hidden;
    position: relative;
}

.inner {
    width: 1366px;
    height: 768px;
    margin: 0 auto;
}
.inner:after {
    content:"";
    clear: both;
    display: block;
}

.r-box {
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    transition: ease 1s;
    -webkit-transition: ease 1s;
}
.r-box.move {
    opacity: 1;
}
.r-box h1 {
    max-width: 553px;
}
.r-box h1 img {
    display: block;
    width: 100%;
}

.chara {
    position: absolute;
    left: -220px;
    top: -60px;
    z-index: 1;
    opacity: 0;
    transform:translate(-200px,0);
    -webkit-transform:translate(-200px,0);
    transition: ease 1s;
    -webkit-transition: ease 1s;
}
.chara.move {
    opacity: 1;
    transform:translate(0,0);
    -webkit-transform:translate(0,0);
}

.nav_box {
    display: block;
    position: absolute;
    top: 0;
    right: 15px;
    width: 682px;
    height: 0;
    background: url(../img/bg_nav.png) no-repeat top right;
    z-index: 10;
}
.nav_box ul {
    position: relative;
    margin: 80px 0 0;
}
.nav_item {
    opacity: 0;
    position: absolute;
    width: 342px;
    height: 107px;
}
.nav_item:nth-child(1){
    top: 0;
    right: 37px;
    z-index: 5;
}
.nav_item:nth-child(2){
    top: 92px;
    right: 80px;
    z-index: 4;
}
.nav_item:nth-child(3){
    top: 183px;
    right: 121px;
    z-index: 3;}
.nav_item:nth-child(4){
    top: 275px;
    right: 164px;
    z-index: 2;
}
.nav_item:nth-child(5){
    top: 366px;
    right: 206px;
    z-index: 1;
}
.nav_item a {
    display: block;
}
.p_movie_btn {
    opacity: 0;
    position: absolute;
    left: 117px;
    bottom: 65px;
}
.p_movie_btn a {
    display: block;
}
.fade_item {
    transform: translate(30px, 0);
    -o-transform: translate(30px, 0);
    -ms-transform: translate(30px, 0);
    -moz-transform: translate(30px, 0);
    transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    -ms-transition: all 250ms ease-out;
    -moz-transition: all 250ms ease-out;
    -webkit-transition: all 250ms ease-out;
}
.item-fade_in {
    opacity: 1;
    transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

.mvBtn {
  display: none;
  position: absolute;
  left: 38px;
	bottom: 100px;
  z-index: 2;
}
.mvBtn a {
  display: block;
}

.sns_btn {
	display: none;
	position: absolute;
	bottom: 60px;
	left: 0;
  z-index: 1;
}
.sns_btn li {
	display: inline-block;
	vertical-align: center;
	margin-left: 20px;
}

#footer {
    position: absolute;
    right: 30px;
    bottom: 15px;
    z-index: 10;
}
#footer small {
    font-size: 12px;
    font-weight: bold;
}

.eva-project img{
max-height: 40px;
}

/*
******************************************************************
* #modal video
******************************************************************/
#mdl-box {
    position: fixed;
    z-index: 1100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#mdl-box .mdl-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/modal_bg.png);
}
#mdl-box #mdl-plr {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -270px;
    margin-left: -480px;
}
#mdl-box .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -326px;
    margin-left: 303px;
}
#mdl-box .btn a {
    display: block;
    width: 179px;
    height: 50px;
    text-indent: -9999px;
    background-image: url(../img/v_close.png);
    background-position: 0 top;
}
#mdl-box .btn a:hover {
    background-position: 0 bottom;
}


/*
******************************************************************
* .video.js
******************************************************************/
#mdl-box .vjs-default-skin .vjs-slider-handle {
    background: #288712;
}
#mdl-box .vjs-default-skin .vjs-play-progress {
    background: #789f6e;
}
#mdl-box .vjs-default-skin .vjs-volume-level {
    background: #789f6e;
}


/*
******************************************************************
* #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(../common/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(../common/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(../common/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(../common/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(../common/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(../common/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}