:root {
  --pc: 1366 * 100vw;
  --sp: 375 * 100vw;
}

#footer {
  margin-top: 0;
}

#main {
  color: #ACACAC;
  font-family: "futura-pt", sans-serif;
  display: flex;
  align-items: flex-start;
  gap: 0 calc(135 / var(--pc));
}
#main .fade {
  opacity: 0;
}
#main .fade.active {
  animation: fade 0.8s ease-in-out forwards;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#main .left-area {
  width: calc(697 / var(--pc));
  height: 100vh;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  left: 0;
}
#main .index-area {
  height: 100%;
  background: #F8F8F8;
  padding: calc(110 / var(--pc)) calc(127 / var(--pc)) calc(95 / var(--pc));
  box-sizing: border-box;
  animation: fade 1s ease-in-out forwards;
  opacity: 0;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#main .index-area::-webkit-scrollbar {
  display: none;
}
#main .index-area > img {
  width: calc(190 / var(--pc));
  display: block;
  margin: 0 auto;
}
#main .index-area .index {
  width: 100%;
  margin-top: calc(89 / var(--pc));
}
#main .index-area .index > img {
  width: calc(68 / var(--pc));
  display: block;
  margin: 0 auto;
}
#main .index-area .index .index-container {
  margin-top: calc(26 / var(--pc));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(18 / var(--pc));
}
#main .index-area .index .index-container a {
  width: calc((100% - 54 / var(--pc)) / 4);
}
#main .index-area .index .index-container a img {
  transition: 0.3s;
  filter: brightness(50%);
}
#main .index-area .index .index-container a:hover {
  opacity: 1;
}
#main .index-area .index .index-container a.active img {
  filter: unset;
}
#main .right-area {
  width: calc(400 / var(--pc));
}
#main .right-area .kv-area {
  width: 100%;
  animation: fade 1s ease-in-out forwards;
  opacity: 0;
}
#main .right-area .num {
  display: block;
}
#main .right-area .price {
  margin-top: calc(17 / var(--pc));
  text-align: right;
}
#main .right-area .price a {
  font-size: calc(11 / var(--pc));
  line-height: calc(18 / var(--pc));
  letter-spacing: 0.0055em;
  color: #ACACAC;
}
#main .right-area .images {
  display: flex;
  gap: 0 calc(6 / var(--pc));
  margin-top: calc(19 / var(--pc));
}
#main .right-area .images a {
  width: calc(197 / var(--pc));
}
#main .right-area .images div:nth-of-type(2) {
  animation-delay: 0.2s;
}
#main .right-area .swiper-pagination {
  top: calc(10 / var(--pc));
  right: calc(10 / var(--pc));
  left: unset;
  width: calc(10 / var(--pc));
}
#main .right-area .swiper-pagination span {
  margin: 0;
  background: #fff;
  opacity: 0.5;
}
#main .right-area .swiper-pagination span + span {
  margin-top: calc(10 / var(--pc));
}
#main .right-area .swiper-pagination span.swiper-pagination-bullet-active {
  opacity: 1;
}
#main .right-area #style01 {
  width: calc(362 / var(--pc));
  margin: calc(100 / var(--pc)) auto 0;
}
#main .right-area #style01 .num {
  width: calc(68 / var(--pc));
  margin-bottom: calc(10 / var(--pc));
}
#main .right-area #style02 {
  width: calc(362 / var(--pc));
  margin: calc(99 / var(--pc)) auto 0;
}
#main .right-area #style02 .num {
  width: calc(73 / var(--pc));
  margin: 0 auto calc(10 / var(--pc));
}
#main .right-area #style02 .img01 {
  width: calc(296 / var(--pc));
  margin: 0 auto;
}
#main .right-area #style02 .img02 {
  margin-top: calc(20 / var(--pc));
}
#main .right-area #style03 {
  margin-top: calc(99 / var(--pc));
}
#main .right-area #style03 .num {
  width: calc(72 / var(--pc));
  margin: 0 0 calc(10 / var(--pc)) calc(18 / var(--pc));
}
#main .right-area #style03 .img01 {
  width: calc(363 / var(--pc));
  margin: 0 auto;
}
#main .right-area #style03 .price {
  margin-right: calc(19 / var(--pc));
}
#main .right-area #style04 {
  width: calc(362 / var(--pc));
  margin: calc(100 / var(--pc)) auto 0;
}
#main .right-area #style04 .num {
  width: calc(74 / var(--pc));
  margin: 0 calc(34 / var(--pc)) calc(10 / var(--pc)) auto;
}
#main .right-area #style04 .img01 {
  width: calc(296 / var(--pc));
  margin: 0 auto;
}
#main .right-area #style04 .img02 {
  margin-top: calc(19 / var(--pc));
}
#main .right-area #style05 {
  margin-top: calc(100 / var(--pc));
}
#main .right-area #style05 .num {
  width: calc(72 / var(--pc));
  margin: 0 0 calc(10 / var(--pc)) calc(18 / var(--pc));
}
#main .right-area #style05 .price {
  margin-right: calc(19 / var(--pc));
}
#main .right-area #style06 {
  margin-top: calc(99 / var(--pc));
}
#main .right-area #style06 .num {
  width: calc(73 / var(--pc));
  margin: 0 auto calc(10 / var(--pc));
}
#main .right-area #style06 .img01 {
  width: calc(363 / var(--pc));
  margin: 0 auto;
}
#main .right-area #style06 .price {
  margin-right: calc(19 / var(--pc));
}
#main .right-area #style07 {
  width: calc(362 / var(--pc));
  margin: calc(97 / var(--pc)) auto 0;
}
#main .right-area #style07 .num {
  width: calc(69 / var(--pc));
  margin: 0 0 calc(10 / var(--pc)) auto;
}
#main .right-area #style07 .img02 {
  margin-top: calc(10 / var(--pc));
}
#main .right-area #style08 {
  width: calc(362 / var(--pc));
  margin: calc(100 / var(--pc)) auto 0;
}
#main .right-area #style08 .num {
  width: calc(73 / var(--pc));
  margin: 0 auto calc(10 / var(--pc));
}
#main .right-area #staff {
  margin-top: calc(144 / var(--pc));
  padding-bottom: calc(100 / var(--pc));
}
#main .right-area #staff ul {
  text-align: center;
  font-size: calc(10 / var(--pc));
  line-height: calc(22 / var(--pc));
  letter-spacing: 0.02em;
  color: #7E7E7E;
}

@media (max-width: 768px) {
  #footer {
    margin-top: calc(82 / var(--sp));
  }
  #main {
    display: block;
  }
  #main .index-area {
    height: auto;
    padding: calc(40 / var(--sp)) calc(47 / var(--sp));
  }
  #main .index-area > img {
    display: none;
  }
  #main .index-area .index {
    width: 100%;
    margin-top: 0;
  }
  #main .index-area .index > img {
    width: calc(51 / var(--sp));
  }
  #main .index-area .index .index-container {
    margin-top: calc(20 / var(--sp));
    gap: calc(20 / var(--sp)) calc(25 / var(--sp));
    justify-content: center;
  }
  #main .index-area .index .index-container a {
    width: calc(77 / var(--sp));
  }
  #main .index-area .index .index-container a img {
    filter: unset;
  }
  #main .right-area {
    width: 100%;
  }
  #main .right-area .price {
    margin-top: calc(17 / var(--sp));
  }
  #main .right-area .price a {
    font-size: calc(12 / var(--sp));
    line-height: calc(20 / var(--sp));
    letter-spacing: 0.055em;
  }
  #main .right-area .images {
    gap: 0 calc(4 / var(--sp));
    margin-top: calc(20 / var(--sp));
  }
  #main .right-area .images a {
    width: calc(185 / var(--sp));
  }
  #main .right-area .swiper-pagination {
    top: calc(10 / var(--sp));
    right: calc(10 / var(--sp));
    width: calc(10 / var(--sp));
  }
  #main .right-area .swiper-pagination span + span {
    margin-top: calc(10 / var(--sp));
  }
  #main .right-area #style01 {
    width: calc(340 / var(--sp));
    margin-top: calc(98 / var(--sp));
  }
  #main .right-area #style01 .num {
    width: calc(64 / var(--sp));
    margin-bottom: calc(10 / var(--sp));
  }
  #main .right-area #style02 {
    width: calc(340 / var(--sp));
    margin-top: calc(98 / var(--sp));
  }
  #main .right-area #style02 .num {
    width: calc(69 / var(--sp));
    margin-bottom: calc(10 / var(--sp));
  }
  #main .right-area #style02 .img01 {
    width: calc(278 / var(--sp));
  }
  #main .right-area #style02 .img02 {
    margin-top: calc(20 / var(--sp));
  }
  #main .right-area #style03 {
    margin-top: calc(97 / var(--sp));
  }
  #main .right-area #style03 .num {
    width: calc(68 / var(--sp));
    margin: 0 0 calc(10 / var(--sp)) calc(18 / var(--sp));
  }
  #main .right-area #style03 .img01 {
    width: calc(340 / var(--sp));
  }
  #main .right-area #style03 .price {
    margin-right: calc(17 / var(--sp));
  }
  #main .right-area #style04 {
    width: calc(340 / var(--sp));
    margin-top: calc(99 / var(--sp));
  }
  #main .right-area #style04 .num {
    width: calc(69 / var(--sp));
    margin: 0 calc(31 / var(--sp)) calc(10 / var(--sp)) auto;
  }
  #main .right-area #style04 .img01 {
    width: calc(278 / var(--sp));
  }
  #main .right-area #style04 .img02 {
    margin-top: calc(20 / var(--sp));
  }
  #main .right-area #style05 {
    margin-top: calc(97 / var(--sp));
  }
  #main .right-area #style05 .num {
    width: calc(68 / var(--sp));
    margin: 0 0 calc(10 / var(--sp)) calc(18 / var(--sp));
  }
  #main .right-area #style05 .price {
    margin-right: calc(19 / var(--sp));
  }
  #main .right-area #style06 {
    margin-top: calc(98 / var(--sp));
  }
  #main .right-area #style06 .num {
    width: calc(68 / var(--sp));
    margin-bottom: calc(10 / var(--sp));
  }
  #main .right-area #style06 .img01 {
    width: calc(340 / var(--sp));
  }
  #main .right-area #style06 .price {
    margin-right: calc(19 / var(--sp));
  }
  #main .right-area #style07 {
    width: calc(340 / var(--sp));
    margin-top: calc(96 / var(--sp));
  }
  #main .right-area #style07 .num {
    width: calc(65 / var(--sp));
    margin-bottom: calc(10 / var(--sp));
  }
  #main .right-area #style07 .img02 {
    margin-top: calc(10 / var(--sp));
  }
  #main .right-area #style08 {
    width: calc(340 / var(--sp));
    margin-top: calc(97 / var(--sp));
  }
  #main .right-area #style08 .num {
    width: calc(68 / var(--sp));
    margin-bottom: calc(10 / var(--sp));
  }
  #main .right-area #staff {
    margin-top: calc(94 / var(--sp));
    padding-bottom: 0;
  }
  #main .right-area #staff ul {
    font-size: calc(10 / var(--sp));
    line-height: calc(22 / var(--sp));
  }
}/*# sourceMappingURL=reebok_0101.css.map */