@charset "utf-8";

.feels .item:nth-of-type(1) .text{
  left: 12.5%;
  top: 25%;
}
.feels .item:nth-of-type(2) .text{
  left: 15.5%;
  top: 24%;
}
.feels .item:nth-of-type(3) .img{
  bottom: -1.1%;
}
.feels .item:nth-of-type(3) .text{
  left: 13.5%;
  top: 26%;
}
.feels .item:nth-of-type(4) .text{
  left: 65%;
  top: 32%;
}
.feels .item:nth-of-type(5) .text{
  left: 59.5%;
  top: 31%;
}
.body{
  margin-top: 170px;
}
.body .modal_btn:nth-of-type(1){
  top: -19%;
  left: 52.9%;
}
.body .modal_btn:nth-of-type(2){
  top: 59%;
  left: -3.1%;
}
.body .modal_btn:nth-of-type(3){
  bottom: -25%;
  right: 14.4%;
}
.body .modal_btn:nth-of-type(4){
  top: -7.5%;
  right: 2%;
}
.foods .box-shadow .img{
  width: 100%;
}

.house{
  padding: 105px 0 120px;
}
.house::before{
  width: 9.8%;
}
.house .modal_btn:nth-of-type(1){
  top: 20%;
  left: 12%;
}
.house .modal_btn:nth-of-type(2){
  top: 9%;
  left: 39%;
}
.house .modal_btn:nth-of-type(3){
  top: 20%;
  right: 30%;
}
.house .modal_btn:nth-of-type(4){
  top: 32%;
  left: 28%;
}
.house .modal_btn:nth-of-type(5){
  top: 39.7%;
  right: 11.5%;
}
.house .modal_btn:nth-of-type(6){
  bottom: 9%;
  left: 22%;
}
.house .modal_btn:nth-of-type(7){
  bottom: 20%;
  left: 39%;
}
.house .modal_btn:nth-of-type(8){
  bottom: 20%;
  right: 11.5%;
}
.house::before{
  background: url("../img/webp/sec4_animal.webp") center bottom / contain no-repeat;
}
.no-webp .house::before{
  background-image: url("../img/sec4_animal.png");
}
@media screen and (max-width: 767px) {
  .feels .item:nth-of-type(2) .text{
    left: 8.5%;
  }
  .body{
    margin-top: 97px;
  }
  .body .modal_btn:nth-of-type(1) {
    top: -25.5%;
    left: 46.5%;
  }
  .body .modal_btn:nth-of-type(2){
    top: 62.6%;
    left: 3.5%;
  }
  .body .modal_btn:nth-of-type(3){
    bottom: -29%;
    right: 15.4%;
  }
  .body .modal_btn:nth-of-type(4){
    top: -12.8%;
    right: 6.2%;
  }
  
  .foods .box-shadow .img img{
    width: 85%;
  }
  .food-sub .box-shadow .img img{
    width: 75%;
  }
  
  .house{
    padding: 45px 0 53px;
  }
  .house::before{
    width: 15.2%;
  }
  .house .modal_btn:nth-of-type(1){
    top: 13%;
    left: 1.5%;
  }
  .house .modal_btn:nth-of-type(2){
    top: 3%;
    left: 32%;
  }
  .house .modal_btn:nth-of-type(3){
    top: 16%;
    right: 21%;
  }
  .house .modal_btn:nth-of-type(4){
    top: 29.5%;
    left: 21%;
  }
  .house .modal_btn:nth-of-type(5){
    top: 34%;
    right: 4%;
  }
  .house .modal_btn:nth-of-type(6){
    bottom: 4%;
    left: 17%;
  }
  .house .modal_btn:nth-of-type(7){
    bottom: 18%;
    left: 36%;
  }
  .house .modal_btn:nth-of-type(8){
    bottom: 4%;
    right: 13%;
  }
}