@charset "UTF-8";
.hstyle-page-hero {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.hstyle-page-hero span.en {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 55rem;
  letter-spacing: -0.06em;
  white-space: nowrap;
  line-height: 1;
  text-indent: -0.1em;
  margin-bottom: 20rem;
  position: relative;
  clip-path: inset(0 100% 0 0);
  -webkit-transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hstyle-page-hero span.en span.bg {
  background: var(--color-main);
  position: absolute;
  width: 103%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: -5px;
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transition: 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition: 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.hstyle-page-hero span.en span.bg.hide {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.hstyle-page-hero span.ja {
  display: inline-block;
  font-weight: bold;
  font-size: 26rem;
  line-height: 1.6;
  position: relative;
  clip-path: inset(0 100% 0 0);
  -webkit-transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hstyle-page-hero span.ja span.bg {
  background: var(--color-main);
  position: absolute;
  width: 103%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: -5px;
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transition: 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition: 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.hstyle-page-hero span.ja span.bg.hide {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.hstyle-page-hero span.en.show,
.hstyle-page-hero span.ja.show {
  webkit-clip-path: inset(0);
  clip-path: inset(0);
}

section.page-hero .area-head {
  height: 40svh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
section.page-hero .hstyle-page-hero {
  width: 86.6%;
  margin: 0 auto 30rem;
}
section.page-hero .area-heroImage {
  position: relative;
  clip-path: inset(0 100% 0 0);
  -webkit-transition: all 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition: all 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
section.page-hero .area-heroImage.show {
  webkit-clip-path: inset(0);
  clip-path: inset(0);
}
section.page-hero .area-heroImage img {
  width: 100%;
  height: 560rem;
  -o-object-fit: cover;
  object-fit: cover;
}
section.page-hero .area-heroImage .copyright {
  position: absolute;
  bottom: 10rem;
  left: 30rem;
  font-size: 18rem;
  font-family: var(--font-en);
}



/**********************************************************************

 * Media Query For PC

 ***********************************************************************/
@media print, screen and (min-width: 768px) {
.hstyle-page-hero span.en {
    /*font-size: clamp(68.2666666667px, 6.67vw, 96px);*/
	font-size: clamp(98.2666666667px, 9.60vw, 126px);
    letter-spacing: -0.06em;
    white-space: nowrap;
    margin-bottom: clamp(14.2222222222px, 1.39vw, 20px);
  }
  .hstyle-page-hero span.ja {
    font-size: clamp(19.9111111111px, 1.94vw, 28px);
    line-height: 1.6;
  }
  section.page-hero .area-head {
    /*height: max(270.2222222222px, 26.39vw);*/
	height: max(250.2222222222px, 25.0vw);
    padding-bottom: clamp(15.3333333333px, 2.08vw, 24px);
  }
  section.page-hero .hstyle-page-hero {
    width: 91.6%;
    margin: 0 auto max(21.3333333333px, 2.08vw);
  }
  section.page-hero .area-heroImage {
    position: relative;
  }
  section.page-hero .area-heroImage img {
    width: 100%;
    height: auto;
    -o-object-fit: fill;
    object-fit: fill;
  }
  section.page-hero .area-heroImage .copyright {
    position: absolute;
    bottom: clamp(14.2222222222px, 1.39vw, 20px);
    left: clamp(21.3333333333px, 2.08vw, 30px);
    font-size: 10px;
    font-family: var(--font-en);
  }
  
}
/*# sourceMappingURL=course.css.map */