.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;
  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: "Noto Serif JP", serif;
}

.atop{ aspect-ratio: 800 / 2358;}
.block1{ aspect-ratio: 800 / 577;}
.block2{ aspect-ratio: 800 / 1395;}
.block3{ aspect-ratio: 800 / 1463;}
.block5{ aspect-ratio: 800 / 2001;}

.item1{ aspect-ratio: 800 / 1581;}
.item2{ aspect-ratio: 800 / 1581;}
.item3{ aspect-ratio: 800 / 1204;}
.item4{ aspect-ratio: 800 / 1581;}
.item5{ aspect-ratio: 800 / 1581;}
.item6{ aspect-ratio: 800 / 1146;}

.atop .msg1 {
  left: 11.25%;
  top: 63.39%;
  width: calc(( 654 / 800 ) * 100% );
}

.atop .msg2,
.atop .msg3 {
  left: 0;
  top: 88.9%;
  padding-right: 0.75em;
  text-align: right;
  font-size: 2.35rem;
  color: #5d3d27;
  width: 100%;
  font-family: var(--sub);
  line-height: 1.68;
  letter-spacing: 0.02em;
}

.atop .msg2>span{
  padding-right: 0.3em;
}

.atop .msg3 {
  top: 93.55%;
  line-height: 2.1;
}

.atop .msg3>span{
  padding-right: 0.4em;
}

.block1{
  font-family: "Zen Old Mincho", serif;
}

.block1 .msg1,
.block1 .msg2 {
  left: 65.5%;
  top: 44%;
  width: 20%;
  text-align: center;
  color: #fff;
  text-shadow:
  0 0 1px rgba(111, 119, 112, 0.7),
  0 0 2px rgba(111, 119, 112, 0.7),
  0 0 3px rgba(111, 119, 112, 0.7),
  0 0 4px rgba(111, 119, 112, 0.7),
  0 0 5px rgba(111, 119, 112, 0.7),
  0 0 6px rgba(111, 119, 112, 0.7),
  0 0 7px rgba(111, 119, 112, 0.7),
  0 0 8px rgba(111, 119, 112, 0.7);
  font-weight: 900;
}
.block1 .msg1>span,
.block1 .msg2>span{
  border: 1px solid #fff;
  font-size: 2.1rem;
  width: 118px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-radius: 1em;
  aspect-ratio: 118 / 32;
  color: #fff;
  font-weight: 900;
}

.block1 .msg2 {
  top: 62.56%;
}

.block1 .msg1 strong,
.block1 .msg2 strong{
  display: block;
  text-align: center;
  font-size: 3.5rem;
  padding-left: 0.1em;
  color: #fff;
    font-weight: 900;
}

.block1 .msg2>span{
  width: 155px;
  aspect-ratio: 155 / 32;
}

.lp-box .nav{
  position: relative;
  display: flex;
  width: 100%;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  left: 0;
  top: 15.9%;
  width: 100%;
}
.nav ul>li{
  width: calc((385  / 800 ) * 100% );
}

.nav ul>li:nth-child(even){
  width: calc((413  / 800 ) * 100% );
}

.nav ul>li>a{
  position: relative;
  display:block;
}

.nav ul>li>a p {
  top: 67%;
  aspect-ratio: 216 / 72;
  right: 2%;
  display: flex;
  width: 56%;
  align-items: center;
  font-size: 2.1rem;
  color: #fff;
  padding-left: 0.4em;
}

.nav ul>li:nth-child(even)>a p{
  aspect-ratio: 216 / 72;
  right: 12%;
  width: 53%;
}

.nav ul>li:nth-child(2)>a p{
  font-size: 1.85rem;
  letter-spacing: -0.01em;
}
.nav ul>li:nth-child(3)>a p{
  font-size: 1.85rem;
  letter-spacing: -0.01em;
}

.nav ul>li:nth-child(3)>a p,
.nav ul>li:nth-child(4)>a p{
  top: 64.3%;
}

.nav ul>li:nth-child(4)>a p{
  padding-left: 0.6em;
}


.nav ul>li:nth-child(5)>a p,
.nav ul>li:nth-child(6)>a p{
  top: 64.3%;
  top: 67.3%;
  padding-left: 0.6em;
}

.item .color {
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
  left: 39%;
  top: -8.5%;
  color: #805c49;
}

.sh2{
   text-shadow: 
    0 0 1px #fff2ee,
    0 0 2px #fff2ee,
    0 0 3px #fff2ee,
    0 0 4px #fff2ee,
    0 0 5px #fff2ee,
    0 0 6px #fff2ee,
    0 0 7px #fff2ee,
    0 0 8px #fff2ee,
    0 0 9px #fff2ee,
    0 0 10px #fff2ee ,
    0 0 15px #fff2ee ,
    0 0 20px #fff2ee ;
}

.sh3{
   text-shadow: 
    0 0 1px #eff7fe,
    0 0 2px #eff7fe,
    0 0 3px #eff7fe,
    0 0 4px #eff7fe,
    0 0 5px #eff7fe,
    0 0 6px #eff7fe,
    0 0 7px #eff7fe,
    0 0 8px #eff7fe,
    0 0 9px #eff7fe,
    0 0 10px #eff7fe ,
    0 0 15px #eff7fe ,
    0 0 20px #eff7fe ;
}

.item .msg {
  left: 0;
  top: 38.5%;
  width: 100%;
  aspect-ratio: 800 / 300;
  color: #fff;
  font-size: 3rem;
  text-align: center;
  width: 100%;
  font-weight: bold;
  display: flex;
  align-items: center;
  line-height: 2.4;
  justify-content: center;
  font-family: var(--sub);
}

.item .link {
  display: block;
  width: 735px;
  left: 4%;
  top: 57.65%;
  border-radius: 100em;
  aspect-ratio: 735 / 150;
  border-radius: 100em;
  overflow: hidden;
}

.item .spec{
  display: flex;
  align-items: center;
  justify-content: center;
  left:0;
  top:0;
  width: 100%;
  aspect-ratio:800 / 102;
  font-family: var(--sub);
}
.item .spec>li{
  display: flex;
  align-items: center;
  height: 100%;
  color: #805c49;
}

.item .spec>li>span,
.item .spec>li em{
  background: #fff;
  border-radius: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.6em;
  aspect-ratio: 39 / 21;
  font-size: 2.15rem;
  margin-right: 0.1em;
  transform: translateY(0.06em);
}

.item .spec>li>span{
  width: 5.72em;
  aspect-ratio: 39 / 15;
  font-size: 1.8rem;
}

.item .spec>li strong{
  font-size: 4.8rem;
  font-weight: normal;
  letter-spacing: -0.02em;
  color: #fff;
}
.item .spec>li small{
  font-size: 3.5rem;
  font-weight: normal;
  color: #fff;
  transform: translateY(0.1em);
}

.item .spec>li:nth-child(1) {
  width: 278px;
  padding-left: 3.5%;
}

.item .spec>li:nth-child(3) em{
  margin-right: 0.3em;
}

.item .spec>li:nth-child(2){
  width: 278px;
}
.item .spec>li:nth-child(3){
  width: 244px;
}
.item1 .msg{ text-shadow:3px 3px 7px #9d7c70;}
.item2 .msg{ text-shadow:3px 3px 7px #bdc1c5;}
.item3 .msg{ text-shadow:3px 3px 7px #a19391;}
.item4 .msg{ text-shadow:3px 3px 7px #b4a394;}
.item5 .msg{ text-shadow:3px 3px 7px #bba99c;}
.item6 .msg{ text-shadow:3px 3px 7px #957974;}

.item2 .spec>li{ color: #acbdbe;}
.item3 .spec>li{ color: #84807d;}
.item4 .spec>li{ color: #805c49;}
.item5 .spec>li{ color: #805c49;}
.item6 .spec>li{ color: #805c49;}

.item2 .color{ color: #678484; top: -8%;}
.item3 .color{ color: #84807d; top: -11.2%;}
.item4 .color{ color: #7a6857; top: -8.6%;}
.item5 .color{ color: #7c624c; top: -8.5%;}
.item6 .color{ color: #805c49; top: -11.9%;}

.item3 .msg{  top: 50.5%; }
.item4 .msg{  top: 38.5%; }
.item5 .msg{  top: 38.5%; }
.item6 .msg{  top: 51.8%; }

.item2 .link{ top:57.7%;}
.item3 .link{ top: 75.7%;}
.item4 .link{ top: 57.7%;}
.item5 .link{ top: 57.7%;}
.item6 .link{ top: 78.4%;}

.block5_2 {
  left: 0%;
  bottom: 0%;
  width: 100%;
}

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

  .atop .msg2,
  .atop .msg3 {
    font-size: 3.03vw;
  }

.block1 .msg1,
.block1 .msg2 {
  text-shadow:
  0 0 1px rgba(111, 119, 112, 0.7),
  0 0 2px rgba(111, 119, 112, 0.7),
  0 0 3px rgba(111, 119, 112, 0.7),
  0 0 4px rgba(111, 119, 112, 0.7),
  0 0 5px rgba(111, 119, 112, 0.7),
  0 0 6px rgba(111, 119, 112, 0.7);
  font-weight: 900;
}

  .block1 .msg1>span,
  .block1 .msg2>span{
    font-size: 2.5vw;
  }

  .block1 .msg1 strong,
  .block1 .msg2 strong{
    font-size: 4.51vw;
  }

  .block1 .msg1>span{
    width: 14.75vw;
  }

  .block1 .msg2>span{
    width: 19.375vw;
  }

  .nav ul>li>a p {
    font-size: 2.71vw;
  }

  .nav ul>li:nth-child(2)>a p{
    font-size: 2.35vw;
  }

  .nav ul>li:nth-child(3)>a p{
    font-size: 2.35vw;
  }

  .item .spec>li:nth-child(1) {
    width: 34.75vw;
  }

  .item .spec>li:nth-child(3) em{
    margin-right: 0.3em;
  }

  .item .spec>li:nth-child(2){
    width: 34.75vw;
  }
  .item .spec>li:nth-child(3){
    width: 30.5vw;
  }

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

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

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

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

  .item .spec>li strong{
    font-size: 6vw;
  }

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