@charset "utf-8";
/*
Theme Name: 
Theme URI: テーマのホームサイトのURL
Description: テーマの説明
Author: 作者の名前
Author URI: 作者のサイトのURL
Version: バージョン
*/

/*ーーー
 全体
ーーー*/
html {
  font-size: 62.5%;
  background-color: #EBE7E0;
}
body{
  min-width: 100rem;
  word-break: break-all;
  font-family: 'M PLUS 1p','メイリオ',sans-serif;
  font-size: 1.6rem;
  color: #32220F;
  letter-spacing: 0.05rem;
  line-height: 2;
}
img{
  max-width: 100%;
  height: auto;
}
.container{
  max-width: 130rem;
  margin: 0 auto;
  -webkit-margin: 0 auto;
  padding-left: 4.8rem;
  padding-right: 4.8rem;
  -webkit-padding-left: 4.8rem;
  -webkit-padding-right: 4.8rem;
}
.l-section{
  padding:6.4rem 0 16rem;
}
.sp{
  display: none;
}
.ttlWrapper{
  position: relative;
}
.ttl{
  font-size: 3.2rem;
  text-align: center;
  letter-spacing: 0.1rem;
}
.enTtl{
  text-align: center;
  font-size: 1.4rem;
  font-family: "Kite One", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0 auto 4.8rem;
}
.largeTxt{
  font-size: 2.4rem;
  margin-top: 4.8rem;
  margin-bottom: 2.4rem;
}
.txt{
  text-align: justify;
  margin-bottom: 4.8rem;
  font-feature-settings: "palt";
}
.fade{
  transform: translateY(3rem);
  opacity: 0;
  transition: all 1.5s;
}
.fade.visible{
  opacity: 1;
  transform: translateY(0);
}
.moreBtn{
  background-color: #7a736a;
  color: #d9d9d9;
  width: 24rem;
  height: 4.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  border-radius: 50vw;
  transition: all 0.8s;
}
.moreBtn:hover{
  color: #7a736a;
  background-color: #d9d9d9;
  transition: all 0.8s;
}
/*ーーーー
 header
ーーーー*/
.headerWrap{
  height: 9.6rem;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.headerInner{
  display: none;
}
.headerInner.active{
  display: block;
}
.headerNav{
  display: flex;
  flex-direction: column;
  width: 30vw;
  height: 100vh;
  position: absolute;
  right: 0;
  position: fixed;
  z-index: 99;
  background-color: #7a736a;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.headerNav li{
  text-align: center;
  color: #d9d9d9;
  padding: 1.6rem 0;
  transition: 0.5s ease;
}
.headerNav li:hover{
  background-image: linear-gradient(90deg,rgba(217,217,217,0)0%,rgba(217,217,217,0.8)30%,rgba(217,217,217,0.8)70%,rgba(217,217,217,0)100%);
  color: #7a736a;
  transition: 0.5s ease;
}
.hamburger{
  position: fixed;
  width: 100vw;
  transition: 0.3s;
  z-index: 99;
}
.hmbBtn{
  width: 19.2rem;
  height: 19.2rem;
  font-size: 2.4rem;
  font-family: "Kite One", sans-serif;
  background-color: #d9d9d9;
  border-radius: 50vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  right: -2%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.hmbTxt{
  font-size: 1.1em;
  overflow: hidden;
  height: 1em;
  position: relative;
}
.hmbTxt span{
  color: #32220f;
  line-height: 1.2;
  display: block;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.hamburger.active{
  background-color: #7a736a;
  width: 30vw;
  height: 100vh;
  border-radius: 0;
  right: 0;
}
.hamburger.active .hmbBtn{
  background-color: transparent;
}
.hamburger.active .hmbTxt span{
  color: #d9d9d9;
  -webkit-transform: translateY(-1.2em);
  transform: translateY(-1.2em);
}

/*ーーーーー
  fullview
ーーーーーー*/
.topView{
  position: relative;
  padding: 0 4.8rem;
  margin-bottom: 16rem;
}
.yomogiMovie{
  width: 85%;
  mask-image: url(img/Vector.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  mask-clip: content-box;
}
.mainTitleWrap{
  max-width:56rem;
  position: absolute;
  bottom: -30%;
  right: 8%;
  background-color: rgba(255,255,255,0.5);
  padding: 1.6rem;
  border-radius: 2.4rem;
}
.mainTitleWrap .ttl{
  margin-bottom:2.4rem;
  font-size: 3.6rem;
}
.mainTitleWrap .txt{
  margin-bottom: 0;
}
/*ーーーー
  about
ーーーーー*/
.topGreetingWrap{
  display: flex;
  justify-content: space-between;
}
.topGreeTxtWrap{
  width: 50%;
}
.topGretingInner{
  padding: 3.6rem;
}
.topGretingInner .txt{
  text-align: justify;
  margin-bottom: 2.4rem;
}
.aboutImg{
  position: relative;
  width: 60%;
}
.aboutImg img{
  position: absolute;
  border-radius: 10%;
}
.aboutImg .about1{
  max-width: 48rem;
  left: 0;
  bottom: 0;
}
.aboutImg .about2{
  max-width: 36rem;
  top: -10%;
  right: -10%;
}
/*ーーーーー
  lesson
ーーーーーー*/
#yomogi,
#marche{
  max-width: 140rem;
  margin: 0 auto;
}
.lessonWrapper{
  display: flex;
  justify-content: space-between;
}
.lessonWrap .reverse{
  display: flex;
  flex-direction: row-reverse;
}
.lessonImg,
.lessonContent{
  max-width: 50%;
}
.lessonImg img{
  border-radius: 0% 10vw 10vw 0%;
}
.reverse .lessonImg img{
  border-radius: 10vw 0% 0% 10vw;
}
.lessonContent{
  max-width: 45%;
  padding: 9.6rem 4.8rem;
}
.lessonContent .txt{
  margin-bottom: 9.6rem;
}

/*ーーー
  blog
ーーーー*/
.calendar figure{
  max-width: 96rem;
  margin: 0 auto;
}
.calendar .moreBtn{
  margin: 4.8rem auto;
  padding: 1.2rem 2.4rem;
  width: 32rem;
}
.blogArchive{
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.blogLink{
  width: calc(100%/4);
  margin-right: 2.4rem;
  border: #7a736a solid 0.1rem;
  padding: 1.6rem;
  margin-bottom: 6.4rem;
  border-radius: 3rem;
}
.blogLink:nth-of-type(4){
  margin-right: 0;
}
.blogLink figure{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.blogLink img{
  border-radius: 3rem;
  width: 24rem;
  height: 24rem;
  object-fit: cover;
}
.blogTtl{
  margin-bottom: 1.6rem;
  font-size: 2.4rem;
  text-align: left;
  padding-top: 0.8rem;
  line-height: 1.4;
}
.blogTxt{
  padding: 0 0.8rem 0.8rem;
  text-align: justify;
  display: inline-block;
}
/*ーーー
  Q&A
ーーーー*/
.questionWrap{
  max-width: 72rem;
  margin: 0 auto;
}
summary{
  list-style: none;
  padding: 1.6rem;
  background-color: #d9d9d9;
  margin-bottom: 1.6rem;
  display: flex;
  justify-content: space-between;
}
.fa-chevron-down{
  padding-left: 1rem;
}
.ans{
  padding: 0 0 2.4rem 2.4rem;
  font-feature-settings: "palt";
}
/*ーーーーー
  contact
ーーーーーー*/
.topContactInner{
  text-align: center;
}
.topContactInner .largeTxt{
  color: #32220F;
}
.topContactInner .txt{
  margin-bottom: 25px;
}
.phoneBtn{
  color: #005BAC;
  font-size: 72px;
  font-family: 'Oswald',sans-serif;
}
.contactLink{
  display: inline-block;
  background-color: #005BAC;
  border-radius: 30px;
  color: #fff;
  padding: 15px 180px;
  margin-bottom: 35px;
}
/*ーーーーー
 backbutton
ーーーーーー*/
.backToTop{
  display: flex;
  width: 7.2rem;
  height: 7.2rem;
  border: 0.24rem solid #fff;
  border-radius: 3.6rem;
  position: fixed;
  bottom: 9.6rem;
  right: 3.6rem;
  z-index: 9;
  transition: none;
  background-color: #7a736a;
  flex-wrap: wrap;
  justify-content: center;
}
.backToTop i {
  color: #fff;
  width: 100%;
  text-align: center;
  line-height: 7.2rem;
  font-size: 2rem;
}
.backToTop.fixed{
  position: static;
  margin-bottom: 3.6rem;
  margin-left: auto;
  margin-right: 3.6rem;
  margin-top: -9.6rem;
}
/*ーーーーー
  footer
ーーーーーー*/
.footer{
  width: 100vw;
}
.footWrap,
.linkWrap{
  display: flex;
}
.footWrap{
  max-width: 140rem;
}
.footerLeft{
  width: 60%;
  background-image: url(img/contactBack.jpg);
  border-radius: 0 10vw 0 0;
  background-size: cover;
  background-repeat: no-repeat;
}
.topContact{
  background-color: rgba(255,255,255,0.6);
  border-radius: 0 10vw 0 0;
}
.topContactInner .txt{
  text-align: center;
  margin-bottom: 7.2rem;
}
.footerRight{
  width: 40%;
  text-align: center;
}
.footerNav{
  margin: 6.4rem auto;
}
.footerNav li{
  margin-bottom: 2.4rem;
}
/*ーーーーーーーーー
下層ページ-salon
ーーーーーーーーーー*/
.yomogiTxt,
.greetingWrap .txt{
  margin: 0 auto 1.6rem;
  max-width: 70rem;
}
.greetingImageWrap{
  position: relative;
  max-width: 128rem;
  margin: 4.8rem auto 0;
  height: 56rem;
}
.greetingImageWrap img{
  border-radius: 4rem;
  position: absolute;
  margin: 0 1.2rem;
}
.yomogi1{
  width: 31.3%;
  bottom: 0;
}
.yomogi2{
  width: 23.5%;
  left: 35%;
  top: 20%;
}
.yomogi3{
  width: 35%;
  right: 0;
  top: 0;
}
.mogwort{
  padding-bottom: 0;
}
.facehead{
  width: 75%;
  font-size: 1.8rem;
  margin: 0 auto 0.8rem;
  padding: 1.2rem 0 0.4rem;
  border-bottom: #7a736a dashed 0.1rem;
}
.herbImg,
.faceImg{
  max-width: 28rem;
  margin: 0.8rem;
}
.herbImg img,
.faceImg img{
  border-radius: 2.4rem;
}
.priceWrapper{
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 16rem;
  justify-content: space-evenly;
}
.priceWrapper:nth-of-type(even){
  flex-direction: row-reverse;
}
.planImg{
  max-height: 64rem;
  overflow: hidden;
  border-radius: 4rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.planImg img{
  max-width: 64rem;
  border-radius: 4rem;
}
.menuList{
  padding-left: 1rem;
  margin-top: -0.8rem;
}
.priceWrap{
  margin: 0 6.4rem;
  width: 35%;
}
.plan{
  border-bottom: 0.1rem dashed #333;
  margin: 1.6rem 0;
}
.plan .txt{
  margin-bottom: 0;
  padding-bottom: 0.8rem;
}
/*ーーーーーーーーー
下層ページ-lesson
ーーーーーーーーーー*/
.attendanceWrap .ttl{
  margin-bottom: 4.8rem;
}
.lessonContentWrap{
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: 6.4rem;
}
.lessonContentWrap:first-of-type{
  height: 68rem;
  margin:4.8rem auto 12rem;
}
.lessonTextWrap .txt{
  margin: 0 3.6rem 0 0;
}
.lessonHeading{
  font-size: 2.4rem;
}
.lessonContentWrap .yomogilesson1,
.lessonContentWrap .yomogilesson2{
  position: absolute;
}
.lessonDetailImg img{
  border-radius: 4rem;
  margin-bottom: 6.4rem;
}
.lessonContentWrap .yomogilesson1{
  bottom: 0;
  max-width: 65%;
  z-index: 99;
}
.lessonContentWrap .yomogilesson2{
  right: 0;
  top: 0;
  max-width: 45%;
}
.yomogilesson2 img{
  overflow: hidden;
}
.lessonDetailImg{
  max-width: 72rem;
}
.manyLesson{
  background-color: #7a736a;
  padding: 8rem 0;
  color: #d9d9d9;
  margin-bottom: 16rem;
  width: 100vw;
}
.manyLesson .lessonHeading{
  text-align: center;
  font-size: 3.2rem;
  margin-bottom: 2.4rem;
}
.lessonListWrap{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.lessonList{
  width: calc(80%/2);
}
.lessonNote,
.cancelWrap{
  text-align: center;
}
.lessonDetail{
  max-width: 56rem;
  text-align: center;
  border: #cfc196 0.1rem solid;
  background-color: #fff;
  padding: 2.4rem 4.8rem;
  margin: 4.8rem auto;
}
.manyLesson .txt{
  width: 80%;
  margin: 1.2rem auto 4.8rem;
  text-align: center;
}
.lessonDetail .largeTxt{
  font-size: 4.8rem;
  margin: 0;
}
.lessonDetail .txt{
  margin-bottom:2.4rem;
  text-align: center;
}
.cancelHeading{
  margin-top: 6.4rem;
  display: inline-block;
  font-size: 3.2rem;
  background-color: #7a736a;
  padding: 1.6rem 2.4rem;
  color: #fff;
  margin-bottom: 4.8rem;
}
.cancelWrap .txt{
  text-align: center;
  margin-bottom: 0;
}
.marcheContentWrap{
  margin-top: 4.8rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.marcheDetailImg{
  width: 50%;
}
.marcheDetailImg img{
  border-radius: 4rem;
}
.marcheTxt{
  text-align: center;
  position: relative;
  margin-bottom: 4.8rem;
}
.marcheTxt::before,
.marcheTxt::after{
  content:"";
  position: absolute;
  display: block;
  height: 4.8rem;
  width: 0.2rem;
  border-radius: 10vw;
  background-color: #32220F;
}
.marcheTxt::before{
  left: 34%;
  bottom: 0;
  transform: rotate(-15deg);
}
.marcheTxt::after{
  right: 34%;
  bottom: 0;
  transform: rotate(15deg);
}
.marcheContentWrap .txt{
  width: 45%;
}
.attendanceWrap{
  margin-top: 4.8rem;
}
.marcheLessonWrap{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.marcheHeader{
  text-align: center;
}
.lessonDetailWrap{
  width: calc(96%/2);
}
.lessonDetailWrap .lessonDetail{
  margin: 0 auto 2.4rem;
}
.lessonDetail .txt{
  margin-bottom: 0;
}
.lessonDetail .priceHeading{
  padding-bottom: 0.2rem;
  border-bottom: dashed 0.1rem #32220F;
  margin-bottom: 0.4rem;
}
.voices{
  margin-bottom: 4.8rem;
}
.voices figure{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 3.2rem;
  position: relative;
  align-items:flex-start;
}
.voiceTtl{
  font-size: 2.4rem;
  padding: 0.8rem 0;
  border-bottom: dashed 0.1rem #32220F;
}
.voices figure img{
  width: 45%;
  margin-right: 2.4rem;
  border-radius: 2.4rem;
} 

.voices figure::before{
  content: "";
  position: absolute;
  display: block;
  background-color: rgba(255,255,255,0.6);
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 10%;
  filter: blur(1.2rem);
  top: 0.8rem;
  left: 0.8rem;
}
.teachWrap{
  background-color: #9FA0A0;
  color:#fff;
}
.introWrap{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
}
.teachImg{
  width: 45%;
}
.teachImg img{
  border-radius: 30% 30% 0 0 ;
}
.teachWrapper{
  width: 45%;
}
.teachWrapper .largeTxt{
  margin-bottom: 0;
}
/*ーーーーーーーーー
下層ページ-blog
ーーーーーーーーーー*/
.blogSingle .ttlWrapper,
.blogWrap{
  display: flex;
  flex-wrap: nowrap;
}
.blogSingle .ttlWrapper{
  justify-content: center;
  align-items: center;
}
.meta{
  margin-left: 4.8rem;
}
.blogWrap{
  justify-content: space-between;
  padding-top: 2.4rem;
}
.blogList{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.blogContent{
  width: calc(96%/4);
  border: #cfc196 0.1rem solid;
  padding: 1.6rem;
  border-radius: 2.4rem;
  margin-right: 1.6rem;
  margin-top: 1.6rem;
}
.blogContent:nth-of-type(4n){
  margin-right: 0;
}
.blogContent figure img{
  border-radius: 1.6rem;
  width: 24rem;
  height: 24rem;
  object-fit: cover;
}
.blogMainImg{
  width: 45%;
}
.blogMainImg img{
  border-radius: 2.4rem;
}
.blogSingle .blogContent{
  border: none;
  width: 50%;
}

/*ーーーーーーーーー
下層ページ-contact
ーーーーーーーーーー*/
.contactFormWrap{
  max-width: 80rem;
  margin: 0 auto;
}
input,
textarea{
  border: #9FA0A0 0.7px solid;
  padding: 10px;
}
.inputExample{
  color: #9FA0A0;
}
textarea{
  width: 100%;
}
.formWrap{
  display: flex;
  flex-wrap: wrap;
  margin: 4.8rem auto;
}
.contactForm{
  width: 100%;
  margin: 4.8rem auto 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.formLabel{
  width: 35%;
}
.wpcf7-list-item{
  display: block;
}
.wpcf7-form-control-wrap{
  width: 65%;
}
.wpcf7-form-control-wrap input{
  width: 100%;
}
.wpcf7-list-item input{
  width: 8%;
}
textarea{
  background-color: #fff;
}
.contactTxt{
  max-width: 980px;
  margin: 20px auto;
}
.required{
  color: rgb(192, 33, 33);
}
.privacyHead{
  text-align: center;
  margin-top: 9.6rem;
  font-size: 2.4rem;
}
.privacyTxtWrap{
  width: 80%;
  height: 32rem;
  overflow: scroll;
  border: #9FA0A0 solid 0.1rem;
  margin: 1.6rem auto;
  padding: 1.6rem;
}
.privacyArticle{
  margin-top: 1.8rem;
}
.privacyTxtHead{
  display: inline-block;
  border-bottom: 0.1rem solid;
  line-height: 1.4;
  font-weight: bold;
  font-size: 1.8rem;
}
.privacyAgreeWrapper{
  text-align: center;
  margin-top: 4.8rem;
}
.submitBtn,
.preBtn{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

[type="submit"] {
  width: 230px;
  height: 48px;
  margin: 4.8rem auto;
  background: #7a736a;
  color: #fff;
  cursor: pointer;
  border: transparent;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3rem;
  transition: ease 0.8s;
}
[type="submit"]:hover{
  background: #cfc196;
  transition: ease 0.8s;
}
input[type="button"]{
  display: block !important;
  border: #cfc196 solid 0.1rem;
  padding: 1.6rem 2.4rem;
  margin: 2.4rem auto;
  width: 40%;
  background-color: #ddd;
  border-radius: 3rem;
}

.confirmTxt{
  padding: 2.4rem 0;
  display: flex;
  flex-wrap: nowrap;
}
.formHead{
  width: 40%;
  display: flex;
  justify-content: center;
  margin-right: 1.6rem;
}
.btnWrap{
  margin-top: 4.8rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: baseline;
}
.btnWrap .preBtn,
.btnWrap .submitBtn{
  width: calc(96%/2);
}