/*
このファイルでは、ホームページの見た目を整えています（CSS）。変更すると、見た目が崩れてしまう可能性がありますので、変更する際はご注意ください。
なお、CSSのプロパティの意味を https://tags.dot-company.jp で解説しています。
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

* {
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
}

.header {
    width: 500px;
    padding: 3rem;
    margin: 0 auto;
}
.header .image {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto 3rem auto;
    border-radius: 5rem;
    background: #f5f5f5;
}
.header .introduce h1 {
    text-align: center;
    font-size: 1.75rem;
}
.header .introduce p {
    margin: 3rem 0 0 0;
}

.main {
    width: 750px;
    margin: 5rem auto;
}
.main .headline h2 {
    text-align: center;
    font-size: 1.45rem;
    margin: 0 0 2rem 0;
}
.main .headline p {
    margin: 2rem 0 2rem 0;
}

.works .container {
    margin: 3rem 0;
    display: flex;
    align-items: flex-start;
}
.works .image {
    width: 40%;
    aspect-ratio: 1 / 1;
    padding: 0 2.5rem 0 0;
    background: #f5f5f5;
    border-radius: .25rem;
}
.works .content {
    width: 60%;
    padding: 0 0 0 2.5rem;
}
.works .content h3 {
    font-size: 1.25rem;
    margin: 0 0 2rem 0;
}

.contact {
    margin: 8rem 0;
}
.contact h2 {
    text-align: center;
    font-size: 1.45rem;
    margin: 0 0 2rem 0;
}
.contact address {
    text-align: center;
    font-style: normal;
}

.footer {
    width: fit-content;
    margin: 0 auto .5rem auto;
    display: flex;
}




/* ===== スマホ向け ===== */
@media screen and (max-width : 599px) {
    .header {
        width: 100%;
        padding: 3rem 1rem;
        margin: 0;
    }
    .header .image {
        display: block;
        width: 150px;
        height: 150px;
        margin: 0 auto 3rem auto;
        border-radius: 5rem;
        background: #f5f5f5;
    }
    .header .introduce h1 {
        text-align: center;
        font-size: 1.75rem;
    }
    .header .introduce p {
        margin: 3rem 0 0 0;
    }
    
    .main {
        width: 100%;
        margin: 5rem 0;
        padding: 0 1rem;
    }
    .main .headline h2 {
        text-align: center;
        font-size: 1.45rem;
        margin: 0 0 2rem 0;
    }
    .main .headline p {
        margin: 2rem 0 2rem 0;
    }
    
    .works .container {
        margin: 3rem 0;
        display: block;
    }
    .works .image {
        width: 100%;
        aspect-ratio: 1 / 1;
        padding: 0;
        background: #f5f5f5;
        border-radius: .25rem;
    }
    .works .content {
        width: 100%;
        padding: 2.5rem 0 0 0;
    }
    .works .content h3 {
        font-size: 1.25rem;
        margin: 0 0 2rem 0;
    }
    
    .contact {
        margin: 8rem 0;
    }
    .contact h2 {
        text-align: center;
        font-size: 1.45rem;
        margin: 0 0 2rem 0;
    }
    .contact address {
        text-align: center;
        font-style: normal;
    }
    
    .footer {
        width: fit-content;
        margin: 0 auto .5rem auto;
        display: flex;
    }
}