@charset "utf-8";
@media (max-width:1024px){
  .sp{
    display: block;
  }
}
@media (max-width:768px){
  body{
    min-width: 56rem;
    padding: 0;
  }
  .container{
    max-width: 100rem;
    margin: 0 auto;
    -webkit-margin: 0 auto;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    -webkit-padding-left: 2.4rem;
    -webkit-padding-right: 2.4rem;
  }
  .l-section{
    padding: 6.4rem 0 9.6rem;
  }
  .hmbBtn{
    right: -3%;
  }
  .topView{
    margin-bottom: 8rem;
  }
  .lessonContent{
    padding: 4.8rem;
  }
  .lessonContent .txt{
    margin-bottom: 4.8rem;
  }
  .topContact{
    padding: 9.6rem 0 16rem;
  }
  .mainTitleWrap{
    position: relative;
    bottom: 0;
    right: 0;
    left: 25%;

  }
  /*ーーー下層ページーーー*/
  .mogwort{
    margin-top:9.6rem;
    padding-bottom: 4.8rem;
  }
  .herb{
    padding: 2.4rem 0 4.8rem;
  }
  .planImg{
    width: 50%;
  }
  .planImg img{
    max-width: 100%;
  }
  .priceWrap{
    width: 50%;
    margin: 0 auto;
    padding: 0 3.6rem;
  }
  .lessonContentWrap{
    margin-bottom: 9.6rem;
  }
  .lessonContentWrap:first-of-type{
    height: 56rem;
    padding-top: 2.4rem;
  }
  .lessonContentWrap:first-of-type .lessonTextWrap{
    width: 56%;
  }
  .lessonDetailImg img{
    margin-bottom: 0;
  }
  .lessonContentWrap .yomogilesson2{
    max-width: 35%;
  }
  .lessonContentWrap .yomogilesson1{
    bottom: 10%;
    right: 5%;
    max-width: 40%;
  }
  .lessonDetailImg{
    max-width: 50%;
  }
  .lessonList{
    width: calc(92% / 3);
  }
  .manyLesson{
    margin-bottom: 9.6rem;
  }
  .introWrap{
    align-items: center;
  }
  .teachWrapper {
    width: 52%;
  }
}
@media (max-width:425px){
  /*ーーー全体ーーー*/
  body{
    min-width: 32rem;
    padding: 0;
  }
  .container{
    margin: 0 auto;
    -webkit-margin: 0 auto;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    -webkit-padding-left: 2.4rem;
    -webkit-padding-right: 2.4rem;
  }
  .l-section {
    padding: 0 0 8rem;
  }
  .pc{
    display: none;
  }
  .ttl{
    font-size: 2.4rem;
  }
  .enTtl{
    margin: 0 auto 2.4rem;
  }
  .largeTxt{
    font-size: 1.6rem;
  }
  .txt{
    font-size: 1.4rem;
  }
  dt, dd{
    width: 100%;
  }
  /*ーーーheader&fvーーー*/
  .topFade {
    padding-top: 14px;
  }
  .topView{
    padding: 0;
    margin-bottom: 0;
  }
  .yomogiMovie{
    mask-image: none;
    width: 100%;
    height: 80vh;
    object-fit: cover;
  }
  .headerWrap{
    height: 0;
  }
  .hamburger.active,
  .headerNav{
    width: 100vw;
    margin-top:0;
  }
  .hmbBtn{
    width: 9.6rem;
    height: 9.6rem;
    font-size: 1.6rem;
    right: -3%;
    top: -25%;
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%);
  }
  .mainTitleWrap{
    position: static;
    padding-top: 4.8rem;
    background-color: transparent;
  }
  .mainTitleWrap .ttl {
    font-size: 2.8rem;
  }
  .mainTitleWrap .txt{
    padding: 0 0.8rem;
  }
  /*ーーーaboutーーー*/
  .topGreetingWrap{
    display: block;
  }
  .topGreeTxtWrap{
    width: 100%;
    padding-bottom: 2.4rem;
  }
  .topGretingInner{
    padding: 0;
  }
  .aboutImg{
    width: 100%;
    height: 30vh;
  }
  .aboutImg .about2{
    max-width: 40%;
    top: 0;
    right: 5%;
  }
  .aboutImg .about1{
    max-width: 45%;
    left: 5%;
    bottom: 8%;
  } 
  /*ーーーlessonーーー*/
  .lessonWrapper,
  .lessonWrap .reverse{
    width: 100%;
    display: block;
  }
  .lessonImg, .lessonContent{
    max-width: 90%;
  }
  .lessonContent{
    padding: 2.4rem;
    margin: 0 auto;
  }
  .lessonContent .txt{
    margin-bottom: 4.8rem;
    text-align: justify;
  }
  .lessonWrap .reverse .lessonImg{
    margin: 0 0 0 auto;
  }
  /*ーーーblogーーー*/
  .blogArchive{
    flex-wrap: wrap;
  }
  .blogLink{
    width: 100%;
    margin-bottom:2.4rem;
    margin-right: 0;
  }
  /*ーーーQ&Aーーー*/
  .topQuestion{
    margin-bottom: 4.8rem;
  }
  /*ーーーbackbuttonーーー*/
  .backToTop{
    width: 4.8rem;
    height: 4.8rem;
    right: 1.6rem;
  }
  .backToTop i {
    line-height: 4.8rem;
    font-size: 2.4rem;
  }
  .backToTop.fixed {
    margin-top: 2.4rem;
    margin-right: 0;
    margin-bottom: -2.4rem;
    position: relative;
    z-index: 99;
  }
  /*ーーーfooterーーー*/
  .footWrap{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .footerLeft{
    width: 100%;
    background-position: center;
  }
  .footerRight{
    width: 100%;
  }
  .footerListWrapper{
    display: none;
  }
  .topContact{
    padding: 4.8rem 2.4rem 8rem;
  }
  .linkWrap{
    flex-wrap: wrap;
  }
  .linkWrap .moreBtn{
    margin-bottom: 1.6rem;
  }
  /*ーーーーーーーーーーーー
  下層ページ/salon-page
  ーーーーーーーーーーーーー*/
  .greeting{
    margin-top:6.4rem;
  }
  .yomogiTxt, .greetingWrap .txt{
    text-align: justify;
  }
  .greetingImageWrap{
    height: 24rem;
  }
  .greetingImageWrap img{
    border-radius: 1.2rem;
  }
  .yomogi1{
    width: 60%;
    bottom: 0;
    left: 24%;
    z-index: 99;
  }
  .yomogi2{
    width: 45%;
    left: 5%;
    top: -15%;
  }
  .yomogi3{
    top: -1.6rem;
  }
  .mogwort{
    margin-top: 0;
    padding: 4.8rem 0;
  }
  .herbImg img{
    border-radius: 0.8rem;
  }
  .priceWrapper{
    display: block;
    position: relative;
  }
  .planImg, .priceWrap{
    width: 100%;
  }
  .planImg{
    height: 30vh;
    margin-bottom: 2.4rem;
    position: relative;
  }
  .planImg img{
    border-radius: 1.2rem;
    position: absolute;
  }
  .priceWrapper:first-of-type .planImg img{
    bottom: -68%;
  }
  .priceWrapper:nth-of-type(2) .planImg img{
    top: -40%;
  }
  .priceWrapper:last-of-type .planImg img{
    bottom: 0;
  }
  /*ーーーーーーーーーーーー
  下層ページ/lesson-page
  ーーーーーーーーーーーーー*/
  article.lesson{
    padding-top: 6.4rem;
  }
  #yomogi .ttl{
    line-height: 1.4;
    padding-top: 4.8rem;
  }
  .lessonContentWrap,
  .lessonContentWrap:first-of-type{
    display: block;
  }
  .lessonContentWrap:first-of-type{
    height: auto;
  }
  .lessonContentWrap:first-of-type .lessonTextWrap{
    width: 100%;
  }
  .lessonContentWrap .yomogilesson1,
  .lessonContentWrap .yomogilesson2{
    position: static;
    max-width: 100%;
    margin-top: 1.6rem;
  }
  .lessonHeading{
    font-size: 1.8rem;
  }
  .lessonTextWrap .txt{
    margin: 0 auto;
  }
  .lessonDetailImg{
    max-width: 100%;
  }
  .lessonDetailImg img{
    border-radius: 1.2rem;
    margin-top: 1.2rem;
  }
  .manyLesson .lessonHeading{
    line-height: 1.4;
  }
  .manyLesson{
    margin-bottom: 4.8rem;
    padding: 6.4rem 0;
  }
  .lessonListWrap{
    display: block;
    height: 50vh;
    overflow: scroll;
    border: dotted;
    margin: 0 2.4rem;
  }
  .lessonList{
    width: 100%;
    padding: 1.2rem;
  }
  .lessonNote .largeTxt{
    margin:2.4rem auto;
  }
  .lessonDetail{
    padding: 2.4rem;
  }
  .lessonDetail:nth-of-type(4) .txt,
  .cancelWrap .txt{
    text-align: justify;
  }
  .cancelHeading{
    font-size: 2.4rem;
  }
  .marcheContentWrap,
  .voiceWrap,
  .introWrap,
  .voices figure{
    display: block;
  }
  .marcheDetailImg,
  .marcheContentWrap .txt,
  .voices,
  .voices figure img,
  .voices figcaption,
  .teachImg,
  .teachWrapper{
    width: 100%;
  }
  .marcheDetailImg{
    border-radius: 1.2rem;
    margin-bottom: 2.4rem;
  }
  .marcheTxt::before{
    left: 0;
  }
  .marcheTxt::after{
    right: 0;
  }
  .marcheLessonWrap{
    display: block;
  }
  .lessonDetailWrap{
    width: 100%;
  }
  .teachWrap{
    padding-top: 4.8rem;
  }
  .teachcontent .txt,
  .teachWrapper .txt{
    margin-bottom: 2.4rem;
  }
  /*ーーーーーーーーーーーー
  下層ページ/blog-page
  ーーーーーーーーーーーーー*/
  .blog{
    margin-top:6.4rem;
  }
  .blogContent{
    width: 100%;
  }
  .blog .blogContent{
    margin:0 auto 4.8rem;
  }
  .blog .blogContent figure{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
  .blogSingle .ttlWrapper{
    flex-direction: column;
  }
  .meta {
    margin-left: 0;
  }
  .blogSingle .blogWrap{
    flex-wrap: wrap;
  }
  .blogSingle .blogMainImg{
    width: 100%;
  }
  /*ーーーーーーーーーーーー
  下層ページ/Contact-page
  ーーーーーーーーーーーーー*/
  .contactForm{
    display: block;
  }
  .formLabel,
  .privacyTxtWrap{
    width: 100%;
  }
  
}