@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 {
  position: relative;
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.sec01 picture,
.sec02 picture,
.sec03 picture {
  position: absolute;
}

section button {
  position: absolute;
  transform: translateY(-50%);
  transition: 0.3s;
}

section button:hover {
  opacity: 0.7;
}

/*=============== ▼LANDSCAPE(PC) ===============*/
@media screen and (orientation: landscape) {
  .sec01 {
    background-image: url("/product/closeup/assets/img/jop/sec01-bg-L.jpg");
  }
  .sec02 {
    margin-top: -1px;
    background-image: url("/product/closeup/assets/img/jop/sec02-bg-L.jpg");
  }
  .sec03 {
    margin-top: -1px;
    background-image: url("/product/closeup/assets/img/jop/sec03-bg-L.jpg");
  }
  .sec04 {
    background: rgb(226, 222, 218);
    background: linear-gradient(65deg, rgba(226, 222, 218, 1) 0%, rgba(206, 187, 179, 1) 100%);
  }
  .sec01 picture {
    top: 50%;
    right: 12%;
    transform: translateY(-50%);
    width: 26%;
  }
  .sec02 picture:first-of-type {
    top: 12%;
    right: 12%;
    width: 24%;
  }
  .sec02 picture:last-of-type {
    bottom: 4%;
    left: 4%;
    width: 70%;
  }
  .sec03 picture {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56%;
  }
  .sec04 picture {
    display: block;
    margin: 40px auto 0;
    width: 48%;
  }
  .sec04 .product-btn {
    position: relative;
    display: flex;
    margin: 14px auto 0;
  }
  .sec04 .product-btn > div {
    position: absolute;
    width: 10%;
    transform: translateX(-50%);
  }
  .sec04 .product-btn div:nth-of-type(1) {
    left: 29%;
  }
  .sec04 .product-btn div:nth-of-type(2) {
    left: 50.6%;
  }
  .sec04 .product-btn div:nth-of-type(3) {
    right: 18.6%;
  }
}
/*=============== ▲LANDSCAPE(PC) ===============*/

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

@media screen and (orientation: portrait) {
  .sec01 {
    background-image: url("/product/closeup/assets/img/jop/sec01-bg-P.jpg");
  }
  .sec02 {
    margin-top: -1px;
    background-image: url("/product/closeup/assets/img/jop/sec02-bg-P.jpg");
  }
  .sec03 {
    margin-top: -1px;
    background-image: url("/product/closeup/assets/img/jop/sec03-bg-P.jpg");
  }
  .sec04 {
    margin-top: -5%;
    background: rgb(226, 222, 218);
    background: linear-gradient(65deg, rgba(226, 222, 218, 1) 0%, rgba(206, 187, 179, 1) 100%);
  }
  .sec01 picture {
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    width: 52%;
  }
  .sec02 picture:first-of-type {
    top: 10%;
    right: 10%;
    width: 50%;
  }
  .sec02 picture:last-of-type {
    bottom: 6%;
    left: 6%;
    width: 90%;
  }
  .sec03 picture {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96%;
  }
  .sec04 picture {
    display: block;
    margin: 78px auto 0;
    width: 80%;
  }
  .sec04 .product-btn {
    position: relative;
    margin: 0 auto;
  }
  .sec04 .product-btn > div {
    position: absolute;
    width: 20%;
    transform: translateX(-50%);
  }
  .sec04 .product-btn div:nth-of-type(1) {
    top: 0.2em;
    left: 19%;
  }
  .sec04 .product-btn div:nth-of-type(2) {
    top: -3em;
    left: 50%;
  }
  .sec04 .product-btn div:nth-of-type(3) {
    top: 0.2em;
    right: -2%;
  }
}
/*=============== ▲PORTRAIT(SP) ===============*/