@charset "utf-8";
/* CSS Document */





#container .contents_wrapper.col-2 #main.property_main {
  width: 92%;
  margin: 0 auto;
  #post_single {padding: 10rem 0;}

  .post_single__property .slider-container .slick-img, .post_single__property .slider-container .thumbnail-img {
    margin: inherit;
  }
  .thumbnail.js-slider.slick-slider {
    .slick-slide.thumbnail-img {margin: 0 5px;}
  }

  .article-body {
    border: 1px solid #a1955e;
  }
  .article-body .inner {
    margin: auto;
    padding: 20px;
  }

  .field_item_wrapper {
    /* margin-top: 25px; */
    margin-top: 12px;
    &.is_margin {margin-top: 25px;}

    &.is_flex {
      /* display: flex;
      justify-content: space-between;
      align-items: flex-start; */
      width: 100%;
      li {
        width: 100%;

        border-bottom: 1px solid #c9caca;
        &:first-child {border-top: 1px solid #c9caca;}
        /* &:not(:first-child) {border-top: 1px solid #c9caca;} */
      }
    }

    &.is_wide {
      width: 100%;

      li {
        border-bottom: 1px solid #c9caca;
        &:first-child {border-top: 1px solid #c9caca;}
      }
    }

    li {
      dl {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        min-height: 50px;
      }
      dt {
        width: 160px;
        min-width: 160px;
        background-color: #a1955e;
        color: #fff;
        font-size: 1.5rem;
        line-height: 1.15;

        height: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 1em;
      }
      dd {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 1em;
        background-color: #fff;
        color: #231815;
        padding: 0.5em 1em;

        &.multiple_line {
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
        }

        &.flex-wrap {
          flex-wrap: wrap;
          padding: 0.5em 1em;
        }
        &.gcg_1em {grid-column-gap: 1em;}
        &.grg_05em {grid-row-gap: .25em;}

        &.slashed {
          padding: 0.5em 1em;
          p:not(:first-child){
            padding-left: .5em;
            position: relative;

            &:before {
              content: "/ ";
            }
          }
        }
      }
    }
  }
  /* field_item_wrapper */

  .detail-remarks-box {
    width: 100%;
    background-color: #a1955e;
    font-size: 1.5em;
    min-height: 50px;
    margin-top: 25px;

    padding: 0.4em 1em;
    margin-bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    .detail-remarks-text {text-align: center;}
  }
} /* #container .contents_wrapper.col-2 #main.property_main */

.field-items  {
  margin-bottom: 12px;
}
.btn.f-belleza {
  margin-left: auto;
  margin-right: auto;
}

.property-item__price {margin-top: 1em!important;color: #a1955e;}


@media (min-width: 1080px) {

  #container .contents_wrapper.col-2 #main.property_main {
    max-width: 900px;
    margin: 0 0 0 auto;
    width: calc(865% / 12.00);

    #post_single {padding: 10rem 0;}

    .post_single__property .slider-container .slick-img, .post_single__property .slider-container .thumbnail-img {
      margin: inherit;
    }
    .thumbnail.js-slider.slick-slider {
      .slick-slide.thumbnail-img {margin: 0 5px;}
    }

    .article-body {
      border: 1px solid #a1955e;
    }
    .article-body .inner {
      width: calc(765% / 8.65);
      margin: auto;
      padding: clamp(20px, 4vh, 50px) 0;
    }

    .field_item_wrapper {
      margin-top: 20px;
      &.is_margin {margin-top: 50px;}

      &.is_flex {
        display: flex;
        justify-content: space-between;
        align-items: stretch;

        grid-column-gap: 20px;
        grid-row-gap: 0;

        width: 100%;
        flex-wrap: wrap;
        li {
          width: 48%;
          &:nth-of-type(2) {border-top: 1px solid #c9caca;}
        }
      }

      &.is_wide {
        width: 100%;

        li {
          border-bottom: 1px solid #c9caca;
          &:first-child {border-top: 1px solid #c9caca;}
        }
      }

      &.stretch {
        align-items: stretch;
        dl {height: 100%;}
        /* dd {align-items: flex-start;} */
      }

      li {
        dl {
          min-height: 54px;
          height: 100%;
          dt {
            width: 160px;
            min-width: 160px;
            font-size: 1.5rem;
            line-height: 1.15;
          }
          dd {
            width: 100%;
            padding: 0.5em 1em;

            &.multiple_line {
              flex-direction: column;
              align-items: flex-start;
              justify-content: flex-start;
            }

            &.flex-wrap {
              flex-wrap: wrap;
            }
            &.gcg_1em {grid-column-gap: 1em;}
            &.grg_05em {grid-row-gap: .25em;}

            &.slashed {
              p:not(:first-child){
                padding-left: .5em;
                position: relative;

                &:before {
                  content: "/ ";
                }
              }
            }
          }
        }
      }
    }
    /* field_item_wrapper */
  } /* #container .contents_wrapper.col-2 #main.property_main */

  .detail-remarks-box {
    margin-top: 50px!important;
    font-size: 1.6rem;
    .detail-remarks-text {}
  }





  .field-items {
    margin-bottom: 25px;
  }

}


/* ローンシミュレーション */
.loan_simulation_header {
  width: 100%;
  margin-top: 25px;
  font-size: 1.8rem;
  height: 30px;
  display: flex;
  align-items: center;
  padding-left: .5em;
  position: relative;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;

    width: 2px;
    height: 100%;
    background-color: #a1955e;
  }
}


.note {font-size: 1.2rem;margin-top: .5em!important;width: 100%;}
.loan_simulation_container {

  margin-top: 12px;
  width: 100%;
  display: flex;
  flex-direction: column;

  .loan_example {
    background-color: #a1955e;

    &.is_header {
      background-color: #fff;
      color: #c30d23;
      font-size: 1.8rem;
      width: 100%;
      height: 36px;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    &.is_example {
      width:100%;
      height: 36px;
      padding: 0 1em;

      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  }

  .loan_simulation_wrapper {
    background-color: #a1955e;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    /* flex-direction: column; */
    gap: .5em;
  }

  .label_text {font-size: 1.4rem;}
  input {
    appearance: none;
    height: 27px;
    font-size: 1.6rem;
    margin-top: 0.25em;
    padding: .5em;
    width: 100%;
    text-align: right;
    border-radius: 0;

    font-family: "Noto Serif JP", serif;

    &:focus {
      outline: none;
    }
  }

  .result_wrapper {
    display: flex;
    align-items: center;

  }


  .btn_result {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 1em;
  }

  .btn_loan {
    appearance: none;
    background-color: #1d8ecf;
    color: #fff;
    font-size: 1.5rem;
    height: 36px;
    padding: 0 1em;

    position: relative;
    font-family: "Noto Serif JP", serif;

    box-shadow: 2px 2px 0 rgba(0,0,0,.75);
  }

  .loan_simulation.columns {
    width: 25%;
    padding: 0;

    &.long {
      /* width: 15%; */
      /* width: 100%; */
      width: 41%;
      padding-left: 1em;
      padding-right: 0;
      input {width: 87%;}
    }
    &.after_long {
      /* margin-left: auto; */
      /* width: 20%; */
      width: 100%;
      input {width: 70%;}
    }
  }
  .column_inner {
    display: flex;
    align-items: center;
    gap: .5em;
  }
  .loan_simulation.result {}
}

@media (max-width: 1279px) {
  .result_wrapper {
    width: 100%;
  }
  .loan_simulation.columns.after_long {
    width: 50%;
    margin-left: auto;
    padding-bottom: 1em;
  }

  .result_wrapper {margin-top: 1em;grid-column-gap: 1em;}
  .loan_example.is_example {
    font-size: 18px;
    padding-left: 14px!important;
    padding-top: 0.6em!important;
    padding-bottom: 0.3em!important;
    height: auto!important;
  }
  .loan_simulation.columns.long {
    .loan_amount {min-width: 2.5em;}
  }
  .loan_simulation_container .btn_result {width: fit-content;}
  .btn_loan {width: 70px;}
}

@media (min-width: 1280px) {
  .loan_simulation_header {
    margin-top: 50px;
  }



  .loan_simulation_container {
    margin-top: 18px;
    flex-direction: row;
    min-height: 70px;

    .loan_example {

      &.is_header {
        height: 100%;
        font-size: 1.8rem;
        min-width: 144px;
        max-width: 144px;
      }

      &.is_example {
        width: 112px;
        min-width: 112px;
        font-size: 1.4rem;
        height: auto;
        padding: 0;

        justify-content: center;

        span {
          width: 100%;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          &:after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;

            width: 1px;
            height: 100%;
            background-color: #fff;
          }
        }
      }
    }

    .loan_simulation_wrapper {
      width: 100%;
      flex-wrap: nowrap;
      flex-direction: row;
      gap: 0;
      justify-content: space-between;
    }

    .label_text {font-size: 1.4rem;}
    input {
      height: 27px;
      font-size: 1.8rem;
    }

    .result_wrapper {
      gap: 1em;
    }

    .btn_result {
      width: fit-content;
      padding: 0;
    }

    .btn_loan {
      height: 40px;
      font-size: 1.4rem;
    }
    .loan_simulation.columns {
      /* width: 12%; */
      font-size: 1.4rem;
      width: 90px;
      padding: 0;


      &.long {
        padding-left: 1em;
        min-width: calc(125px + 1em);
        width: calc(125px + 1em);
        /* input {width: 90px;} */

        .loan_amount {min-width: 2.5em;}
      }

      &.after_long {
        /* margin-left: auto; */
        /* width: 20%; */
        padding-right: .75em;
        width: calc(155px + .75em);
        input {width: 108px;}
      }
    }

    .loan_simulation.result {
      margin-left: auto;
    }
  }
}