main {
  overflow-x: hidden;
  padding-top: 60px;
  @media screen and (min-width: 769px) {
    padding-top: 134px;
  }
}

.mv {
  @media screen and (min-width: 769px) {
    margin-bottom: calc(var(--vw) * 64);
  }
}

.campaign-wrap {
  position: relative;
  picture {
    display: flex;
    justify-content: center;
  }

  &.top {
    @media screen and (min-width: 769px) {
      background-image: url("../../images/winter2026/campaign/bg_campaign.webp");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }
  &.bottom {
    @media screen and (max-width: 768px) {
      margin-bottom: calc(var(--vw) * 24);
    }
  }
}
:where(.campaign-wrap) {
  .campaign__image {
    width: 100vw;
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 992);
    }
  }
  .cta {
    @media screen and (max-width: 768px) {
      position: absolute;
      top: calc(var(--vw) * 552);
    }
  }
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: calc(var(--vw) * 22) 0 calc(var(--vw) * 33);
  @media screen and (min-width: 769px) {
    padding: calc(var(--vw) * 40) 0 calc(var(--vw) * 42);
  }
  &.top {
    padding: calc(var(--vw) * 22) 0 calc(var(--vw) * 29);
    @media screen and (min-width: 769px) {
      padding: 0;
    }
  }
  &.bottom {
    padding: calc(var(--vw) * 32) 0 calc(var(--vw) * 0);
    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 50) 0 calc(var(--vw) * 10);
    }
  }
}

:where(.cta) {

  .cta__top,
  .cta__bottom {
    transition: opacity 0.2s linear;

    &:hover {
      opacity: 0.6;
    }
  }

  .cta__top {
    width: calc(var(--vw) * 338);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 470);
    }
  }
  .cta__middle {
    width: calc(var(--vw) * 251);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 350);
    }
  }
  .cta__bottom {
    width: calc(var(--vw) * 280);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 388);
    }
  }
}

.voice {
  background-color: #FFF;
  padding: calc(var(--vw) * 25) 0 calc(var(--vw) * 15);
  @media screen and (min-width: 769px) {
    max-width: calc(var(--vw) * 1139);
    margin: 0 auto;
    padding: calc(var(--vw) * 45) 0 calc(var(--vw) * 54);
  }
}

:where(.voice) {
  .voice__title {
    display: flex;
    width: calc(var(--vw) * 300);
    margin: 0 auto calc(var(--vw) * 16) auto;
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 450);
      margin: 0 auto calc(var(--vw) * 17) auto;
    }
  }
  .voice__item {
    @media screen and (max-width: 768px) {
      width: calc(var(--vw) * 349);
    }
  }
  .voice__annotation {
    color: #005090;
    font-size: calc(var(--vw) * 7.5);
    font-weight: 500;
    margin-top: calc(var(--vw) * 31);
    text-align: right;
    padding-right: calc(var(--vw) * 12);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--vw) * 13);
      letter-spacing: 0.65px;
      padding-right: 0;
      margin-top: calc(var(--vw) * 49);
    }
  }
  .splide__pagination {
    bottom:  calc(var(--vw) * -30) !important;
    @media screen and (max-width: 768px) {
      bottom:  calc(var(--vw) * -21) !important;
    }
  }
  .splide__pagination__page {
    background: #C0C0C0;
    opacity: 1 !important;
    width: 10px !important;
    height: 10px !important;
    margin: 5px !important;
  }
  .splide__pagination__page.is-active {
    background: #005090 !important;
    transform: none !important;
  }
}

.question {
  @media screen and (min-width: 769px) {
    margin-bottom: calc(var(--vw) * 21);
  }
}

.banners {
  margin-bottom: calc(var(--vw) * 37);
  @media screen and (max-width: 768px) {
    margin-top: calc(var(--vw) * -83);
  }
}

.comparison {
  position: relative;
  @media screen and (max-width: 768px) {
    margin-bottom: calc(var(--vw) * 63);
  }
  @media screen and (min-width: 769px) {
    display: flex;
    margin-bottom: calc(var(--vw) * 77);
    justify-content: center;
    margin-top: calc(var(--vw) * 20);
  }
}
:where(.comparison) {
  .comaprison__title-wrap {
    display: flex;
    justify-content: center;
  }
  .comparison__image {
    width: calc(var(--vw) * 877);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 1103);
    }
  }
  .comparison__inner {
    overflow-x: scroll;
  }
  .comparison__title {
    margin-bottom: calc(var(--vw) * 30);
    width: calc(var(--vw) * 279);
  }
}
.comparison__finger {
  width: calc(var(--vw) * 51);
  animation-name: scrollFinger;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  float: right;
  margin-top: calc(var(--vw) * -78);
}

@keyframes scrollFinger {
  50% {
    transform: translateX(-40px);
  }
  100% {
    transform: translateX(0);
  }
}

.up {
  @media screen and (min-width: 769px) {
    margin-bottom: calc(var(--vw) * 54);
  }
}
:where(.up) {
  .up__image {
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 867);
    }
  }
  picture {
    display: flex;
    justify-content: center;
  }
}
.achi {
  background: #FAFFD7;
  padding: calc(var(--vw) * 12) 0 calc(var(--vw) * 150);
  @media screen and (min-width: 769px) {
    padding: 0 0 calc(var(--vw) * 200);
  }
  picture {
    display: flex;
    justify-content: center;
  }
}
:where(.achi) {
  .achi__title {
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 707);
    }
  }
  .achi__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--vw) * 20);
    margin: calc(var(--vw) * 13) 0;
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 40);
      margin: calc(var(--vw) * 38) 0;
    }
  }
  .achi__arrow {
    display: flex;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: opacity 0.2s linear;
    img {
      width: calc(var(--vw) * 18);
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 36);
      }
    }
    &:hover {
      opacity: 0.6;
    }
    &.swiper-button-disabled {
      opacity: 0.3;
      cursor: default;
      pointer-events: none;
    }
    &.swiper-button-lock {
      display: none;
    }
  }
  .achi__arrow--prev img {
    transform: rotate(180deg);
  }
  .achi__pagination {
    display: flex;
    width: initial !important;
    gap: calc(var(--vw) * 12);
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 25);
    }
    .swiper-pagination-bullet {
      width: calc(var(--vw) * 7);
      height: calc(var(--vw) * 7);
      margin: 0 !important;
      background: #004F92;
      opacity: 0.5;
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 14);
        height: calc(var(--vw) * 14);
      }
    }
    .swiper-pagination-bullet-active {
      background: #004F92;
      opacity: 1;
    }
  }
  .achi__slider {
    width: calc(var(--vw) * 351);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 993);
    }
  }
  .achi__image {
    width: 100%;
    height: auto;
  }
  .achi__annotation {
    width: calc(var(--vw) * 351);
    margin: calc(var(--vw) * 10) auto 0;
    color: #005090;
    font-size: calc(var(--vw) * 13);
    font-weight: 500;
    text-align: right;
    letter-spacing: 5%;
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 993);
      margin: calc(var(--vw) * 12) auto 0;
    }
  }
}

.banner-2 {
  margin-top: calc(var(--vw) * -122);
  @media screen and (min-width: 769px) {
    margin-top: calc(var(--vw) * -116);
  }
}

.introduction {
  padding: 0 0 calc(var(--vw) * 30);
  @media screen and (min-width: 769px) {
    padding: 0 0 calc(var(--vw) * 14);
  }
}
:where(.introduction) {
  .splide__pagination {
    bottom: calc(var(--vw) * -36) !important;
  }
  .splide__pagination__page {
    width: 10px !important;
    height: 10px !important;
    margin: 5px !important;
    opacity: 1 !important;
    background: #C0C0C0 !important;
  }
  .splide__pagination__page.is-active {
    background: #0169BC !important;
    transform: none !important;
  }
  .introduction__title {
    display: flex;
    justify-content: center;
    width: calc(var(--vw) * 377);
    margin: 0 auto calc(var(--vw) * 40) auto;
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 379);
      margin: 0 auto calc(var(--vw) * 50) auto;
    }
  }
  .introduction__slider {
    margin-bottom: calc(var(--vw) * 42);
    @media screen and (max-width: 768px) {
      padding: 0 calc(var(--vw) * 30);
    }
  }
  .introduction__list {
    @media screen and (min-width: 769px) {
      display: flex;
      align-items: center;
      gap: calc(var(--vw) * 27);
      flex-direction: column;
      margin-bottom: calc(var(--vw) * 60);
    }
  }
  .introduction__item {
    width: calc(var(--vw) * 288);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 1219);
      margin: 0 auto calc(var(--vw) * 10) auto;
    }
  }
  .introduction__item:nth-child(2) {
    @media screen and (min-width: 769px) {
      padding-right: calc(var(--vw) * 112);
      box-sizing: content-box;
    }
  }
}

.interview {
  background: #F0FAFF;
  padding: calc(var(--vw) * 51) 0 calc(var(--vw) * 27) 0;
  @media screen and (max-width: 768px) {
    padding: calc(var(--vw) * 33) 0 calc(var(--vw) * 20) 0;
  }
}
:where(.interview) {
  .interview__title {
    display: block;
    margin: 0 auto calc(var(--vw) * 14) auto;
    width: calc(var(--vw) * 323);
    @media screen and (min-width: 769px) {
      margin: 0 auto;
      width: calc(var(--vw) * 400);
    }
  }
  .interview__tabs {
    display: flex;
    justify-content: center;
    gap: calc(var(--vw) * 4);
    width: calc(var(--vw) * 361);
    margin: calc(var(--vw) * 20) auto calc(var(--vw) * 12);
    list-style: none;
    padding: 0;
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 6);
      width: auto;
      margin: calc(var(--vw) * 40) auto calc(var(--vw) * 48);
    }
    li {
      flex: 1;
      @media screen and (min-width: 769px) {
        flex: none;
      }
    }
  }
  .interview__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(var(--vw) * 52);
    padding: 0;
    border: none;
    border-radius: calc(var(--vw) * 2);
    background: #B4C0D5;
    color: #fff;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.3s, opacity 0.3s;
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 170);
      height: calc(var(--vw) * 53);
      border-radius: calc(var(--vw) * 6);
      box-shadow: 0 calc(var(--vw) * 2) calc(var(--vw) * 4) rgba(0, 0, 0, 0.15);
    }
    &:hover {
      opacity: 0.8;
    }
    &.is-active {
      background: linear-gradient(90deg, #2B58A3 0%, #378DCD 100%);
      &:hover {
        opacity: 1;
      }
    }
  }
  .interview__tab-grade {
    font-size: calc(var(--vw) * 13);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--vw) * 12);
    }
  }
  .interview__tab-name {
    font-size: calc(var(--vw) * 9);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--vw) * 12);
    }
  }
  .interview__slider {
    width: calc(var(--vw) * 374);
    margin: 0 auto;
    @media screen and (min-width: 769px) {
      width: 100%;
    }
  }
  .interview__slide {
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 700);
    }
  }
  .interview__image {
    display: block;
    width: 100%;
    height: auto;
  }
  .interview__note {
    margin-top: calc(var(--vw) * 12);
    font-size: calc(var(--vw) * 7);
    color: #636363;
    letter-spacing: 5%;
    text-align: right;
    @media screen and (max-width: 768px) {
      padding-right: calc(var(--vw) * 21);
    }
    @media screen and (min-width: 769px) {
      margin-top: calc(var(--vw) * 24);
      text-align: center;
      font-size: calc(var(--vw) * 7);
    }
  }
}

.banner {
  padding: calc(var(--vw) * 36) 0 0;
  margin-bottom: calc(var(--vw) * 50);
  @media screen and (min-width: 769px) {
    padding: calc(var(--vw) * 66) 0 0;
    margin-bottom: calc(var(--vw) * 47);
  }
}
:where(.banner) {
  .banner__list {
    display: flex;
    justify-content: center;
    @media screen and (max-width: 768px) {
      gap: calc(var(--vw) * 14);
      flex-direction: column;
      align-items: center;
      margin-bottom: calc(var(--vw) * 43);
    }
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 24);
    }
  }
  .banner__item-link {
    display: block;
    transition: opacity 0.2s linear;
    &:hover {
      opacity: 0.6;
    }
  }
  .banner__item {
    width: calc(var(--vw) * 351);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 487);
    }
  }
}

.no {
  @media screen and (min-width: 769px) {
    margin-bottom: calc(var(--vw) * 53);
  }
}

.test {
  @media screen and (min-width: 769px) {
    margin-bottom: calc(var(--vw) * 25);
  }
}
:where(.test) {
  picture {
    display: flex;
    justify-content: center;
  }
  img {
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 1210);
    }
  }
}

.date {
  margin-bottom: calc(var(--vw) * 28);
  @media screen and (min-width: 769px) {
    margin-bottom: calc(var(--vw) * 45);
  }
}

.faq {
  margin-bottom: calc(var(--vw) * 20);
  @media screen and (min-width: 769px) {
    margin-bottom: calc(var(--vw) * 10);
  }
}
:where(.faq) {
  picture {
    display: flex;
    justify-content: center;
  }
  img {
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 896);
    }
  }
}

.access {
  margin-bottom: calc(var(--vw) * 30);
  @media screen and (min-width: 769px) {
    margin-bottom: calc(var(--vw) * 80);
  }
}
:where(.access) {
  picture {
    display: flex;
    justify-content: center;
  }
  img {
    width: calc(var(--vw) * 330);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 1087);
    }
  }
}