@charset "utf-8";
@import "variables.css";
/*
Description: コンポーネントのスタイルシート
Author: Quail,inc.
Version: 1.0.0
*/

/*----------------------------------------
  c-heading
----------------------------------------*/

.c-heading {
  width: fit-content;
  height: 133px;
  font-size: 50px;
  font-weight: 800;
  color: var(--black);
  text-align: center;
  position: relative;
  margin: 0 auto;
  padding-top: 6px;
  padding-inline: 80px;
  white-space: nowrap;
}

.c-heading::before,
.c-heading::after {
  content: "";
  display: block;
  width: 30px;
  height: 133px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 0;
}

.c-heading--en {
  font-family: var(--fontJost);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.c-heading--small {
  font-size: 45px;
}

.c-heading::before {
  background-image: url("../../img/renewal/common/decoration_title_left.svg");
  left: 0;
}

.c-heading::after {
  background-image: url("../../img/renewal/common/decoration_title_right.svg");
  right: 0;
}

.c-heading__sub {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--red);
  margin-bottom: 11px;
}

.c-heading__sub--en {
  font-family: var(--fontJost);
  font-weight: 500;
}

.c-heading__small-text {
  display: block;
  font-size: 35px;
  line-height: 1;
}

.c-heading-primary {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--black);
}

.c-heading-primary__label {
  display: block;
  width: fit-content;
  margin-bottom: 8px;
  padding: 6px 20px;
  border-radius: 26px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--white);
  background-color: var(--red);
}

.c-heading-primary strong {
  color: var(--red);
}

.c-heading-secondary {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--black);
}

.c-heading-secondary::after {
  content: "";
  display: block;
  width: 50px;
  height: 6px;
  margin: 24px auto 0;
  background-color: var(--red);
}

.c-heading-line {
  display: flex;
  gap: 22px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
}

.c-heading-line::before {
  content: "";
  width: 6px;
  height: auto;
  background-color: var(--red);
}

/*----------------------------------------
  c-button
----------------------------------------*/

.c-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  width: 100%;
  max-width: 280px;
  position: relative;
  background-color: var(--black);
  border-radius: 6px;
  color: var(--white);
  padding-right: 70px;
}

.c-button__arrow {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--red);
  border-radius: 6px;
  overflow: hidden;
}

.c-button__arrow::before {
  content: "";
  width: 12px;
  height: 10px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("../../img/renewal/common/icon_arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  transition: transform 0.3s ease;
}

.c-decoration {
  position: relative;
}

.c-decoration::before {
  content: "";
  display: block;
  background-image: url("../../img/renewal/common/decoration_symbol.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
}

.c-decoration[data-decoration="top_about1"]::before {
  width: 340px;
  height: 340px;
  top: -111px;
  right: -132px;
}

.c-decoration[data-decoration="top_about2"]::before {
  width: 385px;
  height: 385px;
  top: -158px;
  left: -97px;
}

.c-decoration[data-decoration="top_plan"]::before {
  width: 389px;
  height: 389px;
  top: 43px;
  right: -133px;
}

.c-decoration[data-decoration="top_voice"]::before {
  width: 340px;
  height: 340px;
  top: -121px;
  left: -183px;
}

.c-decoration[data-decoration="top_faq"]::before {
  width: 340px;
  height: 340px;
  top: -203px;
  right: -157px;
}

.c-decoration[data-decoration="top_sns"]::before {
  width: 340px;
  height: 340px;
  top: -166px;
  left: -203px;
}

.c-decoration[data-decoration="overview-training"]::before {
  width: 380px;
  height: 380px;
  top: -255px;
  left: -113px;
}

.c-decoration[data-decoration="overview-teacher"]::before {
  width: 389px;
  height: 389px;
  bottom: -88px;
  right: -118px;
}

.c-decoration[data-decoration="overview-teacher-sp"]::before {
  width: 240px;
  height: 240px;
  top: -54px;
  right: -98px;
}

.c-decoration[data-decoration="overview-material"]::before {
  width: 340px;
  height: 340px;
  bottom: -134px;
  left: -183px;
}

.c-decoration[data-decoration="about-intro"]::before {
  width: 380px;
  height: 380px;
  top: -255px;
  left: -113px;
}

.c-decoration[data-decoration="about-global"]::before {
  width: 389px;
  height: 389px;
  bottom: -75px;
  right: -118px;
}

.c-decoration[data-decoration="about-voice"]::before {
  width: 340px;
  height: 340px;
  bottom: -30px;
  left: -224px;
}

.c-decoration[data-decoration="about-faq"]::before {
  width: 340px;
  height: 340px;
  top: -203px;
  right: -143px;
}

.c-decoration--sp-only::before {
  display: none;
}

.c-slider-pagination {
  width: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 37px;
  gap: 12px;
}

.c-slider-pagination .swiper-pagination-bullet {
  margin: 0 !important;
}

.c-slider-pagination .swiper-pagination-bullet-active {
  width: 12px;
  height: 12px;
  background: var(--red);
}

/*----------------------------------------
  hover_animation
----------------------------------------*/

@media (hover: hover) {
  .c-button:hover .c-button__arrow::before {
    animation: arrowLoop 0.3s forwards;
  }
}

@keyframes arrowLoop {
  0% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  49% {
    transform: translate(150%, -50%);
    opacity: 1;
  }
  50% {
    transform: translate(-250%, -50%);
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

/*----------------------------------------
  sp
----------------------------------------*/

@media screen and (max-width: 520px) {
  .c-heading {
    height: 73px;
    font-size: 24px;
    padding-top: 5px;
    padding-inline: 42px;
  }

  .c-heading::before,
  .c-heading::after {
    width: 16px;
    height: 73px;
  }

  .c-heading::before {
    background-image: url("../../img/renewal/common/decoration_title_left_sp.svg");
    left: 0;
  }

  .c-heading::after {
    background-image: url("../../img/renewal/common/decoration_title_right_sp.svg");
    right: 0;
  }

  .c-heading__sub {
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
  }

  .c-heading__small-text {
    font-size: 18px;
  }

  .c-heading-primary {
    font-size: 20px;
  }

  .c-heading-primary__label {
    padding: 5px 20px;
    font-size: 12px;
  }

  .c-heading-secondary {
    font-size: 19px;
  }

  .c-heading-secondary::after {
    width: 50px;
    height: 5px;
    margin: 15px auto 0;
  }

  .c-heading-line {
    gap: 15px;
    font-size: 20px;
    line-height: 1.45;
  }

  .c-heading-line::before {
    width: 4px;
  }

  .c-decoration[data-decoration="top_about1"]::before {
    width: 180px;
    height: 180px;
    top: -25px;
    right: -68px;
  }

  .c-decoration[data-decoration="top_about2"]::before {
    width: 180px;
    height: 180px;
    top: -54px;
    left: -36px;
  }

  .c-decoration[data-decoration="overview-training"]::before {
    content: "";
    width: 215px;
    height: 215px;
    top: -136px;
    left: -64px;
  }

  .c-decoration[data-decoration="about-intro"]::before {
    content: "";
    width: 215px;
    height: 215px;
    top: -136px;
    left: -64px;
  }

  .c-decoration[data-decoration="about-global-sp"]::before {
    width: 198px;
    height: 198px;
    top: 83px;
    right: -84px;
  }

  .c-decoration[data-decoration="about-voice"]::before {
    width: 198px;
    height: 198px;
    bottom: 71px;
    left: -128px;
  }

  .c-decoration[data-decoration="about-faq"]::before {
    width: 198px;
    height: 198px;
    top: 4px;
    right: -60px;
  }

  .c-decoration--pc-only::before {
    display: none;
  }

  .c-decoration--sp-only::before {
    display: block;
  }

  .c-slider-pagination {
    margin-top: 21px;
    gap: 8px;
  }

  .c-slider-pagination .c-slider-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
  }

  .c-slider-pagination .swiper-pagination-bullet-active {
    width: 10px;
    height: 10px;
  }

  /*----------------------------------------
  l-cta_sp
----------------------------------------*/

  .l-cta {
    padding: 60px 45px;
  }

  .l-cta__content {
    gap: 20px;
    background-color: var(--red);
    padding: 16px 20px 29px;
    border-radius: 8px;
  }

  .l-cta__sub-title {
    font-size: 14px;
  }

  .l-cta__sub-title strong {
    font-size: 22px;
  }

  .l-cta__sub-title strong span {
    font-size: 16px;
  }

  .l-cta__title {
    max-width: 200px;
  }

  .l-cta__text {
    margin-top: 17px;
    font-size: 14px;
  }

  .l-cta__text br {
    display: none;
  }

  .l-cta__accent-text {
    font-size: 12px;
  }

  .l-cta__accent-text::before,
  .l-cta__accent-text::after {
    height: 25px;
  }

  .l-cta__accent-text::before {
    margin-right: 16px;
  }

  .l-cta__accent-text::after {
    margin-left: 5px;
  }

  .l-cta__button {
    margin-top: 11px;
    padding: 5px 5px 5px 21px;
    border-radius: 6px;
    gap: 29px;
  }

  .l-cta__button-text {
    font-size: 15px;
    line-height: 1.65;
    padding-left: 40px;
  }

  .l-cta__button-text::before {
    width: 25px;
    height: 18px;
  }

  .l-cta__button-text span {
    display: block;
    background: linear-gradient(transparent 60%, var(--yellow) 40%);
  }

  .l-cta__button-arrow {
    width: 29px;
    height: 80px;
    border-radius: 4px;
  }

  .l-cta__button-arrow::before {
    width: 10px;
    height: 7px;
  }

  .l-cta__tel-label {
    font-size: 12px;
    margin: 27px auto 0;
    padding: 5px 27px 7px;
    border-radius: 36px;
  }

  .l-cta__tel-num {
    margin: 14px auto 0;
    padding-left: 36px;
    font-size: 30px;
  }

  .l-cta__tel-num::before {
    width: 27px;
    height: 27px;
  }

  .l-cta__tel-text {
    font-size: 10px;
  }
}