@charset "UTF-8";

main {
	background: #fff;
}

/* mainv_block
----------------------------------------*/
.mainv_block {
	z-index: 10;
}
.mainv_inner {
	position: relative;
}
.mainv_main {
	width: 100%;
}

/* sec01
----------------------------------------*/
.sec01 .sec_inner {
	padding: 90px 0 140px;
	position: relative;
}
.sec01 h2 {
	width: fit-content;
	text-align: center;
	font-size: 3.1rem;
	letter-spacing: .17em;
	color: #172b4f;
	margin: 0 auto 60px;
}
.sec01 h2 span {
	width: 100%;
	display: inline-block;
	padding: 0.3em 0.1em 0.2em;
}
.sec01 h2 span::after {
	content: '';
	display: block;
	height: .1rem;
	background: #172b4f;
	position: absolute;
	left: 0;
	bottom: -.1rem;
	width: 0;
	transition: width .5s;
	transition-delay: 1s;
}
.sec01 h2 span:nth-child(3)::after {
	transition-delay: 1.7s;
}
.sec01 h2.show span::after {
	width: 100%;
}
.sec01 h2 small {
	font-size: 1.2rem;
}
.sec01 p {
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 2;
	color: #172b4f;
	text-align: center;
	margin-bottom: 120px;
}
.sec01 p sup {
	font-size: 1.2rem;
}
.sec01 p small {
	font-size: 1.2rem;
}
.sec01 .results {
	width: 695px;
	margin: 0 auto;
}
.sec01 .maru {
	position: absolute;
}
.sec01 .maru.maru01 {
	width: 210px;
	top: 274px;
	right: 50%;
	margin-right: 390px;
}
.sec01 .maru.maru02 {
	width: 210px;
	top: 78px;
	left: 50%;
	margin-left: 400px;
}
.sec01 .maru.maru03 {
	width: 140px;
	top: 504px;
	left: 50%;
	margin-left: 365px;
}
@media only screen and (max-width: 768px) {
	.sec01 .sec_inner {
		padding: 50px 0 130px;
	}
	.sec01 h2 {
		font-size: 7.2vw;
		letter-spacing: 0.1em;
		margin-bottom: 50px;
	}
	.sec01 h2 span {
		transition-delay: 0.8s;
	padding: 0.3em 0 0.2em;
	}
	.sec01 h2 span:nth-child(3)::after {
		transition-delay: 1.3s;
	}
	.sec01 h2 span:nth-child(5)::after {
		transition-delay: 1.8s;
	}
	.sec01 h2 span:nth-child(7)::after {
		transition-delay: 2.3s;
	}
	.sec01 p {
		font-size: 3.8vw;
		margin-bottom: 50px;
	}
	.sec01 p small {
		display: inline-block;
		font-size: 2.6vw;
		margin-top: 15px;
	}
	.sec01 .maru {
		display: none;
	}
	.sec01 .results {
		max-width: 375px;
		width: 100%;
	}
}

/* sec02
----------------------------------------*/
.sec02 {
	background-color: #EFF5EE;
}
.sec02 .img01 {
	position: relative;
	margin-bottom: 120px;
}
.sec02 .img01 h2 {
	font-size: max(7.8vw,10rem);
	line-height: 1;
	letter-spacing: 0.12em;
	color: #172B4F;
	position: absolute;
	top: -12%;
	left: 50%;
}
.sec02 .img01 p {
	font-size: max(2.9vw,3.8rem);
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 0.1em;
	color: #172B4F;
	position: absolute;
	top: 21%;
	left: 50%;
}
.sec02 .img01 .name {
	width: calc(210/1280 * 100%);
	position: absolute;
	top: auto;
	bottom: 33px;
	left: auto;
	right: 50%;
	margin-right: calc(320/1280 * 100%);
}
.sec02 .sec_inner {
	width: 808px;
	margin: 0 auto;
}
.sec02 .sec_inner h3 {
	font-size: 2.5rem;
	line-height: 1.8;
	color: #5E9958;
	letter-spacing: 0.15em;
	margin-bottom: 20px;
}
.sec02 .sec_inner p {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.8;
	text-indent: 1em;
	color: #172B4F;
}
.sec02 .sec_inner p small {
	font-size: 1.2rem;
	line-height: 1.4;
	display: inline-block;
	padding-left: 1em;
	text-indent: -1em;
}
.sec02 .sec_inner > div {
	display: flex;
	position: relative;
	margin: 130px 0 100px;
}
.sec02 .sec_inner > div div {
	width: 54%;
}
.sec02 .sec_inner > div figure {
	position: absolute;
	left: calc(50% + 90px);
	width: 550px;
}
.sec02 .sec_inner > figure {
	z-index: 10;
}
.sec02 .sec_inner > figure img {
	transform: translateY(50%);
}
@media only screen and (max-width: 768px) {
	.sec02 .img01 {
		margin-bottom: 50px;
	}
	.sec02 .img01 h2 {
		text-align: center;
		font-size: max(9vw,5.5rem);
		top: -5%;
		left: 0;
		right: 0;
	}
	.sec02 .img01 p {
		font-size: max(5.2vw,2.1rem);
		top: 6%;
		left: 5%;
	}
	.sec02 .img01 .name {
		width: calc(192/375 * 100%);
		top: auto;
		bottom: 7px;
		left: 15px;
		right: auto;
		margin-right: 0;
	}
	.sec02 .sec_inner {
		width: calc(321/375 * 100vw);
		margin: 0 auto;
	}
	.sec02 .sec_inner h3 {
		font-size: 6.2vw;
		margin-bottom: 15px;
	}
	.sec02 .sec_inner p {
		font-size: 3.8vw;
	}
	.sec02 .sec_inner p small {
		font-size: 2.6vw;
		padding-top: 5px;
	}
	.sec02 .sec_inner > div {
		display: block;
		margin: 80px 0;
	}
	.sec02 .sec_inner > div div {
		width: 100%;
	}
	.sec02 .sec_inner > div div h3 {
		letter-spacing: 0.06em;
	}
	.sec02 .sec_inner > div figure {
		position: static;
		width: 100vw;
		margin: 50px calc(-27/375 * 100vw) 0;
	}
	.sec02 .sec_inner > figure {
		width: 100vw;
		margin: 50px calc(-27/375 * 100vw) 0;
	}
	.sec02 .sec_inner > figure img {
		transform: translateY(0);
	}
}


/* business_block
----------------------------------------*/
.business_block {
	padding: 190px 0 100px;
	background: #f7f3ef;
}
.business_block h2 {
	text-align: center;
	font-size: 3.5rem;
	letter-spacing: .17em;
	color: #172b4f;
	margin-bottom: 80px;
}
.business_block h2 span {
	padding: 0 0.5em 0.2em;
}
.business_block h2 span::after {
	content: '';
	display: block;
	height: .1rem;
	background: #172b4f;
	position: absolute;
	left: 0;
	bottom: -.1rem;
	width: 0;
	transition: width .5s;
	transition-delay: 1s;
}
.business_block h2.show span::after {
	width: 100%;
}
.business_block ul {
	width: 830px;
	display: flex;
	justify-content: space-between;
	text-align: center;
	margin: 0 auto;
}
.business_block ul li {
	width: 250px;
}
.business_block ul li h3 {
	font-size: 2.4rem;
	font-weight: bold;
	color: #4576b5;
	letter-spacing: .05em;
	margin-bottom: 20px;
}
.business_block ul li.house h3 {
	color: #5e9958;
}
.business_block ul li.lease h3 {
	color: #f38200;
}
.business_block ul li.parking h3 {
	color: #dc4835;
}
.business_box {
	border-radius: 2.5rem;
	overflow: hidden;
	background: #fff;
}
.business_txt {
	font-size: 1.6rem;
	font-weight: 500;
	color: #000;
	line-height: 1.55;
	padding: 6px 0 7px;
}
.business_txt .dot {
	margin: 0 -.25em;
}
.business_txt .reading {
	margin: 0 -.5em 0 0;
}
.business_txt .ls {
	letter-spacing: -.05em;
}
li .business_box figure {
	overflow: hidden;
}
li .business_box figure img {
	transition: transform .5s;
}
.business_box figure::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #7d9fcb;
	mix-blend-mode: multiply;
	z-index: 100;
}
li.house .business_box figure::before {
	background: #8eb88a;
}
li.lease .business_box figure::before {
	background: #f7a74c;
}
li.parking .business_box figure::before {
	background: #e67f72;
}
.comingsoon .business_box figure::after {
	content: 'Coming Soon...';
	color: #fff;
	font-size: 1.5rem;
	font-weight: bold;
	font-family: "Zen Maru Gothic", serif;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 2rem;
	left: 0;
	right: 0;
	bottom: 0;
	letter-spacing: .05em;
	z-index: 200;
}
.business_btn {
	width: 100%;
	margin: 2.3rem auto 0;
	border: .2rem solid #172b4f;
	background: #fff;
	font-weight: bold;
	color: #172b4f;
	border-radius: 3rem;
	font-size: 2rem;
	padding: .5rem .5rem .7rem;
	letter-spacing: .05em;
	transition: background .5s, color .5s;
}
.business_btn::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: .6rem 0 .6rem .8rem;
	margin: 0 -.3rem 0 .7rem;
	border-color: transparent transparent transparent #172b4f;
	transition: border-color .5s;
}
@media (hover: hover) {
	.business_block ul li a:hover .business_btn {
		background: #4576b5;
		color: #fff;
	}
	.business_block ul li a:hover .business_btn::after {
		border-color: transparent transparent transparent #fff;
	}
	.business_block ul li a:hover figure img {
		transform: scale(1.1);
	}
}
@media only screen and (max-width: 768px) {
	.business_block {
		padding: 60px 0 40px;
	}
	.business_block h2 {
		width: fit-content;
		font-size: 8vw;
		margin: 0 auto 30px;
	}
	.business_block h2 span {
		width: 100%;
		display: inline-block;
		padding: 0 2em 0.2em;
	}
	.business_block ul {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}
	.business_block ul li {
		width: 66.66vw;
	}
	.business_block ul li + li {
		margin-top: 50px;
	}
	.business_btn {
		width: 120%;
		font-size: 2.5rem;
		border-radius: 4rem;
		padding: .8rem .5rem 1rem;
		margin-left: -10%;
	}
	.business_btn::after {
		border-width: .8rem 0 .8rem 1rem;
		margin: 0 -.2rem 0 .9rem;
	}
}

.detail_btn {
	text-align: center;
	width: 530px;
	margin: 80px auto 140px;
}
.detail_btn a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 2.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #fff;
	width: 100%;
	height: 90px;
	line-height: 35px;
	border-radius: 45px;
	background: linear-gradient(to right,  rgba(38,179,88,1) 0%,rgba(94,153,88,1) 100%);
	transition: .4s;
	position: relative;
}
.detail_btn a:hover {
	opacity: .7;
}
.detail_btn a::after {
	content: "";
	display: inline-block;
	position: absolute;
	right: 53px;
	top: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 11px 0 11px 15px;
	border-color: transparent transparent transparent #ffffff;
	transform: translateY(-50%);
}
@media only screen and (max-width: 768px) {
	.detail_btn {
		width: calc(321/375 * 100vw);
		margin: 0 auto 70px;
	}
	.detail_btn a {
		font-size: 2rem;
		line-height: 30px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.detail_btn a::after {
		right: 18px;
	}
}