@charset "utf-8";

/*=================================================================================
	xx.	base
===============================================================================*/
body.isMobile * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
	-webkit-text-size-adjust: none;
}

body.isMobile {
	background: #333;
}



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

/* header
------------------------------------------------------------------------------------------------ */
body.isMobile #header {
	position: relative;
}
	/* title */
	body.isMobile #header .title {
		height: 50px;
		overflow: hidden;	
	}
		body.isMobile #header.homepage .title .layoutWrapper:before {
			content: "";
			position: absolute;
			right: 50%;
			top: 0;
			display: block;
			width: 37px;
			height: 50px;
			margin-right: 52px;
			
			background: url(../img/sp/logo_mbc_sub.gif) no-repeat center center;
			background-size: 37px 34px;
		}
		body.isMobile #header .title h1 {
			display: block;
			width: 82px;
			height: 0;
			padding: 28px 0 0;
			margin: 11px auto;
			overflow: hidden;
			
			background: url(../img/sp/logo_mbc.gif) no-repeat;
			background-size: 82px 28px;
		}
		
		/* return to homepage */
		body.isMobile #header .btn_homepage {
			position: absolute;
			left: 5px;
			top: 10px;
			display: block;
			width: 35px;
			height: 0;
			padding: 30px 0 0;
			overflow: hidden;
			
			background: url(../img/sp/btn_homepage.gif) no-repeat;
			background-size: 35px 30px;
		}
		
		/* search */
		body.isMobile #header .btn_search {
			position: absolute;
			right: 2px;
			top: 10px;
			display: block;
			width: 95px;
			height: 0;
			padding: 30px 0 0;
			overflow: hidden;
			
			background: url(../img/sp/btn_search_head.gif) no-repeat;
			background-size: 95px 30px;
		}
	
	/* text */
	body.isMobile #header .text {
	}
		body.isMobile #header #catchphrase {
			font-size: 16px;
			text-align: center;
		}
		body.isMobile #header .text #information {
			display: block;
			margin: 0 10px 10px 10px;
			padding: 5px 10px;
			
			font-size: 12px;
			font-weight: bold;
			line-height: 24px;
			text-align: left;
			
			border: 1px solid #ccc;
		}
			body.isMobile #header .text #information dt {
				display: none;
			}


/* content
------------------------------------------------------------------------------------------------ */
body.isMobile .content {
	position: relative;
	padding-bottom: 30px;
	
	background: #fff;
}


/* footer
------------------------------------------------------------------------------------------------ */
body.isMobile #footer {
	line-height: 16px;
	overflow: hidden;
	
	border-bottom: 15px solid #333;
}

	/* subNavigation
	------------------------------------------------ */
	body.isMobile #footer .subNavigation {
		padding: 0 0 50px;
		overflow: hidden;
	}
			body.isMobile #footer .subNavigation div div {
				position: relative;
			}
			body.isMobile #footer .subNavigation div div:after {
				content: "";
				position: absolute;
				top: 50%;
				right: 20px;
				display: block;
				width: 6px;
				height: 6px;
				margin-top: -5px;
				
				border-top: 2px solid #666;
				border-right: 2px solid #666;
				
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}
				body.isMobile #footer .subNavigation a {
					display: table;
					width: 100%;
					height: 40px;
					
					color: #333;
				}
					body.isMobile #footer .subNavigation a strong,
					body.isMobile #footer .subNavigation a span {
						display: table-cell;
						vertical-align: middle;
					}
					body.isMobile #footer .subNavigation a span {
						max-width: 50%;
						padding-right: 24px;
						height: 24px;
						
						font-size: 10px;
						text-align: right;
						line-height: 12px;
					}
					@media only screen and (min-width: 420px) {
						body.isMobile #footer .subNavigation div:not(.btn_search) a span {
							padding-top: 3px;
						}
							body.isMobile #footer .subNavigation a span br {
								display: none;
							}
					}
		
		/* search */
		body.isMobile #footer .subNavigation .btn_search {
			margin-bottom: 10px;
			
			background: #ffea00;
		}
		body.isMobile #footer .subNavigation .btn_search:after {
			margin-top: -4px;
		}
			body.isMobile #footer .subNavigation .btn_search a {
			}
				body.isMobile #footer .subNavigation .btn_search strong {
					padding-left: 45px;
					
					background: url(../img/sp/icon_search.gif) no-repeat 20px center;
					background-size: 15px 15px;
				}
				body.isMobile #footer .subNavigation .btn_search span {
					padding-right: 35px;
				}
		
		/* shop */
		body.isMobile #footer .subNavigation .btn_shop {
			padding: 0 10px 5px;
		}
			body.isMobile #footer .subNavigation .btn_shop a {
				border: 1px solid #e5e5e5;
				background: #f2f2f2;
			}
				body.isMobile #footer .subNavigation .btn_shop a strong {
					padding-left: 34px;
					
					background: url(../img/sp/icon_shop.gif) no-repeat 9px center;
					background-size: 15px 15px;
				}
	
	/* s-manga.net */
	body.isMobile #footer .subNavigation .btn_sMangaNet {
		padding: 0 10px 5px;
	}
		body.isMobile #footer .subNavigation .btn_sMangaNet a {
			border: 1px solid #e5e5e5;
		}
			body.isMobile #footer .subNavigation .btn_sMangaNet strong {
				display: inline-block;
				margin: 5px 0 0 9px;
				width: 114px;
				height: 0;
				padding: 28px 0 0;
				overflow: hidden;
				
				background: url(../img/sp/logo_sMangaNet.gif) no-repeat;
				background-size: 114px 28px;
			}
	
	/* mekke */
	body.isMobile #footer .subNavigation .btn_mekke {
		padding: 0 10px 5px;
	}
		body.isMobile #footer .subNavigation .btn_mekke a {
			border: 1px solid #e5e5e5;
		}
			body.isMobile #footer .subNavigation .btn_mekke strong {
				display: inline-block;
				margin: 5px 0 0 9px;
				width: 114px;
				height: 0;
				padding: 28px 0 0;
				overflow: hidden;
				
				background: url(../img/sp/logo_mekke.gif) no-repeat;
				background-size: 114px 28px;
			}
			
	/* about
	------------------------------------------------ */
	body.isMobile #footer .about {
		position: absolute;
		display: block;
		width: 100%;
		margin-top: -35px;
		
		text-align: right;
		line-height: 20px;
	}
		body.isMobile #footer .about a {
			position: relative;
			display: block;
			padding: 0 35px 0 0;
			
			font-size: 12px;
			
			color: #333;
		}
		body.isMobile #footer .about a:after {
			content: "";
			position: absolute;
			top: 50%;
			right: 21px;
			display: block;
			width: 6px;
			height: 6px;
			margin-top: -5px;
			
			border-top: 2px solid #666;
			border-right: 2px solid #666;
			
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}
			
	/* copyright
	------------------------------------------------ */
	body.isMobile #copyright {
		float: left;
		font-family: 'helvetica', sans-serif;
		font-size: 10px;
		padding: 3px 10px 0;
	}
	
	/* top of page
	------------------------------------------------ */
	body.isMobile #topOfPage {
		float: right;
	}
		body.isMobile #topOfPage a {
			padding: 3px 5px 0;
			
			font-size: 9px;
		}
		body.isMobile #topOfPage a:before {
			content: url('../img/arrow_topOfPage.png') no-repeat;
			margin-right: 12px;
			zoom: 0.5;
			vertical-align: middle;
		}



/*=================================================================================
	xx.	slider
=============================================================================== */
body.isMobile #slider .scene {
	position: relative;
	height: 160px;
	overflow: hidden;
}
	body.isMobile #slider .scene ul {
		position: absolute; 
		width: 1600px;
		height: 160px;
		overflow: hidden;
	}
		body.isMobile #slider .scene li {
			display: block;
			width: 320px;
			height: 160px;
		}
body.isMobile #slider .console {
	max-width: 100%;
	height: 50px;
}
		body.isMobile #slider_preview,
		body.isMobile #slider_next {
			position: relative;
			display: block;
			width: 35px;
			height: 35px;
			
			background: rgba(255, 234, 0, 0.9);
		}
		body.isMobile #slider_preview:after,
		body.isMobile #slider_next:after {
			width: 6px;
			height: 6px;
		}
		body.isMobile #slider_preview:after {
			margin: -4px -4px 0;
			
			border-bottom: 3px solid #333;
			border-left: 3px solid #333;
		}
		body.isMobile #slider_next:after {
			margin: -4px 0 0 -6px;
			border-top: 3px solid #333;
			border-right: 3px solid #333;
		}
		body.isMobile #slider .console ul {
			padding: 16px 0;
		}

/* no slide
------------------------------------------------ */
body.isMobile #slider.no_slide {
	height: 155px;
	margin-bottom: 20px;
}


/*=================================================================================
	xx.	category
=============================================================================== */
body.isMobile .hd_category {
	height: 60px;
	padding: 4px 0 0 0;
	
	line-height: 1.1;
}
body.isMobile .hd_category:before {
	content: '';
	display: block;
	width: 30px;
	height: 25px;
	margin: 0 auto 2px;
	
	background-image: url('../img/category.png');
	background-repeat: no-repeat;
	background-position-y: top;
	background-size: 180px 50px;
}
body.isMobile .category_new .hd_category:before { background-position-x: 0; }
body.isMobile .category_feature .hd_category:before { background-position-x: -30px; }
body.isMobile .category_ranking .hd_category:before { background-position-x: -60px; }
body.isMobile .category_magazine .hd_category:before { background-position-x: -90px; }
body.isMobile .category_title .hd_category:before { background-position-x: -120px; }
body.isMobile .category_author .hd_category:before { background-position-x: -150px; }

	/* sub text */
	body.isMobile .hd_category span {
		font-size: 11px;
	}

/* current */
body.isMobile .current .hd_category {
	color: #333;
	background: #ccc;
}
body.isMobile .current .hd_category:before {
	background-position-y: bottom;
}



/*=================================================================================
	xx.	series
=============================================================================== */
body.isMobile .series a:after {
	background-repeat: no-repeat;
	background-image: url('../img/sp/series.gif');
	-webkit-background-size: 76px 180px;
	background-size: 76px 360px;
}

/* feature */
body.isMobile #feature .series a:after {
	background-image: url('../img/sp/series_feature.gif');
	-webkit-background-size: 76px 360px;
	background-size: 76px 360px;
}

body.isMobile #feature .series .series_all a:after { background-position: center 0; }
body.isMobile #feature .series .series_feature a:after { background-position: center -45px; }
body.isMobile #feature .series .series_campaign a:after { background-position: center -90px; }
body.isMobile #feature .series .series_long a:after { background-position: center -135px; }

body.isMobile #feature .series .current.series_all a:after { background-position: center -180px; }
body.isMobile #feature .series .current.series_feature a:after { background-position: center -225px; }
body.isMobile #feature .series .current.series_campaign a:after { background-position: center -270px; }
body.isMobile #feature .series .current.series_long a:after { background-position: center -315px; }


/*=================================================================================
	xx.	navigation
=============================================================================== */
/* general tab nabigation
------------------------------------------------------------------------------------------------ */
body.isMobile .tab {
	width: 100%;
}
	body.isMobile .tab li~li {
		padding: 0 0 0 1px;
	}
	body.isMobile .tab li.current:after {
		width: 18px;
		height: 18px;
		
		background-image: url('../img/icon_currentCheck.png');
		background-size: 18px 18px;
		border-radius: 18px;
	}

/* <nav> in category
------------------------------------------------ */
body.isMobile #category {
	position: relative;
	height: 60px;
}
body.isMobile #category li {
	position: absolute;
	top: 0;
	
	font-size: 12px;
	font-weight: bold;
}
body.isMobile #category li:first-child {
	left: 0;
	width: 33%;
}
body.isMobile #category li:first-child + li {
	left: 33%;
	right: 33%;
}
body.isMobile #category li:last-child {
	right: 0;
	width: 33%;
}
body.isMobile #category li~li {
	border-left: 1px solid #ccc;
}

body.isMobile #category li.category_new a:before {
	margin-bottom: 11px;
}

/* primary
------------------------------------------------------------------------------------------------ */
body.isMobile .nav_primary {
	padding: 2px 8px 3px;
}
	body.isMobile .nav_primary .series .tab {
		margin: 8px 0 5px;
	}


/* secondary
------------------------------------------------------------------------------------------------ */
body.isMobile .nav_secondary {
	padding: 10px 8px;
}
	/* text */
	body.isMobile .nav_secondary p {
		font-size: 14px;
		line-height: 35px;
	}
	
/* syllabary
------------------------------------------------ */
body.isMobile #syllabary {
	padding-top: 2px;
}
	body.isMobile #syllabary li {
		width: 20%;
		padding-bottom: 1px;
	}
	body.isMobile #syllabary li:nth-child(6) {
		padding-left: 0;
	}
	body.isMobile #syllabary li a {
		width: 100%;
		height: 40px;
		
		line-height: 40px;
		border-width: 0;
	}
	body.isMobile #syllabary li.current a {
		border-width: 2px;
		line-height: 36px;
	}
	/* delete effect */
	body.isMobile #syllabary a:hover {
		text-decoration: none;
	}
	body.isMobile #syllabary li.disabled a {
		-webkit-tap-highlight-color: transparent;
	}



/*=================================================================================
	xx.	itemList
=============================================================================== */
body.isMobile .itemList .item {
	display: table;
	width: 100%;
	
	border-bottom: 1px solid #ccc;
}
	body.isMobile .itemList .item a {
		display: block;
	}
	body.isMobile .itemList .item.book a {
		background: url('../img/icon_play.png') no-repeat right center;
		background-size: 26px 26px;
	}
	body.isMobile .itemList .item:not(.book) a {
		position: relative;
	}
	body.isMobile .itemList .item:not(.book) a:after {
		content: '';
		position: absolute;
		top: 50%;
		right: 10px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0; 
		
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		
		border-top: 2px solid #666;
		border-right: 2px solid #666;
	}
	
	/* ----- */
	body.isMobile .itemList .item span.rank,
	body.isMobile .itemList .item span.thumbnail,
	body.isMobile .itemList .item span.data {
		display: table-cell;
		vertical-align: middle;
	}
	
	/* rank
	------------------------------------------------ */
	body.isMobile .itemList .item span.rank {
		padding: 5px 0;
		vertical-align: middle;
	}
	body.isMobile .itemList .item span.rank+span.thumbnail {
		padding: 5px 8px 5px 0;
	}
		body.isMobile .itemList .item span.rank span {
			width: 32px;
			margin: 0 0 0 1px;
			
			font-size: 10px;
			font-weight: bold;
			line-height: 20px;
			text-align: center;
			white-space: nowrap;
		}
		body.isMobile .itemList .item span.rank span.gold,
		body.isMobile .itemList .item span.rank span.silver,
		body.isMobile .itemList .item span.rank span.bronze {
			width: 28px;
			height: 22px;
			margin: 0 2px 0 3px;
			overflow: hidden;
			
			line-height: 32px;
			
			background-image: url('../img/icon_crown.png');
			background-repeat: no-repeat;
			background-size:  28px 66px;
		}
		
	/* thumbnail
	------------------------------------------------ */
	body.isMobile .itemList .item span.thumbnail {
		padding: 5px 8px;
	}
		body.isMobile .itemList .item span.thumbnail img {
			width: 50px;
/*			height: 50px;*/
			border-style: solid;
			border-width: 2px;
			border-radius: 5px;
		}
/*
		body.isMobile .itemList .item span.thumbnail:after {
			content: '';
			position: absolute;
			display: block;
			width: 46px;
			height: 46px;
			margin-top: -50px;
			border-style: solid;
			border-width: 2px;
			border-radius: 5px;
		}
*/
	/* data
	------------------------------------------------ */
	body.isMobile .itemList .item span.data {
		padding: 10px 28px 10px 0;
		line-height: 1.2;
		width: 100%;
	}
		body.isMobile .itemList .item span.sub {
			font-size: 10px;
		}
		body.isMobile .itemList .item strong {
			font-size: 14px;
		}
		body.isMobile .itemList .item.color span.data,
		body.isMobile .itemList .item.featureLink span.data {
			position: relative;
			padding-right: 68px;
		}
		/* color */
		body.isMobile .itemList .item.color span.data:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 28px;
			width: 35px;
			height: 12px;
			margin-top: -6px;
			display: block;
			background: url('../img/icon_color.png') no-repeat right center;
			background-size: 35px 12px;
		}
		/* color */
		body.isMobile .itemList .item.featureLink span.data:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 28px;
			width: 35px;
			height: 12px;
			margin-top: -6px;
			display: block;
			background: url('../img/icon_feature.png') no-repeat right center;
			background-size: 35px 12px;
		}
		
	/* separator
	------------------------------------------------ */
	body.isMobile .itemList .separator {
		display: none;
	}


/* featureList
------------------------------------------------------------------------------------------------ */
body.isMobile .featureList .item {
	width: 100%;
	
	border-bottom: 1px solid #ccc;
}
	body.isMobile .featureList .item a {
		display: block;
	}
		body.isMobile .featureList .thumbnail {
			display: block;
			padding: 20px 10px 0;
			
			text-align: center;
		}
			body.isMobile .featureList .thumbnail img {
				max-width: 300px;
				max-height: 150px;
				width: auto;
				height: auto;
			}
		body.isMobile .featureList .data {
			display: block;
			padding: 10px 10px 20px;
			
			line-height: 1.4;
		}
			body.isMobile .featureList .data strong {
				display: block;
				
				font-size: 14px;
				font-weight: bold;
			}
			body.isMobile .featureList .data span {
				display: block;
				
				font-size: 12px;
			}
				body.isMobile .featureList .data span a {
					display: inline;
					
					text-decoration: underline;
					
					color: #333;
				}

/* more
------------------------------------------------------------------------------------------------ */
body.isMobile .more {
	padding-top: 15px;
}



/*=================================================================================
	01.	homepage
=============================================================================== */
/* channel
------------------------------------------------ */
body.isMobile #channel {
	margin-bottom: 25px;
}
	/* headline */
	body.isMobile #channel h2 {
		padding: 5px 0;
		
		line-height: 20px;
	}
	body.isMobile #channel h2:before {
		width: 20px;
		height: 20px;
		vertical-align: -4px;
		
		background: url(../img/sp/icon_channel.gif) no-repeat;
		background-size: 20px 20px;
	}
	
	/* figure */
	body.isMobile #channel .figure {
	}
	
	/* data */
	body.isMobile #channel .data {
	}
	
		/* navigation */
		body.isMobile #channel .navigation table {
		}
			body.isMobile #channel .navigation td a {
				display: block;
				
				
				line-height: 40px;
				
				font-size: 12px;
				font-weight: bold;
				white-space: nowrap;
			}
		
		/* list */
		body.isMobile #channel dl {
			position: relative;
			display: block;
			width: 100%;
			height: 40px;
			overflow: hidden;
		}
			body.isMobile #channel dt {
				width: 45px;
				height: 40px;
			}
				body.isMobile #channel dt span {
					display: inline-block;
					width: 45px;
					height: 0;
					padding: 40px 0 0;
					overflow: hidden;
					
					background: url(../img/sp/channel.png) no-repeat;
					background-size: 180px 40px;
				}
				body.isMobile #channel .color dt span { background-position: 0 0; }
				body.isMobile #channel .jc dt span { background-position: -45px 0; }
				body.isMobile #channel .yjc dt span { background-position: -90px 0; }
				body.isMobile #channel .rmc dt span { background-position: -135px 0; }
				
			body.isMobile #channel dd {
				height: 40px;
				overflow: hidden;
			}
				body.isMobile #channel dd a,
				body.isMobile #channel dd span {
					position: absolute;
					top: 0;
					left: 45px;
					right: 0;
					bottom: 0;
					display: block;
					height: 40px;
					padding: 6px 10px;
					overflow: hidden;
					
					line-height: 28px;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				body.isMobile #channel dd a {
					padding: 6px 28px 6px 10px;
					
					background: url('../img/icon_play.png') no-repeat right center;
					background-size: 26px 26px;
				}
				body.isMobile #channel dd a:after {
					content: none;
					display: none;
				}
	
	/* more */
	body.isMobile #channel .more {
		padding: 0;
	}
		body.isMobile #channel .more a {
			display: block;
			width: 140px;
			height: 0;
			padding: 30px 0 0;
			margin: 10px auto 0;
			overflow: hidden;
			
			background: url(../img/sp/btn_more_channel.gif) no-repeat;
			background-size: 140px 60px; 
		}
	
	/* full */
	body.isMobile #channel.full dl,
	body.isMobile #channel.full dt,
	body.isMobile #channel.full dd {
		height: auto;
	}
	body.isMobile #channel.full dd span,
	body.isMobile #channel.full dd a {
		position: relative;
		left: 0;
		height: auto;
					
		line-height: 1.4;
		white-space: normal;
		text-overflow: initial;
	}
	body.isMobile #channel.full .more a {
		background-position: center bottom;
	}

/* feature
------------------------------------------------ */
body.isMobile #homepage #slider .btn_continuance {
	display: none;
}

/* item list */
body.isMobile #homepage #slider .featureItems {
	display: none;
}

/* list
------------------------------------------------ */
body.isMobile #homepage #list {
	margin: 0 0 25px;
}
	/* ranking */
	body.isMobile #homepage #ranking .hd_sub {
		border-top: 5px solid #ccc;
	}

/* SNS
------------------------------------------------ */
body.isMobile #homepage #sns {
	padding: 0 10px;
}
	@media only screen and (min-width: 420px) {
		body.isMobile #homepage #sns .youtube {
			height: auto;
			padding: 0;
			overflow: hidden;
			
			text-align: center;
		}
			body.isMobile #homepage #sns .youtube iframe {
				position: static;
				width: 400px;
				height: 300px;
				margin: 0 auto;
				vertical-align: top;
			}
		body.isMobile.isGalaxyS2 #homepage #sns .youtube {
			width: 100%;
			height: 225px;
		}
			body.isMobile.isGalaxyS2 #homepage #sns .youtube iframe {
				width: 300px;
				height: 225px;
			}
	}
	@media only screen and (min-width: 700px) {
		body.isMobile #homepage #sns .youtube iframe {
			width: 720px;
			height: 540px;
		}
	}
		body.isMobile #homepage #sns .facebook a {
			position: relative;
			height: 0;
			margin: 25px 0;
			padding: 46px 0 0;
			overflow: hidden;
			
			background: url(../img/sp/btn_facebook.gif) no-repeat center center;
			background-size: 181px 26px;
/*			background-size: 176px 15px;*/
		}
			body.isMobile #homepage #sns .facebook a:before,
			body.isMobile #homepage #sns .facebook a:after {
				content: "";
				position: absolute;
			
			}
			body.isMobile #homepage #sns .facebook a:before {
				top: 6px;
				left: 6px;
				width: 35px;
				height: 0;
				padding: 35px 0 0;
				overflow: hidden;
				
				background: url(../img/sp/icon_facebook.gif) no-repeat center center;
				background-size: 35px 35px;
			}
			body.isMobile #homepage #sns .facebook a:after {
				top: 50%;
				right: 8px;
				width: 6px;
				height: 6px;
				margin-top: -4px;
				
				border-top: 2px solid #999;
				border-right: 2px solid #999;
				
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}
	body.isMobile #homepage #sns .twitter {
	}
		body.isMobile #homepage #sns .twitter iframe {
			display: block;
			margin: 0 auto;
		}



/*=================================================================================
	01.	search
=============================================================================== */
body.isMobile #search {
	padding-top: 20px;
}

/* magazine list
------------------------------------------------ */
body.isMobile #search .magazineList {
}
	body.isMobile #search .magazineList a:after {
		right: 11px;
		width: 6px;
		height: 6px;
		maargin-height: -4px;
		
		border-top: 2px solid #666;
		border-right: 2px solid #666;
	}
		body.isMobile #search .magazineList .figure {
			width: 50%;
			padding: 6px;
		}
			body.isMobile #search .magazineList .figure img {
				max-width: 100%;
				maz-height: 100%;
			}
		body.isMobile #search .magazineList .data {
			width: 50%;
			padding: 15px 24px 15px 0;
			
			font-size: 12px;
			line-height: 1.3;
		}


/*=================================================================================
	02.	secondary dimension
=============================================================================== */
/* headline
------------------------------------------------------------------------------------------------ */
body.isMobile #headline {}
	body.isMobile #headline .thumbnail {
		padding: 10px 8px;
		width: 50px;
	}
	body.isMobile #headline .thumbnail .frame {
		display: block;
		width: 50px;
		height: 50px;
	}
	body.isMobile #headline .thumbnail .frame:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 46px;
		height: 46px;
		
		border-style: solid;
		border-width: 2px;
		border-radius: 5px;
	}
		body.isMobile #headline .thumbnail img {
			width: 50px;
			height: 50px;
			border-radius: 5px;
		}
	
	body.isMobile #headline .data {
		padding: 5px 10px 5px 0;
	}
		body.isMobile #headline .data strong {
			font-size: 14px;
			line-height: 1.2;
		}
		body.isMobile #headline.color .data strong:after {
			vertical-align: -1px;
			margin: 0 10px;
		}
		body.isMobile #headline .data .sub {
			display: block;
			font-size: 12px;
		}
	body.isMobile #toTitleList {
		position: absolute;
		right: 10px;
		bottom: 30px;
	}
		body.isMobile #toTitleList a {
			display: inline-block;
			padding: 0 0 0 7px;
			width: 130px;
			
			font-size: 12px;
			color: #333;
			background: url('../img/sp/btn_toTitleList.gif') no-repeat;
			background-size: 130px 30px;
			line-height: 30px;
		}


/* feature
------------------------------------------------------------------------------------------------ */
body.isMobile .description:after {
	content: '';
	position: absolute;
	right: 50%;
	z-index: 1;
	display: block;
	width: 0;
	height: 0;
	bottom: -7px;
	border-top: 7px solid #ccc;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	margin-right: -7px;
}
	body.isMobile .description .layoutWrapper {
		padding: 10px;
	}
body.isMobile .featureItems {
	padding: 10px 10px 0;
}
	body.isMobile .featureItems .item {
		margin: 0 auto 15px;
	}
	body.isMobile .featureItems .row:last-child .item:last-child {
		margin-bottom: 0;
	}
		body.isMobile .featureItems .data {
			position: relative;
			min-height: 33px;
			padding: 8px 34px 8px 10px;
			background: #333;
		}
		body.isMobile .featureItems .data:after {
			content: '';
			position: absolute;
			right: 4px;
			bottom: 50%;
			display: block;
			width: 26px;
			height: 26px;
			margin-bottom: -13px;
			
			background: url('../img/icon_play.png') no-repeat;
			background-size: 26px 26px;
		}
			body.isMobile .featureItems .item strong {
				font-size: 14px;
			}
			body.isMobile .featureItems .item .sub {
				font-size: 10px;
			}


/* shop
------------------------------------------------------------------------------------------------ */
body.isMobile #shop .headline {
	color: #fff;
	background: #4d4d4d;
}
	body.isMobile #shop .headline h2 {
		margin: 0 10px;
		padding-left: 35px;
		
		font-size: 14px;
		line-height: 50px;
		background: url('../img/icon_cart.png') no-repeat left center;
		background-size: 25px 20px;
	}
body.isMobile #shop .attention {
	padding: 15px 10px;
	
	font-size: 12px;
}
body.isMobile #shop .itemList {
	border-top: 1px solid #ccc;
}
	body.isMobile #shop .itemList .item a {
		display: table;
		padding-left: 10px;
		width: 100%;
		height: 50px;
	}


/* author
------------------------------------------------------------------------------------------------ */
body.isMobile #author .itemList {
	margin-bottom: 0;
}
	body.isMobile #author .itemList .item a {
		display: table;
		width: 100%;
		height: 50px;
	}


/* title
------------------------------------------------------------------------------------------------ */
body.isMobile #title .itemList {
	margin-bottom: 50px;
}
	body.isMobile #title .itemList .item .volume {
		display: none;
	}


/* magazine
------------------------------------------------------------------------------------------------ */
/* outline
------------------------------------------------ */
body.isMobile #magazine #outline {
}
	body.isMobile #magazine #outline .figure {
		padding: 12px 0;
	}
		body.isMobile #magazine #outline .figure img {
			max-width: 147px;
		}
	body.isMobile #magazine #outline .data {
		display: block;
		margin-bottom: 20px;
		
		line-height: 1.2;
	}
		body.isMobile #magazine #outline .data strong {
			display: block;
		}
		body.isMobile #magazine #outline .data dt {
			display: none;
		}

/* navigation
------------------------------------------------ */
body.isMobile #magazine #navigation {
}
	body.isMobile #magazine #navigation ul {
		display: table;
		table-layout: fixed;
		border-collapse: collapse;
		width: 100%;
		height: 52px;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
		body.isMobile #magazine #navigation ul li {
			display: table-cell;
			width: 50%;
			vertical-align: middle;
			
			text-align: center;
		}
		body.isMobile #magazine #navigation ul li ~ li {
			border-left: 1px solid #ccc;
		}
			body.isMobile #magazine #navigation ul li a {
				display: block;
			}
				body.isMobile #magazine #navigation ul li a span {
					display: inline-block;
					padding-left: 18px;
					
					font-size: 12px;
					font-weight: bold;
					line-height: 1.3;
					text-align: left;
					white-space: nowrap;
					
					color: #333;
					background: url(../img/sp/icon_arrow_down.gif) no-repeat left center;
					background-size: 15px 15px;
				}
				body.isMobile #magazine #navigation ul li:first-child a span {
					padding-left: 17px;
					letter-spacing: -1px;
				}

/* headline
------------------------------------------------ */
body.isMobile #magazine h2 {
	margin-top: 20px;
	padding: 10px 10px 10px 36px;
	
	font-size: 16px;
	font-weight: bold;
	line-height: 30px;
	
	background: #e6e6e6 url(../img/sp/icon_book.gif) no-repeat 10px center;
	background-size: 20px 16px;
}