@charset "utf-8";

/*
  Decorations
============================================================= */

/* Footer
------------------------------------------------------------- */
.l-footer > .deco.dt08 {
  opacity: 1;
  transform: translateY(0) rotate(-23.18deg);
}
.l-footer > .deco.dr08 {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width:780px) {
  .l-footer > .deco { z-index: 0; }
}

/* Common
------------------------------------------------------------- */
.deco {
  position: absolute;
  z-index: -1;
  transform: translateY(0);
  opacity: 1;
}

/* Round
------------------------------------------------------------- */
.dr01 {
  top: calc(60 / 1920 * 100vw);
  right: calc(277 / 1920 * 100vw);
  width: calc(52 / 1920 * 100vw);
}
.dr02 {
  top: calc(1840 / 1920 * 100vw);
  left: calc(110 / 1920 * 100vw);
  width: calc(100 / 1920 * 100vw);
}
.dr03 {
  top: calc(2540 / 1920 * 100vw);
  right: calc(290 / 1920 * 100vw);
  width: calc(143 / 1920 * 100vw);
}
.dr04 {
  top: calc(3710 / 1920 * 100vw);
  right: calc(185 / 1920 * 100vw);
  width: calc(88 / 1920 * 100vw);
}
.dr05 {
  top: calc(4675 / 1920 * 100vw);
  left: calc(170 / 1920 * 100vw);
  width: calc(60 / 1920 * 100vw);
}

@media screen and (max-width:780px) {
  .dr01 { width: calc(52 / 780 * 100vw); }
  .dr02 { width: calc(100 / 780 * 100vw); }
  .dr03 { width: calc(143 / 780 * 100vw); }
  .dr04 { width: calc(88 / 780 * 100vw); }
  .dr05 { width: calc(60 / 780 * 100vw); }
}

/* Square
------------------------------------------------------------- */
.ds01 {
  top: calc(1245 / 1920 * 100vw);
  right: calc(65 / 1920 * 100vw);
  width: calc(144 / 1920 * 100vw);
}
.ds02 {
  top: calc(1470 / 1920 * 100vw);
  left: calc(125 / 1920 * 100vw);
  width: calc(94 / 1920 * 100vw);
  transform: translateY(0) rotate(17.18deg);
}
.ds03 {
  top: calc(3060 / 1920 * 100vw);
  left: calc(55 / 1920 * 100vw);
  width: calc(143 / 1920 * 100vw);
  transform: translateY(0) rotate(-25.55deg);
}
.ds04 {
  top: calc(4415 / 1920 * 100vw);
  right: calc(270 / 1920 * 100vw);
  width: calc(57 / 1920 * 100vw);
}
.ds05 {
  top: calc(4900 / 1920 * 100vw);
  left: calc(275 / 1920 * 100vw);
  width: calc(87 / 1920 * 100vw);
  transform: translateY(0) rotate(36.01deg);
}
.ds06 {
  top: calc(5180 / 1920 * 100vw);
  right: calc(105 / 1920 * 100vw);
  width: calc(143 / 1920 * 100vw);
  transform: translateY(0) rotate(-25.44deg);
}
.ds07 {
  top: calc(6770 / 1920 * 100vw);
  right: calc(87 / 1920 * 100vw);
  width: calc(87 / 1920 * 100vw);
  transform: translateY(0) rotate(36.01deg);
}
.ds08 {
  top: calc(770 / 1920 * 100vw);
  right: calc(710 / 1920 * 100vw);
  width: calc(57 / 1920 * 100vw);
  transform: translateY(0) rotate(25.10deg);
}

@media screen and (max-width:780px) {
  .ds01 { width: calc(144 / 780 * 100vw); }
  .ds02 { width: calc(94 / 780 * 100vw); }
  .ds03 { width: calc(143 / 780 * 100vw); }
  .ds04 { width: calc(57 / 780 * 100vw); }
  .ds05 { width: calc(87 / 780 * 100vw); }
  .ds06 { width: calc(143 / 780 * 100vw); }
  .ds07 { width: calc(87 / 780 * 100vw);}
  .ds08 { width: calc(57 / 780 * 100vw); }
}

/* Triangle
------------------------------------------------------------- */
.dt01 {
  top: calc(245 / 1920 * 100vw);
  left: calc(185 / 1920 * 100vw);
  width: calc(89 / 1920 * 100vw);
  transform: translateY(0) rotate(-40.03deg);
}
.dt02 {
  top: calc(1220 / 1920 * 100vw);
  left: calc(910 / 1920 * 100vw);
  width: calc(99 / 1920 * 100vw);
  transform: translateY(0) rotate(135.74deg);
}
.dt03 {
  top: calc(2020 / 1920 * 100vw);
  right: calc(65 / 1920 * 100vw);
  width: calc(112 / 1920 * 100vw);
  transform: translateY(0) rotate(-40.03deg);
}
.dt04 {
  top: calc(2650 / 1920 * 100vw);
  left: calc(140 / 1920 * 100vw);
  width: calc(68 / 1920 * 100vw);
  transform: translateY(0) rotate(19.13deg);
}
.dt05 {
  top: calc(3845 / 1920 * 100vw);
  left: calc(915 / 1920 * 100vw);
  width: calc(68 / 1920 * 100vw);
  transform: translateY(0) rotate(19.13deg);
}
.dt06 {
  top: calc(4030 / 1920 * 100vw);
  left: calc(200 / 1920 * 100vw);
  width: calc(99 / 1920 * 100vw);
  transform: translateY(0) rotate(105.45deg);
}
.dt07 {
  top: calc(6310 / 1920 * 100vw);
  right: calc(250 / 1920 * 100vw);
  width: calc(99 / 1920 * 100vw);
  transform: translateY(0) rotate(105.45deg);
}

@media screen and (max-width:780px) {
  .dt01 { width: calc(89 / 780 * 100vw); }
  .dt02 { width: calc(99 / 780 * 100vw); }
  .dt03 { width: calc(112 / 780 * 100vw); }
  .dt04 { width: calc(68 / 780 * 100vw); }
  .dt05 { width: calc(68 / 780 * 100vw); }
  .dt06 { width: calc(99 / 780 * 100vw); }
  .dt07 { width: calc(99 / 780 * 100vw); }
}