@charset "UTF-8";

/*
ブレイクポイント
SP 〜519px
tab 520px ~ 959px (min-width:520px)
pc 960px~ (min-width:960px)
*/

/*======================
mv
======================*/
.mv {
    position: relative;
    height: 100vh;
    width: 100%;
    background-image: url(../img/mv_sp.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

.mv .mv_copy {
    position: absolute;
    left: 5%;
    top: 20%;
    color: #fff;
}

/*======================
works
======================*/
.works {
    margin-bottom: var(--section-gutter);
}

.works .works_box {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
}

.works .works_box li {
    margin-bottom: calc(var(--gutter-base)*3);
}

/*======================
about
======================*/
.about {
    margin-bottom: var(--section-gutter);
}

.about .about_box .about_img {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    border-radius: 50%;
    margin-bottom: calc(var(--gutter-base)*3);
}

.about .about_box .about_img img {
    object-fit: contain;
    width: 250px;
    height: 250px;
    border-radius: 50%;
}

.about .about_box .about_text h4 {
    font-size: var(--size-xl);
    line-height: 0.8;
    font-weight: 300;
    margin-bottom: calc(var(--gutter-base)*3);
    text-align: center;
}

.about .about_box .about_text h4 span {
    font-size: var(--size-lg);
    font-weight: 300;
}

/* ===============ここからmin-width:520px=============== */
@media screen and (min-width:520px) {}

/* ===============ここまでmin-width:520px=============== */

/* ===============ここからmin-width:960px=============== */
@media screen and (min-width:960px) {

    /*======================
    mv
    ======================*/
    .mv {
        background-image: url(../img/mv_pc.jpg);
    }

    /*======================
    works
    ======================*/
    .works {
        margin-bottom: var(--section-gutter-pc);
    }

    .works .works_box {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        max-width: 1000px;
    }

    .works .works_box li {
        margin-bottom: calc(var(--gutter-base)*3);
    }

    /*======================
    about
    ======================*/
    .about {
        margin-bottom: var(--section-gutter-pc);
    }

    .about .about_box {
        display: flex;
        gap: calc(var(--gutter-base)*3);
        align-items: center;
    }

    .about .about_box .about_img {
        margin-bottom: 0;
    }

    .about .about_box .about_text h4 {
        text-align: left;
    }
}

/* ===============ここまでmin-width:960px=============== */