:root {
  --comp-w: 375;
  /* 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); */
  }
}
main.summer2026 {
  .dont-miss  {
    display: block;
    width: calc(var(--vw) * 346);
    margin: 0 auto calc(var(--vw) * 26) auto;
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 567);
      margin: 0 auto calc(var(--vw) * 31) auto;
    }
  }
  .campaign {
    position: relative;
    .cta-join {
      position: absolute;
      right: 0;
      left: 0;
      margin: 0 auto;
      bottom: calc(var(--vw) * 102);
      @media screen and (min-width: 769px) {
        bottom: calc(var(--vw) * 158);
      }
    }
    .cta-schedule {
      right: 0;
      left: 0;
      margin: 0 auto;
      position: absolute;
      bottom: calc(var(--vw) * 49);
      @media screen and (min-width: 769px) {
        bottom: calc(var(--vw) * 69);
      }
    }
    &.bottom {
      .cta-join {
        bottom: calc(var(--vw) * 205);
        @media screen and (min-width: 769px) {
          bottom: calc(var(--vw) * 216);
        }
      }
      .cta-schedule {
        bottom: calc(var(--vw) * 159);
        @media screen and (min-width: 769px) {
          bottom: calc(var(--vw) * 136);
        }
      }
    }
  }
  .cta-join {
    display: block;
    width: calc(var(--vw) * 347);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 595);
    }
  }
  .cta-schedule {
    display: block;
    width: calc(var(--vw) * 215);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 331);
    }
  }

  .voice {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url("../images/summer2026/bg_voice-sp.webp");
    padding: calc(var(--vw) * 39) 0 calc(var(--vw) * 30);
    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 64) 0 calc(var(--vw) * 27);
      background-image: url("../images/summer2026/bg_voice.webp");
    }
  }
  :where(.voice) {
    .voice__title {
      display: flex;
      margin: 0 auto calc(var(--vw) * 29) auto;
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 450);
        margin: 0 auto calc(var(--vw) * 28) auto;
      }
    }
    .voice__list {
      display: flex;
      @media screen and (min-width: 769px) {
        gap: calc(var(--vw) * 34);
        justify-content: center;
      }
    }
    .voice__item {
      width: calc(var(--vw) * 349);
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 426);
      }
    }
    .voice__annotation {
      color: #005090;
      font-size: 7.5px;
      font-weight: 500;
      margin-top: calc(var(--vw) * 10);
      text-align: right;
      letter-spacing: 0px;
      @media screen and (min-width: 769px) {
        font-size: 13px;
        letter-spacing: -0.5px;
        margin-top: calc(var(--vw) * 10);
        padding-right: calc(var(--vw) * 78);
      }
    }
  }
  .comparison {
    position: relative;
    @media screen and (max-width: 768px) {
      width: 100%;
      margin-top: calc(var(--vw) * 30);
    }
  }
  :where(.comparison) {
    .comparison__title {
      @media screen and (max-width: 768px) {
        display: block;
        width: calc(var(--vw) * 187);
        margin: 0 auto calc(var(--vw) * 24) auto;
      }
    }
    .comparison__inner {
      @media screen and (max-width: 768px) {
        width: 100%;
        overflow-x: scroll;
        padding-left: calc(var(--vw) * 10);
      }
    }
    .comparison__inner::-webkit-scrollbar{
      display: none;
    }
    .comparison__image {
      display: flex;
      width: calc(var(--vw) * 661);
      @media screen and (min-width: 769px) {
        margin: calc(var(--vw) * 31) auto calc(var(--vw) * 33) auto;
        width: calc(var(--vw) * 1103);
      }
    }
  }
  .comparison__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) * -14);
  }

  .cta {
    margin-bottom: 70px;
    .cta-join, .cta-schedule {
      margin: 0 auto;
    }
  }
  .introduction {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url("../images/summer2026/bg_introduction-sp.webp");
    padding: calc(var(--vw) * 58) 0 0;
    @media screen and (min-width: 769px) {
      background-image: url("../images/summer2026/bg_introduction.webp");
      padding: calc(var(--vw) * 88) 0 0;
    }
  }
  :where(.introduction) {
    .introduction__title {
      display: flex;
      justify-content: center;
      width: calc(var(--vw) * 314);
      margin: 0 auto calc(var(--vw) * 49) 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__text-support {
      display: flex;
      width: calc(var(--vw) * 324);
      margin: 0 auto calc(var(--vw) * 27) auto;
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 753);
        margin: 0 auto calc(var(--vw) * 29) auto;
      }
    }
    .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;
      }
    }
    .introduction__check {
      display: flex;
      justify-content: center;
      @media screen and (max-width: 768px) {
        flex-direction: column;
        gap: calc(var(--vw) * 26);
      }
      @media screen and (min-width: 769px) {
        gap: calc(var(--vw) * 33);
      }
    }
    .introduction__check-item {
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 531);
      }
    }
  }
   .system {
    position: relative;
    margin-top: calc(var(--vw) * -88);
    @media screen and (min-width: 769px) {
      margin-top: calc(var(--vw) * -94);
    }
  }
  :where(.system) {
    .system__check-list {
      display: flex;
      justify-content: center;
      @media screen and (min-width: 769px) {
        gap: calc(var(--vw) * 20);
        margin-top: calc(var(--vw) * -239);
        padding-bottom: calc(var(--vw) * 108);
      }
    }
    .system__check-item:first-child {
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 439);
      }
    }
    .system__check-item:nth-child(2) {
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 412);
      }
    }
    .system__check-item:nth-child(3) {
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 451);
      }
    }
  }
  .banner {
    display: flex;
    justify-content: center;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      margin-top: calc(var(--vw) * 23);
      margin-bottom: calc(var(--vw) * 24);
    }
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 23);
      margin-top: calc(var(--vw) * 66);
      margin-bottom: calc(var(--vw) * 61);
    }
    a {
      display: block;
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 487);
      }
    }
  }

  .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) * 40) 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__annotation-sp {
      width: calc(var(--vw) * 314);
      margin: 0 auto 14px auto;
      display: block;
    }
    .date__image {
      @media screen and (max-width: 768px) {
        width: calc(var(--vw) * 542);
      }
    }
  }
  .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);
  }
  .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%;
    margin-bottom: calc(var(--vw) * 33);
    @media screen and (min-width: 769px) {
      margin-bottom: calc(var(--vw) * 65);
      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) * 181);
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 231);
      }
    }

    .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;
    }
  }
  .only-sp {
    @media screen and (min-width: 769px) {
      display: none !important;
    }
  }
  .only-pc {
    @media screen and (max-width: 768px) {
      display: none !important;
    }
  }

  .splide__list {
    align-items: center;
  }

  
  img {
    width: 100%;
    max-width: initial;
    height: auto;
  }
}

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