.mv-txt-box {
  padding-bottom: 70px;
  background: -moz-linear-gradient(top, #FFE1C9, #FFF0C7);
  background: -webkit-linear-gradient(top, #FFE1CF, #FFF0C7);
  background: linear-gradient(to bottom, #FFE1C9,
  #FFF0C7,#FEEED3);
  position: relative;
  padding-top: 40px;

}

.mv-txt-box .container{
  padding: 0 100px;
}

section#mv{
  width: 570px;
}

.mv-top img{
  height: 100%;
}

h3{
  font-size: 28px;
  line-height: 160%;
  letter-spacing: 0.18em;
  font-family: "hiragino-kaku-gothic-pron",
  sans-serif;
  font-weight: 600;
  padding: 40px 0 33px ;
}

.m-25{
  margin: 25px 0;
}

.wave{
  position: absolute;
  top: -50px;
  right: 0;
}

.top-contents{
  width: 570px;
}



/*===================================================================
problem
==================================================================*/

section#problem {
  background-color: #FDF6E8;
  padding-top: 54px;
  padding-bottom: 54px;

}




.problem-section-t{
  padding: 0 18px;
  padding-bottom: 6px;
}

.problem-section-t img{
  padding-bottom: 44px;
}

.problem-section-b::before{
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #2B3F72;
  margin: 0 auto;
}
.problem-section-t::after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #2B3F72;
  margin: 0 auto;

}

.problem-section-b{
  text-align: center;
}

.problrm-txt-b-t{
  padding-top: 35px;
  padding-bottom: 27px;
}

.problrm-txt-b-b p{
  font-size: 17px;
  padding-bottom: 20px;
}

.problem-img{
  width: 100%;
  padding-top: 50px;

}

.problem-img img {
  width: 100%;
  object-fit: cover;
  padding: 0 10px;
}

img.img-down{
  margin-top: 62px;
}


/*===================================================================
about
==================================================================*/


section#about {
  background-color: #FDF6E8;
  padding-bottom: 70px;
  padding-top: 70px;
}

.about-item-t{
  padding: 51px 0 25px;
  margin: 0 auto;
}

.about-item-t .flex{
  justify-content: center;
}

.about-item-t .caslon{
  font-size: 33px;
}

.about-item-t p{
  font-size: 13px;
  line-height: 1.1;
}

.about-left,.about-right{
  width: 128px;
  height: 128px;
  border-radius: 100px;
  position: relative;
}

.about-cell{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.plus{
  font-size: 35px;
  font-family: yugothic;
  padding: 0 14px;
}

.mt-30{
  margin-top: 30px;
}

.m-31{
  margin: 31px 0 31px 0;
}




/*===================================================================
service
==================================================================*/

#service{
  background: -moz-linear-gradient(top, #FFE1C9, #FFF0C7 70%, #FDEBE4);
  background: -webkit-linear-gradient(top, #FFE1CF, #FFF0C7 70%, #FDEBE4);
  background: linear-gradient(to bottom, #FFE1CF,
    #FFF0C7 70%,
    #FDEBE4);
    padding-top: 82px;
    padding-bottom: 65px;
    text-align: center;
}


#service a{
  color: #fff;
}


.online-lesson{
  padding-top: 74px;
}

.studio-lesson{
  padding:46px 0 29px;
}

.class-title{
  width: 277px;
  padding-bottom: 16px;
}

.lesson-b{
  padding-top: 21px;
}

.lesson-b p{
  padding-bottom: 10px;
}



  section#method{
    background-color: #FDF6E8;
    padding-top: 82px;
    padding-bottom: 82px;
  }

  .method-txt-area{
    text-align: center;
  }

  .method-img-area {
    padding-top: 39px;
    padding-bottom: 51px;
    margin: 0 auto;
  }

  .width-400{
    max-width: 320px;
    display: block;
    /* text-align: center; */
    margin: 0 auto;
    padding: 31px 0;
  }


/*===================================================================
message
==================================================================*/

#message {
  background: -moz-linear-gradient(top, #FFE1C9, #FFF0C7 70%, #FDEBE4);
  background: -webkit-linear-gradient(top, #FFE1CF, #FFF0C7 70%, #FDEBE4);
  background: linear-gradient(to bottom, #FFE1CF,
      #FFF0C7 70%,
      #FDEBE4);
  padding-top: 82px;
  padding-bottom: 58px;
  text-align: center;
}

.message-t>.left{
  position: relative;
  top:-26px;
}

.message-b{
  background-color: #fff;
  padding: 36px 20px;
  margin-top: 52px;
  font-weight: 500;
  font-size: 13px;
  text-align: left;
  letter-spacing: 0.07em;
  line-height: 200%;
}

.message-b .flex{
  align-items: flex-start;
  justify-content: space-between;
}



.message-b-txt>br {
  display: block;
  content: "";
  margin: 10px 0;
}

.message-t-txt.left {
  padding-top: 24px;
}

.p-15{
  padding:15px 0 ;
}

.message-prof{
  padding-top: 30px;
  width: 190px;
  margin: 0 auto;
}

.flot-img{
  float: right;
  margin-left: 18px;
width: 48%;
max-width: 160px;
}

.face{
  width:71px ;

}

.name{
  font-size: 23px;
  line-height: 100%;
  padding-bottom: 6px;


}

.professio{
  font-size: 11px;
  line-height: 150%;

}

.sns-area.flex {
  padding-top: 18px;
  justify-content: center;
}

.sns-area a,.pr-7{
  border: solid 1px #2B3F72;
  color: #2B3F72 !important;
  width: 135px;
  height: 33px;
  border-radius: 50px;
  display: block;
  text-align: center;
  line-height: 100%;
  padding: 9px 0;
  text-decoration: none !important;
}

.pr-7{
  margin-right: 7px;
}

.w-10{
  width: 10px;
 margin-left: 8px;
}


/*===================================================================
news
==================================================================*/

#news,#voice{
  background-color: #FDF6E8;
}

#news{
  padding: 72px 0 50px;
}

.news-item {
  padding-top: 17px;
  text-align: center;
}

.news-area {
  padding-bottom: 27px;
}

.news-item a{
  color: #2B3F72;
  width: 303px;
}

.news-list {
  padding: 20px 0;
  width: 99%;
}

.news-list time {
  font-size: 13px;
  line-height: 100%;
  margin-right: 10px;
}

.label{
  font-size: 11px;
  background-color: #2B3F72;
  color: #fff;
  text-align: center;
  margin: 0em !important;
  line-height: 100%;
  padding: 3px 4px;
}

.news-list p {
  display: inline-block;
  font-weight: 500;
  display: block;
  display: flex;
  justify-content: space-between;

}

.news-list-t.flex{
  justify-content: flex-start !important;
}

.news-arrow.flex{
  justify-content: space-between;

}

.news-arrow{
  border-bottom: 1px solid #2B3F72;
}

.news-title{
  padding-top:10px;
  font-size: 13px;
  line-height: 200%;
}


span.arrow{
  display: block;
  width: 11px;
  height: 11px;
  border-top: 1px solid #2B3F72;
  border-right: 1px solid #2B3F72;
  transform: rotate(45deg);
  line-height: 81px;
}

.news-title{
  text-align: left;
}
/*===================================================================
voice
==================================================================*/

#voice {
  padding: 43px 0 170px;
}

.review-area{
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.ti-rating-text {
  display: none;
}

/*================================================
モーダル
=================================================*/
.modal-span {
  cursor: pointer;
}

.modal-outer {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(43, 63, 114, 0.65);
  z-index: 10000;
}

.modal-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow-y: auto;
  width: 100%;
  max-width: 400px;
  background: #fff;
  padding: 48px 30px 0;
  max-height: 80vh;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 200%;
  text-align: left;
  height: fit-content;
}

.modal-inner-container {
  padding-bottom: 40px;
}

.show {
  display: block;
}

.modal-inner-header {
  padding-bottom: 25px;
  max-width: 550px;
  position: relative;
  margin: 0 auto;
}

.close-btn-top {
  cursor: pointer;
  color: #fff;
  font-size: 2em;
  position: absolute;
  top: 20px;
  right: 20px;
}

.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

@media (max-width: 570px) {


section#mv {
  max-width: 100%;
}

.wave {
  position: absolute;
  top: -50px;
  right: 0;
}

#voice {
  padding: 43px 0 130px;
}

.modal-inner {
  max-width: 300px;
}

.mv-txt-box .container {
  padding: 0 35px;
}


}