@charset "utf-8";

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

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

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

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

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

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



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

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



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(../story/img/btn_chara01_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara01 a:hover {
	background: url(../story/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(../story/img/btn_chara01.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara02 a {
	background: url(../story/img/btn_chara02_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara02 a:hover {
	background: url(../story/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(../story/img/btn_chara02.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara03 a {
	background: url(../story/img/btn_chara03_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara03 a:hover {
	background: url(../story/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(../story/img/btn_chara03.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara04 a {
	background: url(../story/img/btn_chara04_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara04 a:hover {
	background: url(../story/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(../story/img/btn_chara04.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara05 a {
	background: url(../story/img/btn_chara05_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara05 a:hover {
	background: url(../story/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(../story/img/btn_chara05.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara06 a {
	background: url(../story/img/btn_chara06_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara06 a:hover {
	background: url(../story/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(../story/img/btn_chara06.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara07 a {
	background: url(../story/img/btn_chara07_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara07 a:hover {
	background: url(../story/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(../story/img/btn_chara07.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara08 a {
	background: url(../story/img/btn_chara08_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara08 a:hover {
	background: url(../story/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(../story/img/btn_chara08.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara09 a {
	background: url(../story/img/btn_chara09_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara09 a:hover {
	background: url(../story/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(../story/img/btn_chara09.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara10 a {
	background: url(../story/img/btn_chara10_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara10 a:hover {
	background: url(../story/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(../story/img/btn_chara10.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara11 a {
	background: url(../story/img/btn_chara11_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara11 a:hover {
	background: url(../story/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(../story/img/btn_chara11.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara12 a {
	background: url(../story/img/btn_chara12_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara12 a:hover {
	background: url(../story/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(../story/img/btn_chara12.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara13 a {
	background: url(../story/img/btn_chara13_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara13 a:hover {
	background: url(../story/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(../story/img/btn_chara13.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara14 a {
	background: url(../story/img/btn_chara14_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara14 a:hover {
	background: url(../story/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(../story/img/btn_chara14.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara15 a {
	background: url(../story/img/btn_chara15_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara15 a:hover {
	background: url(../story/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(../story/img/btn_chara15.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara16 a {
	background: url(../story/img/btn_chara16_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara16 a:hover {
	background: url(../story/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(../story/img/btn_chara16.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara17 a {
	background: url(../story/img/btn_chara17_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara17 a:hover {
	background: url(../story/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(../story/img/btn_chara17.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara18 a {
	background: url(../story/img/btn_chara18_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara18 a:hover {
	background: url(../story/img/btn_chara18.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara18"] ,ul#tab li.active[class~="chara18"] a,ul#tab li.active[class~="chara18"] a:hover {
	background: url(../story/img/btn_chara18.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara19 a {
	background: url(../story/img/btn_chara19_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara19 a:hover {
	background: url(../story/img/btn_chara19.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara19"] ,ul#tab li.active[class~="chara19"] a,ul#tab li.active[class~="chara19"] a:hover {
	background: url(../story/img/btn_chara19.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara20 a {
	background: url(../story/img/btn_chara20_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara20 a:hover {
	background: url(../story/img/btn_chara20.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara20"] ,ul#tab li.active[class~="chara20"] a,ul#tab li.active[class~="chara20"] a:hover {
	background: url(../story/img/btn_chara20.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara21 a {
	background: url(../story/img/btn_chara21_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara21 a:hover {
	background: url(../story/img/btn_chara21.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara21"] ,ul#tab li.active[class~="chara21"] a,ul#tab li.active[class~="chara21"] a:hover {
	background: url(../story/img/btn_chara21.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara22 a {
	background: url(../story/img/btn_chara22_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara22 a:hover {
	background: url(../story/img/btn_chara22.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara22"] ,ul#tab li.active[class~="chara22"] a,ul#tab li.active[class~="chara22"] a:hover {
	background: url(../story/img/btn_chara22.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara23 a {
	background: url(../story/img/btn_chara23_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara23 a:hover {
	background: url(../story/img/btn_chara23.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara23"] ,ul#tab li.active[class~="chara23"] a,ul#tab li.active[class~="chara23"] a:hover {
	background: url(../story/img/btn_chara23.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara24 a {
	background: url(../story/img/btn_chara24_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara24 a:hover {
	background: url(../story/img/btn_chara24.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara24"] ,ul#tab li.active[class~="chara24"] a,ul#tab li.active[class~="chara24"] a:hover {
	background: url(../story/img/btn_chara24.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara25 a {
	background: url(../story/img/btn_chara25_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara25 a:hover {
	background: url(../story/img/btn_chara25.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara25"] ,ul#tab li.active[class~="chara25"] a,ul#tab li.active[class~="chara25"] a:hover {
	background: url(../story/img/btn_chara25.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara26 a {
	background: url(../story/img/btn_chara26_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara26 a:hover {
	background: url(../story/img/btn_chara26.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara26"] ,ul#tab li.active[class~="chara26"] a,ul#tab li.active[class~="chara26"] a:hover {
	background: url(../story/img/btn_chara26.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara27 a {
	background: url(../story/img/btn_chara27_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara27 a:hover {
	background: url(../story/img/btn_chara27.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara27"] ,ul#tab li.active[class~="chara27"] a,ul#tab li.active[class~="chara27"] a:hover {
	background: url(../story/img/btn_chara27.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara28 a {
	background: url(../story/img/btn_chara28_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara28 a:hover {
	background: url(../story/img/btn_chara28.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara28"] ,ul#tab li.active[class~="chara28"] a,ul#tab li.active[class~="chara28"] a:hover {
	background: url(../story/img/btn_chara28.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara29 a {
	background: url(../story/img/btn_chara29_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara29 a:hover {
	background: url(../story/img/btn_chara29.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara29"] ,ul#tab li.active[class~="chara29"] a,ul#tab li.active[class~="chara29"] a:hover {
	background: url(../story/img/btn_chara29.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara30 a {
	background: url(../story/img/btn_chara30_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara30 a:hover {
	background: url(../story/img/btn_chara30.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara30"] ,ul#tab li.active[class~="chara30"] a,ul#tab li.active[class~="chara30"] a:hover {
	background: url(../story/img/btn_chara30.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara31 a {
	background: url(../story/img/btn_chara31_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara31 a:hover {
	background: url(../story/img/btn_chara31.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara31"] ,ul#tab li.active[class~="chara31"] a,ul#tab li.active[class~="chara31"] a:hover {
	background: url(../story/img/btn_chara31.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara32 a {
	background: url(../story/img/btn_chara32_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara32 a:hover {
	background: url(../story/img/btn_chara32.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara32"] ,ul#tab li.active[class~="chara32"] a,ul#tab li.active[class~="chara32"] a:hover {
	background: url(../story/img/btn_chara32.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara33 a {
	background: url(../story/img/btn_chara33_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara33 a:hover {
	background: url(../story/img/btn_chara33.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara33"] ,ul#tab li.active[class~="chara33"] a,ul#tab li.active[class~="chara33"] a:hover {
	background: url(../story/img/btn_chara33.png) no-repeat;
	background-size: cover;
}

ul#tab li.chara34 a {
	background: url(../story/img/btn_chara34_off.png) no-repeat;
	background-size: cover;
}
ul#tab li.chara34 a:hover {
	background: url(../story/img/btn_chara34.png) no-repeat;
	background-size: cover;
}
ul#tab li.active[class~="chara34"] ,ul#tab li.active[class~="chara34"] a,ul#tab li.active[class~="chara34"] a:hover {
	background: url(../story/img/btn_chara34.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;
}

/*--------切り替えボタン----------*/
nav.story-chara-Nav {
	background: url(../cards/img/bg_nav_cards.jpg) no-repeat;
	margin: 0 0 0px 0;
	padding: 10px 30px 0 30px;
	height:70px;
}

nav.story-chara-Nav p img {
	display: none;
}

nav.story-chara-Nav p.story,
nav.story-chara-Nav p.chara,
nav.story-chara-Nav p a {
	display: block;
	width: 300px;
	height: 50px;
}

nav.story-chara-Nav p.story,
nav.story-chara-Nav p.story a.hover-on:hover {
    float: left;
    margin-right: 20px;
    background: url(../story/img/btn_story_on.png) 0 -50px;
}

nav.story-chara-Nav p.story a.hover-on {
	background: url(../story/img/btn_story.png);
}

nav.story-chara-Nav p.chara,
nav.story-chara-Nav p.chara a.hover-on:hover {
	float: left;
	margin-right: 0;
	background: url(../story/img/btn_chara_on.png) 0 -50px;
}

nav.story-chara-Nav p.chara a.hover-on {
	background: url(../story/img/btn_chara.png);
}


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

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

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

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

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

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


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

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

body#story h2 {
	background: url(../story/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%;
}

.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,
ul#tab li.chara33{
	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#story p.btn01 img {
	display: none;
}

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

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

/*--------切り替えボタン---*/
nav.story-chara-Nav{
	background: url(../cards/img/bg_nav_cards.jpg) no-repeat;
	background-size: contain;
	margin: 0 0 20px 0;
	padding: 10px 10px 0 10px;
	height:40px;
}

nav.story-chara-Nav p img{
	display: block;
}

nav.story-chara-Nav p.story,
nav.story-chara-Nav p.chara {
	display: block;
	width: 49%;
	height: auto;
}

nav.story-chara-Nav p.story,
nav.story-chara-Nav p.story a:hover {
	float: left;
	margin-right: 2%;
	background: none;
}

nav.story-chara-Nav p.story a,
nav.story-chara-Nav p.chara a {
	width: 100%;
	height: auto;
	background: none;
}

nav.story-chara-Nav p.chara,
nav.story-chara-Nav p.chara a:hover {
	float: left;
	margin-right: 0;
	background: none;
}
nav.story-chara-Nav p.chara a.hover-on,
nav.story-chara-Nav p.chara a.hover-on:hover {
	background: none;
}
nav.story-chara-Nav p.story a.hover-on,
nav.story-chara-Nav p.story a.hover-on:hover {
	background:none;
}


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