.mv {
  position: relative;
  width: 100%;
  overflow-x: clip;
  padding: calc(var(--vw) * 400) 0 calc(var(--vw) * 60) 0;

  @media screen and (min-width: 769px) {
    padding: calc(var(--vw) * 260) 0 calc(var(--vw) * 280) 0;
  }
}

:where(.mv) {
  .mv__text-wrap {
    display: flex;
    width: 100%;
    z-index: 1;
    position: relative;
    justify-content: space-between;
    gap: 19px;

    @media screen and (max-width: 768px) {
      flex-direction: column;
      padding-left: calc(var(--vw) * 23);
      gap: 28px;
    }
  }

  .mv__slide-wrapper {
    opacity: 0;
    transition: opacity 0.6s linear;
    &.is-shown {
      opacity: 1;
    }
  }

  .mv__lead {
    font-weight: 600;
    font-size: calc(var(--rem) * 33);
    letter-spacing: 4.95px;
    line-height: 55px;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 38);
      letter-spacing: 6.46px;
      line-height: 63px;
      margin-top: calc(var(--vw) * 71);
      margin-bottom: 41px;
    }
  }

  .mv__lead-wrap {
    display: flex;
    flex-direction: column;

    @media screen and (min-width: 769px) {
      padding-left: calc(var(--vw) * 166);
    }
  }

  .mv__cta-wrap {
    display: flex;
    gap: 18px;
  }

  .mv__cta {
    width: calc(var(--vw) * 249);
  }

  .mv__sub-lead {
    font-weight: 600;
    font-size: calc(var(--rem) * 17);
    letter-spacing: 2.04px;
    line-height: 33px;
    margin-bottom: 9px;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 18);
      letter-spacing: 2.16px;
      line-height: 35px;
      padding-right: calc(var(--vw) * 170);
      margin-bottom: 10px;
    }
  }

  .mv__text {
    font-family: "century-gothic", sans-serif;
    font-style: italic;
    font-weight: bold;
    font-size: calc(var(--rem) * 10);
    letter-spacing: 1.2px;
  }

  .mv__bg-text {
    position: absolute;
    z-index: -1;
    top: calc(var(--vw) * 274);

    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 718);
      top: calc(var(--vw) * 272);
    }
  }

  .mv__slide {
    position: absolute;
    transition: all 0.6s ease;

    &.active {
      width: calc(var(--vw) * 209);
      right: calc(var(--vw) * 210);
      top: calc(var(--vw) * 120);

      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 425);
        right: calc(var(--vw) * 536);
        top: max(190px, calc(var(--vw) * 190));
      }
    }

    &.second {
      width: calc(var(--vw) * 130);
      right: calc(var(--vw) * 68);
      top: calc(var(--vw) * 100);

      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 220);
        right: calc(var(--vw) * 294);
        top: calc(var(--vw) * 408);
      }
    }

    &.third {
      width: calc(var(--vw) * 121);
      right: calc(var(--vw) * -67);
      top: calc(var(--vw) * 70);

      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 220);
        right: calc(var(--vw) * 42);
        top: calc(var(--vw) * 438);
      }
    }

    &.standby {
      z-index: 0;
      opacity: 0;
      transition:
        right 0.4s ease 0.4s,
        bottom 0.4s ease 0.4s
        top 0.4s ease 0.4s;

      @media screen and (max-width: 768px) {
        width: calc(var(--vw) * 119);
        top: calc(var(--vw) * 70);
        right: calc(var(--vw) * -200);
      }

      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 220);
        bottom: 0;
        right: -200px;
      }
    }
  }
}

.banner {
  width: calc(var(--vw) * 346);
  margin: 0 auto 81px auto;

  @media screen and (min-width: 769px) {
    width: min(976px, calc(var(--vw) * 976));
    margin: 0 auto 106px auto;
  }
}

:where(.banner) {}

.intro {
  position: relative;
  overflow-x: clip;
  @media screen and (max-width: 768px) {
    margin-bottom: 20px;
  }
  @media screen and (min-width: 769px) {
    padding-bottom: 32px;
  }
}

:where(.intro) {
  .intro__text-wrap {
    display: flex;
    justify-content: center;

    @media screen and (max-width: 768px) {
      flex-direction: column;
      padding: 0 25px;
      gap: 48px;
      margin-bottom: 20px;
    }
    @media screen and (min-width: 769px) {
      gap: min(92px, calc(var(--vw) * 92));
      margin-bottom: 98px;
      padding: 0 25px;
    }
  }

  .intro__images {
    margin-bottom: 12px;
  }

  .intro__text {
    font-weight: bold;
    font-size: calc(var(--rem) * 23);
    letter-spacing: 2.76px;
    line-height: 45px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 30);
      letter-spacing: 3.6px;
      line-height: 60px;
    }
    .sub {
      @media screen and (max-width: 768px) {
        font-size: calc(var(--rem) * 17);
        letter-spacing: 2.04px;
      }
    }
  }

  .intro__sub-lead {
    font-size: calc(var(--rem) * 7.6);
    letter-spacing: 0.9px;
    margin-bottom: 10px;
    font-family: "century-gothic", sans-serif;
    font-style: italic;
    font-weight: bold;
    @media screen and (min-width: 769px) {
      margin-top: 45px;
      font-size: calc(var(--rem) * 10);
      letter-spacing: 1.2px;
      margin-bottom: 16px;
    }
  }
  .intro__bg {
    position: absolute;
    z-index: -1;
    left: 0;
    @media screen and (max-width: 768px) {
      top: -450px;
    }
    @media screen and (min-width: 769px) {
      top: -480px;
    }
  }

  .intro__bg-circle {
    position: absolute;
    z-index: -1;
    bottom: calc(var(--vw) * -28);
    width: 170vw;
    left: calc(var(--vw) * -282);
    @media screen and (min-width: 769px) {
      left: calc(var(--vw) * -200);
      width: calc(var(--vw) * 800);
      bottom: calc(var(--vw) * 200);
    }
  }

  .intro__desc {
    font-weight: bold;
    font-size: calc(var(--rem) * 12);
    letter-spacing: 0.6px;
    line-height: 32px;
    margin-bottom: 32px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 15);
      letter-spacing: 0.75px;
      line-height: 42px;
      margin-bottom: 37px;
    }

    .underline {
      position: relative;
      display: inline;
      overflow: hidden;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      --h: 1em;
      --time: .8s;
      background-image: linear-gradient(90deg,
          rgba(77, 246, 249, 0.25),
          rgba(241, 255, 137, 0.25));
      background-repeat: no-repeat;
      background-position: left calc(100% + 4px);
      background-size: 0% var(--h);

      transition: background-size var(--time) cubic-bezier(.35, 0, 0, 1),
        color var(--time) cubic-bezier(.35, 0, 0, 1);
      padding-bottom: 3px;
    }

    &.is-shown {
      .underline {
        background-size: 100% var(--h);
      }
    }
  }
  .intro__finish {
    font-weight: bold;
    font-size: calc(var(--rem) * 14);
    letter-spacing: 0.7px;
    line-height: 34px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 20);
      letter-spacing: 1px;
      line-height: 45px;
    }
  }
}

.strong {}

:where(.strong) {
  .strong__sub-title {
    font-weight: 600;
    display: block;
    text-align: center;
    font-size: calc(var(--rem) * 13);
    letter-spacing: 1.04px;
    margin-bottom: 9px;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 20);
      letter-spacing: 1.6px;
      margin-bottom: 13px;
    }
  }

  .strong__title {
    text-align: center;
    font-weight: 600;
    font-size: calc(var(--rem) * 24);
    letter-spacing: 1.92px;
    margin-bottom: 70px;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 33);
      letter-spacing: 2.64px;
      margin-bottom: 49px;
    }
  }

  .strong__item {
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    right: 0;
    color: #FFF;
    background-repeat: no-repeat;
    flex-direction: column-reverse;
    background-size: cover;
    @media screen and (max-width: 768px) {
      background-position: top;
      justify-content: flex-end;
      padding-top: calc(var(--vw) * 25);
      background-image: url("../../images/bg_strong-1-sp.webp");
    }

    @media screen and (min-width: 769px) {
      background-position: bottom;
      border-radius: 100px 100px 0 0;
      background-image: url("../../images/bg_strong-1.webp");
      flex-direction: initial;
    }

    >div {
      width: 100%;
    }
  }

  .strong__item:nth-child(2) {
    background-image: url("../../images/bg_strong-2-sp.webp");

    @media screen and (min-width: 769px) {
      background-image: url("../../images/bg_strong-2.webp");
    }
  }

  .strong__item:nth-child(3) {
    background-image: url("../../images/bg_strong-3-sp.webp");

    @media screen and (min-width: 769px) {
      background-image: url("../../images/bg_strong-3.webp");
    }
  }

  .strong__sub-lead {
    font-weight: bold;
    display: block;
    font-size: calc(var(--rem) * 13);
    letter-spacing: 1.04px;
    margin-bottom: 13px;
    padding-left: calc(var(--vw) * 25);

    @media screen and (min-width: 769px) {
      padding-left: calc(var(--vw) * 106);
      margin-bottom: 31px;
      font-size: calc(var(--rem) * 20);
      letter-spacing: 1.6px;
    }
  }

  .strong__lead {
    font-weight: bold;
    font-size: calc(var(--rem) * 17);
    letter-spacing: 1.36px;
    line-height: 27px;
    margin-bottom: 18px;
    padding-left: calc(var(--vw) * 25);

    @media screen and (min-width: 769px) {
      padding-left: calc(var(--vw) * 106);
      margin-bottom: 31px;
      font-size: calc(var(--rem) * 33);
      letter-spacing: 2.64px;
      line-height: 52px;
    }
  }

  .strong__desc {
    font-weight: bold;

    @media screen and (max-width: 768px) {
      font-size: calc(var(--rem) * 12.4);
      letter-spacing: 0.992px;
      line-height: 24px;
      padding: calc(var(--vw) * 20) calc(var(--vw) * 25) 0;
    }

    @media screen and (min-width: 769px) {
      padding-left: calc(var(--vw) * 184);
      font-size: calc(var(--rem) * 16);
      letter-spacing: 1.28px;
      line-height: 36px;
    }
  }

  .strong__line {
    width: 100%;
    height: 1.7px;
    background: #FFF;
    display: block;

    @media screen and (min-width: 769px) {
      margin-bottom: 31px;
      height: 2px;
    }
  }

  .strong__item-image {
    @media screen and (max-width: 768px) {
      margin-right: calc(var(--vw) * -126);
      width: calc(var(--vw) * 290);
      margin-bottom: calc(var(--vw) * 37);
    }

    @media screen and (min-width: 769px) {
      width: min(550px, calc(var(--vw) * 550));
      height: min(550px, calc(var(--vw) * 550));
      margin-right: min(64px, calc(var(--vw) * 64));
    }
  }

  .strong__list {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
}

.message {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 70px 0 50px;
  position: relative;

  @media screen and (min-width: 769px) {
    background-image: url("../../images/bg_message.webp");
    padding: 49px 0 60px;
  }
}

:where(.message) {
  .message__bg-circle {
    position: absolute;
    top: calc(var(--vw) * 203);
    width: 170vw;
    right: calc(var(--vw) * -282);
    transform: rotate(-185deg);
    @media screen and (min-width: 769px) {
      right: -200px;
      width: calc(var(--vw) * 800);
      top: 75px;
      transform: rotate(-145deg);
    }
  }
  .message-head {
    display: flex;
    align-items: center;
    position: relative;

    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: 16px;
      margin-bottom: 45px;
    }

    @media screen and (min-width: 769px) {
      margin-bottom: 100px;
      gap: 80px;
    }
  }

  .message-list {
    display: grid;
    place-content: center;
    place-items: center;
    box-sizing: content-box;

    @media screen and (max-width: 768px) {
      padding: 0 30px;
      gap: 20px;
      margin-bottom: 30px;
    }

    @media screen and (min-width: 769px) {
      max-width: 1100px;
      padding: 0 20px;
      margin: 0 auto 60px auto;
      gap: 30px;
    }
  }

  .message-image {
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 700);
    }
  }

  .message-title-en {
    display: block;
    font-weight: bold;
    letter-spacing: 0.7px;
    font-size: calc(var(--rem) * 14);
    margin-bottom: 3px;

    @media screen and (min-width: 769px) {
      margin-bottom: 6px;
      letter-spacing: 0.75px;
      font-size: calc(var(--rem) * 15);
    }
  }

  .message-title {
    font-weight: bold;
    letter-spacing: 2px;
    font-size: calc(var(--rem) * 25);
    margin-bottom: 9px;

    @media screen and (min-width: 769px) {
      margin-bottom: 10px;
      letter-spacing: 2.4px;
      font-size: calc(var(--rem) * 30);
    }
  }

  .message-lead {
    font-weight: bold;
    letter-spacing: 1.12px;
    font-size: calc(var(--rem) * 14);
    margin-bottom: 25px;

    @media screen and (min-width: 769px) {
      margin-bottom: 51px;
      letter-spacing: 1.3px;
      font-size: calc(var(--rem) * 16);
    }
  }

  .message-more {
    display: block;

    @media screen and (max-width: 768px) {
      margin: 0 auto;
      width: calc(var(--vw) * 248);
    }

    @media screen and (min-width: 769px) {
      width: min(285px, calc(var(--vw) * 285));
      padding-left: 87px;
      box-sizing: content-box;
    }
  }

  .message-start {
    font-weight: 600;
    display: block;
    text-align: center;
    letter-spacing: 0.96px;
    font-size: calc(var(--rem) * 12);
    margin-bottom: 13px;

    @media screen and (min-width: 769px) {
      margin-bottom: 18px;
      letter-spacing: 1.84px;
      font-size: calc(var(--rem) * 23);
    }
  }

  .message-enjoy {
    text-align: center;
    font-weight: 600;

    @media screen and (max-width: 768px) {
      letter-spacing: 1.44px;
      font-size: calc(var(--rem) * 18);
      line-height: 29px;
      margin-bottom: 30px;
    }

    @media screen and (min-width: 769px) {
      margin-bottom: 47px;
      letter-spacing: 2.48px;
      font-size: calc(var(--rem) * 31);
    }

    .strong {
      color: #ffa72e;
    }
  }

}

.message-modal-wrap {
  opacity: 0;
  position: relative;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s linear, visibility 0s linear 0.2s;

  &.is-shown {
    z-index: 101;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
}

:where(.message-modal-wrap) {
  .message-modal {
    position: fixed;
    background: #FFF;
    z-index: 102;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 25px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;

    @media screen and (max-width: 768px) {
      height: 90svh;
      width: 90%;
      padding: 39px 25px 70px;
      border: 2px solid #007CA9;
    }

    @media screen and (min-width: 769px) {
      text-align: center;
      max-width: 1400px;
      width: 90%;
      height: calc(100svh - 100px);
      padding: 54px 128px 112px;
      border-radius: 50px;
      border: 8px solid #007CA9;
    }
  }

  .message-modal__close {
    position: absolute;
    width: 25px;
    cursor: pointer;
    right: 34px;
    @media screen and (min-width: 769px) {
      right: calc(var(--vw) * 68);
      width: 30px;
    }
  }

  .message-modal::-webkit-scrollbar {
    display: none;
  }

  .message-modal__sub-title {
    font-family: "century-gothic", sans-serif;
    font-weight: bold;
    display: block;
    font-size: calc(var(--rem) * 15);
    letter-spacing: 0.75px;
    @media screen and (max-width: 768px) {
      margin-top: 20px;
      margin-bottom: 5px;
    }
    @media screen and (min-width: 769px) {
      margin-bottom: 24px;
    }
  }

  .message-modal__title {
    font-weight: bold;
    font-size: calc(var(--rem) * 20);
    letter-spacing: 1px;
    margin-bottom: 20px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 27);
      letter-spacing: 1.35px;
      margin-bottom: 47px;
    }
  }

  .message-modal__text {
    font-weight: 600;
    font-size: calc(var(--rem) * 13);
    letter-spacing: 0.65px;
    line-height: 28px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 14);
      letter-spacing: 0.7px;
      line-height: 37px;
    }
  }

  .message-modal-layer {
    background: rgba(0, 0, 0, 0.6);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 101;
  }
}

.campus {
  background: #f7fcff;
  padding: 45px 0 30px 0;

  @media screen and (min-width: 769px) {
    padding: 53px 0 50px 0;
  }
}

:where(.campus) {
  .campus__title-en {
    text-align: center;
    font-family: "century-gothic", sans-serif;
    font-weight: bold;
    font-size: calc(var(--rem) * 15);
    letter-spacing: 0.75px;
    margin-bottom: 10px;

    @media screen and (min-width: 769px) {
      margin-bottom: 13px;
    }
  }

  .campus__title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 27);
      letter-spacing: 1.15px;
      margin-bottom: 43px;
    }
  }

  .campus-list {
    box-sizing: content-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 15px;
    column-gap: 20px;
    row-gap: 15px;
    margin: 0 auto 30px auto;

    @media screen and (min-width: 769px) {
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto 55px auto;
      padding: 0 20px;
      max-width: 1284px;
      column-gap: 40px;
      row-gap: 30px;
      justify-content: center;
    }
  }

  .campus-thumb {
    background: #D9D9D9;
    width: 100%;
    height: calc(var(--vw) * 112);
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;

    @media screen and (min-width: 769px) {
      width: 290px;
      height: 188px;
      margin-bottom: 17px;
      border-radius: 20px;
    }

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  .campus-title {
    font-weight: bold;
    font-size: calc(var(--rem) * 14);
    letter-spacing: 0.7px;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 17);
      letter-spacing: 0.85px;
    }
  }

  .campus-button {
    display: block;
    margin: 0 auto;
    width: calc(var(--vw) * 267);

    @media screen and (min-width: 769px) {
      width: 368px;
    }
  }
  .campus__current-name {
    font-weight: bold;
    display: block;
    font-size: calc(var(--rem) * 10);
    letter-spacing: 0.5px;
    margin-top: 2px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 13);
      letter-spacing: 0.65px;
      margin-top: 2px;
    }
  }
}

.interview {
  background: #FFF;
  padding-top: calc(var(--vw) * 51);
  margin-bottom: calc(var(--vw) * 40);

  @media screen and (min-width: 769px) {
    padding-top: 134px;
    margin-bottom: 27px;
  }
}

:where(.interview) {
  .interview__list-wrap {
    position: relative;
    margin: 0 auto;

    @media screen and (min-width: 769px) {
      max-width: 1250px;
      padding: 0 20px;
      box-sizing: border-box;
    }
  }

  .interiew__man {
    position: absolute;
    width: 155px;
    top: -95px;
    left: 190px;

    @media screen and (max-width: 1250px) {
      left: calc(var(--vw) * 190);
      width: calc(var(--vw) * 163);
      top: calc(var(--vw) * -94);
    }
  }

  .interiew__woman {
    position: absolute;
    width: 141px;
    top: -96px;
    right: 190px;

    @media screen and (max-width: 1250px) {
      right: calc(var(--vw) * 190);
      top: calc(var(--vw) * -94);
      width: calc(var(--vw) * 147);
    }
  }

  .interiew__ppl {
    width: calc(var(--vw) * 225);
    margin: 0 auto 13px auto;
  }

  .interview__title {
    text-align: center;
    font-weight: bold;
    position: relative;
    z-index: 1;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 25);
      letter-spacing: 1.25px;
    }
  }

  .interview__title-wrap {
    position: relative;
    margin-bottom: 21px;

    @media screen and (min-width: 769px) {
      margin-bottom: 50px;
    }
  }

  .interiew__title-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    @media screen and (min-width: 769px) {
      width: 500px;
      top: -50px;
    }
  }

  .interview__list {
    position: relative;
  }

  .interview__item {
    &:first-child {
      .interview__head {
        border: none;
      }
    }

    &:last-child {
      @media screen and (min-width: 769px) {
        border-bottom: 2px solid #007CA9;
      }

      .interview__content-wrap {
        @media screen and (min-width: 769px) {
          padding: 30px 0;
        }
      }
    }
  }

  .interview__content-wrap {
    @media screen and (max-width: 768px) {
      align-items: center;
    }
    @media screen and (min-width: 769px) {
      display: flex;
      justify-content: center;
      padding: 30px 0 5px 0;
      border-left: 2px solid #007CA9;
      border-right: 2px solid #007CA9;
    }
  }

  .interview__head {
    @media screen and (min-width: 769px) {
      border-left: 2px solid #007CA9;
      border-right: 2px solid #007CA9;
    }
  }

  .interview-slide .swiper-button-prev,
  .interview-slide .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    width: calc(var(--vw) * 47);
    img {
      object-fit: contain;
      height: 100%;
    }
  }
  .swiper-button-prev:after, .swiper-button-next:after {
    content: "" !important;
  }

  .interview-slide .swiper-button-prev { 
    left: calc(var(--vw) * 12); 
  }
  .interview-slide .swiper-button-next { 
    right: calc(var(--vw) * 12);
  }

  .interview__content {
    display: flex;
    position: relative;
    color: #00536F;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--vw) * 30) calc(var(--vw) * 49) calc(var(--vw) * 19);
    gap: 24px;

    @media screen and (min-width: 769px) {
      gap: 15px;
      min-width: 273px;
      padding: 0 11px;
      box-sizing: content-box;
      justify-content: space-around;
    }

    @media screen and (max-width: 1200px) {
      min-width: 212px;
    }

    @media screen and (max-width: 962px) {
      min-width: initial;
    }

    &::after {
      content: "";
      display: block;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background: #007CA9;

      @media screen and (min-width: 769px) {
        width: 1px;
        height: 82%;
      }
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
  }

  .interview__icon {
    width: calc(var(--vw) * 55);
    @media screen and (min-width: 769px) {
      width: 64px;
    }
    &.bulp {
      width: calc(var(--vw) * 20);
      @media screen and (min-width: 769px) {
        width: 40px;
      }
    }
  }

  .interview__desc {
    text-align: center;
    font-weight: bold;
    font-size: calc(var(--rem) * 12.5);
    letter-spacing: 0.6px;
    line-height: 24px;

    @media screen and (max-width: 1200px) {
      font-size: calc(var(--rem) * 10);
      letter-spacing: 0.55px;
      line-height: 24px;
    }

    @media screen and (max-width: 768px) {
      font-size: calc(var(--rem) * 14);
      letter-spacing: 0.7px;
      line-height: 22px;
    }

    .strong {
      color: #007CA9;
    }
  }
}

.result {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../../images/bg_result-sp.webp");
  padding: calc(var(--vw) * 42) 0 calc(var(--vw) * 35) 0;

  @media screen and (min-width: 769px) {
    background-image: url("../../images/bg_result.webp");
    padding: calc(var(--vw) * 96) 0 calc(var(--vw) * 25) 0;
  }
}

:where(.result) {
  .result_text-image {
    width: calc(var(--vw) * 218);
    margin: 0 auto;

    @media screen and (min-width: 769px) {
      width: 462px;
    }
  }

  .result_lead-image {
    margin: 0 auto 30px auto;

    @media screen and (min-width: 769px) {
      width: min(817px, calc(var(--vw) * 817));
      margin: -19px auto 34px auto;
    }
  }

  .result__list {
    place-content: center;

    @media screen and (min-width: 769px) {
      display: grid;
      gap: 25px;
      grid-template-columns: 520px 520px;
      grid-template-rows: 330px 35px 180px;
    }

    @media screen and (max-width: 1067px) {
      grid-template-columns: 1fr 1fr;
    }

    @media screen and (max-width: 768px) {
      padding: 0 21px;
      gap: 8px;
      display: flex;
      flex-direction: column;
    }
  }

  .result__item {
    position: relative;
    background: #FFF;
    border-radius: 27px;
    padding: 15px 29px 29px 29px;

    @media screen and (min-width: 769px) {
      padding: 25px 45px 49px 45px;
    }
  }

  .result__item:first-child {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .result__item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }

  .result__item:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
  }

  .result__item:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  .result__item-univ {
    font-weight: bold;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 14);
      letter-spacing: 0.7px;
      line-height: 30px;
    }

    @media screen and (max-width: 1067px) {
      grid-template-columns: 1fr 1fr;
      font-size: calc(var(--rem) * 11);
      letter-spacing: 0.55px;
      line-height: 23px;
      white-space: nowrap;
    }
  }

  .result__item-type {
    text-align: center;
    font-weight: bold;
    font-size: calc(var(--rem) * 12);
    letter-spacing: 0.6px;
    margin-bottom: 10px;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 16);
      letter-spacing: 0.8px;
      margin-bottom: 13px;
    }
  }

  .result__item-univ-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .result__item-line {
    display: block;
    height: 1px;
    width: 100%;
    background: #89E2FF;
    margin-bottom: 13px;

    @media screen and (min-width: 769px) {
      height: 1.5px;
      margin-bottom: 23px;
    }
  }

  .result__item-text {
    font-weight: bold;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 14);
      letter-spacing: 0.7px;
      line-height: 30px;
    }

    @media screen and (max-width: 1067px) {
      font-size: calc(var(--rem) * 11);
      letter-spacing: 0.55px;
      line-height: 20px;
    }
  }

  .result__item-etc {
    position: absolute;
    font-weight: bold;
    font-size: calc(var(--rem) * 6.5);
    letter-spacing: 0.325px;
    bottom: 15px;
    right: 42px;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 10);
      letter-spacing: 0.5px;
      bottom: 30px;
      right: 63px;
    }
  }

  .result__deco {
    width: 100%;
  }
}

.voice {
  background: #f7fcff;
  padding: calc(var(--vw) * 37) 0 calc(var(--vw) * 100) calc(var(--vw) * 36);

  @media screen and (min-width: 769px) {
    padding: 65px 0 219px 100px;
  }
}

:where(.voice) {
  .voice__title-wrap {
    display: flex;

    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: 7px;
      margin-bottom: 24px;
    }

    @media screen and (min-width: 769px) {
      margin-bottom: 44px;
      align-items: end;
      gap: 30px;
    }
  }

  .voice__title {
    font-family: "century-gothic", sans-serif;
    font-weight: bold;
    font-size: calc(var(--rem) * 40);
    letter-spacing: 2px;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 62);
      letter-spacing: 3px;
    }
  }

  .voice__title-ja {
    font-weight: bold;
    font-size: calc(var(--rem) * 16);
    letter-spacing: 0.8px;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 18);
      letter-spacing: 1px;
      padding-bottom: 9px;
    }
  }

  .voice-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 11px;

    @media screen and (min-width: 769px) {
      gap: 30px;
    }
  }

  .voice-item {
    background: #FFF;
    border-radius: 33px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 13px 25px;
    width: 292px;

    @media screen and (min-width: 769px) {
      padding: 24px 24px 31px;
      border-radius: 50px;
      width: 374px;
    }

    &:last-child {
      /* padding-right: calc(var(--vw) * 30);
      @media screen and (min-width: 769px) {
        padding-right: calc(var(--vw) * 40);
      } */
    }
  }

  .voice-thumb {
    margin: 0 auto;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    overflow: hidden;
    background: #FFF;
    flex-shrink: 0;

    @media screen and (min-width: 769px) {
      width: 140px;
      height: 140px;
    }
  }

  .voice-number {
    font-weight: bold;
    padding-left: 24px;
    position: relative;
    font-size: calc(var(--rem) * 9);
    letter-spacing: 0.45px;
    margin-bottom: 11px;

    @media screen and (min-width: 769px) {
      margin-bottom: 13px;
      font-size: calc(var(--rem) * 14);
      letter-spacing: 0.7px;
    }

    &::before {
      position: absolute;
      content: "";
      display: inline-block;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      background-color: #00688E;
      width: 6px;
      height: 16px;

      @media screen and (min-width: 769px) {
        width: 10px;
        height: 25px;
      }
    }
  }

  .voice-excerpt-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
  }

  .voice-excerpt {
    white-space: wrap;
    font-weight: bold;
    font-size: calc(var(--rem) * 11);
    letter-spacing: 0.55px;
    line-height: 22px;
    margin-bottom: 11px;

    @media screen and (min-width: 769px) {
      margin-bottom: 17px;
      font-size: calc(var(--rem) * 13);
      letter-spacing: 0.65px;
      line-height: 28px;
    }

    strong {
      background: linear-gradient(transparent 51%, #FCFFDA 60%);
      padding-bottom: 1px;
    }
  }

  .voice-title {
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: calc(var(--rem) * 10.6);
    letter-spacing: 0.53px;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 16);
      letter-spacing: 0.8px;
    }
  }

  .voice-list-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: calc(var(--vw) * 15);

    @media screen and (min-width: 769px) {
      margin-left: 97px;
      padding-bottom: 46px;
    }
  }

  .voice-list-wrapper::-webkit-scrollbar {
    display: none;
  }

  .simplebar-scrollbar::before {
    background: #007CA9 !important;
    border-radius: 0;
    height: 3px !important;
    top: 0px !important;
    opacity: 1 !important;
    border-radius: 0 !important;

    @media screen and (min-width: 769px) {
      height: 8px !important;
    }
  }

  .simplebar-scrollbar.simplebar-visible::before {
    opacity: 1;
  }

  .simplebar-track {
    background: #F3F3F3;
    height: 3px !important;

    @media screen and (min-width: 769px) {
      height: 8px !important;
      width: calc(var(--vw) * 1211);
    }
  }
}

.blog {
  border-radius: 48px 48px 0 0;
  background: #FFF;
  margin-top: calc(var(--vw) * -57);
  margin-bottom: calc(var(--vw) * 100);

  @media screen and (min-width: 769px) {
    border-radius: 100px 100px 0 0;
    margin-top: calc(var(--vw) * -86);
    margin-bottom: 121px;
  }
}

:where(.blog) {
  .blog__inner {
    padding: calc(var(--vw) * 37) 0 calc(var(--vw) * 43) calc(var(--vw) * 36);

    @media screen and (min-width: 769px) {
      padding: 60px 0 60px 100px;
    }
  }

  .blog-wrap-inner {
    position: relative;
  }

  .blog__title {
    font-family: "century-gothic", sans-serif;
    font-weight: bold;
    font-size: calc(var(--rem) * 40);
    letter-spacing: 2px;
    margin-bottom: 6px;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 62);
      letter-spacing: 3.9px;
      margin-bottom: 12px;
    }
  }

  .blog__list-title {
    font-weight: 600;
    font-size: calc(var(--rem) * 16);
    letter-spacing: 1.28px;
    margin-bottom: 22px;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 18);
      letter-spacing: 1px;
      margin-bottom: 31px;
    }
  }

  .blog-wrap {
    display: flex;
    flex-direction: column;
    gap: 34px;

    @media screen and (min-width: 769px) {
      padding-left: 70px;
      gap: 60px;
    }
  }

  .blog-list-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: calc(var(--vw) * 20);

    @media screen and (min-width: 769px) {
      margin-left: calc(var(--vw) * 67);
      padding-bottom: 55px;
    }
  }

  .simplebar-scrollbar::before {
    background: #007CA9 !important;
    border-radius: 0;
    height: 3px !important;
    top: 0px !important;
    opacity: 1 !important;
    border-radius: 0 !important;

    @media screen and (min-width: 769px) {
      height: 8px !important;
    }
  }

  .simplebar-scrollbar.simplebar-visible::before {
    opacity: 1;
  }

  .simplebar-track {
    background: #F3F3F3;
    height: 3px !important;

    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 842);
      height: 8px !important;
    }
  }

  .blog-list-wrapper::-webkit-scrollbar {
    display: none;
  }

  .blog-list {
    display: flex;
    gap: 30px;

    @media screen and (min-width: 769px) {
      gap: 40px;
    }
  }

  .blog-item {
    width: 240px;
    box-sizing: content-box;
    flex-shrink: 0;

    &:last-child {
      padding-right: calc(var(--vw) * 30);

      @media screen and (min-width: 769px) {
        padding-right: calc(var(--vw) * 40);
      }
    }

    @media screen and (min-width: 769px) {
      width: 300px;
    }
  }

  .blog-thumb {
    height: 160px;
    border-radius: 20px;
    overflow: hidden;
    background: #CBCBCB;
    margin-bottom: 16px;

    @media screen and (min-width: 769px) {
      height: 191px;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .blog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .blog-cat {
    border-radius: 50px;
    border: 1.15px solid #007CA9;
    font-size: calc(var(--rem) * 8.4);
    font-weight: bold;
    letter-spacing: 0.84px;
    padding: 4px 13px;

    @media screen and (min-width: 769px) {
      border: 1.5px solid #007CA9;
      font-size: calc(var(--rem) * 11);
      font-weight: bold;
      letter-spacing: 1.1px;
      padding: 3px 13px;
    }
  }

  .blog-date {
    font-size: calc(var(--rem) * 10);
    font-weight: bold;
    letter-spacing: 0.5px;

    @media screen and (min-width: 769px) {
      letter-spacing: 0.65px;
      font-size: calc(var(--rem) * 13);
    }
  }

  .blog-title {
    display: block;
    font-size: calc(var(--rem) * 13.7);
    letter-spacing: 0.685px;
    font-weight: 600;
    margin-bottom: 8px;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 18);
      letter-spacing: 0.9px;
    }
  }

  .blog-excerpt {
    font-size: calc(var(--rem) * 10);
    letter-spacing: 0.5px;
    font-weight: 600;
    color: #00536F;
    white-space: pre-wrap;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 12);
      letter-spacing: 0.6px;
      width: 300px;
      height: 36px;
    }
  }

  .blog-more {
    font-weight: bold;
    font-size: calc(var(--rem) * 16);
    letter-spacing: 1.6px;
    position: absolute;
    bottom: 0px;
    right: calc(var(--vw) * 120);
    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      right: -38px;
      top: 50%;
      transform: translateY(-50%);
      width: 21px;
      height: 21px;
      background-image: url("../../images/icon_arrow.svg");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }

  .blog__button {
    display: block;
    margin: 0 auto;
    width: calc(var(--vw) * 231);

    @media screen and (min-width: 769px) {
      width: 309px;
    }
  }

  .blog-empty {
    font-weight: 600;
    font-size: calc(var(--rem) * 14);
    letter-spacing: 1.12px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 17);
      letter-spacing: 1.36px;
    }
  }
}

.cta-bottom {
  padding: 0 25px;
}