@charset "UTF-8";
/* ==========
main
========== */
/* common */
.section {
    padding: 120px var(--contentPadding-sp);
}

/* common pc */
@media screen and (min-width: 960px) {
    .main {
        margin-top: 0;
    }

    .section {
        padding: 240px var(--contentPadding-pc);
    }
}/* pc 960px */

/* article header */
.article__header {
    width: 100%;
    height: calc(100svh - 76px);
    padding-top: 218px;
    position: relative;
    overflow: hidden;
}

.image--01 {
    width: 75.2%;
    top: 0;
    right: -16vw;
    pointer-events: none;
    position: absolute;
}

.image--02 {
    width: 98.1%;
    bottom: 2vw;
    right: 22vw;
    position: absolute;
}

.article__topic {
    text-align: center;
    font-family: "Darumadrop One";
    font-size: 4.4rem;
}

.article__catchcopy {
    margin-top: 60px;
}

.catchcopy__slogan {
    width: 178px;
    height: 24px;
    margin: 0 auto;
}

.catchcopy__txt {
    color: var(--primary-orange, #FF8940);
    text-align: center;
    font-family: "Zen Kaku Gothic New";
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 8px;
}

/* article header  pc */
@media screen and (min-width: 960px){
    .article__header {
        height: calc(100vh - 104px);
        padding-top: 200px;
        overflow: visible;
    }
    
    .image--01 {
        width: 35%;
        top: -7vw;
        right: 7vw;
    }

    .image--02 {
        width: 38.7%;
        bottom: -4vw;
        right: 59vw;
    }

    .article__topic {
        font-size: 6.8rem;
    }

    .article__catchcopy {
        margin-top: 43px;
    }

    .catchcopy__slogan {
        width:323px;
        height: 44px;
    }

    .catchcopy__txt {
        font-size: 1.8rem;
    }
}/* pc 960px */

/* .works */
.section--works {
    padding-bottom: 0;
    position: relative;
}

.image--03 {
    position: absolute;
    width: 32.5%;
    top: 7vw;
    right: 10vw;
}

.image--04 {
    position: absolute;
    width: 37.6%;
    top: 14vw;
    right: -8vw;
}

.works__list {
    margin: 0 auto;
    max-width: 550px;
}

.works__item {
    padding-top: 80px;
}

.works__content {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.works__title {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.054rem;
}

.works__tag {
    color: var(--primary-orange);
    font-size: 1rem;
    letter-spacing: 0.03rem;
    margin-top: 4px;
}

.works__catchcopy {
    font-size: 1.4rem;
    letter-spacing: 0.042rem;
}

.works__tool {
    font-size: 1.2rem;
    letter-spacing: 0.036rem;
}

/* .works pc */
@media screen and (min-width: 960px) {
    .image--03 {
        width: 18%;
        top: 6vw;
        right: 10vw;
    }

    .image--04 {
        width: 20.8%;
        top: 10vw;
        right: 0;
    }

    .works__list {
        max-width: 1080px;
    }

    .works__item {
        padding-top: 0;
        margin-top: 140px;
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        gap: 120px;
    }

    .works__img {
        max-width: 500px;
        height: auto;
    }

    .works__content {
        min-width: 265px;
        margin-top: 0;
        justify-content: center;
        gap: 32px;
    }

    .works__title {
        font-size: 2.6rem;
        letter-spacing: 0.078rem;
    }

    .works__tag {
        font-size: 1.2rem;
        letter-spacing: 0.036rem;
        margin-top: 5px;
    }

    .works__catchcopy {
        font-size: 1.8rem;
        letter-spacing: 0.054rem;
    }
}/* pc 960px */

/* .profile */
.profile__content {
    padding: 80px 3.17% 0;
    max-width: 769px;
    margin: 0 auto;
}

.profile__imgbox {
    position: relative;
}

.image--05 {
    position: absolute;
    width: 34.1%;
    top: 36vw;
    right: -6vw;
}

.image--06 {
    position: absolute;
    width: 26.4%;
    top: 49vw;
    right: 8vw;
}

.profile__img {
    max-width: 300px;
    width: 53.3vw;
    height: auto;
    margin: 0 auto;
}

.profile__txtbox {
    margin: 40px auto 0;
    max-width: 607px;
}

.profile__name {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.054rem;
}

.profile__txt {
    font-size: 1.4rem;
    letter-spacing: 0.042rem;
    margin-top: 34px;
}

.btn--profile {
    margin-top: 34px;
}

/* .profile pc */
@media screen and (min-width: 960px) {
    .profile__content {
        max-width: 860px;
        padding: 0;
        margin: 140px auto 0;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
    }

    .image--05 {
        width: 83.9%;
        top: 10vw;
        right: -13vw;
    }

    .image--06 {
        width: 64.5%;
        top: 17vw;
        right: -5vw;
    }

    .profile__img {
        max-width: 310px;
        margin: 0;
    }

    .profile__txtbox {
        margin-top: 0;
        max-width: 500px;
        width: 34.7vw;
    }

    .profile__name {
        font-size: 2.6rem;
        letter-spacing: 0.078rem;
    }

    .profile__txt {
        margin-top: 42px;
    }

    .btn--profile {
        margin-top: 42px;
    }
} /* pc 960px */