.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:#fff;
  --sub: "Kiwi Maru", serif;
 }
 
 .lp-box .bg{
  left:0;
  top:0;
  width: 100%;
  z-index: 0;
 }

.lp-box div,
.lp-box section{
  position: relative;
}
.lp-box .atop{
  z-index: 2;
}
.lp-box section{
  z-index: 2;
}
.atop{ aspect-ratio: 800 / 2171;}
.item1{ aspect-ratio: 800 / 1205;}
.item2{ aspect-ratio: 800 / 1209;}
.item3{ aspect-ratio: 800 / 1216;}
.item4{ aspect-ratio: 800 / 1186;}
.item5{ aspect-ratio: 800 / 1226;}
.item6{ aspect-ratio: 800 / 1287;}

.atop .msg1 {
  left: 18.5%;
  top: 56.5%;
  color: #42210b;
  text-align: center;
  font-size: 3rem;
  aspect-ratio: 100 / 46;
  font-family: var(--sub);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.75;
  width: 63%;
}

.atop .msg1_text {
  left: 23.75%;
  top: 58.72%;
  width: 52.125%;
}

.atop .msg{
  display: flex;
  aspect-ratio: 315 / 97;
  align-items: center;
  justify-content: center;
  left:53.78%;
  top:80%;
  width: 40%;
  color: #789e6c;
  font-weight: bold;
}

.atop .msg small{
  display: block;
  text-align: center;
  font-size: 2.4rem;
  letter-spacing: 0.15em;
}

.atop .msg strong{
  display: block;
  font-size: 3.3rem;
  text-align: center;
  letter-spacing: 0.15em;
}

.atop .msg2{
  top:80%;
}

.atop .msg3 {
  top: 85.1%;
}

.item .brand{
  top:10%;
  left:0;
  width: 50%;

  font-size: 2.75rem;
  color: #849a7c;
}

.item .msg {
  top: 48.5%;
  width: 100%;
  font-weight: bold;
  font-size: 2.75rem;
  letter-spacing: 0.15em;
  line-height: 1.9;
  padding-left: 0.5em;
  text-align: center;
}

.item .brand {
  top: 3.5%;
  left: 8%;
  width: 58%;
  font-size: 2.95rem;
  font-weight: bold;
  color: #849a7c;
  letter-spacing: 0.28em;
  transform: rotate(0.5deg);
}

.item .color {
  top: 6.3%;
  left: 8%;
  width: 58%;
  font-size: 4.9rem;
  font-weight: bold;
  color: #849a7c;
  font-weight: bold;
  letter-spacing: 0em;
  font-weight: bold;
  transform: rotate(0.5deg);
}

.item .spec {
  left: 13%;
  top: 22.9%;
  aspect-ratio: 242 / 210;
  width: 30.4%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item .spec>li{
  display: flex;
  text-align: left;
  color: #754c24;
}

.item .spec>li strong{
  background: #754c24;
  color: #fff;
  text-align: center;
  border-radius: 0.2em;
  width: 44.866%;
  aspect-ratio: 110 / 32;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item .spec>li:nth-child(1) strong,
.item .spec>li:nth-child(3) strong{
  font-size: 2.3rem;
  letter-spacing: 0.2em;
  padding-bottom: 0.1em;
}

.item .spec>li:nth-child(2) strong,
.item .spec>li:nth-child(4) strong{
  font-size: 2rem;
  letter-spacing: 0.15em;
}

.item .spec>li>span {
  font-size: 3.6rem;
  font-weight: bold;
  display: flex;
  padding-left: 0.2em;
  margin-top: -0.2em;
  align-items: baseline;
}

.item .spec>li>span>span{
  display: flex;
  letter-spacing: 0.05em;
}

.item .spec>li>span>small{
  font-weight: bold;
  letter-spacing: 0em;
  font-size: 2.4rem;
}

.item .spec>li>span>em{
  font-size: 2.8rem;
}

.item .link {
  top: 75.5%;
  width: 42.8%;
  left: 28.6%;
  display: block;
  aspect-ratio: 314 / 91;
  opacity: 0;
  border-radius: 5em;
  background: #fff;
  transition: opacity 0.19s ease;
}

.item .link:hover{
  opacity: 0.5;
}

.item2 .brand { letter-spacing: 0.15em;}
.item4 .brand {letter-spacing: 0.2em;}
.item5 .brand { letter-spacing: 0em;}
.item6 .brand {
      letter-spacing: 0.1em;
}

.item2 .color{  letter-spacing: -0.1em;}
.item3 .color{  letter-spacing: -0.1em;}
.item4 .color{  letter-spacing: -0.1em;}
.item5 .color{  letter-spacing: -0.1em;}
.item6 .color{  font-size: 4rem;}


.item2 .msg { top: 48.8%;}
.item3 .msg { top: 48.8%;}
.item4 .msg { top: 51.2%;}
.item5 .msg { top: 49.75%;}
.item6 .msg { top: 48.5%;}

.item2 .link { top: 74.1%;}
.item3 .link { top: 74.8%; }
.item4 .link { top: 73.25%;}
.item5 .link { top: 75.3%;}
.item6 .link { top: 71.6%;}

.item2 .spec { top: 23%;}
.item3 .spec { top: 23.5%;}
.item4 .spec { top: 23.5%;}
.item5 .spec { top: 22.5%;}
.item6 .spec { top: 21.5%;}


@media screen and (max-width: 1550px){
  .atop .msg1 {
    font-size: clamp(2.61rem, 2.61vw, 3rem);
  }

  .atop .msg small{
    font-size: clamp(2.09rem, 2.09vw, 2.4rem);
  }

  .atop .msg strong{
    font-size: clamp(2.87rem, 2.87vw, 3.3rem);
  }

  .item .brand{
    font-size: clamp(2.39rem, 2.39vw, 2.75rem);
  }

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

  .item .brand {
    font-size: clamp(2.57rem, 2.57vw, 2.95rem);
  }

  .item .color {
    font-size: clamp(4.26rem, 4.26vw, 4.9rem);
  }

  .item .spec>li:nth-child(1) strong,
  .item .spec>li:nth-child(3) strong{
    font-size: clamp(2.00rem, 2.00vw, 2.3rem);
  }

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

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

  .item .spec>li>span>small{
    font-size: clamp(2.09rem, 2.09vw, 2.4rem);
  }

  .item .spec>li>span>em{
    font-size: clamp(2.43rem, 2.43vw, 2.8rem);
  }

  .item6 .color{
    font-size: clamp(3.48rem, 3.48vw, 4rem);
  }
}
@media screen and (max-device-width: 767px){
  .lp-box span:hover,
  .lp-box a:hover{  
    opacity: 1;
  }

  
  .item .link:hover{
    opacity: 0;
  }

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

  .atop .msg1 {
    font-size: 3.87vw;
  }

  .atop .msg small{
    font-size: 3.09vw;
  }

  .atop .msg strong{
    font-size: 4.25vw;
  }

  .item .brand{
    font-size: 3.54vw;
  }

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

  .item .brand {
    font-size: 3.80vw;
  }

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

  .item .spec>li:nth-child(1) strong,
  .item .spec>li:nth-child(3) strong{
    font-size: 2.96vw;
  }

  .item .spec>li:nth-child(2) strong,
  .item .spec>li:nth-child(4) strong{
    font-size: 2.58vw;
  }

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

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

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

  .item6 .color{
    font-size: 5.15vw;
  }
}