@charset "utf-8";

/* ----------------------------------
garden
---------------------------------- */

.f-180 {
    font-size: 180%;
}

.f-270 {
    font-size: 270%;
}

.purple {
    color: #373472;
}

.blue {
    color: #205496;
}


#content_Wrap {
    position: relative;
    color: #FFF;
    background: #ffffff00;
}

#content_Wrap figure {
    position: relative;
    height: fit-content;
}

/*共通*/

[class$="-box"] {
    margin-top: 100px;
}

.sec_lead {
  text-align: center;
  font-size: 20px;
  line-height: 1.8em;
  letter-spacing: 0.03em;
  color:#c0ae72;
}

.text_area {
    text-align: center;
}

/*個別*/

figure {
    position: relative;
}

a {
    transition: all .5s;
}

a:hover {
    opacity: .7;
}

.main {
  background-image: url(../img/main.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 16% 0;
  position: relative;
  z-index: 1;
}

.main .title {
  max-width: 500px;
  width:90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.main .title h2 {
}
.main .title p {
  font-size: 24px;
  letter-spacing: 6px;
  color: #00653d;
}

.sec01 {
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 0;
  background: linear-gradient(to right, #003d0b, #005d24, #003d0b);
}
.sec01 div + figure {
  margin-top: 50px;
}



.sec02 {
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 0;
  background: linear-gradient(to right, #003d0b, #005d24, #003d0b);
}

.floorplan {
  /* position: relative; */
}
.floorplan .fig {
  max-width: 1400px;
  width:100%;
  margin: 0 auto;
}
.floorplan p {
  font-size: 40px;
  line-height: 1.8em;
  letter-spacing: 0.05em;
  color:#c0ae72;
  text-align: center;
}
.floorplan p span {
  font-size: 70%;
  margin-left: 0.5em;
}


.madori_Area {
  display: flex;
  justify-content: space-between;

  border:2px solid #c0ae72;
  padding: 2% 3%;
}
.madori_Area .fig {
  max-width: 420px;
  width:90%;
  margin-right:5%;
}
.madori_Area .fig p {
  font-size: 13px;
}
.madori_Area .txt_List {
  width:60%;
}

.txt_List {
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.txt_List li {
  width: 48.5%;
}
.txt_List li h3 {
  text-align: center;
  font-size: 18px;
  line-height: 1.8em;
  letter-spacing: 0.05em;
}
.txt_List li p {
  font-size: 16px;
  line-height: 1.8em;
  letter-spacing: 0.05em;
}


.btn_plan_Wrap {
    position: relative;
    padding-bottom: 30px;
    margin-top: 50px;
    text-align: center;
}
.btn_plan {
    display: inline-block;
    padding: 20px 4em;
    background-color: #770b11;
    color: #FFF;
    font-size: 20px;
    letter-spacing: 0.1em;
    cursor: pointer;

    outline: 1px solid #FFF;
    outline-offset: -6px;

    /* 中央の飛び出た線のために必要 */
    position: relative;
    z-index: 5;
}
.btn_plan::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    width: 1px;
    height: 20px;
    background-color: #FFF;
    z-index: 1;
}


.notes {
    color: #000;
}

/*=============================
タブレット表示
=============================*/

@media (max-width: 1024px) and (min-width: 641px) {


    /* .cap_Txt {
        left: auto;
        right: 5px;
    } */

}

/*=============================
spから
=============================*/
@media screen and (max-width: 767px) {
  #content_Wrap>.secbg {
      top: 70px;
  }

  .sec_lead {
      font-size: 16px;
      margin-top: 30px;
  }

  /*個別*/

  .main {
      background-image: url(../img/main_sp.jpg);
      background-position: left center;
      padding: 24% 0;
  }

  .main .title {
    max-width: 100%;
    width:60%;;
  }
  .main .title h2 {
  }
  .main .title p {
    font-size: 16px;
  }

  .sec01 {
    padding: 30px 0;
  }
  .sec01 div + figure {
    margin-top: 30px;
  }

  .sec02 {
    max-width: 100%;
    padding: 30px 0;
  }

  .floorplan p {
    font-size: 30px;
  }

  .madori_Area {
    width:90%;
    margin:0 auto;
    padding: 5% 3%;
    flex-wrap: wrap;
  }
  .madori_Area .fig {
    max-width: 100%;
    width:90%;
    margin:0 auto 30px;
  }
  .madori_Area .fig p {
    font-size: 13px;
  }
  .madori_Area .txt_List {
    width:100%;
  }

  .txt_List {
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .txt_List li {
    width: 100%;
  }
  .txt_List li + li {
    margin-top: 30px;
  }
  .txt_List li h3 {
    font-size: 16px;
  }
  .txt_List li p {
    font-size: 13px;
  }

  .btn_plan_Wrap {
    padding-bottom: 30px;
    margin-top: 30px;
  }
  .btn_plan {
    padding: 20px 6em;
    font-size: 18px;

    /* outline: 1px solid #FFF;
    outline-offset: -6px; */
  }







}