@charset "UTF-8";


/*--------------------------------------------------------------------
初期設定
--------------------------------------------------------------------*/


/* --------------- タグのリセット */

html {overflow-y: scroll; margin:0; padding:0;}
body {margin:0; padding:0;}
h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, address, blockquote, form {margin:0; padding:0; font-size:1em; font-style:normal; font-weight:normal;}
table {border-collapse:collapse; border-spacing:0;}
abbr, acronym, fieldset, img {border:0;}
ul {list-style:none;}
caption, th {text-align:left;}
a {outline:none;}


/* --------------- タグの基本設定 */

body {font-size:80%; line-height:1.5; font-family:Arial, Helvetica, sans-serif; width:100%;}  
a {text-decoration:none; color:#38a;}
a:hover {text-decoration:underline;}
b, em, strong {font-weight:bold;}
ol {padding-left:2em; list-style-type:decimal;}
p {margin-bottom:0.6em;}
hr {height:1px; border-width:1px 0 0; border-color:#555; background:#555; padding:0;}



/*--------------------------------------------------------------------
共通設定
--------------------------------------------------------------------*/


/* --------------- マージン調整各種 */

.noMgnTop {margin-top:0!important;}
.noMgnBtm {margin-bottom:0!important;}
.top10 {margin-top:10px!important;}
.top15 {margin-top:15px!important;}
.top20 {margin-top:20px!important;}
.top25 {margin-top:25px!important;}
.btm10 {margin-bottom:10px!important;}
.btm15 {margin-bottom:15px!important;}
.btm20 {margin-bottom:20px!important;}
.btm25 {margin-bottom:25px!important;}
.h5 {margin-left:5px!important; margin-right:5px!important;}
.h10 {margin-left:10px!important; margin-right:10px!important;}
.h15 {margin-left:15px!important; margin-right:15px!important;}
.h20 {margin-left:20px!important; margin-right:20px!important;}
.w60 {width:60%; margin-left:auto; margin-right:auto;}
.w70 {width:70%; margin-left:auto; margin-right:auto;}
.w80 {width:80%; margin-left:auto; margin-right:auto;}
.w90 {width:90%; margin-left:auto; margin-right:auto;}
.w100 {width:100%; margin-left:auto; margin-right:auto;}
.v5 {margin-top:5px; margin-bottom:5px;}
.v10 {margin-top:10px; margin-bottom:10px;}
.v15 {margin-top:15px; margin-bottom:15px;}
.sml {font-size:0.8em;}

/* --------------- 回り込み解除 */

.clear {clear:both;}
.clearfix {zoom:1;}
.clearfix:after {content:""; display:block; clear:both;}


/* --------------- サイズをゼロに */

.hidden {height:0!important; width:0!important; overflow:hidden!important;}


/* --------------- マウスオーバーで透明度変更 */

.opacity a:hover, .opacity a:hover * {filter:alpha(opacity=70); opacity:0.70; -moz-opacity:0.70;}
.opacity_minus, .opacity_minus * {filter:alpha(opacity=70); opacity:0.70; -moz-opacity:0.70;}
.opacity_minus a:hover, .opacity_minus a:hover * {filter:alpha(opacity=100); opacity:1.00; -moz-opacity:1.00;}


/* --------------- 折り畳みメニュー化 */

dl.accordion dt {cursor:pointer;}
dl.accordion dt:hover {color:#aaa;}
dl.accordion dd {overflow:hidden;}


/* --------------- リスト見出しマークを表示 */

ul.square {margin:0; padding:0 0 0 1.5em; list-style-type:square;}
ul.disc {margin:0; padding:0 0 0 1.5em; list-style-type:disc;}


/* --------------- レイアウト確認用 ※iを消して使用 */

i div {border:1px #f00 solid;}	/* divのみにボーダー表示 */
i * {border:1px #f00 solid; display:none;}	/* 全要素にボーダー表示 */


/*--------------------------------------------------------------------
基本レイアウト
--------------------------------------------------------------------*/


body {background:#000 url(../../images/bg.jpg) repeat-y 0 0; color:#fff;}

#header {margin:20px 16px 20px 34px;}

h1 {color:#5ac;}
h1 span {display:block; color:#fff;}
h2 {color:#38a; letter-spacing:-1px; margin-bottom:8px;}
h3 {font-size:1.6em; margin:20px 0 3px;}
.content {margin:0 16px 50px 34px;}

a#btn_backtotop * {filter:alpha(opacity=33); opacity:0.33; -moz-opacity:0.33;}
a#btn_backtotop:hover * {filter:alpha(opacity=80); opacity:0.80; -moz-opacity:0.80}

#footer {padding:25px 14px 10px 36px;}
#footer address {display:block; text-align:center; font-size:0.85em; color:#ccc;}

.catch {font-size:1.3em; margin:0 0 20px;}
.catch2 {margin-top:10px; padding-top:10px; border-top:1px #fff dotted;}
.cover {float:left; padding:0 10px 10px 0;}
.txt {float:left; padding:0 0 0 10px;}
.txt a {color:#fff; font-weight:bold;}
.txt p span {font-size:0.75em;}

#soundcloud {clear:both; padding-top:10px; position:relative;}
#soundcloud iframe {display:block; width:300px; height:380px;}
#mask {height:40px; width:300px; background:#000; position:absolute; top:120px; left:0;}

#social {margin-top:10px;}
.tweet, .fb-like {height:20px; display:block; float:left;}

#bio {margin-top:40px;}
#bio h2 {letter-spacing:-1px; margin-bottom:8px;}
#bio .member {margin-bottom:10px;}

#reco span {display:block; margin-top:0.8em;}
#reco ul {height:300px; overflow:auto; padding-right:10px;}
#reco li {border-left:4px #ddd solid; padding-left:8px; margin-bottom:15px;}
.spacer {height:0.5em;}

#twit_matome {height:400px; overflow:auto; padding:10px 10px 0 0;}
#twit_matome img {width:32px;}
#twit_matome a {color:#ddd;}
#twit_matome dd {margin:-36px 0 12px 0; padding:0 0 8px 56px; border-bottom:1px #fff dotted;}
#twit_matome dd p {margin:0; font-size:0.93em;}
#twit_matome dd span {font-size:0.8em;}

#shows dt {margin:0 0 3px; padding-top:8px; font-weight:bold; font-size:1.2em;}
#shows dd {border-left:4px #ddd solid; padding-left:8px;}
#shows dd img {margin:4px 0;}
#shows dd.fee {margin-bottom:10px;}

/* --------------- 振り分け */

@media only screen and (min-width: 540px) {				/* iPad, PC */
	h1 {font-size:70px;}
	h1 span {font-size:60px;}
	#header {margin-left:auto; margin-right:auto; width:620px; padding-left:34px; padding-right:16px;}
	#header p {font-size:25px;}
	.catch span {display:block;}
	.content {width:620px; margin-left:auto; margin-right:auto; padding-left:34px; padding-right:16px;}
	.txt {width:330px;}
	h2 {font-size:45px;}
	iframe#pv {width:620px; height:450px; margin-top:20px;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) { 	/* iPhone 横 */ 
	#wrap {width:480px; overflow:hidden;}
	h1 {font-size:50px;}
	h1 span {font-size:40px;}
	#header p {font-size:20px;}
	h2 {font-size:42px;} 
	#menu {font-size:35px;} 
	#menu a {filter:alpha(opacity=40); opacity:0.40; -moz-opacity:0.40;}
	.content {line-height:1.44;}
	iframe#pv {width:430px; height:350px; margin-top:20px;}
}
@media only screen and (max-width: 479px) { 
	#wrap {width:320px; overflow:hidden;}
	h1 {font-size:40px;}
	h1 span {font-size:25px;}
	h2 {font-size:35px;} 
	#bio .member img {width:260px;}
	#menu {font-size:26px;} 
	#menu a {filter:alpha(opacity=40); opacity:0.40; -moz-opacity:0.40;}
	.content {line-height:1.44;}
	iframe#pv {width:270px; height:230px; margin-top:20px;}
}

.ie	h1 {font-size:70px;}
.ie	h1 span {font-size:60px;}
.ie	#header {margin-left:auto; margin-right:auto; width:620px; padding-left:34px; padding-right:16px;}
.ie	#header p {font-size:25px;}
.ie	.catch span {display:block;}
.ie	.content {width:620px; margin-left:auto; margin-right:auto; padding-left:34px; padding-right:16px;}
.ie	.txt {width:330px;}
.ie	h2 {font-size:45px;}
.ie	iframe#pv {width:620px; height:450px; margin-top:20px;}