@charset "utf-8";


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

共通

****************************************************************/
#container {
    background: #fff;
}
.wow {
    visibility: hidden;
}
#video {
  display: none;
}
.item-container-body {
    width: 90%;
}
#header {
    background: transparent;
    position: absolute;
    z-index: 2;
}

.of_visible{
    overflow: visible;
}

.margin-bottom-50{
	margin-bottom: -50px;
}


#container.page{
    background-image: url(../images/common/page-bg.jpg);
	background: #000 url(../images/common/bg_gogogo.png);
    background-repeat: repeat;
    background-size: ;
    background-position: right top;
	padding-bottom: 200px;
}

#container.page article#contents {
	padding-bottom: 150px;
    margin-top: 50px;
}

#container.page #header {
	background: #000 url(../images/common/bg_flag.png);
}


@media screen and (max-width: 736px) {
	#contents {
	    width: auto;
	    margin-top: 0px;
	}
	.margin-top-30-sp{
    margin-top: -30px;
    position: relative;
	}

	#header {
		position: relative;
	    background: #000;
	    min-height: 36px;
	    max-height: none;
	    height: auto;
	}
	#header .inbody{
	padding: 4px;
	}

	.item-container-body {
	    width: 98%;
	}


#container.page {	
    background-size: 30%;
    padding-bottom: 100px;
}

	#container.page article#contents {
	padding-bottom: 130px;
	    margin-top: 00px;
	}

}

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

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

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

#main {
    background-image: url(../images/index/main_pc.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% top;
    padding-bottom: 20%;
}


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

	#main {
	    background-size: 200%;;
		background-position: right top;
	}

	.main-body{
top: 45%;
    -webkit-transform: translateY(-55%);
    transform: translateY(-55%);
    display: block;
	}


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



}


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

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

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

#nav {
	background-image: url(../images/index/navi_bg.png);
    background-repeat: repeat-x;
    background-size: 50%;
    background-position: center bottom;
	margin-top: -10%;
    background-color: #fff;
}

.nav_panel{
    background-image: url(../images/index/navi_panel.png);
    background-repeat: no-repeat;
    background-position: center top;
    height: 80px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}


#page-nav {
    position: fixed;
    z-index: 2;
    bottom: 0;
    overflow: visible;
}

#page-nav #nav {
    height: 200px;
}

#page-nav #nav .item-container-bodys {
    position: absolute;
    bottom: 0;
    width: 100%;
	min-width: 1100px;
}
#page-nav #nav .item-container-bodys .item{
}

#page-nav #nav .item-container-bodys .nav-btn {
    max-height: 180px;
    display: inline-block;
}

.nav-chara {
    max-width: 120%;
}

.nav-btn-box a{
    display: block;
}
.btn_on{
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    display: block;
    z-index: 999;
    top: 0;
}



@media screen and (max-width: 1100px) {
	#page-nav #nav .item-container-bodys .nav-btn {
	    max-width: 33%;
	}
}


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

#page-nav #nav .item-container-bodys {
    min-width: 320px;
}

#nav {
    background-size: cover;
}
.nav_panel {
    position: relative;
	background-size: cover;
    height: 50px;
}

#page-nav #nav {
    height: 130px;
}


#page-nav #nav .item-container-bodys .nav-btn {
    max-height: 110px;
}

.nav-btn-box {
    min-width: 320px;
}


}


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

フロー
レスポンシブ

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

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #fff;
    width: 50px;
    height: 5px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    bottom: -20px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #c75252;
}

article.flow {
	background: -webkit-linear-gradient(top, rgba(5, 1, 51, 0.90) 50%,88, rgba(0, 153, 204, 0.80) 100%);
    background: linear-gradient(to bottom, rgba(5, 1, 51, 0.90) 50%,rgba(0, 153, 204, 0.80) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(5, 1, 51, 0.90)', endColorstr='rgba(0, 153, 204, 0.80)',GradientType=0 );
}

@media screen and (max-width: 736px) {
	.flow-side{
	    background-image: url(../images/flow/02_00_sp.png);
	    background-size: auto 92%;
	    background-repeat: no-repeat;
	    z-index: 2;
	    position: relative;

	}
}

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

ボーナス
レスポンシブ

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

.gogo-loop {
    margin: -50px auto;
    z-index: 2;
}

article.bonus {
	background: -webkit-linear-gradient(top, rgba(92, 123, 2, 0.90) 50%,88, rgba(150, 202, 0, 0.90) 100%);
    background: linear-gradient(to bottom, rgba(92, 123, 2, 0.90) 50%,rgba(150, 202, 0, 0.90) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(92, 123, 2, 0.90)', endColorstr='rgba(150, 202, 0, 0.90)',GradientType=0 );
}

@media screen and (max-width: 736px) {
	.gogo-loop {
	    width: 70%;
    	margin: -30px auto;
	}
}

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

スペック
レスポンシブ

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



article.spec {
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.97) 50%,88, rgba(255, 255, 255, 0.97) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97) 50%,rgba(255, 255, 255, 0.97) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255, 255, 255, 0.97)', endColorstr='rgba(255, 255, 255, 0.97)',GradientType=0 );
}