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

section {
  position: relative;
}

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

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

/*=============== ▼共通(LANDSCAPE・▼PORTRAIT) ===============*/
main::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100dvh;
  background: url(/product/closeup/assets/img/carry/bg.png) no-repeat center / cover;
}
.mv .bg {
  height: 100dvh;
}
.mv .bg::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  aspect-ratio: 1538 / 685;
  z-index: 1;
  background: url(/product/closeup/assets/img/carry/mv-bg.svg) no-repeat center / 100% auto;
}
.mv h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 100%;
}
.mv .items picture {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 100%;
}
.mv .items .item02 {
  opacity: 0;
}

.series .bg {
  height: 100dvh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
.series picture {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
}
.series picture img {
  max-width: 100%;
  width: auto;
  height: 100%;
}

.scene {
  position: relative;
}
.scene .bg {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100dvh;
}
.scene .item {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100dvh;
}
.scene .item img {
  max-width: 100%;
  width: auto;
  height: 100%;
}
.scene .slider ul {
  position: relative;
}
.scene .slider ul::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 100%;
  transform: translate(-50%, -50%);
}
.scene .slider ul {
  height: 100%;
}
.scene .slider ul .slick-slide {
  display: grid;
  place-items: center;
}
.scene .slider .slick-slide img {
  object-fit: cover;
  margin-inline: auto;
}

.products {
  height: 100dvh;
}
.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::before {
    aspect-ratio: 1538 / 685;
    background: url(/product/closeup/assets/img/carry/mv-bg.svg) no-repeat center / 100% auto;
  }

  .jos .bg {
    background-image: url(/product/closeup/assets/img/carry/jos-bg.svg);
  }
  .jov .bg {
    background-image: url(/product/closeup/assets/img/carry/jov-bg.svg);
  }
  .joo .bg {
    background-image: url(/product/closeup/assets/img/carry/joo-bg.svg);
  }

  /* .scene {
    height: 200dvh;
  } */
  .scene .item {
    display: block;
    height: 100dvh;
  }
  .scene .slider {
    height: 100dvh;
  }
  .scene .slider ul.sp {
    display: none;
  }
  .scene .slider ul::before {
    aspect-ratio: 1538 / 685;
    background: url(/product/closeup/assets/img/carry/slide-frame.svg) no-repeat center / 100% auto;
  }
  .scene .slider ul .slick-slide {
    height: 100dvh;
  }
  .scene .slider .slick-slide img {
    width: 56vw;
    max-height: 100%;
    aspect-ratio: 855 / 588;
    border-radius: 0 30% 0 30%;
  }
  .products a {
    top: 81vh;
    width: 11.5%;
  }
}
/*=============== ▲LANDSCAPE(PC) ===============*/

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

@media screen and (orientation: portrait) {
  .mv .bg::before {
    aspect-ratio: 640 / 960;
    background: url(/product/closeup/assets/img/carry/mv-bg-sp.svg) no-repeat center / 100% auto;
  }

  .jos .bg {
    background-image: url(/product/closeup/assets/img/carry/jos-bg-sp.svg);
  }
  .jov .bg {
    background-image: url(/product/closeup/assets/img/carry/jov-bg-sp.svg);
  }
  .joo .bg {
    background-image: url(/product/closeup/assets/img/carry/joo-bg-sp.svg);
  }

  .scene {
    height: 100dvh;
  }
  .scene .item {
    width: 100%;
  }
  .scene .bg {
    display: none;
  }
  .scene .item {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .scene .slider {
    height: 100dvh;
  }
  .scene .slider .slick-slider {
    display: flex;
    justify-content: center;
  }
  .scene .slider ul {
    height: 100dvh;
  }
  .scene .slider ul.pc {
    display: none;
  }
  .scene .slider ul::before {
    max-width: 100%;
    height: 100dvh;
    aspect-ratio: 640 / 960;
    background: url(/product/closeup/assets/img/carry/slide-frame-sp.svg) no-repeat center / 100% auto;
  }
  .scene .slider ul .slick-slide {
    height: 100dvh;
  }
  .scene .slider .slick-slide img {
    max-width: 100%;
    height: 100dvh;
    aspect-ratio: 640 / 960;
    object-fit: contain;
  }

  .products a {
    top: 66vh;
    width: 30%;
  }
}
/*=============== ▲PORTRAIT(SP) ===============*/