@charset "UTF-8";
/* section
----------------------------------------*/
.section_wrapper {
	max-width: calc(50% + 55rem);
	display: flex;
	margin-left: auto;
}
.section_inner {
	max-width: 100rem;
	margin: 0 auto;
}
.section_flex {
	display: flex;
}
.section_flex .section_flex_img {
	width: 50%;
}
.section_flex .section_flex_text {
	width: 50%;
}
@media only screen and (max-width: 768px) {
	.section_wrapper {
		max-width: 100%;
		display: block;
		margin: 0;
		padding-inline: 1.5rem;
	}
	.section_inner {
		padding: 0 1.5rem;
	}
	.section_flex {
		flex-direction: column;
	}
	.section_flex .section_flex_img {
		width: 100%;
	}
	.section_flex .section_flex_text {
		width: 100%;
	}
}

/*sec01
----------------------------------------*/
.sec01 {
	padding-top: 8rem;
}
.sec01 .section_flex {
	gap: 6rem;
	margin-bottom: 4.9rem;
}
.sec01 .sec01_img {
	max-width: 60rem;
}
.sec01 .sec01_map img {
	max-width: 34rem;
}
@media only screen and (max-width: 768px) {
	.sec01 {
		padding-top: 4rem;
	}
	.sec01 .section_flex {
		gap: 2rem;
		margin-bottom: 4.9rem;
	}
	.sec01 .sec01_img {
		max-width: 100%;
	}
	.sec01 .sec01_map {
		margin: 0 auto;
	}
}
/*sec02
----------------------------------------*/
.sec02 {
	padding-bottom: 15rem;
}
.sec02 .btn_area {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3.8rem 3.9rem;
}
.sec02 .btn_area > div:hover {
	opacity: .6;
	transition: opacity .3s;
}
.sec02 .btn_area .soldout:hover {
	opacity: 1 !important;
}
@media only screen and (max-width: 768px) {
	.sec02 {
		padding-bottom: 9rem;
	}
	.sec02 .btn_area {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 2rem;
	}
}

/*soldout
----------------------------------------*/
.soldout {
	background-color:#191919;
	display: inline-block;
	position: relative;
}

.soldout img {
    opacity: 0.2;    /* カラーフィルタ効果の度合いを指定(※) */
    display: block;
}

.soldout::after{
	content: 'SOLD OUT';
	font-size: 183.3%;
	letter-spacing: 0.06em;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: 600;
}
@media only screen and (max-width: 768px) {
	.soldout::after{
		font-size: 166.6%;
		letter-spacing: 0;
	}
}

/*plan
----------------------------------------*/
.plan {
	padding-top: 8rem;
	padding-bottom: 14.4rem;
}
.plan_spec {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.plan_spec figure {
	width: 44.1rem;
}
.plan_spec div {
	width: 52.4rem;
}
.plan_spec div dl {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	letter-spacing: 0.1em;
	position: relative;
}
.plan_spec div dl + dl {
	margin-top: 8px;
}
.plan_spec div dl::before {
	content: "";
	width: 80%;
	height: 1px;
	border-bottom: 1px dashed rgba(112,112,112,0.50);
	position: absolute;
	top: 50%;
	left: 10%;
}
.plan_spec div dl:nth-of-type(1)::before {
	top: 59%;
}
.plan_spec div dl.boder_none::before {
	display: none;
}
.plan_spec div dt {
	font-size: 1.6rem;
	background: #ffffff;
	min-width: 140px;
}
.plan_spec div dl:nth-of-type(1) dt {
	min-width: 85px;
}
.plan_spec div dt small {
	font-size: 1.2rem;
	letter-spacing: 0.1em;
	padding-left: 5px;
}
.plan_spec div dd {
	font-size: 1.6rem;
	text-align: right;
	background: #ffffff;
	min-width: 170px;
}
.plan_spec div dl:nth-of-type(1) dd {
	padding-left: 15px;
}
.plan_spec div dd span {
	font-size: 2.6rem;
}
.plan ul {
	padding-top: 4.4rem;
	padding-left: .9em;
}
.plan ul li {
	position: relative;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	line-height: 1.875;
}
.plan ul li::before {
	content: '';
	position: absolute;
	top: .9em;
	left: -0.8em;
	width: 0.3em;
	height: 0.3em;
	background-color: #10A6B2;
}
.plan .plan_img {
	margin-top: 4.8rem;
	display: flex;
	align-items: flex-start;
	gap: 2.5rem;
}
.plan .plan_img div {
	max-width: 41.5rem;
	height: auto;
	object-fit: contain;
}
.plan .plan_img img:last-child {
	max-width: 56rem;
	height: auto;
	object-fit: contain;
}
.plan .plan_btn_wrapper {
	display: flex;
	justify-content: center;
	gap: 5.2rem;
	margin-top: 7.2rem;
}
.plan .plan_btn_wrapper .plan_btn {
	width: 100%;
}
.plan .plan_btn_wrapper .plan_btn a {
	display: block;
	text-decoration: none !important;
	text-align: center;
	padding: 2.5rem 0 2.4rem;
	font-size: 1.8rem;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	position: relative;
	color: #fff;
	background: linear-gradient(to right, #63B795, #63B69B, #5FAEDA);
	border-radius: .8rem;
	position: relative;
	letter-spacing: 0.05em;
}
.plan .plan_btn_wrapper .plan_btn a::after {
	content: "";
	position: absolute;
	background-image: url("../img/location/ico_arrow.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
	width: .9rem;
	height: .8rem;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 3rem;
}
.plan .plan_btn_wrapper .plan_btn.back a {
	background: #B7B7B7;
}
.plan .plan_btn_wrapper .plan_btn a:hover {
	opacity: .6;
}

@media only screen and (max-width: 768px) {
	.plan {
		padding-top: 4rem;
		padding-bottom: 9rem;
	}
	.plan_spec {
		flex-direction: column;
		gap: 2rem;
	}
	.plan_spec figure {
		max-width: 44.1rem;
		width: 100%;
	}
	.plan_spec div {
		max-width: 52.4rem;
		width: 100%;
	}
	.plan_spec div dl {
		letter-spacing: 0.05em;
	}
	.plan_spec div dl::before {
		content: "";
		width: 80%;
		height: 1px;
		border-bottom: 1px dashed rgba(112,112,112,0.50);
		position: absolute;
		top: 50%;
		left: 10%;
	}
	.plan_spec div dl:nth-of-type(1)::before {
		top: 59%;
	}
	.plan_spec div dl.boder_none::before {
		display: block;
		top: 45%;
	}
	.plan_spec div dl.boder_none::after {
		content: "※トランクルーム面積（0.80㎡）を含む";
		font-size: 1.1rem;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.plan_spec div dt {
		font-size: 1.5rem;
		min-width: 120px;
	}
	.plan_spec div dl.boder_none dt {
		position: relative;
		padding: 0 0 1.5rem;
	}
	.plan_spec div dl:nth-of-type(1) dt {
		min-width: 75px;
	}
	.plan_spec div dt small {
		display: none;
	}
	.plan_spec div dd {
		font-size: 1.5rem;
		min-width: 150px;
	}
	.plan_spec div dl:nth-of-type(1) dd {
		padding-left: 15px;
	}
	.plan_spec div dd span {
		font-size: 2.3rem;
	}
	.plan ul {
		padding-top: 2rem;
	}
	.plan ul li {
		font-size: 1.4rem;
	}
	.plan .plan_img {
		flex-direction: column;
		align-items: center;
		margin-top: 3rem;
	}
	.plan .plan_btn_wrapper {
		width: 100%;
		flex-direction: column;
		gap: 1rem;
		margin-top: 3rem;
	}
	.plan .plan_btn_wrapper .plan_btn a {
		padding: 1.5rem 0 1.4rem;
	}
}