@charset "UTF-8";
/*=============== ▼BASE ===============*/

.negativemargin_main {
  margin: -90px 0 0 0;
  overflow-x: hidden;
}

@media screen and (max-width: 64em) {
  .negativemargin_main {
    margin: -60px 0 0 0;
  }
}

header {
  transition: 0.3s;
}

header.hide {
  transform: translateY(-100%);
}

.header {
  z-index: 5000;
  background-color: rgba(255, 255, 255, 0.95);
}

*:focus {
  outline: none;
}

/* loadが完了するまで非表示 */
body {
  visibility: hidden;
}
body.visible {
  visibility: visible;
}

img {
  width: 100%;
  height: auto;
}

/*=============== ▼コンテンツ挿入部分 ===============*/

/*=============== ▼共通(LANDSCAPE・▼PORTRAIT) ===============*/
.bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
}

.bg.js-hidden {
  visibility: hidden;
}

.bg .video-container {
  width: 100%;
  height: 100%;
}

.bg .video-container video,
.bg .video-container picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg .video-container video,
.bg .video-container picture img {
  object-fit: cover;
}

.bg .video-container picture img {
  height: 100%;
}

.bg .video-container picture {
  mix-blend-mode: screen;
}

.mv {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.mv .mv-inner {
  width: 100%;
  height: 100%;
}

.mv .mv-inner h1 {
  position: absolute;
  top: 50%;
  left: 24%;
  width: 25.8%;
  transform: translate(-50%, -50%);
}

.mv .mv-inner .sub-title {
  position: absolute;
  top: 52%;
  left: 70%;
  width: 18%;
  transform: translate(-50%, -50%);
}

.mv .mv-inner .remarks {
  position: absolute;
  top: 88%;
  left: 50%;
  width: 18%;
  transform: translate(-50%, -50%);
}

.mv .mv-inner .products {
  display: grid;
  width: 100%;
  height: 100%;
}

.mv .mv-inner .product01 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9.8%;
  transform: translate(-50%, -50%);
}

.mv .mv-inner .product02 {
  display: grid;
  place-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

.mv .mv-inner .product02 div {
  position: absolute;
  width: 9.8%;
}

.mv .mv-inner .effect {
  position: absolute;
  top: 50%;
  left: 51.7%;
  place-self: center;
  width: 14%;
  transform: translate(-50%, -50%);
}

.mv .mv-inner .step1,
.mv .mv-inner .step2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14.8%;
  transform: translate(-50%, -50%);
}

.mv .mv-inner .point {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32%;
  transform: translate(-50%, -50%);
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.scene picture {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 63%;
  transform: translate(-50%, -50%);
}

.lineup {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.lineup picture {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 79%;
  transform: translate(-50%, -50%);
}

.lineup > div {
  position: absolute;
  bottom: 10%;
  left: 50%;
  width: 12.2%;
  transform: translate(-50%, -50%);
}

.lineup > div a {
  transition: hover 0.3s ease;
}

.lineup > div a:hover {
  opacity: 0.8;
}

/*=============== ▼LANDSCAPE(PC) ===============*/
@media screen and (orientation: landscape) {
  .bg .video-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/*=============== ▲LANDSCAPE(PC) ===============*/

/*=============== ▼PORTRAIT(SP) ===============*/

@media screen and (orientation: portrait) {
  .mv .mv-inner h1 {
    top: 12%;
    left: 50%;
    width: 54.2%;
  }

  .mv .mv-inner .sub-title {
    top: 21%;
    left: 50%;
    width: 38%;
  }

  .mv .mv-inner .remarks {
    top: 88%;
    left: 50%;
    width: 42%;
  }

  .mv .mv-inner .product01 {
    width: 25%;
  }

  .mv .mv-inner .product02 div {
    width: 25%;
  }

  .mv .mv-inner .effect {
    left: 53.4%;
    width: 34%;
  }

  .mv .mv-inner .step1,
  .mv .mv-inner .step2 {
    width: 34%;
  }

  .mv .mv-inner .point {
    width: 96%;
  }

  .scene picture {
    width: 86%;
  }

  .lineup picture {
    width: 86.5%;
  }

  .lineup > div {
    width: 34%;
  }
}
/*=============== ▲PORTRAIT(SP) ===============*/