@charset "UTF-8";

html {
    font-size: 100%;
}

body {
    color: #2b2a27;
    font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Meiryo", sans-serif;
}

img {
    max-width: 100%;
}

ul {
    list-style: none;
}

a {
    color : #2b2a27;
}


#mainvisual img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center top;
    margin-bottom: 80px;
}

.text {
    text-align: center;
}
.text h1 {
    margin-bottom: 20px;
}
.text p {
    margin-bottom: 80px;
}
.flex{
    display: flex;
    margin-bottom: 60px;
}   
.flex li {
    width: calc(100% / 3);
}
.flex li img{
    width: 100%;
    height: 500px;
    object-fit: cover;
    vertical-align: bottom;
}
.text a {
    display: inline-block;
    text-decoration: none;
    border: 1px solid #2b2a27;
    padding: 18px 65px;
    font-size: 0.875rem;
    margin-bottom: 80px;
}
#footer {
    text-align: center;
}
#footer .sns {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
#footer .sns li {
    font-size: 0.75rem;
    margin: 0 10px;
}
#footer p {
    font-size: 0.75rem;
    margin-bottom: 20px;
}

@media screen and (max-width: 834px) {
    .flex {
        flex-direction: column;
    }
    
    .flex li {
        width: 100%;
    }
}