.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: "Hachi Maru Pop", cursive;
 }

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


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

.atop{ aspect-ratio: 750 / 1709;}
.block1{ aspect-ratio: 750 / 607;}
.item1{ aspect-ratio: 750 / 821;}
.item2{ aspect-ratio: 750 / 794;}
.item3{ aspect-ratio: 750 / 807;}
.item4{ aspect-ratio: 750 / 808;}
.item5{ aspect-ratio: 750 / 808;}
.item6{ aspect-ratio: 750 / 913;}

.lp-box .sh1{
  text-shadow: 
    0 0 0.1em #fff,
    0 0 0.2em #fff,
    0 0 0.3em #fff,
    0 0 0.4em #fff,
    0 0 0.5em #fff,
    0 0 0.6em #fff,
    0 0 0.7em #fff,
    0 0 0.8em #fff,
    0 0 0.9em #fff,
    0 0 1em #fff;
} 
.lp-box .sh2{
    text-shadow: 
    0 0 1px #fff,
    0 0 2px #fff,
    0 0 3px #fff,
    2px 0px 3px #fff,
    -2px 0px 3px #fff,
    0px 2px 3px #fff,
    0px -2px 3px #fff,
    2px 2px 3px #fff,
    -2px 2px 3px #fff,
    2px -2px 3px #fff,
    -2px -2px 3px #fff,
    0 0 4px #fff,
    0 0 5px #fff,
    0 0 6px #fff,
    0 0 7px #fff,
    0 0 8px #fff,
    0 0 9px #fff,
    0 0 10px #fff;
}
.lp-box .sh3{
    text-shadow: 
    0 0 0.1em #fff,
    0 0 0.15em #fff,
    0 0 0.2em #fff,
    0 0 0.25em #fff,
    0 0 0.3em #fff,
    0 0 0.35em #fff,
    0 0 0.4em #fff,
    0 0 0.45em #fff,
    0 0 0.5em #fff,
    0 0 0.55em #fff,
    0 0 0.6em #fff,
    0 0 0.65em #fff,
    0 0 0.7em #fff,
    0 0 0.8em #fff,
    0 0 0.9em #fff,
    0 0 1em #fff;
}

.lp-box .sh6{
  text-shadow: 
    0 0 0.1em #fff,
    0 0 0.2em #fff,
    0 0 0.3em #fff,
    0 0 0.4em #fff,
    0 0 0.5em #fff,
    0 0 0.6em #fff,
    0 0 0.7em #fff,
    0 0 0.8em #fff,
    0 0 0.9em #fff,
    0 0 1em #fff;
} 


/* .lp-box .sh1 span::after{
  content: attr(data-text);
  position: absolute;
  left:0;
  top:0;
  filter: blur(5px);
  z-index: -1;
  text-shadow: 
  2px 0px 3px #fff,
  -2px 0px 3px #fff,
  0px 2px 3px #fff,
  0px -2px 3px #fff,
  2px 2px 3px #fff,
  -2px 2px 3px #fff,
  2px -2px 3px #fff,
  -2px -2px 3px #fff;
  text-align: center;
}
 */
.lp-box .sh2{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.lp-box .sh2 span,
.lp-box .sh3 span{
  position: relative;
}

/* .lp-box .sh2 span::after{
  content: attr(data-text);
  position: absolute;
  left:0;
  top:0;
  filter: blur(0.25em);
  z-index: -1;
  text-shadow: 
  2px 0px 3px #fff,
  -2px 0px 3px #fff,
  0px 2px 3px #fff,
  0px -2px 3px #fff;
  text-align: center;
} */

/* .lp-box .sh3 span::after{
  content: attr(data-text);
  position: absolute;
  left:0;
  top:0;
  filter: blur(5px);
  z-index: -1;
  text-shadow: 
  2px 0px 3px #fff,
  -2px 0px 3px #fff,
  0px 2px 3px #fff,
  0px -2px 3px #fff,
  2px 2px 3px #fff,
  -2px 2px 3px #fff,
  2px -2px 3px #fff,
  -2px -2px 3px #fff;
} */

.lp-box .sh4 span,
.lp-box .sh5 span{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.lp-box .sh4 span::after{
  content: attr(data-text);
  position: absolute;
  left:0;
  top:0;
  height: 100%;
  z-index: 0;
  width: 100%;
  text-shadow: 
  0px 0px 0.03em #60abef,
  0px 0.025em 0.03em #60abef,
  0px 0.03em 0.03em #60abef;
}

.lp-box .sh5 span::after{
  content: attr(data-text);
  position: absolute;
  left:0;
  top:0;
  height: 100%;
  z-index: 0;
  width: 100%;
  text-shadow: 
  0px 0px 0.03em #60abef,
  0px 0.025em 0.03em #60abef,
  0px 0.03em 0.03em #60abef;
}

.lp-box .sh4 span::before{
  content: attr(data-text);
  position: absolute;
  left:0;
  top:0;
  height: 100%;
  z-index: -1;
  width: 100%;
  filter: blur(1px);
  z-index: 0;
  text-shadow: 
    0 0 0.01em #fff,
    0 0 0.02em #fff,
    0 0 0.03em #fff,
    0 0 0.04em #fff,
    0 0 0.05em #fff,
    0 0 0.06em #fff,
    0 0 0.07em #fff,
    0 0 0.08em #fff,
    0 0 0.09em #fff,
    0 0 0.1em #fff,
    0 0 0.15em #fff,
    0 0 0.2em #fff,
    0 0 0.25em #fff,
    0 0 0.3em #fff,
    0 0 0.35em #fff,
    0 0 0.4em #fff,
    0 0 0.45em #fff,
    0 0 0.5em #fff;
}


.lp-box .sh5 span::before{
  content: attr(data-text);
  position: absolute;
  left:0;
  top:0;
  height: 100%;
  z-index: -1;
  width: 100%;
  filter: blur(5px);
  z-index: 0;
  text-shadow: 
    0 0 0.1em #fff,
    0 0 0.2em #fff,
    0 0 0.3em #fff,
    0 0 0.4em #fff,
    0 0 0.5em #fff,
    0 0 0.6em #fff,
    0 0 0.7em #fff,
    0 0 0.8em #fff,
    0 0 0.9em #fff,
    0 0 1em #fff;
}
.lp-box .sh5 span{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  line-height: 1.3;
}

.lp-box .sh5 span::before{
  content: attr(data-text);
  position: absolute;
  left:0;
  top:0;
  height: 100%;
  z-index: -1;
  width: 100%;
  filter: blur(2px);
  z-index: 0;
  text-shadow: 
  0 0 0.11em #fff,
  0 0 0.12em #fff,
  0 0 0.13em #fff,
  0 0 0.14em #fff,
  0 0 0.15em #fff,
  0 0 0.16em #fff,
  0 0 0.17em #fff,
  0 0 0.18em #fff,
  0 0 0.19em #fff,
  0 0 0.2em #fff,
  0 0 0.21em #fff,
  0 0 0.22em #fff,
  0 0 0.23em #fff,
  0 0 0.24em #fff,
  0 0 0.25em #fff,
  0 0 0.3em #fff,
  0 0 0.35em #fff,
  0 0 0.4em #fff;
}

.lp-box .sh5 span em{
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 3;
}

.lp-box .sh5 span::after{
  color: #fff;
}

.gradient-text1 {
  background: linear-gradient(90deg, #ffcdef, #abd5fb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.atop .msg {
  font-size: 2.9rem;
  left: 0;
  top: 78.2%;
  line-height: 1.75;
  color: #7eabe2;
  flex-direction: column;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 0.5em;
  letter-spacing: 0.72em;
  width: 100%;
}


.atop .msg p{
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: center;
  width: 100%;
}

.atop .msg p span{
  position: relative;
  display: inline-block;
  font-weight: bold;
}

.block1 .msg1,
.block1 .msg3 {
  font-size: 2.65rem;
  color: #fdc7eb;
  letter-spacing: 0.25em;
  left: 70%;
  top: 37.5%;
  aspect-ratio: 100 / 25.8;
  width: 26.5%;
  align-items: center;
  display: flex;
  justify-content: center;
}

.block1 .msg3 {
  top: 60.7%;
}

.block1 .msg2,
.block1 .msg4{
  font-size: 3.8rem;
  color: #7eabe2;
  left: 70%;
  top: 45.5%;
  width: 26.5%;
  font-weight: bold;
  letter-spacing: 0.15em;
  aspect-ratio: 100 / 41;
  display: flex;
  padding-left: 0.25em;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.block1 .msg4 {
  top: 68.15%;
}

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

.item .brand {
  top: 14%;
  left: 30%;
  width: 66%;
  font-size: 3.8rem;
  color: #d3f1fb;
}

.item .color {
  top: 18.5%;
  left: 30%;
  width: 66%;
  font-size: 8rem;
  color: #d3f1fb;
  line-height: 1.5;
}

.item .list {
  left: 16.8%;
  top: 37%;
  display: flex;
  justify-content: space-between;
  width: 66.3%;
  z-index: 2;
}

.item .list>li{
  aspect-ratio: 100 / 91;
  width: 28%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.15;
  color: #fff;
  text-align: center;
}

.item .list>li span{
  font-weight: bold;
  font-size: 2.2rem;
  display: block;
}

.item .list>li strong{
  font-weight: bold;
  font-size: 2.6rem;
  display: block;
  letter-spacing: 0.1em;
}

.item .list>li small{
  font-weight: bold;
  font-size: 1.6rem;
  display: block;
  letter-spacing: 0.1em;
}

.item .msg {
  width: 40%;
  left: 60%;
  top: 57%;
  display: flex;
  align-content: center;
  justify-content: center;
  aspect-ratio: 100 / 104;
}

.item .msg p{
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  font-size: 2.4rem;
  line-height: 1.8;
  color: #7eabe2;
  font-weight: bold;
  letter-spacing: 0.6em;
}

.item2 .color {top: 16.5%;}
.item3 .color {top: 17.5%;}
.item4 .color {top: 16.9%;}
.item5 .color {top: 18.5%;}
.item6 .color {top: 16.5%;}

.item2 .list{ top: 36%;}
.item3 .list{ top: 36.5%;}
.item4 .list{ top: 36.5%;}
.item5 .list{ top: 35.5%;}
.item6 .list{ top: 31.5%;}


.item2 .brand { top: 12.5%;}
.item3 .brand { top: 13.5%;}
.item4 .brand { top: 13%;}
.item5 .brand { top: 12.5%;}
.item6 .brand { top: 10.8%;}

.item5 .color {font-size: 6rem;}
.item6 .color {font-size: 6rem;}
.item5 .msg { top: 56.5%;}
.item6 .msg { top: 49.5%;}

.item2 .msg p {letter-spacing: 0.5em;}
.item3 .msg p {letter-spacing: 0.46em;}
.item4 .msg p {letter-spacing: 0.55em;}
.item5 .msg p {letter-spacing: 0.5em;}
.item6 .msg p {letter-spacing: 0.45em;}


@media screen and (max-width: 1150px) {
  .atop .msg {
    font-size: clamp(2.52rem, 2.52vw, 2.9rem);
  }

  .block1 .msg1,
  .block1 .msg3 {
    font-size: clamp(2.30rem, 2.30vw, 2.65rem);
  }

  .block1 .msg2,
  .block1 .msg4 {
    font-size: clamp(3.30rem, 3.30vw, 3.8rem);
  }

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

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

  .item .list > li span {
    font-size: clamp(1.91rem, 1.91vw, 2.2rem);
  }

  .item .list > li strong {
    font-size: clamp(2.26rem, 2.26vw, 2.6rem);
  }

  .item .list > li small {
    font-size: clamp(1.39rem, 1.39vw, 1.6rem);
  }

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

  .item5 .color {
    font-size: clamp(5.22rem, 5.22vw, 6rem);
  }

  .item6 .color {
    font-size: clamp(5.22rem, 5.22vw, 6rem);
  }

}

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

  .atop .msg {
    font-size: 3.74vw;
  }

  .block1 .msg1,
  .block1 .msg3 {
    font-size: 3.41vw;
  }

  .block1 .msg2,
  .block1 .msg4{
    font-size: 4.90vw;
  }

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

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

  .item .list > li span{
    font-size: 2.84vw;
  }

  .item .list > li strong{
    font-size: 3.35vw;
  }

  .item .list > li small{
    font-size: 2.06vw;
  }

  .item .msg p{
    font-size: 3.09vw;
  }

  .item5 .color {
    font-size: 7.73vw;
  }

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

}