@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=Noto+Sans+JP:wght@200..900&family=Noto+Serif+JP:wght@200..900&display=swap");
/* CSS Document */

/* PC・SP共通 */
:root {
	--gold-grad: linear-gradient(to right top, #a17a00 5%, #e9c87f 20%, #f2df91 25%, #e9c87f 30%, #a17a00 45%, #a17a00 60%, #e9c87f 70%, #f2df91 75%, #e9c87f 80%, #a17a00 100%);
	--green-grad1: linear-gradient(to bottom left, #d2e7de, #add7c5);
	--green-grad2: linear-gradient(to bottom left, #5d8875, #185b3e);
	--green-text: #003820;
	--gold-grad2: linear-gradient(to top right, #e5d4a9 5%, #e1dc9c 30%, #f3f3c6 50%, #efe1aa 70%, #ead598 95%);
	--grad: linear-gradient(to bottom left, #d2e7de, #add7c5);
	--text: #003820;
}
.construction {
	--grad: linear-gradient(to bottom left, #5d8875, #185b3e);
	--text: #fff;
}
/*-------------------------
.contentsTitle
-------------------------*/

.contentsTitle {
	display: none;
}

#wrap01 {
	font-family: "Noto Serif JP", serif;
}
.pagetitle {
	margin-bottom: 60px;
}
.pagetitle-en {
	font-size: 150px;
	font-family: "Cormorant Garamond", serif;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	/* 1. グラデーションの設定（左から右へ） */
	background-image: var(--gold-grad);

	/* 2. 背景を文字の形に切り抜く */
	-webkit-background-clip: text;
	background-clip: text;

	/* 3. 元の文字色を透明にして背景を見せる */
	-webkit-text-fill-color: transparent;
	color: transparent; /* フォールバック用 */
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
.pagetitle-ja {
	font-size: 32px;
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--green-text);
	margin-left: 50px;
	padding-left: 74px;
	position: relative;
}
.pagetitle-ja::before {
	content: "";
	width: 50px;
	height: 2px;
	background: var(--gold-grad);
	position: absolute;
	top: 50%;
	left: 0;
}
/*　PC用　*/
@media screen and (min-width: 751px) {
	body {
		position: relative;
	}
	sup {
		line-height: 2;
		font-size: 10px;
	}

	#topBox {
		z-index: 100;
	}
	#wrap01 {
		margin: 50px 0 60px;
	}
	.inner {
		max-width: 1240px;
		margin: 0 auto;
		padding: 0 24px;
	}

	#sort {
		position: relative;
		margin-top: 40px;
	}

	#sort ul {
		display: flex;
		gap: 20px;
		position: relative;
		padding: 0;
	}
	#sort ul:before {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		content: " ";
		display: block;
		opacity: 0.5;
		z-index: -1;
	}
	#sort li {
		margin-left: 3px;
		font-size: 11px;
		position: relative;
	}
	#sort li::after {
		content: "";
		position: absolute;
		top: 9px;
		right: 8px;
		width: 5px;
		height: 5px;
		border-right: 1px solid #121212;
		border-bottom: 1px solid #121212;
		transform: rotate(45deg);
	}
	#sort select {
		width: 130px;
		padding: 5px 4px;
		appearance: none;
		border-radius: 0px;
		font-family: "Noto Serif JP", serif;
	}
	#sort select option {
		/* line-height: 1.5; */
	}
	#sort li.sort04::after {
		display: none;
	}
	.sort04 {
		display: inline-block;
		height: 28px;
		position: relative;
	}
	.sort04:before {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		content: " ";
		display: block;
		z-index: 1;
		border-radius: 3px;
	}
	.sort04 {
		overflow: hidden;
		display: flex;
		border-radius: 3px;
	}
	.sort04 a {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 28px;
		overflow: hidden;
		position: relative;
		z-index: 2;
	}
	.sort04.new .newBtn,
	.sort04.old .oldBtn,
	.sort04.contract .contractBtn {
		background-color: var(--green-grad2);
	}
	.sort04 .newBtn {
		text-decoration: none;

		background-position: left 0;
		background-color: #bbbbbb;
		color: #fff;
	}
	.sort04 .oldBtn {
		text-decoration: none;
		background-position: left 0;
		background-color: #bbbbbb;
		color: #fff;
	}
	.sort04 .contractBtn {
		text-decoration: none;
		background-position: left 0;
		background-color: #bbbbbb;
		color: #fff;
	}
	.sort04 a:hover {
		opacity: 0.7;
	}

	.propertyList {
		display: grid;
		width: 1240px;
		margin: 20px auto 50px;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
		grid-auto-rows: 1fr;
	}
	.propertyItem {
		position: relative;
		transition: opacity 0.3s;
	}
	.construction .propertyItem {
		background: var(--grad);
	}
	.propertyItem:hover {
		opacity: 0.7;
	}
	.construction .propertyItem::before {
		content: "";
		width: 52px;
		height: 47px;
		background-image: url("../img/construction-icon.svg");
		background-size: contain;
		position: absolute;
		bottom: 24px;
		right: 20px;
		z-index: 3;
	}
	.propertyLink {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 3;
	}

	.propertyImage {
		width: calc(100% - 40px);
		aspect-ratio: 4 / 5;
		object-fit: cover;
	}

	.propertyContent {
		position: relative;
		padding: 20px 20px 20px 20px;
		margin: -30px 0 0 auto;
		width: calc(100% - 80px);
		border-top: 2px solid;
		border-image: var(--gold-grad) 1;
		color: var(--text);
		position: relative;
		z-index: 1;
	}

	.construction .propertyContent {
		margin: 0;
		width: unset;
	}

	.propertyContent:before {
		content: "";
		width: 100%;
		height: 100%;
		background: var(--grad);
		opacity: 0.9;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.construction .propertyContent:before {
		display: none;
	}

	.propertyTag {
		font-size: 12px;
	}
	.propertyTag span {
		border-radius: 3px;
		background: var(--gold-grad2);
		color: #8b6126;
		font-weight: 700;
		padding: 2px 11px;
		line-height: 100%;
		margin-right: 8px;
	}

	.propertyTitle {
		margin-top: 8px;
		font-size: 18px;
		line-height: 1.5;
		font-weight: bold;
	}
	.construction .propertyItem::before {
		content: "";
		width: 60px;
		height: 54px;
		background-image: url("../img/construction-icon.svg");
		background-size: contain;
		position: absolute;
		bottom: 28px;
		right: 20px;
		z-index: 3;
	}

	.propertyDataList {
		margin-top: 4px;
		line-height: 1.5;
		margin-bottom: auto;
		font-family: "Noto Sans JP", sans-serif;
		font-size: 12px;
		line-height: calc(21 / 12);

		span {
			padding-inline: 8px;
		}
	}
	.dataLink {
		text-align: right;
		text-decoration: none;
		margin-top: 20px;
		padding-right: 10px;
		font-size: 12px;
		position: absolute;
		bottom: 8px;
		right: 8px;
		font-weight: 700;
		color: var(--text);
		z-index: 2;
	}

	.dataLink::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		background-repeat: no-repeat;
		border-style: solid;
		border-width: 5px 0 5px 5px;
		border-color: transparent transparent transparent currentColor;
		transform: translateY(-50%);
	}
	#sort {
		display: flex;
		align-items: center;
	}

	.sorts {
		margin-left: auto;
		background: #f7f7f7;
	}

	.sort04 {
		overflow: hidden;
		display: flex;
		border-radius: 3px;
		margin-left: auto;
	}
	.sort04 a {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 28px;
		width: 60px;
		font-size: 11px;
		overflow: hidden;
		position: relative;
		z-index: 2;
	}
	.sort04 a:hover {
		opacity: 0.8;
	}
	.sort04 .allBtn {
		text-decoration: none;
		background-position: left 0;
		background-color: #bbbbbb;
		color: #fff;
	}
	.sort04 .newBtn {
		text-decoration: none;
		background-position: left 0;
		background-color: #bbbbbb;
		color: #fff;
	}
	.sort04 .oldBtn {
		text-decoration: none;
		background-position: left 0;
		background-color: #bbbbbb;
		color: #fff;
	}
	.sort04 .contractBtn {
		text-decoration: none;
		background-position: left 0;
		background-color: #bbbbbb;
		color: #fff;
	}
	.sort04.default .allBtn,
	.sort04.new .newBtn,
	.sort04.old .oldBtn,
	.sort04.contract .contractBtn {
		background: var(--green-grad2);
	}
	/* noresult */
	.noresult {
		margin: 40px 0 0;
		font-size: 14px;
	}

	/* ページング ここから */
	.pageNav {
		width: 500px;
		margin: 0 auto 60px;
	}
	.pageNav a:hover {
		opacity: 0.7;
		text-decoration: none;
	}
	.pageNavNext {
	}
	.pageNavPagination {
		margin-top: 20px;
	}
	.pageNext {
		border-radius: 2px;
		color: #fff;
		background: var(--green-grad2);
	}
	.pageNextBtn {
		width: 100%;
		height: 70px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		color: #fff;
		font-size: 17px;
		position: relative;
		text-decoration: none;
	}
	.pageNextBtn:before {
		position: absolute;
		width: 10px;
		height: 10px;
		right: 40px;
		top: 40%;
		content: "";
		transform: rotate(45deg);
		vertical-align: middle;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
	}
	.pageNextBtn:hover {
		color: #fff;
		opacity: 0.8;
	}
	.pagination {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.paginationLink {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 56px;
		height: 45px;
		font-size: 13px;
		line-height: 1.2;
		color: #333333;
		border: 1px solid #d6d6d6;
		border-radius: 2px;
		background: #fcfcfc;
	}
	.paginationLinkPrev {
		text-decoration: none;
	}
	.paginationLinkNext {
		text-decoration: none;
	}
	.paginationLinkNumber {
		margin: 0 8px;
		width: 160px;
	}
	.paginationLinkNolink {
		background-color: transparent;
		pointer-events: none;
		opacity: 0.5;
	}
	.paginationNumber {
		position: relative;
	}
	.paginationNumberLabel {
		position: relative;
		width: 100%;
		height: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		background-color: #fff;
	}
	.paginationNumberLabel::after {
		position: absolute;
		width: 8px;
		height: 8px;
		right: 15px;
		top: 0px;
		bottom: 0px;
		margin: auto;
		content: "";
		transform: rotate(135deg);
		transition: 0.5s;
		vertical-align: middle;
		border-top: 2px solid #c8c4be;
		border-right: 2px solid #c8c4be;
	}
	.paginationNumberSelect {
		position: absolute;
		top: 0;
		left: 0;
		-moz-appearance: button;
		-webkit-appearance: button;
		appearance: button;
		opacity: 0;
		width: 100%;
		height: 100%;
	}
	/* ページング ここまで */
}

/*　SP用　*/
@media screen and (max-width: 750px) {
	.inner {
		max-width: 100%;
		margin: 0 auto;
		padding: 0 20px;
	}
	.pagetitle-en {
		font-size: 72px;
	}
	.pagetitle-ja {
		font-size: 20px;
		margin-left: 20px;
		padding-left: 30px;
	}
	.pagetitle-ja::before {
		width: 30px;
	}
	.pagetitle {
		margin-bottom: 60px;
	}
	/* sort　絞り込み部分 */
	#wrap01 {
		padding: 30px 0 0;
	}
	#sort h2 {
		margin: 0 15px 20px;
		color: #000;
		font-size: 26px;
		font-weight: bold;
		list-style: 1.6;
	}
	#sort ul {
		margin: 0 15px 20px;
	}
	#sort li {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}
	#sort li::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 8px;
		width: 5px;
		height: 5px;
		border-right: 1px solid #121212;
		border-bottom: 1px solid #121212;
		transform: translateY(-50%) rotate(45deg);
	}
	#sort li + li {
		margin-top: 10px;
	}
	#sort li label {
		display: inline-block;
		width: 60px;
		font-size: 15px;
	}
	#sort select {
		box-sizing: border-box;
		width: calc(100% - 70px);
		height: 40px;
		background: #fff;
		border: 1px solid #d6d0bc;
		border-radius: 0;
		padding: 4px;
		color: #000;
		font-size: 15px;
		appearance: none;
		font-family: "Noto Serif JP", serif;
	}
	#sort li.sort04 {
		margin-top: 20px;
		border-radius: 3px;
		background: #bbb;
	}
	#sort li.sort04::after {
		display: none;
	}
	.sort04 a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 25%;
		height: 40px;
		color: #fff;
		font-size: 15px;
		text-decoration: none;
		text-align: center;
	}
	.sort04 .allBtn,
	.sort04.new .newBtn,
	.sort04.old .oldBtn,
	.sort04.contract .contractBtn {
		background: var(--green-grad2);
		border-radius: 3px;
	}
	.sort04.new .allBtn,
	.sort04.old .allBtn,
	.sort04.contract .allBtn {
		background: none;
	}
	/* propertyList 物件一覧部分 */

	.propertyList {
		display: grid;
		width: 100%;
		padding: 0 20px;
		margin: 40px auto 50px;
		grid-template-columns: 1fr;
		gap: 40px;
		box-sizing: border-box;
		max-width: 500px;
	}
	.construction.propertyList {
		gap: 30px;
	}
	.propertyItem {
		position: relative;
		transition: opacity 0.3s;
	}
	.propertyItem:hover {
		opacity: 0.7;
	}
	.propertyLink {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 3;
	}

	.propertyImage {
		width: 100%;
		aspect-ratio: 4 / 5;
		object-fit: cover;
		width: calc(100% - 40px);
		max-width: 295px;
	}

	.propertyContent {
		position: relative;
		margin: -30px 0 0 auto;
		padding: 20px 20px 20px 20px;
		width: calc(100% - 80px);
		max-width: 245px;
		background: var(--grad);
		opacity: 0.9;
		border-top: 2px solid;
		border-image: var(--gold-grad) 1;
		color: var(--text);
	}
	.construction .propertyContent {
		margin: 0;
		width: unset;
		max-width: 100%;
	}
	.propertyTag {
		font-size: 12px;
	}
	.propertyTag span {
		border-radius: 3px;
		background: var(--gold-grad2);
		color: #8b6126;
		font-weight: 700;
		padding: 2px 11px;
		line-height: 100%;
		margin-right: 8px;
	}

	.propertyTitle {
		margin-top: 8px;
		font-size: 18px;
		line-height: 1.5;
		font-weight: bold;
		position: relative;
	}
	.construction .propertyItem::before {
		content: "";
		width: 52px;
		height: 47px;
		background-image: url("../img/construction-icon.svg");
		background-size: contain;
		position: absolute;
		bottom: 24px;
		right: 20px;
		z-index: 3;
	}

	.propertyDataList {
		margin-top: 4px;
		line-height: 1.5;
		margin-bottom: auto;
	}

	.dataLink {
		text-align: right;
		text-decoration: none;
		margin-top: 20px;
		padding-right: 10px;
		font-size: 12px;
		position: absolute;
		bottom: 8px;
		right: 8px;
		color: var(--text);
		font-weight: 700;
	}
	.dataLink::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		background-repeat: no-repeat;
		border-style: solid;
		border-width: 5px 0 5px 5px;
		border-color: transparent transparent transparent currentColor;
		transform: translateY(-50%);
	}
	/* pagenavi */
	.pagenavi {
		margin: 30px 15px 40px;
	}
	/* noresult */
	.noresult {
		margin: 40px 0;
		font-size: 14px;
	}

	.pageNav {
		box-sizing: border-box;
		margin: 0 20px 30px;
	}
	.pageNav a:hover {
		opacity: 0.7;
		text-decoration: none;
	}
	.pageNavNext {
	}
	.pageNavPagination {
		margin-top: 20px;
	}
	.pageNext {
		background: var(--green-grad2);
		border-radius: 2px;
	}
	.pageNextBtn {
		text-decoration: none;
		width: 100%;
		height: 70px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		color: #fff;
		font-size: 17px;
		position: relative;
		border-radius: 2px;
	}
	.pageNextBtn:before {
		position: absolute;
		width: 8px;
		height: 8px;
		right: 40px;
		top: 28px;
		content: "";
		transform: rotate(45deg);
		vertical-align: middle;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
	}
	.pagination {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.paginationLink {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 56px;
		height: 45px;
		font-size: 13px;
		line-height: 1.2;
		color: #333333;
		border: 1px solid #d6d6d6;
		text-decoration: none;
		border-radius: 2px;
	}
	.paginationLinkPrev {
		background-color: #fff;
		text-decoration: none;
	}
	.paginationLinkNext {
		background-color: #fff;
		text-decoration: none;
	}
	.paginationLinkNumber {
		margin: 0 8px;
		width: 160px;
	}
	.paginationLinkNolink {
		background-color: transparent;
		pointer-events: none;
		opacity: 0.5;
	}
	.paginationNumber {
		position: relative;
	}
	.paginationNumberLabel {
		position: relative;
		width: 100%;
		height: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		background-color: #fff;
	}
	.paginationNumberLabel::after {
		position: absolute;
		width: 8px;
		height: 8px;
		right: 15px;
		top: 0px;
		bottom: 0px;
		margin: auto;
		content: "";
		transform: rotate(135deg);
		transition: 0.5s;
		vertical-align: middle;
		border-top: 2px solid #c8c4be;
		border-right: 2px solid #c8c4be;
	}
	.paginationNumberSelect {
		position: absolute;
		top: 0;
		left: 0;
		-moz-appearance: button;
		-webkit-appearance: button;
		appearance: button;
		opacity: 0;
		width: 100%;
		height: 100%;
	}
	/* ページング ここまで */

	/* 幅の狭いスマホ用 */
	@media screen and (max-width: 360px) {
		.prevLink,
		.nextLink {
			width: 93px;
		}
		.firstLink,
		.lastLink {
			width: 40px;
		}
		.mailToiMae {
			font-size: 16px;
		}
		.mailToiMae:before {
			content: "";
			background: url(https://base.formatline.com/common/img/ico_last_mail.png) no-repeat 0 0;
			background-size: 30px;
			position: absolute;
			top: 28px;
			left: 15px;
		}
		.mailToiMae:after {
			position: absolute;
			content: "";
			margin-top: -5px;
			right: 20px;
			width: 7px;
			height: 7px;
		}
		.mailToiMae span:before {
			top: -4px;
			left: -43px;
		}
	}
}