@charset "utf-8";


/* ----------------------------------------------------------------------
	
	 WE GOT MUSIC css 2ndフォーマット
	
---------------------------------------------------------------------- */


/* - サイトナビ　共通
---------------------------- */


div.site_nav {
	width:100%;
}

div.site_nav ul.site_bar {
	width:100%;
	display:table;
}

div.site_nav ul.site_bar > li {
	display:table-cell;
	width:50%;
	text-align:center;
	font-family: 'Brandon Grotesque black', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;
	font-weight:300;
	letter-spacing:2px;
	font-size:0.8rem;
}

div.site_nav ul.site_bar > li > a {
	display:block;
	padding:12px 5px;
	background-color:#efefef;
	color:#7a7a7a;
	-webkit-transition:0.3s ease;
  	-moz-transition:0.3s ease;
  	transition:0.3s ease;
}

div.site_nav ul.site_bar > li > a:hover {
	background-color: #ababab;
	color: #FFF;
}

div.site_nav ul.site_bar > li.current > a {
	background-color:#252525;
	color:#FFF;
}

div.site_nav ul.site_bar > li.current > a:hover {
	background-color:#252525;
	color:#FFF;
}

div.site_nav ul.site_bar > li > a > span.jp {
	color:#ff7b7b;
	
}


/* - セカンドコンテンツ　共通
---------------------------- */

#contents_body {
	width:100%;
}

div.contents_wrapper {
	max-width:1220px;
	margin:0 auto;
	padding:0 10px;
	padding-top:220px;
	box-sizing:border-box;
}

div.contents_wrapper .title h2 {
	text-align:center;
	font-family: 'Brandon Grotesque light', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;
	font-weight:300;
	font-size:2.0rem;
	letter-spacing:4px;
	color:#252525;
}

div.contents_block {
	padding-top:60px;
	padding-bottom:80px;
}


/*-----　フッター　-----*/

#footer { }

#footer .inner {
	text-align:center;
	font-size:0.75rem;
	letter-spacing:1px;
	padding:50px 10px;
	background-color:#efefef;
	font-family: 'Brandon Grotesque light', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;

}


/* - アバウト
---------------------------- */

.about_txt {
	max-width:680px;
	margin:0 auto;
	text-align:center;
}

.about_txt > p {
	font-size:0.85rem;
	line-height:2.0;
}


/* - ミュージック
---------------------------- */

div.mov { 
	width: 800px;
	margin: 0 auto;
	padding: 0;
}

div.if_wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

div.if_wrap > iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}


/*----- サウンドクラウド -----*/

ul.sc_list {
	max-width:660px;
	margin:0 auto;
}

ul.sc_list > li {
	margin-top:40px;
}

ul.sc_list > li:first-child {
	margin-top:0;
}



/* - アーティスト
---------------------------- */


ul.artist_list {
	max-width:880px;
	margin:0 auto;
}

ul.artist_list:after {
	content:'';
	display:block;
	clear:both;
}

ul.artist_list > li {
	float:left;
	text-align:center;
}

ul.artist_list.col3 > li {
	width:33.33%;
	padding:15px;
	box-sizing:border-box;
}

ul.artist_list.col3 > li > .img {
	font-size:0;
}

ul.artist_list.col3 > li h3 {
	font-size:1.1rem;
	margin-top:10px;
	text-align:center;
	font-weight:normal;
}


/* - ミュージック
---------------------------- */


ul.music_list {
	max-width:880px;
	margin:0 auto;
}

ul.music_list:after {
	content:'';
	display:block;
	clear:both;
}

ul.music_list > li {
	float:left;
	text-align:center;
}

ul.music_list.col3 > li {
	width:33.33%;
	padding:15px;
	box-sizing:border-box;
}

ul.music_list.col3 > li > .img {
	font-size:0;
}

ul.music_list > li.on_border .img img {
	border:1px solid #DDD;
}

ul.music_list.col3 > li h3 {
	font-size:1.0rem;
	margin-top:12px;
	text-align:left;
	font-weight:bold;
}

ul.music_list.col3 > li h3 > span {
	display:block;
	font-size:0.75rem;
	margin-top:2px;
}

ul.music_list.col3 > li .btn {
	background-color:#efefef;
	padding:8px;
	box-sizing:border-box;
	margin-top:20px;
}

ul.music_list.col3 > li .btn ul li {
	margin-top:8px;
}

ul.music_list.col3 > li .btn ul li:first-child {
	margin-top:0;
}

ul.music_list.col3 > li .btn ul li a {
	display:block;
	background-color:#FFF;
	font-size:0.85rem;
	padding:8px 12px;
	box-sizing:border-box;
	box-shadow: 0 1px 4px rgba(0,0,0,0.1);
	border-radius:4px;
	text-align:left;
	font-weight:bold;
	-webkit-transition:0.2s ease;
  	-moz-transition:0.2s ease;
  	transition:0.2s ease;
}

ul.music_list.col3 > li .btn ul li a:hover {
	color:#ff3857;
}

ul.music_list.col3 > li .btn ul li a svg {
	background-color:#808080;
	padding:5px;
	color:#FFF;
	border-radius:4px;
	-webkit-transition:0.2s ease;
  	-moz-transition:0.2s ease;
  	transition:0.2s ease;
}

ul.music_list.col3 > li .btn ul li a:hover svg{
	background-color:#ff3857;
}

ul.music_list.col3 > li .btn ul li a span.inner {
	display:table;
}

ul.music_list.col3 > li .btn ul li a span.inner > span {
	display:table-cell;
	vertical-align:middle;
}

ul.music_list.col3 > li .btn ul li a span.inner > span.cap {
	padding-right:0.5em;
	line-height:0;
}

ul.music_list.col3 > li .btn ul li a span.inner > span.cap img {
	width:24px;
	
}

@media screen and (max-width: 768px) {

div.mov { width: 100%; }

ul.music_list > li {
	float:none;
}

ul.music_list.col3 > li {
	width:100%;
	padding:0;
	box-sizing:border-box;
	margin-top:30px;
}

ul.music_list.col3 > li:first-child { margin-top:0; }

}

@media screen and (max-width: 680px) {

div.contents_wrapper {
	padding-top:200px;
}

}

@media screen and (max-width: 580px) {

ul.artist_list > li {
	float:none;
}

ul.artist_list.col3 > li {
	width:100%;
	padding:0;
	box-sizing:border-box;
	margin-top:15px;
}

ul.artist_list.col3 > li:first-child { margin-top:0; }



	
}

@media screen and (max-width: 480px) {

div.contents_block {
	padding-top:40px;
}

	
	
}

@media screen and (max-width: 359px) {

div.site_nav ul.site_bar > li {
	font-size:0.75rem;
}


}