@charset "UTF-8";
/* ==============================
    トップページ
============================== */
.inner {
  padding-inline: var(--innerPadding);
}

.sec {
  padding-block: 85rem 150rem;
}
.sec .sec__ttl {
  padding-left: var(--innerPadding);
  margin-bottom: 60rem;
}
.sec .sec__ttl span {
  line-height: 1;
  display: block;
}
.sec .sec__ttl .sec__ttl--en {
  font-size: 40rem;
  font-weight: 700;
  margin-bottom: 25rem;
}
.sec .sec__ttl .sec__ttl--jp {
  font-size: 24rem;
  font-weight: 500;
}

.btn--black a {
  text-align: center;
  color: #fff;
  font-feature-settings: "palt" 1;
  display: block;
  aspect-ratio: 240/50;
  align-content: center;
  position: relative;
  background-color: var(--buttonColor);
  transition: color 0.3s;
}
.btn--black a span {
  position: relative;
  z-index: 2;
}
.btn--black a::before {
  content: "";
  width: 7rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--mainColor);
  transition: width 0.3s;
}
.btn--black a::after {
  content: "";
  width: 14rem;
  aspect-ratio: 1/1;
  position: absolute;
  top: calc(50% - 7rem);
  right: 12.5%;
  border-top: 1rem solid #fff;
  border-right: 1rem solid #fff;
  transform: rotate(45deg);
  z-index: 2;
  transition: border-color 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  .btn--black a:hover {
    color: var(--buttonColor);
  }
  .btn--black a:hover::before {
    width: 100%;
  }
  .btn--black a:hover::after {
    border-color: var(--buttonColor);
  }
}
@media screen and (max-width: 768px) {
  .sec {
    padding-block: 100rem 110rem;
  }
  .sec .sec__ttl .sec__ttl--en {
    margin-bottom: 15rem;
  }
}
.slider__custom .slick-list {
  padding-left: var(--innerPadding);
}
.slider__custom .slick-track {
  display: flex;
}
.slider__custom .slick-track::before, .slider__custom .slick-track::after {
  display: none;
}
.slider__custom .slick-slide a {
  display: block;
  overflow: hidden;
}
.slider__custom .slick-slide a img {
  transition: transform 0.3s;
}

.custom__arrow {
  display: flex;
  column-gap: 15rem;
  position: absolute;
  top: 90rem;
  right: 320rem;
}
.custom__arrow button {
  font-size: 0;
  width: 55rem;
  aspect-ratio: 1/1;
  border: 1rem solid var(--text);
  border-radius: 50%;
}
.custom__arrow button::before {
  content: "";
  width: 15rem;
  aspect-ratio: 1/1;
  position: absolute;
  top: calc(50% - 7.5rem);
  border-top: 1rem solid var(--text);
  border-left: 1rem solid var(--text);
  transition: transform 0.3s;
}
.custom__arrow button:where(.slick-prev)::before {
  left: 23.75rem;
  transform: rotate(-45deg);
}
.custom__arrow button:where(.slick-next)::before {
  right: 23.75rem;
  transform: rotate(135deg);
}

@media (hover: hover) and (pointer: fine) {
  .slider__custom .slick-slide a:hover img {
    transform: scale(1.2);
  }
  .custom__arrow button:hover:where(.slick-prev)::before {
    transform: translateX(-7rem) rotate(-45deg);
  }
  .custom__arrow button:hover:where(.slick-next)::before {
    transform: translateX(7rem) rotate(135deg);
  }
}
@media screen and (max-width: 768px) {
  .custom__arrow {
    right: 40rem;
  }
  .custom__arrow button {
    width: 70rem;
    border-width: 2rem;
  }
  .custom__arrow button::before {
    border-width: 2rem;
  }
  .custom__arrow button:where(.slick-prev)::before {
    left: 30rem;
  }
  .custom__arrow button:where(.slick-next)::before {
    right: 30rem;
  }
}
/* ------------------------------
    mv
------------------------------ */
#mv .mv__wrap {
  position: relative;
}
#mv .mv__wrap .mv__title {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: #fff;
}
#mv .mv__wrap .mv__title img {
  height: 100%;
}
#mv .mv__wrap .mv__slider .slick-dots {
  display: flex;
  column-gap: 15rem;
  position: absolute;
  left: 455rem;
  bottom: 40rem;
}
#mv .mv__wrap .mv__slider .slick-dots li button {
  font-size: 0;
  width: 80rem;
  height: 3rem;
  background-color: #fff;
  transition: background-color 0.3s;
}
#mv .mv__wrap .mv__slider .slick-dots li:where(.slick-active) button {
  background-color: var(--text);
}

@media (hover: hover) and (pointer: fine) {
  #mv .mv__wrap .mv__slider .slick-dots li button:hover {
    background-color: var(--text);
  }
}
@media screen and (max-width: 768px) {
  #mv .mv__wrap .mv__title {
    position: static;
    padding: 70rem 30rem 35rem;
  }
  #mv .mv__wrap .mv__title img {
    height: auto;
  }
  #mv .mv__wrap .mv__slider .mv__slider-card:not(:first-of-type) {
    display: none;
  }
}
/* ------------------------------
    nav
------------------------------ */
#nav {
  background-color: var(--mainColor);
}
#nav .nav__list {
  display: grid;
  grid-template-columns: repeat(3, 410rem);
  justify-content: center;
  gap: 80rem;
}
#nav .nav__list .nav__list-item a {
  font-size: 20rem;
  text-align: center;
  line-height: 36rem;
  display: block;
  height: 160rem;
  align-content: center;
}
#nav .nav__list .nav__list-item a .en {
  font-size: 26rem;
  font-weight: 700;
}
#nav .nav__list .nav__list-item a .arrow {
  display: block;
  width: 14rem;
  aspect-ratio: 1/1;
  border-left: 1rem solid var(--text);
  border-bottom: 1rem solid var(--text);
  transform: rotate(-45deg);
  margin: 5rem auto 0;
  transition: transform 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  #nav .nav__list .nav__list-item a:hover .arrow {
    transform: translateY(10rem) rotate(-45deg);
  }
}
@media screen and (max-width: 768px) {
  #nav {
    display: none;
  }
}
/* ------------------------------
    intro
------------------------------ */
#intro .intro__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
#intro .div01 {
  grid-area: 1/1/4/6;
  align-content: center;
  position: relative;
  padding-inline: 65rem;
  background-color: var(--accentYellow);
}
#intro .div01 img {
  position: relative;
  z-index: 2;
}
#intro .div01::before {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--mainColor);
  z-index: 1;
  transition: width 0.3s;
}
#intro .div02 {
  grid-area: 4/1/7/6;
}
#intro .div03 {
  grid-area: 1/6/2/7;
}
#intro .div04 {
  grid-area: 2/6/5/7;
  background-color: var(--mainColor);
}
#intro .div05 {
  grid-area: 5/6/6/7;
}
#intro .div06 {
  grid-area: 6/6/7/7;
  background-color: var(--accentYellow);
}
#intro .div07 {
  grid-area: 1/7/4/9;
}
#intro .div08 {
  grid-area: 4/7/5/8;
}
#intro .div09 {
  grid-area: 5/7/7/10;
}
#intro .div10 {
  grid-area: 4/8/5/10;
  background-color: var(--accentGray);
}
#intro .div11 {
  grid-area: 1/9/3/10;
}
#intro .div12 {
  grid-area: 3/9/4/10;
  background-color: var(--accentYellow);
}
#intro .div13 {
  grid-area: 1/10/2/11;
  background-color: var(--accentGray);
}
#intro .div14 {
  grid-area: 2/10/7/13;
}
#intro .div15 {
  grid-area: 1/11/2/13;
  background-color: var(--accentYellow);
}

@media (hover: hover) and (pointer: fine) {
  #intro .div01:hover::before {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #intro .intro__grid {
    display: flex;
    flex-wrap: wrap;
  }
  #intro .div03, #intro .div05, #intro .div06, #intro .div08, #intro .div09, #intro .div10, #intro .div11, #intro .div12, #intro .div13, #intro .div15 {
    display: none;
  }
  #intro .div01 {
    order: 3;
    padding: 0;
  }
  #intro .div02 {
    width: 53.3333333333%;
    order: 1;
  }
  #intro .div04 {
    order: 5;
    width: 38%;
  }
  #intro .div07 {
    width: 62%;
    order: 4;
  }
  #intro .div14 {
    width: 46.6666666667%;
    order: 2;
  }
}
/* ------------------------------
    voice
------------------------------ */
#voice {
  position: relative;
  background: url(../image/index/voice_bg.png) center center/cover;
}
#voice .voice__slider--card .voice__slider--lead {
  font-size: 24rem;
  font-weight: 500;
  line-height: 1.4;
  font-feature-settings: "palt" 1;
  position: absolute;
  left: 0;
  bottom: 60rem;
}
#voice .voice__slider--card .voice__slider--lead span {
  display: block;
  width: fit-content;
  padding-inline: 10rem;
  background-color: #fff;
}
#voice .voice__slider--card .voice__slider--lead span + span {
  margin-top: 10rem;
}
#voice .voice__slider .slick-list {
  padding-bottom: 8rem;
}
#voice .voice__slider .slick-track {
  column-gap: 45rem;
}
#voice .voice__slider .slick-track .slick-slide {
  width: 340rem;
  position: relative;
  box-shadow: 8rem 8rem 0 var(--mainColor);
}

@media screen and (max-width: 768px) {
  #voice .voice__slider--card .voice__slider--lead {
    font-size: 30rem;
  }
  #voice .voice__slider--card .voice__slider--lead span + span {
    margin-top: 15rem;
  }
  #voice .voice__slider .slick-track {
    column-gap: 70rem;
  }
  #voice .voice__slider .slick-track .slick-slide {
    width: 440rem;
  }
}
/* ------------------------------
    lab
------------------------------ */
#lab {
  position: relative;
  background-color: var(--mainColor);
}
#lab .lab__slider--card .lab__slider--img {
  overflow: hidden;
  margin-bottom: 30rem;
}
#lab .lab__slider--card .lab__slider--lead {
  font-size: 30rem;
  font-weight: 700;
  line-height: 1.5;
}
#lab .lab__slider .slick-track {
  column-gap: 75rem;
}
#lab .lab__slider .slick-track .slick-slide {
  width: 585rem;
  position: relative;
}

@media screen and (max-width: 768px) {
  #lab .lab__slider .slick-track {
    column-gap: 60rem;
  }
  #lab .lab__slider .slick-track .slick-slide {
    width: 590rem;
  }
}
/* ------------------------------
    curriculum
------------------------------ */
#curriculum {
  position: relative;
  padding-bottom: 65rem;
  border-bottom: 2rem solid var(--borderColor);
}
#curriculum .curriculum__bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../image/index/curriculum_bg.png) top right/auto 100% no-repeat;
  z-index: -1;
}
#curriculum .btn--black {
  padding-left: var(--innerPadding);
  margin-top: 310rem;
}
#curriculum .btn--black a {
  font-size: 20rem;
  width: 240rem;
}

@media screen and (max-width: 768px) {
  #curriculum {
    padding-block: 100rem;
  }
  #curriculum .curriculum__bg {
    height: 538rem;
    top: 150rem;
    background: url(../image/index/curriculum_bg_sp.png) bottom left/100% auto no-repeat;
  }
  #curriculum .btn--black {
    margin-top: 400rem;
  }
  #curriculum .btn--black a {
    font-size: 24rem;
    width: 283rem;
  }
}
/* ------------------------------
    faq
------------------------------ */
#faq {
  padding-top: 100rem;
}
#faq .faq__title {
  color: var(--accentGray);
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  column-gap: 45rem;
  margin-bottom: 85rem;
}
#faq .faq__title .faq__title--en {
  font-size: 120rem;
  text-box: var(--textTrim);
  border-right: 3rem solid var(--buttonColor);
  padding-right: 45rem;
}
#faq .faq__title .faq__title--jp {
  font-size: 32rem;
}
#faq .faq__grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin-bottom: 55rem;
}
#faq .faq__grid .box01 {
  width: 352rem;
}
#faq .faq__grid .box02 {
  font-size: 36rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mainColor);
  width: 40.4462242563%;
  height: 172rem;
  position: absolute;
  top: 0;
  left: 21.2814645309%;
}
@media screen and (max-width: 768px) {
  #faq .faq__grid .box02 {
    height: auto;
    position: static;
  }
}
#faq .faq__grid .box03 {
  width: 33.7528604119%;
  height: 227rem;
  position: absolute;
  top: 50%;
  left: 21.2814645309%;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  #faq .faq__grid .box03 {
    height: auto;
    position: static;
    transform: none;
  }
}
#faq .faq__grid .box04 {
  font-size: 35rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mainColor);
  width: 28.7185354691%;
  height: 173rem;
  position: absolute;
  bottom: 0;
  left: 21.2814645309%;
}
@media screen and (max-width: 768px) {
  #faq .faq__grid .box04 {
    height: auto;
    position: static;
  }
}
#faq .faq__grid .box05 {
  font-size: 30rem;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--buttonColor);
  width: 16.533180778%;
  height: 172rem;
  position: absolute;
  top: 0;
  left: 62.8146453089%;
}
@media screen and (max-width: 768px) {
  #faq .faq__grid .box05 {
    height: auto;
    position: static;
  }
}
#faq .faq__grid .box06 {
  font-size: 35rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mainColor);
  width: 23.2265446224%;
  height: 227rem;
  position: absolute;
  top: 50%;
  left: 56.2356979405%;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  #faq .faq__grid .box06 {
    height: auto;
    position: static;
    transform: none;
  }
}
#faq .faq__grid .box07 {
  font-size: 36rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--buttonColor);
  width: 48.8558352403%;
  height: 173rem;
  position: absolute;
  bottom: 0;
  left: 51.1441647597%;
}
@media screen and (max-width: 768px) {
  #faq .faq__grid .box07 {
    height: auto;
    position: static;
  }
}
#faq .faq__grid .box08 {
  width: 340rem;
}
#faq .btn--black a {
  font-size: 26rem;
  width: 322rem;
  margin: auto;
}

@media screen and (max-width: 768px) {
  #faq .faq__title {
    margin-bottom: 60rem;
  }
  #faq .faq__title .faq__title--en {
    font-size: 100rem;
    text-box: unset;
  }
  #faq .faq__title .faq__title--jp {
    font-size: 30rem;
    line-height: 1.2666666667;
  }
  #faq .faq__grid {
    flex-wrap: wrap;
    gap: 30rem;
    margin-bottom: 60rem;
  }
  #faq .faq__grid .box01 {
    width: 38.1355932203%;
    order: 1;
  }
  #faq .faq__grid .box02 {
    font-size: 32rem;
    width: 56.7796610169%;
    height: 180rem;
    order: 2;
  }
  #faq .faq__grid .box03 {
    width: 43.2203389831%;
    order: 6;
  }
  #faq .faq__grid .box04 {
    font-size: 30rem;
    width: 51.6949152542%;
    height: 227rem;
    order: 7;
  }
  #faq .faq__grid .box05 {
    font-size: 26rem;
    width: 43.2203389831%;
    height: 100rem;
    order: 5;
  }
  #faq .faq__grid .box06 {
    font-size: 30rem;
    width: 51.6949152542%;
    height: 100rem;
    order: 4;
  }
  #faq .faq__grid .box07 {
    font-size: 32rem;
    width: 100%;
    height: 130rem;
    order: 8;
  }
  #faq .faq__grid .box08 {
    width: 56.7796610169%;
    position: absolute;
    top: 210rem;
    right: 0;
    order: 3;
  }
  #faq .btn--black a {
    font-size: 24rem;
    width: 283rem;
  }
}/*# sourceMappingURL=style_2026.css.map */