@charset "UTF-8";

/* ==========================================================================
   #page-landplan（ランドプランページ）
   HTMLの<section>出現順に合わせて配置しています。
   ========================================================================== */

   .overlay-section{
    position: relative;
   }
   .overlay-section::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(161, 156, 153, 0.45), rgba(200, 200, 203, 0.45) 27% 68%, rgba(161, 156, 153, 0.45));
   }

   .top_txt_box{
    padding: 0 0 60px;
    max-width: 1200px;
    width: 90%;
    margin: auto;
   }
   .top_txt_box .h3_lower{
    font-size: 36px;
    font-weight: 400;
    text-align: center;
    margin: 0 auto 15px;
   }
   .top_txt_box p{
    font-size: 20px;
    font-family: "ヒラギノ角ゴ ProN W3";
    font-weight: 400;
    text-align: center;
   }


@media screen and (max-width: 768px) {
  .overlay-section::before{
    background: linear-gradient(90deg, rgba(186, 181, 178, 0.5), rgba(225, 225, 228, 0.5) 50%, rgba(186, 181, 178, 0.5));
   }

   .top_txt_box{
    padding: 0 0 20px;
   }
   .top_txt_box:first-of-type{
    padding: 0 0 40px;
   }
  .top_txt_box .h3_lower{
    font-size: 30px;
    margin: 0 auto 25px;
  }
  .top_txt_box p{
    font-size: 17px;
    text-align: left;
  }

  .js-scrollable{
    overflow: hidden;
  }
  .js-scrollable img{
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* landplan_block */
#page-landplan .landplan_block{
  padding: 60px 0 0;
}
#page-landplan .landplan_block .map_box{
  width: 100%;
}
#page-landplan .landplan_block .map_box img{
  width: 100%;
}
#page-landplan .landplan_block .landplan_wrap{
  margin: 70px auto 100px;
  gap: 55px;
  max-width: 1200px;
  width: 90%;
}
#page-landplan .landplan_block .landplan_wrap .landplan_box{
  width: calc((100% - 55px) / 2);
  font-family: "ヒラギノ角ゴ ProN W3";
}
#page-landplan .landplan_block .landplan_wrap .landplan_box .img_box{
  margin: 0 auto 15px;
}
#page-landplan .landplan_block .landplan_wrap .landplan_box .h5_lower{
  font-size: 25px;
  font-weight: 500;
  margin: 0 auto 15px;
}
#page-landplan .landplan_block .landplan_wrap .landplan_box p{
  font-size: 18px;
  font-weight: 400;
}

#page-landplan .landplan_block .map_box_01{
  margin: 0 auto 45px;
}
#page-landplan .landplan_block .map_box_01 img{
  /* width: 100vw;
  margin-left:calc(-50vw + 50%); */
}

#page-landplan .landplan_block .img_list{
  gap: 35px 20px;
  margin: 0 auto 100px;
  max-width: 1200px;
  width: 90%;
}
#page-landplan .landplan_block .img_list li{
  width: calc((100% - 40px) / 3);
}
#page-landplan .landplan_block .img_list li p{
  margin: 10px auto 0;
  font-size: 19px;
  font-family: "ヒラギノ角ゴ ProN W3";
  font-weight: 500;
}

#page-landplan .bottom_img{
  position: relative;
}
#page-landplan .bottom_img .pic_caption{
  position: absolute;
  right: 1em;
  bottom: 10px;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  #page-landplan .landplan_block{
    padding: 20px 0 0;
  }
  #page-landplan .landplan_block .landplan_wrap{
    gap: 10px;
    margin: 50px auto 25px;
  }
  #page-landplan .landplan_block .landplan_wrap .landplan_box{
    width: 100%;
  }
  #page-landplan .landplan_block .landplan_wrap .landplan_box .h5_lower{
    font-size: 22px;
    margin: 0 auto 7px;
  }
  #page-landplan .landplan_block .landplan_wrap .landplan_box p{
    font-size: 17px;
  }

  #page-landplan .landplan_block .map_box_01{
    overflow: hidden;
  }
  #page-landplan .landplan_block .map_box_01 .pic_caption{
    width: 90%;
  }
  /* #page-landplan .landplan_block .map_box_01 img{
    min-width: 680px;
  } */

  #page-landplan .landplan_block .img_list{
    gap: 10px;
    margin: 0 auto 20px;
  }
  #page-landplan .landplan_block .img_list li{
    width: 100%;
  }
  #page-landplan .landplan_block .img_list li p{
    font-size: 15px;
  }

  #page-landplan .bottom_img img{
    min-width: 800px;
  }
  #page-landplan .bottom_img .pic_caption{
    padding: 10px;
    text-align: left;
    background: #fff;
    right: 0;
  }
}