@charset "utf-8";
/************************************************************************************************************************************
	全ページ共通
************************************************************************************************************************************/
.hiragino_gothic {
	font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 
							 'メイリオ', Meiryo, 
							 'Quicksand', '游ゴシック体', '游ゴシック', 'Yu Gothic', YuGothic, 
							 Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif
							 !important;
}
.hiragino_mincho {
	font-family: 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 
							 '游明朝体', '游明朝', 'Yu Mincho', YuMincho, 
							 'Quicksand', '游ゴシック体', 'Yu Gothic', YuGothic, 
							 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 
							 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif
							 !important;
}

.meiryo {
	font-family: 'メイリオ', Meiryo, 
							 'Quicksand', '游ゴシック体', '游ゴシック', 'Yu Gothic', YuGothic, 
							 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 
							 Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif
							 !important;
}
.yu_gothic {
	font-family: '游ゴシック体', '游ゴシック', 'Yu Gothic', YuGothic, 'Quicksand', 
							 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 
							 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif
							 !important;
}
.yu_mincho {
	font-family: '游明朝体', '游明朝', 'Yu Mincho', YuMincho, 
							 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 
							 'Quicksand', '游ゴシック体', 'Yu Gothic', YuGothic, 
							 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 
							 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif
							 !important;
}


.italic {
	font-style: italic !important;
}

.bold {
	font-weight: bold !important;
}



.sp-show {
	display: none !important;
}
@media screen and (max-width: 767px) {
	.sp-show {
		display: block !important;
	}
}

@media screen and (max-width: 767px) {
	.sp-hide {
		display: none !important;
	}
}




br.tb-show {
	display: none !important;
}
@media screen and (max-width: 1024px) {
	br.tb-show {
		display: inline !important;
	}
}

br.sp-show {
	display: none !important;
}
@media screen and (max-width: 767px) {
	br.sp-show {
		display: inline !important;
	}
	br.sp-hide {
		display: none !important;
	}
}



.caution {
	color: #d40707;
}


/** 共通要素 h1 p *****************************************************************/
main h1.common {
	display: inline-block;
	font-size: 187.5%;	/* 30/16*100 */
	font-weight: bold;
	font-family: 'Quicksand', sans-serif;
	line-height: 1;
	padding: 0.125em 2em 0.125em 0.5em;
	margin: 0 0 10px;
	background-image: url('../img/h1_bg.png');
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

main h2.common {
	font-size: 150%;	/* 24/16*100 */
	margin-bottom: 3.2258064516129032258064516129032%;	/* 30/930*100 */
	line-height: 1;
}

main p.text {
	font-size: 100%;	/* 16/16*100 */
	line-height: 2em;
	letter-spacing: 1px;
	margin: 0 auto 3.0612244897959183673469387755102%;	/* 30/980*100 */
}


@media screen and (max-width: 767px) {
	main h1.common {
		font-size: 137.5%;	/* 22/16*100 */
	}

	main h2.common {
		font-size: 112.5%;	/* 18/16*100 */
		margin-bottom: 35px;
	}

	main p.text {
		font-size: 87.5%;	/* 14/16*100 */
		margin: 0 auto 4.6153846153846153846153846153846%;	/* 30/650*100 */
	}
}




/** read more *****************************************************************/
p.readmore {
	text-align: right;
	margin: 10px 0;
}
p.readmore a {
	color: #7c5a1a;
	font-size: 112.5%;	/* 18/16*100 */
	line-height: 1;
	letter-spacing: 1px;
	text-decoration: none;
	vertical-align: middle;
}
p.readmore a::before {
	content: "＞ ";
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding-right: 0.5em;
}

p.readmore a:hover {
	color: #d0b789;
}


@media screen and (max-width: 767px) {
	p.readmore a.blue:hover {
		color: #7c5a1a;
	}
	p.readmore a.white:hover {
		opacity: 1;
	}

	p.readmore a.blue:active {
		color: #d0b789;
	}
	p.readmore a.white:active {
		opacity: 0.6;
	}
}




/************************************************************************************************************************************
	#page_top
************************************************************************************************************************************/
#page_top {
	padding-top: 8.6021505376344086021505376344086%;	/* 80/930*100 */
}


#page_top .text {
	box-sizing: border-box;
	width: 100%;
	padding: 0 50px;
	margin-bottom: 20px;
}

#page_top .signboard {
	width: 30%;
	margin: 0 auto;
}


@media screen and (max-width: 767px) {
	#page_top .text {
		padding: 20px;
	}
	#page_top .signboard {
		width: 60%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 330px) {
}




/************************************************************************************************************************************
	#member
************************************************************************************************************************************/
#member {
}

#member .member_list ul li {
	float: left;
	width: 31.578947368421052631578947368421%;	/* 300/950*100 */
	margin: 0 2.6315789473684210526315789473684% 30px 0;	/* (950-(300*3))/2/950*100 */
}
#member .member_list ul li:nth-child(3n) {
	margin-right: 0;
}

#member .member_list ul li h3.member_image {
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 10px;
	border: solid 5px #005daa;
}
#member .member_list ul li h3.member_name {
	color: #6d4700;
	font-size: 125%;	/* 20/16*100 */
}
#member .member_list ul li h3.member_name span {
	display: block;
	font-size: 80%;	/* 16/20*100 */
	margin-bottom: 5px;
}

#member .member_list ul li dl {
	margin-bottom: 10px;
}
#member .member_list ul li dl dt {
	color: #ffa500;
}
#member .member_list ul li dl dd {
	color: #6d4700;
}

#member .member_list ul li .twitter_link a {
	color: #6d4700;
	font-size: 112.5%;	/* 18/16*100 */
	vertical-align: bottom;
	text-decoration: none;
}
#member .member_list ul li .twitter_link a img {
	width: 32px;
	height: auto;
}


@media screen and (max-width: 767px) {
	#member .member_list ul li {
		width: 46.428571428571428571428571428571%;	/* 325/700*100 */
		margin: 0 5.2631578947368421052631578947368% 30px 0;	/* (700-(325*2))/1/950*100 */
	}
	#member .member_list ul li:nth-child(3n) {
		margin-right: 5.2631578947368421052631578947368%;	/* (700-(325*2))/1/950*100 */
	}
	#member .member_list ul li:nth-child(2n) {
		margin-right: 0;
	}

	#member .member_list ul li .twitter_link a {
		font-size: 87.5%;	/* 14/16*100 */
	}
	#member .member_list ul li .twitter_link a img {
		width: 26px;
	}
}

@media screen and (max-width: 330px) {
}




/************************************************************************************************************************************
	#discography
************************************************************************************************************************************/
#discography {
}

#discography .text {
	color: #999;
	font-size: 87.5%;	/* 14/16*100 */
}

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 330px) {
}




/************************************************************************************************************************************
	#goods
************************************************************************************************************************************/
#goods {
}

#goods .goods_list ul li {
	float: left;
	width: 31.578947368421052631578947368421%;	/* 300/950*100 */
	margin: 0 2.6315789473684210526315789473684% 30px 0;	/* (950-(300*3))/2/950*100 */
}
#goods .goods_list ul li:nth-child(3n) {
	margin-right: 0;
}

#goods .goods_list ul li h3.goods_image {
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 10px;
}
#goods .goods_list ul li h3.goods_image a {
	display: block;
}
#goods .goods_list ul li h3.goods_image a:hover {
	background-color: #333;
}
#goods .goods_list ul li h3.goods_image a:hover img {
	opacity: 0.4;
}
#goods .goods_list ul li .text {
	color: #6d4700;
}


@media screen and (max-width: 767px) {
	#goods .goods_list ul li {
		width: 46.428571428571428571428571428571%;	/* 325/700*100 */
		margin: 0 5.2631578947368421052631578947368% 30px 0;	/* (700-(325*2))/1/950*100 */
	}
	#goods .goods_list ul li:nth-child(3n) {
		margin-right: 5.2631578947368421052631578947368%;	/* (700-(325*2))/1/950*100 */
	}
	#goods .goods_list ul li:nth-child(2n) {
		margin-right: 0;
	}

	#goods .goods_list ul li h3.goods_image a:hover img {
		opacity: 1.0;
	}
	#goods .goods_list ul li h3.goods_image a:active img {
		opacity: 0.4;
	}
}

@media screen and (max-width: 330px) {
}




/************************************************************************************************************************************
	#media
************************************************************************************************************************************/
#media {
}

#media .media_list ul li {
	float: left;
	width: 47.368421052631578947368421052632%;	/* 450/950*100 */
	margin: 0 5.2631578947368421052631578947368% 30px 0;	/* (950-(450*2))/1/950*100 */
}
#media .media_list ul li:nth-child(2n) {
	margin-right: 0;
}


@media screen and (max-width: 767px) {
	#media .media_list ul li {
		float: none;
		width: 90%;
		margin: 0 auto 30px;
	}
}

@media screen and (max-width: 330px) {
}




/************************************************************************************************************************************
	#fanclub
************************************************************************************************************************************/
#fanclub {
}

#fanclub .image {
	width: 30%;
	margin: 0 auto;
}


@media screen and (max-width: 767px) {
	#fanclub .image {
		width: 75%;
	}
}

@media screen and (max-width: 330px) {
}




/************************************************************************************************************************************
	#management
************************************************************************************************************************************/
#management {
}

#management .image {
	width: 30%;
	margin: 0 auto;
}


@media screen and (max-width: 767px) {
	#management .image {
		width: 75%;
	}
}

@media screen and (max-width: 330px) {
}




