@charset "EUC-JP";
@import url("detail.css");
@import url("list.css");
@import url("etc.css");

/* ==== INDEX ==== */

/*	SECTION =0 RESET		-	reset padding and margin to 0 */
/*	SECTION =1 LAYOUT		-	id's for page layout */
/*	SECTION =2 HEADINGS		-	h1,h2,h3,h4 etc. */
/*	SECTION =3 MAIN			-	middle content area */
/*	SECTION =4 HEADER		-	header and top navigation */
/*	SECTION =5 LEFT NAV		-	left navigation */
/*	SECTION =6 RIGHT NAV	-	right navigation */
/*	SECTION =7 FOOTER		-	footer */


/*========================================
SECTION =0 RESET
========================================*/

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
blockquote,
table,
th,
td,
iframe {
	margin: 0;
	padding: 0;
}

body {
	color: #fff;
	font-size: 12px;
	font-weight: normal;
	font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	margin: 0;
	padding: 0;
	background-image: url(/images/bg.gif);
	line-height: 1.6;
}

ul {
	margin: 0 0 10px;
}

li {
	list-style: none;
}

img {
	border: 0;
	vertical-align: bottom;
}

a:hover img {
	filter: alpha(opacity=70);
	opacity: 0.7;
}

a:link {
	color: #b7b7b7;
	text-decoration: underline;
}

a:visited {
	color: #999;
}

a:hover {
	color: #fff;
}

a:active {
	color: #ccc;
	text-decoration: underline;
}


/* Clearfix */

.cf:before,
.cf:after {
	content: "";
	display: block;
	overflow: hidden;
}

.cf:after {
	clear: both;
}

.tab:before,
.tab:after {
	content: "";
	display: block;
	overflow: hidden;
}

.tab:after {
	clear: both;
}

.cf {
	zoom: 1;
}


/*========================================
SECTION =1 LAYOUT
========================================*/

#container {
	width: 970px;
	padding: 10px;
	background-color: #000;
	margin: 0 auto;
	overflow: hidden;
}

#header {
	width: 990px;
	padding: 0;
	position: relative;
	margin: 0 auto;
}

#wrap {
	float: right;
	width: 800px;
	padding: 0 0 0 10px;
}

#main {
	float: left;
	width: 630px;
}

#nav {
	float: left;
	width: 160px;
	display: inline;
	overflow: hidden;
}

#sub {
	float: right;
	width: 160px;
	display: inline;
	overflow: hidden;
}

#footer {
	text-align: center;
	background-color: #282828;
}

.clear {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	line-height: 0;
	font-size: 0;
	margin: 0;
	padding: 0;
}

.lefty {
	display: block;
	float: left;
	margin: 0 10px 0 0;
}

.righty {
	display: block;
	float: right;
	margin: 0 0 0 10px;
}

/* Whitespace - margin */

.mt-0 {margin-top: 0 !important;}
.mt-10 {margin-top: 10px !important;}
.mt-20 {margin-top: 20px !important;}
.mt-30 {margin-top: 30px !important;}
.mt-40 {margin-top: 40px !important;}
.mt-50 {margin-top: 50px !important;}
.mt-60 {margin-top: 60px !important;}
.mt-70 {margin-top: 70px !important;}
.mt-80 {margin-top: 80px !important;}
.mt-90 {margin-top: 90px !important;}
.mt-100 {margin-top: 100px !important;}
.mr-0 {margin-right: 0 !important;}
.mr-10 {margin-right: 10px !important;}
.mr-20 {margin-right: 20px !important;}
.mr-30 {margin-right: 30px !important;}
.mr-40 {margin-right: 40px !important;}
.mr-50 {margin-right: 50px !important;}
.mr-60 {margin-right: 60px !important;}
.mr-70 {margin-right: 70px !important;}
.mr-80 {margin-right: 80px !important;}
.mr-90 {margin-right: 90px !important;}
.mr-100 {margin-right: 100px !important;}
.mb-0 {margin-bottom: 0 !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mb-30 {margin-bottom: 30px !important;}
.mb-40 {margin-bottom: 40px !important;}
.mb-50 {margin-bottom: 50px !important;}
.mb-60 {margin-bottom: 60px !important;}
.mb-70 {margin-bottom: 70px !important;}
.mb-80 {margin-bottom: 80px !important;}
.mb-90 {margin-bottom: 90px !important;}
.mb-100 {margin-bottom: 100px !important;}
.ml-0 {margin-left: 0 !important;}
.ml-10 {margin-left: 10px !important;}
.ml-20 {margin-left: 20px !important;}
.ml-30 {margin-left: 30px !important;}
.ml-40 {margin-left: 40px !important;}
.ml-50 {margin-left: 50px !important;}
.ml-60 {margin-left: 60px !important;}
.ml-70 {margin-left: 70px !important;}
.ml-80 {margin-left: 80px !important;}
.ml-90 {margin-left: 90px !important;}
.ml-100 {margin-left: 100px !important;}

/* Whitespace - padding */

.pt-0 {padding-top: 0 !important;}
.pt-10 {padding-top: 10px !important;}
.pt-20 {padding-top: 20px !important;}
.pt-30 {padding-top: 30px !important;}
.pt-40 {padding-top: 40px !important;}
.pt-50 {padding-top: 50px !important;}
.pt-60 {padding-top: 60px !important;}
.pt-70 {padding-top: 70px !important;}
.pt-80 {padding-top: 80px !important;}
.pt-90 {padding-top: 90px !important;}
.pt-100 {padding-top: 100px !important;}
.pr-0 {padding-right: 0 !important;}
.pr-10 {padding-right: 10px !important;}
.pr-20 {padding-right: 20px !important;}
.pr-30 {padding-right: 30px !important;}
.pr-40 {padding-right: 40px !important;}
.pr-50 {padding-right: 50px !important;}
.pr-60 {padding-right: 60px !important;}
.pr-70 {padding-right: 70px !important;}
.pr-80 {padding-right: 80px !important;}
.pr-90 {padding-right: 90px !important;}
.pr-100 {padding-right: 100px !important;}
.pb-0 {padding-bottom: 0 !important;}
.pb-10 {padding-bottom: 10px !important;}
.pb-20 {padding-bottom: 20px !important;}
.pb-30 {padding-bottom: 30px !important;}
.pb-40 {padding-bottom: 40px !important;}
.pb-50 {padding-bottom: 50px !important;}
.pb-60 {padding-bottom: 60px !important;}
.pb-70 {padding-bottom: 70px !important;}
.pb-80 {padding-bottom: 80px !important;}
.pb-90 {padding-bottom: 90px !important;}
.pb-100 {padding-bottom: 100px !important;}
.pl-0 {padding-left: 0 !important;}
.pl-10 {padding-left: 10px !important;}
.pl-20 {padding-left: 20px !important;}
.pl-30 {padding-left: 30px !important;}
.pl-40 {padding-left: 40px !important;}
.pl-50 {padding-left: 50px !important;}
.pl-60 {padding-left: 60px !important;}
.pl-70 {padding-left: 70px !important;}
.pl-80 {padding-left: 80px !important;}
.pl-90 {padding-left: 90px !important;}
.pl-100 {padding-left: 100px !important;}

.banner-note {
	color: #ccc;
	margin: 1em 0;
}


/*========================================
SECTION =2 HEADINGS
========================================*/

h1 {
	background-color: #790102;
	color: #fff;
	font-size: 12px;
	margin: 0 0 10px;
	padding: 2px 5px;
}

h2 {
	background-color: #790102;
	font-size: 14px;
	margin: 0 0 10px;
	padding: 4px 10px;
}

h3 {
	background-color: #360000;
	color: #fff;
	font-size: 1em;
	margin: 0 0 10px;
	padding: 2px 5px;
}

h3.bg-yellow {
	background: none;
	padding: 0;
}

h3.bg-yellow span,
h3.bg-yellow span a {
	background-color: #fc0;
	color: #000;
	font-weight: bold;
	padding: 1px 0;
	text-decoration: none;
}

h4 {
	background-color: #4C0000;
	color: #f1f1f1;
	font-size: 1em;
	margin: 0 0 10px;
	padding: 4px 10px;
}

h5 {
	background-color: #000;
	border-bottom: 2px solid #B00;
	color: #fff;
	display: block;
	font-size: 14px;
	letter-spacing: 2px;
	padding: 5px 0 2px;
	position: relative;
	vertical-align: middle;
	width: 100%;
}


/*========================================
SECTION =3 MAIN
========================================*/

.indexarea {
	width: 990px;
	margin: 0 auto;
}

.indexarea table td {
	padding: 0;
	margin: 0;
}

.indexarea a img {
	vertical-align: top;
	display: block;
}

/*	iframe like news */

#main .topics {
	overflow: auto;
	height: 100px;
	margin: 0 0 10px;
	padding: 5px;
	background-color: #282828;
}

#main .topics li {
	padding: 0 0 5px;
	margin: 0 0 10px;
}

#main .topics em {
	display: block;
	font-style: normal;
	padding: 0 5px 0 0;
}

#main .topics em img {
	vertical-align: middle;
	padding: 0 5px;
}

#main h2.special {
	background: url(/images/bg_new.gif) 0 0 repeat-x;
	color: #000;
}

#main div.parts {
	margin: 0;
	width: 640px;
	overflow: hidden;
}

#main div.parts dl {
	background-color: #1a1a1a;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
	height: 400px;
	margin: 0 10px 10px 0;
	width: 310px;
}

#main div.parts dl.fin {
	border: 1px solid #f00;
}

#main div.parts dl dt {
	margin: 0;
	position: relative;
	width: 100%;
}

#main div.parts dl dt img {
	width: 100%;
}

#main div.parts .icon-saishin {
	margin: 0 3px 3px 0;
}

#main div.parts dl dt em {
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	background: url(/images/point.gif) 0 0 no-repeat;
	width: 43px;
	height: 18px;
}

#main div.parts dl dd {
	margin: 10px 0;
	padding: 0 10px;
}

#main div.parts dl dd.title a {
	background-color: #fc0;
	color: #000;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.5;
}

#main .title--sample {
	margin-bottom: 15px;
}

#main div.parts dl dd.title2 {}

#main div.parts dl dd span.title_sample {
	background-color: #fc0;
	color: #000;
	display: inline;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.5;
}

#main div.parts dl dd.title a,
#main div.parts dl dd span.title_sample a {
	color: #000;
	text-decoration: none;
}

#main div.parts dl dd.name {
	position: relative;
}

#main div.parts dl dd.name span {
	position: absolute;
	top: 0;
	right: 0;
}

#main div.parts dl dd.user em {
	font-style: normal;
	color: #fc0;
}

#main .all-link {
	clear: left;
	display: block;
	background-color: #151515;
	padding: 2px 0;
	height: 18px;
	text-align: center;
}

#main .parts .button--freesample {
	margin-top: 15px !important;
}

#main .all-link a {
	color: #fff;
	margin: 0 0 0 10px;
}

#main div.parts dl dd.more,
#main div.parts dl dd.sample {
	text-align: center;
}

#main div.parts dl dd.more a {
	padding: 0 0;
	color: #ffff00;
}

#main div.parts p.banner {
	clear: both;
	margin: 5px;
}

#__ccgc_inline__ img {
	margin-left: 30px;
}

#ccgcTop div,
#ccgcBanner > div {
	background: black;
}

.play-btn {
	display: block;
	position: relative;
}

.play-btn:before {
	background: url(/images/play-btn.png) 0 0 no-repeat;
	content: "";
	cursor: pointer;
	display: block;
	margin: auto;
	height: 48px;
	width: 72px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
}

.entry {
	background-color: #282828;
}

/*new design recomment icon**********/

#recommend li {
	position: relative;
	display: inline-block;
	width: 320px;
}

#recommend_icon {
	position: absolute;
	top: 0px;
	height: 120px;
	display: block;
	left: -30px;
	padding: 0px;
	width: 131px;
	color: #00f;
	z-index: 100;
	background: url(/images/recommend.png) no-repeat;
	background-size: 70% auto;
}

#recommend_icon a {
	display: block;
	width: 131px;
	height: 120px;
}

#recommend li:first-child {
	margin-left: 10px;
}

#join_button {
	color: #EAE9E9 !important;
	text-align: center;
	background: #0E0E0E;
	color: #130A0A;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
	display: block;
	padding: 10px 0;
	text-decoration: none !important;
	width: 98%;
	margin: 0.5em;
	font-size: 1.4em;
}

#join_button span {
	background: #CF0103;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	font-size: 0.9em !important;
	padding: 5px;
}

a#join_button:hover {
	color: #fff !important;
	background: #CF0103;
	border: 1px solid #0E0E0E;
	display: block;
}

a#join_button span:hover {
	background: #fff;
	color: #CF0103;
}

/* message */

#message-box {
	border: 2px solid #E50000;
	line-height: 1.8;
	margin: 0 0 20px;
	padding: 24px;
	text-align: center;
}

#message-box .message-title {
	background: none;
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 .5em;
	padding: 0;
}

#message-box p {
	font-size: 13px;
	margin: .25em 0 0;
}

#message-box .message-highlight {
	color: #E50000;
}

/* notification */

#member-notification {
	top: 64px;
	right: 24px;
	position: fixed;
	width: 300px;
	z-index: 10000;
}

.member-notification__item {
	background-color: #fff;
	background-image: url(/images/icon-notification.png);
	background-repeat: no-repeat;
	background-position: 16px 16px;
	border-radius: 2px;
	box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.1);
	color: rgba(0,0,0,.8);
	font-size: 13px;
	line-height: 1.8;
	padding: 14px 44px 14px 56px;
	position: relative;
}

.member-notification__item p {
	margin: 0;
}

.member-notification__item a {
	color: #4fa0e0;
	text-decoration: none;
}

.member-notification__item a:hover {
	text-decoration: underline;
}

.notification-icon--clear, 
.notification-icon--clear--arip {
	cursor: pointer;
	display: block;
	position: absolute;
	right: 10px;
	top: 10px;
}


/*========================================
SECTION =4 HEADER
========================================*/

#header .tnav {
	background-color: #494949;
	padding: 10px;
	margin: 0;
}

#header .tnav li {
	display: block;
	float: left;
	margin-right: 10px;
	overflow: hidden;
}

#header .tnav li.end {
	border: none;
}

#header .tnav li a {
	background-color: #000;
	border: 1px solid #fff;
	color: #fff;
	display: block;
	font-weight: bold;
	padding: 3px 13px;
	text-decoration: none;
}

#header .tnav li a:hover {
	border: 1px solid #a8ff00;
	color: #a8ff00;
}

#header .tnav li a#join {
	background-color: #a8ff00;
	color: #000;
}

#header ul.tnav li a#join:hover {
	background-color: #000;
	color: #a8ff00;
}

#header ul.bnav {
	position: absolute;
	top: 5px;
	right: 5px;
}

#header ul.bnav li {
	display: block;
	float: left;
}

#header ul.bnav li a {
	font-size: 10px;
	color: #fff;
	text-decoration: underline;
	margin: 0 0 5px;
	padding: 2px 5px;
}

/*	Search bar	*/

.s-cont-container {
	background-color: #333;
	width: 990px;
	padding: 6px 0;
	margin: 0 auto;
}

.s-cont-container form {
	margin-right: 15px;
}

.s-cont-container form input {
	padding: 1px 4px;
	;
}

.s-cont-container ul {
	margin: 0;
	text-align: center;
}

.s-cont-container ul li {
	color: #FFF;
	display: inline-block;
	margin: 0 4px;
	vertical-align: bottom;
}

.s-cont-container ul li a {
	color: #FFF;
	text-decoration: underline;
}


/*========================================
SECTION =5 LEFT NAV
========================================*/

.sidebar h4 {
	margin: 0;
	text-align: center;
}

.sidebar > div {
	margin-bottom: 10px;
}

.sidebar .bg-box {
	background-color: #282828;
	padding: 10px;
}

.sidebar li {
	line-height: 2;
}

#nav div form {}


/* SEARCH FIELD */

#nav div form input.searchfield {
	width: 90px;
	margin: 0 5px 0 0;
}


/* MEMBER STATUS */

.sidebar .meminfo h4 {
	background-color: #c00;
}

.sidebar .meminfo .emph1 {
	font-weight: bold;
	line-height: inherit;
	padding: 0 0 15px;
	word-wrap: break-word;
}

.sidebar .meminfo .emph2 {
	color: #f00;
	padding: 0 0 15px;
}

.sidebar .meminfo .status_img {
	margin-left: -5px;
}

/* MEMBER STATUS modified */

.sidebar .meminfo {
	background: #282828;
}

[class^="meminfo-section"] {
	border-top: 1px solid rgba(255,255,255,.15);
	padding: 16px 10px;
}

h4 + [class^="meminfo-section"] {
	border: none;
}

.sidebar .meminfo h4 {
	background-color: #c00;
	padding: 6px 0;
}

.sidebar .meminfo li {
	line-height: 1.5;
}

.sidebar [class^="meminfo-section"] li:not(:first-child) {
	margin-top: 10px;
}

.account__status {
	border-radius: 1px;
	color: #333;
	display: inline-block;
	font-weight: bold;
	padding: 3px 10px;
}

.account__status--normal {background: #87f0f0;}
.account__status--vip {background: #e2e2e2;}
.account__status--svip {background: #fc0;}
.account__status--annual {
	background: #ff211d;
	color: #fff !important;
}

.account__username {
	font-weight: bold;
	word-wrap: break-word;
}

/* sidebar - DML */

#meminfo-dml {
	line-height: 0;
}

.dml__graph {
	background: #ccc;
	height: 2px;
	position: relative;
}

.dml__graph--current {
	background: #2e94fb;
	height: 100%;
	position: absolute;
}

.dml__status {
	color: #b7b7b7;
	font-size: .9em;
}


/*========================================
SECTION =7 FOOTER
========================================*/

#footer {
	margin: 0 auto;
	padding: 20px;
}

#footer ul {
	width: auto;
	margin: 5px auto;
	line-height: 1em;
}

#footer ul li {
	display: inline;
	margin: 0 10px 0 0;
	text-align: center !important;
}

#footer ul li a {
	color: #fff;
}

#footer ul li img {
	vertical-align: middle !important;
}