@charset "utf-8";


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

共通

****************************************************************/
#container {
    background: #000000;
    background-image: url(../images/index/main01.jpg);
    background-size: cover;
    background-position: left -20px;
    background-repeat: no-repeat;
}
#footer {
    position: absolute;
}
.wow {
    /*
    visibility: hidden;
    */
}
#video {
  display: none;
}
.item-container-body {
    width: 80%;
	min-width: 1000px;

}
#header {
    background: transparent;
    position: absolute;
    z-index: 2;
}



@media screen and (max-width: 736px) {
#container {
    background-image: none;
}


	#contents {
	    width: auto;
	    margin-top: 0px;
	}
	.margin-top-30-sp{
    margin-top: -30px;
    position: relative;
	}
#footer {
    position: relative;
}

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


}



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

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

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

article#contents {
position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
}



#main {

}


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


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


article#contents {
margin-top: 0%;
    position: relative;
    top: 0;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    display: block;
    padding-bottom:10px;
    background-image: url(../images/index/bg.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}


#main {
    background-size: 200%;;
}


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

}


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

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

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

#nav  {
    position: absolute;
    width: 100%;
    bottom: 35px;
}

#nav .item-container{
    background-image: url(../images/common/nav-bg.jpg);
    background-repeat: repeat-x;
    background-size: cover;
    background-position: center bottom;
}
#nav .item-container:before,
#nav .item-container:after{
    content: "";
    background-image: url(../images/common/nav-bar-top.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 100%;
    height: 30px;
}
#nav .item-container:after{
    background-image: url(../images/common/nav-bar-bottom.png);
    background-position: center bottom;
}


#nav ul{
    max-width: 1200px;
    margin: 0 auto;
}
#nav ul li{
	display: inline-block;
    width: 20%;
}
#nav ul li a {
    display: block;
    box-sizing: border-box;
    padding: 0 10px;
}
#nav ul li a img{
/*
    height: 70px;
    width: auto;
*/
}

.pull-down-list.pc-veiw {
    display: block!important;
}


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

	#nav {
		position: relative;
	    bottom: 0;
	}
	#nav ul li {
	    width: 50%;
	}

	.naviBtn,
	.naviBtn-bottom {
	    background-image: url(../images/common/nav-bg.jpg);
	    background-repeat: repeat-x;
	    background-size: cover;
	    background-position: center bottom;
	}
	.naviBtn span.open,
	.naviBtn span.close,
	.naviBtn-bottom span.close{
	    background-image: url(../images/common/naviBtn_open.png);
	    display: block;
	    height: 30px;
	    background-repeat: no-repeat;
	    background-size: auto 21px;
	    background-position: center center;
	    padding: 10px 0;
	}
	.naviBtn span.close,
	.naviBtn-bottom span.close{
	    background-image: url(../images/common/naviBtn_close.png);
	}

	.naviBtn-top  span.close{
		display:none;
	}


	.pull-down-list {
	}

}


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

ページ共通

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


.page #container {
	background: #0C0000;
}
.page  #nav {
    position: relative;
    bottom: 0;
}


.page a.page-logo {
    position: absolute;
    left: 0;
    top: 20px;
    display: block;
    width: 180px;
}
.page a.page-logo img {
    width: 100%;
}

.page .page-logo-nanashow {
	position: absolute;
    right: 5px;
    top: 45px;
    width: 150px;
}
.page  #nav ul{
    max-width: 900px;
    margin: 0 auto;
}

.page article#contents {
    position: relative;
    top: 0%;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    display: block;
}

.page .img_responsive {
	width: auto!important;
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    _width: 100%;
}

.of_visible {
    overflow: visible;
}

.page #footer {
    position: relative;
    background: #0c0000;
}

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

	.page #header {
	    position: relative;
	}
	.page a.page-logo {
	    position: relative;
	    left: 0;
	    right: 0;
	    top: 0;
	    display: block;
	    width: 200px;
	    margin: 10px auto 0;
	}
	.page .page-logo-nanashow {
	    right: 5px;
	    top: 5px;
	    width: 70px!important;
	}
	.page #header {
	    position: relative;
	    height: auto;
	}
	.page  article#contents {
	    background-image: none;
	}


}

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

#feature

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


#feature{}

#feature #main {
    background-image: url(../images/feature/bg.jpg);
    background-size: cover;
    background-position: center top;
background-repeat: no-repeat;
}

@media screen and (max-width: 736px) {
	#feature #main  {
	    background-size: contain;
	}
}


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

#spec

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

#spec #main {
    background-image: url(../images/spec/bg.jpg);
	    background-size: contain;
    background-position: center top;
	background-repeat: no-repeat;
}

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

#gameflow

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

#gameflow #main {
    background-image: url(../images/spec/bg.jpg);
	    background-size: contain;
    background-position: center top;
	background-repeat: no-repeat;
}


.vermillionloop {
    visibility: visible;
    animation-name: bounceIn;
    margin-top: -3%;
    margin-bottom: -3%;
    z-index: 2;
    position: relative;
}

@media screen and (max-width: 736px) {
	#gameflow.fancybox-lock{
		    position:fixed;
			top:  -scrollPos;
			width: 100%;
	}
}
/********************************************

#special

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

#special #main {
}

#special ul.tab{
    width: 100%;
    margin: 50px auto 20px;
    padding: 0 200px;
    border-bottom: 2px #4b0504 solid;
}

#special ul.tab li {
    display: inline-block;
    width: 50%;
}

#special ul.tab li.select{
    margin-bottom: -2px;
}

#special ul.tab a{
}
#special ul.tab a img{
}


@media screen and (max-width: 736px) {
	#special ul.tab {
	    width: 100%;
	    margin: 20px auto 20px;
	    padding: 0 10px;
	    border-bottom: 2px #4b0504 solid;
	}
}