@charset "UTF-8";

/* --------------------------
design
-------------------------- */

figure{ position: relative;}

/* span.garamond {
  font-family: "EB Garamond", serif !important;
  font-style: normal;
  font-size: 1.1em;
  transform: rotate(0.28deg);
} */

.inner{
  width: 96%;
  max-width: 1200px;
  margin: 0 auto;
}

h2.sec_ttl{
  position: relative;
  width: 100%;
}
h2.sec_ttl span{
  display: block;
  position: relative;
  background: #fff;
  color: #9c8c3e;
  font-size: 30px;
  letter-spacing: 0.1em;
  padding: 0;
  z-index: 3;
}
h2.sec_ttl::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 2px;
  background: #9c8c3e;
  z-index: 2;
}
.design_Wrap h2.sec_ttl span{ max-width: 145px;}
.land_Wrap h2.sec_ttl span{ max-width: 231px;}

h3{
  font-size: 24px;
  line-height: 1.5;
}
.d_txt{
  font-size: 16px;
  line-height: 1.8;
}

.design_Wrap{
  margin: 100px auto 50px;
}
.design_Box{
  margin: 80px auto 0;
  justify-content: space-between;
}
.design_Box .txt_Box{
  width: 48%;
}
.design_Box .txt_Box h3{ margin: 0 0 40px;}
.design_Box .txt_Box .d_txt{ margin: 0 0 60px;}
.design_Box .txt_Box .d_img_pc figure:first-child{ margin-right: 10px;}

.design_Box > figure{
  width: 49%;
  max-width: 580px;
}

figure.main_02{ margin: 0 auto 80px;}
figure.main_01 .cap_txt,
figure.main_02 .cap_txt,
.land_txt > figure .cap_txt{ font-size: 16px;}

.land_Wrap h3{
  margin: 50px auto 0;
  text-align: center;
}
.land_Box{
  margin: 50px auto 80px;
  justify-content: space-between;
}
.land_Box > figure{
  width: 48%;
  max-width: 550px;
}
.land_txt{ width: 50%;}
.land_txt figure{
  max-width: 600px;
}
.land_txt .txt_list{
  margin: 30px 0 ;
}
.txt_list li{
  margin-bottom: 20px;
  font-size: 16px;
  align-items: center;
}
.txt_list li span{
  display: block;
  width: 20px;
  padding: 7px 5px;
  background: #805d00;
  font-size: 18px;
  color: #fff;
  margin-right: 10px;
  text-align: center;
}
.img_list{ justify-content: space-between;}
.img_list li{
  width: calc( 100% / 3 );
  max-width: 190px;
  margin-right: 10px;
}
.img_list li p.l_txt{
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}


@media only screen and (max-width: 1200px){


}
@media only screen and (min-width: 768px) and (max-width: 1199px){

  figure.main_02{ margin: 20px auto 80px;}
}

@media only screen and (max-width: 767px) {

  .content_Wrap .ttl_area h1{
    padding: 38px 0 0;
    max-width: 123px;
  }

  h2.sec_ttl span{ font-size: 24px;}
  .design_Wrap h2.sec_ttl span{ max-width: 30%;}
  .land_Wrap h2.sec_ttl span { max-width: 45%;}

  .design_Wrap{ margin: 50px auto 0;}

  .design_Box,.land_Box{ flex-wrap: wrap;}

  .design_Box .txt_Box,.design_Box > figure,
  .land_Box > figure,.land_txt{
    width: 100%;
    max-width: none;
  }

  h3{ font-size: 20px;}
  .d_txt{
    font-size: 14px;
    line-height: 1.8;
  }

  .design_Box{ margin: 40px auto 0;}
  .design_Box .txt_Box h3{
    margin: 0 0 20px;
    text-align: center;
  }
  .design_Box .txt_Box .d_txt{ margin: 0 0 30px;}
  .design_Box .d_img_sp{
    display: flex;
    margin: 20px 0 ;
  }
  .design_Box .d_img_sp figure:first-child { margin-right: 10px;}
  .design_Box > figure{ margin: 30px auto 0;}


  figure.main_02{ margin: 0 auto 40px;}
  .land_Wrap h3{ margin: 30px auto 0;}
  .land_Box{ margin: 50px auto 30px;}

  figure.main_02 .cap_txt,
  .land_txt > figure .cap_txt{ font-size: 14px;}
  .land_txt{ margin: 30px auto 0;}
  .land_txt .txt_list{ margin: 20px auto ;}
  .txt_list li {
    margin-bottom: 10px;
    font-size: 14px;
  }
  .txt_list li span{ font-size: 16px;}
  .img_list{ flex-direction: column;}
  .img_list li{
    display: flex;
    width: 100%;
    max-width: none;
    margin-bottom: 20px;
    align-items: center;
  }
  .img_list li figure{
    width: 48%;
    margin-right: 10px;
  }
  .img_list li p.l_txt{ text-align: left;}
}