@charset "UTF-8";


.gallery {
	max-width: 740px;
		width: 100%;
}

/* thumbs */

.thumbs {
	position: relative
}
.thumbs .thumb {
	position: relative;
	border: 1px solid #e3e3e3;
	overflow: hidden;
	background: #fff;
	cursor: pointer;
	 aspect-ratio: 37 / 23;
	margin: 0 6px;
}
.thumbs .thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
	pointer-events: none
}
.thumbs .thumb.is-active {
	box-shadow: 0 0 0 6px #46918d inset;
	border-color: #46918d
}
/* 外側マージンを相殺して左右の余白ゼロに、かつ覗き見なし */

.thumbs .slick-list {
	margin: 0 -5px;
	padding-right: 0 !important;
	overflow: hidden
}
/* カスタム矢印 */

.thumbs .thumbs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 9999px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.thumbs .thumbs-arrow:focus-visible {
	outline: 3px solid #4cc3ff
}
.thumbs .thumbs-arrow.prev {
	left: -8px
}
.thumbs .thumbs-arrow.next {
	right: -8px
}

.thumbs.has-peek .slick-list{
	padding-right:12.5% !important;
	overflow:hidden;
}

@media (max-width:768px){
	.thumbs.has-peek .slick-list{
		padding-right:16.6667% !important;
	}
}

/* ------------------------------------------------------------------------ */

/*.housing-entry

/* ------------------------------------------------------------------------ */

.housing-entry h2{
		display: block;
		font-size: 34px;
		width: fit-content;
}

.housing-entry h3{
		position: relative;
		display: block;
		font-size: 26px;
		font-weight: 700;
		text-align: left;
		padding-left: 40px;
		margin-bottom: 29px;
		padding-bottom: 11px;
		border-bottom: 1px solid #000;
}

.housing-entry h3::before{
		content: "";
		display: block;
		position: absolute;
		width: 1px;
		height: 90px;
		background-color: #000;
		bottom: -20px;
		left: 20px;
}

.housing-entry .inner{
		margin: 73px auto 100px;
}

.housing-entry .titles{
		display: flex;
		justify-content: center;
		align-items:center;
		gap: 16px;
		text-align: left;
}

.housing-entry .now,.housing-entry .finish{
		display: flex;
		justify-content: center;
		align-items: center;
		max-width: 100px;
		width: 100%;
		height: 32px;
		font-size: 18px;
		font-weight: 700;

		border-radius: 4px;
}

.housing-entry .now{
		background-color: #cfe7a1;
}

.housing-entry .finish{
		background-color: #e7a2ac;
}

table .now,
table .finish{
		margin-inline: auto;
}

.housing-entry .property-number{
		font-size: 16px;
		font-weight: 500;
		text-align: left;
		margin-top: 8px;
}

.housing-entry .about-flex{
		margin-top: 37px;
		display: flex;
		gap: 40px;
		justify-content: center;
}

.housing-entry .about-flex .main {
	position: relative;
	overflow: hidden;
	background: #f1f1f1;
	aspect-ratio: 37 / 23;
	margin-bottom: 20px
}

.housing-entry .about-flex .main img {
	position: absolute;
	display: block;
		max-width: 740px;
	width: 100%;
		height: 460px;
	object-fit: cover;

}

.housing-entry .overview{
		background-color: #e5f6ff;
		max-width: 420px;
		width: 100%;
		height: fit-content;
		padding: 33px 40px;
}

.housing-entry .overview h3{
		font-size: 26px;
		font-weight: 700;
		text-align: left;
		margin-bottom: 20px;
		/* 共通無効css */
		padding-left: 0;
		border-bottom: none;
		padding-bottom: 0;
}

.housing-entry .overview h3::before{
		display: none;
}

.housing-entry .overview dt{
		min-width: 65px;
		font-size: 16px;
		text-align: left;
		font-weight: 700;
}

.housing-entry .overview .flex{
		display: flex;
		padding-bottom: 5px;
		border-bottom: 1px solid #a9cbbb;
		margin-bottom: 6px;
}

.housing-entry .overview dd{
		font-size: 16px;
		font-weight: 500;
		padding-left: 17px;
}

.housing-entry .overview a,
.housing-entry .overview p{
	font-size: 16px;
	text-align: left;
}
.housing-entry .overview a + p{
	margin-top: 15px;
}

@media screen and (max-width: 1250px) {
		.housing-entry .inner{
				margin: 50px 0 0;
		}
}

@media screen and (max-width: 1250px){
		.gallery{
				max-width: 615px;
		}
}

@media screen and (max-width: 1000px){
		.housing-entry .about-flex{
				flex-direction: column;
				max-width: 600px;
				margin-inline: auto;
		}
		.housing-entry .about-flex .main img{
				max-width: 100%;
				height: 100%;
		}
		.housing-entry .overview{
				max-width: 100%;
		}
}

@media screen and (max-width: 786px) {
		.housing-entry h2{
				font-size: 24px;
		}

		.housing-entry .about-flex{
				gap: 30px;
		}

		.housing-entry .overview{
				padding: 20px 30px;
		}

		.housing-entry .overview h3{
				font-size: 20px;
		}

		.housing-entry .overview dt{
				font-size: 14px;
		}

		.housing-entry .overview dd{
				font-size: 14px;
		}

		.housing-entry h3{
				font-size: 20px;
				padding-left: 25px;
				margin-bottom: 20px;
		}

		.housing-entry h3::before{
				height: 60px;
				bottom: -11px;
				left: 15px;
		}
}

@media screen and (max-width: 500px) {
		.housing-entry h2{

		}
}

/* ------------------------------------------------------------------------ */

/*間取りタイプと家賃

/* ------------------------------------------------------------------------ */

.types{
	margin-top: 90px;
}
.types_content{
	display: flex;
	gap: 25px;
}
.types_content .open-modal{
	position: relative;
	width: calc((100% - (25px * 4)) / 5);
	border: 1px solid #0080c0;
	color: #0080c0;
	text-decoration: none;
	padding: 32px 10px 52px;
	box-sizing: border-box;
	transition: 0.3s;
}
.types_content .open-modal:after{
	content: '\2b';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	margin: 0 auto;
	font-size: 18px;
	border: 1px solid #0080c0;
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	transition: 0.3s;
}
.types_content .open-modal p{
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
}
.types_content .open-modal p span{
	font-size: 16px;
	display: block;
}
.types_content .open-modal:hover{
	background-color: #0080c0;
	color: #fff;
}
.types_content .open-modal:hover:after{
	border: 1px solid #fff;
}
@media screen and (max-width: 1000px) {
	.types_content .open-modal{
		width: calc((100% - (25px * 2)) / 3);
	}
}
@media screen and (max-width: 800px) {
	.types{
		margin-top: 50px;
	}
}
@media screen and (max-width: 600px) {
	.types_content .open-modal{
		width: calc((100% - (25px * 1)) / 2);
	}
}
@media screen and (max-width: 480px) {
	.types_content{
		gap: 15px;
	}
	.types_content .open-modal{
		width: calc((100% - (15px * 1)) / 2);
	}
	.types_content .open-modal:after{
		font-size: 15px;
	}
	.types_content .open-modal p{
		font-size: 17px;
	}
	.types_content .open-modal p span{
		font-size: 13px;
	}
}

.use_content{
	display: flex;
	gap: 25px;
}
.use_content .use_item{
	width: calc(((100% - (25px * 2))) / 3);
}
.use_content .use_item figure{
    aspect-ratio: 300 / 180;
}
.use_content .use_item figure img{
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.use_content .use_item p{
	margin-top: 8px;
	line-height: 1.5;
}
@media screen and (max-width: 767px) {
	.use_content{
		display: block;
	}
	.use_content .use_item{
		width: 100%;
		display: flex;
		gap: 5%;
	}
	.use_content .use_item + .use_item{
		margin-top: 20px;
	}
	.use_content .use_item figure{
		width: 35%;
		min-width: 140px;
	}
	.use_content .use_item p{
		width: 60%;
	}
}

/* ------------------------------------------------------------------------ */

/*主な設備

/* ------------------------------------------------------------------------ */

.equipment{
		margin-top: 120px;
}

.equipment-title {
	font-size: 1.6rem;
	font-weight: bold;
	border-bottom: 2px solid #ccc;
	padding-bottom: 8px;
	margin-bottom: 16px;
}

.equipment-table {
		display: flex;
		align-items: flex-start;
}

/* --- 表全体 --- */
.equipment-table table {
		font-size: 16px;

	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

/* --- セル共通 --- */
.equipment-table th,
.equipment-table td {
	border: 1px solid #d9d9d9;
	padding: 12px 10px;
	text-align: left;
	vertical-align: middle;
	word-break: break-word;
	min-height: 46px;
}

/* --- 左の見出しセル --- */
.equipment-table th {
	background-color: #d9d9d9;
	font-weight: 700;
 width: 160px;
}

/* --- 値セル --- */
.equipment-table td {

}

/* --- スマホ対応（1列表示） --- */
@media (max-width: 768px) {
	.equipment-table{
		gap: 15px;
	}
	.equipment-table table,
	.equipment-table tbody,
	.equipment-table tr,
	.equipment-table th,
	.equipment-table td {
		display: block;
		width: 100%;
		font-size: 14px;
	}

	.equipment-table tr {
		border: 1px solid #ccc;
		margin-bottom: 8px;
	}

	.equipment-table th {
		background-color: #d9d9d9;
		border-bottom: none;
		padding: 10px 8px;
	}

	.equipment-table td {
		border-top: none;
	}
}
@media (max-width: 480px) {
	.equipment-table{
		display: block;
	}
	.equipment-table tbody,
	.equipment-table tr {
		display: block;
		width: auto;
		font-size: 14px;
	}
	.equipment-table tr {
		margin-bottom: 0;
	}
	.equipment-table th,
	.equipment-table td {
		display: table-cell;
	}
	.equipment-table th{
		width: auto;
		min-width: 100px;
	}
	.equipment-table td{
		width: auto;
		border: none;
	}
}

@media screen and (max-width: 786px) {
		.equipment{
				margin-top: 60px;
		}
}


/* ------------------------------------------------------------------------ */

/*周辺設備

/* ------------------------------------------------------------------------ */

.neighborhood{
		margin-top: 120px;
}

.neighborhood .map{
		max-width: 1200px;
		height: 460px;
		margin-top: 30px;
}

.neighborhood .map iframe{
		width: 100%;
		height: 100%;
		border: none;
}

.neighborhood .info{
		text-align: left;
}


@media screen and (max-width: 786px) {
		.neighborhood{
				margin-top: 60px;
		}

		.neighborhood .map{
				max-width: 1200px;
				height: 300px;
				margin-top: 20px;
		}
}

.open-modal{
		text-decoration: underline;
		cursor: pointer;
}

.modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0,0,0,0.6);
	align-items: center;
	justify-content: center;
}
.modal.active {
	display: flex;
}
.modal-content {
	position: relative;
	background: #fff;
	padding: 20px 80px;
	max-width: 90%;
	box-sizing: border-box;
}
.modal-content img {
	max-width: 100%;
	height: auto;
	display: block;
	max-height: calc(100vh - 200px);
}
.close-modal {
	position: absolute;
	top: 24px;
	right: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.close-modal::before {
	content: "";
	display: block;
	width: 60px;
	height: 60px;
	background-color: #00843c;
	position: relative;
}

.close-modal::after {
	content: "";
	position: absolute;
	top: 16px;
	right: 16px;
	width: 60px;
	height: 60px;
}

.modal-bg {
	position: fixed;
	inset: 0;
}


.close-modal::after {
	content: "";
}

/* 疑似要素で×を作成（:before, :after両方使う） */
.close-modal::before,
.close-modal::after {
	transition: background 0.2s;
}

.close-modal::before {
	background-color: #00843c;
}

.close-modal::after {
	content: "";
}

/* ×マーク部分 */
.close-modal::after,
.close-modal::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 48px;
	height: 48px;
}

.close-modal::before {
	background-color: #00843c;
	z-index: 0;
}

.close-modal::after {
	content: "";
	z-index: 1;
}

.close-modal span::before,
.close-modal span::after {
	content: "";
	position: absolute;
	width: 36px;
	height: 4px;
	background: #fff;
	top: 23px;
	right: 0;
	left: 0;
	transform-origin: center;
	margin: 0 auto;
}

.close-modal span::before {
	transform: rotate(45deg);
}

.close-modal span::after {
	transform: rotate(-45deg);
}

/* 「閉じる」テキスト */
.close-text {
	margin-top: 58px;
	font-size: 16px;
	color: #00843c;
	line-height: 1;
	text-align: center;
}

.housing_num{
	margin-top: 15px;
	text-align: right;
}



.inquiry .txtArea p + h4{
  margin-top: 1em;
}
.inquiry .btnArea{
  display: flex;
  gap: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.inquiry .btnArea a{
  max-width: 360px;
  margin: 0;
}
@media screen and (max-width:480px){
  .inquiry .btnArea{
    display: block;
  }
  .inquiry .btnArea a{
    margin: 0 auto;
  }
  .inquiry .btnArea a + a{
    margin-top: 20px;
	  margin-bottom: 20px;
  }
}


.housing-entry section:not(.gallery,.overview){
	margin-top: 90px;
}
@media screen and (max-width: 800px) {
    .housing-entry section:not(.gallery,.overview) {
        margin-top: 50px;
    }
}





.block-entry h2{
	position: relative;
	display: block;
	font-size: 26px;
	font-weight: 700;
	text-align: left;
	padding-left: 40px;
	margin-top: 114px;
	margin-bottom: 29px;
	padding-bottom: 11px;
	border-bottom: 1px solid #000;
}
.block-entry h2:before{
	content: "";
	display: block;
	position: absolute;
	width: 1px;
	height: 90px;
	background-color: #000;
	bottom: -20px;
	left: 20px;
}
.block-entry h3{
	font-size: 20px;
	font-weight: 700;
	color: #0080c0;
}
.block-entry p{
	margin: 20px 0;
}
.block-entry .is-layout-flex{
	margin: 20px 0;
}
.block-entry .is-layout-flex p{
	margin: 0;
}
.block-entry .is-layout-flex p + p{
	margin: 20px 0;
}



/* ------------------------------------------------------------------------ */

/*.camera（マターポート）

/* ------------------------------------------------------------------------ */
section.camera{
	display: flex;
	flex-wrap: wrap;
	gap: 50px 30px;
}
section.camera .col h4 {
	margin-bottom: 10px;
}
section.camera .col{
	width: calc((100% - (30px * 1)) / 2);
}
section.camera .col .media{
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
section.camera .col .media iframe{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

@media screen and (max-width: 480px) {
	section.camera{
		gap: 30px;
	}
	section.camera .col{
		width: 100%;
	}
}