@charset "utf-8";

/* History Products */

.history-products {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.history-product {
  position: absolute;
  width: 334px !important;
  height: 334px !important;
  clip-path: circle(25% at 50% 50%);
  transition: clip-path 3s cubic-bezier(0.16, 1, 0.3, 1);
}

.history-product.is-visible {
  clip-path: circle(50% at 50% 50%);
}

/* PC - 短縮版 */
.history-product--1 { top: 16.6%; left: 29.6%; }
.history-product--2 { top: 23.5%; left: 54%; }
.history-product--3 { top: 36.75%; left: 30%; }
.history-product--4 { top: 59.25%; left: 53.5%; }

@media (max-width: 1280px) and (min-width: 802px) {
  .history-product {
    width: calc(334 / 1280 * 100vw) !important;
    height: calc(334 / 1280 * 100vw) !important;
  }
}

/* SP - 短縮版 */
@media (max-width: 801px) {
  .history-product {
    width: calc(196 / 440 * 100vw) !important;
    height: calc(196 / 440 * 100vw) !important;
  }
  .history-product--1 { top: 17.5%; left: 22.3%; }
  .history-product--2 { top: 28.2%; left: 49.2%; }
  .history-product--3 { top: 46.5%; left: 20%; }
  .history-product--4 { top: 71%; left: 44%; }
}

/* 短縮版: 5-21は非表示 */
.history-products .history-product--5,
.history-products .history-product--6,
.history-products .history-product--7,
.history-products .history-product--8,
.history-products .history-product--9,
.history-products .history-product--10,
.history-products .history-product--11,
.history-products .history-product--12,
.history-products .history-product--13,
.history-products .history-product--14,
.history-products .history-product--15,
.history-products .history-product--16,
.history-products .history-product--17,
.history-products .history-product--18,
.history-products .history-product--19,
.history-products .history-product--20,
.history-products .history-product--21 {
  display: none;
}

/* 展開時: 5-21を表示 */
#sec02.is-expanded .history-product--5,
#sec02.is-expanded .history-product--6,
#sec02.is-expanded .history-product--7,
#sec02.is-expanded .history-product--8,
#sec02.is-expanded .history-product--9,
#sec02.is-expanded .history-product--10,
#sec02.is-expanded .history-product--11,
#sec02.is-expanded .history-product--12,
#sec02.is-expanded .history-product--13,
#sec02.is-expanded .history-product--14,
#sec02.is-expanded .history-product--15,
#sec02.is-expanded .history-product--16,
#sec02.is-expanded .history-product--17,
#sec02.is-expanded .history-product--18,
#sec02.is-expanded .history-product--19,
#sec02.is-expanded .history-product--20,
#sec02.is-expanded .history-product--21 {
  display: block;
  opacity: 0;
  clip-path: circle(25% at 50% 50%);
  transition: opacity 0.3s ease-out, clip-path 3s cubic-bezier(0.16, 1, 0.3, 1);
}

#sec02.is-expanded .history-product--5.is-visible,
#sec02.is-expanded .history-product--6.is-visible,
#sec02.is-expanded .history-product--7.is-visible,
#sec02.is-expanded .history-product--8.is-visible,
#sec02.is-expanded .history-product--9.is-visible,
#sec02.is-expanded .history-product--10.is-visible,
#sec02.is-expanded .history-product--11.is-visible,
#sec02.is-expanded .history-product--12.is-visible,
#sec02.is-expanded .history-product--13.is-visible,
#sec02.is-expanded .history-product--14.is-visible,
#sec02.is-expanded .history-product--15.is-visible,
#sec02.is-expanded .history-product--16.is-visible,
#sec02.is-expanded .history-product--17.is-visible,
#sec02.is-expanded .history-product--18.is-visible,
#sec02.is-expanded .history-product--19.is-visible,
#sec02.is-expanded .history-product--20.is-visible,
#sec02.is-expanded .history-product--21.is-visible {
  opacity: 1;
  clip-path: circle(50% at 50% 50%);
}

/* 展開時: 1-4は既にアニメーション済み */
#sec02.is-expanded .history-product--1,
#sec02.is-expanded .history-product--2,
#sec02.is-expanded .history-product--3,
#sec02.is-expanded .history-product--4 {
  clip-path: circle(50% at 50% 50%);
  transition: none;
}

/* 展開版 PC配置 */
#sec02.is-expanded .history-product--1 { top: 4.5%; left: 29.5%; }
#sec02.is-expanded .history-product--2 { top: 6.2%; left: 54%; }
#sec02.is-expanded .history-product--3 { top: 9.8%; left: 30%; }
#sec02.is-expanded .history-product--4 { top: 15.8%; left: 53.5%; }
#sec02.is-expanded .history-product--5 { top: 20.3%; left: 29%; }
#sec02.is-expanded .history-product--6 { top: 24.2%; left: 53.5%; }
#sec02.is-expanded .history-product--7 { top: 30.05%; left: 29%; }
#sec02.is-expanded .history-product--8 { top: 33.8%; left: 53.4%; }
#sec02.is-expanded .history-product--9 { top: 37.7%; left: 29.5%; }
#sec02.is-expanded .history-product--10 { top: 43.4%; left: 53.5% }
#sec02.is-expanded .history-product--11 { top: 47.1%; left: 30%; }
#sec02.is-expanded .history-product--12 { top: 50.8%; left: 53.5%; }
#sec02.is-expanded .history-product--13 { top: 54.55%; left: 29.5%; }
#sec02.is-expanded .history-product--14 { top: 58.5%; left: 53%; }
#sec02.is-expanded .history-product--15 { top: 62.1%; left: 30.5%; }
#sec02.is-expanded .history-product--16 { top: 67.8%; left: 53.5% }
#sec02.is-expanded .history-product--17 { top: 71.7%; left: 30%; }
#sec02.is-expanded .history-product--18 { top: 75.36%; left: 53.5%; }
#sec02.is-expanded .history-product--19 { top: 79.15%; left: 29.5%; }
#sec02.is-expanded .history-product--20 { top: 85.1%; left: 53%; }
#sec02.is-expanded .history-product--21 { top: 89.17%; left: 30%; }

/* 展開版 SP配置 */
@media (max-width: 801px) {
  #sec02.is-expanded .history-product--1 { top: 3.9%; left: 22.3%; }
  #sec02.is-expanded .history-product--2 { top: 6.8%; left: 49.2%; }
  #sec02.is-expanded .history-product--3 { top: 10.7%; left: 22%; }
  #sec02.is-expanded .history-product--4 { top: 15.43%; left: 44%; }
  #sec02.is-expanded .history-product--5 { top: 19.4%; left: 22%; }
  #sec02.is-expanded .history-product--6 { top: 23%; left: 43.1%; }
  #sec02.is-expanded .history-product--7 { top: 28.3%; left: 19%; }
  #sec02.is-expanded .history-product--8 { top: 32.1%; left: 43%; }
  #sec02.is-expanded .history-product--9 { top: 36%; left: 19%; }
  #sec02.is-expanded .history-product--10 { top: 41.2%; left: 42%; }
  #sec02.is-expanded .history-product--11 { top: 45.1%; left: 19.5%; }
  #sec02.is-expanded .history-product--12 { top: 48.95%; left: 41%; }
  #sec02.is-expanded .history-product--13 { top: 52.95%; left: 21.4%; }
  #sec02.is-expanded .history-product--14 { top: 57.1%; left: 42%; }
  #sec02.is-expanded .history-product--15 { top: 60.7%; left: 20%; }
  #sec02.is-expanded .history-product--16 { top: 65.85%; left: 41%; }
  #sec02.is-expanded .history-product--17 { top: 70%; left: 20%; }
  #sec02.is-expanded .history-product--18 { top: 73.9%; left: 42%; }
  #sec02.is-expanded .history-product--19 { top: 77.79%; left: 19%; }
  #sec02.is-expanded .history-product--20 { top: 83.3%; left: 44%; }
  #sec02.is-expanded .history-product--21 { top: 87.75%; left: 20%; }
}