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

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

/*=============== ▼共通(LANDSCAPE・▼PORTRAIT) ===============*/

.sec01,
.sec02,
.sec03,
.sec04,
.sec05,
.sec06 {
  position: relative;
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

main picture,
main .product-btn {
  position: absolute;
}

/*=============== ▼LANDSCAPE(PC) ===============*/
@media screen and (orientation: landscape) {
  .sec01 {
    background-image: url("/product/closeup/assets/img/fjj_2023/sec01-bg-L.jpg");
  }
  .sec02 {
    background-image: url("/product/closeup/assets/img/fjj_2023/sec02-bg01-L.jpg");
    margin-top: -1px;
  }
  .sec03 {
    background-image: url("/product/closeup/assets/img/fjj_2023/sec03-bg-L.png");
    margin-top: -1px;
    /* height: 65.7vh; */
  }
  .sec04 {
    background-image: url("/product/closeup/assets/img/fjj_2023/sec04-bg-L.png");
    margin-top: -1px;
    height: 80vh;
  }
  .sec05 {
    background-image: url("/product/closeup/assets/img/fjj_2023/sec05-bg-L.jpg");
    margin-top: -1px;
    height: 80vh;
  }
  .sec06 {
    background-image: url("/product/closeup/assets/img/fjj_2023/sec06-bg-L.jpg");
    margin-top: -1px;
  }

  .sec01 picture:nth-of-type(1) {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 38%;
  }
  .sec01 picture:nth-of-type(2) {
    top: 24%;
    left: 16%;
    width: 36%;
  }
  .sec01 picture:nth-of-type(3) {
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 24%;
  }
  .sec03 picture {
    bottom: 40%;
    left: 14%;
    width: 29%;
  }
  .sec04 picture {
    /* top: 50%; */
    left: 50%;
    transform: translateX(-50%);
    width: 78%;
  }
  .sec05 picture {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
  .sec06 picture {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76%;
  }
  .sec06 picture:nth-of-type(1) {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 38%;
  }
  .sec06 picture:nth-of-type(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74%;
  }
  .sec06 .product-btn {
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12%;
  }
}
/*=============== ▲LANDSCAPE(PC) ===============*/

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

@media screen and (orientation: portrait) {
  .sec01 {
    background-image: url("/product/closeup/assets/img/fjj_2023/sec01-bg-P.jpg");
    background-position: 96% 0%;
  }
  .sec02 {
    background-image: url("/product/closeup/assets/img/fjj_2023/sec02-bg01-P.jpg");
    background-position: 96% 0%;
    margin-top: -1px;
  }
  .sec03 {
    background-image: url("/product/closeup/assets/img/fjj_2023/sec03-bg-P.png");
    margin-top: -1px;
  }
  .sec04 {
    background-image: url("/product/closeup/assets/img/fjj_2023/sec04-bg-P.jpg");
    margin-top: -1px;
    height: 80vh;
  }
  .sec05 {
    background-image: url("/product/closeup/assets/img/fjj_2023/sec05-bg-P.jpg");
    margin-top: -1px;
    height: 80vh;
  }
  .sec06 {
    background-color: #eef186;
    margin-top: -1px;
    height: 70vh;
  }

  .sec01 picture:nth-of-type(1) {
    top: 10%;
    left: 42%;
    transform: translateX(-50%);
    width: 65%;
  }
  .sec01 picture:nth-of-type(2) {
    top: 26%;
    left: 8%;
    width: 44%;
  }
  .sec01 picture:nth-of-type(3) {
    bottom: 6%;
    left: 62%;
    transform: translateX(-50%);
    width: 54%;
  }
  .sec03 picture {
    bottom: 16%;
    left: 2%;
    width: 70%;
  }
  .sec04 picture {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
  }
  .sec05 picture {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
  }
  .sec06 picture {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76%;
  }
  .sec06 picture:nth-of-type(1) {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 67%;
  }
  .sec06 picture:nth-of-type(2) {
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72%;
  }
  .sec06 .product-btn {
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
  }
}
/*=============== ▲PORTRAIT(SP) ===============*/