@charset "UTF-8";
/* CSS Document */
.under-hero{
  background-color: var(--wall-gray);
  padding-top: var(--pd_var);
  padding-bottom: var(--pd_var);
}
.under-hero_title{
  display: flex;
  flex-direction: column;
  gap:min(20px,4vw);
}
.under-hero_title .page-title{
  font-size: var(--head2);
  font-weight: 700;
  line-height: calc(40/30);
}
/*image hero*/
.image-hero{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  height: min(400px,120vw);
}
.image-hero_desc{
  background-color: var(--wall-gray);
  display: grid;
  grid-template-columns: 100%;
  align-content: flex-end;
  padding: min(50px,4vw);
  gap:min(20px,4vw);
}
.post-category{
  font-size: min(12px,3.2vw);
  display: flex;
  -ms-align-items: center;
  align-items: center;
  gap:min(14px,3.6vw);
  font-weight: 500;
}
.post-category dd{
  display: flex;
  flex-wrap: wrap;
  gap: .3em .5em;
}
.post-category dd > span{
  background-color: #fff;
   padding: 5px 10px 4px;
  border-radius: 100vmax;
  font-weight: 500;
}
.post-category .arrow-title span{
  padding-top: 7px;
  padding-bottom: 7px;
  padding-right: 2em;
  font-size: min(10px,2.8vw);
  white-space: nowrap;
}
.post-header{
  display: flex;
  flex-direction: column;
  -ms-align-items:flex-start;
  align-items:flex-start;
  gap:.85em;
}
.post-data__date{
  font-family: var(--fnt-qua);
  font-weight: 700;
  margin-left: auto;
}
.post-data__date span{
  padding-left: 1.5em;
}
.post-data__date span::before{
  content: "";
  position: absolute;
  left: 0;
  top: 45%;
  translate:0 -50%;
  background-image: url("../images/icon/calendar.svg");
  background-size: cover;
  width: 1.14em;
  aspect-ratio:1/1.0714;
}
.post-data_title{
  font-size: var(--head2_min);
  font-weight: 500;
  line-height: calc(38/24);
}
.post-tag{
  display: flex;
  flex-wrap: wrap;
  gap:10px;
}
.post-tag span{
  background-color: #fff;
  font-size: min(11px,2.8vw);
  border: 1px solid;
  border-radius: 3px;
  padding: 5px .5em 4px;
}
.image-hero_thumb figure{
  position: absolute;
  inset:0;
}
.image-hero_thumb.line::after{
  content: "";
  position: absolute;
  inset:0;
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 1px, transparent 1px, transparent 5px);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.image-hero_thumb figure img{
  object-fit: cover;
  object-position: center;
  height: 100%;
}
.image-hero_thumb.single{
  background-color: #ccc;
}
.image-hero_thumb.single::after{
  content: "";
  position: absolute;
  inset:0;
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 1px, transparent 1px, transparent 5px);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
/**/
.l-bread{
  font-size: min(12px,3.2vw);
  display: flex;
  flex-wrap: wrap;
  -ms-align-items: center;
  align-items: center;
  font-weight: 500;
  gap:10px;
}
.l-bread::before{
  content: "";
  width: 100vw;
  height: 100%;
  border-top:1px solid var(--bdr-gray);
  border-bottom:1px solid var(--bdr-gray);
  position: absolute;
  left: 50%;
  top: 0;
  translate:-50% 0;
}
.l-bread li{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  gap:10px;
}
.l-bread li > *{
  padding-top: min(10px,2vw);
  padding-bottom: min(10px,2vw);
  display: flex;
}
.l-bread li:nth-child(n+2)::before{
  content: "";
  display: block;
  width: 6px;
  aspect-ratio:1;
  border: 1px solid;
  border-color: currentColor currentColor transparent transparent;
  rotate:45deg;
}
.l-bread .home{
  padding-left: 1.25em;
}
.l-bread .home::before{
  content: "";
  position: absolute;
  left: 0;
  top: 40%;
  translate:0 -50%;
  background-image: url("../images/icon/home.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 1em;
  aspect-ratio:1/1.1278;
}
.l-bread > li.is-current span{
  max-width: 12em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}
/*archives*/
.index-contents.paged .index-archive-blc{
  order: 1;
  flex-direction: column-reverse;
  gap: min(80px, 15vw);
}
.index-contents.paged .sec-pickup-blc{
  order: 2;
}
.index-contents.paged .sec-lesson-blc{
  order: 3;
}

/*archive
=====================================*/
.under-contents{
  padding-top: var(--pd_var);
}
.under-archive-blc{
  display: flex;
  flex-direction: column;
  gap:var(--pd_var);
}
.under-archive-blc{
  padding-bottom: var(--pd_var);
}

/*single
=====================================*/

/*single contents*/
.single-entry-blc{
  padding-left: var(--pd_hz);
  padding-right: var(--pd_hz);
  padding-bottom: var(--pd_var);
  display: grid;
  grid-template-columns: min(1100px,100%);
  justify-content: center;
}
.entry-body{
  line-height: calc(24/14);
}
.single-entry-box{}

.single-post-set{
  padding-top: min(50px,12vw);
}
/*single pager*/
.single-pager{
  width: min(1200px,100%);
  margin-inline:auto;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:min(30px,4vw);
  padding-left: var(--pd_hz);
  padding-right: var(--pd_hz);
  padding-top: var(--pd_hz);
}
.page-link-item{
  display: grid;
  gap:min(20px,3vw);
  border-top: 1px solid var(--bdr-gray);
  border-bottom: 1px solid var(--bdr-gray);
  padding: min(15px,3vw) min(20px,4vw);
}
.page-link-item::before{
  content: "";
  width: .5em;
  aspect-ratio:1;
  background-color: var(--clr-main);
  position: absolute;
  top: 50%;
  translate:0 -50%;
}
.page-link-item.prev::before{
  clip-path: polygon(100% 0, 0 51%, 100% 100%);
  left: 0;
}
.page-link-item.next::before{
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  right: 0;
}
.page-link-item.prev{
  grid-template-columns: min(60px,15vw) auto;
  
}
.page-link-item.next{
  grid-template-columns: auto min(60px,15vw);
}
.page-link_thumb{
  aspect-ratio:1;
  background-color: #ccc;
}
.page-link_thumb img{
  object-fit: cover;
  height: 100%;
  object-position: center;
}

.page-link_desc{
  display: flex;
  flex-direction: column;
  gap:5px;
  line-height: calc(20/14);
  font-weight: 500;
}
.page-link_desc .label{
  font-family: var(--fnt-qua);
  font-size: min(12px,3.2vw);
  color: #666666;
  font-weight: 700;
}
.next .page-link_desc{
  -ms-align-items: flex-end;
  align-items: flex-end;
}

.single-related-blc{
  padding-top: var(--pd-sec_var);
  display: flex;
  flex-direction: column;
  gap:var(--pd-sec_var);
  padding-bottom: var(--pd_var);
}
.single-related-box{
  display: flex;
  flex-direction: column;
  gap:min(25px, 6vw);
}

/*404　search*/
.search-results_intro{
  display: flex;
  flex-direction: column;
  gap:1em;
  -ms-align-items: center;
  align-items: center;
}
.search-results_intro .img{
  width: min(200px,45vw);
}
.search-results_intro .desc{
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  text-align: center;
  gap:1em;
}
.search-results_intro .en{
  font-family: var(--fnt-qua);
  font-size: min(24px,6vw);
  font-weight: 600;
}
.search-results_intro .notes{
  line-height: calc(20/14);
}
.page-notfound-blc{
  display: flex;
  flex-direction: column;
  gap: var(--pd_var);
  padding-bottom: var(--pd_var);
}

/*about
=====================================*/
.under-sec_intro{
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:min(20px,4vw);
}
.under-sec_intro .lead-text{
  font-size: min(16px,3.6vw);
}
.page-aboutus-blc{
  width: min(1240px, 100%);
  display: flex;
  flex-direction: column;
  gap:var(--pd_var);
  padding-bottom: var(--pd_var);
}
.page-aboutus_feature{
  display: grid;
  grid-template-columns: auto 1fr;
  gap:min(40px,7vw);
  margin-inline:auto;
}
.page-aboutus_feature .title-area::before{
  content: "";
  position: absolute;
  top: 60%;
  left: 50%;
  translate:-50% -50%;
  width: 80%;
  aspect-ratio:1;
  background-image: url("../images/aboutus/logo.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  rotate:-10deg;
}
.page-aboutus_feature .title-area .notes{
  font-size: min(16px,3.6vw);
  line-height: calc(24/16);
  margin-top: min(20px,5vw);
}
.feature-list > div{
  border-bottom: 1px solid var(--bdr-gray);
  padding-bottom: 1em;
}
.feature-list > div:nth-child(n+2){
  margin-top: min(20px,3.5vw);
}
.feature-list dt{
  display: flex;
  flex-direction: column;
  gap:8px;
}
.feature-list dt .tag{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  font-family: var(--fnt-qua);
  gap:7em;
  padding-left: 1.14em;
}
.feature-list dt .tag::before{
  content: "";
  width: .8em;
  aspect-ratio:1;
  position: absolute;
  left: 0;
  top: 50%;
  background-color: var(--clr-main);
  translate:0 -50%;
  border-radius: 100vmax;
}
.feature-list dt .num::before{
  content: "";
  width: 5em;
  height: 1px;
  background-color: currentColor;
  position: absolute;
  left: -1em;
  top: 50%;
  translate:-100% -50%;
}
.feature-list dt .list-title{
  font-size: min(18px,4.5vw);
  line-height: calc(24/18);
}
.feature-list dd{
  line-height: calc(24/14);
  margin-top: 1em;
}

.page-aboutus__style{
  background-color: var(--wall-gray);
  padding: min(30px,7vw) min(30px,4vw);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap:min(30px,7vw);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .85) 1px, transparent 1px, transparent 5.5px);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.aboutus-style_list{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:min(15px,3.2vw);
}
.aboutus-style_list > li{
  background-color: #fff;
  border-radius: 10px;
  padding: min(20px,3vw);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: min(15px, 3vw);
}

.aboutus-style_list .style__head{
  display: grid;
  place-items:center;
  place-content:center;
  grid-template-columns: min(65px,20vw) auto;
  gap:10px;
  line-height: calc(30/20);
}

.aboutus-style_list .style__head .main{
  font-weight: 500;
  font-size: min(18px,4.5vw);
}

/*flow*/
.aboutus-lesson-box{
  margin-top: min(30px,7vw);
  display: flex;
  flex-direction: column;
  gap:min(40px,10vw);

}
.lesson-switch {
  display: grid;
  width: max-content;
  grid-template-columns: repeat(2, 1fr);
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  margin-inline:auto;
  gap:min(20px,3vw);
}
.lesson-switch > li{
  display: grid;
  height: min(45px,12vw);
  place-content:center;
  padding-left: min(1.5em,2vw);
  padding-right: min(1.5em,2vw);
  background-color: var(--bdr-gray);
  font-weight: 500;
  cursor: pointer;
  line-height: calc(16/14);
}
.lesson-switch > li.active{
  background-color: var(--clr-main);
  color: #fff;
}
.aboutus-lesson__flow {
  counter-reset: count;
}
.aboutus-lesson__flow > li{
  padding-bottom: min(20px,5vw);
  border-bottom: 1px solid var(--bdr-gray);
}
.aboutus-lesson__flow > li:nth-child(n+2){
  margin-top: min(20px,5vw);
}
.aboutus-lesson__flow > li::before{
  counter-increment: count 1;
  content: counter(count);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--fnt-qua);
  z-index: 1;
  width: 2em;
  aspect-ratio:1;
  border-radius: 100vmax;
  display: grid;
  place-content:center;
  background-color: var(--clr-main);
  color: #fff;
  translate:-33% -25%;
}
.flow-item{
  display: grid;
  grid-template-columns: min(200px,33vw) 1fr;
  grid-template-rows: min-content auto;
  gap:min(15px,3vw) min(30px,4vw);
}
.flow-item .thumb{
  grid-row:1/ span 2;
}
.flow-item .list-title{
  align-content: flex-end;
  font-weight: 500;
  font-size: min(20px,calc(100vw/23));
}

/*Free lesson
=====================================================================*/
.page-contact-blc{
  display: grid;
  padding-bottom: var(--pd_var);
  grid-template-columns:min(800px,100%);
  justify-content: center;
  gap:min(50px,7vw);
}
.form-wrap{
  display: grid;
  grid-template-columns:100%;
  gap:min(50px,7vw);
}
.wpcf7-form-control-wrap{
  display: block;
}
.wpcf7-list-item{
  margin: 0;
}
.form-wrap input[type="text"]
,.form-wrap input[type="email"]
,.form-wrap input[type="tel"]{
  border: 1px solid var(--bdr-gray);
  height: min(40px,11vw);
  padding: 5px 10px;
  font-size: 16px;
}
.form-wrap textarea{
  width: 100%;
  padding: 5px 10px;
  font-size: 16px;
  border: 1px solid var(--bdr-gray);
}
.form-wrap input[type="date"]{
  border: 1px solid var(--bdr-gray);
  height: min(40px,11vw);
  padding: 5px 10px;
}
.form01 span[data-name="select-style"]{
  border: 1px solid var(--bdr-gray);
  padding-right: 2em;
  padding-left: 10px;
  display: inline-block;
}
.form01 span[data-name="select-style"]::after{
  content: "";
  width: .75em;
  aspect-ratio:1/.65;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background-color: var(--clr-main);
  position: absolute;
  top: 50%;
  right: .5em;
  translate:0 -50%;
}
.form01 select{
  height: min(40px,11vw);
}
.form01 .date select{
  width: 6em;
  border: 1px solid var(--bdr-gray);
  height: min(40px,11vw);
  padding: 5px 10px;
}
.form-wrap input[name="f-age"]{
  width: 7em;
}
.form-wrap .check-wrap .wpcf7-form-control{
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  gap:10px 2em;
}
.form-wrap .check-wrap label span{
  padding-left: 1.85em;
  cursor: pointer;
}
.form-wrap .check-wrap label span::before
,.form-wrap .check-wrap label span::after{
  content: "";
  width: 1.25em;
  aspect-ratio:1;
  border-radius: 2px;
  position: absolute;
  left: 0;
  top: 50%;
  translate:0 -50%;
}
.form-wrap .check-wrap label > span::before{
  border: 1px solid var(--bdr-gray);
  background-color: #fff;
}
.form-wrap .check-wrap label input:checked + span::after{
  mask:url("../images/icon/check.svg") no-repeat center/65%;
  background-color: var(--clr-main);
}
::placeholder{
  font-size: min(14px,3.6vw);
  opacity: .5;
}
.form01{
  display: flex;
  flex-direction: column;
  gap:min(25px,4vw);
}
.form01 li{
  display: flex;
  flex-direction: column;
  gap:5px;
}
.form-wrap .label{
  font-weight: 600;
  padding-left: 2.8em;
}
.form-wrap .label::before{
  content: "";
  position: absolute;
  left: 0;
  top: .25em;
  font-size: min(10px,2.8vw);
  padding: 2px 5px 3px;
  color: #fff;
  line-height: normal;
  border-radius: 3px;
  font-weight: 400;
}
.form-wrap .label.must::before{
  content: "必須";
  background-color: #FF4A4D;
}
.form-wrap .label.any::before{
  content: "任意";
  background-color: var(--wall-d-gray);
}
.form01 .f-flex{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:10px;
}
.form01 .inp-date{
  display: flex;
  flex-direction: column;
  gap:10px;
  gap: min(25px, 4vw);
}
.form01 .inp-age{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: flex-end;
  align-items: flex-end;
  gap:5px;
}
.form01 .date{
  display: flex;
  -ms-align-items: center;
  align-items: center;
  gap:10px;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
.wpcf7-not-valid-tip{
  font-size: min(10px,2.8vw);
  position: absolute;
  left: 0;
  bottom: 0;
  translate:0 110%;
  white-space: nowrap;
}
.form01 .at{
  font-size:min(12px,3vw);
  color: #dc3232;
}
.form-wrap .f-att_wrap{
  display: flex;
  flex-direction: column;
  -ms-align-items: flex-start;
  align-items: flex-start;
}
.form-wrap .f-att_wrap span{
  padding-left: 1em;
}
.form-wrap .f-att_wrap span::before{
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}
.form-qe{
  display: flex;
  flex-direction: column;
  gap: min(25px, 4vw);
/*  border: 1px solid;*/
  padding:0 min(30px,4vw) min(50px,6vw);
  background-color: var(--wall-gray);
  overflow: hidden;
  isolation: isolate;
  border-radius:5px;
}
.form-qe .inttl{
  padding: min(12px,2.8vw) 0;
  color: var(--wall-gray);
  font-size:min(16px,4vw);
  font-weight: 500;
}
.form-qe .inttl::before{
  content: "";
  position: absolute;
  width: 100vw;
  height: 100%;
  left: 50%;
  top: 0;
  translate:-50% 0;
  background-color: var(--clr-base);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 1px, transparent 1px, transparent 5.5px);
  background-size: 100%;
  background-position: center;
}
.form-qe .inttl span::before{
  content: "\f075";
  font: var(--fa-font-solid);
  padding-right: .5em;
}
.form-qe-item
,.form-qe-item .inp-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wpcf7-spinner{
  display: none!important;
}
.form-qe-item .inp-list .answer{
  display: grid;
  grid-template-columns: auto 1fr;
  -ms-align-items: center;
  align-items: center;
  gap:.5em;
}
.form-wrap .submit{
  display: flex;
  justify-content: center;
}
.form-wrap .submit input{
  width: min(200px,100%);
  height: min(45px,10vw);
  background-color: var(--clr-main);
  color: #fff;
  letter-spacing: .2em;
  font-weight: 500;
  border-radius: 100vmax;
}
.form-attention-box{
  border: 1px solid var(--bdr-gray);
  border-top-left-radius: 1em;
  padding:min(15px,3vw) 0 0 min(15px,3vw);
  
}
.form-attention-box .inttl{
  padding-left: 1.125em;
  font-weight: 500;
}
.form-attention-box .inttl::before{
  content: "\f06a";
  font: var(--fa-font-solid);
  position: absolute;
  top: 0;
  left: 0;
/*
  font-size: 1.25em;
  color: var(--bdr-gray);
*/
}
.form-att-list{
  font-size: min(13px,3.4vw);
  line-height: calc(20/14);
  display: flex;
  flex-direction: column;
  gap:5px;
  padding:min(20px, 4vw) min(20px, 4vw) min(20px, 4vw) min(15px, 3vw);
}
.form-att-list li{
  padding-left: 1em;
}
.form-att-list li::before{
  content: "";
  width: .5em;
  aspect-ratio:1;
  border-radius: 100vmax;
  position: absolute;
  left: 0;
  top: .45em;
  background-color: currentColor;
}
.form-att-list a{
  color: var(--link-clr);
  text-decoration: underline;
  text-offset-position:2px;
}

/*thanks*/
.page-thanks-blc{
  display: grid;
  justify-content: center;
  padding-bottom: var(--pd_var);
  gap:min(30px,8vw);
}