@charset "UTF-8";

/*============================
#facade
============================*/
.main .content .sec {}
.main .content .sec .img {
    position: relative;
    z-index: 100;
}
.main .content .sec .img img {
    width: 100%;
}
.main .content .sec .img .caption {
    left: auto;
    right: 10px;
    color: #fff;
}
.main .content .sec>.inner {
    width: 980px;
    margin: 0 auto;
    padding: 120px 0 170px 0;
}
.main .content .sec .info {}
.main .content .sec .info h2 {
    font-size: 38px;
    /* color: #CFDB00; */
    font-size: 55px;
    letter-spacing: 0;
}
.main .content .sec .info .lead {
    font-size: 24px;
    letter-spacing: 0.2em;
    margin-top: 16px;
}
.main .content .sec .info .text {
    font-size: 15px;
    margin-top: 44px;
    letter-spacing: 0.2em;
    line-height: 2.4em;
}
.main .content .sec .detail {
    width: 577px;
    margin: -206px 0 0 auto;
    position: relative;
}
.main .content .sec .detail::before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 1px;
    background: #5d514a;
    transform: rotate(45deg);
    top: -281px;
    left: 78px;
    transform-origin: 0 0;
    transition: all ease 1s;
}
.main .content .sec.facade > .inner.active .detail::before {
    width: 400px;
}
.main .content .sec .detail .img.img2 {
    width: 268px;
    margin: 0 0 -100px auto;
}
.main .content .sec .detail .img.img3 {
    width: 354px;
}
.main .content .sec .detail .text {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 10px;
    width: 198px;
    line-height: 2.6em;
}
.main .content .sec.lounge>.inner {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.main .content .sec.lounge .info {
    width: 640px;
}
.main .content .sec.lounge .detail {
    width: 268px;
    margin: 0;
    position: relative;
}
.main .content .sec.lounge .detail::before {
    transform: rotate(-45deg);
    top: -130px;
    width: 0;
    left: auto;
    right: 40px;
    transform-origin: 100% 0;
}
.main .content .sec.lounge > .inner.active .detail::before {width: 200px;}
.main .content .sec.lounge .detail .img.img2 {
    width: auto;
    margin: 0 0 15px 0;
}
.main .content .sec.lounge .detail .text {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
}
/*============================
#landscape
============================*/
.main .content .landscape {
    background: #ddd5c9;
    color: #5d514a;
    padding: 120px 0 160px 0;
    overflow: hidden;
}
.main .content .landscape>.inner {
    width: 980px;
    margin: 0 auto;
}
.main .content .landscape>.inner>.info {
    position: relative;
    width: 530px;
    padding-bottom: 128px;
    color: #fff;
}
.main .content .landscape>.inner>.info::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100vw;
    width: 100dvw;
    height: 550px;
    background: #7b6c56;
}
.main .content .landscape>.inner>.info h2 {
    font-size: 47px;
    position: relative;
}
.main .content .landscape>.inner>.info .lead {
    font-size: 24px;
    letter-spacing: 0.2em;
    line-height: 1.8em;
    margin-top: 29px;
    position: relative;
}
.main .content .landscape .img1 {
    width: 1380px;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    margin: -320px 0 0px 40px;
    pointer-events: none;
}
@media screen and (max-width: 1300px) {
	.main .content .landscape .img1 {
	    width: 1123px;
	    position: relative;
	    left: 50%;
	    transform: translate(-50%, 0);
	    margin: -260px 0 0 40px;
	    pointer-events: none;
	}
}
.main .content .landscape .parking {margin-top: 30px;}
.main .content .landscape .parking .title {font-size: 30px;line-height: 1em;border-bottom: 7px solid #b9ac9b;width: 130px;padding-bottom: 10px;margin-bottom: -7px;position: relative;}
.main .content .landscape .parking > .inner {background: #cabfb1;padding: 50px 70px 60px 70px;}
.main .content .landscape .parking > .inner > .lead {font-size: 20px;letter-spacing: 0.1em;}
.main .content .landscape .parking .fbox {display: flex;gap: 70px;margin-top: 26px;}
.main .content .landscape .parking .fbox .box {display: flex;width: calc(50% - 7px);justify-content: space-between;align-items: start;}
.main .content .landscape .parking .fbox .box .img {
	width: 173px;
	position: relative;
}
.main .content .landscape .parking .fbox .box .img .caption {left: auto;right: 10px;color: #fff;text-shadow: 0 0 3px #000, 0 0 3px #000;}
.main .content .landscape .parking .fbox .box .info {
	width: calc(100% - 193px);
}
.main .content .landscape .parking .fbox .box .info .lead {font-size: 22px;line-height: 1.5em;margin-top: -6px;}
.main .content .landscape .parking .fbox .box .info .text {font-size: 15px;line-height: 1.6em;margin-top: 8px;}
.main .content .landscape .commoncpace {
    margin-top: 60px;
}
.main .content .landscape .commoncpace .lead {
    font-size: 24px;
    letter-spacing: 0.2em;
    margin-bottom: 50px;
}
.main .content .landscape .commoncpace .insec {
    display: flex;
    align-items: start;
}
.main .content .landscape .commoncpace .insec .img {
    width: 530px;
    position: relative;
}
.main .content .landscape .commoncpace .insec .img .caption {
    color: #fff;
    left: auto;
    right: 11px;
}
.main .content .landscape .commoncpace .insec .info {
    width: calc(100% - 530px);
}
.main .content .landscape .commoncpace .insec .info h3 {
    font-size: 34px;
    /* background: #CFDB00; */
    width: 290px;
    text-align: center;
    padding: 14px 0 5px 0;
    line-height: 1em;
}
.main .content .landscape .commoncpace .insec .info .lead {
    font-size: 22px;
    line-height: 1.8em;
    margin: 48px 0 0 45px;
}
.main .content .landscape .commoncpace .insec .info .text {
    font-size: 15px;
    line-height: 1.8em;
    margin: 26px 0 0 45px;
}
.main .content .landscape .commoncpace .insec.workroom {
    flex-direction: row-reverse;
    margin-top: 100px;
}
.main .content .landscape .commoncpace .insec.workroom .info h3 {
    margin-left: auto;
}
.main .content .landscape .commoncpace .insec.workroom .info .lead {
    margin: 48px 45px 0 0;
    text-align: right;
}
.main .content .landscape .commoncpace .insec.workroom .info .text {
    margin: 26px 45px 0 0;
}
.main .content .landscape .designer {background: #aa9a8a;width: 100vw;position: relative;left: 50%;transform: translate(-50%, 0);margin: 100px auto 0 auto;color: #fff;padding: 100px 0;}
.main .content .landscape .designer > .inner {width: 980px;margin: 0 auto;}
.main .content .landscape .designer .fbox {display: flex;justify-content: space-between;align-items: start;}
.main .content .landscape .designer .fbox .info {width: 532px;}
.main .content .landscape .designer .fbox .info .name {font-size: 27px;line-height: 1.5em;letter-spacing: 0.1em;background: url(./images/img_designer_logo.webp) no-repeat right 20px top 60% / 150px auto;}
.main .content .landscape .designer .fbox .info .name span {font-size: 16px;display: block;}
.main .content .landscape .designer .fbox .info .text {font-size: 15px;margin-top: 28px;}
.main .content .landscape .designer .fbox .img {position: relative;width: 400px;}
.main .content .landscape .designer .fbox .img .caption {left: auto;right: 0;bottom: -25px;text-shadow: none;}
.main .content .landscape .flower {
    margin-top: 100px;
}
.main .content .landscape .flower .img.img4 {
    position: relative;
    margin-bottom: 60px;
}
.main .content .landscape .flower .img.img4 .caption {
    color: #fff;
    left: auto;
    right: 10px;
}
.main .content .landscape .flower .lead {
    font-size: 24px;
    letter-spacing: 0.2em;
    margin-bottom: 40px;
}
.main .content .landscape .flower .text {
    font-size: 15px;
    letter-spacing: 0.2em;
}
.main .content .landscape .flower .fbox {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
}
.main .content .landscape .flower .fbox .img {
    width: 25%;
    position: relative;
}
.main .content .landscape .flower .fbox .img .caption {
    color: #fff;
    left: auto;
    bottom: 3px;
    right: 5px;
}
.main .content .landscape .flower .fbox .note {
    text-align: right;
    width: 100%;
    margin-top: 5px;
    font-size: 10px;
}
/**************************************************************/
/** SP ********************************************************/
/**************************************************************/
@media screen and (max-width: 767px) {
	/*============================
	#facade
	============================*/
	.main .content .sec {}
	.main .content .sec .img {
		position: relative;
		z-index: 100;
	}
	.main .content .sec .img img {
		width: 100%;
	}
	.main .content .sec .img .caption {
		left: auto;
		right: 10px;
		text-align: right;
	}
	.main .content .sec>.inner {
		width: auto;
		margin: 0 0 0 calc(7% + 20px);
		padding: 40px 0 90px 0;
	}
	.main .content .sec .info {}
	.main .content .sec .info h2 {
		font-size: 28px;
		/* color: #CFDB00; */
	}
	.main .content .sec .info .lead {
		font-size: 20px;
		letter-spacing: 0.1em;
		margin-top: 12px;
	}
	.main .content .sec .info .text {
		font-size: 13px;
		letter-spacing: 0.05em;
		line-height: 2em;
		margin-top: 20px;
	}
	.main .content .sec .detail {
		width: 343px;
		margin: 50px 0 0 0;
		position: relative;
	}
	.main .content .sec .detail::before {
		content: "";
		display: block;
		position: absolute;
		width: 0;
		height: 0.5px;
		/* background: #CFDB00; */
		transform: rotate(45deg);
		top: -220px;
		left: -138px;
	}
	.main .content .sec.facade > .inner.active .detail::before {
	    width: 400px;
	}
	.main .content .sec .detail .img.img2 {
		width: 166px;
		margin: 0 0 -58px auto;
	}
	.main .content .sec .detail .img.img3 {
		width: 198px;
	}
	.main .content .sec .detail .text {
		position: absolute;
		right: auto;
		bottom: 132px;
		font-size: 10px;
		width: 160px;
		line-height: 1.8em;
	}
	.main .content .sec.lounge>.inner {
		display: block;
	}
	.main .content .sec.lounge .info {
		width: 640px;
	}
	.main .content .sec.lounge .detail {
		width: 178px;
		margin: 70px 0 0 calc(-7% - 24px);
		position: relative;
	}
	.main .content .sec.lounge .detail::before {
	    transform: rotate(-45deg);
	    top: -203px;
	    width: 0;
	    left: auto;
	    right: calc(100% - 486px);
	    transform-origin: 100% 0;
	}
	.main .content .sec.lounge > .inner.active .detail::before {width: 400px;}
	.main .content .sec.lounge .detail .img.img2 {
		width: auto;
		margin: 0 0 15px 0;
	}
	.main .content .sec.lounge .detail .text {
		position: absolute;
		right: auto;
		width: 160px;
		bottom: 0;
		left: 202px;
	}
	/*============================
	#landscape
	============================*/
	.main .content .landscape {
		/* background: #E1D1BC; */
		/* color: #000; */
		padding: 47px 0 80px 0;
		overflow: hidden;
	}
	.main .content .landscape>.inner {
		width: 80%;
		margin: 0 auto;
	}
	.main .content .landscape>.inner>.info {
		position: relative;
		width: 300px;
		padding-bottom: 148px;
	}
	.main .content .landscape>.inner>.info::before {
		content: "";
		position: absolute;
		right: auto;
		left: -690px;
		top: -47px;
		bottom: auto;
		width: 1000px;
		height: 226px;
		/* background: #CFDB00; */
	}
	.main .content .landscape>.inner>.info h2 {
		font-size: 25px;
		position: relative;
	}
	.main .content .landscape>.inner>.info .lead {
		font-size: 14px;
		letter-spacing: 0.2em;
		line-height: 1.8em;
		margin: 17px 0 50px 0;
		position: relative;
	}
	.main .content .landscape .img1 {
		width: 544px;
		position: relative;
		left: 50%;
		transform: translate(-50%, 0);
		margin: -135px 0 0 0;
		pointer-events: none;
	}
	.main .content .landscape .parking {margin-top: 30px;width: 94vw;position: relative;left: 50%;transform: translate(-50%, 0);}
	.main .content .landscape .parking .title {font-size: 20px;line-height: 1em;border-bottom: 4px solid #b9ac9b;width: 85px;padding-bottom: 6px;margin-bottom: -4px;position: relative;}
	.main .content .landscape .parking > .inner {background: #cabfb1;padding: 20px 25px 30px 25px;}
	.main .content .landscape .parking > .inner > .lead {font-size: 14px;letter-spacing: 0.1em;line-height: 1.8em;}
	.main .content .landscape .parking .fbox {display: flex;gap: 20px;flex-wrap: wrap;margin-top: 15px;}
	.main .content .landscape .parking .fbox .box {display: flex;width: 100%;justify-content: space-between;align-items: start;margin-top: 0;}
	.main .content .landscape .parking .fbox .box .img {
		width: 93px;
		position: relative;
	}
	.main .content .landscape .parking .fbox .box .img .caption {left: auto;right: 10px;color: #fff;text-shadow: 0 0 3px #000, 0 0 3px #000;}
	.main .content .landscape .parking .fbox .box .info {
		width: calc(100% - 108px);
	}
	.main .content .landscape .parking .fbox .box .info .lead {font-size: 14px;line-height: 1.5em;margin-top: 0px;}
	.main .content .landscape .parking .fbox .box .info .text {font-size: 12px;line-height: 1.6em;margin-top: 7px;}
	.main .content .landscape .commoncpace {
		margin-top: 40px;
	}
	.main .content .landscape .commoncpace .lead {
		font-size: 18px;
		letter-spacing: 0.1em;
		margin-bottom: 35px;
		line-height: 1.8em;
	}
	.main .content .landscape .commoncpace .insec {
		display: block;
	}
	.main .content .landscape .commoncpace .insec .img {
		width: auto;
		position: relative;
	}
	.main .content .landscape .commoncpace .insec .img .caption {
		color: #fff;
		left: auto;
		right: 11px;
	}
	.main .content .landscape .commoncpace .insec .info {
		width: auto;
		margin-top: 25px;
	}
	.main .content .landscape .commoncpace .insec .info h3 {
		font-size: 23px;
		/* background: #CFDB00; */
		width: 220px;
		text-align: center;
		padding: 11px 0 6px 0;
		line-height: 1em;
		margin-left: -10vw;
		margin-left: -10dvw;
	}
	.main .content .landscape .commoncpace .insec .info .lead {
		font-size: 18px;
		line-height: 1.8em;
		margin: 15px 0 0 0;
	}
	.main .content .landscape .commoncpace .insec .info .text {
		font-size: 14px;
		line-height: 1.8em;
		margin: 10px 0 0 0;
	}
	.main .content .landscape .commoncpace .insec.workroom {
		flex-direction: row-reverse;
		margin-top: 40px;
	}
	.main .content .landscape .commoncpace .insec.workroom .info h3 {
		margin-left: auto;
		margin-right: -10vw;
		margin-right: -10dvw;
	}
	.main .content .landscape .commoncpace .insec.workroom .info .lead {
		margin: 15px 0 0 0;
		text-align: right;
	}
	.main .content .landscape .commoncpace .insec.workroom .info .text {
		margin: 10px 0 0 0;
	}
	.main .content .landscape .designer {/* background: #856F18; */width: 100vw;position: relative;left: 50%;transform: translate(-50%, 0);margin: 60px auto 0 auto;color: #fff;padding: 50px 0 70px 0;}
	.main .content .landscape .designer > .inner {width: 80%;margin: 0 auto;}
	.main .content .landscape .designer .fbox {display: block;}
	.main .content .landscape .designer .fbox .info {width: auto;}
	.main .content .landscape .designer .fbox .info .name {font-size: 20px;line-height: 1.5em;letter-spacing: 0.1em;background: url(./images/img_designer_logo.webp) no-repeat right 0px top 63% / 110px auto;}
	.main .content .landscape .designer .fbox .info .name span {font-size: 12px;display: block;}
	.main .content .landscape .designer .fbox .info .text {font-size: 13px;margin-top: 16px;}
	.main .content .landscape .designer .fbox .img {position: relative;width: auto;margin-top: 20px;}
	.main .content .landscape .designer .fbox .img .caption {left: auto;right: 0;bottom: -25px;text-shadow: none;}
	.main .content .landscape .flower {
		margin-top: 60px;
	}
	.main .content .landscape .flower .img.img4 {
		margin-bottom: 30px;
		width: 100vw;
		position: relative;
		left: -10vw;
	}
	.main .content .landscape .flower .img.img4 img {
	object-fit: cover;
	width: 100%;
	height: 66vw;
	}
	.main .content .landscape .flower .img.img4 .caption {
		color: #fff;
		left: auto;
		right: 10px;
	}
	.main .content .landscape .flower .lead {
		letter-spacing: 0.1em;
		font-size: 18px;
		line-height: 1.8em;
		margin: 15px 0 0 0;
	}
	.main .content .landscape .flower .text {
		letter-spacing: 0em;
		font-size: 14px;
		line-height: 1.8em;
		margin-top: 14px;
	}
	.main .content .landscape .flower .fbox {
		margin-top: 40px;
		display: flex;
		flex-wrap: wrap;
	}
	.main .content .landscape .flower .fbox .img {
		width: 50%;
		position: relative;
	}
	.main .content .landscape .flower .fbox .img .caption {
		color: #fff;
		left: auto;
		bottom: 3px;
		right: 5px;
	}
	.main .content .landscape .flower .fbox .note {
		text-align: right;
		width: 100%;
		margin-top: 5px;
		font-size: 10px;
	}
}