:root {
  --loop-reset-pos: -200px;
  --loop-sec: 10s;
}

@keyframes loop {
  0% {
    left: 0;
  }
  100% {
    left: var(--loop-reset-pos);
  }
}
@layer page {
  @media screen and (min-width: 768px) {
    .l-header__nav {
      background: url("../../../img/content/nav_bg_home.svg") 0 0/contain no-repeat;
    }
  }
  .l-nav__list {
    display: flex;
  }
  .home-content {
    margin-bottom: 6.25rem;
  }
  @media screen and (max-width: 767px) {
    .home-content {
      margin-bottom: 10.6666666667vw;
    }
  }
  .home-mv {
    position: relative;
  }
  @media screen and (max-width: 767px) {
    .home-mv {
      margin-bottom: 28.8vw;
    }
  }
  .home-mv::before, .home-mv::after {
    position: absolute;
    content: "";
    display: block;
    z-index: 2;
    pointer-events: none;
  }
  @media screen and (min-width: 768px) {
    .home-mv::before {
      right: 0;
      bottom: -8.125rem;
      width: 30rem;
      aspect-ratio: 480/374;
      background: url("../../../img/page/home/mv_illust.svg") 2.5rem 0/30rem auto no-repeat;
      z-index: 210;
    }
  }
  .home-mv::after {
    left: 0;
    bottom: -1px;
    width: 100%;
    aspect-ratio: 1440/200;
    background: url("../../../img/page/home/mv_wave.png") 0 0/cover no-repeat;
    z-index: 200;
  }
  @media screen and (max-width: 767px) {
    .home-mv::after {
      background-image: url("../../../img/page/home/mv_wave_sp.png");
      aspect-ratio: 760/105;
    }
  }
  .home-mv__inner {
    overflow: hidden;
    position: relative;
  }
  @media screen and (min-width: 768px) {
    .home-mv__inner {
      height: 100vh;
      height: 100svh;
      min-height: 800px;
    }
  }
  @media screen and (max-width: 767px) {
    .home-mv__inner {
      height: 68vw;
    }
  }
  .home-mv__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 230;
    transform: translate(-50%, -50%);
    width: 33.75rem;
  }
  @media screen and (max-width: 767px) {
    .home-mv__logo {
      margin-top: 34.6666666667vw;
      width: 72vw;
    }
  }
  .home-mv__logo img {
    width: 100%;
  }
  .home-mv .slick-list,
  .home-mv .slick-track {
    height: 100%;
  }
  .home-mv__img {
    width: 100%;
    height: 100%;
  }
  .home-mv__img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .home-loop {
    position: relative;
    z-index: 220;
    margin-top: 3.75rem;
  }
  @media screen and (max-width: 767px) {
    .home-loop {
      overflow: hidden;
    }
  }
  .home-loop__inner {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 1.125rem;
  }
  @media screen and (min-width: 768px) {
    .home-loop__inner {
      justify-content: center;
    }
  }
  @media screen and (max-width: 767px) {
    .home-loop__inner {
      animation: loop var(--loop-sec) infinite linear;
      animation-delay: 0s;
      padding: 0;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
  }
  @media (hover: hover) {
    .home-loop__inner:hover {
      animation-play-state: paused;
    }
  }
  .home-loop__list {
    display: flex;
    gap: 1.25rem;
  }
  @media screen and (max-width: 767px) {
    .home-loop__list {
      gap: 2.6666666667vw;
    }
  }
  .home-loop__list a {
    overflow: hidden;
    display: block;
    width: 10rem;
    height: 10rem;
    border-radius: 62.5rem;
    transition: var(--asec) scale;
  }
  @media screen and (max-width: 767px) {
    .home-loop__list a {
      width: 24vw;
      height: 24vw;
    }
  }
  @media (hover: hover) {
    .home-loop__list a:hover {
      scale: 1.2;
    }
  }
  .home-loop__list a img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .has-wave + .home-sec {
    position: relative;
    z-index: 2;
    margin-top: -2.7777777778vw;
  }
  @media screen and (max-width: 767px) {
    .has-wave + .home-sec {
      margin-top: 0;
    }
  }
  .home-sec {
    margin-top: 4.375rem;
  }
  @media screen and (max-width: 767px) {
    .home-sec {
      margin-top: 9.3333333333vw;
    }
  }
  .home-sec.has-wave {
    background: url("../../../img/page/home/sec_wave.png") 0 0/contain no-repeat, #fff url("../../../img/page/home/sec_wave_btm.png") 0 100%/contain no-repeat;
    padding-top: 8.125rem;
    padding-bottom: calc(12.5vw + 3.5rem);
  }
  @media screen and (max-width: 767px) {
    .home-sec.has-wave {
      margin-top: 13.3333333333vw;
      padding-top: 17.3333333333vw;
      padding-bottom: 24vw;
    }
  }
  .home-sec__body {
    position: relative;
    z-index: 6;
    margin-top: 3.75rem;
  }
  @media screen and (max-width: 767px) {
    .home-sec__body {
      margin-top: 6vw;
    }
  }
  .home-sec__wlink {
    margin-top: 3.75rem;
    text-align: center;
  }
  @media screen and (max-width: 767px) {
    .home-sec__wlink {
      margin-top: 8vw;
    }
  }
  .home-sec__wlink a {
    width: 25rem;
  }
  @media screen and (max-width: 767px) {
    .home-sec__wlink a {
      width: 76vw;
    }
  }
  .home-sec-feature + .home-sec-event::after {
    top: -18.125rem;
  }
  .home-sec-event {
    position: relative;
  }
  .home-sec-event::after {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    right: 0;
    top: -5.625rem;
    width: 26.25rem;
    height: 22.5rem;
    background: url("../../../img/page/home/feature_illust_1.svg") 0 0/contain no-repeat;
  }
  @media screen and (max-width: 767px) {
    .home-sec-event::after {
      display: none;
    }
  }
  .home-sec-ranking,
  .home-sec-report-ranking {
    position: relative;
    margin-top: 5rem;
  }
  .home-sec-ranking::before,
  .home-sec-report-ranking::before {
    pointer-events: none;
    content: "";
    display: block;
    position: absolute;
    left: 10rem;
    top: -5.625rem;
    width: 8.5625rem;
    aspect-ratio: 137/144;
    background: url("../../../img/page/home/ranking_illust.svg") 0 0/contain no-repeat;
    z-index: 3;
  }
  @media screen and (max-width: 767px) {
    .home-sec-ranking::before,
    .home-sec-report-ranking::before {
      left: inherit;
      top: -5.3333333333vw;
      right: 5.3333333333vw;
      width: 13.8666666667vw;
    }
  }
  @media screen and (max-width: 767px) {
    .home-sec-ranking,
    .home-sec-report-ranking {
      margin-top: 10.6666666667vw;
    }
  }
  .home-sec-report-ranking::before {
    left: 11.875rem;
    top: -3.75rem;
    width: 7.5rem;
    aspect-ratio: 120/120;
    background-image: url("../../../img/page/home/ranking_report_illust.svg");
  }
  @media screen and (max-width: 767px) {
    .home-sec-report-ranking::before {
      display: none;
    }
  }
  .home-sec-feature {
    position: relative;
  }
  .home-sec-feature::before {
    content: "";
    display: block;
    position: absolute;
  }
  .home-sec-feature::before {
    left: 0;
    top: 1.875rem;
    width: 22.5rem;
    height: 18.75rem;
    background: url("../../../img/page/home/feature_illust.svg") 0 0/contain no-repeat;
  }
  @media screen and (max-width: 767px) {
    .home-sec-feature::before {
      background-image: url("../../../img/page/home/feature_illust_sp.svg");
      width: 28vw;
      top: 2.6666666667vw;
      height: 23.3333333333vw;
    }
  }
  .home-sec-feature .home-hdr__ttl span {
    padding: 0 0.25em;
  }
  .home-hdr {
    text-align: center;
    font-family: var(--sans-maru);
  }
  .home-hdr__ttl {
    font-size: 3.125rem;
  }
  @media screen and (max-width: 767px) {
    .home-hdr__ttl {
      font-size: 6.6666666667vw;
    }
  }
  .home-hdr__en {
    font-size: 0.875rem;
    letter-spacing: 0.06em;
  }
  @media screen and (max-width: 767px) {
    .home-hdr__en {
      font-size: 1.8666666667vw;
    }
  }
  .home-feature {
    width: 57.5rem;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4.375rem;
  }
  @media screen and (max-width: 767px) {
    .home-feature {
      gap: 8vw;
    }
  }
  @media (hover: hover) {
    .home-feature__link:hover {
      text-decoration: underline;
    }
    .home-feature__link:hover .home-feature__img img {
      scale: 1.04;
    }
  }
  .home-feature__img {
    overflow: hidden;
    border-radius: 2.5rem;
  }
  @media screen and (min-width: 768px) {
    .home-feature__img {
      aspect-ratio: 5/1.652;
    }
  }
  @media screen and (max-width: 767px) {
    .home-feature__img {
      border-radius: 5.3333333333vw;
      height: 33.3333333333vw;
    }
  }
  .home-feature__img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: 0.25s scale;
  }
  .home-feature__text {
    margin-top: 1.25rem;
    padding: 0 1.25rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-align: center;
  }
  @media screen and (max-width: 767px) {
    .home-feature__text {
      -webkit-line-clamp: 3;
      margin-top: 2.1333333333vw;
      padding: 0 1.3333333333vw;
      line-height: 1.8;
    }
  }
  .home-sec-news {
    position: relative;
  }
  .home-sec-news::before, .home-sec-news::after {
    position: absolute;
    content: "";
    display: block;
    top: 0;
    z-index: 2;
    pointer-events: none;
    width: 30rem;
    aspect-ratio: 480/400;
    background: url("../../../img/page/home/news_illust_0.png") 0 0/contain no-repeat;
  }
  @media screen and (max-width: 767px) {
    .home-sec-news::before, .home-sec-news::after {
      background-image: url("../../../img/page/home/news_illust_0_sp.svg");
      width: 24vw;
      aspect-ratio: 180/150;
      top: 2.6666666667vw;
    }
  }
  .home-sec-news::before {
    left: 0;
  }
  .home-sec-news::after {
    top: 2.5rem;
    right: 15rem;
    background-image: url("../../../img/page/home/news_illust_1.svg");
    width: 6.875rem;
    aspect-ratio: 110/126;
  }
  @media screen and (max-width: 767px) {
    .home-sec-news::after {
      display: none;
    }
  }
  .home-sec-report {
    position: relative;
    z-index: 1;
  }
  .home-sec-report::before, .home-sec-report::after {
    position: absolute;
    content: "";
    display: block;
    top: calc(-12.5vw + 3.5rem);
    z-index: 2;
    pointer-events: none;
    width: 17.5rem;
    aspect-ratio: 280/200;
    background: url("../../../img/page/home/report_illust_0.svg") 0 0/contain no-repeat;
  }
  @media screen and (max-width: 767px) {
    .home-sec-report::before, .home-sec-report::after {
      background-image: url("../../../img/page/home/report_illust_0_sp.svg");
      width: 21.3333333333vw;
      top: -8vw;
    }
  }
  .home-sec-report::before {
    left: 0;
  }
  .home-sec-report::after {
    right: 0;
    background-image: url("../../../img/page/home/report_illust_1.svg");
    width: 28.75rem;
    aspect-ratio: 460/368;
  }
  @media screen and (max-width: 767px) {
    .home-sec-report::after {
      background-image: url("../../../img/page/home/report_illust_1_sp.svg");
      top: -14.6666666667vw;
      width: 32vw;
    }
  }
  .home-sec-column {
    position: relative;
    z-index: 1;
  }
  .home-sec-column::before, .home-sec-column::after {
    position: absolute;
    content: "";
    display: block;
    top: 3.75rem;
    z-index: 2;
    pointer-events: none;
    width: 28.75rem;
    aspect-ratio: 460/340;
    background: url("../../../img/page/home/column_illust_0.svg") 0 0/contain no-repeat;
  }
  @media screen and (max-width: 767px) {
    .home-sec-column::before, .home-sec-column::after {
      background-image: url("../../../img/page/home/column_illust_0_sp.svg");
      width: 30.6666666667vw;
      top: -4vw;
    }
  }
  .home-sec-column::before {
    left: 0;
  }
  .home-sec-column::after {
    right: 11.875rem;
    top: 1.25rem;
    background-image: url("../../../img/page/home/column_illust_1.svg");
    width: 13.875rem;
    aspect-ratio: 222/130;
  }
  @media screen and (max-width: 767px) {
    .home-sec-column::after {
      right: 5.3333333333vw;
      width: 22.8vw;
    }
  }
  .home-sec-mall {
    position: relative;
    z-index: 1;
    margin-bottom: 3.125rem;
  }
  .home-sec-mall::before, .home-sec-mall::after {
    position: absolute;
    content: "";
    display: block;
    top: -6.25rem;
    z-index: 2;
    pointer-events: none;
    width: 10rem;
    aspect-ratio: 160/130;
    background: url("../../../img/page/home/mall_illust_0.svg") 0 0/contain no-repeat;
  }
  @media screen and (max-width: 767px) {
    .home-sec-mall::before, .home-sec-mall::after {
      width: 16.4vw;
      aspect-ratio: 123/100;
    }
  }
  .home-sec-mall::before {
    left: 12.5rem;
  }
  @media screen and (max-width: 767px) {
    .home-sec-mall::before {
      top: -13.3333333333vw;
      left: 8vw;
    }
  }
  .home-sec-mall::after {
    right: 0;
    top: -5.625rem;
    background-image: url("../../../img/page/home/mall_illust_1.svg");
    width: 25rem;
    aspect-ratio: 400/320;
  }
  @media screen and (max-width: 767px) {
    .home-sec-mall::after {
      background-image: url("../../../img/page/home/mall_illust_1_sp.svg");
      width: 28vw;
      aspect-ratio: 210/168;
    }
  }
  .home-mall {
    z-index: 1;
  }
  @media screen and (min-width: 768px) {
    .home-mall {
      width: 75rem;
      margin-left: auto;
      margin-right: auto;
    }
  }
  .home-mall::after {
    pointer-events: none;
    position: absolute;
    content: "";
    display: block;
    left: 0;
    bottom: -18.75rem;
    z-index: 10;
    pointer-events: none;
    width: 25rem;
    aspect-ratio: 400/260;
    background: url("../../../img/page/home/mall_illust_2.png") 0 0/contain no-repeat;
  }
  @media screen and (max-width: 767px) {
    .home-mall::after {
      bottom: -22.6666666667vw;
      width: 26.6666666667vw;
    }
  }
}