@charset "utf-8";

@media screen and (max-width:440px) {
html{
    max-width: 100vw;
}  
body{
    width: 100vw;
}
main{
    width: 100vw;
}
nav{
    width: 100vw;
}
nav .logo{
    padding: 0 20px;    
}
nav .menu-wrap{
    width: 100vw;
}
#mainvisual .main-wrap{
    padding: 140px 20px;
}
.cont1{
    width: 100vw;
    height: 210px;
}
.cont1 .text{
    padding: 44px 20px;
}
.cont2 .cont2-wrap{
    padding:100px 20px;
}

#place{
    width: 100vw;
    padding: 52px 0 52px 20px;
}
.cont4-wrap .img-slick div img{
    width: 340px;
}
.cont5{
    padding: 0 20px;
}
#sevice{
    padding: 100px 20px;
}
.cont6-wrap li img{
    width: 100%;
}
footer{
    width: 100vw;
    padding:56px 20px;
    height: 360px;
}
}

@media screen and (max-width:400px) {
    .cont4-wrap .img-slick div img{
        width: 320px;
    }
}

@media screen and (max-width:380px) {
    .cont4-wrap .img-slick div img{
        width: 300px;
    }
    #mainvisual{
        width: 100vw;
    }
    #mainvisual .main-wrap .title{
        letter-spacing: 0.05cm;
        font-weight: 700;
        font-size: 30px;
    }
    .cont1{
        width: 100%;
        background-color: #111;
        height: 192px;
    }
    .cont1 .text p{
        font-size: 16px;
        margin-bottom: 4px;
        font-weight: 300;
    }
    .cont3-wrap .imgwrap .contens{
        width: 100%;
        background-size: cover;
    }
    .cont3-wrap .imgwrap .contens .text .num{
        font-size: 36px;
        font-weight: 500;
        color: #fff;
        margin-bottom: 16px;
    }
    .cont3-wrap .imgwrap .contens .text .title{
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
    }
}