@charset "utf-8";

/*******************************
トップページ画像
*/
.top-img{
    padding: 0 15px;
    max-width: 1890px;
    margin: 0 auto;
    a{
        transition: .2s;
        &:hover{
            opacity: .8;
        }
    }
    .top-img-text-01{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .top-img-miryoku-list
        li{
            aspect-ratio: 45 / 32;
            a{
                color: #fff;
                width: 100%;
                height: 100%;
                position: relative;
                display: block;
                background-position: center center;
                background-size: cover;
            }
            &.miryoku-link-01{
                a{
                    background-image: url(img/img_02.png);
                }
                
            }
            &.miryoku-link-02{
                a{
                    background-image: url(img/img_03.png);
                }
                
            }
            &.miryoku-link-03{
                a{
                    background-image: url(img/img_04.png);
                }
            }
            .miryoku-text-wrap{
                display: flex;
                flex-direction: column;
                position: absolute;
                bottom: 50px;
                left: 25px;
            }
            span{
                display: block;
            }
            .miryoku-text-01{
                font-size: 13px;
            }
            .miryoku-text-02{
                font-size: 24px;
            }
            .miryoku-text-03{
                font-size: 11px;
            }
        }
    }
    .top-img-right-text{
        text-align: center;
        img{
            max-width: 100%;
            height: auto;
            display: inline;
        }
    }
@media screen and (max-width: 799px) {
    .top-img-text-01.pc{
        display: none;
    }
    .top-img{
        padding-top: 20px;
        .top-img-left,
        .top-img-miryoku-list li{
            margin-bottom: 20px;
        }
    }
    .top-img-text-01.sp{
        justify-content: center;
        flex-wrap: wrap;
        margin: 10px 0;
        gap: 20px;
    }
}
@media screen and (min-width: 800px) {
    .top-img-text-01.sp{
        display: none;
    }
}
@media (min-width: 800px) and (max-width: 1599px) {
    .top-img-text-01.pc{
        justify-content: center;
        margin: 50px 0;
        gap: 20px;
    }
    .top-img-left picture{
        img{
            width: 100%;
            height: auto;
        }
    }
    .top-img-right{
        .top-img-miryoku-list{
            display: flex;
            justify-content: space-between;
            li{
                width: 33%;
            }
        }
    }
}
@media screen and (max-width: 1599px) {
    .top-img{
        display: grid;
        grid-template-columns: 1fr 20px;
        .top-img-wrap{
            grid-column: 1 / 2;
        }
        .top-img-right-text{
            grid-column: 2 / 3;
            width: 20px;
            text-align: center;
        }
    }
}
@media screen and (min-width: 1600px) {
    .top-img{
        display: flex;
        .top-img-left{
            position: relative;
        }
        .top-img-wrap{
            width: calc(100% - 35px);
            display: flex;
            justify-content: space-between;
        }
        .top-img-left{
            width: 75%;
        }
        .top-img-right{
            width: 24%;;
            .top-img-miryoku-list{
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                li{
                    width: 100%;
                }
            }
        }
        .top-img-text-01.pc{
            position: absolute;
            left: 0;
            bottom: 10px;
            width: 48%;
        }
        .top-img-right-text{
            width: 35px;
            text-align: right;
            img{
                display: inline;
            }
        }
    }
}
/*トップページ画像　ここまで*/

/*******************************
トップ画像　下　テキスト
*/
.top-img-sita{
    width: 90%;
    margin: 70px auto;
    .top-img-sita-left{
        font-size: 30px;
        text-align: center;
    }
    .top-img-sita-right{
        font-size: 18px;
        .link-list{
            display: flex;
            justify-content:flex-start;
            gap: 10px;
            margin-top: 20px;
        }
    }
}
@media screen and (max-width: 799px) {
    .top-img-sita{
        .top-img-sita-right{
            br{
                display: none;
            }
        }
    }
}
@media screen and (min-width: 800px) {
    .top-img-sita{
        display: flex;
        max-width: 1150px;
        .top-img-sita-left{
            width: 350px;
        }
        .top-img-sita-right{
            width: calc(100% - 365px);
            padding:0 30px;
        }
    }
}
/*トップ画像　下　テキスト ここまで*/

/*******************************
お客様の声
*/
.top-voice{
    position: relative;
    padding: 0 15px;
    max-width: 1890px;
    margin: 0 auto;
    .top-voice-text{
        dt{
            font-size: 24px;
            margin-bottom: 30px;
        }
        dd{
            font-size: 16px;
            margin-bottom: 30px;
        }
    }
    .top-voice-profile{
        padding-top: 24px;
        .top-voice-profile-inner{
            display: flex;
            dt{
                width: 120px;
            }
            dd{
                width: calc(100% - 120px);
                padding-left: 24px;
                font-size: 12px;
                span{
                    font-size: 16px;
                }
            }
        }
    }
}
@media screen and (max-width: 799px) {
    .top-voice{
        padding-top: 50px;
        padding-bottom: 50px;
        h2{
            margin-bottom: 30px;
        }
        .top-voice-right{
            .top-voice-profile{
                border-top: 1px solid #000;
                width: 100%;
                margin-top: 55px;
                
            }
        }
    }
}
@media (min-width: 800px) and (max-width: 1599px) {
    .top-voice{
        padding-top: 50px;
        padding-bottom: 50px;
        h2{
            margin-bottom: 50px;
        }
        .top-voice-left{
            display: grid;
            grid-template-columns: 5fr 1fr;
            .img{
                img{
                    width: 100%;
                    height: auto;
                }
            }
            .text{
                font-size: 2.375vw;
                writing-mode: vertical-rl;
                display: flex; 
                align-items: center;
                padding: 1em;  
            }
        }
        .top-voice-right{
            display: flex;
            align-items: end;
            padding-bottom: 20px;
            .top-voice-text{
                width: calc(100% - 490px);
            }
            .top-voice-profile{
                width: 490px;
                margin-left: 20px;
                margin-bottom: 20px;
                .top-voice-profile-inner{
                    border-left: 1px solid #000;
                    padding-left: 20px;
                }
            }
        }
    }
}
@media screen and (min-width: 1600px) {
    .top-voice{
        padding-top: 100px;
        padding-bottom: 100px;
        h2{
            position: absolute;
            right: 422px;
            top: 100px;
        }
        .top-voice-content{
            display: grid;
            grid-template-columns: 1fr 490px;
        }
        .top-voice-left{
            display: grid;
            grid-template-columns: 5fr 1fr;
            .text{
                font-size: 38px;
                writing-mode: vertical-rl;
                display: flex; 
                align-items: center;
                padding: 1em;  
            }
        }
        .top-voice-right{
            display: flex;
            flex-wrap: wrap;
            align-content: flex-end;
            .top-voice-text{
                width: 100%;
            }
            .top-voice-profile{
                border-top: 1px solid #000;
                width: 100%;
                margin-top: 55px;
                
            }
        }
    }
}
/*お客様の声 ここまで*/



/*******************************
周辺環境
*/
.top-location{
    position: relative;
    padding: 50px 15px;
    max-width: 1890px;
    margin: 0 auto;
    .top-location-right{
        h3{
            margin-bottom: 30px;
            font-weight: 600;
        }
        p{
            margin-bottom: 30px;
        }
    }
    .top-location-img-wrap{
        figcaption{
            font-size: 13px;
        }
    }
    .kosodatesien{
        width: 100%;
        margin-top: 50px;
    }
}
@media screen and (max-width: 799px) {
    .top-location{
        h2{
            margin-bottom: 30px;
        }
        .top-location-right{
            h3{
                font-size: clamp(18px, 3vw, 30px);
            }
            p{
                font-size: 16px;
            }
            .top-location-img-wrap{
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 5px;
                margin-top: 50px;
            }
        }
    }
}
@media screen and (min-width: 800px) {
    .top-location{
        .top-location-right{
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 90px;
            h3{
                font-size: 1.88vw;
            }
            p{
                font-size: 1vw;
            }
            .top-location-text-wrap{
                width: 50%;
            }
            .top-location-img-wrap{
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 10px;
                width: 50%;
                padding-left: 20px;
            }
        }
        .kosodatesien{
            margin-top: 100px;
            text-align: center;
            img{
                display: inline;
            }
        }
    }
}
@media (min-width: 800px) and (max-width: 1599px) {
    .top-location{
        h2{
            margin-bottom: 50px;
        }
    }
 
}
@media screen and (min-width: 1600px) {
    .top-location{
        padding-top: 100px;
        padding-bottom: 100px;
        display: grid;
        grid-template-columns: 245px 1fr;
        h2{
            padding: 0 35px;
        }
        .top-location-right{
            display: flex;
            flex-wrap: wrap;
            h3{
                font-size: 30px;
            }
            p{
                font-size: 16px;
            }
            .top-location-text-wrap{
                width: 700px;
            }
            .top-location-img-wrap{
                width: calc(100% - 700px);
            }
        }
    }
}
/*周辺環境　ここまで*/


/*******************************
町並み
*/
.top-landscape{
    position: relative;
    padding: 0 15px;
    max-width: 1890px;
    margin: 0 auto;
    .top-landscape-text{
        p{
            font-size: 16px;
            margin-bottom: 30px;
        }
        .top-landscape-text-s{
            font-size: 12px;
        }
    }
}
@media screen and (max-width: 799px) {
    .top-landscape{ 
        padding-top: 50px;
        padding-bottom: 50px;
        h2{
            margin-bottom: 30px;
        }
        .top-landscape-left{
            .text{
                font-size: clamp(18px, 3vw, 30px);;
            }
        }
        .top-landscape-right{
            margin-top: 20px;
        }
    }
}
@media screen and (min-width: 800px) {

}
@media (min-width: 800px) and (max-width: 1599px) {
    .top-landscape{
        padding-top: 50px;
        padding-bottom: 50px;
        h2{
            margin-bottom: 50px;
        }
        .top-landscape-left{
            display: grid;
            grid-template-columns: 3fr 1fr;
            .img{
                img{
                    width: 100%;
                    height: auto;
                }
            }
            .text{
                font-size: 2.125vw;
                writing-mode: vertical-rl;
                display: flex; 
                align-items: center;
                padding: 1em;  
            }
        }
        .top-landscape-right{
            margin-top: 50px;
            padding-bottom: 20px;
        }
    }
 
}
@media screen and (min-width: 1600px) {
    .top-landscape{
        padding-top: 100px;
        padding-bottom: 100px;
        display: grid;
        grid-template-columns: 1fr 715px;
        h2{
            position: absolute;
            right: 540px;
            top: 100px;
        }
        .top-landscape-left{
            display: grid;
            grid-template-columns: 3.5fr 1fr;
            .text{
                font-size: 34px;
                writing-mode: vertical-rl;
                display: flex; 
                align-items: center;
                padding: 1em;  
            }
        }
        .top-landscape-right{
            display: flex;
            flex-wrap: wrap;
            align-content: flex-end;
            padding: 0 30px;
            p{
                width: 100%;
            }

        }
    }

}
/*町並み　ここまで*/


/*******************************
住宅プラン
*/
.top-plan{
    position: relative;
    padding: 50px 15px;
    max-width: 1890px;
    margin: 0 auto;
    .top-plan-right{
        h3{
            margin-bottom: 30px;
            font-weight: 600;
        }
        p{
            margin-bottom: 30px;
        }
    }
}
@media screen and (max-width: 799px) {
    .top-plan{
        h2{
            margin-bottom: 30px;
        }
        .top-plan-right{
            h3{
                font-size: clamp(18px, 3vw, 30px);
            }
            p{
                font-size: 16px;
            }
        }
        .top-plan-img{
            margin-top: 30px;
        }
    }

}
@media screen and (min-width: 800px) {
    .top-plan{
        .top-plan-right{
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 90px;
            h3{
                font-size: 1.88vw;
            }
            p{
                font-size: 1vw;
            }
            .top-plan-text-wrap{
                width: 30%;
            }
            .top-plan-img{
                width: 70%;
                padding-left: 20px;
            }
        }
    }

}
@media (min-width: 800px) and (max-width: 1599px) {
 .top-plan{
        h2{
            margin-bottom: 50px;
        }
    }
}
@media screen and (min-width: 1600px) {
    .top-plan{
        padding-top: 100px;
        padding-bottom: 100px;
        display: grid;
        grid-template-columns: 245px 1fr;
        h2{
            padding: 0 35px;
        }
        .top-plan-right{
            display: flex;
            flex-wrap: wrap;
            h3{
                font-size: 30px;
            }
            p{
                font-size: 16px;
            }
            .top-plan-text-wrap{
                width: 425px;
            }
            .top-plan-img{
                width: calc(100% - 425px);
            }
        }
    }
}
@media (min-width: 1600px) and (max-width: 1919px) {
 
}
@media screen and (min-width: 1920px) {

}
/*住宅プラン　ここまで*/



/*
slickslider
お客様の声
*/
.slick-arrow{
    position: absolute;
    top: 0;
    z-index: 99;
    &:hover{
        cursor: pointer;
        opacity: .8;
    }
}
.slick-arrow.prev-arrow{
    right: 50px;
    left: auto;
}
.slick-arrow.next-arrow{
    right: 0;
}
@media (min-width: 800px) and (max-width: 1599px) {
    .slick-arrow{
        position: absolute;
        top: -80px;

    }
}