@charset "utf-8";
.mt160 { margin-top: clamp(60px, 9.5238vw, 160px); }
.head_cont { position: relative; }
.head_cont .ttl {
    color: rgba(63, 72, 69, 0.8);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 15px;
    font-size: clamp(3.5rem, 4.166666vw, 7rem);
    letter-spacing: 0.01em;
    line-height: 1;
    position: relative;
    z-index: 1;
    margin-left: -4.6vw;
}
.head_cont .ttl::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #787e7c;
    position: relative;
    bottom: 5px;
}
.head_cont .icon {
    position: absolute;
    left: -19%;
    top: -37px;
    width: clamp(160px, 21.428571428571428571vw, 360px);
}
.head_cont .txt {
    font-size: clamp(1.4rem, 1.6rem, 1.6rem);
    line-height: 2.0;
    margin-left: 14%;
    margin-top: 30px;
    position: relative;
    z-index: 1;
}
.head_cont .ttl_sub {
    font-size: clamp(1.8rem, 1.3095vw, 2.2rem);
    line-height: 1.6;
    margin-left: 14%;
    margin-top: 30px;
    position: relative;
    z-index: 1;
}
.head_cont .ttl_sub + .txt { margin-top: clamp(10px, 1.1905vw, 20px);}
.head_cont .ttl_sub + .ttl_sub { margin-top: clamp(20px, 3.5714vw, 60px);}
.head_cont .ttl_sub .lg {
    font-size: 146%;
    display: inline-block;
}
@media screen and (max-width: 1366px) {
    .head_cont .ttl { margin-left: 0;}
}
@media screen and (max-width: 1024px) {
    .head_cont .icon { left: -15px;}
    .mb30SP { margin-bottom: 30px;}
}
@media screen and (max-width: 767px) {
    .head_cont .txt { 
        font-size: 1.4rem; 
        margin-left: 0;
        letter-spacing: 0.01em;
    }
    .head_cont .ttl_sub {
        font-size: 1.6rem;
        margin-left: 0;
    }
}

.sec_design {
    padding: 1px 0;
    position: relative;
}
.sec_design .floating {
    color: #000;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}
@media screen and (max-width: 767px) {
    .sec_design.facade {
        background: -o-linear-gradient(90deg,  rgba(238,236,232,1) 0%,rgba(238,236,232,0.6) 100%), #fff;
        background:  linear-gradient(90deg,  rgba(238,236,232,1) 0%,rgba(238,236,232,0.6) 100%), #fff;
        background: #3f4845 url(../imgs/info_bg.jpg) no-repeat top center / 100% auto;
    }
    .sec_design .floating { position: static;}
}

.bg01 { 
    background: #3f4845 url(../imgs/info_bg.jpg) no-repeat top center / 100% auto;
	color: #fff;
    position: relative;
	z-index: 0;
}

/* */
.adp01{position: relative;background: #f0edeb; padding: 120px 0;}
.adp01::after{
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    height: 100%;
    top: 25px;
}
.adp01::after {
    width: 20.7%;
    right: 0px;
    background: url(../imgs/pickup_bg02.png) center top / contain no-repeat;
}


    
/* ========================================
   Feature Visual
======================================== */

.feature_visual {
    --image-width: 64.7%;
    --section-bg: #f0edeb;

    display: grid;
    grid-template-columns: var(--image-width) 1fr;
    align-items: flex-end;

    width: 100%;
    background: var(--section-bg);
}

/* メイン画像 */
.feature_visual_image {
    width: 100%;
    align-self: end;
}

.feature_visual_image img {
    display: block;
    width: 100%;
    height: auto;
}

/* テキストエリア */
.feature_visual_content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    padding: 0 3vw 0;
}

/* テキスト */
.feature_visual_text {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 460px;
}

.feature_visual_title {
    margin: 0 0 28px;
    font-size: clamp(18px, 1.35vw, 24px);
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.12em;
}

.feature_visual_description {
    margin: 0;
    font-size: clamp(13px, 0.95vw, 16px);
    line-height: 2.4;
    letter-spacing: 0.06em;
}

/* 右上の葉の装飾 */

.feature_visual_content::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: min(22vw, 360px);
    aspect-ratio: 1 / 0.9;
    
    pointer-events: none;
}

/* ========================================
   Tablet
======================================== */

@media screen and (max-width: 1100px) {
    .feature_visual {
        --image-width: 62%;
        /*min-height: 56vw;*/
    }

    .feature_visual_content {
        padding: 0px 3vw;
    }

    .feature_visual_text {
        max-width: 340px;
    }

    .feature_visual_title {
        margin-bottom: 20px;
    }

    .feature_visual_description {
        line-height: 2.1;
    }
}

/* ========================================
   SP
======================================== */

@media screen and (max-width: 767px) {
.adp01 {padding: 50px 0 0;}    
    .feature_visual {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .feature_visual_image {
        width: 100%;
        order: 2;
    }

    .feature_visual_content {
        width: 100%;
        padding: 0px 7vw 40px;
        order: 1;
    }

    .feature_visual_text {
        max-width: 520px;
        margin: 0 auto;
    }

    .feature_visual_title {
        margin-bottom: 24px;
        font-size: clamp(18px, 4.5vw, 22px);
        line-height: 1.8;
    }

    .feature_visual_description {
        font-size: clamp(13px, 3.5vw, 15px);
        line-height: 2.2;
    }

    .feature_visual_content::before {
        top: 0;
        right: 0;
        width: 35vw;
        max-width: 200px;
    }
} 
            
            
/* sec_modelroom */
.sec_modelroom {
	padding: clamp(130px,14.880952380952380952vw,250px) 0 clamp(60px,5.3571428571428571429vw,90px);
	overflow: hidden;
	position: relative;
    background:  rgb(167, 176, 168);
}
.sec_modelroom::before {
	content: "";
	background: url("../imgs/residence_bg.png") no-repeat top right/ contain;
	width: 32%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
}
.modelroom_block {
	position: relative;
	width: 100%;
}
.modelroom_ttl {
	display: flex;
	justify-content: flex-end;
	position: relative;
	z-index: 2;
	color: #3f4845;
	position: absolute;
	left: -15vw;
	top: -16.7%;
	top: 0;
	width: 100vw;
	transform: translateY(-42%);
}
.modelroom_ttl .ttl {
	font-size: clamp(4.5rem,5.952380952380952381vw,10rem);
	letter-spacing: 0.015em;
	line-height: 1.08;
}
.modelroom_ttl .txt {
	font-size: clamp(1.4rem,1.3095238095238095238vw,2.2rem);
	letter-spacing: 0.08em;
	line-height: 1.7;
	margin-bottom: clamp(5px,0.5952380952380952381vw,10px);
}
.modelroom_img {
	position: relative;
	z-index: 3;
	overflow: hidden;
}
.modelroom_img .img { height: 100%;}
.modelroom_img img {
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}
.modelroom_img .modelroom_ttl { color: #fff; }
.modelroom_img .simpleParallax  { height: 100%;}
.modelroom_green { margin-top: clamp(40px, 5.3571428571428571429vw,90px);}
.modelroom_green .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.modelroom_green .desc .ttl {
    font-size: clamp(1.6rem, 1.1904761904761904762vw,2rem);
    letter-spacing: 0.08em;
    line-height: 1.75;
    margin-bottom: clamp(10px,1.1904761904761904762vw, 20px)
}
.modelroom_green .desc .txt {
    font-size: clamp(1.2rem, 0.83333333333333333333vw,1.4rem);
    letter-spacing: 0.1em;
    line-height: 2.2;
}
.modelroom_green .item_cont .txt { font-size: clamp(1.4rem, 1.0714285714285714286vw,1.8rem);}
@media screen and (max-width: 767px) {
	.modelroom_ttl {
		right: 0;
		justify-content: center;
		left: 0;
		margin: auto;
		transform: translateY(-48%);
	}
	.modelroom_img { height: 400px;}
    .modelroom_green { text-align: center;}
    .modelroom_green .info {
        margin-bottom: 20px;
        height: auto;
    }
    .modelroom_green .desc .txt { letter-spacing: 0.01em;}
}
.bg02::after {
	content: "";
	background: url(../imgs/icon_leaf02.png) no-repeat left bottom / 100% auto;
	width: 15.5%;
	height: 100%;
	position: absolute;
	left: 0;
	bottom: 15px;
}
    .txt_info{font-size: clamp(1.4rem, 1.2095vw, 1.8rem);padding-top: clamp(36px, 4.8429vw, 55px);}