@charset "UTF-8";
/* ----関数設定---- */
/* ----------------------------------------------------------------------
空き家バンク・借りる　詳細共通
---------------------------------------------------------------------- */
#house {
  background-color: #FFF;
  box-shadow: 0px 8px 11px rgba(155, 95, 0, 0.22);
  margin-top: 35px;
  padding-bottom: 65px;
  border-radius: clamp(28px, calc(1.1267605634vw + 24px), 40px);
  padding-top: clamp(30px, calc(3.2863849765vw + 18px), 65px);
  padding-left: clamp(15px, calc(3.2863849765vw + 3px), 50px);
  padding-right: clamp(15px, calc(3.2863849765vw + 3px), 50px);
}
@supports not (border-radius: clamp(28px, calc(1.1267605634vw + 24px), 40px)) {
  #house {
    border-radius: max(28px, min(calc(1.1267605634vw + 24px), 40px));
  }
}
@supports not (padding-top: clamp(30px, calc(3.2863849765vw + 18px), 65px)) {
  #house {
    padding-top: max(30px, min(calc(3.2863849765vw + 18px), 65px));
  }
}
@supports not (padding-left: clamp(15px, calc(3.2863849765vw + 3px), 50px)) {
  #house {
    padding-left: max(15px, min(calc(3.2863849765vw + 3px), 50px));
  }
}
@supports not (padding-right: clamp(15px, calc(3.2863849765vw + 3px), 50px)) {
  #house {
    padding-right: max(15px, min(calc(3.2863849765vw + 3px), 50px));
  }
}
#house h1 {
  font-size: clamp(18px, calc(1.7840375587vw + 11px), 37px);
  font-weight: bold;
}
@supports not (font-size: clamp(18px, calc(1.7840375587vw + 11px), 37px)) {
  #house h1 {
    font-size: max(18px, min(calc(1.7840375587vw + 11px), 37px));
  }
}
#house h2 {
  text-align: center;
  color: #6A3906;
  font-size: 27px;
  font-family: "Potta One", serif;
  font-weight: 400;
  font-style: normal;
}
#house h3 {
  color: #009944;
  font-size: clamp(15px, calc(0.5633802817vw + 13px), 21px);
  font-weight: bold;
  margin-top: 50px;
}
@supports not (font-size: clamp(15px, calc(0.5633802817vw + 13px), 21px)) {
  #house h3 {
    font-size: max(15px, min(calc(0.5633802817vw + 13px), 21px));
  }
}
#house .catchphrase {
  background-color: #E4E9CF;
  padding: 22px;
  font-weight: bold;
}
#house table {
  width: 100%;
}
#house table th, #house table td {
  border: solid 1px #231815;
  line-height: 1.4;
  padding: 12px 9px;
  vertical-align: middle;
  font-size: clamp(12px, calc(0.2816901408vw + 11px), 15px);
}
@supports not (font-size: clamp(12px, calc(0.2816901408vw + 11px), 15px)) {
  #house table th, #house table td {
    font-size: max(12px, min(calc(0.2816901408vw + 11px), 15px));
  }
}
#house table th {
  width: clamp(116px, calc(4.7765793529vw + 98px), 147px);
}
@supports not (width: clamp(116px, calc(4.7765793529vw + 98px), 147px)) {
  #house table th {
    width: max(116px, min(calc(4.7765793529vw + 98px), 147px));
  }
}
#house ul li {
  font-size: clamp(13px, calc(0.1877934272vw + 12px), 15px);
  position: relative;
  padding-left: 15px;
}
@supports not (font-size: clamp(13px, calc(0.1877934272vw + 12px), 15px)) {
  #house ul li {
    font-size: max(13px, min(calc(0.1877934272vw + 12px), 15px));
  }
}
#house ul li::before {
  display: inline-block;
  vertical-align: middle;
  content: "";
  width: 8px;
  height: 8px;
  background: #231815;
  border-radius: 50%;
  position: absolute;
  margin-right: 4px;
  left: 0px;
  top: 6px;
}
#house .box {
  border: solid 1px #231815;
  font-size: clamp(12px, calc(0.2816901408vw + 11px), 15px);
  padding-top: clamp(20px, calc(1.6901408451vw + 14px), 38px);
  padding-bottom: clamp(20px, calc(2.2535211268vw + 12px), 44px);
  padding-left: clamp(20px, calc(2.2535211268vw + 12px), 44px);
  padding-right: clamp(20px, calc(2.2535211268vw + 12px), 44px);
}
@supports not (font-size: clamp(12px, calc(0.2816901408vw + 11px), 15px)) {
  #house .box {
    font-size: max(12px, min(calc(0.2816901408vw + 11px), 15px));
  }
}
@supports not (padding-top: clamp(20px, calc(1.6901408451vw + 14px), 38px)) {
  #house .box {
    padding-top: max(20px, min(calc(1.6901408451vw + 14px), 38px));
  }
}
@supports not (padding-bottom: clamp(20px, calc(2.2535211268vw + 12px), 44px)) {
  #house .box {
    padding-bottom: max(20px, min(calc(2.2535211268vw + 12px), 44px));
  }
}
@supports not (padding-left: clamp(20px, calc(2.2535211268vw + 12px), 44px)) {
  #house .box {
    padding-left: max(20px, min(calc(2.2535211268vw + 12px), 44px));
  }
}
@supports not (padding-right: clamp(20px, calc(2.2535211268vw + 12px), 44px)) {
  #house .box {
    padding-right: max(20px, min(calc(2.2535211268vw + 12px), 44px));
  }
}
#house .ggmap {
  aspect-ratio: 648/793;
}

@media screen and (min-width: 768px) {
  #house h2 {
    margin-bottom: 14px;
  }
  #house .catchphrase {
    padding: 9px 30px;
  }
  #house table th, #house table td {
    padding: 17px;
  }
  #house .ggmap {
    aspect-ratio: 816/478;
  }
}
/* ----------------------------------------------------------------------
空き家バンク・部屋を借りる詳細
---------------------------------------------------------------------- */
#house #post_content {
  max-width: 800px;
  margin-inline: auto;
}
#house.vacant h1 {
  border-bottom: solid 1px #231815;
  margin-bottom: clamp(22px, calc(5.4460093897vw + 2px), 80px);
  padding-bottom: 7px;
}
@supports not (margin-bottom: clamp(22px, calc(5.4460093897vw + 2px), 80px)) {
  #house.vacant h1 {
    margin-bottom: max(22px, min(calc(5.4460093897vw + 2px), 80px));
  }
}
#house.vacant h2 {
  margin-top: clamp(48px, calc(6.0093896714vw + 25px), 112px);
}
@supports not (margin-top: clamp(48px, calc(6.0093896714vw + 25px), 112px)) {
  #house.vacant h2 {
    margin-top: max(48px, min(calc(6.0093896714vw + 25px), 112px));
  }
}
#house.vacant .photos {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
#house.vacant .vr {
  margin-top: clamp(42px, calc(1.1267605634vw + 38px), 54px);
  margin-bottom: clamp(32px, calc(6.7605633803vw + 7px), 104px);
}
@supports not (margin-top: clamp(42px, calc(1.1267605634vw + 38px), 54px)) {
  #house.vacant .vr {
    margin-top: max(42px, min(calc(1.1267605634vw + 38px), 54px));
  }
}
@supports not (margin-bottom: clamp(32px, calc(6.7605633803vw + 7px), 104px)) {
  #house.vacant .vr {
    margin-bottom: max(32px, min(calc(6.7605633803vw + 7px), 104px));
  }
}
#house.vacant .summary {
  background-color: #E4E9CF;
  padding-top: clamp(10px, calc(0.5633802817vw + 8px), 16px);
  padding-bottom: clamp(10px, calc(0.5633802817vw + 8px), 16px);
  padding-left: clamp(15px, calc(2.6291079812vw + 5px), 43px);
  padding-right: clamp(15px, calc(2.6291079812vw + 5px), 43px);
  font-size: clamp(15px, calc(0.2816901408vw + 14px), 18px);
}
@supports not (padding-top: clamp(10px, calc(0.5633802817vw + 8px), 16px)) {
  #house.vacant .summary {
    padding-top: max(10px, min(calc(0.5633802817vw + 8px), 16px));
  }
}
@supports not (padding-bottom: clamp(10px, calc(0.5633802817vw + 8px), 16px)) {
  #house.vacant .summary {
    padding-bottom: max(10px, min(calc(0.5633802817vw + 8px), 16px));
  }
}
@supports not (padding-left: clamp(15px, calc(2.6291079812vw + 5px), 43px)) {
  #house.vacant .summary {
    padding-left: max(15px, min(calc(2.6291079812vw + 5px), 43px));
  }
}
@supports not (padding-right: clamp(15px, calc(2.6291079812vw + 5px), 43px)) {
  #house.vacant .summary {
    padding-right: max(15px, min(calc(2.6291079812vw + 5px), 43px));
  }
}
@supports not (font-size: clamp(15px, calc(0.2816901408vw + 14px), 18px)) {
  #house.vacant .summary {
    font-size: max(15px, min(calc(0.2816901408vw + 14px), 18px));
  }
}
#house.vacant .summary dl {
  display: flex;
  flex-wrap: wrap;
}
#house.vacant .summary dl dt {
  font-weight: bold;
  text-align: justify;
  text-align-last: justify;
  width: 64px;
}
#house.vacant .summary dl dd {
  width: calc(100% - 64px);
}
#house.vacant .summary dl dd::before {
  content: "：";
}
#house.vacant .summary .status {
  background: #FF9933;
  display: inline-block;
  color: #FFF;
  font-size: 15px;
  font-weight: bold;
  width: 126px;
    text-align: center;
  margin-top: 8px;
}
#house.vacant .summary .status.sale{
	background-color: #FF9933;
	letter-spacing: 1em;    text-indent: 1em;
}
#house.vacant .summary .status.rental{
	background-color: #E1A19F;
	letter-spacing: 1em;    text-indent: 1em;
}
#house.vacant .summary .status.negotiation {
  background-color: #42B2CA;
  border-radius: 99999px;
}
#house.vacant .other {
  margin-top: clamp(12px, calc(1.1267605634vw + 8px), 24px);
}
@supports not (margin-top: clamp(12px, calc(1.1267605634vw + 8px), 24px)) {
  #house.vacant .other {
    margin-top: max(12px, min(calc(1.1267605634vw + 8px), 24px));
  }
}
#house.vacant .other h4 {
  color: #FFF;
  background-color: #009944;
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
  width: clamp(100px, calc(4.4131455399vw + 83px), 147px);
  height: clamp(23px, calc(0.3755868545vw + 22px), 27px);
}
@supports not (width: clamp(100px, calc(4.4131455399vw + 83px), 147px)) {
  #house.vacant .other h4 {
    width: max(100px, min(calc(4.4131455399vw + 83px), 147px));
  }
}
@supports not (height: clamp(23px, calc(0.3755868545vw + 22px), 27px)) {
  #house.vacant .other h4 {
    height: max(23px, min(calc(0.3755868545vw + 22px), 27px));
  }
}
#house.rent .rent-title {
  border-bottom: solid 1px #231815;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 18px;
  margin-bottom: clamp(25px, calc(5.1643192488vw + 6px), 80px);
}
@supports not (margin-bottom: clamp(25px, calc(5.1643192488vw + 6px), 80px)) {
  #house.rent .rent-title {
    margin-bottom: max(25px, min(calc(5.1643192488vw + 6px), 80px));
  }
}
#house.rent .rent-title .status {
  display: flex;
  gap: clamp(20px, calc(1.5023474178vw + 14px), 36px);
}
@supports not (gap: clamp(20px, calc(1.5023474178vw + 14px), 36px)) {
  #house.rent .rent-title .status {
    gap: max(20px, min(calc(1.5023474178vw + 14px), 36px));
  }
}
#house.rent .rent-title .status span {
  background-color: #E1A19F;
  color: #FFF;
  border-radius: 99999px;
  font-weight: bold;
  line-height: 1;
  display: grid;
  justify-content: center;
  align-items: center;
  width: clamp(112px, calc(14.7582697201vw + 57px), 170px);
  height: clamp(27px, calc(1.220657277vw + 22px), 40px);
  font-size: clamp(13px, calc(0.6572769953vw + 11px), 20px);
}
@supports not (width: clamp(112px, calc(14.7582697201vw + 57px), 170px)) {
  #house.rent .rent-title .status span {
    width: max(112px, min(calc(14.7582697201vw + 57px), 170px));
  }
}
@supports not (height: clamp(27px, calc(1.220657277vw + 22px), 40px)) {
  #house.rent .rent-title .status span {
    height: max(27px, min(calc(1.220657277vw + 22px), 40px));
  }
}
@supports not (font-size: clamp(13px, calc(0.6572769953vw + 11px), 20px)) {
  #house.rent .rent-title .status span {
    font-size: max(13px, min(calc(0.6572769953vw + 11px), 20px));
  }
}
#house.rent .rent-title .status span.vacancy {
  background-color: #42B2CA;
}
#house.rent .rent-title .status span.no-vacancy {
  background-color: #E1A19F;
}
#house.rent .top_photo figure {
  aspect-ratio: 800/440;
}
#house.rent .top_photo figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#house.rent .rent-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}
#house.rent .rent-header h2 {
  margin-top: clamp(41px, calc(1.6901408451vw + 35px), 59px);
}
@supports not (margin-top: clamp(41px, calc(1.6901408451vw + 35px), 59px)) {
  #house.rent .rent-header h2 {
    margin-top: max(41px, min(calc(1.6901408451vw + 35px), 59px));
  }
}
#house.rent .rent-header h3 {
  background-color: #9999CC;
  color: #FFF;
  border-radius: 99999px;
  font-weight: bold;
  line-height: 1;
  display: grid;
  justify-content: center;
  align-items: center;
  width: clamp(99px, calc(12.9770992366vw + 50px), 150px);
  height: clamp(30px, calc(1.5023474178vw + 24px), 46px);
  font-size: clamp(15px, calc(0.7511737089vw + 12px), 23px);
}
@supports not (width: clamp(99px, calc(12.9770992366vw + 50px), 150px)) {
  #house.rent .rent-header h3 {
    width: max(99px, min(calc(12.9770992366vw + 50px), 150px));
  }
}
@supports not (height: clamp(30px, calc(1.5023474178vw + 24px), 46px)) {
  #house.rent .rent-header h3 {
    height: max(30px, min(calc(1.5023474178vw + 24px), 46px));
  }
}
@supports not (font-size: clamp(15px, calc(0.7511737089vw + 12px), 23px)) {
  #house.rent .rent-header h3 {
    font-size: max(15px, min(calc(0.7511737089vw + 12px), 23px));
  }
}
#house.rent .rent-header .catchphrase {
  width: 100%;
}

@media screen and (min-width: 768px) {
  #house.vacant .photos figure {
    width: calc((100% - 30px) / 2);
  }
  #house.vacant .summary {
    display: flex;
    align-items: flex-end;
	  justify-content: space-between;
  }
  #house.vacant .summary dl {
    line-height: 1.5;width: 80%;
  }
  #house.vacant .summary dl dt {
    width: 77px;
  }
  #house.vacant .summary dl dd {
    width: calc(100% - 77px);
  }
  #house.vacant .flex {
    display: flex;
    justify-content: space-between;
  }
  #house.vacant .flex > div {
    width: 48%;
  }
  #house.vacant .other {
    display: flex;
    gap: 24px;
  }
  #house.rent .rent-title {
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
  }
  #house.rent .top_photo figure {
    aspect-ratio: 800/440;
  }
  #house.rent .top_photo figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #house.rent .rent-header h2 {
    width: 100%;
    text-align: center;
  }
  #house.rent .rent-header h3 {
    order: 3;
    margin-top: 0;
  }
  #house.rent .rent-header .catchphrase {
    width: calc(100% - 170px);
    order: 2;
  }
}
@media screen and (min-width: 1280px) {
  #house {
    width: 75%;
    margin-left: 5%;
  }
}
@media screen and (min-width: 1700px) {
  #house {
    margin-left: 7%;
  }
}
@media screen and (min-width: 1800px) {
  #house {
    margin-left: 10%;
  }
}
@media screen and (min-width: 1900px) {
  #house {
    margin-left: auto;
  }
}/*# sourceMappingURL=house.css.map */

@media screen and (max-width: 767px) {
	#house.rent .rent-title h1{width:100%;}
}