.kles-ch-wrap{
  margin: auto;
  text-align: center;
  padding: 5px;
}

.ch-text{
  text-align: center;
  margin: auto;
  font-size: 1.4rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #000;
  padding: 10px;
  letter-spacing: 2px;
}



.methodlist{
max-width: 1200px;
display: flex;
flex-wrap: wrap;
padding: 40px 10px;
margin: auto;
}

.methoditem1{
  max-width: 450px;
padding: 60px 20px;
border-radius: 500px;
margin: 10px auto;
background-color: rgba(252, 117, 6, 0.8);
box-shadow: 0 0 20px #fff;
}

.methoditem2{

  max-width: 450px;
  padding: 100px 5px;
  border-radius: 200px;
margin: 10px auto;
background-color: rgba(33, 226, 252, 0.8);
box-shadow: 0 0 20px #fff;
justify-content: center;
}

.mm-textwrap{
margin: auto;
justify-content: center;

}



.m-text1{
  text-align: center;
  margin: auto;
  font-size: 1.8rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #000;
  padding: 10px;
  letter-spacing: 2px;
  line-height: 30px;
}

.m-text2{
  text-align: center;
  margin: auto;
  font-size: 2.4rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #fff;
  padding: 5px;

}

.m-text22{
  text-align: left;
  display: inline-block;
  font-size: 2.4rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #fff;
  padding: 5px;
  letter-spacing: 10px;
}

.m-text3{
  text-align: center;
  margin: auto;
  font-size: 2.4rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #011F53;
  padding: 5px;
  text-shadow: 0 0 7px #fff;

}

.m-text-last{
  background-color: #011F53;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}


.m-last{
  margin: auto;
  max-width: 500px;

  padding: 20px;
  
}

.m-text4{
  text-align: left;
  display: inline-block;
  margin: auto;
  font-size: 2.4rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #fff;
  padding: 5px;
  letter-spacing: 10px;
}

.m-text4{
  text-align: left;
  display: inline-block;
  margin: auto;
  font-size: 2.4rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #FCEE21;
  padding: 5px;
  letter-spacing: 10px;
}


.m-text5{
  text-align: left;
  display: inline-block;
  margin: auto;
  font-size: 2.4rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #fff;
  background-color: #000;
  padding: 5px;
  letter-spacing: 10px;
}


.btn22 {
text-align: center;
  padding: 20px 50px;
  color: #fff;
  background-color: #FF7BAC;
  font-weight: bold;
  border-radius: 50px;
  position: relative;
  display: flex;

  align-items: center;

  margin: auto;
  max-width: 450px;
  transition: 0.3s ease-in-out;
border: solid 2px #011F53;
  font-family:  "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
}

.btn22 :after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 1rem;
  font-size: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 4px;
  height: 4px;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  transform: translateY(-50%) rotate(45deg);}

  .btn22 :hover{

    color: #011F53;
  }
  .btn22 :hover:after{
    right: 1.4rem;
  }

.m-textwrap{
  max-width: 550px;
  padding: 100px 20px;
  margin:  auto;
  background-color: rgba(255, 242, 247, 0.8);
  box-shadow: 0 0 20px #fff;
}


.m-textwrap2{
  max-width: 550px;
  padding: 100px 20px;
  margin:  auto;
  background-color: rgba(228, 244, 217, 0.8);
  box-shadow: 0 0 20px #fff;
}


.mtexttitle{
  font-size: 4rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #011F53;
  padding: 5px;
  text-align: center;
  text-shadow: 0 0 7px #fff;
}

.hr2{
  border-top: 0.5px solid #000;
  margin: 10px ;
}

.mtext_story{
  font-size: 1.6rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #000;
  padding: 50px 0px;
  text-align: left;
  display: inline-block;
  letter-spacing: 5px;
  line-height: 30px;
  text-shadow: 0 0 7px #fff;
}

.mtext_story2{
  font-size: 2.4rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: lighter;
  font-style: italic;
  color: #000;
  padding: 5px 0px;
  text-align: center;

  letter-spacing: 5px;
  line-height: 30px;
  text-shadow: 0 0 7px #fff;
}








.klessonlist{
  display: block;
    margin: 0 auto;
  max-width: 800px;

  padding: 30px 50px;
}


.klessonlist2{
  display: block;
    margin: 0 auto;
  max-width: 1000px;

}

.klesson-item{
  max-width: 400px;
padding: 50px 10px;
}

.klesson-item2{
padding: 10px 0px;
background-color: rgba(1, 31, 83, 0.8);
}

.kles-wrap{
  display: block;
  margin: 10px auto;
justify-content: center;
text-align: center;
width: 600px;
}

.kles-textwrapper{
  background-color: rgba(1, 31, 83, 0.9);
}

.kles-wrap2{
  display: block;
  max-width: 500px;
  margin: 10px auto;
  padding: 20px;
  justify-content: center;
}

.kles-wrap4{
  display: block;
  max-width: 450px;
  margin: 10px auto;
  padding: 20px;
  justify-content: center;
}


.kles-wrap3{
  display: block;
  max-width: 500px;
  margin: 10px auto;
  padding: 20px;
  justify-content: center;
}

.kles-title{
  color: #00358F;
  font-size: 4rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  text-align: left;
  padding: 20px 10px;
  transform:rotate(-1deg); 
  background-color: rgba(238, 250, 255, 0.7);
  margin: 30px 10px;
  box-shadow: 0 0 10px #011F53;
}


.kles-sub1{
  color: #000;
  font-size: 3rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: 400;
  text-align: left;
  line-height: 50px;
  letter-spacing: 5px;
  text-shadow: 0 0 10px #fff;
  padding:10px 0px;
}

.kles-sub2{
  color: #FFA4CD;
  font-size: 3rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  text-align: left;
  line-height: 50px;
  letter-spacing: 10px;
}

.kles-sub11{
  color: #00358F;
  font-size: 3rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  text-align: left;
  line-height: 50px;
  letter-spacing: 10px;
}

.kles-sub14{
  color: #00358F;
  font-size: 3rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  text-align: left;
  line-height: 50px;
  letter-spacing: 10px;

}

.klesson-item2{
  padding: 10px;
  max-width: 1500px;
  margin: auto;
  background-color: rgba(1, 31, 83, 0.8);
}

.kles-title2{
  font-size: 3rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: lighter;
  font-style: italic;
  color: #fff;
  padding: 5px 0px;
  text-align: left;
  display: inline-block;
  text-shadow: 0 0 7px #011F53;
}

.kles-sub3{
  font-size: 5rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #FFA4CD;
  padding: 5px 0px;
  text-align: left;
  display: inline-block;
  text-shadow: 0 0 10px #011F53;
}

.kles-sub12{
  font-size: 5rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #B1FC70;
  padding: 5px 0px;
  text-align: left;
  display: inline-block;
  text-shadow: 0 0 10px #011F53;
}


.kles-sub13{
  font-size: 5rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #A4DBFF;
  padding: 5px 0px;
  text-align: left;
  display: inline-block;
  text-shadow: 0 0 10px #011F53;

}



.kles-subwrap{
  display: flex;
  flex-wrap: nowrap;
justify-content: center;
  width: 500px;
  background-color: #FFCBE2;
  margin: 20px auto;


}

.kles-subwrap3{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: 550px;
  background-color: #B1FC70;

  margin: 20px auto;
}

.kles-subwrap4{
  display: flex;
  flex-wrap: nowrap;
  width: 500px;
  justify-content: center;
  margin: 20px auto;
  text-align: center;
}


.kles-subwrap5{
  display: flex;
  flex-wrap: nowrap;
  max-width: 600px;
  justify-content: center;
  background-color: #A4DBFF;
  margin: 20px auto;
}

.kles-subwrap2{
  display: flex;
  max-width: 550px;

  justify-content: center;
  margin: 20px auto;
}

.kles-subwrap-img{
  width: 40px;
  padding:10px;
  margin:auto;
}

.kles-sub4{
  font-size: 2.4rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #000;
  padding: 15px;
  text-align: left;
  display: inline-block;
  line-height: 40px;
  letter-spacing: 1px;
  text-shadow: 0 0 10px #fff;
width: 500px;
margin: auto;
}

.taikenform{
  padding: 50px 20px;
  margin: auto;
  max-width: 350px;
}
.voice-audio{
  color: #000;
  text-align: center;
  font-size: 1.2rem;
  font-family:  "Noto Sans JP", sans-serif;
  margin: auto;


}


@media screen and (max-width:1010px){
  /* ----------------------------- */
  /* header_sp
  /* ----------------------------- */


  .methodlist{
margin: 0px auto;
    padding:  20px;
    }
    
    .methoditem1{
      max-width: 350px;
      padding: 50px 10px;
      margin: 10px auto;
    }


    .m-textwrap{
      max-width: 380px;
      padding: 50px 0px;
    }

    .m-textwrap2{
      max-width: 380px;
      padding: 50px 0px;
    }


    .mtexttitle{
      font-size: 3rem;
    }

.mtext_story{
  font-size: 1.4rem;
  font-family:  "Noto Sans JP", sans-serif;

  color: #000;
  padding: 50px 10px;
  text-align: left;
  display: inline-block;
  letter-spacing:0px;
  line-height: 30px;
}

    
    .methoditem2{
      max-width: 350px;
    padding: 50px 10px;
  margin: 10px auto;
    }
    
    .m-text1{
      text-align: center;
      margin: auto;
      font-size: 1.4rem;
      font-family:  "Noto Sans JP", sans-serif;
  
      color: #000;
      padding: 5px;
      line-height: 20.5px;
    }
    
    .m-text2{
      text-align: center;
      margin: auto;
      font-size: 1.8rem;
      font-family:  "Noto Sans JP", sans-serif;
      font-weight: bold;
      color: #fff;
      padding: 5px;
    }
    
    .m-text3{
      text-align: center;
      margin: auto;
      font-size: 1.8rem;
      font-family:  "Noto Sans JP", sans-serif;
      font-weight: bold;
      color: #011F53;
      padding: 5px;
    }
    
  
    
    .m-text5{
      text-align: left;
      display: inline-block;
      margin: auto;
      font-size: 1.8rem;
      font-family:  "Noto Sans JP", sans-serif;
      font-weight: bold;
      color: #fff;
      padding: 5px;
      letter-spacing: 10px;
    }
    
    .m-text4{
      text-align: left;
      display: inline-block;
      margin: auto;
      font-size:1.4rem;
      font-family:  "Noto Sans JP", sans-serif;
      font-weight: bold;
      color: #FCEE21;
      padding:10px 5px;
      letter-spacing: 3px;
    }
    
    
    .m-text5{
      text-align: left;
      display: inline-block;
      margin: auto;
      font-size: 1.4rem;
      font-family:  "Noto Sans JP", sans-serif;
      font-weight: bold;
      color: #fff;
      background-color: #000;
      padding: 10px;
      letter-spacing: 3px;
    }

    .m-text22{
      text-align: left;
      display: inline-block;
      font-size: 1.8rem;
      font-family:  "Noto Sans JP", sans-serif;
      font-weight: bold;
      color: #fff;
      padding: 5px;
      letter-spacing: 5px;
    }

    .m-last{
      margin: auto;
      max-width: 400px;
      display: block;
      padding: 20px;
      
    }










.klessonlist{
  display: block;
    margin: 0 auto;
  max-width: 400px;

  padding: 10px 0px;
}


.klessonlist2{
  display: block;
    margin: 0 auto;
  max-width: 1000px;

}

.klesson-item{
  max-width: 400px;
padding: 30px 10px;
}

.klesson-item2{
padding: 10px 0px;
background-color: rgba(1, 31, 83, 0.8);
}

.kles-wrap{
  display: block;
  margin: 10px;
max-width: 350px;
}

.kles-textwrapper{
  background-color: rgba(1, 31, 83, 0.9);
}

.kles-wrap2{
  display: block;
  max-width: 320px;
  margin: 10px auto;
  padding: 10px;
}

.kles-wrap3{
  display: block;
  max-width: 320px;
  margin: 10px auto;
  padding: 10px;
}


.kles-wrap4{
  display: block;
  max-width: 300px;
  margin: 10px auto;
  padding: 10px;
}

.kles-title{
  color: #00358F;
  font-size: 2.4rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  text-align: left;
  padding:  10px;
  transform:rotate(-1deg); 
  background-color: rgba(238, 250, 255, 0.7);
  margin: 20px 10px;
  box-shadow: 0 0 10px #011F53;
}


.kles-sub1{
  color: #000;
  font-size: 1.8rem;
  font-family:  "Noto Sans JP", sans-serif;
width: 350px;
  text-align: left;
  line-height: 30px;
  letter-spacing: 3px;
  text-shadow: 0 0 10px #fff;
  
}

.kles-sub2{
width: 350px;
  font-size: 1.8rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  text-align: left;
  line-height: 40px;
  letter-spacing: 6px;

}


.kles-sub11{
  width: 350px;
  font-size: 1.8rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  text-align: left;
  line-height: 40px;
  letter-spacing: 6px;
}


.kles-sub14{
  font-size: 1.8rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  text-align: left;
  line-height: 40px;
  letter-spacing: 6px;
  width: 350px;
}

.klesson-item2{
  padding: 10px;
  max-width: 370px;
  margin: auto;
  background-color: rgba(1, 31, 83, 0.8);
}

.kles-title2{
  font-size: 1.8rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: lighter;
  font-style: italic;
  color: #fff;
  padding: 5px 5px;
  text-align: left;
  display: inline-block;
  text-shadow: 0 0 7px #011F53;
}

.kles-sub3{
  font-size: 3rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;

  padding: 5px 5px;
  text-align: left;
  display: inline-block;
  text-shadow: 0 0 10px #011F53;
}

.kles-sub12{
  font-size: 3rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  padding: 5px 5px;
  text-align: left;
  display: inline-block;
  text-shadow: 0 0 10px #011F53;
}

.kles-sub13{
  font-size: 3rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  padding: 5px 5px;
  text-align: left;
  display: inline-block;
  text-shadow: 0 0 10px #011F53;
}



.kles-subwrap{
  display: flex;
margin: 10px auto;
  max-width: 350px;

justify-content: center;
}

.kles-subwrap2{
  max-width: 350px;

  margin: 20px 5px;
}


.kles-subwrap3{
  display: flex;
  flex-wrap: nowrap;
  width: 330px;
  margin: 5px auto;
}


.kles-subwrap4{
  display: flex;
  flex-wrap: nowrap;
  width: 330px;
  margin: 10px 5px;

}


.kles-subwrap5{
  display: flex;
  flex-wrap: nowrap;
  width: 330px;
  margin: 10px 5px;
}

.kles-subwrap-img{
  width: 30px;
  padding:10px;
}

.kles-sub4{
  font-size: 1.6rem;
  font-family:  "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #000;
padding: 10px 0px;
padding-right: 5px;
  text-align: left;
  display: inline-block;
  line-height: 30px;
  letter-spacing: 0.7px;
  text-shadow: 0 0 10px #fff;
  width: 360px;
  margin: auto;
}


}




@media screen and (max-width:500px){


  .m-text-last{

    margin: 10px auto;
  }
.klessonlist{
  display: block;
    margin: 0 auto;
  max-width: 375px;
justify-content: center;
  padding: 10px 20px;
}


.klessonlist2{
  display: block;
    margin: 0 auto;
  max-width: 1000px;
  justify-content: center;
}

.btn22{
  max-width: 350px;
padding: 10px 50px;
font-size: 1.8rem;
margin: 10px auto;
}
}