@charset "utf-8";

/* reset */ *{font-family: sans-serif;word-break:break-all;}body{font-size:14px;}html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,figure{margin:0;padding:0;}h1,h2,h3,h4,h5,h6{font-size:100%;}ol,ul{list-style:none;}img,body,html{border:0;}img{vertical-align:middle;}caption,th{text-align:left;}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block;}

/*=================================================================================
	xx.	base
===============================================================================*/
a	{
	text-decoration: none;
}
a:hover	{
	text-decoration: underline;
}

body {
	background: #fff;
}
#body {
	position: relative;
	background: #fff;
	padding-bottom: 30px;
}


/*=================================================================================
	xx.	layout
===============================================================================*/

/* head
------------------------------------------------------------------------------------------------ */
#header {
}
	#header .text {
		display: block;
		overflow: hidden;
		
		background: #fff;
	}
		/* catch phrase */
		#header #catchphrase {
			display: block;
			height: 50px;
			
			font-weight: bold;
			line-height: 50px;
		}
			#header #catchphrase strong {
				color: #f00;
			}
		
		/* information */
		#header #information {
			padding: 15px 0;
		}
			#header #information dl {
			}
				#header #information dt,
				#header #information dd {
					display: inline;
				}
				#header #information a {
					color: #333;
					text-decoration: underline;
				}
		
	
/* content
------------------------------------------------------------------------------------------------ */


/* footer
------------------------------------------------------------------------------------------------ */
#footer {
	color: #fff;
	background: #808080;
}
	/* subNavigation
	------------------------------------------------ */
	#footer .subNavigation {
		color: #333;
		background: #fff;
	}
		#footer .subNavigation span {
			color: #999;
		}
		#footer .subNavigation .btn_search span {
			color: #998c00;
		}
	
	/* copyright */
	#copyright {
	}
	
	/* top of page */
	#topOfPage {
	}
		#topOfPage a {
			display: block;
			
			color: #fff;
			background: #666;
			text-decoration: none;
		}



/*=================================================================================
	xx.	slider
=============================================================================== */
/* slider
------------------------------------------------------------------------------------------------ */
#feature {
}
	#slider .scene {
		overflow: hidden;
	}
		#slider .scene ul {
			position: relative;
		}
			#slider .scene li {
				float: left;
			}
	#slider .console {
		margin: 0 auto;
		text-align: center;
	}
		/* arrow */
		#slider_preview,
		#slider_next {
			position: relative;
			display: block;
			
			background: rgba(255, 234, 0, 0.9);
		}
		#slider_preview {
			float: left;
		}
		#slider_next {
			float: right;
		}
		#slider_preview:after,
		#slider_next:after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			display: block;
			
			-ms-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}
		
		/* page nation */
		#slider .console ul {
			display: inline-block;
			height: 8px;
			padding: 12px 0;
			line-height: 0;
		}
			#slider .console ul li {
				display: block;
				float: left;
				width: 8px;
				height: 8px;
				margin: 0 2px;
				
				background-color: #dedede;
				border-radius: 8px;
			}
			#slider .console ul li.current {
				background-color: #333;
			}

/* no slide
------------------------------------------------ */
#slider.no_slide .console {
	display: none;
}


/* list
------------------------------------------------------------------------------------------------ */
.description {
	position: relative;
	color: #333;
	background: #ccc;
}
	.description h2 {
		margin-bottom: 2px;
		font-size: 14px;
		line-height: 1.5;
	}
	.description p {
		font-size: 12px;
		line-height: 1.5;
	}
.featureItems .item {
	display: block;
	width: 300px;
}
	.featureItems .item a {
		display: block;
		color: #fff;
	}
	.featureItems .item a:visited {
		color: #999;
	}
		.featureItems .item .thumnail {
			display: block;
		}
		.featureItems .item .data {
			display: block;
			background: #333;
			line-height: 16px;
		}



/*=================================================================================
	xx.	category
=============================================================================== */
.hd_category {
	text-align: center;
	color: #fff;
	background: #333;
}



/*=================================================================================
	xx.	series
=============================================================================== */
/* tab navigation
------------------------------------------------------------------------------------------------ */
.series li {
	width: 25%;
}
.series a {
	padding: 45px 0 0 0;
	height: 0;
	border-width: 0 0 2px;
}

/* img */
.series a:after {
	content: '';
	position: absolute;
	top: 2px;
	left: 0;
	right: 0;
	bottom: 2px;
}
.series_all_ruby a:after { background-position: center 0; }
.series_jc a:after { background-position: center -45px; }
.series_yjc a:after { background-position: center -90px; }
.series_rmc a:after { background-position: center -135px; }
.series_all a:after { background-position: center -180px; }
.series_boy a:after { background-position: center -225px; }
.series_young a:after { background-position: center -270px; }
.series_girl a:after { background-position: center -315px; }

/* current */
.series .current a {
	padding: 43px 0 0 0;
	border-width: 2px;
}
.series .current a:after {
	top: 0;
}


/* color
------------------------------------------------------------------------------------------------ */
/* ALL
------------------------------------------------ */
.tab.all a,
.series_all_ruby a,
.series_all a { border-color: #f00; }
.series_all_ruby.current:after,
.series_all.current:after,
.tab.all .current:after { background-color: #f00; }

/* jc
------------------------------------------------ */
.jc .thumbnail .frame:after,
.tab.jc a,
.series_jc a,
.series_boy a,
.itemList .item.jc span.thumbnail,
.itemList .item.jc span.thumbnail:after,
.itemList .item.jc span.thumbnail img { border-color: #0096d4; }
.tab.jc .current:after,
.series_jc.current:after,
.series_boy.current:after,
#channel .jc dt { background-color: #0096d4; }

/* yjc
------------------------------------------------ */
.yjc .thumbnail .frame:after,
.tab.yjc a,
.series_yjc a,
.series_young a,
.itemList .item.yjc span.thumbnail,
.itemList .item.yjc span.thumbnail:after,
.itemList .item.yjc span.thumbnail img { border-color: #333; }
.tab.yjc .current:after,
.series_yjc.current:after,
.series_young.current:after,
#channel .yjc dt { background-color: #333; }

/* rmc mc
------------------------------------------------ */
.rmc .thumbnail .frame:after,
.tab.rmc a,
.series_rmc a,
.series_girl a,
.itemList .item.rmc span.thumbnail,
.itemList .item.rmc span.thumbnail:after,
.itemList .item.rmc span.thumbnail img { border-color: #ec008c; }
.tab.rmc .current:after,
.series_rmc.current:after,
.series_girl.current:after,
#channel .rmc dt { background-color: #ec008c; }

/* feature
------------------------------------------------ */
#headline.feature .thumbnail:after,
body.isPc .category_ranking .item.feature a:before,
.feature .thumbnail .frame:after,
.tab.feature a,
.series_feature a,
.itemList .item.feature span.thumbnail,
.itemList .item.feature span.thumbnail:after,
.itemList .item.feature span.thumbnail img { border-color: #6c0; }
.tab.feature .current:after,
.series_feature.current:after { background-color: #6c0; }

/* feature link
------------------------------------------------ */
.itemList .item.featureLink span.thumbnail,
.itemList .item.featureLink span.thumbnail:after,
.itemList .item.featureLink span.thumbnail img { border-color: #fff; }


/* feature series
------------------------------------------------ */
#feature .series.large .current:after { background-color: #f00; }
#feature .series.large a { border-color: #333; }
#feature .series.large .current a { border-color: #f00; }



/*=================================================================================
	xx.	navigation
=============================================================================== */
.navigation li a {
	display: block;
	text-align: center;
	vertical-align: middle;
}


/* general tab nabigation
------------------------------------------------------------------------------------------------ */
.tab {
	display: table;
	width: 100%;
}
	.tab ul {
		display: table-row;
	}
		.tab ul li {
			position: relative;
			display: table-cell;
			float: left;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
			.tab ul li a {
				position: relative;
				display: block;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				overflow: hidden;
				
				color: #333;
				background: #fff;
				border-style: solid;
			}
			
		/* current */
		.tab ul li.current:after {
			content: '';
			position: absolute;
			top: -6px;
			left: -6px;
			z-index: 2;
			display: block;
		}

/* <nav> in category
------------------------------------------------ */
#category {
	width: 100%;
	overflow: hidden;
	
	background: #666;
}
	#category li {
		display: block;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		float: left;
		
		background-color: #ccc;
	}
		#category a.hd_category {
			text-decoration: none;
		}
			
	/* disabled */
	#category li.disabled {
		background-color: #333;
	}
		#category li.disabled a {
			cursor: default;
		}


/* primary
------------------------------------------------------------------------------------------------ */
.nav_primary {
	position: relative;
	background: #ccc;
	border-bottom: 2px solid #b3b3b3;
}
.nav_primary:before,
.nav_primary:after {
	content: '';
	position: absolute;
	right: 50%;
	z-index: 1;
	display: block;
	width: 0;
	height: 0;
}
.nav_primary:before {
	bottom: -9px;
	border-top: 9px solid #b3b3b3;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	margin-right: -9px;
}
.nav_primary:after {
	bottom: -7px;
	border-top: 7px solid #ccc;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	margin-right: -7px;
}


/* secondary
------------------------------------------------------------------------------------------------ */
.nav_secondary {
	position: relative;
	background: #dedede;
	border-bottom: 2px solid #bfbfbf;
	padding-top: 10px;
}
.nav_secondary:before,
.nav_secondary:after {
	content: '';
	position: absolute;
	right: 50%;
	display: block;
	width: 0;
	height: 0;
}
.nav_secondary:before {
	bottom: -9px;
	border-top: 9px solid #bfbfbf;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	margin-right: -9px;
}
.nav_secondary:after {
	bottom: -7px;
	border-top: 7px solid #dedede;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	margin-right: -7px;
}
	.nav_secondary p {
		text-align: center;
		color: #333;
	}

/* syllabary
------------------------------------------------ */
#syllabary li {
	width: 10%;
}
	#syllabary li.disabled a {
		cursor: default;
		
		color: #999;
		background: #ccc;
	}



/*=================================================================================
	xx.	itemList
=============================================================================== */
.itemList .item {
	position: relative;
}
	.itemList .item a {
		color: #333;
	}
	.itemList .item a:visited {
		color: #999;
	}
		.itemList .item span,
		.itemList .item strong {
			display: block;
		}
		.itemList .item span.update {
			white-space: nowrap;
		}
		
		.itemList .item.featureLink .thumbnail {
			border-radius: 0;
		}
		
/* empty message */
.nodata {
	margin: 30px 0 0;
	font-size: 16px;
	text-align: center;
	color: #999;
}
		
/* rank
------------------------------------------------ */
.itemList .item .rank span {
	display: block;
	
	text-align: center;
}
.itemList .item span.rank span.gold,
.itemList .item span.rank span.silver,
.itemList .item span.rank span.bronze {
	color: #fff;
	background: transparent;
}
.itemList .item span.rank span.gold { background-position: 0 top; }
.itemList .item span.rank span.silver { background-position: 0 center !important; }
.itemList .item span.rank span.bronze { background-position: 0 bottom !important; }
		
/* feature
------------------------------------------------ */
.featureList .item > a {
	color: #333;
}

/* more
------------------------------------------------ */
.more {
	text-align: center;
}
	.more a:hover {
		opacity: 0.8;
	}



/*=================================================================================
	01.	homepage
=============================================================================== */
/* channel
------------------------------------------------ */
#channel {
	display:none;
}
	/* headline */
	#channel h2 {
		font-weight: bold;
		text-align: center;
		
		color: #fff;
		background: #333;
	}
	#channel h2:before {
		content: "";
		display: inline-block;
		margin-right: 10px;
	}
	
	/* figure */
	#channel .figure {
		display: none;
	}
	
	/* data */
	#channel .data {
	}
		/* navigation */
		#channel .navigation {
			border-bottom: 5px solid #ffea00;
		}
			#channel .navigation table {
				width: 100%;
				table-layout: fixed;
				border-collapse: collapse;
			}
				#channel .navigation td a {
					vertical-align: middle;
					
					font-weight: bold;
					text-align: center;
					
					color: #fff;
					background: #666;
				}
				#channel .navigation td a:hover {
					text-decoration: none;
				}
				#channel .navigation td~td {
					border-left: 1px solid #808080;
				}
				
				/* current */
				#channel .navigation td.current a {
					color: #333;
					background: #ffea00;
				}
		
		/* sunday */
		#channel .navigation td.sunday a {
			color: #fa6060;
		}
		
		/* saturday */
		#channel .navigation td.saturday a {
			color: #0cf;
		}
		#channel .navigation td.saturday.current a {
			color: #09f;
		}
		
		
		/* list */
		#channel .itemList {
			padding: 0;
		}
			#channel .itemList dl {
				display: table;
				width: 100%;
				height: 40px;
				padding: 0;
				
				color: #fff;
				background: #4d4d4d;
				border-bottom: 0 none;
			}
			#channel .itemList dl~dl {
				border-top: 1px solid #666;
			}
				#channel dt,
				#channel dd {
					display: table-cell;
					vertical-align: middle;
				}
				#channel dt {
					text-align: center;
				}
				#channel dd {
				}
					#channel dd a {
						color: #fff;
					}
					#channel dd span {
						color: #999;
					}
				
				#channel .color dt {
					background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzk5MDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzAwNjZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMGNjMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
					background: -moz-linear-gradient(left,  rgba(255,204,0,1) 0%, rgba(255,0,0,1) 25%, rgba(153,0,255,1) 50%, rgba(0,102,255,1) 75%, rgba(0,204,0,1) 100%);
					background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,204,0,1)), color-stop(25%,rgba(255,0,0,1)), color-stop(50%,rgba(153,0,255,1)), color-stop(75%,rgba(0,102,255,1)), color-stop(100%,rgba(0,204,0,1)));
					background: -webkit-linear-gradient(left,  rgba(255,204,0,1) 0%,rgba(255,0,0,1) 25%,rgba(153,0,255,1) 50%,rgba(0,102,255,1) 75%,rgba(0,204,0,1) 100%);
					background: -o-linear-gradient(left,  rgba(255,204,0,1) 0%,rgba(255,0,0,1) 25%,rgba(153,0,255,1) 50%,rgba(0,102,255,1) 75%,rgba(0,204,0,1) 100%);
					background: -ms-linear-gradient(left,  rgba(255,204,0,1) 0%,rgba(255,0,0,1) 25%,rgba(153,0,255,1) 50%,rgba(0,102,255,1) 75%,rgba(0,204,0,1) 100%);
					background: linear-gradient(to right,  rgba(255,204,0,1) 0%,rgba(255,0,0,1) 25%,rgba(153,0,255,1) 50%,rgba(0,102,255,1) 75%,rgba(0,204,0,1) 100%);
				}

/* feature
------------------------------------------------ */
#homepage #slider {
}

/* list
------------------------------------------------ */
#homepage #list {}
	/* ranking */
	#homepage #ranking .hd_sub {
		font-size: 12px;
		font-weight: bold;
		line-height: 25px;
		text-align: center;
		
		color: #fff;
		background: #999;
	}

/* SNS
------------------------------------------------ */
#homepage #sns {
}
	#homepage #sns .youtube {
		position: relative;
		height: 0;
		padding: 75% 0 0;
		overflow: hidden;
		
		background: #333;
	}
		#homepage #sns .youtube iframe {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
		}
	#homepage #sns .facebook {
	}
		#homepage #sns .facebook a {
			display: block;
			border: 2px solid #a5b6d6;
		}
	#homepage #sns .twitter {
		margin: 10px 0;
	}

/*14/08/28(木) 19:40:57*/
	#homepage #sns .official {
		margin-bottom: 20px;
	}
	#homepage #sns .official a {
		display: block;
		border: 2px solid #a5b6d6;
		line-height: 48px;
		padding-left: 8px;
		font-weight: bold;
		color: #000;
	}
	#homepage #sns .shindan {
		margin-top: 20px;
	}
	#homepage #sns .shindan img{
		width:300px;
	}
	.isMobile #homepage .shindan{
		text-align:center;
	}



/*=================================================================================
	01.	search
=============================================================================== */
/* search list
------------------------------------------------------------------------------------------------ */
#search .magazineList .item {
	position: relative;
	border-bottom: 1px solid #e6e6e6;
}
	#search .magazineList .item > a {
		display: table;
		
		color: #333;
	}
	#search .magazineList .item > a:after {
		content: "";
		position: absolute;
		top: 50%;
		
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
		#search .magazineList .item > a > span {
			display: table-cell;
			vertical-align: middle;
		}
		
		#search .magazineList .item .figure {
			text-align: center;
		}
		#search .magazineList .item .data {
		}
			#search .magazineList .item .data strong {
				display: block;
			}



/*=================================================================================
	02.	secondary dimension
=============================================================================== */
/* headline
------------------------------------------------------------------------------------------------ */
#headline {
	color: #fff;
	background: #404040;
}
	#headline .layoutWrapper {
		position: static;
		display: table;
	}
		#headline .thumbnail,
		#headline .data {
			display: table-cell;
			vertical-align: middle;
		}
			#headline .thumbnail .frame {
				position: relative;
			}
			
			#headline.color .data strong:after {
				content: '';
				display: inline-block;
				width: 36px;
				height: 14px;
				background: url('../img/icon_color.png') no-repeat;
				background-size: 36px 14px;
			}
			


/* feature
------------------------------------------------------------------------------------------------ */
/* headline */
#feature #headline {
}
	#feature #headline img {
		display: block;
		margin: 0 auto;
	}

/* descripttion */
#feature .description {
	position: relative;
	color: #333;
	background: #ccc;
}
	#feature .description h2 {
		margin-bottom: 2px;
		font-size: 14px;
		line-height: 1.5;
	}
	#feature .description p {
		font-size: 12px;
		line-height: 1.5;
	}
		#feature .description p a {
			text-decoration: underline;
			
			color: #333;
		}
#feature .featureItems .item {
	display: block;
	width: 300px;
}
	#feature .featureItems .item a {
		display: block;
		color: #fff;
	}
	#feature .featureItems .item a:visited {
		color: #999;
	}
		#feature .featureItems .item .thumnail {
			display: block;
		}
		#feature .featureItems .item .data {
			display: block;
			background: #333;
			line-height: 16px;
		}


/* shop
------------------------------------------------------------------------------------------------ */
#shop .headline {
	color: #fff;
	background: #4d4d4d;
}
#shop .attention {
	color: #666;
	overflow: hidden;
}
#shop .attention dt {
	float: left;
}
#shop .attention dd {
	margin-left: 12px;
}

.isPc #shop #shindan{
	float:right;
}
.isMobile #shop #shindan{
	text-align:center;
	margin:	25px 0;
}
.isPc #shop #shindan{
/*	margin-right:88px;*/
	margin: 15px 88px 15px 0;
}

/* magazine
------------------------------------------------------------------------------------------------ */
#magazine #outline {
	text-align: center;
	
	color: #333;
}
	#magazine #outline a {
		text-decoration: underline;
		
		color: #333;
	}



/*=================================================================================
	xx.	clearfix
===============================================================================*/
body.isPc .layoutWrapper:after,
.navigation ul:after,
.tab ul:after,
.itemList:after,
.featureItems:after,
.titleList:after,
#footer:after {
	content: '';
	display: block;
	clear: both;
	width: 0;
	height: 0;
}