.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 div.lp-ab,
.lp-ab{
  position: absolute;
  z-index: 2;
}

.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: "Zen Maru Gothic", sans-serif;
    color: #595757;
 }

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

/* .atop{aspect-ratio: 750 / 1621;}
.item1{aspect-ratio: 750 / 873;}
.item2{aspect-ratio: 750 / 848;}
.item3{aspect-ratio: 750 / 852;}
.item4{aspect-ratio: 750 / 852;}
.item5{aspect-ratio: 750 / 851;}
.item6{aspect-ratio: 750 / 941;}
 */
.atop .msg1,
.atop .msg3 {
  top: 82.5%;
  left: 64.9%;
  width: 19.6%;
  aspect-ratio: 100 / 23;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2em;
  font-size: 2.1rem ;
  font-weight: bold;
  background: #d39cb0;
  color: #fff;
}

.atop .msg2,
.atop .msg4 {
  top: 84.9%;
  left: 56%;
  font-size: 2.5rem;
  color: #595757;
  width: 37.5%;
  font-weight: bold;
  letter-spacing: -0.08em;
  line-height: 1.3;
}

.atop .msg2 em,
.atop .msg4 em{
  letter-spacing: 0.05em;
  font-size: 2.6rem;
  font-weight: bold;
}

.atop .msg3 {
  top: 87.6%;
}

.atop .msg4 {
  top: 90%;
}

.item a{
  display: block;
  height: 100%;
}

.item .head {
  aspect-ratio: 100 / 11;
  width: 78%;
  left: 7%;
  top: 13%;
  justify-content: center;
  display: flex;
  align-items: center;
  color: #595757;
  gap:1%;
}

.item .head .brand{
  font-size: 2.1rem;
  letter-spacing: 0em;
  font-weight: bold;
  color: #595757;
  font-weight: bold;
  padding-right: 0.3em;
}

.item .head .heart {
  margin: 0;
  width: 4%;
}

.item .head .color {
  font-size: 3.4rem;
  letter-spacing: -0.1em;
  margin-top: -0.05em;
}

.item .msg {
  display: flex;
  font-size: 2rem;
  letter-spacing: -0.02em;
  line-height: 1.8;
  left: 7%;
  top: 60%;
  width: 86%;
  align-items: center;
  justify-content: center;
  aspect-ratio: 100 / 37;
  z-index: 10;
  font-weight: bold;
}

.item .msg .icon{
  position: relative;
  display: inline-block;
  margin-left: 0.1em;
}

.item2 .head .color{
  letter-spacing: -0.15em;
}
.item .msg .icon img{ width: 100%; height: auto !important;}

.item .msg .icon.heart{ width: 24px; transform:translateY(-0.1em);}
.item .msg .icon.kira{ width: 25px;}
.item .msg .icon.cherry{ width: 24px; margin-left: -0.05em; transform:translateY(-0.1em);}
.item .msg .icon.star{ width: 24px;}
.item .msg .icon.blueberry { width: 26px; transform:translateY(-0.1em);}
.item .msg .icon.clover{ width: 22px; transform:translateY(-0.1em);}
.item .msg .icon.diamond{ width: 22px; transform:translateY(-0.1em);}
.item .msg .icon.strawberry{ width:26px; transform:translateY(-0.12em);}


.item .msg .icon img {
  vertical-align: middle;
  margin-top: 0em;
}
/* .item1 .msg .line5,
.item5 .msg .line4,
.item6 .msg .line4{
  display: block;
  margin-top: -0.5em;
}
 */
.item .spec {
  display: flex;
  flex-direction: column;
  gap:3%;
  justify-content: space-between;
  align-items: space-between;
  width: 23.8%;
  right: 7%;
  top: 23.35%;
  aspect-ratio: 192 / 311;
}

.item .spec>li{
  display: flex;
  aspect-ratio: 100 / 36.5;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: bold;
}


.item .spec>li>.box{
  display: flex;
  align-items: center;
  justify-content: center;
  gap:0 3.5%;
  padding-left: 2%;
}

.item .spec>li>.box2{
  padding-left: 2%;
}

.item .spec>li>.box4{
  flex-direction: column;
}

.item .spec>li>.box >.icon{
  margin: 0;
  margin-left: 1%;
  display: block;
  width: 11px;
  transform: translateY(20%);
}

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

.item .spec>li span{
  font-size: 1.65rem;
  letter-spacing: -0.08em;
}

.item .row{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  width: 100%;
  line-height: 1;
  gap:2.5%;
  margin-top: 0.3em;
}

.item .row>.icon{
  width: 5px;
  transform: translateY(0.1em);
}

.item .row .bar{
  font-weight: normal;
  font-size: 1.2em;
}

.item .msg {
  display: flex;
  font-size: 2rem;
  letter-spacing: -0.02em;
  line-height: 1.79;
  left: 7%;
  top: 60%;
  width: 86%;
  align-items: center;
  justify-content: center;
  aspect-ratio: 100 / 37;
  z-index: 10;
  font-weight: bold;
}

.item1 .msg{
  line-height: 1.9;
} 
.item5 .msg{
  line-height: 1.99;
} 
.item6 .msg{
  line-height: 1.99;
} 

.item .msg span{
  display: block;
}

.item2 .head {top: 10%; padding-left: 1.1%;}
.item3 .head {top: 10.65%; padding-left: 6%;}
.item4 .head { top: 10.6%; padding-left: 6%;}
.item5 .head { top: 10.5%; padding-left: 8%;}
.item6 .head { top: 9.8%; padding-left: 8%;}

.item3 .head .color {
  font-size: 3.4rem;
  letter-spacing: -0.08em;
}

.item4 .head .color {
  font-size: 3.4rem;
  padding-left: 0em;
  letter-spacing: -0.05em;
}

.item2 .head .brand {
  padding-right: 0em;
}

.item3 .head .brand{
  padding-left: 0.1em;
}

.item2 .msg { top: 58.3%;}
.item3 .msg { top: 59%; }
.item4 .msg { top: 59%; }
.item5 .msg { top: 59%; }
.item6 .msg { top: 53.5%;}

.item2 .spec { top: 21%;}
.item3 .spec { top: 21.25%;}
.item4 .spec { top: 21.4%;}
.item5 .spec { top: 21.4%;}
.item6 .spec { top: 19.4%;}

.item .msg .icon{
  margin-left: 0.1em;
}

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

  .lp-box .nav img {
    opacity: 0 !important;
  }
  
  .item .msg .icon.heart{ width: 2.1vw;}
  .item .msg .icon.kira{ width: 2.15vw;}
  .item .msg .icon.cherry{ width: 2.1vw; margin-left: -0.1em;}
  .item .msg .icon.star{ width: 2.1vw;}
  .item .msg .icon.blueberry{ width: 2.2vw;}
  .item .msg .icon.clover{ width: 1.9vw;}
  .item .msg .icon.diamond{ width: 1.9vw;}
  .item .msg .icon.strawberry{ transform:translateY(-0.1em); width:2.2vw;}
  
    
  .item .spec>li>.box >.icon {
    width: 0.45em;
  }

  .item .row>.icon {
    width: 0.5em;
    transform: translateY(0.1em);
  }

  .atop .msg1,
  .atop .msg3 {
    font-size: clamp(1.83rem, 1.83vw, 2.1rem);
  }

  .atop .msg2,
  .atop .msg4 {
    font-size: clamp(2.17rem, 2.17vw, 2.5rem);
  }

  .atop .msg2 em,
  .atop .msg4 em{
    font-size: clamp(2.26rem, 2.26vw, 2.6rem);
  }

  .item .head .brand{
    font-size: clamp(1.83rem, 1.83vw, 2.1rem);
  }

  .item .head .color {
    font-size: clamp(2.96rem, 2.96vw, 3.4rem);
  }

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

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

  .item .spec>li span{
    font-size: clamp(1.4rem, 1.4vw, 1.65rem);
  }

  .item .row{
    font-size: clamp(1.20rem, 1.20vw, 1.5rem);
  }

  .item .row .bar{
    font-size: clamp(1.2rem, 1.2vw, 1.2em);
  }

  .item3 .head .color {
    font-size: clamp(2.96rem, 2.96vw, 3.4rem);
  }

  .item4 .head .color {
    font-size: clamp(2.96rem, 2.96vw, 3.4rem);
  }

}

@media screen and (max-device-width: 767px){
  .lp-box span:hover,
  .lp-box a:hover{  
    opacity: 1;
  }
  
  .lp-box{
    width: calc(100% + 26px);
    margin-left: -13px;
  }
  
  .item .msg .icon.heart{ width: 3vw; }
  .item .msg .icon.cherry{ width: 2.8vw;}
  .item .msg .icon.kira{ width: 3vw;}
  .item .msg .icon.star{ width: 2.8vw;}
  .item .msg .icon.blueberry { width: 3.1vw; }
  .item .msg .icon.clover{ width: 2.85vw;}
  .item .msg .icon.diamond{ width: 2.85vw;}
  .item .msg .icon.strawberry{ width:3.1vw;}


  .atop .msg1,
  .atop .msg3 {
    font-size: 2.71vw;
  }

  .atop .msg2,
  .atop .msg4 {
    font-size: 3.22vw;
  }

  .atop .msg2 em,
  .atop .msg4 em{
    font-size: 3.35vw;
  }


  .item .head .brand{
    font-size: 2.71vw;
  }

  .item .head .color {
    font-size: 4.38vw;
  }

  .item .msg {
    font-size: 2.58vw;
  }
 
  .item .spec>li em{
    font-size: 2.90vw;
  }

  .item .spec>li span{
    font-size: 2.13vw;
  }

  .item .row{
    font-size: 1.93vw;
  }

  .item .row .bar{
    font-size: 2vw;
  }

  .item3 .head .color {
    font-size: 4.38vw;
  }

  .item4 .head .color {
    font-size: 4.38vw;
  }
}