@charset "utf-8";

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

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

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

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

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

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


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

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


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

body#play h2 {
	background: url(../play/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 img {
	display: none;
}

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

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

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

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

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

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

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

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

.vBox p.v04:hover {
	background: url(../play/img/07_img04.jpg) 0 -340px;
}
.vBox p.v05 {
	background: url(../play/img/07_img05.jpg);
}
.vBox p.v05:hover {
	background: url(../play/img/07_img05.jpg) 0 -340px;
}
.vBox p.v06 {
	background: url(../play/img/07_img06.jpg);
}
.vBox p.v06:hover {
	background: url(../play/img/07_img06.jpg) 0 -340px;
}
.vBox p.v07 {
	background: url(../play/img/07_img07.jpg);
}
.vBox p.v07:hover {
	background: url(../play/img/07_img07.jpg) 0 -340px;
}
.vBox p.v08 {
	background: url(../play/img/07_img08.jpg);
}
.vBox p.v08:hover {
	background: url(../play/img/07_img08.jpg) 0 -340px;
}
.vBox p.v09 {
	background: url(../play/img/07_img09.jpg);
}
.vBox p.v09:hover {
	background: url(../play/img/07_img09.jpg) 0 -340px;
}
.vBox p.v10 {
	background: url(../play/img/07_img10.jpg);
}
.vBox p.v10:hover {
	background: url(../play/img/07_img10.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;
}
ul#tab li.chara15 a {
	background: url(../play/img/btn_chara15_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara15 a:hover {
	background: url(../play/img/btn_chara15.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara15"] ,ul#tab li.active[class~="chara15"] a,ul#tab li.active[class~="chara15"] a:hover {
	background: url(../play/img/btn_chara15.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara16 a {
	background: url(../play/img/btn_chara16_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara16 a:hover {
	background: url(../play/img/btn_chara16.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara16"] ,ul#tab li.active[class~="chara16"] a,ul#tab li.active[class~="chara16"] a:hover {
	background: url(../play/img/btn_chara16.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara17 a {
	background: url(../play/img/btn_chara17_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara17 a:hover {
	background: url(../play/img/btn_chara17.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara17"] ,ul#tab li.active[class~="chara17"] a,ul#tab li.active[class~="chara17"] a:hover {
	background: url(../play/img/btn_chara17.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;
}

/*------カードの見方---------*/
.card-mikata dl{
	margin:0px 20px 10px;
}


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

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

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

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

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

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


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

body#play li.mainBtn02 {
	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#play {
	background: none #000;
}

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

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%;
}

nav.playSub li.btnPlay00r a:after {
	content: "はじめてあそぶ人へ →";
}

nav.playSub li.btnPlay01r a:after {
	content: "カードの見方 →";
}

nav.playSub li.btnPlay01l a:after {
	content: "← 激闘1弾";
}
nav.playSub li.btnPlay02r a:after {
	content: "操作方法 →";
}

nav.playSub li.btnPlay02l a:after {
	content: "← はじめてあそぶ人へ";
}

nav.playSub li.btnPlay03r a:after {
	content: "バトルの準備 →";
}

nav.playSub li.btnPlay03l a:after {
	content: "← カードの見方";
}

nav.playSub li.btnPlay04r a:after {
	content: "バトル方法 →";
}

nav.playSub li.btnPlay04l a:after {
	content: "← 操作方法";
}

nav.playSub li.btnPlay05r a:after {
	content: "ムシ採り →";
}

nav.playSub li.btnPlay05l a:after {
	content: "← バトルの準備";
}

nav.playSub li.btnPlay06r a:after {
	content: "Vガジェゲット →";
}

nav.playSub li.btnPlay06l a:after {
	content: "← バトル方法";
}

nav.playSub li.btnPlay07l a:after {
	content: "← ムシ採り";
}

nav.playSub li.btnPlay07r a:after {
	content: "ブラックバトル →";
}

nav.playSub li.btnPlay08l a:after {
	content: "← Vガジェゲット";
}
nav.playSub li.btnPlay08r a:after {
	content: "ひみつの特訓場 →";
}

nav.playSub li.btnPlay09l a:after {
	content: "← ブラックバトル";
}
nav.playSub li.btnPlay09r a:after {
	content: "激闘！乱入バトル！ →";
	font-size:12px;
}
nav.playSub li.btnPlay10l a:after {
	content: "← ひみつの特訓場";
}
nav.playSub li.btnPlay10r a:after {
	content: "2人でたいせん →";
}
nav.playSub li.btnPlay11l a:after {
	content: "← 激闘！乱入バトル！";
	font-size:12px;
}
nav.playSub li.btnPlay11r a:after {
	content: "キャラクター →";
}
nav.playSub li.btnPlay12l a:after {
	content: "← 2人でたいせん";
	font-size:12px;
}
nav.playSub li.btnPlay12r{
	padding:4px;
}


.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 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%;
}

/*------カードの見方---------*/
.card-mikata dl{
	margin:0px 10px 10px;
}


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

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

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

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

}
@media screen and (max-width: 320px) { /* 320px以下の場合 */
nav.playSub li.btn-height320 a{
	font-size:11.5px;
}
}