@charset "UTF-8";

html{
	
	margin:0!important;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
    }
/*
@media (min-width: 415px) and (max-width: 768px) {
     #loading__wrapper {
    width: 70%;
		 margin:0 auto;
		 overflow: hidden;

  }	
}*/
@media screen and (max-width:768px){
    
	 
 h1{
  width: 45vw;
    margin: 3% 0 1% 0;
    }
    h1 img{
        width:100%;
    }
 .key{
        width:100%;
    }
    
	
	
	.pc{
        display:none;
    }
     .inner{
        width:96%;
        margin: 0 auto;
    }
 
     #loading__wrapper {
    width: 100%;
         overflow: hidden;

  }
  #loading__wrapper .bx-wrapper img {
    width: 100%;
    display: block;

  }
    
    .key_wrap{
       
        width:100vw;
    } 
    section{
     width:100%;
    padding: 5% 0 8% 0;
    }
    
    section .inner{
        width:90%;
        margin: 0 auto;
    }
    
    section .inner img{
        width:100%;
		height:auto;
    }

  .bg-title {
   width: 100%;
    font-weight: bold;
    background: hsla(0, 0%, 100%, 0.9);
    font-size: 5.5vw;
    border-top: 6px solid #eba22c;
  }
    .bg-title .main_title_set{
       padding-left: 12%;
    margin: 5% 0 3% 0;
    }
   
    .bg-title.sp p.place{
   font-size: 5.5vw;
    margin: 0vw 0 0vw 22vw;
}
    .bg-title.sp p.logo{
        float:left;
        margin-top: 1%;
        
    }
    .bg-title h1{
       width:70vw;
        
    }
    .bg-title h1 img{
       width:100%;
        
    }
  .bg-title span {
    color: #EBA22C;
    
  }
  
  .bg-title p > img {
    width: 15vw;
   
    }
  .genre {
       line-height: 1.2em;
    text-align: center;
    font-size: 4.5vw;
}



  .genre span {
    line-height: 1.2em;
  }
  .bg-title .explain {
       font-size: 4.2vw;
    width: 90%;
    margin: 4% 0 3% 9%;
   font-family: 'Noto Serif JP', serif;
   
}
        

    .text_bottom.explain span.black{
        color:#000;
    }
    .text_bottom.explain span::before{
content: "";
        display:block; 
    }
     .bg-title span.blue{
        color:#4AA6F5;
    }
    
     .bg-title span.orange{
        color:#F79400;
    }
    
    .bg-title span.green{
        color:#33CC99;
    }
    
     .bg-title span.yellow{
        color:#FDCA30;
    }
    
     .bg-title span.red{
        color:#F34235;
    }
    
    
       /*--navigation  -------------*/  
    

    
#menu-btn {
   position: absolute;
    top: 2.3vw;
    right: 7vw;
    width: 9vw;
    z-index: 9999;

    
    }
#menu-btn.on{
width: 14.2vw;
    right: 3.4vw;
    top: 1.1vw;
    z-index: 999;
    }
 
#menu-conts {
   background: #f8f5f5f2;
    position: absolute;
    top: 14.8vw;
    width: 100%;
    z-index: 1;
    display: none;
    padding-bottom: 4%;
border-bottom: 6px solid #f79400;
}
#menu-conts ul li{
     text-align: center;
            
    }
    
#menu-conts ul li img{
        width:auto;
        height:10vw;
        
    }

#menu-conts a {
  display: block;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
    
}
 
#menu-conts a:hover {
background:hsla(0,8%,97%,0.67);
}
    

    
  /*--index用navigation  -------------*/  
    

  
   #index #menu-btn {
       position: absolute;
  top: 44vw;
    right: 7vw;
    width: 11vw;
    z-index: 9999;

    
    }
    #index #menu-btn.on{
  width: 17vw;
right: 2.8vw;
   top: 42.5vw;
    z-index: 999;
    }
 
#index #menu-conts {
background: #f8f5f5c2;
position: absolute;
top: 59vw;
width: 100%;
z-index: 1;
    display:none;

}
 #menu-conts ul {
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	}
  #menu-conts ul li{
        text-align: center;
		width:50%;
            
    }
    
  #menu-conts ul li img{
        width:auto;
        height:10vw;
        
    }

#menu-conts a {
  display: block;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
   padding: 10%;
}
	#index #menu-conts li:nth-child(1) a,
	#index #menu-conts li:nth-child(2) a{
		padding-top: 10%;
	}
 
#index #menu-conts a:hover {
background:hsla(0,8%,97%,0.67);
}
  
       
/*----------------------------------------*/ 
   .index section h2{
        margin-bottom: 10%;
    }
    

    .index .greeting{
    padding-top: 8%;
    }.greeting h2{
    font-size: 4.5vw;
    margin-bottom: 5.2%;
    font-weight: bold;
        text-align: center;
    }
  
    .greeting ul{
        display:flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 5%;
        
    }
    .greeting ul li{
        width:49%;
        margin-bottom:1%
        
        }
    .greeting ul li img{
        width:100%;
    }
  
    
    
    /*----lesson ------------*/
   .index section.lesson {padding: 5% 0 0% 0;}
    .index section.lesson li{
        margin-bottom: 23%;
    }
    
    .index .lesson h3{
    text-align: center;
  
    }

		.online_lesson iframe{
		width:100%!important;
	
    margin: 1em 0 2em 0;
	}
    .index .lesson h3 img{
        width:100%;
    }
    
    .index .lesson p.text{
          margin-top: 3%;
    }
    
    .index .lesson .more_btn{
     text-align: center;
    margin: 7% 0 0% 0;
    }
    
      .index .lesson .adults .more_btn a{
  color: #f79400;
       padding: 4% 20%;
    font-weight: bold;
    border: #f79400 solid 3px;
}
    .index .lesson .kids .more_btn a{
    color: #33cc98;
    padding: 4% 20%;
    font-weight: bold;
    border: #33cc98 solid 3px;
}
    .index .lesson .cajon .more_btn a{
    color: #4aa6f5;
   padding: 4% 20%;
    font-weight: bold;
    border: #4aa6f5 solid 3px;
    } 
    .index .lesson .more_btn a:hover{
        box-shadow: none;
        transition:0.3s;
		text-decoration: none;
        
    }
    /*----.blog------------------*/
   
    .index .blog li{
        margin-bottom: 7%;
		width:100%;
    }

	.index .blog li img{
		width:80%;
		margin-left:10%;
	}
    .index .blog h4{
      margin: 3% 0;
    font-size: 4.5vw;
    font-weight: bold;
    border-left: 5px solid #f79400;
    padding-left: 7px;
    }
	.index .blog a {
		color:#000;
		
	}
	.index .blog a:hover {
		text-decoration:none
	}
		.index .blog a.more {
		color: #f79400;
    float: right;
		
	}
	.index .blog p.time{
		margin-top: 4%;
    font-size: 76%;
	}
	.index .blog .more_btn{
		
	text-align: center;
    margin: 7% 0 0 0;
	}
	.index .blog .more_btn a{
	color: #f79400;
    padding: 4% 20%;
    font-weight: bold;
		border: #f79400 solid 3px;
	}
   
    
    /*---.fee---------------------------*/
    .fee_wrap{
        display:flex;
        
    }
    .fee_wrap .circle{
        width:34%
    }
    .fee_wrap .text{
		border: solid #F0A91D 3px;
    width: 60%;
    margin-left: 4%;
    border-radius: 14px;
    padding: 2% 1% 3% 2%;
    font-size: 3vw;
    margin: 3% 0 7% 3%;
		text-align: center;
}
	.fee_place_wrap .g_map iframe{
		border: 0;
    width: 100%;
    margin: 2% auto;
	}
   .fee .table{
           margin: 5% 0 2% 0;
    }
   .fee .comment{
        font-size:12px;
        margin-bottom: 10%;
    }
	.fee h2.kids_ttl{
	margin: 3em 0 1em 0;
    font-weight: bold;
    color: #4ea9d2;
    text-align: center;
}

    
    .fee_wrap .text span{
        color:#F0A91D;
        font-weight: bold;
        font-size:4vw;
    }
    
    
    /*----place--------------------------------*/
    
      .place h3{
        font-weight: bold;
    border-left: 5px solid #f79400;
    padding-left: 7px;
    font-size: 4.5vw;
    }
   .place p{
    font-size: 4vw;
    margin: 2% 0 6% 0;
    }
     .place p.explain{
   
 
    border: 1px dashed #f79400;
    padding: 2%;
    border-radius: 10px;
    }
    
    .place p.color{
    margin: 0% 2% 8% 14%;
    color: #f0a91d;
    }
     .place p.color i{
        width:20%;
    }
    .place p small{
 background-size: contain;
    border-bottom: solid 1px #f79400;
    }
    .place p.soudan{
        margin: 5% 0;
}
   .place .studio{
    padding: 5% 0 0% 0%;
    }
     .place .studio li img{
        width: 22%;

        margin-right: 10px;
    }
     .place .studio li a{
        color:#000;
        vertical-align: top;
     font-size: 3.8vw;
          
    }
    .place .studio li:first-child {
        margin-bottom: 5%;
    }
    .place .studio li.studio_wrap{
        margin-top: 5%;
    }
    
    
 /*----faq--------------------------------*/
    
 
   .faq{
        background: #FAFAFA;
    } 
    
 .faq_list dt.faq__ttl {
    background-image: url(../img/arrow_down.png), url(../img/Q.png);
    background-repeat: no-repeat;
    background-size: 7%, 6%;
    display: block;
    padding: 3% 9% 3% 8%;
    background-position: 100% 42%, 0% 29%;
    font-weight: bold;
    margin-bottom: 2px;
    border-bottom: 1px dashed #F79400;
  font-size: 3.5vw;
}


.faq_list dt.faq__ttl.open {
  background-image: url("../img/arrow_up.png"), url(../img/Q.png);
   margin-bottom: 0;
}


   .faq_list dd{
   /*margin: 2% 0; */
    padding: 2% 1em 2% 1em;
    /* border-bottom: 2px solid #eba22c; */
    background: #eba22c17;
    }
     section.to_contact{
 margin: 12% auto 0;
        text-align: center;
		         width: 86%;
 
    }

    section.to_contact a{
           color: #fff;
        font-weight: bold;
        padding: 1em 4.5em;
        background: #F79400;
        border-radius: 7px;
        box-shadow: 3px 2px 8px #00000030;
        font-family: 'Noto Sans JP';
		font-size:4vw;
    }
	section.to_contact a:hover{
		text-decoration:none;
		  background: #F79400ad;
	}
	 section.to_contact a{
           color: #fff;
        font-weight: bold;
        padding: 1em 4.5em;
        background: #F79400;
        border-radius: 7px;
        box-shadow: 3px 2px 8px #00000030;
        font-family: 'Noto Sans JP';
		font-size:4vw;
		 display: block;
    }
	
	
	/*20261月追記＝＝＝＝＝＝＝＝＝＝＝＝*/
	
	section.to_line,section.to_mail{
		text-align: center;
        width: 86%;
	}
	section.to_line{
	margin:-3em auto 0 auto;	
	}
	section.to_mail{
	margin:0 auto;	
	}
	
	section.to_line p{
		display:inline-block;
		background:#06C755;
		 border-radius: 7px;
        box-shadow: 3px 2px 8px #00000030;
	}
	section.to_mail p{
		display:inline-block;
		background:#f00;
		 border-radius: 7px;
        box-shadow: 3px 2px 8px #00000030;
	}
		section.to_line a,section.to_mail a{
           color: #fff;
        font-weight: bold;
        padding:1em 3em;
			font-size:4vw;
        font-family: 'Noto Sans JP';
		display: block;
    }
	section.to_line a:hover{
		text-decoration:none;
		  background: #06c7558f;
	}
	section.to_mail a:hover{
		text-decoration:none;
		  background: #ff000082;
	}
	section.to_mail{
		padding-top:0!important;
	}
	section.to_contact{padding:0 0 3% 0!important;}
	h2.contact_ttl img{
		width:100%;
		height:auto;
	}
    
    
    /*------.supporter----------*/
	section.supporter{
		padding: 8% 0 5% 0;

	} 
	.supporter h4{
    font-family: 'Anton', sans-serif;
   border-bottom: 1px solid #E60012;
    color: #E60012;
    font-size: 3.6vw;
    }
    
  .supporter .inner {
	  width: 94%;
	}
    .supporter li{
        text-align: center;
    }
	
   
   .supporter .maker_wrap{
        display:flex;
     justify-content: space-around;
        margin-top: 4%;
    }
    
     
    section.supporter .inner img{
        height: 5vw;
    width: auto;
    }
	section.supporter .inner li.grip img{
	height: 6vw;
	}
    
    
    
 /*=====================
  セカンドページ以降　共通
 ====================*/

      #lesson .key h2,
    #profile .key h2,
	#archive  .key h2,
	#contact .key h2{
        margin: 0;
    }
       #lesson .key img,
    #profile .key img,
	#archive .key img,
	#contact .key img{
        width:100%;
    }
	#contact label{
		width:100%;
	}
    
    /*=====================
   lesson.html  body id="lesson"
    ====================*/
 
    
    
    #lesson section .inner h2 {
        margin: 5% 0;
    }
        #lesson section .inner h2 img{
       width:90%;
    }
    
 /*---section.adults-------------------------*/ 
   
  
    #lesson .adults h3 {
      background: #f79400;
    margin-bottom: 3%;
  padding: 2% 3% 1% 0;
    text-align: center;
    }
    
#lesson .kids h3 {
  background: #33cc98;
    margin-bottom: 3%;
    padding: 2% 3% 1% 0;
    text-align: center;
    }
  
    #lesson .cajon h3 {
        background:#4aa6f5;
  margin-bottom: 3%;
    padding: 2% 3% 1% 0;
    text-align: center;
    }
    
    #lesson  h3 img{
        width: 60%;
    }
	
	#lesson .adults ul p,
	#lesson .kids ul p,
	#lesson .cajon ul p{
		padding: 2% 0 7% 0;
	}
	
	  #lesson .adults h4{
   font-weight: bold;
    border-left: 5px solid #f79400;
    padding-left: 2%;
    font-size: 5vw;
    margin: 0% 0 5% 6%;
        
    }
	 #lesson .adults .graff_wrap {
       
        text-align: center;
    }
	#lesson .adults .graff_wrap img{
		width:80%;
		margin-bottom: 6%;
	}
	#lesson .adults .graff_wrap .comment{
		text-align: left;
		margin-bottom: 10%;
	}
	#lesson .adults .time_table_wrap ul p{
       
    padding-left: 9%;
    background: url("../img/lesson/arrow_down.png") no-repeat;
    margin: 2% 0;
	background-position: 0 50%;
    background-size: 8%;
    }
    
    #lesson .adults .time_table_wrap ul p.first{
        padding: 2% 0 2% 9% ;
    }
     #lesson .adults .time_table_wrap ul p.last{
         background: none;
    }
   /*=====================
    #profile
    =========================*/ 
    

	
	
	main {
    /* important */
    height: 100%;
}
	
    #profile .cd-fixed-bg h1{
     font-family: 'Anton', sans-serif;
    padding: 2% 0 2% 2%;
    font-size: 5vw;
    text-align: right;
     width:100%;

    }
    #profile .cd-container{
       width:100vw;
        margin: 0 auto;
        padding: 4% 0;
        
    }
    #profile .cd-container p{
        line-height: 2;
        padding: 0 5%;
    }
     #profile .cd-container p span.year{
      font-weight: bold;
         color:#f00;display:block;
         border-bottom: solid 1px #000;
    }
      #profile .cd-container p span.artist{
       border-bottom:1px solid #000;
         display:block;
    }
    
    #profile .cd-container p span.bold{
        font-weight: bold;
    }
	#profile .cd-container p a{
		color:#f79400;
	}
    .cd-bg-1{
        position:relative;
    }
    .cd-bg-1 h1{
        position:absolute;
        right:5%;
        bottom:5%;
    }
    .cd-fixed-bg {
    min-height: 10vh;
    background-size: cover;
   /* background-attachment: fixed; */
    background-repeat: no-repeat;
    background-position: center center;
}


.cd-fixed-bg.cd-bg-3 {
    background-image: url(../img/bg_profile1_sp.png);
    padding: 60% 0;
    background-color: #eee;
    background-size: cover;
   
}
    .cd-fixed-bg.cd-bg-4 {
  background-image: url("../img/bg_profile3_sp.png");
   padding: 60% 0;  
   background-color: #eee;
    background-size: cover;
   
}

.cd-scrolling-bg {
    min-height: 100%;
      background: #eee;
}
    #profile .supporter{
        margin-bottom: 4%;
    }
	
	#profile span.text{
		display:inline-block;
	}
	
	#profile .takanori_instagram p{
	text-align:center;
	}
	#profile .takanori_instagram p img{
	 width:70%;

	}
	
	#profile .flex .photo img{
		width:100%;
	}
	#profile section.ohtani p span{
		font-weight:bold;
		margin:1em 0 3em 1em;
	}
	
		#profile section.ohtani p.instagram img{
		width: 70%;
        margin: 3em auto 0 auto;
        display: block;
	}

	/*-----------contact---------------------------*/
	#contact{
		 font-family: 'Noto Serif JP', serif;
	}
	#contact h2 img{
		width:100%;
	}
		.contact_wrap{
		padding:0 5%;
	}
	#contact button,#contact input, #contact  select, #contact  textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    width: 100%;
		border: #f5ddbb solid;}
	
	#contact .greeting_word{
		text-align: center;
    font-weight: bold;
		margin: 5% 0px;
		
	}
	/*-----------news---------------------------*/
 
	
	.key_news img,
	.key_single img{
		width:100%;
	}
	 .news h2,
	.single_page h2{
	    margin: 8% auto;
    text-align: center;
	}
	
	.news h2 img,
	.single_page h2 img{
		width:80%;
	}
	.news .blogcard {
		padding:0 5%;
		margin-bottom: 9%;
	}
	.news .blogcard img{
		    width: 80%;
    height: auto;
    margin: 0 10% 2% 10%;

	}

	.news .posts a{
		color:#000;
	}
	.news .posts .content{
		font-size:3.5vw;
		margin:2% 0;
	}
	.news .posts .info{
	font-size:2.8vw;
	
	}
		.news .posts .more{
	font-size:4vw;
	color:#f79400
	}
	
	.posts h3{
		font-weight: bold;
    font-size: 4.5vw;
 
	}
	.news .back_top{
		text-align:center;
		
	}
	.news .back_top a{
	color: #F7942E;
    font-weight: bold;
    font-size: 86%;
	}
	.news .back_top a:hover{
		color:#f79400;
	}
	
	
	
	/*============================
	
	==============================*/
	
	
	
	/*=========================
	 * 
	 * sidebar
	 * =========================*/
	
	#main-body-right{
    width: 94%;
    margin: 0 auto 10% auto;
    background: #f7f6f4;
    padding: 3%;
	}
	#npcatch .title{
		font-weight:bold;
	}
	#npcatch img {
		float: left;
    padding: 0 .5rem 0 0;
    max-width: 100%;
    height: auto;
    width: 32%;
	}
	#npcatch a{
		color:#000;
	}
	#npcatch .date{
	display: block;
    font-weight: 200;
    font-size: 83%;
	}
	.widget_newpostcatch{
		margin-bottom:10%;
	}
	.widget_categories{
	
	background: #fff;
    padding: 5% 2%;
	}
	.widget_categories a{
		color:#000;
	
	}
	.widget_categories li{
	background: url(http://ts-drumschool.com/wp-content/themes/ts-drumschool/img/arrow-right.png) no-repeat;
    padding-left: 5%;
    background-size: 2%;
    background-position: 1.5% 55%;
	}
	
	.widget-title{
    font-weight: bold;
    border-left: 5px solid #f79400;
    padding-left: 7px;
    font-size: 18px;
    margin: 0px 0 10px 0;
	}
	
	
	
	
	/*=========================
	 * .single_page
	 * =========================*/
	.key_single{
		width:100%;
	}
		.single_page .blogcard h3{
		border:none;
	}
	
	.single_page .blogcard{
		    padding: 0 6%;
	}
	.single_page .blogcard h3.blog_ttl{
		 text-align: left;
    font-weight: bold;
    border-left: 5px solid #f79400;
    padding-left: 7px;
    font-size: 4.2vw;
    margin: 0px 0 10px 0;
	}
	#prenext{
	font-weight: bold;
    font-size: 3.8vw;
    padding: 0 3%;
    text-align: center;

	}
	#prenext a{
		color: #000;
    line-height: 2em;
	}
		#prenext a:hover{
		color:#f79400;
	}


		.single_page .blogcard a{
	color:#000;
}
		.single_page .blogcard a.more{
	color:#f79400;
			font-size: 17px;
}
	.single_page .blogcard .info{
		    font-size: 3.2vw;
		margin-bottom:8%;
		
	}
	.single_page .blogcard  img{
		    width: 90%;
    height: auto;
    margin: 0 5%;
	}
		.single_page .blogcard .content{
	    font-size: 3.5vw;
			margin-bottom: 8px;
		
	}
	.single_page .supporter{
	
    margin-top: 160px;
	}
	
	
	/*------------footer----------*/
    footer{
        background: #ECEEEC;
        position:relative;
        padding: 5% 0 2% 0;
    }footer .sns{
        display:flex;
        margin: 0% 0% 4% 4%;
        
    }
    footer .sns i{
        color:#000;
        
    }
    
footer .sns li:first-child,
footer .sns li:nth-child(2){
    margin-right: 7%;
    }
    
    
    footer .footer_nav{
     display: flex;
    justify-content: space-around;
    font-family: 'Anton', sans-serif;
        margin-bottom: 10%;

    }
    footer .footer_nav a{
        color:#000;
    }
    footer .logo{
   width: 13vw;
    position: absolute;
    right: 2%;
    bottom: 7%;
    }
    footer .logo img{
        width:100%
    }
    footer .sns i{
            font-size: 10vw;
        
    }
	footer .sns img{
		width:46%;
		margin-top: 3%;
	}
	footer .vocal-school{
		text-align: center;
	}
	footer .vocal-school p img{
	width: 80%;
		margin:5% auto;

	}
    
	
	footer .copy{
        font-size:10px;
        text-align: center;
        margin: 5% 0;
    }
    
}