.headline-l {display: none;}
.headline-l.align-l {display: block;}
img {
  opacity: 1;
  transition: opacity 0.3s ease;
  width: 100%;
  image-rendering: auto;
}

img[data-image] {opacity: 0;}

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

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

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

.lp-box .h-op::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  pointer-events: none;
  transition: all 0.5s ease;
}

.lp-box .h-op:hover{
  opacity: 1 !important;
}

.lp-box .h-op:hover::after{
  opacity: 0.5;
  visibility: visible;
  background: #fff;
}

.lp-box {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 28px;
  line-height: 1.61;
  text-align: left;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
  color: #231815;
  font-family: "Noto Sans JP", sans-serif;
  --sub: "Zen Old Mincho", serif;
}

.lp-abox .atop{ aspect-ratio: 800 / 2702;}
.lp-abox .block1{ aspect-ratio: 800 / 1646;}
.lp-abox .block2{ aspect-ratio: 800 / 1662;}
.lp-abox .block3{ aspect-ratio: 800 / 2487;}
.lp-abox .block4{ aspect-ratio: 800 / 2431;}
.lp-abox .item1{ aspect-ratio: 800 / 2600;}
.lp-abox .item2{ aspect-ratio: 800 / 2600;}
.lp-abox .item5{ aspect-ratio: 800 / 2600;}
.lp-abox .item6{ aspect-ratio: 800 / 2600;}
.lp-abox .bg-wrap1{ aspect-ratio: 800 / 4329;}
.lp-abox .bg-wrap2{ aspect-ratio: 800 / 4245;}

.lp-box .atop .box {
  left: 1%;
  top: 50.5%;
  display: flex;
}

.lp-box .atop .box .nav1{
  width: calc(( 372 / 785 ) * 100% );
}

.lp-box .atop .box .nav2{
  width: calc(( 413 / 785 ) * 100% );
}

.lp-box .block1 .msg1 {
  top: 90.3%;
  left: 0;
  font-size: 3.5rem;
  text-align: center;
  color: #95715e;
  font-family: var(--sub);
  width: 100%;
  font-weight: bold;
  text-align: center;
}

.lp-box .block1 .msg1 img{
  width: calc(( 412 / 800 ) * 100% );
}
.lp-box .block2 .msg1 {
  top: 91%;
  left: 0;
  font-size: 3.5rem;
  text-align: center;
  color: #95715e;
  font-family: var(--sub);
  width: 100%;
  text-align: center;
}

.lp-box .block2 .msg1 {
  top: 90%;
  left: 0;
  font-size: 3rem;
  text-align: center;
  color: #95715e;
  font-family: var(--sub);
  width: 100%;
  font-weight: bold;
  text-align: center;
}

.lp-box .block2 .msg1 small{
  font-size: 2.4rem;
}

.lp-box .block2 .msg1 img{
  width: calc(( 711 / 800 ) * 100% );
}

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

.lp-box .block3 .color-map {
  top: 54.5%;
  left: 5.25%;
  width: calc(( 716 / 800 ) * 100% );
}

.lp-box .block4 {
  margin-top: -15.5%;
}

.lp-box .block4 .concept {
  left: 0;
  top: 36.65%;
  font-size: 2.1rem;
  color: #5b3d27;
  text-align: right;
  line-height: 2;
  width: 100%;
  font-family: var(--sub);
  letter-spacing: -0.03em;
  padding-right: 6%;
}
.lp-box .block4 .concept span{
  display: block;
}
.lp-box .block4 .concept .line1{
  margin-bottom: 0.5em;
}
.lp-box .block4 .concept .line2 {
  margin-right: -0.5em;
  letter-spacing: -0.07em;
}

.lp-box .block4 .profile {
  left: 0;
  top: 84.8%;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 1.75rem;
  line-height: 1.75;
}

.lp-box .block4 .profile>p{
  margin-bottom: 1.65em;
}

.lp-box .lensoff {
  left: 6.2%;
  top: 62.5%;
  width: 87.625%;
  color: #fff;
  z-index: 1;
}

.lp-box .lensoff .msg{
  left: 10%;
  font-size: 2.25rem;
  color: #fff;
  font-weight: 500;
  z-index: 2;
  line-height: 1.72;
}
  
.lp-box .lensoff .msg1 {
  top: 39.3%;
}

.lp-box .lensoff .msg2 {
  top: 60.35%;
  letter-spacing: 0.1em;
}

.lp-box .lensoff .msg3 {
  top: 81.39%;
}

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

.lp-box .item .color,
.lp-box .item .clear {
  aspect-ratio: 170 / 28;
  color: #fff;
  font-size: 2.1rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 7.3%;
  top: 55.45%;
  width: 40.55%;
}

.lp-box .item .color{
  left: 52.1%;
}

.lp-box .item .series {
  left: 5%;
  top: 61.8%;
  font-size: 4rem;
  color: #fff;
  width: 32%;
  aspect-ratio: 259 / 149;
  display: flex;
  align-items: center;
  font-family: var(--sub);
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.lp-box .item .series2 {
  left: 2%;
  top: 59.3%;
  font-size: 4rem;
  color: #fff;
  width: 42.5%;
  aspect-ratio: 259 / 141;
  display: flex;
  align-items: center;
  font-family: var(--sub);
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.lp-box .item .series span{
  margin-top: -3%;
  font-weight: bold;
  text-align: center;
  transform: rotate(-15deg ) skewX(-9deg);
}

.lp-box .item .series2 span {
  margin-top: -3%;
  font-weight: bold;
  display: block;
  text-align: center;
  transform: rotate(-11deg) skewX(-9deg);
}

.lp-box .item .series2 small {
  font-size: 2rem;
  font-weight: 300;
  display: block;
  text-align: center;
  margin-bottom: 3%;
  font-family: var(--sub);
  margin-top: -6%;
}

.lp-box .item .series2 em {
  font-size: 2.85rem;
  font-weight: 600;
  font-family: var(--sub);
  text-align: center;
  line-height: 1;
  letter-spacing: -0.09em;
  margin-top: 0px;
  display: block;
}

.lp-box .item1 .catch {
  top: 84.8%;
  left: 4.55%;
  width: calc(( 401 / 800 ) * 100% );
}

.lp-box .item2 .catch {
  top: 85.12%;
  left: 4.52%;
  width: calc(( 413 / 800) * 100%);
}

.lp-box .item3 .catch {
  top: 86.9%;
  left: 4.89%;
  width: calc(( 373 / 800) * 100%);
}

.lp-box .item4 .catch {
  top: 83.8%;
  left: 4.6%;
  width: calc(( 375 / 800) * 100%);
}

.lp-box .item5 .catch {
  top: 84.8%;
  left: 3.2%;
  width: calc(( 396 / 800 ) * 100% );
}

.lp-box .item6 .catch {
  top: 86.8%;
  left: 4%;
  width: calc(( 376 / 800) * 100%);
}

.lp-box .item2 .clear, 
.lp-box .item2 .color {
    top: 56.45%;
}

.lp-box .item3 .clear,
.lp-box .item3 .color {
  top: 58.18%;
}

.lp-box .item4 .clear,
.lp-box .item4 .color {
  top: 54.8%;
}

.lp-box .item5 .clear,
.lp-box .item5 .color {
  top: 55.89%;
}

.lp-box .item6 .clear,
.lp-box .item6 .color {
  top: 57.55%;
}

.lp-box .item2 .series {
  top: 62.8%;
}

.lp-box .item3 .series {
  top: 64.5%;
}

.lp-box .item5 .series2 {
  top: 60.7%;
}

.lp-box .item6 .series2 {
  top: 62.1%;
}

.lp-box .item3,
.lp-box .item6{
  left:0;
  top:0;
  width: 100%;
  aspect-ratio: 800 / 2600;
}

.lp-box .attention {
  aspect-ratio: 781 / 1501;
  left: 1%;
  top: 60.5%;
  color: #fff;
}

.lp-box .attention .catch {
  font-size: 2.6rem;
  left: 24.3%;
  top: 15.7%;
  aspect-ratio: 400 / 45;
  line-height: 1;
  width: 51.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.015em;
}

.lp-box .attention .pos{
  font-size: 1.7rem;
  position: absolute;
  left:0;
  top:0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
}

.lp-box .attention .pos1 {
  aspect-ratio: 195 / 37;
  left: 10.8%;
  top: 46.18%;
  width: 25%;
}

.lp-box .attention .pos2 {
  aspect-ratio: 195 / 37;
  left: 37.5%;
  top: 46.18%;
  width: 25%;
  font-size: 1.5rem;
}

.lp-box .attention .pos3 {
  aspect-ratio: 195 / 45;
  left: 67.5%;
  top: 46.18%;
  width: 20%;
  font-size: 1.55rem;
  letter-spacing: 0.05em;
  padding-left: 0.2em;
}

.lp-box .attention .msg1 {
  top: 52.8%;
  text-align: center;
  font-size: 2.15rem; 
  font-weight: 500;
  letter-spacing: 0.03em;
  width: 100%;
}

.lp-box .attention .msg2 {
  top: 86.5%;
  text-align: center;
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: 0em;
  width: 100%;
  line-height: 1.9;
}

.lp-box .attention .msg2 small{
  font-size: 1.2rem;
}


.lp-box .attention .gif-box {
  left: 9.5%;
  top: 63.5%;
  width: 45.9%;
  aspect-ratio: 341 / 255;
}

.lp-box .attention .gif-box .gif-msg {
  position: absolute;
  bottom: 4%;
  left: 3.5%;
  z-index: 2;
  width: 43.85%;
}

.lp-box .attention .gif{
  min-width:100%;
  min-height: 100%;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%,-50%);
}

.lp-box .attention .gif>img{
  height: 100%;
  object-fit: cover;
}


@media screen and (max-device-width: 767px) {
  .lp-box {
    width: calc(100% + 26px);
    margin-left: -13px;
    font-size: 3.5vw;
  }
  
  .lp-box .h-op::after{
    display: none;
  }

  .lp-box img{
    height: auto;
  }

  .lp-box a:hover{
    opacity: 1 !important;
  }

  .lp-box .item3,
  .lp-box .item6{
    left:0;
    top:0;
    width: 100%;
    aspect-ratio: initial;
    height: 325vw;
  }


  .lp-box .block1 .msg1 {
    font-size: 4.51vw;
  }

  .lp-box .block2 .msg1 {
    font-size: 4.51vw;  
  }

  .lp-box .block2 .msg1 {
    font-size: 3.87vw;
  }

  .lp-box .block2 .msg1 small{
    font-size: 3.09vw;
  }
  

  .lp-box .block4 .concept {
    font-size: 2.71vw;
  }

  .lp-box .block4 .profile {
    font-size: 2.26vw;
  }

  .lp-box .lensoff .msg{
    font-size: 2.90vw;
  }

  .lp-box .item .color,
  .lp-box .item .clear {
    font-size: 2.71vw;
  }

  .lp-box .item .series {
    font-size: 5.15vw;
  }

  .lp-box .item .series2 {
    font-size: 5.15vw;
  }

  .lp-box .item .series2 small {
    font-size: 2.58vw;
  }

  .lp-box .item .series2 em {
    font-size: 3.67vw;
  }

  .lp-box .attention .catch {
    font-size: 3.35vw;
  }

  .lp-box .attention .pos{
    font-size: 2.19vw;
  }

  .lp-box .attention .pos3 {
    font-size: 2.00vw;
  }
  
  .lp-box .attention .msg1 {
    font-size: 2.77vw;
    font-weight: 500;
  }

  .lp-box .attention .msg2 {
    font-size: 2.00vw;
  }

  .lp-box .attention .msg2 small{
    font-size: 1.55vw;
  }

}