.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 a.h-op{
  opacity: 1;
}

.lp-box a.h-op::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.19s ease;
}

.lp-box a.h-op:hover::after{
  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: #000000;
  white-space: nowrap;
  font-family: "Zen Maru Gothic", sans-serif;
 }

.lp-box .atop1 {
  left: 6%;
  top: 55.9%;
  width: calc(var(--w) / 800 * 100%);
}

.lp-box .block1 .msg1 {
  font-size: 2.8rem;
  font-weight: 900;
  left:0;
  top:0;
  width: 100%;
}

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

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

.lp-box .block2{
  z-index: 3;
}

.lp-box .nav {
  left: 3%;
  width: calc(var(--w) / 800 * 100%);
}

.lp-box .nav1 {
  top: 10.28%;
}

.lp-box .nav2 {
  top: 25.90%;
}

.lp-box .nav3 {
  top: 41.52%;
}

.lp-box .nav4 {
  top: 57.14%;
}

.lp-box .nav5 {
  top: 72.76%;
}

.lp-box .nav6 {
  top: 88.38%;
}
.lp-box .head{
  margin-top: -1px;
}

.item .link {
  left: 12%;
  top: 92.1%;
  width: calc(var(--w) / 800 * 100%);
}

.item2 .link {
  left: 10.9%;
  top: 92.9%;
}

.item3 .link {
  left: 11.5%;
  top: 92.15%;
}

.item4 .link {
  left: 11.5%;
  top: 93.6%;
}

.item5 .link {
  left: 11%;
  top: 93.5%;
}

.item6 .link {
  left: 11.9%;
  top: 93.8%;
}

.lp-box .block1 .msg {
  font-size: 2.8rem;
  font-weight: 900;
  width: 100%;
  color: #fff;
  letter-spacing: 0.14em;
  left: 0;
  line-height: 1.86;
}

.lp-box .block1 .msg1 {
  top: 5%;
}

.lp-box .block1 .msg2 {
  top: 10.6%;
}

.lp-box .block1 .msg3 {
  top: 19.3%;
  padding-left:0.5em;
}
  
.lp-box .block1 .msg4 {
  top: 33.8%;
  padding-left:0.5em;
}

.lp-box .block1 .msg5 {
  top: 48.6%;
}

.lp-box .block1_txt {
  top: 5.35%;
  left: 7.55%;
  width: calc(var(--w) / 800 * 100%);
}

.lp-box .block1_1 {
  top: 91.5%;
  left: 3.5%;
  width: 92.8%;
  aspect-ratio: 800 / 68;
  display: flex;
  justify-content: space-between;
}

.lp-box .block1_1 p{
  width: 49.2%;
  display: flex;
  font-weight: 500;
  color:#fff;
  font-size: 3.2rem;
  justify-content: center;
  align-items: center;
  letter-spacing: -0.05em;
  text-shadow:2px 2px 3px #0080bd;
}

.lp-box .block3 .txt {
  padding-top: 0.5em;
    color: #fff;
    font-size: 2.3rem;
    line-height: calc(27.8 / 23);
    text-shadow: 3px 3px 3px rgba(0, 0, 0, .3), 4px 4px 4px rgba(0, 0, 0, .3);
    width: 100%;
    left: 0;
    top: 70.2%;
    font-weight: 400;
    aspect-ratio: 800 / 254;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lp-box .block3 .msg{
  margin-bottom: 0.7em;
}

.lp-box .block3 .msg3{
  margin-bottom: 0.7em;
}

.item .msg1 img{
  width: calc(var(--w) / 800 * 100%);
}

.item1 .msg1 {
  left: 0;
  width: 100%;
  top: 49.4%;
}

.item2 .msg1 {
  width: 100%;
  top: 54%;
}

.item3 .msg1 {
  width: 100%;
  top: 50.5%;
}

.item4 .msg1 {
  width: 100%;
  top: 51.9%;
}

.item5 .msg1 {
  width: 100%;
  top: 53%;
}

.item6 .msg1 {
  width: 100%;
  top: 51.6%;
}

.item .lens {
  left: 6.6%;
  top: 75%;
  display: flex;
  width: 86.5%;
  justify-content: space-between;
  aspect-ratio: 1000 / 82;
  color: #fff;
}

.item .lens2 {
  top: 86.55%;
}

.item1 .lens2 {
  top: 86.53%;
}

.item .lens>p{
  width: 46.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
  font-size: 2.8rem;
  font-weight: 500;
}

.item .lens> .line2{
  padding-left: 0.4em;
}

.item1 .lens .line1{
  text-shadow:2px 2px 3px #898ea2;
}

.item1 .lens .line2{
  text-shadow:2px 2px 3px #0081d2;
}

.item2 .lens1{
  top:76.1%;
}

.item2 .lens2{
  top:87.65%;
}

.item2 .lens .line1{
  color:#5d504b;
}

.item3 .lens .line1{
  color:#211816;
}

.item3 .lens1{
  top:75.15%;
  text-shadow:2px 2px 2px rgba(0, 0, 0, .3);
}

.item3 .lens2 {
  top: 86.71%;
  text-shadow:2px 2px 2px rgba(0, 0, 0, .3);
}

.item3 .lens .line2{
  color:#9f2022;
}

.item4 .lens1{
  top:76.5%
}

.item4 .lens2{
  top: 88.1%;
}

.item5 .lens1{
  top:76.8%;
  left: 6.8%;
}

.item5 .lens2 {
  left: 6.8%;
  top: 88.3%;
}

.item5 .lens .line1{
  color: #5d504b;
}

.item6 .lens1{
  top:76.85%;
  text-shadow:2px 2px 2px #989898;
}

.item6 .lens2 {
  top: 88.351%;
  text-shadow:2px 2px 2px #dd90be;
}

.block4 .link {
  left: 6.55%;
  top: 69.5%;
  width: calc(var(--w) / 800 * 100%);
}

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

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

  .lp-box a.h-op::after{
    display: none;
  }

  .lp-box .block1 .msg {
    font-size: 3.5vw;
  }

  .lp-box .block1_1 p{
    font-size: 4vw;
  }

  .lp-box .block3 .txt {
    font-size: 2.85vw;
  }

  .lp-box .item .lens>p{
    font-size: 3.5vw;
  }

  .lp-box .block1_1 p {
    text-shadow: 1px 1px 2px #0080bd;
  }

  .lp-box .block3 .txt {
    text-shadow:
      3px 3px 3px rgba(0, 0, 0, .3);
  }

  .item1 .lens .line1 {
    text-shadow: 1px 1px 3px #898ea2;
  }

  .item1 .lens .line2 {
    text-shadow: 1px 1px 3px #0081d2;
  }

  .item3 .lens1 {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
  }

  .item3 .lens2 {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
  }

  .item6 .lens1 {
    text-shadow: 1px 1px 1px #989898;
  }

  .item6 .lens2 {
    text-shadow: 1px 1px 1px #dd90be;
  }

  }