@charset "UTF-8";
/* CSS Document */


.rec-wrap .innner p{text-align:center!important;}

.genre_title{margin-top:5em;}
.genre_title .row  h2{text-align:center;}
.genre_title .row  h2 span{text-align:center;}

.row{ 
	 display: flex;
	justify-content: space-between;
	flex-wrap:wrap; }	

h2{text-transform: uppercase;}
.report_detail h2 span{display:inline;padding-left:1em!important;}
.contact h2 span{display:inline;padding-left:1em!important;}

.room-right .total_fee{display:inline;padding-left:1em;}
.room-right .total_fee{padding: 0 0 5vw}


.contact{margin-bottom:1.5em;}

.contact h2{color: #FC247C;}
.contact h2 span{color: #FC247C;}
.contact h3{text-align:center;}
.contact h3 li{text-align:center;}

.contact_box .tel-number{text-align:center;font-size:8vw; margin-top:0.5em;
font-family:'Roboto', sans-serif;font-weight:bold;}

.col-md-3{width:47%;margin-bottom:2em;}

.col-md-3 img{width:100%!important;height:100px;margin-bottom:1em;position:relative;object-fit: cover;font-family: 'object-fit: cover;';}

.media_box{position:relative;}

.media-toolbar01{position:absolute; right:0; bottom:0;}
	
.label-color-drums{background-color: #EC1317!important;}
.label-color-band{background-color: #000000!important;}
.label-color-vocal{background-color: #9712EA!important;}
.label-color-piano{background-color: #F712B2!important;}
.label-color-guitar{background-color: #125E1C!important;}
.label-color-others{background-color: #F7A71F!important;}

.news-post-box{border-bottom: none;}

.room-top div + div{padding: 5vw 0 0;}
.room-top .room-left {padding: 5vw 1em;}
.room-top .room-right {padding: 0vw 1em 5vw;}

.latestreport{padding:1em;}

.timetable p{margin-top:0.5em;}

.studio_rental p{margin-top:0.5em;}

.bring_gear p{margin-top:0.5em;}

.total_fee p{margin-top:0.5em;}

.detail_fee p{margin-top:0.5em;}
.rec_report_contents p{margin-top:0.5em;text-align: justify;}
.other_contents p{margin-top:0.5em;}

.row > .recreport_box{ 
	width:20%;
	position:relative;
    margin: 10px 2%;}

.genre .inner .bottom h2{margin-top:1em;}

.rec_genre_list{margin-bottom:3em;}
.rec_genre_list > .st_box p{font-size: 3.5vw;}
.rec_genre_list > .st_box p span{font-size: 2vw;}
.rec_genre_list > .st_about{padding: 2em 5em 0;}
.rec_genre_list > .st_about p.txt{ font-size: 2.5vw;}

.rec-srv{
	padding-top:3em;
	margin-bottom:5em; 
}

.rec_genre_list .st_box{width:50%;}
.rec_genre_list .st_box:last-child{
	width: 100%;
	height: 38vw;
}
.flex{flex-wrap:wrap;}

p.news-img img{width: 100%!important;height:200px;object-fit: cover;font-family: 'object-fit: cover;';}

.back-bt a{padding:1em;border:2px solid #aaa;color:#999;display:block;margin:0 auto 1em;width:50%;text-align:center;}
.back-bt i{padding-right:.5em; color: #999;}
.back-bt a:hover{color:#dd0000;border:2px solid #dd0000;}
.back-bt i:hover {
    color: #dd0000;
}

/*PC版設定*/
@media screen and (min-width: 769px){
	.row{
		justify-content: flex-start;
		gap: 4%;
	}
	.col-md-3 img{width:100%;height:200px;}
	.col-md-3{width:22%;margin-bottom:2em;}
	.rec_genre_list .st_box{width:33.3%;} 
	.rec_genre_list .st_box:last-child{width:100%;height:30%;}
	/* .st_box:last-child img{height:350px;} */
	.rec_genre_list .st_box:last-child {
    height: 290px;
	}
	
	.room-left h3{font-size: 1vw;}
	.room-right h3{font-size: 1vw;}
	
	.timetable{display:inline;}
	
	/*
		.timetable p{font-size: 1.3vw;margin-top:0.5em;}
		.studio_rental p{font-size: 1.3vw;margin-top:0.5em;}
		.bring_gear p{font-size: 1.3vw;margin-top:0.5em;}
		.total_fee p{font-size: 1.3vw;}
		.detail_fee p{font-size: 1.3vw;margin-top:0.5em;}
		.rec_report_contents p{font-size: 1.3vw;margin-top:0.5em;}
		.other_contents p{font-size: 1.3vw;margin-top:0.5em;}
	*/
  .timetable p,.studio_rental p,.bring_gear p,.total_fee p,.detail_fee p,.rec_report_contents p,.other_contents p{
    font-size: clamp(15px,1.3vw,18px);
    line-height: 1.5;
  }
  .article-detal-section a {
    color: #FC247C;
  }
  
	.contact_box .tel-number{text-align:center;font-size:3rem; margin-top:0.5em;}
	
	.allreport{margin-top:5em;margin-bottom:1em;}
	
	.left_news_box ul::after, .left_news_box ul::before {
    content: "";
    width: 18.8%;
    order: 1;
	}
}/*min-width: 1024px*/