.headline-l {display: none;}
.headline-l.align-l {display: block;}

.lp-box img {
  opacity: 1;
  transition: opacity 0.19s ease;
  width: 100%;
  max-width: none;
  height: auto;
  image-rendering: auto;
}

img[data-image] {opacity: 0;}

.lp-box a{
  display: block;
  transition: opacity 0.19s ease;
}

.lp-box a:hover{
  opacity: 0.4;
} 

.lp-box a:hover{
  opacity: 0.4;
} 

.lp-box .h-op{
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  background: #fff;
}

.lp-box .h-op:hover{
  opacity: 0.5;
}

.lp-box div.lp-ab,
.lp-box .lp-ab{
  position: absolute;
}

.lp-box {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  color: #fff;
  white-space: nowrap;
  font-family: "M PLUS Rounded 1c", sans-serif;
  --sub: "Zen Old Mincho", serif;
 }

 .lp-box .bg1{
  position: relative;
  left:0;
  top:0;
  width: 100%;
  z-index: 0;
 }

.lp-box div,
.lp-box section{
  position: relative;
  z-index: 2;
}

.atop{
  aspect-ratio: 800 / 1935;
}

.atop .lp-nav  {
  left: 4%;
  top: 65.5%;
  aspect-ratio: 400 / 340;
  width: 45.5%;
  display: block;
  opacity: 0;
  background: #fff;
}

.atop .lp-nav:hover{
  opacity: 0.4;
}

.atop .nav2 {
  top: 65.5%;
  left: 51.2%;
}

.atop .nav3 {
  top: 81.7%;
}

.atop .nav4 {
  top: 81.7%;
  left: 51.2%;
}

.item .color {
  font-size: 3.5rem;
  text-align: center;
  font-weight: 600;
  color: #2f1d17;
  top: 42.8%;
  left: 0;
  width: 100%;
}

.item .en {
  font-size: 9.55rem;
  text-align: center;
  font-weight: 900;
  color: #2f1d17;
  top: 45%;
  left: 0;
  letter-spacing: -0.02em;
  width: 100%;
  font-family: var(--sub);
}

.item .spec {
  left: 39.5%;
  top: 56.25%;
  width: calc(( 438 / 800 ) * 100% );
}

.item .msg {
  left: 41.5%;
  top: 62.5%;
  text-align: left;
}

.item .link {
  left: 16.5%;
  top: 86.8%;
  text-align: left;
  width: calc(( 540 / 800 ) * 100% );
}

.item2 .color { top: 46.1%; color: #6d3e47;}
.item3 .color { top: 46.85%; color: #463e3d;}
.item4 .color { top: 40.18%; color: #c4aa91;}
.item2 .en { font-size:10rem; top: 48.1%; color: #6d3e47;}
.item3 .en { font-size: 10rem; top: 48.5%; color: #463e3d;}
.item4 .en { font-size: 10rem; top: 42.5%; color: #c4aa91;}
.item2 .spec { top: 58.8%;}
.item3 .spec { top: 59.7%;}
.item4 .spec {  top: 52.3%;}
.item2 .msg { top: 66.1%; left: 41.3%;}
.item3 .msg { top: 65.9%; left: 41.5%;}
.item4 .msg { top: 57.5%; left: 41.3%;}
.item2 .link { top: 88.5%;}
.item3 .link { top: 88.5%;}
.item4 .link { top: 77.95%;}
.item1 .msg { width: calc(( 421 / 800 ) * 100% );}
.item2 .msg { width: calc(( 422 / 800 ) * 100% );}
.item3 .msg { width: calc(( 418 / 800 ) * 100% );}
.item4 .msg { width: calc(( 419 / 800 ) * 100% );}

@media screen and (max-device-width: 767px){
  
  .lp-box span:hover,
  .lp-box a:hover{  
    opacity: 1;
  }

  .lp-box img {
    height: auto;
  }
  
  .lp-box{
    width: calc(100% + 26px);
    margin-left: -13px;
  }

  .item .color {
    font-size: 4.4vw;
  }

  .item .en {
    font-size: 11.30vw;
  }
  .item2 .en,
  .item3 .en,
  .item4 .en {
    font-size: 12.30vw;
  }


}