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


/*//////////// セクション1 ///////////////*/
.sec1 .thumb2 {
	position: relative;
  height: 180px;
}

.sec1 .thumb2 img {
	width: 100% !important;
	height: auto;
}
.sec1 strong {
	position: absolute;
	left: 0;
	bottom: 0;
	border-radius: 0 12px 12px 0;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
	background-color: #707070;
	display: inline-block;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 500;
}

.sec1 h3 {
	font-size: 1.2rem;
	line-height: 1.4em;
	display: block;
/*	height: 50px;*/
}

.sec1 p {
	font-size: 0.85rem;
	margin-bottom: 0;
}

.sec1 .price {
	font-size: 0.8rem;
	font-weight: 700;
	color: #707070;
}

.sec1 .price span {
	font-size: 1.3em;
	color: #FF0000;
}

.sec1 hr {
	border: 0;
	margin: 0;
	padding: 0;
	display: block;
	border-bottom: 1PX dashed #E0E0E0;
	opacity: 1;
}

.sec1 .contents .col-6 {
	margin-bottom: 30px;
}

.sec1 .contents .col-6:nth-last-of-type(-n+2) {
	margin-bottom: 0;
}

.pagination .page-link {
	width: 30px;
	height: 40px;
	display: inline-block;
	border: 1px solid #f2f2f2;
	background-color: #f2f2f2;
	text-align: center;
	padding: 0.5rem;
	padding-top: 0.3rem;
	color: #000;
}

.pagination .selected {
	background-color: #fff;
}


@media (min-width: 576px) {
	.sec1 .price {
		font-size: 1rem;
	}
}

@media (min-width: 768px) {
	.sec1 .contents .estate-list .col-6 {
		margin-bottom: 40px;
	}

/*	.sec1 .contents .estate-list .col-6:nth-last-of-type(-n+3) {*/
	.sec1 .contents .estate-list .col-6:nth-of-type(3n+1):nth-last-of-type(-n+3),
	.sec1 .contents .estate-list .col-6:nth-of-type(3n+1):nth-last-of-type(-n+3) ~ .col-6 {
		margin-bottom: 0;
	}
}

@media (min-width: 992px) {
	.sec1 .price {
		font-size: .9rem;
	}
}


/*///タブ切り替え　ここから///*/
.tab {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.tab li {
	display: block;
	width: 30%;
	margin: 0 1.5%;
}

.tab li a {
	display: block;
	background-color: #707070;
	border-radius: 16px;
	color: #fff !important;
	font-size: 0.87rem;
	font-weight: 600;
	width: 100%;
	padding: 0.2rem 0;
	margin-bottom: 20px;
}

.tab li a:hover {
	opacity: 0.6;
	transition-duration: 0.3s;
}

.area {
	display: none;
	opacity: 0;
	background: #fff;
}

.area.is-active {
    display: block;
    animation-name: displayAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

ul{
	list-style:none;
}

.wrapper{
	width: 100%;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

.contents {
	width: 100%;
	background-color: #fff;
}

/* 2024.06.19 検索条件欄追加 */
#search_form {
	background-color: #f5f5f5;
	padding: 1rem;
}

.search-caption {
	display: flex;
	align-items: center;
}
.search-caption::before,
.search-caption::after {
	content: "";
	flex-grow: 1;
	border-top: 1px solid #000;
}

.search-btn,
.search-btn:hover,
.submit-btn,
.submit-btn:hover {
	color: #707070;
	background-color: #fff;
	border: 1.5px solid #707070;
	padding: 0.75rem 0;
	margin: 1.5rem 0 0;
	font-size: 1.0rem;
	width: 100%;
}

.submit-btn,
.submit-btn:hover {
	color: #1899d7;
	background-color: #fff;
	border: 1.5px solid #1899d7;
}

:checked + .search-btn {
	position: relative;
	color: #fff;
	background-color: #707070;
}
:checked + .search-btn::before {
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	position: absolute;
	top: 50%;
	left: 0.75rem;
	transform: translateY(-50%);
}

@media (min-width: 576px) {
	.tab li a {
		font-size: 1rem;
		padding: 0.5rem 0;
		margin-bottom: 25px;
	}
}

@media (min-width: 768px) {
	.tab li {
		display: block;
		width: 14%;
		margin: 0 1%;
	}

	.tab li a {
		font-size: 0.9rem;
		margin-bottom: 0;
		padding: 0.2rem 0;
		border-radius: 20px;
	}

/*
	.contents .col-md-4 {
		padding-left: 2%;
		padding-right: 2%;
	}
*/

	.sec1 h3 {
		font-size: 1.15rem;
/*		height: 50px;*/
	}

	#search_form {
		padding: 50px 100px;
	}

	.search-btn,
	.search-btn:hover,
	.submit-btn,
	.submit-btn:hover {
		font-size: 1.2rem;
	}

	:checked + .search-btn::before {
		left: 1.5rem;
	}
}

@media (min-width: 992px) {
	.tab li a {
		font-size: 1rem;
	}

/*
	.contents .col-md-4 {
		padding-left: 2.5%;
		padding-right: 2.5%;
	}
*/

	.sec1 h3 {
/*		height: 30px;*/
	}
}