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


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
a{
    text-decoration: none;
    
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*-----文字サイズ設定----*/


html {
  line-height: 1.5;
  font-size: 100%;
	font-family: 'Noto Serif JP', serif;
}
  /*600px以降から、100pxごとに1px大きくなる*/
  @media (min-width: 600px) {
      html{ font-size: calc(100.5% + 4 * (100vw - 600px) / 400)
      }}
  /*1,000px以上は、22pxに*/
  @media (min-width: 1000px) {
      html{
    font-size: calc(118.5%)
  }
}



/*-----共通の幅------------*/

body {
  
  background: #F8F5F5;
	-webkit-text-size-adjust:100%;
    
    
}
header{font-family: 'Anton', sans-serif;
}
header .explain{
    font-family: 'Noto Serif JP', serif;
    font-weight: bold;
}

.center{
    text-align: center;
}
#loading__wrapper{
    background: #fff;
}


#is-loading {
 display: block;
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 background: #FFF;
 z-index: 8;
}
#loading {
 display: none;
 position: fixed;
 top: 50%;
 left: 50%;
 width: 200px;
 height: 200px;
 margin-top: -100px;
 margin-left: -100px;
 text-align: center;
 color: #fff;
 z-index: 9;
}

.main_content{
    font-family: 'Noto Serif JP', serif;
}


/*---page top!-------------*/

#pageTop {
    position: fixed;
    bottom: 17px;
    right: 4px;
    z-index: 9999;
}

 

#pageTop i {
  padding-top: 6px
}
#menu-conts{border-bottom: 6px solid #f79400;}


 

#pageTop a {
display: block;
    z-index: 999;
    padding: 7px 7px 6px 7px;
    border-radius: 30px;
    width: 44px;
    height: 44px;
    background-color: #ff980085;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-align: center;

}

 

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}/*-----------------*/
/*-----文字サイズ設定-END---*/
@media screen and (min-width:769px) {
    .sp{
        display: none
    }
    
   a:hover img{
        opacity:0.8;
        transition:0.3s
    }
	
	    
	h1{
     width: 300px;
    margin-left: 20px;
    padding: 15px 0 10px 0;
    }
    h1 img{
        width:100%;
    }

  #loading__wrapper {
    width: 1200px;
    margin: 0 auto;
      box-shadow: 0px 11px 15px hsla(0,0%,0%,0.21);
  }
  #loading__wrapper .bx-wrapper img {
    max-width: 1200px;
    width: 100%;
    display: block;
    margin: 0 auto;
  }
    
    .key_wrap{
        position:relative;
    } 

  .bg-title {
    width: 30%;
    font-weight: bold;
    background: hsla(0, 0%, 100%, 0.9);
    height: 616px;
      position:absolute;
      left:0%;
      top:0%;
  }
    

  .bg-title span {
    
    font-size: 30px;
  }
  .bg-title.pc p.logo, .bg-title p.place {
    text-align: center;
    font-size: 30px
  }
  .bg-title p > img {
    width: 100px;
    margin: 20px 0 0 0;
  }
  .bg-title .text_bottom {
    padding-left: 9%;
    font-size: 30px;
  }
  .bg-title h1 {
 font-size: 45px;
    width: 200px;
    padding: 0;
    margin: 0% auto;

  }
  .genre {
    line-height: 1.2em;
    padding-left: 9%;
   margin-top: 10px;
  }
  .genre span {
    line-height: 1.2em;
  }
  .bg-title .explain {
    font-size: 20px;
    margin-top: 22px;
    
  }
   
    .bg-title .line-height{
        line-height: 1.2;
        
    }
    .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;
    }
    
    
    .bg-title .mb{
        margin-bottom: 10px;
    }
    .bg-title .mt{
        margin-top: 10px;
    }
    
    .bg-title span.orange{
        color:#F79400;
    }
    
    /*-----------second page 以降---------*/
    header .inner{
        position:relative;
    }
      header .inner .to_contact{
     position: absolute;
    right: 30px;
    top: 30px;
    margin: 0;
    width: 160px;
	}
	header .inner .to_contact img{
		width:100%;
	}
   header .inner .to_contact a:hover {
	border:none;	
	    text-decoration:none;
	}
 
  /*---navigation-*/
  .menu-container {
    margin: 0;
  }
  .menu-container .menu {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0 auto;
    padding: 10px 0 0 0;
     
  }
  .menu-container .menu .menu-item {
    flex: 1;
  }
  .menu-container .menu .menu-item a {
    border-right: 1px solid #ccc;
    color: #333;
    display: block;
    text-align: center;width:100%;
  }
  .menu-container .menu .menu-item:last-child a {
    border-right: none;
  }
    
    /*navigation*/
    
    #menu-btn{
        display:none;
    }
     
	
	
	
	
	
    
    /*gnavi*/
    #index #menu-conts ul{
display: flex;
justify-content: space-around;
    padding: 16px 0 16px;
box-shadow: 0px 1px 7px hsla(0,0%,0%,0.21);
		border: none;
    }
    #index #menu-conts ul li{
      border-left: solid 1px #222;
    width: 20%;
    text-align: center;
        
    }
    
    #index #menu-conts ul li a{
        display:inline-block;
        width:100%;
        height:100%
    }
    #index #menu-conts ul li:first-child{
        border:none;
    }
	
	
	
	 
    /*gnavi*/
    #menu-conts ul{
display: flex;
justify-content: space-around;
    padding: 8px 0 ;
/*box-shadow: 0px 1px 7px hsla(0,0%,0%,0.21);*/
		
		border-top: 6px solid #f79400;
    }
    #menu-conts ul li{
      border-left: solid 1px #222;
    width: 20%;
    text-align: center;
    padding: 16px 0 5px 0;

        
    }
    
    #menu-conts ul li a{
        display:inline-block;
        width:100%;
        height:100%
    }
    #menu-conts ul li:first-child{
        border:none;
    }
    
    
/*================================================
    
    index
    
====================================================*/
    
/*-----.main_content.index-----------*/
	.index h1{
		width:300px;
	}
    .main_content{
        width:1200px;
        margin: 0 auto;
    
    }
  
    .index section {
        padding-top: 120px;
        
    }
   .index section h2 {
        margin-bottom: 50px;
    }
    
   .index section h2 img{
       width: 460px;
        
    }
    .index .greeting h2{
  font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-left: 47px;
    border-bottom: 1px solid #000;
		    display: inline-block;
    }
    
    .index .greeting p{
       margin: 10px 0 0 20px;
    font-size: 18px;
    line-height: 2.5;
    font-weight: bold;
    /* background: #ffffff2e; */
    /* display: inline-block; */
    padding: 0 2%;
    }
    .index .greeting ul{
       margin-top: 30px;
    }

    
    .index .greeting{
background: url(../img/greeting_bg.jpg) no-repeat;
    padding: 30px 0;
    background-size: 50%;
    background-position: 100% 54px;
}


    /*--------section.lesson------------*/
    
	.online_lesson{
		text-align:center;
	}
	.online_lesson h3{
	margin: 1em 0 2em 0;
	}

	
    .index section{
        padding-bottom: 57px;
    }
    .index .both_course{
    display:flex;
        justify-content: space-around
}
    
    
    .index .all_courses{
        display:flex;
        justify-content: space-around;
        
    }
    .index .all_courses li{
        width:32%;
        position: relative;
        padding-top: 30px;
    }
  
    
    .index .all_courses li .image{
        text-align: center;
    }
    .index .all_courses li img{
        width:100%;
        
    }
    .index .all_courses li p{
        padding: 3% 5%;
        text-align: justify;
    
    } 
    .index .all_courses h3 img{
       width:90% ;
        margin-left:5% ;
    }
    
    .index .lesson .more_btn,
	.index .blog .more_btn{
     text-align: center;
       margin-top: 58px;
        
    }
    .index .lesson .more_btn a,
	.index .blog .more_btn a{
  color: #000000;
    background: #fff;
    padding: 20px 104px;
    /* border-radius: 5px; */
    box-shadow: 9px 7px 4px 0px hsla(0,0%,0%,0.41);
    font-weight: bold;
    border: #f79400 solid 3px;

}
    .index .lesson .more_btn a:hover,
	.index .blog .more_btn a:hover{
        box-shadow:none;
        transition:0.3s;
		text-decoration: none;
    }
    
    /*------------blog-----------*/
    .index .blog{
        background: #fff;
		padding-top: 80px;
    }
        
    
    .index .blog ul{
        display:flex;
        justify-content: space-around
    }
    .index .blog ul li{
        width:30%;
        
	}
	.index .blog  a{
		color:#000;
	}
	.index .blog  a p{
	font-size:14px;
			
	}
.index .blog  a.more{
float: right;
    font-size: 14px;
    color: #f79400;
	
}
.index .blog p.time{
	font-size:14px;
    margin-top: 1.5em;

}
	
	
    .index .blog ul li .img{
        text-align: center;
    }
    .index .blog ul li h4{
   margin: 1em 0;
    border-left: 5px solid #f79400;
		padding-left: 7px;
	}
	
    .index .blog ul li img{
  width: 100%;
    height: auto;
    max-width: 300px;
    margin: 0 auto;
    
        
    }

	.index .blog h4{
		font-weight:bold
	}
	.index .blog a:hover img{
		opacity:1;
	}
	.index .blog a:hover {
		text-decoration:none;
	}
	.index .blog a:hover p{
		text-decoration:none;
	}
	.index .blog　p a{
		font-size:14px;
	}
	.imgWrap {
	overflow: hidden;
    width: 100%;
    height: auto;
}
.imgWrap img {
	display: block;
	width:100%;
	height:auto;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.imgWrap img:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
	opacity:1		;
}
    /*-----fee-------------------------------*/
    
    .fee_place .fee_wrap{
        display:flex;
        margin-bottom: 20px;
    }
    
    .fee_place_wrap{
        display:flex;
    padding: 20px 10px 20px 20px;
        
    }
   .fee_place_wrap li.fee,
    .fee_place_wrap li.place
    {
        width:50%;
    }
   .fee .table{
        width:80%;
        margin: 0 auto;
        
    }
     .fee .table img{
        width:100%;
        
    }
	.fee h2.kids_ttl{
	margin: 3em 0 1em 0;
    font-weight: bold;
    color: #4ea9d2;
    text-align: center;
}
	.fee_place_wrap .g_map iframe{
	    width: 96%;
	}
    
    .fee_place .circle{
       margin: 0 2% 0 2%;
    }
	.index .fee_place .circle{
	margin: 0 2% 0 2%;
    width: 30%;
    text-align: center;
	}
	.index .fee_place .circle img{
		width:84%;
	}
	
	
    .fee_place .text{
border: #eea91d solid 3px;
    border-radius: 10px;
    margin: 15px 0 30px 0;
    text-align: center;
    padding: 0.8em;
        
    }
    .fee_place .text span{
  color: #eea91d;
    font-weight: bold;
    font-size: 22px;
        
    }
   .fee_place .comment{
    font-size: 14px;
    width: 80%;
    margin: 2% 0 0 10%;
    }
    
    .place h3{
        font-weight: bold;
    border-left: 5px solid #f79400;
    padding-left: 7px;
    font-size: 20px;
    }
    .place p{
        font-size: 14px;
    margin: 0% 0 2% 0;
    }
    .place p small{
    background: url(../img/icon_house.png) no-repeat;
    padding: 6px 0 5px 34px;
    background-size: contain;
    border-bottom: solid 3px #f79400;
    }
    .place p.soudan{
        margin: 5% 0;
}
    .place .studio{
        margin-top: 14px;
    }
   .place .studio li img{
        width:12%;
        margin-right: 10px;
    }
    .place .studio li{
        margin: 2% 0 0% 0;
    }
    .place .studio li a{
        color:#000;
        vertical-align: middle;
        font-size:14px;
   
    }
   .place .studio li a:hover{
       color:#F79400;
    }
  /*   .index .place .studio_wrap .color{
       margin: 1% 0 8% 15%;
         color:#F79400;
    }*/
    
   
     .place li.studio_wrap{
     margin:4% 0 6% 0px;
    }
    
     .place li.studio_wrap .explain{
        margin-top: 4%;
    }
    
    
    
    /*-------faq-----------------------*/
    
  .faq .inner{
  background-image: url(../img/img_faq01.png), url(../img/img_faq02.png);
    background-repeat: no-repeat;
    background-position: 98% 97px, 89% 434px;
    background-size: 23%, 18%;
    }
    
    
.faq_list dt.faq__ttl {
  background-image: url("../img/arrow_down.png"), url(../img/Q.png);
  background-repeat: no-repeat;
  background-size: 30px, 30px;
  display: block;
  padding: 20px 46px 18px 48px;
  background-position: 98% 55%, 1% 21px;
  font-weight: bold;
  margin-bottom: 2px;
    border-bottom:1px dashed #F79400;
 
}


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


.faq .big_category {
  width: 788px;
    margin: 40px 0 40px 40px;
    padding: 0 20px;
   
}
    .faq_list dd{
     padding: 2% 1em;
    background: #eba22c1a;
    }
   section.to_contact{
 margin: -50px auto -8%;
 text-align: center;
 }
	#lesson section.to_contact{
		margin:5% auto;
	}

   section.to_contact a{
           color: #fff;
        font-weight: bold;
        padding:1em 10.7em;
        background: #F79400;
        border-radius: 7px;
        box-shadow: 3px 2px 8px #00000030;
        font-family: 'Noto Sans JP';
    }
	section.to_contact a:hover{
		text-decoration:none;
		  background: #F79400ad;
	}
	
	section.to_contact a:hover{
		text-decoration:none;
		  background: #ebbd78;
	}
    
/*20261月追記＝＝＝＝＝＝＝＝＝＝＝＝*/
	
	section.to_line,section.to_mail{
		text-align:center;
		
	}
	section.to_line{
	margin:-7em 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 5em;
        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;
	}
	
	h2.contact_ttl img{
		width:460px;
	}
	
	#lesson section.to_mail{
		padding-top:0!important;
		margin-top: 2.5em;
		margin-bottom: 3em;
	}
	#lesson section.to_line{
		margin:3em auto;
	}
    
 /*-----supporter---------------------*/
   
    .supporter{
           padding: 36px 0;

    }
    .supporter h4{
font-family: 'Anton', sans-serif;
    border-bottom: 4px solid #E60012;
    color: #E60012;
    font-size: 20px;
    margin: 0 0 0px 568px;
    width: 485px;
    text-align: center;
		
	}
    .supporter .maker_wrap{
     display: flex;
    justify-content: flex-end;
    padding-right: 12%;
        margin-top: 16px;
        
    }
    .supporter .maker_wrap img{
       height:30px;
    }
	 .supporter .maker_wrap li.grip img{
	    height: 36px;

		 
    margin-left: 14px;
	}
   .supporter .maker_wrap a:hover img{
        opacity:0.8;
        transition:0.3s;
    }
   .supporter li:first-child{
    margin-right: 2%;
    }
    
 
    .key .inner{
        width:100%;
    }
	
	
    /*=====================
   lesson.html  body id="lesson"
    ====================*/
     #lesson section .inner{
        width:1200px;
        margin: 0 auto;
         padding: 30px 0;
    }

    /*-------------section.adults------------------*/
    
    
    section.adult ul li p,
    section.kids ul li p,
    section.cajon ul li p{
        
        padding: 5%0;
    }    
    #lesson .adults ul.flex,
    #lesson .kids ul,
    #lesson .cajon ul{

        display:flex;
        justify-content: space-around;
    }
    #lesson .adults ul.flex li,
     #lesson .cajon ul li{
        width:30%;
        
    }
	#lesson .kids ul li{
		width:24%;
	}
    #lesson .adults ul li img,
    #lesson .kids ul li img,
    #lesson .cajon ul li img{
        width: 100%;
    }
    #lesson .adults h3 {
    background: #f79400;
    margin-bottom: 38px;
    padding: 5px 0 5px 24px;
    position: relative;
    } 
    
    #lesson .adults h3 img{
        width: 300px;
    }
    #lesson .adults h3 span{
  left: 380px;
    top: 38%;
    font-weight: bold;
    vertical-align: middle;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    position: absolute;
    color: #fff;
    }
    
    #lesson .adults h4{
   font-weight: bold;
    border-left: 5px solid #f79400;
    padding-left: 7px;
    font-size: 28px;
    margin: 0% 0 5% 2%;
        
    }
    #lesson .adults .time_table_wrap{
        display:flex;
        
    }
    #lesson .adults .graff_wrap{
        width:44%;
        text-align: center;
    }
	#lesson .adults .graff_wrap .comment{
		text-align: left;
		margin-left: 6%;
	}
	
    #lesson .adults .graff img{
        width:400px;
    }
    #lesson .adults .time_table_wrap ul{
        width:50%;
    }
    
    #lesson .adults .time_table_wrap ul p{
       
    padding-left: 7%;
    background: url("../img/lesson/arrow_down.png") no-repeat;
      
        margin: 2% 0 5% 0;
        background-position: 0 50%;
    }
    
    #lesson .adults .time_table_wrap ul p.first{
        padding: 2% 0 2% 7% ;
    }
     #lesson .adults .time_table_wrap ul p.last{
         background: none;
    }

    /*-------kids------------*/

     #lesson .kids h3 {
        background: #33cc98;
    margin-bottom: 38px;
    padding: 5px 0 5px 24px;
        position: relative;
    } 
    
    #lesson .kids h3 img{
        width: 300px;
    }
    #lesson .kids h3 span{
  left: 380px;
    top: 38%;
    font-weight: bold;
    vertical-align: middle;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    position: absolute;
    color: #fff;
    }
  /*------------------------------------*/
     #lesson .cajon h3 {
        background:#4aa6f5;
    margin-bottom: 38px;
  padding: 5px 0 5px 24px;
    position: relative;
    } 
    #lesson .cajon h3 img{
        width: 300px;
    }
    
    #lesson .cajon h3 span{
  left: 380px;
    top: 38%;
    font-weight: bold;
    vertical-align: middle;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    position: absolute;
    color: #fff;
    }
 
   
    #lesson .lesson_main img{
       width: 460px;
    margin: 60px 0 50px 0;
    }
    
    
    #lesson section.fee_place h2 img,
    #lesson section.faq h2 img{
       width: 460px;
        
    }
	
    /*=================================
    profile.html
    
    =====================================*/
    
  main {
    /* important */
    height: 100%;
}
    #profile .cd-fixed-bg h1{
     font-family: 'Anton', sans-serif;
    padding: 2% 5% 2% 2%;
    font-size: 40px;
    text-align: right;
     width:100%;
   
    }
    #profile .cd-container{
       width:1000px;
        margin: 0 auto;
        padding: 4% 0;
    }
    #profile .cd-container p{
        line-height: 2;
    }
     #profile .cd-container p span.year{
      font-weight: bold;
         color:#f00;display:block;

    }
    #profile .cd-container p span.bold{
        font-weight: bold;
    }
     #profile .cd-container p span.artist{
       border-bottom:1px solid #000;
         display:block;
    }
    .cd-bg-1{
        position:relative;
    }
    .cd-bg-1 h1{
        position:absolute;
        right:5%;
        bottom:5%;
    }
    .cd-fixed-bg {
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}
  
.cd-fixed-bg.cd-bg-1 {
background-image: url(../img/bg_profile1.png);
    padding: 30%;
    background-size: cover;
    color: #fff;
   
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../img/bg_profile2.png");
    padding: 30% 0;
    background-size: cover;
    color:#fff
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("../img/bg_profile1_pc.png");
    padding: 28.5% 0;
    background-size: contain;
   background-color: #eee;
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url(../img/bg_profile3.png);
    padding: 25% 0;
    background-size: contain;
    background-color: #eee;
}
  
.cd-scrolling-bg {
    min-height: 100%;
        background: #eee;
    }
	#profile .cd-container p a{
		color:#f79400;
	}
	
	
		#profile span.text{
		display:inline-block;
	}
	#profile .takanori_instagram p{
		margin: 20px 0 0 0;
	}
	
	/*Koh Otani---------------*/
	
	#profile .flex{
		display:flex;
		justify-content:space-between;
	}
	#profile .flex .photo{
		width:50%;
	}
	#profile .flex .photo img{
		width:80%;
	}
	#profile .flex .text-area{
		width:50%;
	}
	#profile section.ohtani p span{
		font-weight:bold;
		margin-left:1em;
	}
	#profile section.ohtani p.instagram img{
		width:330px;
	}
	#profile section.ohtani p.instagram{
		margin:0em 0 5em 0;
	} 
	

	#profile .supporter{
		margin-top:-110px;
		
	}
	
	.takanori_instagram img{width: 330px;}
/*======================================
 * news
 * ================================*/

    .news{
	
		font-family: 'Noto Serif JP', serif;
		
	}
		.news h2,
	.single_page h2{
		text-align:center;
		margin: 60px 0 50px 0;
	}
	.news h2 img,
	.single_page h2 img{
		width:460px;
	
	}
	#main-body-left{
width: 880px;
	}
	.news .flex_wrap{
		display:flex;
		padding:0 5%;	
	    margin-bottom: 150px;
}
	.news .blogcard{
		display:flex;
		    margin-bottom: 60px;
	}
	.news .blogcard a{
	color:#000;
}
		.news .blogcard a.more{
	color:#f79400;
			font-size: 17px;
}
	.news .blogcard .info{
		font-size:14px;
		margin-bottom:5px;
		
	}
		.news .blogcard .content{
		font-size:16px;
			margin-bottom: 8px;
		
	}



	.news .blogcard h3.blog_ttl{
	  text-align: left;
    font-weight: bold;
    border-left: 5px solid #f79400;
    padding-left: 7px;
    font-size: 20px;
    margin: 0px 0 10px 0;
	}
	.news .blogcard .posts{
		padding:0 0 0 2%;
	}
		.posts h3{
		font-weight:bold;
	}
	
	.news .blogcard img{
		width:300px ;
		height:auto;
	}

	.news .back_top a{
	font-weight: bold;
    color: #f79400;
    font-size: 86%;
	}
	.news .back_top a:hover{
		color:#f79400;
	}
	/*=========================
	 * 
	 * sidebar
	 * =========================*/
	
	#main-body-right{
		width: 300px;
    padding: 2%;
    border-radius: 7px;
	}
	.widget-title{
		text-align: left;
    font-weight: bold;
    border-left: 4px solid #f79400;
    padding-left: 7px;
    font-size: 18px;
    margin: 0px 0 10px 0;
	}
	
	#npcatch{
	margin-bottom:30px
	}
	#npcatch .date{
		display:block;
	}
	#npcatch .title{
	    overflow: hidden;
    display: block;
    color: #000;
    font-weight: bold;
    font-size: 17px;
	}
	#npcatch .title .date{
		font-weight:200;
		font-size:14px;
	}
	#categories-3 a{
		color:#000;
		font-size:16px;
	}
	#categories-3 a:hover{
		text-decoration:none;
		color:#f79400;
	}
	/*=========================
	 * 
	 * .single_page
	 * =========================*/
	
	.single_page .flex_wrap{
		display:flex;
	}
	.single_page .blogcard{
		  width: 700px;
    margin: 0 auto;
	}
	.single_page .blogcard h3.blog_ttl{
		 text-align: left;
    font-weight: bold;
    border-left: 5px solid #f79400;
    padding-left: 7px;
    font-size: 20px;
    margin: 0px 0 10px 0;
	}
	#prenext{
display: flex;
    margin: 100px auto 50px auto;
    font-weight: bold;
    font-size: 16px;
    justify-content: center;

	}
	#prenext a{
		color:#000;
	}
		#prenext a:hover{
		color:#f79400;
	}

	#prenext .pre::after{
		    content: "|";
    margin: 0 10px 0 10px;
	}
		.single_page .blogcard a{
	color:#000;
}
		.single_page .blogcard a.more{
	color:#f79400;
			font-size: 17px;
}
	.single_page .blogcard .info{
		font-size:14px;
		margin-bottom:45px;
		
	}
		.single_page .blogcard .content{
		font-size:16px;
			margin-bottom: 8px;
		
	}
	.single_page .supporter{
	
    margin-top: 160px;
	}
	
	
	
/*================================
 * contact
 * ===============================*/
	.key_contact{
		width:1200px;
	}
	.key_contact img{
		width:100%
	}
	.contact_wrap{
		width:800px;
		margin:0 auto;
		padding:80px 0 0 0;
		 font-family: 'Noto Serif JP', serif;
		
	}
	.contact_wrap .greeting_word{
	font-size:24px;
	    font-weight: bold;
    margin-bottom: 40px;
	}
	
	
	/*------------footer----------*/
    footer{
       background: #ECEEEC;
    width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 5% 0 2% 0;
    box-shadow: 0px 11px 15px hsla(0,0%,0%,0.21);
}

	footer .sns{
        display:flex;
        margin: 0% 0% 0% 4%;
        
    }
    footer .sns i{
        color:#000;
        
    }
    
footer .sns li:first-child,
	footer .sns li:nth-child(2){
    margin-right: 2%;
	
    }
	
	footer .sns li:last-child img{
	margin-top: 8px;
    width: 198px;
	}
	footer .vocal-school{
		text-align: right;
	}
	footer .vocal-school p img{
	width: 30%;
        margin-right: 3%;
	margin-top: -5%;
	}
    
    
    footer .footer_nav{
     display: flex;
    justify-content: space-around;
    padding: 0 26%;
    font-family: 'Anton', sans-serif;
    margin-top: 3%;
    }
    footer .footer_nav a{
        color:#000;
    }
	 footer .footer_nav a:hover{
		color: #eba22d;
		 transition:0.3s;
		 text-decoration:none;
	}
    footer .logo{
        width:100px;
        position:absolute;
        right: 20px;
    bottom: 12px;
    }
    footer .logo img{
        width:100%
    }
    footer .sns i{
        font-size:60px;
        color:hsla(0,3%,25%,1.00)
    }
	footer .sns a:hover i{
		color:#eba22d;
		transition:0.3s;
	}
	
	footer .copy{
        font-size:10px;
        text-align: center;
        margin: 5% 0 2% 0;
    }
	i.fa-facebook-square:hover,
	i.fa-instagram:hover{
    
    color: #f79400;
	}
	 
   
    
}