@charset "utf-8";
/* CSS Document */

#primary > .attention {
	display: block;
	background: #fff;
	padding: 12px;
	font-size: 12px;
	margin-bottom: 12px;
	box-sizing: border-box;
}
#primary > .attention p {
	padding: 4px 0;
}




#primary li {
	list-style-type: none;
}
.shdw {
	-moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
	-o-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
	-ms-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
	-webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
}

.top_bnr {
	width: 100%;
	margin-top: 10px;
	text-align: center;
}
.top_bnr img {
	width: 50%;
}
@media print, screen and (max-width:800px) {
	.top_bnr {
		margin-top: 0px;
	}
}
@media print, screen and (max-width:480px) {
	.top_bnr img {
		width: 100%;
	}
}

/* --------------------------- */
#mgzn .cover img,
#mgzn .furoku img,
#mgzn .wrap li a,
#mgzn .ut {
	border: 6px solid #fff;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */  	
}
#mgzn .cover a:hover img,
#mgzn .wrap li a:hover {
	border: 6px solid #ff0;
}
#mgzn .vol a {
	display: block;
	overflow:hidden;
	height:0 !important;
	width: 100%;
	background-image: url(vol_bg.png);
}
#mgzn .vol span {
	position: absolute;
	display: block;
	background: url(vol.png);
	text-indent: -9999px;
}

#mgzn .wrap li a {
	display: block;
	overflow:hidden;
	height:0 !important;
	background-size: auto 100%;
}
#mgzn .jigou a { background: #ff337d url(jigou.png) center center no-repeat; }
#mgzn .dx a { background: #00bd9a url(dx.png) center center no-repeat; }

/* --------------------------- */
#cmcs {
	position: relative;
	background: url(cmcs_bg.png) no-repeat left top;
	float: left;
}
#cmcs h2 {
	height: auto;
	margin: auto;
	padding-top: 4px;
}
.bx-prev,
.bx-next {
	position: absolute;
	width: 25px;
	height: 25px;
	bottom:116px;
	bottom: 6px;
}
a.bx-prev ,
a.bx-next {
	display: block;
	overflow:hidden;
	height:0 !important;
	background-image: url(slider_btn.png);
}
/* ------------------------------ */
.row2 .netshop img,
.row2 .junior img {
	background: #c3f1fd;
	border: 4px solid #c3f1fd;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */  	
}
.row2 .netshop a:hover img,
.row2 .junior a:hover img {
	border: 4px solid #ff0;
	background: #ff0;
}
.row2 .btn li {
	display: inline-block;
}
/* ------------------------------ */
.policy { 
	text-align: center;
	padding: 16px 0;
	font-size: 12px;
}
.policy a { 
	color: #5f052c; 
}
/* ------------------------------ */
#secondary .news .latest {
	display: none;
}
/* ------------------------------ */
#snsbox {
	margin: auto;
	text-align: center;
}
#snsbox li {
	width: 30px;
	display: inline-block;
}
#snsbox li a {
	display: block;
	overflow:hidden;
	height:0 !important;
	height /* */: 30px;
	padding-top: 30px;
	background-image: url(/shared/img/sns.png);
	background-size: 30px auto;
	width: 100%;
}
#snsbox .fb a { background-position: 0 0; }
#snsbox .twt a { background-position: 0 -30px; }
#snsbox .line a { background-position: 0 -60px; }

#topPR2 {
	background: #ffb7d0;
	border: 6px solid #fff;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */  
	box-sizing: border-box;
	margin: 12px 0;
}
#topPR2 h2 {
	margin: 10px;
	font-size: 8px;
}
#topPR2 h2 img {
	height: 22px;
}
#topPR2 li img { 
	width: 100%;
	height: auto;
}

#topPR2 li {
	background: #fff;
	list-style-type: none;
	padding: 10px;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */  
	box-sizing: border-box;	
}
#topPR2 .ut iframe {
	border: none;
}

/* ------------------------------ */
@media print, screen and (min-width:801px) {
	#mgzn {
		position: relative;
	}
	#mgzn .cover {
		position: absolute;
		left: 158px;
		top: 0;
	}
	#mgzn .cover img {
		width: 280px;
		height: auto;
	}
	#mgzn .vol {
		width: 157px;
		height: 128px;
	}
	#mgzn .vol a {
		height /* */: 128px;
		padding-top: 128px;
		background-size: 157px auto;
	}
	#mgzn .vol span {
		width: 69px;
		height: 50px;
		top: 46px;
		left: 20px;
		background-size: 69px auto;
	}
	#mgzn .v01 span { background-position: 0 0;}
	#mgzn .v02 span { background-position: 0 -50px;}
	#mgzn .v03 span { background-position: 0 -100px;}
	#mgzn .v04 span { background-position: 0 -150px;}
	#mgzn .v05 span { background-position: 0 -201px;}
	#mgzn .v06 span { background-position: 0 -251px;}
	#mgzn .v07 span { background-position: 0 -301px;}
	#mgzn .v08 span { background-position: 0 -352px;}
	#mgzn .v09 span { background-position: 0 -402px;}
	#mgzn .v10 span { background-position: 0 -452px;}
	#mgzn .v11 span { background-position: 0 -502px;}
	#mgzn .v12 span { background-position: 0 -552px;}

	#mgzn ul {
		margin-top: 94px;
	}
	#mgzn li {
		width: 148px;
		margin-bottom: 12px;
	}
	#mgzn .wrap li a {
		height /* */: 78px;
		padding-top: 78px;
	}
	#mgzn .furoku {
		position: absolute;
		width: 298px;
		left: 458px;
		top:0;
	} 
	#mgzn .furoku img {
		width: 298px;
		height: auto;
		border: 6px solid #fff;
		border-radius: 10px;        /* CSS3草案 */  
		-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
		-moz-border-radius: 10px;   /* Firefox用 */  	
	} 
	#mgzn .furoku span {
		position:absolute;
		display: block;
		background-image: url(/shared/img/arr.png);
		width: 16px;
		height: 16px;
		background-position: -16px -16px;
		left: -10px;
		top: 110px;
	} 
	#mgzn .ut {
		position: absolute;
		width: 298px;
		height: 164px !important;
		left: 458px;
		top: 238px;
		border: 6px solid #fff;
		border-radius: 10px;        /* CSS3草案 */  
		-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
		-moz-border-radius: 10px;   /* Firefox用 */  
		padding-top: 0;	
	} 
	#mgzn .ut iframe {
		border:none;
	} 

	/* --------------------------- */
	.row2 { 
		position: relative;
		margin: 20px 0 10px;
	}
	#cmcs {
		width: 376px;
		height: 220px;
		float: left;
		background-size: 376px auto;
	}
	#cmcs h2 {
		width: 322px;
		margin: 8px auto 0;
	}
	#cmcs .cmcSlider {
		padding: 10px 35px 0;
		width: 306px;
	}
	#cmcs .cmcSlider li {
		float:left;
	}
	#cmcs .cmcSlider li img  {
		width: 94px;
		height: 146px;
		margin-right: 6px;
		border: 1px solid #DCDCDC;
	}
	#cmcs .cmcSlider  {
		height: 150px;
		overflow: hidden;
	}
	.bx-prev,
	.bx-next {
		width: 30px;
		height: 30px;
		bottom:116px;
		bottom: 5px;
	}
	a.bx-prev {
		left: 5px;
	}
	a.bx-next {
		right: 5px;
		background-position: -30px 0;
	}
	a.bx-prev ,
	a.bx-next {
		height /* */: 30px;
		padding-top: 30px;
		background-size: 60px auto;
		width: 30px;
	}
	a.bx-prev:hover ,
	a.bx-next:hover {
		filter: alpha(opacity=60);
		-moz-opacity: 0.6;
		opacity: 0.6;
	}
	
	.row2 .wrap {
		float: right;
		width: 380px;
	}
	.row2 .wrap img {
		width: 370px;
	}
	.row2 .netshop {
		margin-top: 12px;
	}
	/* ------------------------------ */
	#topNavi {
		margin-right: -6px;
	}
	#topNavi li {
		width: 148px;
		height: 58px;
		margin: 6px  6px 0px 0;
		float: left;
		font-size: 8px;
	}
	#topNavi a {
		border: 4px solid #c3f1fd;
		border-radius: 10px;        /* CSS3草案 */  
		-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
		-moz-border-radius: 10px;   /* Firefox用 */  	

		display: block;
		overflow:hidden;
		height:0 !important;
		height /* */: 50px;
		padding-top: 50px;
		background-image: url(topNavi.png);
		-moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
		-o-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
		-ms-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
		-webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
		box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
	}
	#topNavi a:hover {
		border: 4px solid #ff0;
	}
	#topNavi .n01 a { background-position: 0 0 }
	#topNavi .n02 a { background-position: 0 -50px }
	#topNavi .n03 a { background-position: 0 -100px }
	#topNavi .n04 a { background-position: 0 -150px }
	#topNavi .n05 a { background-position: 0 -200px }
	#topNavi .n06 a { background-position: 0 -250px }
	#topNavi .n07 a { background-position: 0 -300px }
	#topNavi .n08 a { background-position: 0 -350px }
	#topNavi .n09 a { background-position: 0 -400px }
	#topNavi .n10 a { background-position: 0 -450px }
	#topNavi .n11 a { background-position: 0 -500px }
	/* --------------------------- */
	#topGame {
		position: relative;
		background:url(game_bg.png);
		width: 768px;
		height: 203px;
		padding: 17px 0 0;
		margin-top: 20px;
	}
	#topGame h2 {
		background:url(game.png);
		width: 322px;
		height: 24px;
		display: block;
		margin: 0px 0 8px 32px;
		text-indent: -9999px;
	}
	#topGame .gmSlider {
		padding: 0 33px;
		width: 695px;
		height: 140px;
		overflow: hidden;
		z-index: 10;
	}
	#topGame .gmSlider li {
		width: 164px;
		float: left;
		margin-right: 13px;
	}
	#topGame .gmSlider li img {
		border: 4px solid #c3f1fd;
		border-radius: 6px;        /* CSS3草案 */  
		-webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
		-moz-border-radius: 6px;   /* Firefox用 */  	
	}
	#topGame .gmSlider li a:hover img {
		border: 4px solid #fff;
	}
	/* ------------------------------ */
	#topPR li {
		list-style-type: none;
		margin: 12px 0;
	}
	#topPR li img {
		margin-bottom: 3px;
		border: 1px solid #fff;
		width: 298px;
		height: auto;
	}

	/* ------------------------------ */
	#primary .bottom {
		margin: 20px 0 10px;
	}
	.policy,
	#snsbox { text-align: left }

	/* ------------------------------ */
	#topPR2 {
		width: 768px;
		background: #ffb7d0;
		border: 6px solid #fff;
		border-radius: 10px;        /* CSS3草案 */  
		-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
		-moz-border-radius: 10px;   /* Firefox用 */  
		box-sizing: border-box;	
	}
	#topPR2 h2 {
		padding-left: 11px;
	}
	#topPR2 ul {
		margin-left: 21px;
		margin-top: 14px;
	}
	#topPR2 li {
		float: left;
		width: 350px;
		margin-right: 14px;
		margin-bottom: 21px;
	}
	#topPR2 li:nth-child(even) {
		float: right;
	}
	#topPR li img {
		margin-bottom: 3px;
		border: 1px solid #fff;
		width: 298px;
		height: auto;
	}
}
/* ------------------------------ */

@media screen and (max-width:800px) {
	#mgzn .cover {
		float:left;
		padding-right: 6px;
		padding-bottom: 10px;
		width: 50%;
	}
	#mgzn .wrap {
		float:left;
		width: 50%;
	}
	#mgzn .wrap ul {
		width: 100%;
		float:left;
	}
	#mgzn .wrap li {
		width: 49%;
		float:left;
	}
	#mgzn .wrap .jigou { margin-right: 2%; }
	#mgzn .wrap li a {
		height /* */: 60px;
		padding-top: 60px;
		background-size: auto 100%;
	}
	#mgzn .cover img {
		width: 100%;
		height: auto;
	}
	#mgzn .furoku {
		float: left;
		width: 50%;
		margin-top: 8px;
	}
	#mgzn .vol {
		position:relative;
		width: 116px;
		height: 93px;
		margin-bottom: 8px;
	}
	#mgzn .vol a {
		height /* */: 93px;
		padding-top: 93px;
		background-size: 116px auto;
	}
	#mgzn .vol span {
		width: 55px;
		height: 40px;
		top: 33px;
		left: 12px;
		background-size: 55px auto;
	}
	#mgzn .v01 span { background-position: 0 0;}
	#mgzn .v02 span { background-position: 0 -40px;}
	#mgzn .v03 span { background-position: 0 -80px;}
	#mgzn .v04 span { background-position: 0 -120px;}
	#mgzn .v05 span { background-position: 0 -160px;}
	#mgzn .v06 span { background-position: 0 -200px;}
	#mgzn .v07 span { background-position: 0 -240px;}
	#mgzn .v08 span { background-position: 0 -280px;}
	#mgzn .v09 span { background-position: 0 -320px;}
	#mgzn .v10 span { background-position: 0 -360px;}
	#mgzn .v11 span { background-position: 0 -400px;}
	#mgzn .v12 span { background-position: 0 -440px;}

	#mgzn .ut { 
		width: 100%;
		clear: both;
	}
	
	/* --------------------------- */
	#cmcs {
		width: 310px;
		height: 182px;
		background-size: 310px auto;
		float: left;
		margin-bottom: 10px;
	}
	#cmcs h2 {
		width: 259px;
		margin: auto;
		padding-top: 4px;
	}
	#cmcs .cmcSlider {
		padding: 15px 40px 0;
		width: 310px;
	}
	#cmcs .cmcSlider li img  {
		width: 70px;
		height: auto;
	}
	.bx-prev,
	.bx-next {
		width: 25px;
		height: 25px;
		bottom:116px;
		bottom: 6px;
	}
	a.bx-prev {
		left: 4px;
	}
	a.bx-next {
		right: 4px;
		background-position: -25px 0;
	}
	a.bx-prev ,
	a.bx-next {
		height /* */: 25px;
		padding-top: 25px;
		background-size: 50px auto;
		width: 25px;
	}
	.row2 {
		padding-top: 12px;
	}
	.row2 .wrap {
		float: right;
		width: 50%;
		width: -webkit-calc(100% - 320px) ;
		width: calc(100% - 320px);
	}
	.row2 .junior {
		margin-bottom: 10px;
	}
	/* --------------------------- */
	#topNavi {
		background: #fff;
		margin: 10px auto;
		box-sizing: border-box;
		border: 1px solid #ff337d;
		border-top: none;
	}
	#topNavi li {
		position: relative;
		list-style-type: none;
		float: left;
		width: 50%;
		box-sizing: border-box;
		border-top: 1px solid #ff337d;
		font-size: 11px;
	}
	#topNavi li a {
		display: block;
		width: 100%;
		padding: 12px 4px;
		color: #ff337d;
		text-decoration: none;
	}
	#topNavi li span {
		position:absolute;
		display: block;
		width: 8px;
		height: 8px;
		background-image: url(/shared/img/arr.png);
		background-size: 16px auto;
		background-repeat: no-repeat;
		background-position: 0 0;
		top: 50%;
		margin-top: -4px;
		right:4px;
	}
	#topNavi li:nth-child(even) {
		border-left: 1px solid #ff337d;
	}
	/* --------------------------- */
	#topPR {
		text-align: center;
		padding: 8px 0px 20px;
	}
	#topPR li {
		max-width: 480px;
		list-style-type: none;
		padding: 10px;
		margin: 10px auto;
		background: #fff;
	}
	#topPR img,
	#topPR iframe {
		width: 100%;
	}
	
	#topPR2 ul {
		margin-left: 10px;
	}
	#topPR2 li {
		float: left;
		width: calc((100% - 20px)/2);
		margin-right: 10px;
		margin-bottom: 10px;
	}
	#topPR2 li:nth-child(even) {
		float: right;
	}
}
/* ------------------------------ */

@media screen and (max-width:480px) {
	#mgzn .cover { width: 60%; }
	#mgzn .wrap { width: 40%; }
	#mgzn .wrap li {
		width: 116px;
		margin-bottom: 6px;
		display: block;
		float: none !important;
	}
	#mgzn .wrap li a {
		height /* */: 70px;
		padding-top: 70px;
		background-size: auto 100%;
	}
	#mgzn .furoku {
		float: none;
		width: 100%;
		margin: 10px auto;
	}
	#cmcs {
		float: none;
		margin: 0px auto 10px;
	}
	.row2 .wrap {
		float: none;
		width: 100%;
	}
	.row2 li {
		float: none;
		width: 100%;
	}
	.row2 .btn {
		width: 100%;
		text-align: center;
	}
	.row2 .btn li {
		width: 50%;
		padding: 0 3px;
	}
	.row2 .netshop {
		margin: 10px 0;
	}

	#topPR2 ul {
		margin: 0px;
		padding: 0 10px;
	}
	#topPR2 li {
		float: none !important;
		width: 100%;
		margin: 10px 0;
	}
}