section {
  overflow: hidden;
}
section video.joker-video {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  min-height: 100svh;
}

.product-wrapper {
  height: min(434px, 90%);
  width: 100%;
  display: grid;
  place-items: center;
  padding-top: 5%;
  padding-bottom: 5%;
  overflow: hidden;
  position: relative;
}
.product-wrapper .product-logo {
  position: absolute;
  bottom: min(80px, 20%);
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 46px;
}

.joker-product {
  width: auto;
  height: 90%;
  aspect-ratio: 1100/868;
  -o-object-fit: cover;
     object-fit: cover;
  background: url("../../img/joker-product-sm@2x-100.jpg") no-repeat center center;
  background-size: cover;
}

.joker-img-wrapper {
  width: 100%;
  height: 100svh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  position: relative;
}
.joker-img-wrapper img.joker-sm-img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.joker-img-wrapper img.joker-pc-img {
  display: none;
}
.joker-img-wrapper .joker-logo-bk {
  position: absolute;
  width: 167px;
  height: 65px;
  bottom: 26px;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}
.joker-img-wrapper .joker-logo-bk img {
  width: 100%;
  height: 100%;
}

.video-wrapper {
  position: relative;
}
.video-wrapper .sound-icon {
  display: inline-block;
  position: absolute;
  top: 5%;
  right: 5%;
  width: 20px;
  height: 20px;
  padding: 20px;
  box-sizing: border-box;
  border: solid 20px rgba(0, 0, 0, 0);
  background: url("../../img/sound-off.svg") no-repeat center center;
  background-size: contain;
  z-index: 99;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.video-wrapper .sound-icon.on {
  background: url("../../img/sound-on.svg") no-repeat center center;
  background-size: contain;
}

@media (min-width: 768px) {
  section video.joker-video {
    display: block;
    min-width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .product-wrapper {
    width: 100%;
    height: 90%;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    padding: 100px;
    display: flex;
    justify-content: center;
  }
  .product-wrapper .joker-product {
    width: auto;
    height: 90%;
    aspect-ratio: 1050/700;
    -o-object-fit: cover;
       object-fit: cover;
    background: url("../../img/joker-product-pc.jpg") no-repeat center center;
    background-size: cover;
  }
  .product-wrapper .joker-product img {
    height: 100%;
    width: auto;
  }
  .product-wrapper .product-logo {
    position: absolute;
    width: 161px;
    height: auto;
    bottom: 20%;
  }
  .joker-img-wrapper img.joker-sm-img {
    display: none;
  }
  .joker-img-wrapper img.joker-pc-img {
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .joker-img-wrapper .joker-logo-bk {
    width: 217px;
    height: 84px;
    bottom: 5%;
    left: 50%;
    right: 50%;
    transform: translate(-50%, 0);
  }
}
@media (min-width: 900px) {
  .joker-img-wrapper .joker-logo-bk {
    top: 50%;
    bottom: 50%;
    left: 75%;
    right: 25%;
    transform: translate(0, 0%);
  }
}
.icon-wrapper {
  position: relative;
  margin: 0 auto;
  display: grid;
  min-height: 800px;
}
.icon-wrapper.play {
  background-color: #000;
}
.icon-wrapper.play .icon-container::before {
  color: #fff;
}

.icon-container {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(3, 110px);
  grid-template-rows: repeat(3, auto);
  grid-template-areas: "icon1 icon2 icon3" "icon4 icon5 icon6" "icon7 icon8 icon9" "icon10 icon11 icon12";
  gap: 10px;
  height: auto;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: none;
}
.icon-container.active {
  display: grid;
}

.icon-container::before {
  content: "FACT";
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  font-size: 18px;
  font-family: futura-pt, sans-serif;
  font-style: normal;
  font-weight: 400;
  text-align: center;
}

.language-toggle {
  width: auto;
  position: absolute;
  top: 0;
  right: 10px;
  display: flex;
  justify-content: right;
  padding: 15px;
  cursor: pointer;
  font-size: 14px;
}
.language-toggle span {
  font-family: futura-pt, sans-serif;
  font-style: normal;
  padding: 10px 5px;
}
.language-toggle span.active {
  font-weight: bold;
}

.language-toggle.active {
  opacity: 1;
  transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.icon-container.play {
  background: #000;
}

.icon-container.play h2 {
  color: #fff;
}

.icon {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.icon.play {
  z-index: 2;
}

.icon-1 {
  grid-area: icon1;
}

.icon-2 {
  grid-area: icon2;
}

.icon-3 {
  grid-area: icon3;
}

.icon-4 {
  grid-area: icon4;
}

.icon-5 {
  grid-area: icon5;
}

.icon-6 {
  grid-area: icon6;
}

.icon-7 {
  grid-area: icon7;
}

.icon-8 {
  grid-area: icon8;
}

.icon-9 {
  grid-area: icon9;
}

.icon-10 {
  grid-area: icon10;
}

.icon-11 {
  grid-area: icon11;
}

.icon-12 {
  grid-area: icon12;
}

.icon.play {
  z-index: 2;
  width: 330px;
  height: 330px;
  position: absolute;
}

.icon-1.play {
  transform: translate(3%, 22%);
}

.icon-2.play {
  transform: translate(-33.5%, 22%);
}

.icon-3.play {
  transform: translate(-69.8%, 22%);
}

.icon-4.play {
  transform: translate(3%, -15%);
}

.icon-5.play {
  transform: translate(-33.5%, -15%);
}

.icon-6.play {
  transform: translate(-69.8%, -15%);
}

.icon-7.play {
  transform: translate(3%, -52%);
}

.icon-8.play {
  transform: translate(-33.5%, -52%);
}

.icon-9.play {
  transform: translate(-69.8%, -52%);
}

.icon-10.play {
  transform: translate(3%, -89%);
}

.icon-11.play {
  transform: translate(-33.5%, -89%);
}

@media (min-width: 768px) {
  .icon.play {
    z-index: 2;
    width: 420px;
    height: 420px;
    position: absolute;
  }
  .icon-1.play {
    transform: translate(2.4%, 22%);
  }
  .icon-2.play {
    transform: translate(-33.5%, 22%);
  }
  .icon-3.play {
    transform: translate(-69%, 22%);
  }
  .icon-4.play {
    transform: translate(2.4%, -15%);
  }
  .icon-5.play {
    transform: translate(-33.5%, -15%);
  }
  .icon-6.play {
    transform: translate(-69%, -15%);
  }
  .icon-7.play {
    transform: translate(2.4%, -51%);
  }
  .icon-8.play {
    transform: translate(-33.5%, -51%);
  }
  .icon-9.play {
    transform: translate(-69%, -51%);
  }
  .icon-10.play {
    transform: translate(2.4%, -87%);
  }
  .icon-11.play {
    transform: translate(-33.5%, -87%);
  }
}
.icon.play h2.fact-title {
  transform: scale(0.33) translateY(82px);
}

.icon-12 {
  position: relative;
  width: 100px;
  height: 100px;
  transform-origin: right bottom;
  z-index: 1;
}

.icon-12,
.icon-12 img {
  min-width: 100%;
  min-height: 100%;
  transform: translateY(-0.5px);
}

.icon img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.fact-title {
  position: absolute;
  left: 0;
  right: 0;
  top: -50px;
  font-size: 18px;
  font-family: futura-pt, sans-serif;
  font-style: normal;
  font-weight: 400;
  text-align: center;
}

@media (min-width: 768px) {
  .icon-container {
    grid-template-columns: repeat(3, 140px);
    grid-template-rows: repeat(4, auto);
    grid-template-areas: "icon1 icon2 icon3" "icon4 icon5 icon6" "icon7 icon8 icon9" "icon10 icon11 icon12";
  }
  .language-toggle {
    right: 50px;
  }
  .icon.play {
    width: 420px;
    height: 420px;
  }
}
@media (max-height: 500px) {
  .product-wrapper .product-logo {
    bottom: 25%;
    width: 120px;
  }
}/*# sourceMappingURL=joker.css.map */