@charset "utf-8";

/* CSS Document */
*{
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
img{
height:auto;
}

/* HTML 5 elements */
section, nav, article, aside, hgroup, header, footer, figure, figcaption, summary {
  display: block;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
	width:100%;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color:#000;
}

#wrapper{
text-align: left;
width: 98%;
height:100%;
margin: 0 auto;
max-width:850px;
min-width:300px;
background-image:url(../images/jill_wrapper850.jpg);
background-repeat:no-repeat;
-moz-background-size:100% auto;
background-size:100% auto; 
}
@media(max-width:636px){
#wrapper{max-width:628px;
background-image:url(../images/jill_wrapper640.jpg);}
}
@media(max-width:480px){
#wrapper{max-width:472px;
background-image:url(../images/jill_wrapper480.jpg);}
}
@media(max-width:320px){
#wrapper{max-width:316px;
background-image:url(../images/jill_wrapper320.jpg);}
}


#header{
width:100%;
height:200px;
max-width:850px;
color:#FFFFFF;
cursor:pointer;
display:block;
text-indent: -99999px;
padding: 10px 0px 0px;
}
#header h1{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: bold;
	line-height: 26px;
	text-align: center;
	padding-bottom:5px;
}
@media(max-width:636px){
#header{height:180px;}
#header h1{font-size:16px;line-height:20px;}
}
@media(max-width:480px){
#header{height:160px;}
#header h1{font-size:14px;line-height:18px;}
}
@media(max-width:320px){
#header{height:140px;}
#header h1{font-size:12px;line-height:16px;}
}

#header p{
	text-align: center;
}

#header ul{
	width:100%;
	max-width:850px;
	font-size:0px;
	text-align:center;
}

#header ul li{
	width:25%;
	height:auto;
	display:inline-block;
	padding:0px;
	list-style-type:none;
	border-right: solid 1px #CCC;
	background-color:#EEEEEE;
	border-left:solid 5px #369;
}
#header ul li h2{
 font-size:9px;
	padding:1px;
	background-color:#369;
	color:#FFFFFF;
}
@media(max-width:636px){
#header ul li{
	width:50%;
}
#header ul li h2{
	font-size:7px;
}
}

#container{
	width: 100%;
	max-width:600px;
	float: right;
	margin-top:10px;
	text-align:center;
}
#content{
 clear:both;
 width:100%;
	max-width:600px;
	margin:0 auto;
	text-align:center;
	background-color: rgba(0,0,0,0.5);
}

@media(max-width:800px){
#container{max-width:520px;}
}
@media(max-width:636px){
#container{
	width: 98%;
	float:none;
	margin-left:auto;
	margin-right:auto;
}
}

.boxdisc{border:2px #a235ff solid;}
.boxnews{border:2px #d8a662 solid;}
.boxsche{border:2px #ffff03 solid;}
.boxprof{border:2px #d04141 solid;}

.boxdisc h2{background-color:#a235ff;color:#000;font-size:16px;width:98%;margin:10px 5px;text-align:left;padding-left:5px;}
.boxnews h2{background-color:#d8a662;color:#000;font-size:16px;width:98%;margin:10px 5px;text-align:left;padding-left:5px;}
.boxsche h2{background-color:#ffff03;color:#000;font-size:16px;width:98%;margin:10px 5px;text-align:left;padding-left:5px;height:100%;}
.boxprof h2{background-color:#d04141;color:#000;font-size:16px;width:98%;margin:10px 5px;text-align:left;padding-left:5px;}

.boxsche p.live,.boxdisc p.live,.boxprof p.live
{color:#FFF;font-size:12px;text-align:center;padding:5px 5px 5px 10px;}

.boxprof p.intro
{color:#FFF;font-size:12px;text-align:left;padding:5px 5px 5px 10px;}

.boxprof p.historia
{color:#FFF;background-color:rgba(0,0,0,0.6);margin:8px 5px 8px 5px;text-align:left;font-size:11px;padding:0 0 0 8px;line-height:16px;letter-spacing:-0.3px;}

.boxdisc ul,.boxnews ul,.boxsche ul,.boxprof ul
{list-style-type:none;font-size:0;}

.boxdisc ul li{display:inline-block;font-size:10px;width:25%;text-align:center;height:200px;}
.boxnews ul li{display:block;font-size:10px;margin:0.5em 5px;clear:both;}
.boxsche ul li{display:block;font-size:10px;margin:0.5em 5px;clear:both;}
.boxprof ul li{display:block;font-size:10px;margin:0.5em 5px;clear:both;}

.boxdisc ul li img
{width:100%;max-width:120px;min-width:100px;display:block;margin:0 auto 1em;border:rgba(200,200,200,0.5) 1px solid;}
.boxnews ul li img
{width:100%;max-width:120px;min-width:100px;display:block;margin:0 2em 1em;border:rgba(200,200,200,0.5) 1px solid;float:left;}
.boxsche ul li img
{width:100%;max-width:120px;min-width:100px;display:block;margin:0 2em 1em;border:rgba(200,200,200,0.5) 1px solid;float:left;}
.boxprof ul li img
{width:100%;max-width:120px;min-width:100px;display:block;margin:0 2em 1em;border:rgba(200,200,200,0.5) 1px solid;float:left;}

.boxdisc ul li p
{color:#FFF;}
.boxnews ul li p
{color:#FFF;margin:0.5em 0;text-align:left;font-size:12px;}
.boxsche ul li p
{color:#FFF;background-color:rgba(0,0,0,0.6);margin:5px 5px 2px 5px;text-align:left;font-size:12px;padding:0 0 0 5px;line-height:18px;border-left:#ffff03 2px solid;}
.boxprof ul li p
{color:#FFF;background-color:rgba(0,0,0,0.6);margin:5px 5px 2px 5px;text-align:left;font-size:12px;padding:0 0 0 5px;line-height:18px;letter-spacing:-0.3px;}

.boxprof a,.boxsche a,.boxnews a,.boxdisc a
{color: #9FF;}
.boxprof a:hover,.boxsche a:hover,.boxnews a:hover,.boxdisc a:hover
{color: #03C;}
.secondtitle{display:inline;float:right;}

.discdate{display:block;width:auto;text-align:left;border-bottom:#a235ff 1px solid;padding:2px;color:#a235ff;font-size:14px;font-weight:bold;margin:0 5px;line-height:18px;}
.discdate2{display:block;width:auto;text-align:center;border-bottom:#a235ff 1px solid;padding:2px;color:#a235ff;font-size:14px;font-weight:bold;margin:0 5px;line-height:18px;}

.schedate{display:block;width:auto;text-align:left;border-bottom:#ffff03 1px solid;padding:2px;color:#ffff03;font-size:14px;font-weight:bold;margin:0 5px;line-height:18px;}
.schedate2{display:block;width:auto;text-align:center;border-bottom:#ffff03 1px solid;padding:2px;color:#ffff03;font-size:14px;font-weight:bold;margin:0 5px;line-height:18px;}

.profdate{display:block;width:7em;text-align:left;padding:2px;color:#d04141;font-size:14px;font-weight:bold;margin:0 5px;line-height:18px;}
.profdate2{display:block;width:auto;text-align:left;border-bottom:#d04141 1px solid;padding:2px;color:#d04141;font-size:14px;font-weight:bold;margin:0 5px;line-height:18px;}



@media(max-width:636px){
.boxdisc h2,.boxnews h2,.boxsche h2,.boxprof h2
{margin:3px;}
.boxdisc ul li{width:50%;}
.boxnews ul li img{margin:0 5px 2em;}
.schedate2{text-align:left;}
.profdate2{text-align:left;}
.boxsche p.live,.boxprof p.live
{text-align:left;}
}

#sidebar{
	width: 200px;
	float: left;
	margin-top:10px;
}

#sidebar a{
	display:block;
	text-indent: -99999px;
	width: 200px;
 height:30px;
	border:1px #333333 solid;
}

#sbNEWS a{background-image:url(../images/bg_NEWS.png);}
#sbSCHEDULE a{background-image:url(../images/bg_SCHEDULE.png);}
#sbDISCOGRAPHY a{background-image:url(../images/bg_DISCOGRAPHY.png);}
#sbPROFILE a{background-image:url(../images/bg_PROFILE.png);}
#sbBLOG a{background-image:url(../images/bg_BLOG.png);}
#sbTWITTER a{background-image:url(../images/bg_TWITTER.png);}
#sbFACEBOOK a{background-image:url(../images/bg_FACEBOOK.png);}
#sbTERRAROSA a{background-image:url(../images/bg_TERRAROSA.png);}
#sbAPHRODITE a{background-image:url(../images/bg_APHRODITE.png);}
#sbCONTACT a{background-image:url(../images/bg_CONTACT.png);}

#sidebar a:hover{
	background-position: -200px 0px;
}

#sidebar .here a{
	background-position: -200px 0px;
}

.side2nd a{text-indent:inherit!important;font-size:13px;line-height:30px;padding-left:1em;}
.sbDISC a{background-color:rgba(0,0,0,0.5);color:#a235ff;text-decoration:none;}
.sbDISC a:hover{background-color:#a235ff;color:#000;}
.sbNEWS a{background-color:rgba(0,0,0,0.5);color:#d8a662;text-decoration:none;}
.sbNEWS a:hover{background-color:#d8a662;color:#000;}
.sbSCHE a{background-color:rgba(0,0,0,0.5);color:#ffff03;text-decoration:none;}
.sbSCHE a:hover{background-color:#ffff03;color:#000;}
.sbPROF a{background-color:rgba(0,0,0,0.5);color:#d04141;text-decoration:none;}
.sbPROF a:hover{background-color:#d04141;color:#000;}

#sidebar audio{
display:block;
width: 200px;
height:30px;
}

.musictitle{
font-size:10px;
color:#ccc;
margin-top:1em;
}

@media(max-width:636px){
#sidebar{
	width: 200px;
	float: none;
	margin:10px auto;
}
}


#footer{
clear: both;
width: 100%;
max-width:850px;
text-align: center;
font-size:12px;
margin: 10px auto;
color:#FFFFFF;
}

#footer p{
padding: 0.5em 0;
}


.WhitePicGreyBorder {
	border: 1px solid #666;
}

.TextMin {
	font-size: 9px;
}
.TextRed {
	color: #F00;
}
.TextPurple {
	color: #90F;
}
.TextGreen {
	color: #008080;
}
.resizeimage {
	width: 100%;
	margin-left:auto;
	margin-right:auto;
}
.resizeimage img {
	width: 100%;
   max-width: 500px; /* 最大幅 */
}
.resizeimage img.discimg{
	width: 100%;
   max-width: 200px; /* 最大幅 */
   min-width: 100px; /* 最小幅 */
}