.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;
  color: #000;
}

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

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

.lp-box {
  position: relative;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  white-space: nowrap;
  font-family: "Hachi Maru Pop", cursive;
  color: #000;
  --sub:  "M PLUS Rounded 1c", sans-serif;
 }

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

.lp-box .bg2 .bg{
  left:0;
  top:0;
}

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

.sh1{
  text-shadow: 
  0 0 1px #975d60,
  0 0 2px #975d60,
  0 0 3px #975d60,
  0 0 4px #975d60,
  0 0 5px #975d60,
  0 0 6px #975d60,
  0 0 7px #975d60,
  0 0 8px #975d60;
}

.atop{ aspect-ratio: 750 / 1312 ; z-index: 2;}
.bg1{ aspect-ratio: 750 / 3248 ;}
.bg2{ aspect-ratio: 750 / 3177 ;}
.item1{ aspect-ratio: 750 / 761 ;}
.item2{ aspect-ratio: 750 / 596 ;}
.item3{ aspect-ratio: 750 / 637 ;}
.item4{ aspect-ratio: 750 / 587 ;}
.item5{ aspect-ratio: 750 / 682 ;}
.item6{ aspect-ratio: 750 / 767 ;}
.item7{ aspect-ratio: 750 / 608 ;}
.item8{ aspect-ratio: 750 / 592 ;}
.item9{ aspect-ratio: 750 / 614 ;}
.item10{ aspect-ratio: 750 / 593 ;}


.atop .msg1{
  left: 58%;
  top: 79.5%;
  width: calc(( 262 / 806 ) * 100% );
}

.atop .msg2 {
  left: 61%;
  top: 84%;
  width: calc(( 203 / 806 ) * 100% );
}

.head1 {
  position: absolute;
  left: 0;
  top: -2.3%;
  z-index: 4;
}

.head2 {
  position: absolute;
  left: 0;
  top: -2.5%;
  z-index: 4;
}

.item{
  z-index: 3;
}

.item>a{
  display: block;
}

.item>a:hover{
  opacity: 1 !important;
}

.item .color{
  top: 92.5%;
  font-size: 1.9rem;
  position: absolute;
  left: 0%;
  width: 31%;
  text-align: center;
  font-family: var(--sub);
  font-weight: 900;
  background-size: 750px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 3;
  letter-spacing: -0.02em;
}


.item .color-shadow{
  position: absolute;
  font-size: 1.9rem;
  top: 92.5%;
  left: 0%;
  width: 31%;
  text-align: center;
  font-weight: 900;
  position: absolute;
  display: inline-block;
  font-family: var(--sub);
  color: #fff;
  z-index: 2;
  text-shadow:
  0px 0px 1px #fff,
  1px 0px 0px #fff,
-1px 0px 0px  #fff,
  0px 1px 1px #fff,
  0px -1px 1px #fff,
  1px 1px 1px #fff,
  -1px 1px 1px #fff,
  1px -1px 1px #fff,
  -1px -1px 1px #fff;
  letter-spacing: -0.02em;
} 

.item .msg{
  top: 70%;
  left: 27.5%;
  width: 71%;
  aspect-ratio: 575 / 182;
  display: flex;
  text-align: left;
  justify-content: center;
  align-items: center;
  font-size: 2.046rem;
  line-height: calc( 35 / 22 );
  padding-bottom: 0.2em;
}

.item .spec {
  top: 32.5%;
  aspect-ratio: 254 / 279;
  width: 32%;
  right: 3.5%;
  display: flex;
  flex-wrap: wrap;
  gap:4.5%;
  justify-content: space-between;
  flex-direction: column;
}

.item .spec>li {
  aspect-ratio: 100 / 21.2;
  width: 100%;
  font-family: var(--sub);
  font-weight: 900;
  padding-top: 0em;
  color: #ffffff;
  align-items: center;
  display: flex;
  justify-content: center;
}

.item .spec>li:nth-child(2) {
    margin-top: 1%;
}

.item .spec>li>span{
  align-items: center;
}

.item .spec>li em{
  font-size: 3.1rem;
  letter-spacing: -0.03em;
}

.item .spec>li:nth-child(4) em{
  padding-right: 0.4em;
  letter-spacing: 0.1em;
}

.item .spec>li em.jp {
  font-size: 2.35rem;
  letter-spacing: 0.02em;
  padding-right: 0.5em;
  transform: translateY(-16%);
  display: inline-block;
}

.item .spec>li strong{
  font-size: 3.9rem;
  font-weight: 900;
  letter-spacing: -0.06em;
}

.item .spec>li small{
  font-size: 2.2rem;
  font-weight: 900;
  padding-left: 0.1em;
}


.item .sh1{
  text-shadow:
  1px 1px 0 #78d627,
  -1px 1px 0 #78d627,
  1px -1px 0 #78d627,
  -1px -1px 0 #78d627;
}

.item .sh2{
  text-shadow:
  1px 1px 0 #f76300,
  -1px 1px 0 #f76300,
  1px -1px 0 #f76300,
  -1px -1px 0 #f76300;
}

.item .link {
  right: 0.9%;
  bottom: 0;
  width: calc((126 / 806) * 100%);
}

.item1 .color,
.item1 .color-shadow{
  font-size: 1.8rem;
}

.item2 .color,
.item2 .color-shadow{ top: 89.5%;}

.item3 .color,
.item3 .color-shadow{  width: 28%; top: 90%;}

.item4 .color, 
.item4 .color-shadow {
  top: 91.2%;
}
.item5 .color,
.item5 .color-shadow {
  top: 79.5%;
  width: 30%;
}
.item6 .color, 
.item6 .color-shadow {
  width: 29%;
  top: 88.5%;
}
.item7 .color, 
.item7 .color-shadow {
  top: 88.5%;
}
.item8 .color,
.item8 .color-shadow {
  top: 89.9%;
  width: 29%;
}

.item9 .color, 
.item9 .color-shadow {
    width: 29%;
    top: 86.5%;
}

.item10 .color,
.item10 .color-shadow { top: 88.5%; width: 30%;}

.item2 .spec {
  top: 12.8%;
  right: 3%;
  aspect-ratio: 254 / 276;
}

.item3 .spec { top: 19.2%; aspect-ratio: 254 / 276;}
.item4 .spec { top: 14.25%; aspect-ratio: 254 / 276;}
.item5 .spec { top: 12.3%; aspect-ratio: 254 / 276;}
.item6 .spec { top: 29.2%; aspect-ratio: 254 / 275;}
.item7 .spec{ top: 13.7%; right: 3%; aspect-ratio: 254 / 276;}
.item8 .spec { top: 13.8%; right: 3.5%; aspect-ratio: 254 / 277;}
.item9 .spec { top: 13.5%; right: 3.5%; aspect-ratio: 254 / 276;}
.item10 .spec { top: 12.6%; right: 4%; aspect-ratio: 254 / 277;}

.item2 .spec>li:nth-child(2) {
  margin-top: -0.5%;
}

.item2 .spec>li:nth-child(3) {
  margin-top: -1.5%;
}

.item6 .spec>li:nth-child(2) {
  margin-top: 0%;
}

.item2 .msg { top: 60%;}
.item3 .msg{ top: 63%;}
.item4 .msg { top: 62.05%;}
.item5 .msg{ top: 53%;}
.item6 .msg { top: 65.5%;}
.item7 .msg{ top: 61%;}
.item8 .msg{ top: 60%;}
.item9 .msg { top: 60%; aspect-ratio: 575 / 166;}
.item10 .msg{ top: 60%;}

.item2 .link { bottom: 2%;}
.item3 .link { bottom: 2%;}
.item4 .link { bottom: 0%;}
.item5 .link { bottom: 14%;}
.item6 .link { bottom: 4%;}
.item7 .link { bottom: 2%;}
.item8 .link { bottom: 2%;}
.item9 .link { bottom: 5%;}
.item10 .link { bottom: 2.5%;}


@media screen and (max-width: 1150px) {

  .item .color{
    font-size: clamp(1.6rem, 1.65vw, 1.8rem);
  }

  .item .color-shadow{
    font-size: clamp(1.6rem, 1.65vw, 1.8rem);
  } 
  
  .item1 .color,
  .item1 .color-shadow{
    font-size: clamp(1.5rem, 1.5vw, 1.8rem);
  }

  .item .msg{
    font-size: clamp(1.7rem, 1.7vw, 2.046rem);
  }

  .item .spec>li:nth-child(1){
    padding-top: 0.1em;
  }

  .item .spec>li em{
    font-size: clamp(2.5rem, 2.5vw, 3.2rem);
  }

  .item .spec>li em.jp {
    font-size: clamp(2rem, 2vw, 2.3rem);
  }

  .item .spec>li strong {
    font-size: clamp(3.2rem, 3.2vw, 4rem);
  }

  .item .spec>li small{
    font-size: clamp(1.9rem, 1.9vw, 2.2rem);
  }
}

@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: 2.45vw;
    background-size: 100vw;
  }

  .item .color-shadow{
    font-size: 2.45vw;
  } 

  .item1 .color,
  .item1 .color-shadow{
    font-size: 2.25vw;
  }

  .item .msg{
    font-size: 2.64vw;
  }

  .item .spec>li em{
    font-size: 4.1vw;
  }

  .item .spec>li em.jp {
    font-size: 3vw;
  }

  .item .spec>li strong{
    font-size: 5.1vw;
    letter-spacing: -0.06em;
  }

  .item .spec>li small{
    font-size: 2.9vw;
  }

  .item1 .spec>li:nth-child(2) {
    margin-top: 1.8%;
  }

  .item1 .spec { aspect-ratio: 254 / 280;}
  .item1 .spec>li:nth-child(4) {
    padding-top: 0.01em;
  }

  .item5 .spec>li:nth-child(4) {
    padding-top: 0.1em;
  }

  .item9 .spec>li:nth-child(4) {
    padding-top: 0.1em;
  }

  .item10 .spec>li:nth-child(4) {
    padding-top: 0.1em;
  }

}