@charset "utf-8";


/***************************************************************

共通

****************************************************************/
#container {
	background: #e50012;
    /*
    background-image: url(../images/index/main01.jpg);
    */
    background-size: auto 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

#container {
    opacity: 0;
    backface-visibility: hidden;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.loading {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
/*  background: #fff url(../images/common/loading.gif) center center no-repeat; 
*/
}

.load-img{
  width: 100%;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
}
.load-img img{
	max-width:auto;
	width:auto;
}



#footer {
/*
    position: absolute;
*/
}
.wow {
    /*
    visibility: hidden;
    */
}
#video {
  display: none;
}
.item-container-body {
    width: 80%;
    max-width: 1200px;
}
#header {
    background: transparent;
    position: absolute;
    z-index: 3;
}

#header:after {
	content:"";
}

@media screen and (max-width: 736px) {
#container {
	background-size: 90%;
    background-position: center 20%;
}


	#contents {
	    width: auto;
	    margin-top: 0px;
	}

#header {
    height: auto;
}

	.margin-top-30-sp{
    margin-top: -30px;
    position: relative;
	}
#footer {
}

}



/***************************************************************

トップページ メイン
レスポンシブ

****************************************************************/

article#contents {
    position: relative;

	height: 90%;

    background: #fff;
}



#main,
#main .item-container-bodys {

height: 100%;

    z-index: 2;
}

#section01{
	position: fixed;
    top: 0;
    width: 100%;
}



.txt_left{
	background-image: url(../images/index/txt_left.png);
   background-size: cover;
    height: 100%;
	background-position: right top;
	background-repeat: no-repeat;
}
.txt_right{
	background-image: url(../images/index/txt_right.png);
    background-size: cover;
    height: 100%;
	background-position: left top;
    background-repeat: no-repeat;
}

.txt_machine{
    height: 100%;
}

.machine{
    background-image: url(../images/index/machine.png);
    background-size: contain;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
margin: 0 auto;
}
.machine-logo{
	background-image: url(../images/index/logo.png);
    background-size: contain;
    height: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    width: 60%;
    position: absolute;
    bottom: 0px;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.glow_w{
    background-image: url(../images/index/glow_w.png);
    background-size: cover;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}
.glow_b{
    background-image: url(../images/index/glow_b.png);
    background-size: cover;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}


#movie{
	background-color: #e50012;
	background-color: #fff;
    background-image: url(../images/index/glow_b.png),url(../images/index/glow_w.png);
     background-image: url(../images/index/movie_bg.png),url(../images/index/glow_w.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
   	z-index: 2;
}

.youtube {
    background: #000;
    border: 8px #e50012 solid;
    border-radius: 8px;
    box-shadow: 0 2px 4px #000;
}

#gameflow{
   	z-index: 3;
     background-image: url(../images/gameflow/bg.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#gameflow:before{
	content: "";
    background-image: url(../images/gameflow/bg.png);
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: 150%;
    background-repeat: no-repeat;
    background-position: center top;
    display: block;
    top: 0;
}

#spec{
   	z-index: 4;
     background-image: url(../images/spec/bg.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


#gameflow .flow-img{
    position: absolute;
    top: 0;
    left: 0;
}


@media screen and (max-width: 736px) {


.item-container-body {
    width: auto;
}

.logo-sp {
    position: absolute;
    bottom: 0;
    width: 80%;
    margin: 0 auto;
    display: block;
    left: 0;
    right: 0;
}


article#contents {
    /*
    height: 90vh;
	*/
background: #e50012;
}


#main {

}


#player{
	width:100%;
	height:180px;
}

.txt_left,
.txt_right {
    background-size: 150%;
    height: 80%;
    background-repeat: no-repeat;
}
.txt_left{
    background-position: left top;
}

.txt_right {
    background-position: right top;
}

.machine {
    width: 70%;
    top: 10%;
}

.machine-logo {
    width: 90%;
    bottom: 0;
}
#section01 {
    position: relative;
    top: 0;
    width: 100%;
}

#gameflow,
#spec {
    background-attachment: unset;
}






}


/***************************************************************

ナビゲーション
レスポンシブ

****************************************************************/
.menu {
    width: 70px;
    height: 70px;
    position: fixed;
    overflow: hidden;
    top: 15px;
    right: 15px;
    z-index: 10000;
}

.menu .open, .menu .close {
    position: absolute;
    top: 0;
    right: 0;
}

#nav {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    display: none;
    z-index: 9999;
}
#nav .nav_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    min-width: 752px;
    min-height: 509px;
    left: 0;
    top: 0;
    background-color: #000;
    opacity: 0.6;
    text-align: center;
    cursor: pointer;
	z-index: 10;
}

#nav .menu {
    width: 752px;
    height: auto;
    background-image: url(../images/nav/bg.jpg);
    background-size: 100% 100%;
    background-position: top center;
    background-repeat: no-repeat;
    text-align: center;
    overflow: hidden;
    position: absolute;
    margin-left: -376px;
    margin-top: -254px;
    left: 50%;
    top: 50%;
border: 5px #66001a solid;
}

#nav  .menu_inner {
    padding: 10px;
}

#nav  .menu_inner li {
    border-bottom: 1px #6559bd solid;
    padding: 10px 0;
    width: 80%;
    margin: 0 auto;
}
#nav  .menu_inner li:last-child {
    border-bottom: 0px #11027f solid;
}

@media screen and (max-width: 736px) {
.menu {
    width: 45px;
    height: 45px;
    top: 5px;
    right: 5px;
}
#nav .menu {
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-top: auto;
    left: 0;
    right: 0;
    top: 30%;
    margin: 0 auto;
}

.backtotop {
    width: 20%;
}


}