@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&display=swap');

/*====================================================
COMMON
====================================================*/
section {
  border-bottom: 0.5rem solid #eb541d;
  &:last-of-type {
    border-bottom: none;
  }
}
@media screen and (max-width: 767px) {
  section {
    border-bottom-width: 0.25rem;
  }
}

/*====================================================
MV
====================================================*/
#mv {
  .mv__image {
    width: 100%;
  }
}

/*====================================================
PROBLEM
====================================================*/
#problem {
  padding-block: 9rem 9.4rem;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 64.3rem;
    background: linear-gradient(180deg, #fff 0%, #ffd8aa 100%);
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  .inner {
    width: 1000px;
  }
  .problem__title {
    font-size: 4rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 1.2em;
  }
  .problem__list {
    padding-inline: 2rem;
    margin-bottom: 0.8rem;
  }
  .problem__list_item {
    position: relative;
    text-align: center;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.5454545455;
    width: 24.6875%;
    white-space: nowrap;
    padding-block: 1.2em;

    &::before,
    &::after {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 237/19;
      background-image: url('../img/problem_list_item_bg.svg');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    &::before {
      top: 0;
    }
    &::after {
      bottom: 0;
      transform: rotateZ(180deg);
    }
  }
  .problem__image {
    margin-bottom: 8rem;
  }
  .problem__arrow {
    display: block;
    margin-inline: auto;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    width: 10.6rem;
    height: auto;
    aspect-ratio: 121/64;
    background-color: #eb541d;
    margin-bottom: 6rem;
  }
  .problem__sub_title {
    color: #eb541d;
    text-align: center;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.6666666667;
    margin-bottom: 1em;
  }
  .problem__text {
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.6666666667;
  }
  @media screen and (max-width: 767px) {
    padding-block: 3.2rem 4.8rem;
    overflow: hidden;
    &::after {
      height: calc(100% - 7rem);
    }
    .problem__title {
      font-size: 2.5rem;
      margin-bottom: 1em;
    }
    .problem__list {
      flex-direction: column;
      padding-inline: 0;
    }
    .problem__list_item {
      width: 44.82536232%;
      font-size: 1.43555rem;
      position: relative;
      &:nth-child(2) {
        margin-left: auto;
        margin-top: 0.5em;
      }
      &:nth-child(3) {
        margin-top: 6.8em;
        margin-left: 3em;
      }
    }
    .problem__list_item_bg {
      position: absolute;
      &:where(.problem__list_item:nth-child(1) *) {
        width: 16.35rem;
        top: calc(100% + 0.5rem);
        left: 0.5rem;
        max-width: none;
      }
      &:where(.problem__list_item:nth-child(2) *) {
        width: 11.25rem;
        top: calc(100% + 0.8rem);
        left: 2.8rem;
      }
    }
    .problem__image {
      width: 108.695652%;
      max-width: unset;
      transform: translateX(-4.347826%);
      margin-bottom: 5vw;
    }
    .problem__arrow {
      width: 5rem;
      margin-bottom: 11vw;
    }
    .problem__sub_title {
      font-size: 2rem;
      line-height: 1.25;
    }
    .problem__text {
      font-size: 1.5rem;
      line-height: 1.4666666667;
      text-align: left;
    }
  }
}

/*====================================================
SEMINAR
====================================================*/
#seminar {
  padding-block: 8rem 8.6rem;
  .common-title {
    margin-bottom: 0.78947368em;
  }
  .seminar__content_wrap {
    background-image: url('../img/seminar_content_wrap_bg.avif');
    padding-top: 38rem;
    background-size: cover;
    background-position: center;
  }
  .seminar__content {
    padding-block: 3.6rem 6.2rem;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    position: relative;
  }
  .seminar__content_text {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.6666666667;
    margin-bottom: 1.4em;
  }
  .seminar__list {
    row-gap: 1.4rem;
  }
  .seminar__list_item {
    width: 32.66666667%;
    background-color: #fff;
  }
  .seminar__list_item_image {
    width: 28.57142857%;
  }
  .seminar__list_item_title {
    flex: 1;
    display: flex;
    align-items: center;
    color: #eb541d;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
    padding-left: 1em;
  }
  .common-button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    bottom: 0;
  }
  .seminar__feature {
    padding-top: 14rem;
  }
  .common-second-title {
    margin-bottom: 3em;
  }
  .seminar__feature_list {
    flex-direction: column;
    row-gap: 5.4rem;
  }
  .seminar__feature_list_item {
    column-gap: 5%;
  }
  .seminar__feature_list_item_content {
    width: 59.2rem;
  }
  .seminar__feature_list_item_image_wrap {
    flex: 1;
  }
  .seminar__feature_list_item_title {
    justify-content: flex-start;
    align-items: center;
    padding-left: 1rem;
    position: relative;
    margin-bottom: 1.8rem;
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, #eb541d 0%, #f59904 100%);
      left: 0;
    }
    &::before {
      top: 0;
    }
    &::after {
      bottom: 0;
    }
  }
  .seminar__feature_list_item_title_index {
    flex-direction: column;
    background: linear-gradient(90deg, #eb541d 0%, #f59904 100%);
    color: #fff;
    padding-block: 1.6rem 2.2rem;
    padding-inline: 1.7rem;
    clip-path: polygon(0 0, 100% 0%, 100% calc(100% - 1.2rem), 0% 100%);
    row-gap: 1.2rem;
    margin-bottom: 1.1rem;
  }
  .seminar__feature_list_item_title_index_text {
    font-family: 'Noto Sans JP';
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }
  .seminar__feature_list_item_title_index_number {
    font-family: 'Petit Formal Script';
    font-size: 5.8rem;
    font-weight: 400;
    line-height: 0.7586206897;
  }
  .seminar__feature_list_item_title_text {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.4666666667;
    flex: 1;
    padding-left: 0.9em;
  }
  .seminar__feature_list_item_text {
    font-size: 1.8rem;
    line-height: 1.6666666667;
  }
  @media screen and (max-width: 767px) {
    padding-block: 10vw;
    .common-title {
      margin-bottom: 0.5em;
    }
    .seminar__feature_list_item_content {
      width: 100%;
    }
    .seminar__content_wrap {
      background-image: url(../img/seminar_content_wrap_bg_sp.avif);
      background-size: 100%;
      background-repeat: no-repeat;
      background-image: none;
      padding-top: 0;
    }
    .seminar__content_sp {
      background-image: url(../img/seminar_content_wrap_bg_sp.avif);
      padding-top: 0;
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
      aspect-ratio: 750/637;
      height: auto;
      display: flex;
      align-items: flex-end;
    }
    .seminar__content_sp_text {
      padding: 1em;
      background-color: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(0.5rem);
      -webkit-backdrop-filter: blur(0.5rem);
      font-size: 1.5rem;
      line-height: 1.4666666667;
    }
    .seminar__list_item {
      width: 47%;
      align-items: flex-start;
      flex-wrap: nowrap;
    }
    .seminar__list_item_title {
      font-size: 1.5rem;
      line-height: 1.2;
      height: 100%;
      padding-left: 0.7em;
    }
    .seminar__list_item_image {
      width: 35%;
    }
    .seminar__feature {
      padding-top: 18vw;
    }
    .seminar__feature_list_item_title {
      padding-left: 1vw;
      margin-bottom: 3vw;

      &::before,
      &::after {
        height: 0.17115rem;
      }
    }
    .seminar__feature_list_item_title_text {
      font-size: 1.7115rem;
      padding-left: 0.7em;
    }
    .seminar__feature_list_item_title_index {
      padding-block: 0.8rem 1.6rem;
      padding-inline: 1.1rem;
      margin-bottom: 0.5rem;
      row-gap: 2.1vw;
    }
    .seminar__feature_list_item_title_index_text {
      font-size: 1.0269rem;
    }
    .seminar__feature_list_item_title_index_number {
      font-size: 3.3089rem;
    }
    .common-second-title {
      margin-bottom: 1.8em;
    }
    .seminar__feature_list {
      row-gap: 12vw;
    }
    .seminar__feature_list_item_text {
      font-size: 1.5rem;
      line-height: 1.36667;
    }
    .seminar__feature_list_item {
      row-gap: 5vw;
    }
  }
}

/*====================================================
FEE
====================================================*/
#fee {
  padding-block: 5rem 7.2rem;
  background: linear-gradient(180deg, #fff 0%, #ffd8aa 100%);

  .common-title {
    margin-bottom: 0.6em;
  }
  .fee__intro {
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.6666666667;
    margin-bottom: 2.8em;
  }
  .fee__plans_item {
    width: 47.41666667%;
    background-color: #fff;
    text-align: center;
    padding: 2.8rem 0;
    box-shadow: 0.8rem 0.8rem 0px 0px #ffb88b;
  }
  .fee__plans_item_title {
    color: #eb541d;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.25;
    background-color: #f2f0f0;
    width: fit-content;
    margin-inline: auto;
    padding: 0.5em 1.2em;
    margin-bottom: 1em;
  }
  .fee__plans_item_text {
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.125;
  }
  .fee__plans_item_text_sub {
    font-size: 75%;
  }
  .fee__plans_item_note {
    font-size: 1.4rem;
    font-weight: 400;
    margin-top: 1em;
  }
  .fee__plans_note {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    margin-top: 2.8em;
  }
  .common-button {
    margin-top: 2em;
  }
  .common-second-title {
    margin-block: 2.4em 2.8em;
  }
  .fee__flow_list_item {
    width: 24%;
    background-color: #fff;
    position: relative;
    flex-direction: column;
    align-items: center;
    padding-block: 4.6rem 3.6rem;
    justify-content: center;
    row-gap: 2.4rem;
    box-shadow: 0.8rem 0.8rem 0px 0px #9ac4e5;
    padding-inline: 1.6rem;
    &:where(:has(> *:nth-child(3))) {
      justify-content: flex-start;
    }
  }
  .fee__flow_list_item_index {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(160deg, #70d0f3 1.02%, #083286 96.16%);
    color: #fff;
    font-size: 1.8rem;
    padding: 0.4em 2em 0.4em 1.3em;
    clip-path: polygon(0% 0%, calc(100% - 1em) 0, 100% 50%, calc(100% - 1em) 100%, 0% 100%);
    padding-block: 0.2em;
    white-space: nowrap;
  }
  .fee__flow_list_item_index_number {
    font-size: 1.66666667em;
    font-weight: 500;
    line-height: 1;
  }
  .fee__flow_list_item_title {
    color: #5e97c5;
    text-align: center;
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.2857142857;
    width: 100%;
  }
  .fee__flow_list_item_text {
    font-size: 1.6rem;
    line-height: 1.5;
  }
  @media screen and (max-width: 767px) {
    padding-block: 6vw 13vw;
    .fee__intro {
      text-align: left;
      font-size: 1.5rem;
      line-height: 1.4666666667;
      margin-bottom: 1em;
    }
    .fee__plans {
      flex-direction: column;
      row-gap: 5vw;
      width: 95%;
      margin-inline: auto;
    }
    .fee__plans_item {
      width: 100%;
      padding: 3.4vw 0;
      box-shadow: 0.4rem 0.4rem 0px 0px #ffb88b;
    }
    .fee__plans_item_title {
      font-size: 1.74835rem;
      padding-inline: 0.8em;
    }
    .fee__plans_item_text {
      font-size: 2.3311rem;
    }
    .fee__plans_item_note {
      font-size: 1.01985rem;
    }
    .fee__plans_note {
      font-size: 1rem;
      margin-top: 1.8em;
    }
    .fee__flow_list {
      flex-direction: column;
      row-gap: 2.8rem;
    }
    .fee__flow_list_item {
      width: 100%;
      padding-block: 2rem;
      row-gap: 1rem;
      align-items: flex-start;
      box-shadow: 0.4rem 0.4rem 0px 0px #9ac4e5;
    }
    .common-second-title {
      margin-block: 2em;
    }
    .fee__flow_list_item_index {
      font-size: 0.9rem;
    }
    .fee__flow_list_item_title {
      font-size: 1.8rem;
    }
    .fee__flow_list_item_text {
      font-size: 1.4rem;
    }
  }
}

/*====================================================
CASE
====================================================*/
#case {
  padding-block: 6.2rem 13.8rem;
  .common-title {
    margin-bottom: 1.3em;
  }
  .case__slider_wrapper {
    position: relative;
  }
  .case__slider_item {
    width: 100rem;
    margin-inline: 4.6rem;
    border: 1px solid #bab8b8;
    border-radius: 0.4rem;
    overflow: hidden;
    height: auto;
  }
  .case__slider_item_title {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.4;
    background: #fff1e1;
    padding: 0.6em 0.4em 0.6em 1.7em;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      display: block;
      width: 1em;
      height: 100%;
      background-color: #eb541d;
      left: 0;
      top: 0;
    }
  }
  .case__slider_item_content {
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 1.8rem 3.4rem 3.2rem;
  }
  .case__slider_item_content_summary {
    width: 37.41935484%;
    border-right: 1px solid #bab8b8;
    padding-right: 1.9rem;
  }
  .case__slider_item_content_impression {
    width: 60%;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding-top: 2rem;
    column-gap: 2rem;
  }
  .case__slider_item_content_summary_list {
    row-gap: 1.7rem;
    grid-template-columns: auto 1fr;
    column-gap: 1.6rem;
    align-items: flex-start;

    &:where(:first-child) {
      padding-block: 2rem;
    }
  }
  .case__slider_item_content_summary_list_item {
    justify-content: flex-start;
    align-items: flex-start;
    column-gap: 1.4rem;
    width: 100%;
  }
  .case__slider_item_content_summary_list_item_title {
    color: #eb541d;
    font-weight: 500;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 2px;
      background-color: #eb541d;
      left: 0;
      bottom: 0;
    }
  }
  .case__slider_item_content_summary_list_item_text {
    line-height: 1.3;
  }
  .case__slider_item_content_impression_text {
    font-size: 1.8rem;
    line-height: 1.55556;
    flex: 1;
  }
  .case__slider_item_content_impression_image {
    width: 12.724014%;
  }
  .swiper-button-prev {
    left: calc(50% - 54.4rem);
    transform: translateX(-50%);
  }
  .swiper-button-next {
    right: calc(50% - 54.4rem);
    transform: translateX(50%) rotate(180deg);
  }
  .swiper-button-prev,
  .swiper-button-next {
    width: 5.2rem;
    height: auto;
    aspect-ratio: 1/1;
    background-color: #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;

    &::after {
      content: '';
      background-image: url(../img/case_slider_button_icon.svg);
      aspect-ratio: 5/4;
      width: 39%;
      height: auto;
      background-size: 100%;
      background-repeat: no-repeat;
    }
  }
  .swiper-pagination {
    bottom: auto;
    top: calc(100% + 2.8rem);
  }
  .swiper-pagination-bullet {
    border-radius: 0;
    width: 4.4rem;
    height: 0.4rem;
    background-color: #d9d9d9;
  }
  .swiper-pagination-bullet-active {
    background-color: #000;
  }

  .case__company_slider_item {
    width: 18.1rem;
    margin-right: 5.8rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    row-gap: 0.5rem;
  }
  .common-second-title {
    margin-bottom: 1.2em;
    margin-top: 5.2em;
  }
  .case__company_slider_wrapper {
    transition-timing-function: linear;
  }
  .case__company_slider_item_image {
    aspect-ratio: 181/117;
  }
  .case__company_slider_item_name {
    font-size: 1.4rem;
  }
  @media (max-width: 1200px) {
    .swiper-button-prev {
      transform: scale(0.8);
      left: -0.5vw;
    }
    .swiper-button-next {
      right: -0.5vw;
      transform: rotate(180deg) scale(0.8);
    }
  }
  @media screen and (max-width: 767px) {
    padding-block: 9vw 18vw;
    .common-title {
      margin-bottom: 1.6em;
    }
    .case__slider_item {
      width: 84.53333333%;
    }
    .case__company_slider_item {
      width: 16.6059rem;
      margin-right: 1rem;
    }
    .case__company_slider_item_name {
      font-size: 1.28445rem;
    }
    .case__slider_item_title {
      font-size: 1.9044rem;

      &::before {
        width: 0.8em;
      }
    }
    .case__slider_item_content {
      flex-direction: column;
      padding: 4vw 6% 5vw;
    }
    .case__slider_item_content_summary {
      width: 100%;
      padding-right: 0;
      border-right: none;
      border-bottom: 1px solid #bab8b8;
      position: relative;
    }
    .case__slider_item_content_summary_image {
      position: absolute;
      left: 0;
      top: 0;
      width: 56%;
      aspect-ratio: 1/0.74;
      object-fit: contain;
    }
    .case__slider_item_content_summary_list {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      row-gap: 1.6vw;
      padding-block: 0 3.5vw;
    }
    .case__slider_item_content_summary_list_item_title {
      &::after {
        bottom: -0.3em;
      }
      margin-bottom: 0.2em;
    }
    .case__slider_item_content_summary_list_item_title,
    .case__slider_item_content_summary_list_item_text {
      width: 100%;
      font-size: 1.2696rem;
      &:where(.case__slider_item_content_summary_list:not(:first-child) *) {
        &:where(:nth-child(-n + 4)) {
          width: 40%;
        }
      }
    }
    .case__slider_item_content_impression {
      width: 100%;
      padding-top: 5vw;
    }
    .case__slider_item_content_impression_image {
      display: none;
    }
    .case__slider_item_content_impression_text {
      font-size: 1.3rem;
    }
    .swiper-button-prev {
      transform: scale(0.6);
      left: -1.2vw;
    }
    .swiper-button-next {
      right: -1.2vw;
      transform: rotate(180deg) scale(0.6);
    }
    .swiper-pagination {
      top: calc(100% + 1vw);
    }
    .swiper-pagination-bullet {
      width: 6vw;
      height: 0.2rem;
    }
    .common-second-title {
      margin-top: 24vw;
    }
  }
}

/*====================================================
FAQ
====================================================*/
#faq {
  padding-block: 5rem 18.8rem;
  background: linear-gradient(180deg, #fff 0%, #ffd8aa 100%);
  .common-title {
    margin-bottom: 1.3em;
  }
  .faq__list {
    flex-direction: column;
    row-gap: 1.2rem;
  }
  .faq__list_item {
    background-color: #fff;
    border-radius: 0.6rem;
  }
  .faq__list_item_question {
    background-color: #5e97c5;
    color: #fff;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.25;
    padding: 0.45em 0.5em;
    cursor: pointer;
    position: relative;
    padding-right: 2rem;
    display: flex;
    align-items: flex-start;
    column-gap: 0.5em;
    overflow: hidden;
    border-radius: 0.6rem;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
  .faq__list_item_question_icon {
    width: 1.04166667em;
    height: auto;
    aspect-ratio: 1 / 1;
    position: absolute;
    right: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
    &::before,
    &::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      translate: -50% -50%;
      margin: auto 0;
      background-color: #fff;
      width: 0.83333333em;
      height: 0.3rem;
      transition: transform 0.3s;
    }
    &::before {
      transform: rotate(90deg);
    }
    &:where(.is-open *) {
      &::before {
        transform: none;
      }
    }
  }
  .faq__list_item_question_q {
    width: 1.5em;
    height: auto;
    aspect-ratio: 1 / 1;
    text-align: center;
    color: #fff;
    border-radius: 0.6rem;
    background: #eb541d;
    flex-shrink: 0;
  }
  .faq__list_item_question_text {
    padding-right: 0.6em;
    transform: translateY(0.1em);
    margin-bottom: 0.2em;
  }
  .faq__list_item_answer {
    display: grid;
    transition: grid-template-rows 0.5s;
    grid-template-rows: 0fr;
    &.is-open {
      grid-template-rows: 1fr;
    }
  }
  .faq__list_item_answer_inner {
    overflow: hidden;
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
  }
  .faq__list_item_answer_text {
    padding-inline: 3.4em 2.2em;
    padding-block: 1.2em;
    color: #000;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6666666667;
  }
  @media screen and (max-width: 767px) {
    padding-bottom: 29vw;
    .faq__list_item {
      border-radius: 0.3rem;
    }
    .faq__list_item_question {
      font-size: 1.7rem;
      padding: 0.25em 0.3em;
      column-gap: 0.3em;
      border-radius: 0.3rem;
    }
    .faq__list_item_question_icon {
      right: 0.2em;
      &::before,
      &::after {
        width: 1rem;
        height: 0.15rem;
      }
    }
    .faq__list_item_answer_inner {
      border-bottom-left-radius: 0.3rem;
      border-bottom-right-radius: 0.3rem;
    }
    .faq__list_item_answer_text {
      padding-inline: 0.8em;
      padding-block: 0.3em 0.5em;
      font-size: 1.5rem;
      line-height: 1.4666666667;
    }
  }
}