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



/*=============== ▼コンテンツ挿入部分 ===============*/
section:not(.mv) {
  margin-top: -2px;
}

.mv-wrapper {
  position: relative;
}

.mv-wrapper .circle-bg {
  position: fixed;
  top: -15%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 51%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #f1b399;
}

.mv-wrapper hgroup h1 {
  position: fixed;
  top: 20%;
  left: 29%;
  transform: translate(-50%, -50%);
  width: 44%;
}

.mv-wrapper hgroup > p {
  position: fixed;
  top: 86%;
  left: 65%;
  transform: translate(-50%, -50%);
  width: 34%;
}

.mv-wrapper .catch {
  position: fixed;
  top: 56%;
  left: 76%;
  transform: translate(-50%, -50%);
  width: 14%;
}

.mv-wrapper .catch.is-absolute {
  position: absolute;
  top: 39%;
}

.mv-wrapper .product-name {
  position: fixed;
  top: 96%;
  right: -5%;
  transform: translate(-50%, -50%);
  width: 16%;
}

.mv-wrapper .product-name.is-absolute {
  position: absolute;
  top: 49%;
}

.mv-wrapper .items .item {
  position: fixed;
  transform: translate(-50%, -50%);
  width: 16%;
}

.mv-wrapper .items .item-open {
  position: fixed;
  transform: translate(-50%, -50%);
  width: 16%;
  opacity: 0;
}

.mv-wrapper .items .item01 {
  top: 39%;
  left: 39%;
}

.mv-wrapper .items .item01-open {
  top: 48%;
  left: 39%;
}

.mv-wrapper .items .item01-open.is-absolute {
  position: absolute;
  top: 37%;
}

.mv-wrapper .items .item02 {
  top: 43%;
  left: 50%;
}

.mv-wrapper .items .item02-open {
  top: 52%;
  left: 50%;
}

.mv-wrapper .items .item02-open.is-absolute {
  position: absolute;
  top: 88%;
}

.mv-wrapper .items .item03 {
  top: 47%;
  left: 60%;
}

.mv-wrapper .items .item03-open {
  top: 56%;
  left: 60%;
}

.mv-wrapper .items .item03-open.is-absolute {
  position: absolute;
  top: 39%;
}

.mv-wrapper .parts-text {
  position: fixed;
  top: 46%;
  left: 49%;
  transform: translate(-50%, -50%);
  width: 42%;
  opacity: 0;
}

.mv-wrapper .parts-text.is-absolute {
  position: absolute;
  top: 86.5%;
}

.mv {
  z-index: -1;
}

.mv .inner {
  height: 100vh;
  background: url(/product/closeup/assets/img/jeb/mv-bg.png) no-repeat center / cover;
}

.parts {
  z-index: -1;
}

.parts .inner {
  height: 100vh;
  background: url(/product/closeup/assets/img/jeb/parts-bg.png) no-repeat center / cover;
}

.structure .inner {
  height: 84vh;
  background: url(/product/closeup/assets/img/jeb/structure-bg.png) no-repeat center / cover;
}

.structure .inner h2 {
  position: absolute;
  top: 31%;
  left: 47%;
  transform: translate(-50%, -50%);
  width: 39%;
}

.structure .inner figure {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 49%;
}

.lunch .inner {
  height: 100vh;
  background: url(/product/closeup/assets/img/jeb/lunch-bg01.png) no-repeat center / cover;
}

.lunch .inner .text-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
}

.lunch .inner h2 {
  display: grid;
  place-items: center;
  margin-inline: auto;
  width: 70%;
  aspect-ratio: 1075/106;
  background: url(/product/closeup/assets/img/jeb/lunch-bg02.svg) no-repeat center / cover;
}

.lunch .inner h2 figure {
  width: 44%;
  line-height: 1;
}

.lunch .inner .lunch-variation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96%;
}

.lunch .inner .lunch-point01,
.lunch .inner .lunch-point02 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 100%;
}

.lunch .inner .lunch-point01 img,
.lunch .inner .lunch-point02 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lunch .inner .lunch-point01 .lunch-point01-text {
  position: absolute;
  top: 38%;
  left: 76%;
  transform: translate(-50%, -50%);
  width: 20%;
  opacity: 0;
}

.lunch .inner .lunch-point02 .lunch-point02-text {
  position: absolute;
  top: 38%;
  left: 58%;
  transform: translate(-50%, -50%);
  width: 24%;
  opacity: 0;
}

.lunch .inner .product {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
}

.lunch .inner .product p {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
}

.lunch .inner .product figure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44%;
}

.lunch .inner .product a {
  display: block;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 10%;
  transition: opacity 0.3s ease;
}

.lunch .inner .product a:hover {
  opacity: 0.75;
}

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

/*=============== ▼LANDSCAPE(PC) ===============*/
@media screen and (orientation: landscape) {
}
/*=============== ▲LANDSCAPE(PC) ===============*/

/*=============== ▼PORTRAIT(SP) ===============*/
@media screen and (orientation: portrait) {  
  .mv-wrapper .circle-bg {
    top: -12vh;
    left: -8%;
    width: 122%;
  }
  
  .mv-wrapper hgroup h1 {
    top: 14vh;
    left: 50%;
    z-index: 4;
    width: 84%;
  }
  
  .mv-wrapper hgroup > p {
    top: 66vh;
    left: 50%;
    z-index: 4;
    width: 86%;
  }
  
  .mv-wrapper .catch {
    top: 76vh;
    z-index: 4;
    width: 22%;
  }
  
  .mv-wrapper .catch.is-absolute {
    top: 176vh;
  }
  
  .mv-wrapper .product-name {
    top: 96vh;
    left: 50%;
    width: 40%;
  }

  .mv-wrapper .product-name.is-absolute {
    top: 196vh;
  }

  .mv-wrapper .items .item {
    width: 39%;
  }
  
  .mv-wrapper .items .item-open {
    width: 39%;
  }
  
  .mv-wrapper .items .item01 {
    top: 29vh;
    left: 32%;
  }
  
  .mv-wrapper .items .item01-open {
    top: 42vh;
    z-index: 1;
    left: 32%;
  }
  
  .mv-wrapper .items .item01-open.is-absolute {
    top: 142vh;
  }
  
  .mv-wrapper .items .item02 {
    top: 33vh;
    left: 50%;
  }
  
  .mv-wrapper .items .item02-open {
    top: 46vh;
    z-index: 2;
    left: 50%;
  }
  
  .mv-wrapper .items .item02-open.is-absolute {
    position: absolute;
    top: 346vh;
  }
  
  .mv-wrapper .items .item03 {
    top: 37vh;
    left: 70%;
  }
  
  .mv-wrapper .items .item03-open {
    top: 50vh;
    z-index: 3;
    left: 70%;
  }
  
  .mv-wrapper .items .item03-open.is-absolute {
    top: 150vh;
  }
  
  .mv-wrapper .parts-text {
    top: 5vh;
    z-index: 4;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
  }
  
  .mv-wrapper .parts-text.is-absolute {
    top: 305vh;
  }
  
  .mv {
    z-index: -1;
  }
  
  .mv .inner {
    height: 100vh;
    background: url(/product/closeup/assets/img/jeb/mv-bg-sp.png) no-repeat center / cover;
  }
  
  .parts .inner {
    background: url(/product/closeup/assets/img/jeb/parts-bg-sp.png) no-repeat center / cover;
  }
  
  .structure .inner {
    height: 50vh;
    background: url(/product/closeup/assets/img/jeb/structure-bg-sp.png) no-repeat center / cover;
  }
  
  .structure .inner h2 {
    left: 44%;
    width: 84%;
  }
  
  .structure .inner figure {
    width: 100%;
  }

  .lunch .inner {
    height: 100vh;
    background: url(/product/closeup/assets/img/jeb/lunch-bg01-sp.png) no-repeat center / cover;
  }
  
  .lunch .inner .text-bg {
    left: 58%;
    width: 150%;
  }

  .lunch .inner h2 {
    display: grid;
    place-items: center;
    margin-inline: auto;
    width: 100%;
    aspect-ratio: 320/53;
    background: url(/product/closeup/assets/img/jeb/lunch-bg02-sp.svg) no-repeat center / cover;
  }
  
  .lunch .inner h2 figure {
    width: 68%;
  }
  
  .lunch .inner .lunch-variation {
    width: 100%;
  }
  
  .lunch .inner .lunch-point01,
  .lunch .inner .lunch-point02 {
    position: absolute;
    top: 0;
    left: 0;
    transform: initial;
    width: 100%;
    height: 100%;
  }
  
  .lunch .inner .lunch-point01 .lunch-point01-text {
    top: 32%;
    left: 66%;
    width: 34%;
  }
  
  .lunch .inner .lunch-point02 .lunch-point02-text {
    top: 47%;
    left: 64%;
    width: 46%;
  }

  
  .lunch .inner .product p {
    top: 20%;
    width: 80%;
  }
  
  .lunch .inner .product figure {
    width: 90%;
  }
  
  .lunch .inner .product a {
    bottom: 20%;
    width: 32%;
  }
}
/*=============== ▲PORTRAIT(SP) ===============*/