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

picture {
  display: block;
}

.sp {
  display: none;
}
@media screen and (orientation: portrait) {
  .sp {
    display: block;
  }
}
/*=============== ▼コンテンツ挿入部分 ===============*/
/* ----------- MV ----------- */
.mv {
  position: relative;
  z-index: 3;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.mv .bg {
  height: 100vh;
}
.mv .bg::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.mv h1 {
  position: absolute;
  z-index: 2;
  aspect-ratio: 321 / 15;
}

/* ----------- CATCH ----------- */
.wrapper .catch {
  position: fixed;
  z-index: 5;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}
/* ----------- POINT ----------- */
.point-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

.point-bg::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
}
.point-item {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}
.point-item.visible {
  opacity: 1;
  visibility: visible;
}
.point {
  position: relative;
}
.point ol li:nth-of-type(1) .content,
.point ol li:nth-of-type(2) .content {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
}
.point ol li,
.point ol li .images {
  position: relative;
  height: 100vh;
}
.point ol li picture {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
}
.point ol li.visible {
  margin-top: 100vh;
}
.point ol li.visible picture:not(.js-point05-text) {
  opacity: 1;
  visibility: visible;
}
/* ----------- OUTRO ----------- */
.outro {
  position: relative;
  height: 450vh;
}
.outro .content {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
}
.outro .content::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100vh;
}
.outro .content .text {
  opacity: 0;
  visibility: hidden;
}
.outro .products {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 100%;
  height: 100vh;
  background-color: rgb(255 255 255 / 0.9);
}
.outro .products .links {
  display: flex;
  justify-content: center;
  gap: 1%;
  width: 100%;
}
.outro .products .links a {
  transition: opacity 0.3s ease;
}
.outro .products .links a:hover {
  opacity: 0.75;
}

/* ----------- PRODUCT ----------- */

/*=============== ▼LANDSCAPE(PC) ===============*/
@media screen and (orientation: landscape) {
  .mv .bg::before {
    aspect-ratio: 1537 / 685;
    background: url(/product/closeup/assets/img/kfj-kfk/mv-bg.jpg) no-repeat center / cover;
  }
  .mv h1 {
    bottom: 2.8vh;
    right: 2%;
    width: 21%;
  }

  .point-bg::before {
    aspect-ratio: 2409 / 1028;
    background: url(/product/closeup/assets/img/kfj-kfk/point-bg.jpg) no-repeat center right / cover;
  }

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

/*=============== ▼PORTRAIT(SP) ===============*/
@media screen and (orientation: portrait) {
  .wrapper {
    margin-top: -17.3vh;
  }

  .mv .bg {
    height: 100vh;
  }
  .mv .bg::before {
    aspect-ratio: 640 / 980;
    background: url(/product/closeup/assets/img/kfj-kfk/mv-bg-sp.jpg) no-repeat center left 20% / cover;
  }
  .mv .bg.hide::before {
    opacity: 0;
  }
  .mv h1 {
    bottom: 2.8vh;
    right: 50%;
    transform: translateX(50%);
    width: 57.2%;
  }

  .point .catch {
    transform: translateY(22vh);
  }
  .point-bg::before {
    aspect-ratio: 1268 / 960;
    background: url(/product/closeup/assets/img/kfj-kfk/point-bg-sp.jpg) no-repeat center right / cover;
  }

  .outro .content::before {
    background: url(/product/closeup/assets/img/kfj-kfk/outro-bg-sp.jpg) no-repeat center / cover;
  }
  .outro .products .links {
    gap: 10%;
  }
  .outro .products .links a {
    width: 21%;
  }
}
/*=============== ▲PORTRAIT(SP) ===============*/