: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); */
  }
}

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

  .mv {}

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

  .campaign {}
  :where(.campaign) {
    .campaign__image {
      width: 100vw;
    }
  }

  .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 0 calc(var(--vw) * 50);
      }
    }
    &.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) * 357);
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 595);
      }
    }

    .cta__bottom {
      width: calc(var(--vw) * 221);
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 368);
      }
    }
  }

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

  .level {
    display: flex;
    justify-content: center;
    background: #FFF;
    padding: calc(var(--vw) * 22) 0;
    @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) * 30);
    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 64) 0 calc(var(--vw) * 27);
      background-image: url("../images/summer2025/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;
      @media screen and (min-width: 769px) {
        font-size: 13px;
        letter-spacing: 0.65px;
        margin-top: calc(var(--vw) * 10);
      }
    }
  }

  .trouble {

  }
  :where(.trouble) {
    .trouble__image {
      width: 100vw;
    }
  }

  .point {
    padding: calc(var(--vw) * 11) 0 0;
    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 59) 0 0;
    }
  }
  :where(.point) {
    .point__title {
      display: flex;
      margin: 0 auto calc(var(--vw) * 56) auto;
      width: 100%;
      @media screen and (min-width: 769px) {
        margin: 0 auto calc(var(--vw) * 21) auto;
        width: calc(var(--vw) * 901);
      }
    }
    .point__list {
      display: flex;
      justify-content: center;
      @media screen and (max-width: 768px) {
        align-items: center;
        gap: calc(var(--vw) * 29);
        flex-direction: column;
        margin-bottom: calc(var(--vw) * 27);
      }
      @media screen and (min-width: 769px) {
        gap: calc(var(--vw) * 32);
        margin-bottom: calc(var(--vw) * 45);
      }
    }
    .point__item {
      width: calc(var(--vw) * 335);
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 382);
      }
    }
    .point__arrow {
      -webkit-animation: arrowDown 2s infinite linear;
      animation: arrowDown 2s infinite linear;
      display: flex;
      margin: 0 auto calc(var(--vw) * 27) auto;
      width: calc(var(--vw) * 99);
      @media screen and (min-width: 769px) {
        margin: 0 auto calc(var(--vw) * 29) auto;
        width: calc(var(--vw) * 121);
      }
    }
    .point__image {
      width: 100vw;
    }
  }

  .result {
    background-color: #FFF;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-image: url("../images/summer2025/bg_result-sp.webp");
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--vw) * 31) 0 calc(var(--vw) * 46);
    @media screen and (min-width: 769px) {
      background-image: url("../images/summer2025/bg_result.webp");
      padding: calc(var(--vw) * 62) 0 calc(var(--vw) * 111);
    }
  }
  :where(.result) {
    .result__list {
      display: grid;
      @media screen and (min-width: 769px) {
        grid-template-columns: calc(var(--vw) * 297) calc(var(--vw) * 297) calc(var(--vw) * 297) calc(var(--vw) * 297);
        grid-template-rows: max-content max-content;
        /* margin-bottom: calc(var(--vw) * 10); */
      }
    }
    .result__lead-image {
      display: flex;
      margin: 0 auto calc(var(--vw) * 28) auto;
      @media screen and (min-width: 769px) {
        margin: 0 auto calc(var(--vw) * 11) auto;
        width: calc(var(--vw) * 532);
      }
    }
    .result__text-image {
      display: flex;
      width: calc(var(--vw) * 350);
      margin: 0 auto calc(var(--vw) * 34) auto;
      @media screen and (min-width: 769px) {
        margin: 0 auto calc(var(--vw) * 43) auto;
        width: calc(var(--vw) * 1267);
      }
    }
    .result__percentage-1 {
      width: calc(var(--vw) * 319);
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 356);
      }
    }
    .result__percentage-2 {
      width: calc(var(--vw) * 302);
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 337);
      }
    }
    .result__percentage-3 {
      width: calc(var(--vw) * 302);
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 337);
      }
    }
    .result__percentage-list {
      display: flex;
      justify-content: center;
      @media screen and (max-width: 768px) {
        flex-direction: column;
        gap: calc(var(--vw) * 18);
        align-items: center;
        margin-bottom: calc(var(--vw) * 40);
      }
      @media screen and (min-width: 769px) {
        margin-bottom: calc(var(--vw) * 42);
        gap: calc(var(--vw) * 21);
        align-items: center;
      }
    }
    .result__annotaiton {
      margin: 0 auto;
      width: calc(var(--vw) * 318);
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 871);
      }
    }
  }

  .comparison {
    position: relative;
    @media screen and (max-width: 768px) {
      width: 100%;
      margin-top: calc(var(--vw) * 30);
    }
  }
  :where(.comparison) {
    .deco-snow {
      position: absolute;
      top: 72%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }
    .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) * 24) 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);
  }
  .introduction {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url("../images/summer2025/bg_introduction-sp.webp");
    padding: calc(var(--vw) * 58) 0 0;
    @media screen and (min-width: 769px) {
      background-image: url("../images/summer2025/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);
      }
    }
  }

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

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

  .voice-parent {}
  :where(.voice-parent) {
    .voice-parent__image {
      width: 100vw;
    }
  }

  .banner {
    padding: calc(var(--vw) * 25) 0 0;
    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 66) 0 0;
    }
  }
  :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);
      }
    }
  }

  .campaign-bottom {
    position: relative;
  }
  :where(.campaign-bottom) {
    .deco-snow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }
  }

  /* 共通 */
  img {
    width: 100%;
    height: auto;
    max-width: none;
  }
  footer {
    img {
      max-width: 100%;
      width: initial;
      height: initial;
    }
  }
  .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);
  }
}