@charset "UTF-8";
.mv{
    position: relative;
}
.mv-text{
    padding: 1.4rem 0 0rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 10;
    text-align: center;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
    max-width: 850px;
    width: 100%;
}
.mv-ttl{
    font-size: clamp(3.5rem,4vw,9.6rem);
    font-weight: 400;
    color: #fff;
}
.mv-ttl-sub{
    padding-bottom: 1.4rem;
    font-size: 3.8rem;
    font-size: clamp(2.1rem,2.4vw,5.7rem);
    font-weight: 400;
    line-height: 1.3;
    color: #fff;
    border-bottom: 3px solid #fff;
}
.mv-ttl-sub .text-small{
    font-size: clamp(1.6rem,1.75vw,4.2rem);
}
@media screen and (max-width: 767px){
	.mv-text{
        max-width: 88%;
    }
}
.energy-saving{
    background: url(../img/support/energy-saving-bg.webp) no-repeat center bottom;
    background-size: contain;
}
.energy-saving .inner{
    padding: 80px 0;
}
.energy-saving-about{
    position: relative;
}
.section-ttl{
    font-size: clamp(3rem,3.8vw,5.2rem);
    color: #70974a;
    text-align: center;
}
@media screen and (max-width: 767px){
    .section-ttl{
        font-size: clamp(2rem,7vw,3.1rem);
        letter-spacing: -.06rem;
    }
}
.section-ttl .text-sub{
    font-size: clamp(1.7rem,1.5vw,4rem);
    color: #333;
    display: block;
    font-weight: 400;
}
.section-ttl .annotation{
    color: #333;
    font-size: 1.4rem;
}
.energy-saving .none{
    margin-top: 10px;
    font-size: clamp(1.4rem,1.2vw,3.6rem);
    text-align: center;
    opacity: 1;
    line-height: 1.8;
}
.energy-saving-emblem{
    position: absolute;
    right: 12%;
    top: 50%;
    transform: translateY(-50%);
    width: 13%;
}
.energy-saving-grade{
    margin-top: 100px;
    background: rgba(255, 255, 255, 0.7);
    width: 60%;
    margin-left: auto;
}
.energy-saving-grade-inner{
    padding: 40px 40px;
}
.energy-saving-grade-ttl{
    margin-top: 30px;
    background: #70974a;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    font-size: clamp(2.2rem,1.5vw,4rem);
    font-weight: 500;
}
.energy-saving-grade-ttl:first-child{
    margin-top: 0;
}
.grade-none{
    margin-top: 3%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.grade-img{
    width: 25%;
    margin-top: -1.8%;
}
.grade-text{
    width: 73%;
    font-size: clamp(1.2rem,1vw,3.4rem);
}
.caption.caption01{
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 0;
}
.caption-container{
    padding: 4px 0;
    padding-bottom: 50px;
    background: #f5f5f5;
}
@media screen and (max-width: 1080px){
    .energy-saving-emblem{
        right: 6%;
    }
}
@media screen and (max-width: 840px){
    .energy-saving .none{
        margin-top: 0;
        letter-spacing: -.04rem;
        font-size: clamp(1.5rem, 1.2vw, 3.6rem);
    }
    .energy-saving{
        background: url(../img/support/energy-saving-bg-sp.webp) no-repeat center bottom;
        background-size: 100%;
    }
    .energy-saving .inner{
        padding: 40px 0 20px;
    }
	.energy-saving-emblem{
        position: static;
        transform: none;
        width: 39%;
        margin: 16px auto 46px;
    }
    .energy-saving-grade{
        margin: 16px auto 0;
        width: 90%;
    }
    .energy-saving-grade-inner{
        padding: 35px 20px 28px;
    }
    .energy-saving-grade-ttl {
        margin-top: 20px;
        font-size: 1.5rem;
        line-height: 31px;
        height: 29px;
    }
    .grade-none {
        margin-top: 8px;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .grade-text{
        width: 100%;
        font-size: 1rem;
        line-height: 1.4;
    }
    .grade-img{
        width: 41%;
        margin-left: -3%;
        margin-top: 0;
    }
    .caption-container{
        padding: 10px 0;
        padding-bottom: 30px;
    }
}

.mansion{
    background: url(../img/support/mansion-bg.webp) no-repeat center bottom;
    background-size: contain;
}
.mansion .inner{
    padding: 80px 0 22vw;
    margin: 0 auto;
    max-width: 1140px;
    width: calc(100% - 50px);
}
@media screen and (max-width: 767px){
    .mansion .inner{
        padding: 40px 0 27vw;
        max-width: unset;
        width: calc(100% - 32px);
    }
}
.section-ttl.mansion-ttl{
    color: #812a25;
}
.mansion-none{
    margin-top: 10px;
    font-size: clamp(1.7rem,1vw,3rem);
    text-align: center;
    line-height: 1.8;
}
.merit-ttl{
    margin-top: 30px;
    background: #812a25;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    font-size: clamp(2.2rem,1.5vw,4rem);
    font-weight: 500;
}
.merit-about-container{
    margin-top: 40px;
    display: flex;    
}
.merit-about-items{
    display: flex;
}
.merit-about-items-text{
    font-size: clamp(2rem,1.5vw,2.4rem);
    width: 56%;
    color: #812a25;
    font-weight: 500;
}
.merit-about-items-text .text-sub{
    font-size: clamp(1.4rem,1.2vw,2rem);
    color: #333;
    display: block;
    font-weight: 400;
}
.merit-about-items-image{
    width: 44%;
    display: flex;
    align-items: end;
}
.merit-about-items-image img{
    position: relative;
    right: 7%;
}
@media screen and (max-width: 767px){
    .mansion-none{
        letter-spacing: -.04rem;
        margin-top: 6px;
        font-size: clamp(1.3rem,1vw,3rem);
    }
    .merit-ttl{
        margin-top: 24px;
        font-size: 1.5rem;
        line-height: 31px;
        height: 29px;
    }
    .merit-about-container{
        margin-top: 50px;
        margin-bottom: 19vw;
        padding: 0 0 0 5%;
        letter-spacing: -.06rem;
        flex-direction: column;
        gap: 21vw;
    }
    .merit-about-items{
        display: block;
        position: relative;
    }
    .merit-about-items-text{
        font-size: clamp(1.5rem,1.5vw,2.4rem);
        width: 100%;
        line-height: 1.8;
    }
    .merit-about-items-text .text-sub{
        font-size: clamp(1.3rem,1.2vw,2rem);
        margin-bottom: 2px;
    }
    .merit-about-items-image{
        position: absolute;
    }
    .merit-about-items-image.box01{
        width: 45%;
        right: -2%;
        top: -35%;
        max-width: 190px;
    }
    .merit-about-items-image.box02{
        width: 55%;
        right: 4%;
        bottom: -32%;
        max-width: 220px;
    }
    .merit-about-items-image img{
        position: static;
        right: unset;
    }
}
.flat-container{
    margin-top: 60px;
}
.flat-main-text{
    font-size: clamp(2.4rem,2vw,4rem);
    color: #812a25;
    text-align: center;
    font-weight: 500;
}
.flat-main-text .text-sub{
    color: #333;
    display: block;
    font-weight: 400;
}

.flat-sub-text{
    margin-top: 30px;
    font-size: clamp(2.2rem,1.7vw,2.8rem);
    text-align: center;
    color: #812a25;
}
.flat-sub-text .text-strong{
    font-size: clamp(2.4rem,2.2vw,4rem);
    font-weight: bold;
}
.flat-sub-text .text-sub{
    color: #333;
    display: block;
    font-weight: 400;
}
.flat50-image{
    width: calc(100% + 40px);
    margin-inline: -12px;
}
@media screen and (max-width: 767px){
    .flat-container{
        margin-top: 80px;
    }
    .flat-main-text{
        font-size: clamp(2.1rem,2vw,4rem);
        line-height: 1.4;
        margin-top: 24px;
    }
    .flat-main-text .text-sub{
        letter-spacing: -.04rem;
        margin-bottom: 4px;
        font-size: clamp(1.6rem,2vw,4rem);
    }
    .flat-sub-text{
        letter-spacing: -.04rem;
        font-size: clamp(1.4rem, 1.2vw, 3.6rem);
    }
    .flat-sub-text .text-strong{
        font-size: clamp(2.2rem,2.2vw,4rem);
        font-weight: bold;
    }
    .flat50-image{
        width: calc(100% + 14px);
        margin-inline: -3px;
    }
}