@charset 'utf-8';

/*---------------------------
共通お問い合わせ領域
---------------------------*/
.bottom_contact_wrap{
	background-image: url(/img/common/bg_contact.jpg);
	background-size: cover;
	padding: 35px 0;
	text-align: center;
}
.bottom_contact_wrap h2{
	color: #30a3b3;
	font-size: 25px;
	font-weight: 600;
}
.youtube_box iframe {
	width: 100%;
}
.youtube_box img {
	max-width: 100%;
}
.bottom_contact_wrap ul{
	margin-bottom: 10px;
}
.bottom_contact_wrap li{
	display: inline-block;
}
.bottom_contact_wrap a.contact_btn{
	background-color: #30a3b3;
	color: #fff;
	background-image: url(/img/common/icon_yajirushi_shiro.svg);
	background-position: 90% center;
	background-repeat: no-repeat;
	-webkit-background-size: 15px;
	background-size: 15px;
	display: inline-block;
	padding: 20px 100px;
	text-decoration: none;
	border-radius: 5px;
	
	
}.postimg_wrap::after {
	content: '';
	display: block;
	clear: both;
}
.postimg_wrap {
	margin-top: 2%;
}
.postimg_wrap a {
	float: left;
	display: block;
	margin-right: 2%;
	position: relative;
	margin-bottom: 2%;
}
.postimg_wrap a img {
	width: 100%;
}
.postimg_wrap a::after {
    content: '';
    background-image: url(/img/common/mushimegane.jpg);
    -webkit-background-size: contain;
    background-size: contain;
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}
a.back{
	color: #339BAA;
	border: 2px solid #339BAA;
	padding: 5px 50px;
	border-radius: 30px;
	text-decoration: none;
	display: inline-block;
}
/*---------------------------
 フッター
---------------------------*/
.site-footer {
	border-top: 1px solid #ADADAD;
}
.footer_wrap{
	padding-top: 30px;
	padding-bottom: 30px;
}
.footer_leftbox{
	width: 30%;
	float: left;
}
.footer_leftbox img{
	width: 100%;
}
.footer_rightbox{
	width: 66%;
	float: right;
}
.footer_rightbox li a{
	color: #404040;
	text-decoration: none;
}
.footer_rightbox li{
	float: left;
	margin-right: 20px;
	margin-top: 10px;
}
.copy{
	background-color: #dcdcdc;
	text-align: center;
	padding: 10px;
	color: #404040;
}
/*---------------------------
ページャー
---------------------------*/
a.next {
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    background-color: #30a3b3;
    padding: 5px 8px;
    margin: 5px;
    color: #fff;
}
a.last,a.first {
    display: inline-block;
    margin: 6px;
    color: #30a3b3;
}
a.pager,a.prev {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    background-color: #30a3b3;
    color: #fff;
    text-decoration: none;
}
span.current.pager {
    display: inline-block;
    background-color: #E3E3E3;
    padding: 5px 10px;
    margin: 5px;
}
.pagination{
	margin-bottom: 30px;
}
/*---------------------------
TOP
---------------------------*/
.news_wrap{
	margin-bottom: 50px;
}
.news_wrap dl dd, .news_wrap dl dt {
    display: inline-block;
}
.news_wrap dl dt {
    margin-right: 20px;
	color: #30a3b3;
}
.news_wrap dl {
    border-bottom: 1px dashed #bfbfbf;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.news_wrap h2{
	background-color: #30a3b3;
	color: #fff;
	font-size: 25px;
	font-weight: 600;
	padding: 5px 10px;
	margin-bottom: 30px;
}
.howto_box{
	width: 32.333333%;
	margin-right: 1.5%;
	border: 1px solid #c8c8c8;
	background-color: #D6EDF0;
}
.howto h2{
	font-size: 25px;
	color: #30a3b3;
	font-weight: 600;
	margin-bottom: 15px;
	padding-left: 50px;
	background-image: url(/img/common/icon_maiku.svg);
	-webkit-background-size: 25px;
	background-size: 25px;
	background-repeat: no-repeat;
	background-position: left center;
	border-bottom: 1px solid #30a3b3;
}
.howto_box img{
	max-width: 100%;
	height: 100%;
}
.howto_box h3{
	font-size: 20px;
	font-weight: 600;
	background-color: #30a3b3;
	color: #fff;
	padding: 10px;
	text-align: center;
}
.howto_box p{
	padding: 20px;
}
.howto_box .img_box{
	text-align: center;
	padding: 30px 0;
	background-color: #fff;
	height: 141px;
}

.howto_box:last-child{
	margin-right: 0;
}

/*---------------------------
 音楽館とは
---------------------------*/
table.price_table{
	width: 100%;
	margin-bottom: 30px;
}
.price_table th{
	font-size: 20px;
	background-color: #30a3b3;
	color: #fff;
	width: 20%;
	padding: 10px;
	font-weight: 600;
	text-align: center;
}
.price td{
	background-color: #C0E1E5;
	padding: 10px;
	font-size: 18px;
}
.price td li{
	display: inline-block;
}
.support li{
	display: inline-block;
	width: 48%;
	margin-right: 1%;
	text-align: center;
	padding: 10px;
	font-size: 18px;
	font-weight: 600;
	color: #30a3b3;
	border: 2px solid #30a3b3;
	border-radius: 2px;
	margin-bottom: 15px;
}
.support li:nth-child(even){
	margin-right: 0%;
}
.happyou .leftbox{
	width: 65%;
	float: left;
}
.happyou .rightbox{
	width: 30%;
	float: right;
}
.happyou .rightbox img{
	width: 100%;
}
.posting_content img {
	width: auto;
	height: auto;
	max-width: 100%!important;
}
.alignright {
	float: right;
}
/* 全域 end */
/*===========================================
 以下、メディアクエリ
===========================================*/
/*===========================
 【1024px以下】
 ★タブレット横以下に適用されるCSS
===========================*/
@media screen and (max-width:1024px){
	/* 1024down end */
}
/*===========================
【1023px以下】
 ★PC未満に適用されるCSS
===========================*/
@media screen and (max-width:1023px){
	/* 1023down end */
}
/*===========================
【800px以下】
★タブレット以下に適用されるCSS
===========================*/
@media screen and (max-width:800px){
	/* 800down end */
}
/*===========================
【767px以下】
★タブレット未満に適用されるCSS
===========================*/
@media screen and (max-width:767px){
	.youtube_box iframe {
		height: 300px;
	}
	.postimg_wrap a {
		width: 49%;
		margin-right: 2%;
	}
	.postimg_wrap a:nth-of-type(2n) {
		margin-right: 0;
	}
	/* 767down end */
}
/*===========================
 【666px以下】
 ★iPhone6以降の横未満に適用されるCSS
===========================*/
@media screen and (max-width:666px) {
	/* 666down end */
	.footer_leftbox{
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	.footer_rightbox li {
		float: left;
		margin: 0;
		width: 50%;
		color: #fff!important;
		text-align: center;
		font-size: 11px;
		background-color: #339BAA;
		padding: 10px;
		border: 1px solid #fff;
	}
	.footer_rightbox li a{
    display: block;
    color: #fff;
    line-height: 0;
    height: 10px;
    margin-top: 10px;
}
	.footer_rightbox {
		width: 100%;
		float: none;
	}
	
	.main_contents {
		float: none;
		width: 100%;
		margin-bottom: 20px;
	}
	.side{
		width: 100%;
		float: none;
		margin-bottom: 30px;
	}
	.happyou .leftbox {
		width: 100%;
		float: none;
		margin-bottom: 15px;
	}
	.happyou .rightbox {
		width: 100%;
		float: none;
	}
}
/*===========================
 【567px以下】
★iPhone5横未満まで適用されるCSS
===========================*/
@media screen and (max-width:567px){
	/* 567down end */
	.news_wrap dl dt {
		display: block;
	}
	
	.support li{
		font-size: 16px;
	}
	.bottom_contact_wrap h2 {
		font-size: 20px;
	}
	.bottom_contact_wrap a.contact_btn {
		background-position: 96% center;
		display: inline-block;
		padding: 10px;
		width: 90%;
	}
}
/*===========================
 【414px以下】
★iPhone6PLUS縦まで適用されるCSS
===========================*/
@media screen and (max-width:414px){
	/* 414down end */
}
/*===========================
 【375px以下】
★iPhone6,7縦まで適用されるCSS
===========================*/
@media screen and (max-width:375px){
	/* 375down end */
	.support li{
		font-size: 15px;
	}
	.howto_box h3{
		font-size: 17px;
	}
}
/*===========================
 【360px以下】
 ★Xperia AX SO-01E以下に適用されるCSS
===========================*/
@media screen and (max-width:360px){
	/* 360down end */
}
/*===========================
 【359px以下】
 ★iphone初期にのみ適用されるCSS
===========================*/
@media screen and (max-width:359px){
	/* 359down end */
}
/*===========================
 【568px以上】
 ★iPhone5横以上から表示されるCSS
===========================*/
@media screen and (min-width:568px) {
	/* 568over end */
}
/*===========================
 【667px以上】
 ★iPhone6以降の横以上に適用されるCSS
===========================*/
@media screen and (min-width:667px){
	/* 667over end */
}
/*===========================
【768px以上】 
★タブレット(最小)以上に適用されるCSS
===========================*/
@media screen and (min-width:768px){
	.postimg_wrap a {
		width: 32%;
	}
	.postimg_wrap a:nth-of-type(3n) {
		margin-right: 0;	
	}

	/* 768over end */
}
/*===========================
【801px以上】 
★タブレット縦(最大)より大きい場合に適用されるCSS
===========================*/
@media screen and (min-width:801px){
	/* 801over end */
}
/*===========================
【667px】～【800px】  
★iPhone6以降の横以上かつ、タブレット縦以下まで表示されるCSS
===========================*/
@media screen and (min-width:667px) and (max-width:800px){
	/* 667~800 end */
}
/*===========================
 【667px】～【1023px】
 ★iphone6横～PC未満まで適用されるCSS
===========================*/
@media screen and (min-width:667px) and (max-width:1023px){
	/* 667~1023 over end */
}
/*===========================
 【415px】～【800px】 
 ★スマホ縦より大、かつ、タブレット以下まで表示されるCSS
===========================*/
@media screen and (min-width:415px) and (max-width:800px){
	/* 415~800 end */
}
/*===========================
 【768px】～【1023px】 
 ★タブレット以上、かつ、PC以下に適用されるCSS
===========================*/
@media screen and (min-width:768px) and (max-width:1023px){
	/* 768~1023 end */
}
/*===========================
 【1024px以上】
 ★PC以上に適用されるCSS
===========================*/
@media screen and (min-width:1024px){
	/* 1024over end */
}
/*===========================
 【1280px以上】
 ★PC(1280px）以上に適用されるCSS
===========================*/
@media screen and (min-width:1280px){
	/* 1280over end */
}
/*===========================
 【1400px以上】
 ★PC(1400px）以上に適用されるCSS
===========================*/
@media screen and (min-width:1400px){
	/* 1400over end */
}