@charset "utf-8";
/* CSS Document */
/* ============== 余白 ============== */
.footer-wrap {
  width: 90%;
  max-width: 1140px;
  margin: 0 auto;
}
.top,.container,.detail-wrap,.contact-wrap {
  width: 90%;
  margin: 0 auto;
  max-width: 1320px;
}
.description,.equipment,.detail-wrap {
  margin-top: 60px;
}
/* ============== テキスト左寄せ ============== */
.top-left,dl,.description,.text-small,.bukkendata p {
  text-align: left;
}
/* ============== フォントサイズ ============== */
.description .copy,.equipment h3,.detail-wrap h3 {
  font-size: 2.0rem;
  line-height: 36px;
  margin-bottom: 40px;
}
/* ============== マンション名と価格 ============== */
.top {
  margin: 110px auto 40px;
  display: flex;
  flex-flow: column nowrap;
}
.top-left::before {
  content: "";
  display: block;
  width: 8px;
  height: 60px;
  background-color: #5489BD;
  margin-right: 20px;
  clear: both;
  float: left;
}
.top-left p,.bukkendata p {
  font-size: 1.4rem;
}
.top-left h2 {
  font-size: 2.0rem;
  margin-top: 8px;
}
.top-right {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-top: 20px;
}
.top-right img {
  width: 5vw;
  max-width: 20px;
}
.top-right p {
  font-size: 2.2rem;
  margin-left: 12px; 
}
.top-right p span {
  font-size: 1.4rem;
  margin-left: 8px; 
}
/* ============== 画像のスライダー ここから ============== */
.slider-main {
  margin-bottom: 6px;
  height: 63vw;
}
.slick-img img {
  height: 63vw;
  object-fit: contain;
}
.thumbnail-list {
  height: 20vw;	
}
.thumbnail-img img {
  height: 20vw;
  object-fit: contain;
}
/* ============== 物件詳細 ここから ============== */
.bukkendata {
  margin-top: 40px;
}
.row>dt {
  width: calc(6em - 5px);
  margin-right: 5px;
  padding: 10px 0;
  border-top:solid 0.3px #999;
  clear: both;
  float: left;
  display: block;
  color: #777;
}
.row>dd {
  width: calc(100% - 6em);
  padding: 10px 0;
  border-top:solid 0.3px #999;
  margin-left: auto;
}
.googlemap {
  position: relative;
  margin-top: 30px;
  height: 66vw;
  max-height: 250px;
  overflow: hidden;
}
.googlemap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* ============== 物件コメント ここから ============== */
.description span {
  display: inline-block;
  padding: 2px 8px;
  background-color: #5489BD;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.description-list li::before {
  content: "★";
  margin-right: 5px;
}
.description-list li {
  margin-bottom: 10px;
}
/* ============== 設備・特徴 ここから ============== */
.equipment h3 {
  text-align: center;
}
.equipment-list {
  display: flex;
  flex-flow: row wrap;
  gap: 5px; 
}
.equipment-list li {
  flex-basis: 48%;
  background-color: #f7f7f7;
  font-size: 1.4rem;
  color: #555;
}
.equipment-list .off {
  color: rgba(85,85,85,0.30);
}
.text-small {
  margin-top: 20px;
}
/* ============== お問い合わせ ============== */
.contact-wrap {
  margin: 80px auto 80px;
}
.contact-wrap h3 {
  font-size: 2.0rem;
  line-height: 36px;
  text-align: left;
  margin-bottom: 20px;
}
table.formTable {
  margin-bottom: 20px;
  width: 100%;
}
table.formTable th, table.formTable td {
  display:block;
  text-align: left;
}
table.formTable th {
  margin-top: 20px;
  border-bottom: 0;
}
table.formTable th .red {
  margin-left: 14px;
  background-color: #940000;
  color: #fff;
  width: 44px;
  font-weight: normal;
  font-size: 1.4rem;
  text-align: center;
  display: inline-block;
  padding-bottom: 2px;
}
table.formTable td ,table.formTable .checkbox-area>td {
  margin-top: 7px;
}

form input[type="text"], form textarea {
  width:100%;
  padding:5px;
  font-size:110%;
  display:block;
}
form input[type="submit"], form input[type="reset"], form input[type="button"] {
  display:block;
  width:100%;
  max-width: 370px;
  margin: 0 auto;
  height:60px;
  transition: 0.3s;
  background-color: #373737;
  color: #fff;
}
.privacy-policy>small {
  font-size: 1.4rem;
  text-align: left;
  margin:  0 0 60px 5px;
  display: inline-block;
  text-indent: -1rem;
  line-height: 20px;
}
.privacy-policy>small a {
  text-decoration: underline;
  color: blue;
}
/* ============== TAB(600px)レスポンシブ ============== */
@media only screen and (min-width:600px) {
  .top {
    margin: 180px auto 30px;
    flex-direction: row;
  }
  .top-left {
    flex-basis: 62%;
  }
  .top-right {
    flex-basis: 40%;
    margin-top: auto;
  }
  /* ============== お問い合わせ ============== */
  table.formTable tr {
    display: table;
    margin-top: 20px;
  }
  table.formTable th {
    display: table-cell;
    width:200px;
    vertical-align: top;
  }
  table.formTable td {
    width: 55vw;
    margin-left: 5vw;
  }
 } 
@media only screen and (min-width:767px) {
  /* ============== 内容（グリッド） ここから ============== */
  .container,.detail-container {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    column-gap: 20px;
  }
  .container .left {
    grid-column: 1 / 7; 
  }
  .container .right {
    grid-column: 7 / 11; 
  }
  /* ============== 画像のスライダー ここから ============== */
  .slider-main {
    margin-bottom: 6px;
    height: 37vw;
    max-height: 420px;
  }
  .slick-img img {
    height: 37vw;
    max-height: 420px;
  }
  .thumbnail-list {
    height: 12vw;
    max-height: 130px;
  }
  .thumbnail-img img {
    height: 12vw;
    max-height: 130px;
  }
  /* ============== 物件詳細 ここから ============== */
  .bukkendata {
    margin-top: 0;
  }
  .bukkendata .row>dt {
    width: calc(4em - 5px);
  }
  .bukkendata .row>dd {
    width: calc(100% - 4em);
  }
  .googlemap {
    margin-top: 6px;
  }
  /* ============== 設備・特徴 ここから ============== */
  .equipment h3 {
    text-align: left;
    margin-bottom: 10px;
  }
  /* ============== 物件概要 ここから ============== */
  .detail-container .left {
    grid-column: 1 / 6; 
  }
  .detail-container .right {
    grid-column: 6 / 11; 
  }
}
  /* ============== PC(1025px)レスポンシブ ============== */
@media only screen and (min-width:1023px) {
  /* ============== 余白 ============== */
  .description,.equipment,.detail-wrap,.contact-wrap {
    margin-top: 80px;
  }
  /* ============== マンション名と価格 ============== */
  .top {
    margin: 180px auto 60px;
  }
  .top-left p {
    font-size: 1.6rem;
  }
  .top-left h2 {
    font-size: 2.8rem;
  }
  .top-right img {
    max-width: 25px;
  }
  .top-right p {
    font-size: 3.6rem; 
  }
  .top-right p span {
    font-size: 1.6rem;
  }
  /* ============== 内容（グリッド） ここから ============== */
  .container .left {
    margin-right: 60px;
  }
  /* ============== 画像のスライダー ここから ============== */
  .slider-main {
    margin-bottom: 6px;
    height: 32vw;
    max-height: 480px;
  }
  .slick-img img {
    height: 32vw;
    max-height: 480px;
  }
  /*モーダルの横幅を変更したい場合*/
  .modaal-container{
    max-width: 90%;
  }

  /* ============== 物件詳細 ここから ============== */
  .bukkendata .row>dt:last-of-type,.bukkendata .row>dd:last-of-type {
    border-bottom: solid 0.3px #999;
  }
  .googlemap {
    margin-top: 60px;
    max-height: 300px;
  }
  /* ============== 物件概要 ここから ============== */
  .detail-container {
    column-gap: 60px;
  }
  /* ============== お問い合わせ ここから ============== */
  .contact-wrap {
    margin: 100px auto 150px;
  }
  .contact-wrap h3 {
    font-size: 2.8rem;
    margin-bottom: 40px;
  }
  .contact-wrap h3::before {
    content: "";
    display: block;
    width: 8px;
    height: 40px;
    background-color: #5489BD;
    margin-right: 20px;
    clear: both;
    float: left;
  }
  form input[type="submit"]:hover, form input[type="reset"]:hover {
    background-color: #777777;
  }
}