@keyframes scrollAnimation {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  45%, 60% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
}
img {
  width: 100%;
  height: auto;
}

.-spOnly {
  display: none;
}

.kicks {
  overflow-x: hidden;
}
.kicks .sec-in {
  max-width: 860px;
  margin-inline: auto;
}
.kicks .cv__tit {
  width: 550px;
  margin-inline: auto;
  margin-bottom: 30px;
}
.kicks .cv__area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 980px;
  margin-inline: auto;
}
.kicks .cv__area > a {
  transition: 0.3s;
}
.kicks .cv__area > a:hover {
  opacity: 0.7;
}
.kicks .cv-block__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 980px;
}
.kicks .cv-block__inner a {
  transition: 0.3s;
}
.kicks .cv-block__inner a:hover {
  opacity: 0.7;
}
.kicks .float-bottom-conversion {
  height: 110px;
}
.kicks .footnote {
  background-color: #2e2e2e;
  padding-block: 40px;
  color: #fff;
}
.kicks .pagetop {
  bottom: 130px;
}
.kicks .secHero {
  position: relative;
  background: url(../img/hero_bg.png) no-repeat top center/100% auto;
  z-index: 1;
}
.kicks .secHero__deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}
.kicks .secHero__cv {
  margin-top: -50px;
}
.kicks .secHero__intro {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 500px;
  align-items: center;
  margin-top: 100px;
  max-width: 1400px;
  margin-inline: auto;
}
.kicks .secHero__intro--txt {
  position: relative;
  left: -85px;
}
.kicks .secHero__intro--scroll {
  position: absolute;
  bottom: -45px;
  left: calc(50% + 320px);
  width: 100px;
  transition: 0.3s;
  display: grid;
  grid-template-columns: 14px 72px;
  align-items: center;
  gap: 16px;
}
.kicks .secHero__intro--scroll .arrow {
  animation: scrollAnimation 2s infinite cubic-bezier(1, 0, 0, 1);
}
.kicks .secHero__intro--scroll:hover {
  opacity: 0.7;
}
.kicks .secPoint {
  padding-top: 150px;
}
.kicks .secPoint__box + .secPoint__box {
  margin-top: 180px;
}
.kicks .secPoint__box._01 .secPoint__mainv--tit {
  width: 886px;
}
.kicks .secPoint__box._01 .secPoint__cnt--box:nth-child(1) .secPoint__cnt--tit {
  width: 552px;
}
.kicks .secPoint__box._01 .secPoint__cnt--box:nth-child(2) .secPoint__cnt--tit {
  width: 843px;
}
.kicks .secPoint__box._01 .secPoint__cnt--box:nth-child(3) .secPoint__cnt--tit {
  width: 600px;
}
.kicks .secPoint__box._02 .secPoint__mainv--tit {
  width: 660px;
}
.kicks .secPoint__box._02 .secPoint__cnt--box:nth-child(1) .secPoint__cnt--tit {
  width: 570px;
  margin-top: 60px;
}
.kicks .secPoint__box._02 .secPoint__cnt--box:nth-child(1) .secPoint__cnt--voice:nth-of-type(1) {
  padding-top: 0;
}
.kicks .secPoint__box._03 .secPoint__mainv--tit {
  width: 520px;
}
.kicks .secPoint__box._03 .secPoint__cnt--box:nth-child(1) .secPoint__cnt--tit {
  width: 542px;
}
.kicks .secPoint__box._03 .secPoint__cnt--box:nth-child(2) .secPoint__cnt--tit {
  width: 660px;
}
.kicks .secPoint__mainv {
  position: relative;
  background: url(../img/point_bg.png) no-repeat top center/cover;
  padding-block: 70px;
}
.kicks .secPoint__mainv--num {
  position: absolute;
  top: -80px;
  left: calc(50% - 500px);
  width: 100%;
  height: 160px;
}
.kicks .secPoint__mainv--num img {
  width: auto;
  height: 100%;
}
.kicks .secPoint__mainv--tit {
  margin-inline: auto;
}
.kicks .secPoint__intro {
  max-width: 1400px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 500px;
  align-items: center;
  gap: 50px;
  padding-block: 50px;
  padding-inline: 0 210px;
}
.kicks .secPoint__intro:has(.secPoint__intro--img:only-child) {
  display: block;
  padding-inline: 0;
}
.kicks .secPoint__intro:has(.secPoint__intro--img:only-child) .secPoint__intro--img {
  width: 875px;
  margin-inline: auto;
}
.kicks .secPoint__cnt {
  background: #3341A6;
  padding-block: 70px 200px;
  color: #fff;
}
.kicks .secPoint__cnt--box + .secPoint__cnt--box {
  margin-top: 60px;
}
.kicks .secPoint__cnt--tit {
  margin-inline: auto;
}
.kicks .secPoint__cnt--img {
  margin-top: 50px;
}
.kicks .secPoint__cnt--img:has(.img) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
}
.kicks .secPoint__cnt--img:has(.img) .note {
  display: block;
  font-size: 16px;
  margin-top: 7px;
}
.kicks .secPoint__cnt--img:has(.img) .note .small {
  display: block;
  font-size: 13px;
  margin-top: 12px;
}
.kicks .secPoint__cnt--img > a {
  transition: 0.3s;
}
.kicks .secPoint__cnt--img > a:hover {
  opacity: 0.7;
}
.kicks .secPoint__cnt--slide {
  position: relative;
  margin-top: 50px;
}
.kicks .secPoint__cnt--slide.-colorSlide {
  margin-top: 80px;
}
.kicks .secPoint__cnt--slide.-colorSlide .swiper {
  margin-top: 50px;
}
.kicks .secPoint__cnt--slide.-colorSlide .swiper-button-next,
.kicks .secPoint__cnt--slide.-colorSlide .swiper-button-prev {
  top: 58%;
  background: none;
  width: 44px;
  height: 44px;
  border-radius: 0;
}
.kicks .secPoint__cnt--slide.-colorSlide .swiper-button-next::after,
.kicks .secPoint__cnt--slide.-colorSlide .swiper-button-prev::after {
  width: 70%;
  height: 70%;
  border-width: 3px;
}
.kicks .secPoint__cnt--slide.-colorSlide .swiper-button-next {
  right: -70px;
}
.kicks .secPoint__cnt--slide.-colorSlide .swiper-button-prev {
  left: -70px;
}
.kicks .secPoint__cnt--slide.-colorSlide .swiper-pagination {
  position: absolute;
  top: -30px;
  bottom: auto;
  left: 50%;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 20px;
  width: auto;
  transform: translateX(-50%);
}
.kicks .secPoint__cnt--slide.-colorSlide .swiper-pagination-bullet {
  position: relative;
  width: 35px;
  height: 35px;
  background: var(--color-main);
  background-clip: padding-box;
  border: 1px solid transparent;
  border-radius: 50%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1;
  opacity: 1;
  overflow: hidden;
  transition: 0.3s;
  cursor: pointer;
}
.kicks .secPoint__cnt--slide.-colorSlide .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  inset: 0 0 50%;
  background: var(--color-sub, var(--color-main));
}
.kicks .secPoint__cnt--slide.-colorSlide .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-color: #B8B8B8;
}
.kicks .secPoint__cnt--slide .swiper-button-next,
.kicks .secPoint__cnt--slide .swiper-button-prev {
  background: linear-gradient(120deg, rgb(46, 180, 189) 0%, rgb(38, 152, 189) 100%);
  border-radius: 100vmax;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kicks .secPoint__cnt--slide .swiper-button-next::after,
.kicks .secPoint__cnt--slide .swiper-button-prev::after {
  content: "";
  position: relative;
  left: -3px;
  width: 25%;
  height: 25%;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  rotate: -45deg;
}
.kicks .secPoint__cnt--slide .swiper-button-next::slotted(svg), .kicks .secPoint__cnt--slide .swiper-button-next svg,
.kicks .secPoint__cnt--slide .swiper-button-prev::slotted(svg),
.kicks .secPoint__cnt--slide .swiper-button-prev svg {
  display: none;
}
.kicks .secPoint__cnt--slide .swiper-button-next {
  right: -40px;
}
.kicks .secPoint__cnt--slide .swiper-button-prev {
  left: -40px;
}
.kicks .secPoint__cnt--slide .swiper-button-prev::after {
  rotate: 135deg;
  left: 3px;
}
.kicks .secPoint__cnt--slide .colorSlide__caption {
  text-align: center;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
}
.kicks .secPoint__cnt--slide .colorSlide__grade {
  display: block;
}
.kicks .secPoint__cnt--voice {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 25px;
  align-items: center;
  color: #fff;
  padding-block: 35px 70px;
  border-bottom: 1px solid #fff;
  padding-inline: 40px;
}
.kicks .secPoint__cnt--voice.-borderless {
  border: none;
  padding-bottom: 0;
}
.kicks .secPoint__cnt--txt {
  font-size: 14px;
  line-height: 1.8;
}
.kicks .secPoint__cnt--txt .strong {
  display: block;
  font-weight: bold;
  margin-top: 5px;
}
.kicks .secPoint__cnt--note {
  font-size: 12px;
  margin-top: 40px;
}
.kicks .secPoint__cv {
  margin-top: -120px;
}
.kicks .secGrade {
  padding-block: 100px 0;
}
.kicks .secGrade__inner {
  max-width: 880px;
  margin-inline: auto;
}
.kicks .secGrade__tit {
  width: 450px;
  margin-inline: auto;
}
.kicks .secGrade__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 40px;
  padding-block: 20px;
  gap: 180px;
}
.kicks .secGrade__list::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 1px;
  height: 100%;
  background: #D9D9D9;
}
.kicks .secGrade__items--info {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}
.kicks .secGrade__items--price {
  font-size: 20px;
  margin-top: 15px;
  line-height: 1;
}
.kicks .secGrade__items--price .num {
  font-size: 46px;
  display: block;
  margin-top: 10px;
}
.kicks .secGrade__items--price .num .small {
  font-size: 26px;
  margin-left: 5px;
}
.kicks .secGrade__items--note {
  font-size: 14px;
  margin-top: 20px;
}
.kicks .secGrade__cv {
  margin-top: 100px;
}
.kicks .secGrade__bg {
  position: relative;
  z-index: -1;
  margin-top: -50px;
}/*# sourceMappingURL=index.css.map */