@charset "UTF-8";

/*
intro 
*/
.intro{}
.intro figure{
  position: relative;
  margin-top: 100px;
}

/* for sp*/
@media screen and (max-width: 767px) {
  .intro{}
  .intro figure{
    margin-top: 40px;
  }
}



/*ÎÄÖФÎÊý×Ö»­Ïñ*/
.num{}
/* for sp*/
@media screen and (max-width: 767px) {
  .num{
    transform: scale(0.8);
  }
}

/*
plan 
*/
.plan{}

.plan .lp{
  position: relative;
  max-width: 890px;
  margin-left: auto;
  margin-right: auto;
}

.plan .pointList{}
.plan .pointList section{
  display: flex;
  justify-content: space-between;
  margin: 70px 0 0 0;
}
.plan .pointList section:nth-of-type(1){
  margin-top: 100px;
}
.plan .pointList section > div{
  width: calc((400 / 840) * 100%);
  text-align: left;
}
.plan .pointList section > div h5{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.plan .pointList section > div h5 .num{
  margin: 0 15px 0 0;
}
.plan .pointList section > div h5 + p{
  margin: 25px 0 0 0;
}
.plan .pointList section > figure{
  width: calc((400 / 840) * 100%);
}

/* for sp*/
@media screen and (max-width: 767px) {
  .plan{}

  .plan .lp{}

  .plan .pointList{}
  .plan .pointList section{
    display: block;
    margin-top: 40px;
  }
  .plan .pointList section:nth-of-type(1){
    margin-top: 60px;
  }
  .plan .pointList section > div{
    width: 100%;
  }
  .plan .pointList section > div h5{}
  .plan .pointList section > div h5 .num{
    margin-right: 10px;
  }
  .plan .pointList section > div h5 + p{
    margin-top: 20px;
  }
  .plan .pointList section > figure{
    width: 100%;
    margin-top: 20px;
  }
}



/*
townscape 
*/
.townscape{}
.townscape .pointList{
  display: flex;
  justify-content: space-between;
}
.townscape .pointList li{
  width: calc((230 / 840) * 100%);
}
.townscape .pointList li h5{
  margin: 25px 0 0 0;
  text-align: center;
}
.townscape .pointList li h5 + p{
  margin: 25px 0 0 0;
  text-align: left;
}


.townscape .column{
  display: flex;
  justify-content: space-between;
  padding: 60px 0;
  border-color: #747379;
  border-style: solid;
  border-width: 1px 0;
}
.townscape .column > div{
  width: calc((380 / 840) * 100%);
  text-align: left;
}
.townscape .column > div h5{
  text-align: left;
}
.townscape .column > div h5 + p{
  margin: 25px 0 0 0;
}
.townscape .column > figure{
  width: calc((400 / 840) * 100%);
}

/* for sp*/
@media screen and (max-width: 767px) {
  .townscape{}
  .townscape .pointList{
    display: block;
  }
  .townscape .pointList li{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .townscape .pointList li + li{
    margin-top: 40px;
  }
  .townscape .pointList li figure{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
  .townscape .pointList li h5{
    margin-top: 15px;
  }
  .townscape .pointList li h5 + p{
    margin-top: 15px;
  }


  .townscape .column{
    display: block;
    padding: 30px 0;
  }
  .townscape .column > div{
    width: 100%;
  }
  .townscape .column > div h5{}
  .townscape .column > div h5 + p{
    margin-top: 15px;
  }
  .townscape .column > figure{
    width: 100%;
    margin-top: 20px;
  }
}


/*
planting 
*/
.planting{}
.planting ul{
  display: flex;
  justify-content: space-between;
}
.planting ul li{
  width: calc((210 / 650) * 100%);
}
.planting ul li figcaption{
  line-height: 1.0;
}

/* for sp*/
@media screen and (max-width: 767px) {
  .planting{}
  .planting ul{}
  .planting ul li{
    width: calc((100% - 10px) / 3);
  }
  .planting ul li figcaption{}
}