:root {
  --comp-w: 393;
  /* units */
  --rem: calc(1rem / 16);
  --vw: calc(min(100vw) / var(--comp-w));
  --vh: calc(100vh / var(--comp-h));
  --vh: calc(100dvh / var(--comp-h));
  --lvh: calc(100lvh / var(--comp-h));

  @media screen and (min-width: 769px) {
    --comp-w: 1512;
    --max-w: 1100px;
    /* --vw: min(calc(100vw / var(--comp-w)), 0.0625rem); */
  }
}

#winter2026-main.winter2026 {
  font-family: "Noto Sans JP", sans-serif;

  .mv {}

  :where(.mv) {
    .mv__image {
      width: 100vw;
    }
  }

  .campaign-wrap {
    @media screen and (min-width: 769px) {
      padding-top: calc(var(--vw) * 30);
      padding-bottom: calc(var(--vw) * 54);
      background-image: url("../images/winter2026/campaign/bg_campaign.webp");
      background-repeat: no-repeat;
      background-position: center top;
      background-size: cover;
    }
  }
  
  .campaign {
    @media screen and (min-width: 769px) {
      display: flex;
      justify-content: center;
    }
  }
  :where(.campaign) {
    .campaign__image {
      width: 100vw;
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 992);
      }
    }
  }

  .banner-top {}
  :where(.banner-top) {
    .banner-top__image {
      width: 100vw;
    }
  }

  .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);
      }
    }
  }

  .faq {
    padding: calc(var(--vw) * 40) calc(var(--vw) * 36) calc(var(--vw) * 51);
    background: linear-gradient(90deg, #EBF7FF, #EEFEFF);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--vw) * 55);
    width: 100%;
    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 79) calc(var(--vw) * 10) calc(var(--vw) * 113);
      gap: calc(var(--vw) * 62);
    }
  }

  :where(.faq) {
    .faq__image {
      width: calc(var(--vw) * 327);
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 500);
      }
    }

    .faq__item {
      display: flex;
      flex-direction: column;
      font-family: "Noto Sans JP", sans-serif;
    }

    .faq__item-q {
      color: #2D4B68;
      font-weight: bold;
      font-size: 13.6px;
      letter-spacing: 0.68px;
      line-height: 28px;
      @media screen and (min-width: 769px) {
        font-size: 17px;
        line-height: 35px;
        letter-spacing: 0.85px;
      }
    }

    .faq__item-a {
      color: #005090;
      font-weight: bold;
      font-size: 13.6px;
      letter-spacing: 0.68px;
      line-height: 28px;
      text-decoration: underline;
      text-decoration-thickness: 0.5em;
      text-decoration-color: #FFFF8C;
      text-underline-offset: -0.2em;
      text-decoration-skip-ink: none;
      @media screen and (min-width: 769px) {
        font-size: 17px;
        line-height: 35px;
        letter-spacing: 0.85px;
      }
    }

    .faq__item+.faq__item {
      margin-top: calc(var(--vw) * 28);
      @media screen and (min-width: 769px) {
        margin-top: calc(var(--vw) * 35);
      }
    }

    .faq__item-link {
      text-decoration: underline;
      text-underline-offset: 0.1em;
    }
  }

  .level {
    display: flex;
    justify-content: center;
    background: #FFF;
    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 34) 0 calc(var(--vw) * 63);
    }
  }

  :where(.level) {
    .level__image {
      width: 100%;
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 1024);
      }
    }
  }

  .voice {
    background-color: #FFF;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url("../images/summer2025/bg_voice-sp.webp");
    padding: calc(var(--vw) * 39) 0 calc(var(--vw) * 16);
    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 64) 0 calc(var(--vw) * 31);
      background-image: url("../images/summer2025/bg_voice.webp");
    }
  }

  :where(.voice) {
    .splide__pagination {
      bottom:  calc(var(--vw) * -41) !important;
      @media screen and (max-width: 768px) {
        bottom:  calc(var(--vw) * -27) !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;
    }
    .voice__list__slider {
      @media screen and (min-width: 769px) {
        max-width: calc(var(--vw) * 1339);
        margin: 0 auto;
      }
    }
    .voice__title {
      display: flex;
      width: calc(var(--vw) * 343);
      margin: 0 auto calc(var(--vw) * 29) auto;
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 343);
        margin: 0 auto calc(var(--vw) * 42) auto;
      }
    }
    .voice__list {
      display: flex;
    }
    .voice__item {
      width: calc(var(--vw) * 349);
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 427);
      }
    }
    .voice__annotation {
      color: #005090;
      font-size: 7.5px;
      font-weight: 500;
      margin-top: calc(var(--vw) * 30);
      text-align: right;
      padding-right: calc(var(--vw) * 9);
      @media screen and (min-width: 769px) {
        font-size: 13px;
        letter-spacing: 0.65px;
        padding-right: calc(var(--vw) * 40);
        margin-top: calc(var(--vw) * 62);
      }
    }
  }

  :where(.pass) {
    .pass__image {
      width: 100vw;
    }
  }

  :where(.trouble) {
    .trouble__image {
      width: 100vw;
    }
  }
  
  .solve {
    position: relative;
    z-index: -1;
    margin-top: calc(var(--vw) * -111);
    margin-bottom: calc(var(--vw) * 45);
    @media screen and (min-width: 769px) {
      margin-top: calc(var(--vw) * -133);
      margin-bottom: calc(var(--vw) * 30);
    }
  }

  .support {
    @media screen and (max-width: 768px) {
      margin-bottom: calc(var(--vw) * 39);
    }
    @media screen and (min-width: 769px) {
      display: flex;
      justify-content: center;
    }
  }
  :where(.support) {
    .support__image {
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 1300);
      }
    }
  }

  :where(.result) {
    .result__image {
      width: 100vw;
    }
  }

  .up {
    @media screen and (min-width: 769px) {
      margin-top: calc(var(--vw) * -30);
      margin-bottom: calc(var(--vw) * 46);
    }
  }
  :where(.up) {
    .up__image {
      width: 100vw;
      @media screen and (min-width: 769px) {
        padding-left: calc(var(--vw) * 41);
      }
    }
  }

  .banner-2 {
    margin-bottom: calc(var(--vw) * 46);
    @media screen and (min-width: 769px) {
      margin-bottom: calc(var(--vw) * 57);
    }
  }
  :where(.banner-2) {
    .banner-2__image {
      width: 100vw;
    }
  }


  .comparison {
    position: relative;
    @media screen and (min-width: 769px) {
      display: flex;
      justify-content: center;
      margin-top: calc(var(--vw) * 20);
    }
  }
  .comparison-wrap {
    @media screen and (min-width: 769px) {
      background-image: url("../images/winter2026/comparison/bg_comparison.webp");
      background-repeat: no-repeat;
      background-position: center top;
      background-size: cover;
    }
  }
  :where(.comparison) {
    .comaprison__title-wrap {
      display: flex;
      justify-content: center;
    }
    .comparison__image {
      width: calc(var(--vw) * 837);
      margin-bottom: calc(var(--vw) * 30);
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 1103);
        margin-bottom: calc(var(--vw) * 56);
      }
    }
    .comparison__inner {
      overflow-x: scroll;
    }
    .comparison__title {
      margin-bottom: calc(var(--vw) * 20);
      width: calc(var(--vw) * 279);
    }
  }
  .comparison__arrow-wrap {
    display: flex;
    width: 100vw;
    justify-content: center;
  }
  .comparison__arrow {
    width: calc(var(--vw) * 227);
  }
  .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) * -42);
  }

  .introduction {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url("../images/winter2026/introduction/bg_introduction-sp.webp");
    padding: calc(var(--vw) * 32) 0 calc(var(--vw) * 30);
    @media screen and (min-width: 769px) {
      background-image: url("../images/winter2026/introduction/bg_introduction.webp");
      padding: calc(var(--vw) * 88) 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: #FFFFFF !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);
    }
    .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) * 29) auto;
      }
    }
    .introduction__item:nth-child(2) {
      @media screen and (min-width: 769px) {
        padding-right: calc(var(--vw) * 112);
        box-sizing: content-box;
      }
    }
  }

  .base {}
  :where(.base) {
    .base__image {
      width: 100vw;
    }
  }

  .system {
    margin-top: calc(var(--vw) * -82);
    @media screen and (min-width: 769px) {
      margin-top: calc(var(--vw) * -136);
    }
  }
  :where(.system) {
    .system__image {
      width: 100vw;
    }
  }

  .how {
    @media screen and (max-width: 768px) {
      margin-top: calc(var(--vw) * -21);
    }
  }
  :where(.how) {
    .how__image {
      width: 100vw;
    }
  }

  .interview {
    @media screen and (max-width: 768px) {
      background: #F0FAFF;
      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) * 50) auto calc(var(--vw) * 50);
      }
      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);
      }
    }
  }

  .cta-2 {
    @media screen and (min-width: 769px) {
      background-image: url("../images/winter2026/cta-2/bg_cta-2.webp");
      background-repeat: no-repeat;
      background-position: contain;
      background-size: cover;
    }
  }
  :where(.cta-2) {
    .cta-2__image-wrap {
      margin-bottom: calc(var(--vw) * 10);
      @media screen and (min-width: 769px) {
        display: flex;
        justify-content: center;
        margin-bottom: calc(var(--vw) * 30);
      }
    }
    .cta-2__image {
      width: 100vw;
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 975);
      }
    }
    .days {
      display: flex;
      justify-content: center;
      margin-bottom: calc(var(--vw) * 44);
      @media screen and (min-width: 769px) {
        margin-bottom: calc(var(--vw) * 33);
      }
    }
    .days__image {
      width: 100vw;
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 1214);
      }
    }
    .join__image {
      width: 100vw;
    }
  }

  .date {
    @media screen and (max-width: 768px) {
      width: 100%;
      padding-bottom: calc(var(--vw) * 91);
      padding-top: calc(var(--vw) * 47);
    }
  }
  :where(.date) {
    .date__title-sp {
      @media screen and (max-width: 768px) {
        display: block;
        width: calc(var(--vw) * 309);
        margin: 0 auto calc(var(--vw) * 44) auto;
      }
    }
    .date__inner {
      @media screen and (max-width: 768px) {
        width: 100%;
        overflow-x: scroll;
        padding-left: calc(var(--vw) * 10);
      }
    }
    .date__inner::-webkit-scrollbar{
      display: none;
    }
    .date__image {
      @media screen and (max-width: 768px) {
        width: calc(var(--vw) * 669);
      }
    }
  }
  .date__finger {
    width: calc(var(--vw) * 54);
    animation-name: scrollFinger;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    float: right;
    margin-top: calc(var(--vw) * -95);
  }


  .banner {
    padding: calc(var(--vw) * 25) 0 0;
    margin-bottom: calc(var(--vw) * 50);
    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 74) 0 0;
      margin-bottom: calc(var(--vw) * 72);
    }
  }
  :where(.banner) {
    .banner__list {
      display: flex;
      justify-content: center;
      @media screen and (max-width: 768px) {
        gap: calc(var(--vw) * 18);
        flex-direction: column;
        align-items: center;
        margin-bottom: calc(var(--vw) * 43);
      }
      @media screen and (min-width: 769px) {
        gap: calc(var(--vw) * 24);
        margin-bottom: calc(var(--vw) * 80);
      }
    }
    .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);
      }
    }
  }

  .school {
    @media screen and (min-width: 769px) {
      margin-top: calc(var(--vw) * 10);
    }
  }
  :where(.school) {
    .school__image {
      width: 100vw;
    }
  }

  /* 共通 */
  img {
    width: 100%;
    height: auto;
    max-width: none;
  }
  .only-sp {
    @media screen and (min-width: 769px) {
      display: none !important;
    }
  }
  .only-pc {
    @media screen and (max-width: 768px) {
      display: none !important;
    }
  }

  /* 共通フェードアニメーション */
  .js-fade-in,
  .js-fade-series-ele {
    opacity: 0;
    transform: translateY(15px);
    transition:
      transform 0.5s linear,
      opacity 0.6s linear;
  }

  .js-fade-in.is-shown,
  .js-fade-series-ele.is-shown {
    opacity: 1;
    transform: translateY(0px);
  }

  .js-fade-bubble-sevral-rows-ele {
    opacity: 0;
  }

  .js-fade-bubble-sevral-rows-ele.is-shown {
    -webkit-animation: fadeInScale .9s ease-out forwards;
    animation: fadeInScale .9s ease-out forwards
  }
}

@keyframes fadeInScale {
  0% {
    -webkit-transform: scale(.8);
    transform: scale(.8);
    opacity: 0
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 1
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
  }
}

@keyframes arrowDown {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(15px);
  }
  20% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(15px);
  }
  40% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

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