@charset "utf-8";

@media screen and (max-width: 768px) {
 
  #hum-btn{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
  }
  .fix-nav
  ,.head-inner .round-btn
  ,.key-nav
  ,#fix-contact{
    display: none;
  }
  .key-slide-wrap{
    width: calc(100% - min(30px,5vw));
  }
  .key-slide-wrap::before{
    z-index: 1;
    top: auto;
    bottom: 0;
/*    transform: translateX(min(-30px,-5vw)) translateY(50%) scale(-1,1) rotate(95deg);*/
    transform: translateX(calc(100% - 6vw)) translateY(60%) scale(-1,1) rotate(0);
    transform-origin: left bottom;
  }
  .is-load .key-slide-wrap::before{
    transform: translateX(calc(100% - 6vw)) translateY(60%) scale(-1,1) rotate(0);
  }
  .key-inner.wrapper{
    padding: 0;
  }
  .slide-title{
    padding-bottom: min(50px,10vw);
  }
  /*greeting*/
  .index-greeting-box{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    gap:min(30px,8vw);
  }
  .greeting-thumb{
    aspect-ratio:1/1;
    width: 100%;
  }
  .greeting-detail{
    width: 100%;
    padding-left: 0;
  }
  /*cta*/
  .cta-comment{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    gap:min(30px,5vw);
  }
  .cta-comment p.in-text{
    width: 100%;
    padding-right: 0;
    font-size: var(--fs-mid16);
  }
  /*form*/
  .form-list > div:not(.inquiry-hide)
  ,.form-list > .inquiry-hide > div
  ,.lesson-date .date-item{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
  .form-list dt{
    max-width: 100%;
  }
  .form-list dd
  ,.lesson-date .date-item > *{
    width: 100%;
  }
  .lesson-date .date-item{
    gap:15px;
  }
  /*footer*/
  .footer-nav{
    display: none;
  }
  .footer-about{
    width: 100%;
  }
  .footer-links-wrap{
    gap:min(60px,10vw);
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
  .footer-links-wrap > .links-item{
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  
  /*key*/
  .index-key-wrapper{
    aspect-ratio:1/1;
    height: auto;
  }
  .slide-title p{
    font-size: calc(var(--head1)*.75);
  }
  .key-slide-wrap::before{
    width: 30%;
  }
  /*cta*/
  .cta-target{
    position: absolute;
    top: 0;
    left: 0;
  }
  .cta-detail-box{
    width: 100%;
    padding-left: 0;
  }
  .cta-detail-box .cta-title{
    width: calc(80% - min(15px,3vw));
    margin-left: auto;
  }
  .cta-comment{
    width: 100%;
    -ms-align-items: center;
    align-items: center;
  }
  /*about*/
  .index-about-detail{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
  .index-about-detail .about-item{
    width: 100%;
  }
  /*teachers*/
  .teacher-list > article{
    width: calc((100% - min(20px,5vw))/2);
  }
  /*plan*/
  .plan-list{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
  .plan-list > div{
    width: 100%;
  }
  .plan-list::before{
    content: none;
  }
  .plan-list > div + div::before{
    content: "";
    width: 100%;
    height: 10px;
    position: absolute;
    top: 5px;
    left: 0;
    background-image: radial-gradient(circle, #bbcdd4 2.5px, transparent 2px);
    background-size: 15px 10px;
    background-repeat: repeat-X;
    background-position: left top;
    line-height: 1.5;
    transform: translateY(min(-40px,-5vw))
  }
  .price-box{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
}
@media screen and (max-width: 480px) {
  
  /*header*/
  .head-inner{
    min-height: 80px;
  }
  header .logo{
    font-size: 3.6vw;
  }
  
  /*content*/
  .in-text, .top-text{
    line-height: 1.71;
  }
  .index-teacher-box .top-text
  ,.index-studio-box .top-text
  ,.index-form-box .top-text{
    text-align: left;
  }
  .about-curriculum-box .top-text{
    text-align: left;
  }
  .index-greeting-blc::before{
   transform: translateY(calc(-100% + 25vw)) translateX(10%);
  }
  /*greeting*/
  .greeting-detail .sign-box .career{
    width: 100%;
    padding-left: 0;
    padding-top: min(15px,3vw);
  }
  /*news*/
  .info-tab-swich{
    gap:14px;
  }
  .info-tab-swich li p{
    font-size: 1em;
    padding: 10px 1.5em;
  }
  .acv-info-list{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    gap:0;
  }
  .acv-info-list > article:not(:first-child){
    padding-top: min(20px,5vw);
    border-top: 2px solid #fff;
  }
  .acv-info-list > article:not(:last-child){
     padding-bottom: min(20px,5vw);
  }
  .acv-info-list article.acv_post{
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
  }
  article.acv_post .thumb{
    border-radius: min(30px,5vw);
    width: 30%;
  }
  article.acv_post .cmnt{
    width: 70%;
    border-radius: 0;
    background: none;
    padding: 0 0 0 min(20px,5vw);
  }
  
  /*form*/
  .form-list dt{
    width: 100%;
  }
  .form-list dd span[data-name="date-fst"]::after
  ,.form-list dd span[data-name="date-2nd"]::after
  ,.form-list dd span[data-name="date-3rd"]::after{
    content: "";
    width: 1em;
    aspect-ratio:1/1.0284;
    position: absolute;
    top: 50%;
    right: min(20px,4.6vw);
    background: url("../images/icn_calendar.svg") no-repeat center/100%;
    translate:0 -50%;
    
  }
  
  /*footer*/
  .footer-about .site-name .logo{
    width: 6em;
  }
  .footer-about .site-name .cmnt{
    width: calc(100% - 6em);
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    -ms-align-items: flex-end;
    align-items: flex-end;
    
  }
  .footer-about .site-name .cmnt p.txt{
    width: calc(100% - 8vw);
    font-size: 1em;
  }
  .footer-about .site-name .cmnt a{
    width: 8vw;
  }
  .footer-links-wrap > .links-item .logo{
    width: 6em;
  }
  .footer-links-wrap > .links-item .cmnt{
    width: calc(100% - 6em);
  }
  .footer-cta-area{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
  }
}