@charset "utf-8";

@media (min-width: 1081px)  {

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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}


body	{
font-family: "FOT-マティス Pro M";

}


/*--------------------------*/
/*すぐフワ*/
.sugu_huwa{
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
/*----スピード調整はこちらで----*/
-webkit-animation-duration:2.5s;
 -ms-animation-duration:2.5s;
 animation-duration:2.5s;
 -webkit-animation-name: fadeInDown5;
 animation-name: fadeInDown_sugu;
 visibility: visible !important;/*ここ重要*/
}


@-webkit-keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}
@keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}



/*-----------*/

.animation {
}

.animation2 {
}

.animation3 {
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
/*----スピード調整はこちらで----*/
-webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown5;
 animation-name: fadeInDown5;
 visibility: visible !important;/*ここ重要*/
}
@-webkit-keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}





/*---------------*/
/*---------------*/


/*----------メニュー部分------------------*/


#g-nav{
position:fixed;
top: 0;
left:0;
width:100%;
height:60px;
z-index:100;

display: flex;
flex-wrap: wrap;
justify-content: space-between; 
background-color:rgba(255,255,255,0.4);

}


.is-in{
background:rgba(150,175,91,0.5)!important;

}





#fix_wall{
position:relative;
z-index:5;
padding-bottom:100px;
color:#333333;
}


.openbtn{
display:none;
}


#head_logo{
width:30%;
height:auto;
font-size:24px;
font-weight:bold;
box-sizing: border-box;
padding-top:20px;
letter-spacing:0.2em;
text-align:center;
}


#head_logo h1{
position:relative;
display: inline-block;
}

#head_logo h1 a{
text-decoration:none;
color:#000000;
}


/*見出しのロゴ部分*/
#head_logo h1:before{
/*
position:absolute;
	left:-120px;
	top:-15px;
	content:"";
	display:inline-block;
	width:4em;
	height:4em;
	background:url(images/topcopy_gazou.png) no-repeat;
	
background-size: contain;/*画像の大きさ変更時必要*/
/*
  vertical-align: middle; /*画像の大きさ変更時必要*/
}



#head_menu{

width:65%;
height:auto;

}
#head_inn{
width:100%;
height:auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;  /*左右は端に寄って間を均等*/
}




.head_menu_btn{
    position:relative;

width:14.2%;
height:60px;
font-weight:bold;


box-sizing: border-box;

}

.head_menu_btn span{

}


.head_menu_btn a{
   display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

transition: 0.5s;
letter-spacing:0.1em;
color:#000000;
display: flex;
align-items: center;
justify-content: center;
}


.head_menu_btn a:hover{
background-color:#FFFFFF;
color:#000000;
transition: 0.5s;
text-decoration:none;
}

/*--------右下　コンタクト-------------*/


#top_contact{
position:fixed;
bottom:0;
right:0;
width:450px;
height:160px;
background-color:#fff;
z-index:30;
color:#333333;
box-sizing: border-box;
padding-top:15px;
border-width: 1px;
border-style: solid;
border-color: #000000;
 border-radius: 100px;
 text-align:center;
}


.contact_p1{
font-size:24px;
letter-spacing:0.1em;
}

.contact_p2{
font-size:24px;
letter-spacing:0.1em;
}


.contact_p2 a{
color:#0DB9D7;

}




/*---------メイン画面部---------------------------*/

#box2{
position:relative;
 transition: .8s;
width: 100%;
 height: 100vh;

  color:#333333;

}


#top_red{
position:absolute;
top:0;
left:0;
}



#top_yellow{
position:absolute;
top:0;
right:0;
}

#top_blue{
position:absolute;
bottom:0;
left:0;
}

#top_blue img{
vertical-align: bottom;
}

#top_green{
position:absolute;
bottom:0;
right:0;

}

#top_green img{
vertical-align: bottom;
}



#main_title_box{
position:absolute;
top:40%;
left:10%;
z-index:10;


}

#main_title_box h1{
font-size:24px;
margin-bottom:10px;
letter-spacing:0.2em;
}

#main_title_box h2{
font-size: 3.1vw;
margin-bottom:30px;
letter-spacing:0.1em;
background-image: linear-gradient(transparent 80%, #FFDA84 0%);
}

#main_title_box p{
font-size:20px;
margin-bottom:10px;
}

#top_ilust{
position:absolute;
width:50%;
max-width:1000px;
top:20%;
right:20px;
z-index:5;
}


#top_ilust img{
width:100%;
height:auto;
}


/*--------コースの案内-挨拶部分----------*/


.top_copy02{
font-size:42px;
text-align:center;
margin-top:100px;
margin-bottom:100px;
letter-spacing:0.2em;
}


#top_mokuhyou{
width:500px;
height:auto;
margin-right: auto;
margin-left: auto;
}

#top_mokuhyou img{
width:100%;
height:auto;
}



#aisatu_box{
position:relative;
width:100%;
max-width:1028px;
height:auto;
margin-right: auto;
margin-left: auto;
text-align:center;
padding-top:100px;
padding-bottom:80px;
}

.aisatu_img{
margin-top:10px;
margin-bottom:10px;
width:500px;
margin-left:50px;
}


.aisatu_img2{
margin-top:10px;
margin-bottom:10px;
margin-left:50px;
}



#aisatu_bun{
position:relative;
font-size:20px;
letter-spacing:0.1em;
line-height:2em;
text-align:left;
}

#aisatu_bun h3{
margin-top:50px;
margin-bottom:15px;
font-size:24px;
font-weight:bold;
}



#aisatu_box_en01{
position:absolute;
top:0;
left:-10%;
width:289px;
height:289px;
}

#aisatu_box_en01 img{
width:100%;
height:auto;
}



#aisatu_box_en02{
position:absolute;
top:10%;
right:-10%;
width:289px;
height:289px;
}

#aisatu_box_en02 img{
width:100%;
height:auto;
}


#aisatu_box_en03{
position:absolute;
bottom:0;
left:10%;
width:289px;
height:289px;
}

#aisatu_box_en03 img{
width:100%;
height:auto;
}

#aisatu_gazou{
width:400px;
height:auto;



}


#aisatu_gazou img{
width:100%;
height:auto;
border-radius: 25px;
}




/*--------コースの案内--------------------*/


#base_box_wall{
width:100%;
height:auto;

margin-top:50px;
padding-top:100px;
padding-bottom:100px;

}


.bk_wall_blue{
background-color:#ECFAFC;
}


.bk_wall_green{
background-color:#F1FAF7;
}

.bk_wall_gray{
background-color:#F0F0F0;
}


#base_box{
width:100%;
max-width:1028px;
height:auto;
margin-left:auto;
margin-right: auto;
margin-top:50px;
}


.cate_title{
font-size:24px;
letter-spacing:0.2em;
padding-bottom:10px;
width:100%;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
margin-bottom:80px;

}

.kousyu_course{
position:relative;
width:90%;
max-width:600px;
height:auto;
margin-right: auto;
margin-left: auto;
font-size:24px;
color:#FFFFFF;
font-weight:bold;
background-color:#2FB484;
text-align:center;
letter-spacing:0.1em;
padding-top:10px;
padding-bottom:10px;
margin-top:150px;
margin-bottom:30px;
}

.kousyu_course:before {
content: "";
position: absolute;
top: -10px;
left: 30px;
width: 32px;
height: 32px;
content: url(images/mouse.png);
}





#kousyu_wara{
width:100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom:100px;
}

#kousyu_gazou{
width:55%;
height:auto;
}

#kousyu_gazou img{
width:100%;
height:auto;
}


#kousyu_setumei_box{
width:42%;
height:auto;
}


.narabikae{
flex-direction: row-reverse;
}



#kousyu_setumei_box{
padding-top:15px;
}


.kousyu_hitokoto{
color:#0DB9D7;
font-weight:bold;
font-size:20px;
margin-bottom:30px;
}


#kousyu_setumei_box h4{
display:inline-block;
position:relative;
font-size:22px;
font-weight:bold;
margin-bottom:15px;
}

#kousyu_setumei_box h4:after{
content: "";
position: absolute;
top: -20px;
right: -50px;
width: 32px;
height: 32px;
content: url(images/aisatu_ilu02_s.png);
}





.kousyu_bun{
font-size:16px;
line-height:2em;
margin-bottom:10px;
}


.kousyu_bun02{
font-size:18px;
line-height:2.5pm;
margin-top:15px;
margin-bottom:10px;
}


#text_img img{
width:80%;
height:auto;
margin-right: auto;
margin-left: auto;
}



/*------------*/

#table_box table{
  border-collapse:separate;
  border-spacing: 5px;
  width: 100%;
}

#table_box table th{
 text-align: center;
  padding:5px;
  background-color: #F7F7F7;
  color:#333333;
  border:solid 1px #927141;
  vertical-align:middle;
  width:250px;
  box-sizing: border-box;
}

#table_box table td{
  background-color: #EFF1F5;
  border:solid 1px #af9d85;
   color:#333333;
   padding:5px;
   vertical-align:middle;
}

.table_price{
text-align:right;
padding-right:1em;
}


.under_01{
background-image: linear-gradient(transparent 80%, #FFDA84 0%);
}

/*--------講師紹介-----------*/


#kousi_area{
width:800px;
height:auto;
margin-right: auto;
margin-left: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom:100px;
}


#kousi_area_wara{
width:49%;
height:auto;

}

#space100{
height:100px;
}


#aisatu_kousi{

margin-top:20px;
margin-bottom:10px;
}


#kousi_area h3{
margin-top:0px;
margin-bottom:10px;
font-size:25px;
letter-spacing:0.2em;
}


#kousi_area h4{
margin-top:20px;
margin-bottom:5px;
font-size:18px;
letter-spacing:0.2em;
}

#drum{
margin-top:10px;
margin-bottom:20px;
}


#hotlegs{
margin-bottom:80px;
}

#ryokou{
margin-bottom:0px;
}


.nigate_bun{
margin-top:15px;
}

/*-----ぽちっと宮古紹介----------------*/
#pochi_miyako{
width:90%;
max-width:800px;
height:auto;
margin-right: auto;
margin-left: auto;
border: 1px solid #666666;
padding:20px;
text-align:center;
margin-top:100px;
margin-bottom:100px;
}

#pochi_miyako h2{
margin-top:30px;
padding-bottom:30px;
font-size:22px;
}


#chara{
}


#chara img{
}


#pochi_miyako p{
font-size:18px;
margin-top:30px;
}


#pochi_miyako h3{
margin-top:30px;
}

#pochi_miyako h3 a{
font-size:28px;
letter-spacing:0.2em;
}



/*-------ホームページ実績----------------*/


#homepage{
width:100%;
height:80px;
}



#blog06{
width:100%;
max-width:1080px;
height:auto;
text-align:center;
margin-right: auto;
margin-left: auto;
display: flex;
flex-wrap: wrap;
justify-content: left;  /*左右は端に寄って間を均等*/

margin-top:20px;





}


.thumbWrap06{

width:31%;
height:auto;

/* margin:20px -25px 20px 0; */

margin-bottom:50px;
margin-right:1%;
margin-left:1%;

border-width: 1px;
border-style: solid;
border-color:#CCCCCC;




}

.thumbWrap06 img{
width:100%;
height:auto;
vertical-align:bottom;
}

.thumbWrap06 h4{
font-size:16px;
font-weight:bold;
text-align:center;
margin-top:15px;
margin-bottom:15px;
}



.thumbWrap06 h4 a{
font-size:14px;
color:#333333;
letter-spacing:0.1em;
}





#clumn_area h2{
padding:20px 20px;
color:#FFFFFF;
margin-bottom:20px;
font-size:24px;
letter-spacing:0.2em;

}


#clumn_area h3{
font-size:24px;
margin-top:20px;
}


#clumn_area p{
font-size:18px;
line-height:2em;
}


.bg_red{
background-color:#E9535E;
}

/*----システム作成-----------*/

.bg_blue{
background-color:#0DB9D7;
}

.system_img{
width:80%;
height:auto;
margin-bottom:50px;
}

/*-----お問い合わせ------------*/

#contact{
width:80%;
height:auto;
margin-right: auto;
margin-left: auto;
padding-top:100px;
}




/*-----会社概要---------*/


#table_type2 table,#table_type2 td,#table_type2 th {
    border-collapse: collapse;
    border:1px solid #C8C8C8;
    }
	
#table_type2 td,#table_type2 th{
padding:10px;
}

#table_type2 th{
width:150px;
vertical-align:middle;
text-align:center;
background-color:#FAFAFA;
}



#table_type2 td{
width:600px;
vertical-align:middle;
text-align:center;
background-color:#fff;
text-align:left;
text-indent:1em;
}




#riasbb_box{
margin-top:100px;
margin-bottom:100px;
}




#foot_wara{
width:100%;
height:auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top:80px;

}


#foot_area{
padding-top:20px;
width:40%;
height:auto;
line-height: 2em;
}

#top_map{
width:50%;
height:auto;
}


#tel_box{
width:300px;
height:auto;
margin-right: auto;
margin-left: auto;
margin-top:80px;
margin-bottom:80px;
}

#tel_box img{
width:100%;
height:auto;

}



/*---無料レッスン---------*/
#muryou{
margin-top:50px;
margin-bottom:50px;
}


#other_wara{
width:100%;
max-width:1028px;
margin-right: auto;
margin-left: auto;
height:auto;

}


#other_wara h3{
width:80%;
height:auto;
font-size:18px;
padding-top:20px;
padding-bottom:20px;
background-color:#000000;
text-indent:1em;
margin-bottom:30px;
}

#other_wara h3 a{
color:#FFFFFF;
text-decoration:underline;
}







/*---------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------
  anim
------------------------------------------------------------------------------*/

.mv-block {
  position: relative;
}

.mv-ttl {
  font-size: 50px;
  font-weight: bold;
  position: absolute;
  z-index: 2;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
  letter-spacing: 0.1em;
  top: 27px;
}

.mv-area {
  height: 100vh;
  width: 100vw;
  background: #87ceeb;
  position: relative;
}

.mv-area .skater {
  width: 50vw;
  height: 40vw;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  position: absolute;
  margin: auto;
}

.mv-area .skater img {
  width: 100%;
}

.mv-area::before,
.mv-area::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 70px;
  background: #fff;
  left: 0;
  z-index: 2;
}

.mv-area::before {
  top: 0;
}

.mv-area::after {
  bottom: 0;
}

.mv-side {
  position: relative;
  height: 100vh;
  width: 100vw;
}

.mv-side::before,
.mv-side::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 100%;
  background: #fff;
  top: 0;
  z-index: 1;
}

.mv-side::before {
  left: 0;
}

.mv-side::after {
  right: 0;
}


.leaves {
  position: absolute;
  width: 500px;
  max-width: 500px;
}

.leaves img{
  width: 100%;
}


.leaves01 {
  left: 80px;
  bottom: 25vw;
}

.leaves02 {
  right: -80px;
  top: 25vw;
}

.leaves-b {
  position: absolute;
  width: 30vw;
  max-width: 600px;
  z-index: 2;
}

.leaves-b01 {
  left: -10px;
  bottom: -10px;
}

.leaves-b02 {
  right: -10px;
  bottom: -10px;
}

.leaves-b03 {
  left: -10px;
  top: -10px;
}

.leaves-b04 {
  right: -10px;
  top: -10px;
}

.other-block {
  padding: 100px 0 300px;
  position: relative;
  background: #fff;
}



@media screen and (min-width: 641px) {
  .other-block .cont-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
            align-items: center;
  }
  .other-block .cont-wrap .img-area,
  .other-block .cont-wrap .txt-area {
    width: 48%;
  }
}

.other-block .cont-wrap .txt-area .ttl {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 40px;
}

.other-block .img-area {
  position: relative;
}

.other-block .img-area .skater02 {
  width: 80%;
  margin-left: auto;
}

.other-block .img-area .skater01 {
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;
  z-index: 2;
}

.other-block .long-wrap {
  position: relative;
}

.other-block .img-area .long01 {
  width: 50%;
  margin: 0 auto;
}

.other-block .img-area .long02 {
  position: absolute;
  width: 30%;
  right: 0;
  top: 50px;
}

.other-block .img-area .long03 {
  position: absolute;
  width: 30%;
  left: 0;
  top: 150px;
}


/*----------------------------------------------------------------------------------------*/







}




















































































/* ここからスマートフォン&スマホ
***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************
***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************
***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************
************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************








***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************
***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************
***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************
************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************






***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************
***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************
***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************
************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

@media (min-width: 5px) and (max-width: 1080px) {

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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}


body	{
font-family: "FOT-マティス Pro M";

}




/*--------------------------*/
/*すぐフワ*/
.sugu_huwa{
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
/*----スピード調整はこちらで----*/
-webkit-animation-duration:2.5s;
 -ms-animation-duration:2.5s;
 animation-duration:2.5s;
 -webkit-animation-name: fadeInDown5;
 animation-name: fadeInDown_sugu;
 visibility: visible !important;/*ここ重要*/
}


@-webkit-keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}
@keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}



/*-----------*/

.animation {
}

.animation2 {
}

.animation3 {
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
/*----スピード調整はこちらで----*/
-webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown5;
 animation-name: fadeInDown5;
 visibility: visible !important;/*ここ重要*/
}
@-webkit-keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}





/*---------------*/

/*----------メニュー部分------------------*/


#g-nav{
position:fixed;
top: 0;
left:0;
width:100%;
height:60px;
z-index:100;

background-color:rgba(255,255,255,0.9);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;

}


.is-in{

}





#fix_wall{
position:relative;
z-index:5;
}


#head_logo{
width:100%;
height:auto;
font-size:18px;
font-weight:bold;
box-sizing: border-box;
padding-top:20px;
letter-spacing:0.2em;
text-align:center;
}


#head_logo h1{
position:relative;
display: inline-block;
}

#head_logo h1 a{
text-decoration:none;
color:#333333;
}


#head_logo h1:before{
/*
position:absolute;
	left:-80px;
	top:-15px;
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background:url(images/topcopy_gazou.png) no-repeat;
	
background-size: contain;/*画像の大きさ変更時必要*/

/*
  vertical-align: middle; /*画像の大きさ変更時必要*/
}




/*ハンバーガーをクリックすると展開するメニュー----------------------*/

#head_menu{
 position:absolute;
 top:60px;
 left:0px;
	width:100%;
    height:calc(100vh - 140px);
background-color:rgba(0,0,0,0.65);

display: flex;
align-items: center;
justify-content: center;
z-index:777;	

	text-align: center;
	
		-webkit-transition: opacity 1s, visibility 0s ease 1s;
      -moz-transition: opacity 1s, visibility 0s ease 1s;
      -ms-transition: opacity 1s, visibility 0s ease 1s;
      -o-transition: opacity 1s, visibility 0s ease 1s;
      transition: opacity 1s, visibility 0s ease 1s;;
      opacity: 0;
	  visibility: hidden;

}



/*アクティブクラスがついたら透過なしにして最前面へ*/
#head_menu.panelactive{

	transition-delay: 0s;/*safari対策らしい*/
opacity: 1;
visibility: visible;


}





#head_inn{
width:100%;
height:auto;
}

.head_menu_btn{
    position:relative;

width:100%;
height:60px;
font-weight:bold;


box-sizing: border-box;

}

.head_menu_btn span{

}


.head_menu_btn a{
   display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

transition: 0.5s;
letter-spacing:0.1em;
color:#FFFFFF;

}


.head_menu_btn a:hover{
background-color:#FFFFFF;
color:#000000;
transition: 0.5s;
text-decoration:none;
}

/*========= ハンバーガー部分===============*/
.openbtn{
	position:absolute;
    z-index: 888;/*ボタンを最前面に*/
	top:1px;
	right: 15px;
	cursor: pointer;
	
    width: 65px;
    height:85px;
	
	
	
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    
	background-color:#000000;
  	width: 80%;
  }

.openbtn span:nth-of-type(1) {
	top:12px;	
}

.openbtn span:nth-of-type(2) {
	top:30px;
}

.openbtn span:nth-of-type(3) {
	top:48px;
}

.openbtn.active span:nth-of-type(1) {
    top: 14px;
    left: 22px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%; 
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0; 
}

.openbtn.active span:nth-of-type(3){
    top: 26px;
    left: 22px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;  
}









/*--------右下　コンタクト-------------*/


#top_contact{
display:none;
}


.contact_p1{
font-size:24px;
letter-spacing:0.1em;
}

.contact_p2{
font-size:24px;
letter-spacing:0.1em;
}


/*---------メイン画面部---------------------------*/


#box p{
margin-bottom:15px;
}

#box2{
position:relative;
 transition: .8s;
width: 100%;
 height: 100vh;

  color:#333333;

}


#top_red{
position:absolute;
width:30%;
height:auto;
top:0;
left:0;

}

#top_red img{
width:100%;
height:auto;
}



#top_yellow{
position:absolute;
width:30%;
height:auto;
top:0;
right:0;
}

#top_yellow img{
width:100%;
height:auto;
}




#top_blue{
position:absolute;
width:30%;
height:auto;
bottom:0;
left:0;
}

#top_blue img{
width:100%;
height:auto;
vertical-align: bottom;
}

#top_green{
position:absolute;
width:50%;
height:auto;
bottom:0px;
right:0;

}

#top_green img{
width:100%;
height:auto;
vertical-align: bottom;
}



#main_title_box{
position:absolute;
width:80%;
top:450px;

  left: 50%;
  transform: translateY(-50%) translateX(-50%);/*ここで戻しているのがポイント*/

z-index:10;


}

#main_title_box h1{
font-size:20px;
margin-bottom:10px;
letter-spacing:0.2em;
}

#main_title_box h2{
font-size:7.1vw;
margin-bottom:20px;
letter-spacing:0.1em;
background-image: linear-gradient(transparent 80%, #FFDA84 0%);
}

#main_title_box p{
font-size:16px;
margin-bottom:10px;
margin-top:20px;
line-height:2em;
}

#top_ilust{
position:absolute;
width:80%;
max-width:400px;
height:auto;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);/*ここで戻しているのがポイント*/
top:180px;
z-index:5;
}


#top_ilust img{
width:100%;
height:auto;
}


/*--------コースの案内-挨拶部分----------*/


.top_copy02{
font-size:24px;
text-align:center;
margin-top:150px;
margin-bottom:40px;
line-height:2em;
letter-spacing:0.2em;
}


.top_copy02 span{
display:block;
}

#top_mokuhyou{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;
}

#top_mokuhyou img{
width:100%;
height:auto;
}



#aisatu_box{
position:relative;
width:100%;
height:auto;
margin-right: auto;
margin-left: auto;
text-align:center;
padding-top:100px;
padding-bottom:80px;
}

.aisatu_img{
margin-top:10px;
margin-bottom:10px;
width:90%;
margin-right: auto;
margin-left: auto;
}


.aisatu_img2{
margin-top:10px;
margin-bottom:10px;
margin-left:50px;
}



#aisatu_bun{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;

position:relative;
font-size:16px;
letter-spacing:0.1em;
line-height:2em;
text-align:left;
}

#aisatu_bun p{
margin-bottom:15px;
}

#aisatu_bun h3{
margin-top:30px;
margin-bottom:15px;
font-size:24px;
font-weight:bold;

}



#aisatu_box_en01{
position:absolute;
top:0;
left:-10%;
width:289px;
height:289px;
}

#aisatu_box_en01 img{
width:100%;
height:auto;
}



#aisatu_box_en02{
position:absolute;
top:10%;
right:0;
width:289px;
height:289px;
}

#aisatu_box_en02 img{
width:100%;
height:auto;
}


#aisatu_box_en03{
position:absolute;
bottom:0;
left:10%;
width:289px;
height:289px;
}

#aisatu_box_en03 img{
width:100%;
height:auto;
}

#aisatu_gazou{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;


}


#aisatu_gazou img{
width:100%;
height:auto;
border-radius: 25px;
}




/*--------コースの案内--------------------*/


#base_box_wall{
width:100%;
height:auto;

margin-top:50px;
padding-top:20px;
padding-bottom:100px;

}


.bk_wall_blue{
background-color:#ECFAFC;
}


.bk_wall_green{
background-color:#F1FAF7;
}

.bk_wall_gray{
background-color:#F0F0F0;
}


#base_box{
width:90%;
height:auto;
margin-left:auto;
margin-right: auto;
margin-top:10px;
}


.cate_title{
font-size:24px;
letter-spacing:0.2em;
padding-bottom:10px;
width:100%;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
margin-bottom:50px;

}

.kousyu_course{
position:relative;
width:100%;
max-width:600px;
height:auto;
margin-right: auto;
margin-left: auto;
font-size:24px;
color:#FFFFFF;
font-weight:bold;
background-color:#2FB484;
text-align:center;
letter-spacing:0.1em;
padding-top:10px;
padding-bottom:10px;
margin-top:100px;
margin-bottom:30px;
}

.kousyu_course:before {
content: "";
position: absolute;
top: -60px;
left: 10px;
width: 32px;
height: 32px;
content: url(images/mouse.png);

}





#kousyu_wara{

margin-bottom:100px;
}

#kousyu_gazou{
width:100%;
height:auto;
}

#kousyu_gazou img{
width:100%;
height:auto;
}


#kousyu_setumei_box{
width:100%;
height:auto;
}


.narabikae{
flex-direction: row-reverse;
}



#kousyu_setumei_box{
padding-top:15px;
}


.kousyu_hitokoto{
color:#0DB9D7;
font-weight:bold;
font-size:20px;
margin-bottom:30px;
}


#kousyu_setumei_box h4{
display:inline-block;
position:relative;
font-size:22px;
font-weight:bold;
margin-bottom:15px;
}

#kousyu_setumei_box h4:after{
content: "";
position: absolute;
top: -20px;
right: -50px;
width: 32px;
height: 32px;
content: url(images/aisatu_ilu02_s.png);
}





.kousyu_bun{
font-size:16px;
line-height:2.5em;
margin-bottom:10px;
}


.kousyu_bun02{
font-size:16px;
line-height:2.5pm;
margin-top:15px;
margin-bottom:10px;
}


#text_img img{
width:100%;
height:auto;
margin-right: auto;
margin-left: auto;
}


/*------------*/


.ryoukin_space{
margin-top:80px;
}


#table_box table{
  border-collapse:separate;
  border-spacing: 5px;
  width: 100%;
}

#table_box table tr{
display:block;
margin-bottom:30px;
}

#table_box table th{
 text-align: center;
 display:block;
  padding:5px;
  background-color: #F7F7F7;
  color:#333333;
  border:solid 1px #927141;
  vertical-align:middle;
  width:100%;
  box-sizing: border-box;
}

#table_box table td{
display:block;

  border:solid 1px #af9d85;
   color:#333333;
   padding:5px;
   vertical-align:middle;
}

.table_price{
text-align:right;
padding-right:1em;
}


.under_01{
background-image: linear-gradient(transparent 80%, #FFDA84 0%);
}

/*--------講師紹介-----------*/


#kousi_area{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;
margin-bottom:0px;
}


#kousi_area_wara{
width:100%;
height:auto;
text-align:center;

}

#space100{
height:100px;
}


#aisatu_kousi{

margin-top:20px;
margin-bottom:10px;
}


#kousi_area h3{
margin-top:0px;
margin-bottom:10px;
font-size:25px;
letter-spacing:0.2em;
}


#kousi_area h4{
margin-top:20px;
margin-bottom:5px;
font-size:18px;
letter-spacing:0.2em;
}

#drum{
margin-top:10px;
margin-bottom:20px;
}


#hotlegs{
margin-bottom:80px;
}

#ryokou{
width:100%;
}

#ryokou img{
width:100%;
}


.nigate_bun{
margin-top:15px;
}




/*-----ぽちっと宮古紹介----------------*/
#pochi_miyako{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;
border: 1px solid #666666;
padding:20px;
text-align:center;
margin-top:100px;
margin-bottom:100px;
box-sizing: border-box;
}

#pochi_miyako h2{
margin-top:30px;
padding-bottom:30px;
font-size:18px;
}


#chara{
}


#chara img{
width:60%;
height:auto;
}


#pochi_miyako p{
font-size:18px;
margin-top:18px;
}


#pochi_miyako h3{
margin-top:18px;
}

#pochi_miyako h3 a{
font-size:18px;
letter-spacing:0.2em;
}



/*-------ホームページ実績----------------*/


#homepage{
width:100%;
height:80px;
}



#blog06{
width:100%;
height:auto;
text-align:center;
margin-right: auto;
margin-left: auto;


margin-top:20px;





}


.thumbWrap06{

width:90%;
height:auto;

/* margin:20px -25px 20px 0; */

margin-bottom:50px;
margin-right:1%;
margin-left:1%;

border-width: 1px;
border-style: solid;
border-color:#CCCCCC;




}

.thumbWrap06 img{
width:100%;
height:auto;
vertical-align:bottom;
}

.thumbWrap06 h4{
font-size:16px;
font-weight:bold;
text-align:center;
margin-top:15px;
margin-bottom:15px;
}



.thumbWrap06 h4 a{
font-size:14px;
color:#333333;
letter-spacing:0.1em;
}





#clumn_area h2{
padding:20px 20px;
color:#FFFFFF;
margin-bottom:20px;
font-size:24px;
letter-spacing:0.2em;

}


#clumn_area h3{
font-size:24px;
margin-top:20px;
}


#clumn_area p{
font-size:18px;
line-height:2em;
}

#clumn_area img{
width:100%;
height:auto;
}




.bg_red{
background-color:#E9535E;
}

/*----システム作成-----------*/

.bg_blue{
background-color:#0DB9D7;
}

.system_img{
width:80%;
height:auto;
margin-bottom:50px;
}

/*-----お問い合わせ------------*/

#contact{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;
padding-top:100px;
}




/*-----会社概要---------*/


#table_type2 table,#table_type2 td,#table_type2 th {
    border-collapse: collapse;
    border:1px solid #C8C8C8;
    }
	
#table_type2 td,#table_type2 th{
padding:5px;
font-size:12px;
}

#table_type2 th{
width:100px;
vertical-align:middle;
text-align:center;
background-color:#FAFAFA;
}



#table_type2 td{
vertical-align:middle;
text-align:center;
background-color:#fff;
text-align:left;
text-indent:1em;
}




#riasbb_box{
margin-top:100px;
margin-bottom:100px;
}




#foot_wara{
width:100%;
height:auto;
margin-top:80px;

}


#foot_area{
padding-top:20px;
width:100%;
height:auto;
line-height: 2em;
}

#top_map{
width:100%;
height:auto;
}


#access{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;
}

#access img{
width:100%;
height:auto;
}



#tel_box{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;
margin-top:80px;
margin-bottom:80px;
}

#tel_box img{
width:100%;
height:auto;

}

/*---無料レッスン---------*/
#muryou{
margin-top:50px;
margin-bottom:80px;
}



#other_wara h3{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;
font-size:18px;
padding-top:20px;
padding-bottom:20px;
background-color:#000000;
text-indent:1em;
margin-bottom:30px;
line-height:2em;
}

#other_wara h3 a{
color:#FFFFFF;
text-decoration:underline;
}





}