@charset "utf-8";

/*--- mainimg ---*/

@media print, screen and (min-width: 768px) {
  .mainimg {
    position: relative;
  }
  .mainimg-txt {
    position: absolute;
    top: 7.0833vw; /* 102px */
    left: 8.3333vw; /* 120px */
  }
  .mainimg-lead {
    font-weight: 500;
    font-size: calc(1.488vw + 0.457rem);
    line-height: 1.7692;
    color: var(--color-txt-inverse);
  }
  .mainimg-logo {
    margin-top: 1.3889vw;
    width: 16.3194vw;
  }
  .mainimg-btn {
    margin-top: 7.0139vw;
  }
}
@media only screen and (min-width: 1440px) {
  .btn.mainimg-btn {
    font-size: 1.25vw;
  }
}

@media only screen and (max-width: 767px) {
  .mainimg {
    position: relative;
    width: 100%;
  }
  .mainimg picture {
    display: block;
    height: calc(100svh - 106px - 34px);
    object-fit: cover;
    object-position: center;
    overflow: hidden;
  }
  .mainimg picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mainimg-txt {
    position: absolute;
    top: 6.667vw; /* 26px */
    left: 7.436vw; /* 29px */
  }
  .mainimg-lead {
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.667;
    color: var(--color-txt-inverse);
  }
  .mainimg-logo {
    margin-top: 4.872vw;
    width: 235px;
  }
  .mainimg-btn {
    display: none;
  }

  body.js-not-scrolled .floating-cta {
    --floating-cta-bottom: 0;
    bottom: var(--floating-cta-bottom);
  }
}
@media only screen and (max-width: 375px) {
  /* 667 / 884 ベース */
  .mainimg-txt {
    top: 5.0304vw; /* 26px */
  }
  .mainimg-logo {
    margin-top: 3.676vw;
    width: 45.37vw;
  }
}

/* swiper */

@media print, screen and (min-width: 768px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .swiper-button-prev,
  .swiper-button-next {
    position: absolute !important;
    top: calc(var(--swiper-arrow-base-height) / 2) !important;
    z-index: 10;
  }
  .swiper-button-prev {
    left: var(--container-padding-sp) !important;
    transform: translateY(-50%);
  }
  .swiper-button-next {
    transform: translateY(-50%) rotate(180deg);
    right: var(--container-padding-sp) !important;
  }
}
.features-list > li {
  position: relative;
}
.features-list .card {
  position: relative;
  z-index: 0;
}
.features-num {
  position: absolute;
  top: 0;
  z-index: 10;
}
.features-num img {
  height: 100%;
  width: auto;
  display: block;
}
@media print, screen and (min-width: 768px) {
  .features-num {
    left: 2.847vw;
    height: 2.639vw;
    transform: translateY(-33%);
  }
  .features-list > li > .card {
    height: 100%;
  }
  .features-txt {
    width: 16.181vw;
  }
  .features-img {
    width: 14.791vw;
  }
}
@media only screen and (min-width: 1440px) {
  .features-txt {
    width: 233px;
  }
  .features-img {
    width: 213px;
  }
  .features-num {
    left: 41px;
    height: 38px;
  }
}
@media only screen and (max-width: 767px) {
  .features-list {
    row-gap: 5.128vw;
  }
  .features-list > li {
    position: relative;
  }
  .features-num {
    left: 5.897vw;
    height: 5.384vw;
    transform: translateY(-40%);
    line-height: 0;
  }
}
/*----- accessory -----*/
@media only screen and (min-width: 768px) {
  .accessory-asp1 {
    aspect-ratio: 303/194;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .accessory-asp1 {
    aspect-ratio: 270/173;
    width: 100%;
  }
}
/*----- page nav anchor -----*/

@media (min-width: 768px) and (max-width: 1439px) {
  #color {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 7.5vw) !important;
  }
  #features {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 7.5vw) !important;
  }
  #usage {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 7.5vw) !important;
  }
  #equipment {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 7.5vw) !important;
  }
  #safety {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 7.5vw) !important;
  }
  #obstacles {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 7.5vw) !important;
  }
  #accessory {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 4.5vw) !important;
  }
  #movie {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 4.5vw) !important;
  }
}
@media (min-width: 1440px) {
  #color {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 108px) !important;
  }
  #features {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 108px) !important;
  }
  #usage {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 108px) !important;
  }
  #equipment {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 108px) !important;
  }
  #safety {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 108px) !important;
  }
  #obstacles {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 108px) !important;
  }
  #accessory {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 65px) !important;
  }
  #movie {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 65px) !important;
  }
}
@media (max-width: 767px) {
  #color {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 70px) !important;
  }
  #features {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 70px) !important;
  }
  #usage {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 70px) !important;
  }
  #equipment {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 70px) !important;
  }
  #safety {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 70px) !important;
  }
  #obstacles {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 70px) !important;
  }
  #accessory {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 50px) !important;
  }
  #movie {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--sticky-header-height) - 50px) !important;
  }
}