/*======
共通
======*/

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap');

body {
    font-family: 'Sora', sans-serif;
}
a {
    color: #000;
    text-decoration: none;
}

.selector-for-some-widget {
    box-sizing: content-box;
}

section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.sec-title {
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}

.sec-title h3 {
    display: inline-block;
    border-bottom: solid 2px #000;
    margin-bottom: 20px;
}

img {
    width: 100%;
}

.btn {
    padding: 10px 20px;
}

h1 span,
h2 span {
    margin-right: 5%;
}

/*======
header
======*/

.navbar .nav-link {
    color: #fff !important;
}

/*======
hero
======*/

.hero {
    background-image: url(../img/mainvisual1.avif);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    z-index: 5;
    margin-bottom: 60px;
}

.hero h1 {
    text-shadow: 2px 2px 2px #fff;
}

.hero::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(1 ,1 , 1, 0.2);
    z-index: -5;
}

/*======
skill 
======*/

#skill {
    padding-bottom: 60px;
    background-color: lightgray;
}


#skill .card {
    margin-bottom: 20px;
    border: solid 1px #333;
    position: relative;
}

#skill .card-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
}

#skill .text-muted {
    font-size: 0.75rem;
}

/*======
works 
======*/

#works .card {
    max-width: 1024px;
    height: 250px;
    border: solid 1px #000;
}

#works .row {
    align-items: flex-start;
}

.works-img  img {
    object-fit: cover;
    max-height: 220px;
    border: solid 1px #333;
}

/*======
contact 
======*/

form {
    align-items:flex-start;
}

form label {
    margin-bottom: 0.5rem;
}

.form1,
.form2 {
    width: 50%;
}

.form3,
.form4 {
    width: 25%;
}

/*======
footer
======*/

#footer {
    height: 60px;
}

.copy-right {
    font-size: 1.25rem;
    color: #fff;
    text-align: center;
}

/*======
responsive 
======*/
@media screen and (max-width : 768px) {
    /*======
    共通
    ======*/

    .container {
        max-width: 90%;
    }

    section {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .sec-lead {
        text-align: left;
    }

    /*======
    works
    ======*/
    #works .revers {
        flex-direction: column-reverse;
    }
    #works .card {
        height: auto;
    }

    /*======
    contact
    ======*/
    .form1,
    .form2 {
        width: 100%;
    }
    .form3,
    .form4 {
        width: 50%;
    }

}