@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;600;900&family=Shippori+Mincho:wght@400;500;600;700;800&family=Whisper&display=swap');

body{
    background-image: url("../images/long_aftersupport/top_bg_sky.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
}
.pc{
    display: block;
}
.sp{
    display: none;
}
.center{
    text-align: center;
}

@media screen and (max-width: 767px){
    body{
        background-image: url("../images/long_aftersupport/top_bg_sky_sp.png");
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: 0 0;
    }
    .pc{
        display: none!important;
    }
    .sp{
        display: block!important;
    }
}

.top-inner{
    text-align: center;
    padding-top: 100px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.top-text{
    text-align: center;
    font-size:calc(calc(20px + (45 - 20) * (100vw - 479px) / (1920 - 479)));
    color: white;
    text-shadow: 0 0 10px #3e7ba5,0 0 10px #3e7ba5,0 0 10px #3e7ba5;
    margin-bottom: 15px;
    font-weight: 500;
}
.box-4col{
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    gap: 2%;
    padding: 0px 15px;
}
.col-box{
    width: 1050px;
    margin: 0;
}
@media screen and (max-width: 767px){
    .top-inner{
        padding-top: 70px;
    }
    .box-4col{
        flex-wrap: wrap;
        gap: 4%;
        padding: 0px 20px;
    }
    .col-box{
        width: 40%;
        margin-top: 20px;
    }
    .top-bg{
        background-image: url("../images/long_aftersupport/top_bg_sky_sp.png");
        background-repeat: no-repeat;
        background-size: contain;
    }
}

/*FV*/
.fv-inner{
    width: 100%;
    height: 560px;
    margin-top: 80px;
}
.fv-inner2{
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.fv-family{
    width: 680px;
    position: relative;
    left: 50px;
    margin: 0;
}
.fv-text-box{
    width: 580px;
    position: relative;
    right: 60px;
    top: 100px;
}

.fv-text-ttl{
    font-size: calc(calc(20px + (42 - 25) * (100vw - 479px) / (1920 - 479)));
    margin-bottom: 30px;
    text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
    font-weight: 500;
}
.fv-text{
    margin: 10px 0;
    font-size: calc(calc(14px + (14 - 12) * (100vw - 479px) / (1920 - 479)));
    text-shadow: 0 0 10px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
    line-height: normal;
    font-weight: 500;
}
.dull-blue{
    color: #256476;
}
@media screen and (max-width: 767px){
    .fv-inner{
        margin-top: 80px;
        padding: 0 20px;
        height: auto;
    }
    .fv-inner2{
        display: block;
        position: static;
        text-align: center;
        width: 100%;
        margin: 0;
        }
    .fv-family{
        position: static;
        width: 100%;
    }
    .fv-text-box{ 
        position: static;
        text-align: center;
        margin: 0 auto;
        margin-top: -50px;
        width: 95%;
        }
    .fv-text-ttl{
        font-size: 5.0vw;
        margin-bottom: 10px;
    }
    .fv-text{
        font-size: 16px; 
    }
}

/* ベストバリューホームの価値保証 */
.cont-ttl{
    font-size: calc(calc(25px + (37 - 25) * (100vw - 479px) / (1920 - 479)));
    margin-bottom: 50px;
    text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
}
.middle-bg{
    background-image: url(../images/long_aftersupport/middle_bg_sky.png);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: 0px 130px;
}
.memo{
    text-align: center;;
    width: 980px;
    margin: 0 auto;
    max-width: 100%;
    padding: 0 15px;
}
.memo img{
    max-width: 100%;
}
@media screen and (max-width: 767px){
    .middle-bg{
        background-image: url(../images/long_aftersupport/middle_bg_sky.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: 0px 500px;
    }
    .memo{
        margin-top: -30px;
    }
    .memo p:nth-of-type(2){
        width: 80%;
    }
}

/*世代を越えて続く資産価値*/

.middle-box-inner{
    width: 100%;
    margin: 200px auto 0;
}
.middle-box-inner h3{
    margin-bottom: 50px;
}
.h1-border::after{
    content: "";
    background-color: #151515;
    width: 4%;
    height: 2px;
    display: block;
    margin: 1.5% auto;
}
.middle-box{
    width: 100%;
}
.middle-box img{
    width: 1100px;
}
@media screen and (max-width: 767px){
    .middle-box-inner{
        margin: 80px auto 0;
    }
    .middle-box-inner h3{
        padding: 0 20px;
        margin-bottom: 0px;
    }
    .middle-box-inner .col-box{
        width: 100%;
    }
}

/*建物がある限りの長期保証*/

.guarantee-inner{
    width: 100%;
    margin: 200px auto 0;
}
.guarantee-box{
    width: 1100px;
    padding: 0 15px;
    max-width: 100%;
    margin: 0 auto;
}
.guarantee-bg-blue{
    margin:  0 auto;
    width: 1100px;
    max-width: 100%;
    background-color:#dce8e8;
}
.new-guarantee{
    padding: 30px;
}
.new-guarantee p{
    font-size: calc(calc(16px + (21 - 16) * (100vw - 479px) / (1920 - 479)));
    margin-bottom: 2px;
}
.new-guarantee .big-txt{
    font-size: calc(calc(18px + (28 - 18) * (100vw - 479px) / (1920 - 479))); 
    background: linear-gradient(transparent 60%, #fff 60%);
    padding: 0px 5px;
}
.guarantee-bg-gray{
    margin:  0 auto;
    width: 1100px;
    max-width: 100%;
    background-color:#f4f4f4;
    padding: 30px 50px;
}
.guarantee-lead{
    font-size: calc(calc(12px + (14 - 12) * (100vw - 479px) / (1920 - 479)));
    text-align: center;
}
.gu-lead-yellow{
    color: #997700;
}
.gu-graph-wrapper{
    width: 100%;
    margin: 0 auto;
    position: relative;
    text-align: left;
}
.gu-graph-text{
    position: absolute;
    top: 60%;
    right: 0;
    font-size: calc(calc(12px + (14 - 12) * (100vw - 479px) / (1920 - 479)));
    width: 47%;
}
@media screen and (max-width: 767px){
    .guarantee-inner{
        margin: 80px auto 0;
        padding: 0 20px;
    }
    .guarantee-inner h3{
        margin-bottom: 20px;
    }
    .guarantee-box{
        padding: 0px;
    }
    .new-guarantee{
        padding: 15px;
    }
    .guarantee-bg-gray{
        padding: 25px 25px 5px;
    }
    .guarantee-lead{
        font-size: 16px;
        text-align: left;
    }
    .gu-graph-text{
        position: static;
        width: 100%;
    }
}

/*良質な家が適切に評価される仕組み*/
.graph-inner{
    width:100%;
    margin: 200px auto 0;
}
.graph-lead{
    font-size: calc(calc(12px + (14 - 12) * (100vw - 479px) / (1920 - 479)));
    text-align: center;
}
.before-after{
    margin: 0 auto;
    width: 1100px;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2%;
    padding: 0 15px;
}
.before-after p{
    width: 100%;
}
.before-after p:nth-of-type(2){
    width: 5%;
}
.graph-wrapper{
    width: 1100px;
    max-width: 100%;
    padding: 0 15px;
    margin: 15px auto 0;
}
.graph{
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.graph-pic{
    width: 100%;
}
.bottom-bg{
    background-image: url("../images/long_aftersupport/bottom_bg_sky.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 500px
}
@media screen and (max-width: 767px){
    .graph-inner{
        margin: 80px auto 0;
        padding: 0 15px;
    }
    .graph-inner h3{
        margin-bottom: 20px;
    }
    .graph-lead{
        font-size: 16px;
        text-align: left;
    }
    .before-after{
        display: block;
    }
    .before-after p{
        margin-bottom: 10px;
    }
    .before-after :nth-last-of-type(2){
        transform: rotate( 90deg );
    }
    .graph-wrapper{
        margin: 20px auto 0;
    }
    .graph{
        overflow-x: auto;
    }
    .graph-pic{
        min-width: 767px;
    } 
    .bottom-bg{
        background-image: url("../images/long_aftersupport/bottom_bg_sky_sp.png");
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: 0 1230px;
    }
}

/*建物長期保証の内容*/
.table-inner{
    width: 100%;
    margin: 200px auto 0;
}
.table-lead-ttl{
    font-size: calc(calc(19px + (23 - 19) * (100vw - 479px) / (1920 - 479))); 
}
.table-lead{
    font-size: calc(calc(12px + (14 - 12) * (100vw - 479px) / (1920 - 479)));
    text-align: center;
}
.table-wrapper{
    display: flex;
    width: 1100px;
    margin: 0 auto;
    max-width: 100%;
    padding: 0 15px;
    gap: 3%;
}
.common-table{
    width: 50%;
    border-collapse:separate;
    border-spacing:0px 5px;
    display: table;
}
.bvh-table{
    width: 50%;
    border-collapse:separate;
    border-spacing:0px 5px;
    display: table;
}
.common-ttl{
    font-size: clamp(20px, 1vw, 22px);
    background-color: #54a5bc;
    color: white;
    height: 60px;
    display: table-cell;
    vertical-align: middle;
}
.bvh-ttl{
    font-size: clamp(20px, 1vw, 22px);
    background-color: #f69c00;
    color: white;
    height: 60px;
    display: table-cell;
    vertical-align: middle;
}
.common-year{
    background-color: #e1f2f0;
    font-size: clamp(18px, 1vw, 20px);
}
.bvh-year{
    background-color: #fde8d9;
    font-size: clamp(18px, 1vw, 20px);
}
.common-price{
    font-size: calc(calc(14px + (16 - 14) * (100vw - 479px) / (1920 - 479)));
    background-color: #f6f6f6;
}
.bvh-price{
    font-size: calc(calc(14px + (16 - 14) * (100vw - 479px) / (1920 - 479)));
    background-color: #f6f6f6;
}
.common-price-blue{
    color: #1c6a81;
    font-size: calc(calc(21px + (32 - 21) * (100vw - 479px) / (1920 - 479)));
}
.bvh-price-orange{
    color: #bf7000;
    font-size: calc(calc(21px + (32 - 21) * (100vw - 479px) / (1920 - 479)));
}
.end-text{
    font-size: calc(calc(18px + (28 - 18) * (100vw - 479px) / (1920 - 479)));
    width: 100%;
    margin: 30px auto 0;
}
.end-text-line{
    background: linear-gradient(transparent 60%, #f4fc9c 60%);
    padding: 0px 5px;
}
.fig-box{
    width: 1100px;
    max-width: 100%;
    margin: 100px auto 0;
    padding: 0 15px;
    display: flex;
    justify-content: flex-end;
}
.bold-txt{
    font-size: calc(calc(23px + (33 - 23) * (100vw - 479px) / (1920 - 479)));
    font-weight: 600;
}
@media screen and (max-width: 767px){
    .table-inner{
        margin: 80px auto 0;
        padding: 0 20px;
    }
    .table-inner h3{
        margin-bottom: 20px;
    }
    .table-lead{
        font-size: 16px;
        text-align: left;
    }
    .table-wrapper{
        display: block;
        padding: 0 20px;
    }
    .common-table{
        width: 100%;
    }
    .bvh-table{
        width: 100%;
    }
    .end-text{
        margin: 20px auto 0;
        padding: 0 20px;
    }
    .fig-box{
        margin-top: 80px;
        padding: 0 20px;
        display: block;
    }
}

#footer small {
    padding: 20px 20px 50px;
    display: block;
    text-align: center;
}