@charset "utf-8";
/*=============== ▼BASE ===============*/
.negativemargin_main {
  margin: -90px 0 0 0;
  overflow: hidden;
}

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

@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;
}

main,
section,
.wrapper {
  position: relative;
}

.sp {
  display: none;
}
@media screen and (orientation: portrait) {
  .sp {
    display: block;
  }
}

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

/*=============== ▼共通(LANDSCAPE・▼PORTRAIT) ===============*/
.mv .bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
}
.mv h1 {
  position: absolute;
  z-index: 3;
  aspect-ratio: 475 / 297;
}

section .content {
  height: 100vh;
}
section picture {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 100%;
  height: 100vh;
  transform: translateX(-50%);
  text-align: center;
}
section picture img {
  width: auto;
  height: 100%;
}
section .title {
  height: auto;
}

.wrapper {
  height: 100%;
  overflow: hidden;
}
.wrapper .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100vh;
}
.wrapper .bg img {
  width: auto;
  height: 100vh;
  object-fit: cover;
}

.about {
  margin-bottom: 10%;
}

.howto .content {
  height: 100vh;
  overflow: hidden;
}
.howto .image {
  right: 0;
  left: initial;
  transform: initial;
  width: initial;
  height: 100vh;
}

.products .content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
}
.products .detail {
  position: relative;
  z-index: 2;
  height: 100%;
}
.products a {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  aspect-ratio: 175 / 58;
  transition: opacity 0.3s ease;
}
.products a:hover {
  opacity: 0.75;
}
.products a img {
  width: 100%;
  height: auto;
}

/*=============== ▼LANDSCAPE(PC) ===============*/
@media screen and (orientation: landscape) {
  .mv .bg {
    height: 100vh;
  }
  .mv .bg::before {
    aspect-ratio: 3074 / 1370;
    background: url(/product/closeup/assets/img/jec/mv-bg.png) no-repeat center / cover;
  }
  .mv h1 {
    bottom: 2.5vh;
    right: 5%;
    width: 31.1%;
  }

  .wrapper .bg {
    aspect-ratio: 3074 / 1370;
    background: url(/product/closeup/assets/img/jec/bg.png) no-repeat center / 100% auto;
  }
  .wrapper .title {
    width: 100%;
  }

  .about .image {
    height: 112vh;
  }

  .howto .image {
    aspect-ratio: 8059 / 1371;
  }
  .howto .image img {
    height: 100%;
  }

  .products .content::before {
    aspect-ratio: 3074 / 1370;
    background: url(/product/closeup/assets/img/jec/products-bg.png) no-repeat center / cover;
  }
  .products a {
    top: 72vh;
    width: 11.5%;
  }
}
/*=============== ▲LANDSCAPE(PC) ===============*/

/*=============== ▼PORTRAIT(SP) ===============*/
@media screen and (orientation: portrait) {
  .mv .bg {
    height: 100vh;
  }
  .mv .bg::before {
    aspect-ratio: 640 / 960;
    height: 100%;
    min-width: 100%;
    z-index: -2;
    background: url(/product/closeup/assets/img/jec/mv-bg-sp.png) no-repeat center / cover;
  }
  .mv .bg.hide::before {
    opacity: 0;
  }
  .mv h1 {
    bottom: 8.8vh;
    right: 2%;
    width: 57.2%;
  }

  .wrapper {
    margin-top: -17.3vh;
  }
  .wrapper .bg {
    aspect-ratio: 640 / 960;
    min-width: 100%;
    background: url(/product/closeup/assets/img/jec/bg-sp.png) no-repeat center / 100% auto;
  }

  section .image img {
    transform: translateY(5vh);
  }

  .howto .image {
    height: 80%;
    aspect-ratio: 3250 / 960;
    text-align: right;
  }
  .howto .image img {
    margin-top: 2vh;
    height: 100%;
  }

  .products .content::before {
    transform: translateY(-3px);
    aspect-ratio: 640 / 790;
    height: calc(100% + 3px);
    background: url(/product/closeup/assets/img/jec/products-bg-sp.png) no-repeat center / cover;
  }
  .products a {
    top: 55vh;
    width: 35%;
  }
}
/*=============== ▲PORTRAIT(SP) ===============*/