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

/*----------------------------------------------------------------------------
   common
------------------------------------------------------------------------------*/

/* table */
@media screen and (max-width: 1030px) {
	/* horizontal scroll table mode - example 1030px */
	.table-content.nowrap {
		width:100%;
		overflow-y:hidden;
		overflow-x:scroll;
		margin-bottom:30px;
	}
	/* horizontal scroll table width */
	.table-content.nowrap table {
		width:1200px;
	}
}

.table-content table {
	width:100%;
	border-collapse:collapse;
	text-align:left;
	border:1px solid #d8d8d8;
}

.table-content th {
	text-align:left;
	background-color:#f4f4f4;
	/*width:28%;*/
	padding:13px;
	border-bottom:1px solid #d8d8d8;
	border-right:1px solid #d8d8d8;
	vertical-align:top;
	white-space:nowrap;
	box-sizing: border-box;
}

.table-content th .ic-required {
	float:right;
	margin-left:150px;
}

.table-content td {
	padding:10px;
	border-bottom:1px solid #d8d8d8;
	border-right:1px solid #d8d8d8;
	background-color:#ffffff;
	box-sizing: border-box;
}

/* button */
.button a {
	display:inline-block;
	vertical-align:middle;
  padding: 22px 0;
  border-radius: 6px;
	color:#FFF;
  font-weight: normal;
	text-decoration:none;
	transition:0.3s;
}

/* gmap */
#gmap {
	position:relative;
}
#gmap iframe {
	width:100%;
	height:500px;
}

/*----------------------------------------------------------------------------
   estlist
------------------------------------------------------------------------------*/

.estlist {
  /* width: calc(100% - 100px); */
  margin: 0 auto;
  padding: 0 2.5vw;
}

/* グリッド */
.estlist_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: clamp(12px, calc(20 / 1200 * 100vw), 35px);
}

.estlist_item {
  position: relative;
  background: #fff;
}

.estlist_item a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* カテゴリー */
.estlist_category {
  padding: 5px 30px;
  position: absolute;
  top: -16px;
  left: 23px;
  border-radius: 5px;
  font-size: 15px;
  color: #fff;

}

.tochi_primary_bg {
  background: var(--color-primary);
}

.tate_primary_bg {
  background: var(--color-secondary);
}

/* サムネイル部分 */
.estlist_img {
  aspect-ratio: 3/2;
  overflow: hidden;
}

.estlist_img img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  transition: all .3s;
}

.estlist_item:hover .estlist_img img {
  transform: scale(1.1);
}


/* 物件情報の部分 */
.estlist_txt {
  padding: 40px 25px;
  position: relative;
}

.estlist_txt hr {
  background-color: #a5a5a5;
  height: 1px;
  border: none;
  margin: 10px 0;
}

/* 物件名 */

.estlist_txt h3 {
  font-size: clamp(17px, 1.8vw, 19px);
  font-weight: 500;
}

/* 価格 */

.estlist_price {
  color: var(--color-quaternary);
  font-family: var(--ff_en);
  font-size: 30px;
  font-weight: 700;
}

.estlist_price span {
  font-size: 20px;
}

/* 住所、面積など詳細テーブル */

.estlist_txt td {
  font-size: 15px;
  color: #7d7d7d;
  font-weight: 400;
  margin: 3px 0;
  margin-right: 10px;
}

.icon_td {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 83px;
  white-space: nowrap;
  margin-right: 10px;
}

.estlist_txt td img {
  width: 15px;
  aspect-ratio: 1/1;
}

/* moreボタン */
.estlist_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(50px, 10vw, 100px);
}

/* 一件もないとき */
.sorry {
  font-size: clamp(22px, 3vw, 30px);
  margin-top: clamp(22px, 3vw, 30px);
  text-align: center;
}

@media screen and (max-width: 1560px) {
  .estlist_grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 1050px) {
  .estlist_grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 750px) {
  .estlist_grid {
    grid-template-columns: 1fr;
  }

  .estlist_btn {
    gap: clamp(20px, 4vw, 100px);
  }
}

@media screen and (max-width: 620px) {
  .estlist_btn {
    flex-direction: column;
    gap: clamp(20px, 4vw, 100px);
  }

  .estlist_txt {
    padding: 25px 20px;
  }
}


/*----------------------------------------------------------------------------
   estdetail
------------------------------------------------------------------------------*/
.estdetail {
  margin: 0 auto;
  padding: 0 2.5vw;
}

/* introduce */
.estdetail .introduce { 	
}

.estdetail .introduce .shubetsu_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.estdetail .introduce .shubetsu {
  display: inline-block;
  padding: 5px 30px;
  border-radius: 5px;
  font-size: clamp(12px, 1.8vw, 15px);
  color: #fff;
}

.estdetail .introduce .updata {
	background-color:rgba(var(--color-tertiary-light-rgb), 0.3);
	display:inline-block;
  padding: 5px 30px;
  border-radius: 5px;
  font-size: clamp(12px, 1.8vw, 15px);
}

.estdetail .introduce h1 {
  font-size: clamp(20px, 3vw, 26px);
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.25em;
  margin: 0.5em 0;
}

.estdetail .introduce .box {
	margin-bottom: 20px;
}

.estdetail .introduce .price,
.estdetail .introduce .hirosa {
  display: inline-block;
  font-size: clamp(24px, 3vw, 30px);
	font-weight:700;
  letter-spacing: 0;
	padding-right: 1em;
  color: var(--color-quaternary);
}
.estdetail .introduce .price .ic,
.estdetail .introduce .hirosa .ic {
  display: inline-block;
  padding: 8px;
  background-color: var(--color-quaternary);
  margin-right: 0.5em;
  border-radius: 5px;
	color: #fff;
  font-size: clamp(16px, 3vw, 20px);
  line-height: 1;
  text-align: center;
}
.estdetail .introduce .price .fsize-s {
  font-size: clamp(14px, 3vw, 18px);
}
.estdetail .introduce .price .tubotanka {
  font-size: clamp(14px, 3vw, 18px);
	font-weight: 300;
}

.estdetail .introduce .place {
  font-size: clamp(16px, 3vw, 20px);
  display: inline-block;
	margin-top: 0.5em;
}

/* photoarea */
.estdetail {
	width:100%;
  max-width: 1920px;
  margin: 0 auto;
	box-sizing:border-box;
}
.estdetail .main-photo {
	width:100%;
	display: flex;
	justify-content:space-between;
  margin-top: 30px;
	margin-bottom: 20px;
}
.estdetail .main-photo .main-photo-cont {
	width: 48%;
	display: grid;
	place-items: center;
}
.estdetail .main-photo .main-photo-cont a {
  aspect-ratio: 3/2;
  width: 100%;
  object-fit: cover;
  border-radius: 15px;
  overflow: hidden;
}
.estdetail .main-photo .main-photo-cont img {
  width: 100%;
  height: auto;
}

.estdetail .alart {
	background-color:rgba(var(--color-tertiary-light-rgb), 0.3);
	padding: clamp(11px, 1.8vw, 15px);
  border-radius: 6px;
  font-size: clamp(11px, 1.8vw, 15px);
	margin-bottom:20px;
}

.estdetail .sub-photo {
	position:relative;
	background-color:#f2f2f2;
	box-sizing: border-box;
}

.estdetail .gallery-button.button a {
	display: none;
	border:none;
	background-color:#36B2AC;
	text-align:center;
	padding-left:1.5em;
	padding-right:1.5em;
	margin-bottom: 20px;
	color:#ffffff;
}
.estdetail .gallery-button.button a:hover {
	background-color:#2BA7DF;
}

.estdetail .sub-photo-gallery {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.estdetail .sub-photo-gallery::after {
  display: inherit;
}

.estdetail .sub-photo-gallery li {
  width: 32%;
  margin-right: 2%;
  margin-bottom: 24px;
  text-align: center;
}
.estdetail .sub-photo-gallery li:nth-child(3n) {
  margin-right: 0;
}
.estdetail .sub-photo-gallery li a {
  display: inline-block;
}

.estdetail .sub-photo-gallery li a img {
  width: 100%;
  height: auto;
	max-height: 200px;
  aspect-ratio: 3/2;
	object-fit: cover;
  overflow: hidden;
  border-radius: 15px;
}

.estdetail .sub-photo .more-btn {
  background: #fff;
  border: 2px solid #1f2c5c;
  border-radius: 100px;
  padding: 15px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  max-width: 330px;
  position: relative;
  margin: 0 auto;
  transition: all .3s;
  color:#1f2c5c;
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: normal;
}
.estdetail .sub-photo .more-btn:hover {
  background: #1f2c5c;
  color: #fff;
}

.estdetail .sub-photo .more-photo {
  display: none;
}

/* favbuttons */
.estdetail .detail-button {
	width:100%;
	display: flex;
	justify-content:space-between;
  gap: 24px;
	margin: 30px 0;
}

.estdetail .detail-button .btn {
  display: block;
	width: calc(50% - 12px);
	box-sizing: border-box;
	text-align: center;
  padding: 0.65rem;
}
.estdetail .detail-button .print-button a:hover,
.estdetail .detail-button .contact-button a:hover {
  opacity: 0.8;
}

/* detail-desc */
.estdetail .detail-desc h3 {
  display: inline-block;
	padding: 10px 30px;
  margin-left: 20px;
	margin-top: 40px;
  background: var(--color-secondary);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-sizing: border-box;
  color: #fff;
	font-size: 20px;
	line-height: 1;
}
.estdetail .detail-desc table {
	width: 100%;
	margin-bottom:40px;
	border-collapse:collapse;
  font-size: clamp(14px, 1.8vw, 16px);
	text-align:left;
	border:1px solid rgba(var(--color-tertiary-light-rgb), 0.6);
}
.estdetail .detail-desc table th {
	white-space:normal;
	width:150px;
	text-align:left;
	background-color: rgba(var(--color-tertiary-light-rgb), 0.3);
	padding:13px;
	border-bottom:1px solid rgba(var(--color-tertiary-light-rgb), 0.6);
	border-right:1px solid rgba(var(--color-tertiary-light-rgb), 0.6);
	vertical-align:top;
	box-sizing: border-box;
}
.estdetail .detail-desc table td {
	white-space:normal;
	width:450px;
	padding:13px;
	border-bottom:1px solid rgba(var(--color-tertiary-light-rgb), 0.6);
	border-right:1px solid rgba(var(--color-tertiary-light-rgb), 0.6);
	background-color:#ffffff;
	box-sizing: border-box;
}

@media screen and (max-width: 640px) {
  .estdetail .detail-desc table {
    display: block;
    border-right: none;
    border-bottom: none;
  }
  .estdetail .detail-desc table tbody {
    display: block;
  }
  .estdetail .detail-desc table tr {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
	.estdetail .detail-desc table th {
		display:block;
    width: 32%;
	}
	.estdetail .detail-desc table td {
		display:block;
    width: 68%;
	}
}

/* youtube */
.estdetail .youtube {
  position: relative;
  width: 100%;
  margin-bottom:20px;
  margin-left:auto;
  margin-right:auto;
}
.estdetail .youtube:before {
  content:"";
  display: block;
  padding-top: 56.25%;
}
.estdetail .youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
	border:none;
}

/* theta */
.estdetail .theta {
  width: 100%;
  margin-bottom:30px;
}

/* simulation */
.estdetail .simulation {
	width: 100%;
	margin-bottom: 60px;
	border: 1px solid #55B03B;
	box-sizing: border-box;
}
.estdetail .simulation h3 {
	margin: 0;
	padding: 0.25em 30px;
	background-color: #55B03B;
	color: #fff !important;
	box-sizing: border-box;
}
.estdetail .simulation .contents {
	padding: 20px;
}
.estdetail .simulation table {
	width: 100%;
	margin-bottom: 30px;
}
.estdetail .simulation table th {
	white-space:normal;
	width:150px;
	text-align: center;
	background-color: #D4F3CC;
	border: 1px solid #55B03B;
}
.estdetail .simulation table th span {
	display: inline-block;
}
.estdetail .simulation table td {
	white-space:normal;
	border: 1px solid #55B03B;
}
.estdetail .simulation table .answer th {
	font-size: 125%;
	background-color: #7ACF62;
}
.estdetail .simulation table .answer td {
	font-size: 150%;
	font-weight: bold;
}
@media screen and (max-width:800px) {	
	.estdetail .simulation table {
		border: none;
	}
	.estdetail .simulation table th {
		width: 40%;
		border-collapse: collapse;
	}
	.estdetail .simulation table td {
		width: 60%;
		border-collapse: collapse;
	}
}
.estdetail .simulation table td input[type="number"] {
	width: 5em;
}
.estdetail .simulation button {
	width: 350px;
	display: block;
	box-sizing:border-box; 
	background-color:#ffffff;
	vertical-align:middle;
	margin: 0 auto 20px;
	padding: 1em 0;
	color:#f94c24;
	text-decoration:none;
	font-weight:bold;
	border:2px solid #f94c24;
	transition:0.3s;
}
.estdetail .simulation button:hover {
	background-color:#f94c24;
	color:#ffffff;
}
.estdetail .simulation .cartion {
	font-size: 87.5%;
	color: #b40101;
}

/* list-back */
.estdetail .list-back-button {
	text-align:center;
}
.estdetail .list-back-button .button a,
.estdetail .list-back-button .button button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  cursor: pointer;
  color: var(--color-tertiary);
  line-height: 1.6;
  border: 1px solid var(--color-tertiary);
  border-radius: 2em;
  transition: var(--hover-trans);
  padding: 0.65em;
  background-color: #fff;
}
.estdetail .list-back-button .button a:hover,
.estdetail .list-back-button .button button:hover {
  background-color: var(--color-tertiary);
  color: #FFF;
}

@media print {
  /* common */
  header,
  footer {
    display: none;
  }
  
  .l-main {
    padding: 0;
  }
  
  /* estdetail */
  .estdetail .introduce .shubetsu,
  .estdetail .sub-photo-gallery,
  .estdetail .detail-button,
  .estdetail .detail-desc .youtube,
  .estdetail .detail-desc .theta,
  .estdetail .detail-desc .list-back-button {
    display: none;
  }
  
  .estdetail .alart {
    padding: 0;
    background-color: none;
    font-size: var(--fs-s);
    color: var(--color-quaternary);
  }
  .estdetail .detail-desc .table-content {
    margin-bottom: 30px;
  }
  .estdetail .detail-desc table {
    border-right: none;
    border-bottom: none;
  }
  .estdetail .detail-desc table tr {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .estdetail .detail-desc table th {
		display:block;
    width: 32%;
    padding: 6px;
  }
  .estdetail .detail-desc table td {
		display:block;
    width: 68%;
    padding: 6px;
  }
}


/*----------------------------------------------------------------------------
   estpager
------------------------------------------------------------------------------*/

.pager {
	text-align:center;
	margin: 20px auto;
}
.pager span {
	position:relative;
	display:inline-block;
	color:#121212;
	width:2em;
	text-align:center;
	font-weight:bold;
	background:#ededed;
	border:solid 1px #cccccc !important;
	margin-bottom:4px;
	padding:4px 1px 3px 1px;
}
.pager span:hover {
	color:#36B2AC !important;
	background:#ededed !important;
	border:solid 1px #36B2AC !important;
}
.pager span.stay {
	color:#ffffff !important;
	background:#36B2AC !important;
	border:solid 1px #36B2AC !important;
}


/*----------------------------------------------------------------------------
   subpage
------------------------------------------------------------------------------*/
.subpage .contents {
	padding: 0 0 60px;
}

/*----------------------------------------------------------------------------
   estinquiry
------------------------------------------------------------------------------*/
#estinquiry .contents table {
	margin-top: 1em;
}