@charset "utf-8";
/*************
デフォルト設定
*************/


a { color:#fff; }

#card, #jacket, #title, #basic, #download{
	border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	-moz-border-radius: 0.2em;
}

li, #movie,#cdmore,#dvdmore {
	border-radius: 0.4em;
	-webkit-border-radius: 0.4em;
	-moz-border-radius: 0.4em;
}

#card,#ugc {
/*	margin-right: 40px;
	margin-left: 20px;*/
	padding: 2px;
	border: 1px solid #F93;
	/*background: #ffbc7a;*/
	background: #fff;
	box-shadow: rgba(0,0,0,.2) 1px 1px 2px;

}

#other,#comm,#sora {
	font-size: 12px;
}

#other div a,#movie a,#cdmore a,#dvdmore a, li a,#index a {
	text-decoration: none;
}

#other div a:hover,#movie a:hover,#cdmore a:hover,#dvdmore a:hover, li a:hover {
	text-shadow:1px 1px #000;
}

#Update {
	margin-right: 10%;
	margin-left: 10%;

	text-align: left;
}

/* 基本情報関連 */

#main {
	float: right;
	margin-right: 40px;

}

#card {
	min-height: 630px;
	font-size: 14px;
}

#side{
	float: right;
	margin: 10px;
}

#jacket img{
	margin:3px;
	width: auto;
	height:210px;
	border: 2px solid #fff;
}

#label {
	margin-left:55px;
}
#label img {
	width: 100px;
	height:40px;
	border: 0px;
}

#basic {
	float: left;
	width:100%;
	min-height: 240px;
	/*background: #ffbc7a;*/
	background: #ff9933;
	color:#fff;
}

#title {
	margin:10px;
}

h1{
	margin-top:3px;
	margin-bottom:3px;
	margin-left:10px;
	color: #fff;
	font-size:24px;
	float: none;
	text-shadow:2px 2px #000;
	font-family: futura, 'Spartan', "M PLUS Rounded 1c", "Hiragino sans", Arial;/* Font 変更21.3.6*/
	font-weight: 500;
}

.category {
/*	-webkit-text-stroke-color: #000;
	-webkit-text-stroke-width: 0.2px;*/
	text-shadow:1px 1px #000;
	font-weight: bold;
}

#yomi {
	margin-left:10px;
	font-size:12px;
}

#download img{
	height: 14px;
	border: 0px;
}

#amprev {
	margin-left:10px;
	margin-right: 230px;
}

#writeother {
	margin-left:10px;
	font-size:14px;
}

.labelname {
	margin-left:10px;
	font-size:12px;
	font-weight:bold;
}

.hr {
	color: #fff;
#	border: 1px solid #ff9933;
	border: 0px;
	height: 1px;
	background-image: -webkit-linear-gradient(left, rgba(256,256,256,0), rgba(256,256,256,1), rgba(256,256,256,0));
	background-image:    -moz-linear-gradient(left, rgba(256,256,256,0), rgba(256,256,256,1), rgba(256,256,256,0));
	background-image:     -ms-linear-gradient(left, rgba(256,256,256,0), rgba(256,256,256,1), rgba(256,256,256,0));
}

#other div {
	margin-bottom:5px;
}



/* 収録データ */

#include {
	margin-top:2px;
}
.outlink a{
	margin-left: 5px;
	border: 1px solid #fdfdfd;
	border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	padding: 1px 5px;
	line-height: 1.9em;
}

#youtube {
text-align:center;
}
#youtube iframe{
width: 560px;
height: 315px;
}

#cd, #dvd {
	float: left;
	width: 50%;
}

ul {
	margin:0px;
	padding: 0px;
}

li {
	list-style: none;
	color:#fff;
}

#include li, #cdmore, #dvdmore, #movie {
	/*height: 32px;*/
	height: 23px;
	border: 1px solid #fff;
	font-size:12px;
}

#cd ul li a, #dvd ul li a,div#dvdnone ul li, #movie a, #cdmore a, #dvdmore a {
	display: block;
	height: 14px;
	padding:4px 10px 1px 15px;
/*	padding:10px 10px 0px 15px;
	padding-top:10px;
	padding-left: 15px;
	padding-right:;
	height: 20px;*/

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

div #dvdnone ul li{
	height: 18px;
}

#cd #song a, #dvd #furi a{
	font-size:10px;
	color:#000;
	text-decoration:none;
}

.nr,.nsr, .nfr, .nfsr {
	top: -6px;
	position: relative;
	padding-bottom: 1px;
}

#movie a,#cdmore a,#dvdmore a {
	padding-top:4px;
	padding-bottom:6px;
}

.off { color:#faa; }

.rmx {
/* padding-top:1px;*/
margin-top:-1px;
padding-left: 5px;font-size:8px;color:#99f;
}

a.ns:after,a.nsr:after ,a.nfs:after,a.nfs:before ,a.nfsr:after { content:" (Nonstop)";color:#66f; }

a.nf:before,a.nfr:before{ content:"(購入NG) "; }

.rmx:before {content:"(include)  ";}

div#cd ul li, div#cdnone ul li,div#cd ul li ul, #cdmore {
	background: #00f;
}
div#cd ul li:hover, #cdmore:hover {
	background: #66f;
}
div#dvd ul li, div#dvdnone ul li,div#dvd ul li ul li, #dvdmore {
	background: #f00;
}
div#dvd ul li:hover, #dvdmore:hover {
	background: #f66;
}
div#cd ul li, #cdmore,div#dvd ul li, #dvdmore {
transition: 0.1s;
}
div#cd ul li:hover, #cdmore:hover, div#dvd ul li:hover, #dvdmore:hover {
transform: scale(1.02,1);
}

div#cd ul ul, div#dvd ul ul{
	display: none;
	position: relative;
	z-index:2;
	top: -12px;
	left: 160px;
	width: 120px;
}


div#cd ul ul li,div#dvd ul ul li {
	float: none;

	margin: 0;
	padding: 0;
}

div#cd li:hover > ul,div#dvd li:hover > ul {
	display: block;
}


#movie {background: #f06;}

#movie:hover {background: #f39;}

#cd_list_m, #dvd_list_m {display:none;}


/* UGC関連 */

#ugc {margin-top:10px;}

#ugc li {padding:5px 10px 0px 10px;}

#ugc li:before { content:"･ "; }

#comm,#sora {
	width:100%;
	padding-bottom:5px;
}

#comm {background: #f96;}

#sora {background: #33f;}

#form {
	width:100%;
	margin: 5px;
	text-align:center;
}

.button {
	margin: 0px 20px;
	padding:2px 5px;
	border:1px solid #f96;
	border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;

	width:120px;
	height:40px;

	color:#f96;
}

/* リストタグ */

div#index{
	/*position: relative;
	top: -540px;*/
	position: absolute;
	top: 130px;
	right: 12px;

	font-weight:bold;
}

div#indexsmp{
display:none;
}

div#index a{
	display: block;
	padding:1px 1px 1px 1px;
	width: 25px;
	border:  1px solid #fff;
	background-color:  #f93;
/*	border-bottom: 20px solid #f93;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;/**/
	-moz-transform:    rotate( 90deg );
	-webkit-transform: rotate( 90deg );
	-o-transform:      rotate( 90deg );
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);*/
	text-align:center;
	transition: 0.3s;
}


div#index a:hover{
/*	background-color:  #ffbc7a;*/
	color:#f00;
}


/* 一覧 */



@media screen and (min-width: 1px) and (max-width: 599px) {

	#sban {display: block;clear:both;}

	#main {
		float: right;
		margin-right: 0px;
		width: 100%;
	}

	#basic {
		min-height: 50px;
	}
	h1 {
#		margin-left:5px;
		margin:1px 1px 1px 5px;
		padding-left:0px;
	}

	#amprev {
		margin-left:5px;
		margin-right: 5px;
	}

	#label,div#index,#pban,.prs,#cdnone,#dvdnone {
		display: none;
	}

	/*Index表示*/
	div#indexsmp {
	position: absolute;
	top:65px;
	display:inline;
	margin: 0 10px;
	width: 100%;
	}

	div#indexsmp select{
	height: 40px;
	margin-left:10px;
	margin-bottom:5px;
	width: 80%;
	line-height: 40px;
	vertical-align: middle;
	background:#fc9 url(/para/img/arw.png) no-repeat;
	border-radius: 0.5em;
	background-size: 20px 20px;
	background-position: right center;
	border:1px solid #f93;
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;

	text-indent: 1em;
	font-size: 15px;
	color: #fff;
	text-shadow: 1px 1px #666;
	font-weight: bold;
	}

	@-moz-document url-prefix() { /* for firefox */
	    div#indexsmp select {
	        background:none;
	        background-color: #FFF;
	    }
	}

	#card{
		margin-top: 42px;
		min-height: 0px;
	}

	#ugc {
		margin-top: 5px;
		min-height: 0px;
	}

	#include li, #cdmore, #dvdmore, #movie {
		height: 50px;
	}

	#side{
		width:100%;
		text-align: center;
/*		margin-left:20%;
		margin-right:20%;*/
	}

	#youtube iframe{
	float: center;
	width: 320px;
	height: 180px;
	}

	#cd, #dvd {
		clear: both;
		width: 100%;
	}
	#cd ul li a, #dvd ul li a, #movie a, #cdmore a, #dvdmore a {
		height: 20px;
		padding:12px 10px 1px 15px;
		font-size:18px;
	}

	.rmx {padding-top:5px;padding-left: 10px;font-size:12px;color:#99f;}
	.nsr, .nfr, .nfsr {top: -14px;position: relative;padding-bottom: 1px;}

	#title {
		margin:3px;
	}

	#Update {
		margin-right: 0px;
		margin-left: 7px;
	}

}

	/**************************
	メディアクエリ設定 600?899
	**************************/
@media screen and (min-width: 600px) and (max-width: 899px) {

	#cd, #dvd,#dvdnone {
		float: left;
		width: 50%;
	}
	#main {
		float: right;
		margin-right: 40px;
	}

	div#index{
		top: 125px;
	}

	div#index a{
	width: 12px;
	background-color:rgba(255,255,255,0.2);
		border:  0px;
		border-bottom: 20px solid #f93;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		height: 0;/**/

		-moz-transform:    rotate( 90deg );
		-webkit-transform: rotate( 90deg );
		-o-transform:      rotate( 90deg );
		-ms-transform: rotate(90deg);/**/
		transform: rotate(90deg);
	}

	div#index a:hover, div#index a#select{
		border-bottom: 20px solid #ffbc7a;
	}

}

	/************************
	メディアクエリ設定 900
	************************/
@media screen and (min-width: 900px) {
	#cd, #dvd,#dvdnone {
		float: left;
		width: 50%;
	}

	div#index{
		top: 125px;
	}

	div#index a{
	width: 12px;
		border:  0px;
		border-bottom: 20px solid #f93;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		height: 0;/**/
	background-color:rgba(255,255,255,0);

		-moz-transform:    rotate( 90deg );
		-webkit-transform: rotate( 90deg );
		-o-transform:      rotate( 90deg );
		-ms-transform: rotate(90deg);/**/
		transform: rotate(90deg);
	}

	div#index a:hover, div#index a#select{
		border-bottom: 20px solid #ffbc7a;
	}


}