@charset "utf-8";

body#vgaje {
	background: url(../img/bg_main.jpg) no-repeat top center fixed #000;
}

/* ------------------------------------- /
/   Header
/* ------------------------------------- */

body#vgaje header {
	text-align: center;
	height: 280px;
	background: url(../img/header01.jpg) center top;
}

body#vgaje header div.lBox h1 {
	position: absolute;
	top: 5px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
}

body#vgaje header div.sBox {
	display: none;
}

body#vgaje div.navBox {
	position: absolute;
	top: 190px;
}


/***** Gnav *****/

body#vgaje li.mainBtn03 {
	background: url(../img/btn_main03.png) 2px;
} /*アクティブページには別画像を設定*/


/* ------------------------------------- /
/   Main
/* ------------------------------------- */

body#vgaje h2 {
	background: url(../vgaje/img/h2.png) center no-repeat;
	height: 106px;
	text-indent: -9999px;
	margin-top: 0;
}

div.playBox img.img-responsive {
	display: inline-block;
}

div.playBox div.box {
	margin-bottom: 30px;
}

div.playBox p.txt {
	background: url(../img/ico_maru.png) no-repeat left 5px;
	padding-left: 20px;
	margin-bottom: 10px;
	line-height: 180%;
}

div.playBox div.RBox {
	float: right;
	margin-left: 20px;
}

div.playBox div.LBox h4 {
	background: #14730a;
	color: #FFF;
	padding: 5px;
	margin: 0 236px 20px 0;
}

nav.playSub {
	background: #6b4004;
	border-radius: 10px;
	padding: 5px;
	width: 605px;
	text-align: center;
	margin: 30px auto 30px auto;
}

nav.playSub ul,nav.playSub li {
	margin: 0;
	padding: 0;
}

.vBox {
	margin: 0 10px 30px 10px;
}

.vBox p {
	position: relative;
	float: left;
	margin: 0 20px 20px 0;
	width: 320px;
	height: 340px;
	cursor: pointer;
}

.vBox p:nth-child(2n) {
	margin-right: 0;
}
.vBox p.mrg-r-20 {
	margin-right: 20px;
}
.vBox p.mrg-r-0 {
	margin-right: 0;
}

.vBox p img {
	display: none;
}

.vBox p span.new img {
	display: block;
}

.vBox p.v01 {
	background: url(../cards/img/07_img01.jpg);
}

.vBox p.v01:hover {
	background: url(../cards/img/07_img01.jpg) 0 -340px;
}

.vBox p.v02 {
	background: url(../cards/img/07_img02.jpg);
}

.vBox p.v02:hover {
	background: url(../cards/img/07_img02.jpg) 0 -340px;
}

.vBox p.v03 {
	background: url(../cards/img/07_img03.jpg);
}

.vBox p.v03:hover {
	background: url(../cards/img/07_img03.jpg) 0 -340px;
}

.vBox p.v04 {
	background: url(../cards/img/07_img04.jpg);
}

.vBox p.v04:hover {
	background: url(../cards/img/07_img04.jpg) 0 -340px;
}
.vBox p.v05 {
	background: url(../cards/img/07_img05.jpg);
}
.vBox p.v05:hover {
	background: url(../cards/img/07_img05.jpg) 0 -340px;
}
.vBox p.v06 {
	background: url(../cards/img/07_img06.jpg);
}
.vBox p.v06:hover {
	background: url(../cards/img/07_img06.jpg) 0 -340px;
}
.vBox p.v07 {
	background: url(../cards/img/07_img07.jpg);
}
.vBox p.v07:hover {
	background: url(../cards/img/07_img07.jpg) 0 -340px;
}
.vBox p.v08 {
	background: url(../cards/img/07_img08.jpg);
}
.vBox p.v08:hover {
	background: url(../cards/img/07_img08.jpg) 0 -340px;
}
.vBox p.v09 {
	background: url(../cards/img/07_img09.jpg);
}
.vBox p.v09:hover {
	background: url(../cards/img/07_img09.jpg) 0 -340px;
}
.vBox p.v10 {
	background: url(../cards/img/07_img10.jpg);
}
.vBox p.v10:hover {
	background: url(../cards/img/07_img10.jpg) 0 -340px;
}

.vBox p.v11 {
	background: url(../cards/img/07_img11.jpg);
}
.vBox p.v11:hover {
	background: url(../cards/img/07_img11.jpg) 0 -340px;
}
.vBox p.v12 {
	background: url(../cards/img/07_img12.jpg);
}
.vBox p.v12:hover {
	background: url(../cards/img/07_img12.jpg) 0 -340px;
}
.vBox p.v13 {
	background: url(../cards/img/07_img21.jpg);
}
.vBox p.v13:hover {
	background: url(../cards/img/07_img21.jpg) 0 -340px;
}
.vBox p.v14 {
	background: url(../cards/img/07_img22.jpg);
}
.vBox p.v14:hover {
	background: url(../cards/img/07_img22.jpg) 0 -340px;
}

.vBox p.v15 {
	background: url(../cards/img/07_img13.jpg);
}
.vBox p.v15:hover {
	background: url(../cards/img/07_img13.jpg) 0 -340px;
}
.vBox p.v16 {
	background: url(../cards/img/07_img14.jpg);
}
.vBox p.v16:hover {
	background: url(../cards/img/07_img14.jpg) 0 -340px;
}
.vBox p.v17 {
	background: url(../cards/img/07_img23.jpg);
}
.vBox p.v17:hover {
	background: url(../cards/img/07_img23.jpg) 0 -340px;
}
.vBox p.v18 {
	background: url(../cards/img/07_img24.jpg);
}
.vBox p.v18:hover {
	background: url(../cards/img/07_img24.jpg) 0 -340px;
}
.vBox p.v19 {
	background: url(../cards/img/07_img19.jpg);
}
.vBox p.v19:hover {
	background: url(../cards/img/07_img19.jpg) 0 -340px;
}
.vBox p.v20 {
	background: url(../cards/img/07_img20.jpg);
}
.vBox p.v20:hover {
	background: url(../cards/img/07_img20.jpg) 0 -340px;
}
.vBox p.v21 {
	background: url(../cards/img/07_img17.jpg);
}
.vBox p.v21:hover {
	background: url(../cards/img/07_img17.jpg) 0 -340px;
}
.vBox p.v22 {
	background: url(../cards/img/07_img18.jpg);
}
.vBox p.v22:hover {
	background: url(../cards/img/07_img18.jpg) 0 -340px;
}
.vBox p.v23 {
	background: url(../cards/img/07_img25.jpg);
}
.vBox p.v23:hover {
	background: url(../cards/img/07_img25.jpg) 0 -340px;
}
.vBox p.v24 {
	background: url(../cards/img/07_img26.jpg);
}
.vBox p.v24:hover {
	background: url(../cards/img/07_img26.jpg) 0 -340px;
}
.vBox p.v25 {
	background: url(../cards/img/07_img29.jpg);
}
.vBox p.v25:hover {
	background: url(../cards/img/07_img29.jpg) 0 -340px;
}
.vBox p.v26 {
	background: url(../cards/img/07_img28.jpg);
}
.vBox p.v26:hover {
	background: url(../cards/img/07_img28.jpg) 0 -340px;
}
.vBox p.v27 {
	background: url(../cards/img/07_img27.jpg);
}
.vBox p.v27:hover {
	background: url(../cards/img/07_img27.jpg) 0 -340px;
}
.vBox p.v28 {
	background: url(../cards/img/07_img15.jpg);
}
.vBox p.v28:hover {
	background: url(../cards/img/07_img15.jpg) 0 -340px;
}
.vBox p.v29 {
	background: url(../cards/img/07_img16.jpg);
}
.vBox p.v29:hover {
	background: url(../cards/img/07_img16.jpg) 0 -340px;
}
.vBox p.v30 {
	background: url(../cards/img/07_img30.jpg);
}
.vBox p.v30:hover {
	background: url(../cards/img/07_img30.jpg) 0 -340px;
}
.vBox p.v31 {
	background: url(../cards/img/07_img31.jpg);
}
.vBox p.v31:hover {
	background: url(../cards/img/07_img31.jpg) 0 -340px;
}
.vBox p.v32 {
	background: url(../cards/img/07_img32.jpg);
}
.vBox p.v32:hover {
	background: url(../cards/img/07_img32.jpg) 0 -340px;
}
.vBox p.v33
 {
	background: url(../cards/img/07_img33.jpg);
}
.vBox p.v33:hover {
	background: url(../cards/img/07_img33.jpg) 0 -340px;
}
.vBox p.v34 {
	background: url(../cards/img/07_img34.jpg);
}
.vBox p.v34:hover {
	background: url(../cards/img/07_img34.jpg) 0 -340px;
}
.vBox p.v35
 {
	background: url(../cards/img/07_img35.jpg);
}
.vBox p.v35:hover {
	background: url(../cards/img/07_img35.jpg) 0 -340px;
}



div.playMovie {
	background: url(../play/img/bg_movie.jpg) no-repeat;
	background-size: contain;
	margin: 0 20px 5px 20px;
	padding: 10px 52px 40px 52px;	
}

ul#tab {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}
ul#tab:after {
	content:".";
	display: block;
	height:0px;
	clear: left;
	line-height:0;
	visibility:hidden;
}
ul#tab li {
	position: relative;
	text-indent: -9999px;
	width: 15.83%;
	float: left;
	margin-right: 1%;
	text-align: center;
	margin-bottom: 10px;
}
ul#tab li span.new {
	display: block;
	text-indent: 0;
	top: -15px;
}
ul#tab li:nth-child(6n) {
	margin-right: 0;
}
ul#tab li a {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 47.77%;
}
ul#tab li.chara01 a {
	background: url(../play/img/btn_chara01_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara01 a:hover {
	background: url(../play/img/btn_chara01.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara01"] ,ul#tab li.active[class~="chara01"] a,ul#tab li.active[class~="chara01"] a:hover {
	background: url(../play/img/btn_chara01.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara02 a {
	background: url(../play/img/btn_chara02_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara02 a:hover {
	background: url(../play/img/btn_chara02.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara02"] ,ul#tab li.active[class~="chara02"] a,ul#tab li.active[class~="chara02"] a:hover {
	background: url(../play/img/btn_chara02.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara03 a {
	background: url(../play/img/btn_chara03_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara03 a:hover {
	background: url(../play/img/btn_chara03.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara03"] ,ul#tab li.active[class~="chara03"] a,ul#tab li.active[class~="chara03"] a:hover {
	background: url(../play/img/btn_chara03.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara04 a {
	background: url(../play/img/btn_chara04_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara04 a:hover {
	background: url(../play/img/btn_chara04.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara04"] ,ul#tab li.active[class~="chara04"] a,ul#tab li.active[class~="chara04"] a:hover {
	background: url(../play/img/btn_chara04.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara05 a {
	background: url(../play/img/btn_chara05_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara05 a:hover {
	background: url(../play/img/btn_chara05.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara05"] ,ul#tab li.active[class~="chara05"] a,ul#tab li.active[class~="chara05"] a:hover {
	background: url(../play/img/btn_chara05.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara06 a {
	background: url(../play/img/btn_chara06_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara06 a:hover {
	background: url(../play/img/btn_chara06.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara06"] ,ul#tab li.active[class~="chara06"] a,ul#tab li.active[class~="chara06"] a:hover {
	background: url(../play/img/btn_chara06.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara07 a {
	background: url(../play/img/btn_chara07_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara07 a:hover {
	background: url(../play/img/btn_chara07.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara07"] ,ul#tab li.active[class~="chara07"] a,ul#tab li.active[class~="chara07"] a:hover {
	background: url(../play/img/btn_chara07.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara08 a {
	background: url(../play/img/btn_chara08_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara08 a:hover {
	background: url(../play/img/btn_chara08.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara08"] ,ul#tab li.active[class~="chara08"] a,ul#tab li.active[class~="chara08"] a:hover {
	background: url(../play/img/btn_chara08.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara09 a {
	background: url(../play/img/btn_chara09_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara09 a:hover {
	background: url(../play/img/btn_chara09.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara09"] ,ul#tab li.active[class~="chara09"] a,ul#tab li.active[class~="chara09"] a:hover {
	background: url(../play/img/btn_chara09.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara10 a {
	background: url(../play/img/btn_chara10_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara10 a:hover {
	background: url(../play/img/btn_chara10.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara10"] ,ul#tab li.active[class~="chara10"] a,ul#tab li.active[class~="chara10"] a:hover {
	background: url(../play/img/btn_chara10.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara11 a {
	background: url(../play/img/btn_chara11_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara11 a:hover {
	background: url(../play/img/btn_chara11.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara11"] ,ul#tab li.active[class~="chara11"] a,ul#tab li.active[class~="chara11"] a:hover {
	background: url(../play/img/btn_chara11.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara12 a {
	background: url(../play/img/btn_chara12_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara12 a:hover {
	background: url(../play/img/btn_chara12.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara12"] ,ul#tab li.active[class~="chara12"] a,ul#tab li.active[class~="chara12"] a:hover {
	background: url(../play/img/btn_chara12.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara13 a {
	background: url(../play/img/btn_chara13_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara13 a:hover {
	background: url(../play/img/btn_chara13.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara13"] ,ul#tab li.active[class~="chara13"] a,ul#tab li.active[class~="chara13"] a:hover {
	background: url(../play/img/btn_chara13.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara14 a {
	background: url(../play/img/btn_chara14_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara14 a:hover {
	background: url(../play/img/btn_chara14.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara14"] ,ul#tab li.active[class~="chara14"] a,ul#tab li.active[class~="chara14"] a:hover {
	background: url(../play/img/btn_chara14.png) no-repeat;
	background-size: cover;
}
#detail {
	clear: left;
	overflow: hidden;
	width: 100%;
	margin-top: 10px;
}
.tabbox {
	display: none;
}

div.play02Box {
	position: relative;
	background: url(../play/img/02_img01.jpg) no-repeat;
	background-size: contain;
	padding-top: 56.91%;
}

div.play02Box p.btnCam {
	text-indent: -9999px;
	position: absolute;
	left: 11.764%;
	top: 28%;
	width: 100%;
}

div.play02Box p.btnCam a {
	background: url(../play/img/btn_cam.gif) no-repeat;
	display: block;
	width: 520px;
	height: 30px;
	/*background-size: contain;
	width: 76.47%;
	height: 5.769%;*/
}

div.play02Box p.btnCam a:hover {
	background: url(../play/img/btn_cam.gif) 0 -30px;
}

@media screen and (max-width: 767px) { /* 767px以下の場合 */

/* ------------------------------------- /
/   Header
/* ------------------------------------- */

body#vgaje header {
	text-align: center;
	height: auto;
	background: none;
}

body#vgaje header div.lBox {
	display: none;
}

body#vgaje header div.sBox {
	display: block;
}

body#vgaje div.navBox {
	position: static;
}


/***** Gnav *****/

body#vgaje li.mainBtn03 {
	text-indent: 0;
	margin: 0;
	width: 50%;
	height: 50px;
	float: left;
	text-align: center;
	background: url(../img/ico_kab.png),-webkit-gradient(linear, left top, left bottom, from(#972715), to(#2a0802));
    background: url(../img/ico_kab.png),-moz-linear-gradient(top, #972715, #2a0802);
    background: url(../img/ico_kab.png),-ms-linear-gradient(top, #972715, #2a0802);
    background: url(../img/ico_kab.png),linear-gradient(top, #972715, #2a0802);
    background-repeat:no-repeat;
    background-position: right bottom;
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
	line-height: 120%;
	color: #f6f773;
	display: table;
} /*アクティブページには別画像を設定(PC)したので、スマホ用は元に戻す*/


/* ------------------------------------- /
/   Main
/* ------------------------------------- */

body#vgaje {
	background: none #000;
}

body#vgaje h2 {
	background: url(../vgaje/img/h2_s.jpg);
	width: 100%;
	height: 0;
	padding-top: 18.2%;
	background-size: cover;
}
#vgaje div.subMenu{
	display:none;
}

div.playBox div.box {
	margin-bottom: 15px;
}

div.playBox div.RBox {
	width: 32%;
	margin-left: 5%;
}

div.playBox div.LBox h4 {
	background: #14730a;
	color: #FFF;
	padding: 5px;
	margin: 0 auto 10px 0;
}

div.playBox div.LBox {
	width: 63%;
}

div.playBox p.txt {
	line-height: 160%;
}


nav.playSub {
	border-radius: 5px;
	padding: 5px;
	width: 100%;
	text-align: center;
	margin: 20px 0;
}

nav.playSub ul {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffff9a), color-stop(0.00, #FFFFFF));
	background: -webkit-linear-gradient(top, #FFFFFF 0%, #ffff9a 100%);
	background: -moz-linear-gradient(top, #FFFFFF 0%, #ffff9a 100%);
	background: -o-linear-gradient(top, #FFFFFF 0%, #ffff9a 100%);
	background: -ms-linear-gradient(top, #FFFFFF 0%, #ffff9a 100%);
	background: linear-gradient(top, #FFFFFF 0%, #ffff9a 100%);
	overflow: hidden;
	border-radius: 5px;
	border: solid 1px #000;
}

nav.playSub li {
	width: 50%;
	float: left;
	padding: 5px;
	min-height: 35px;
}

nav.playSub li:first-child {
	border-right: solid 1px #000;
}

nav.playSub li img {
	display: none;
}

nav.playSub li:first-child {
	border-radius: 5px 0 0 5px;
}

nav.playSub li:nth-child(2) {
	border-radius: 0 5px 5px 0;
}

nav.playSub li a {
	display: block;
	width: 100%;
}


.banner-vgaje img{
	max-width:100%;
}

.vBox {
	margin: 0 0 30px 0;
}

.vBox p {
	float: left;
	margin: 0 2% 10px 0;
	width: 49%;
	height: auto;
	cursor: default;
	background: none;
}

.vBox p:nth-child(2n) {
	margin-right: 0;
}
.vBox p.mrg-r-20 {
	margin-right: 2%;
}
.vBox p img {
	display: block;
}

div.playMovie {
	background: url(../play/img/bg_movie.jpg) no-repeat;
	background-size: contain;
	margin: 0;
	padding: 1.5% 8.28% 10% 8.28%;	
}

ul#tab li {
	width: 24.25%;
	float: left;
	margin-right: 1%;
	text-align: center;
}
ul#tab li:nth-child(4n) {
	margin-right: 0;
}
ul#tab li:nth-child(6n) {
	margin-right: 1%;
}
ul#tab li a {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 47.777%;
}
ul#tab li.chara12{
	margin-right:0%;
}

div.play02Box p.btnCam a {
	background: url(../play/img/btn_cam_s.gif) no-repeat;
	display: block;
	background-size: contain;
	width: 76.47%;
	height: 5.769%;
}

div.play02Box p.btnCam a:hover {
	background: url(../play/img/btn_cam_s.gif) no-repeat;
	display: block;
	background-size: contain;
	width: 76.47%;
	height: 5.769%;
}

/* ------------------------------------- /
/   sidebar
/* ------------------------------------- */

body#vgaje p.btn01 img {
	display: none;
}

body#vgaje p.btn01 a:after {
	content: "はじめてあそぶ人へ";
}

body#vgaje p.btn01 a {
	display: block;
	text-align: center;
}

}