@charset "utf-8";
/*==========================
section--about
==========================*/
.section--about {
    margin-top: 40px;
}

/* section--about pc */
@media screen and (min-width:769px) {
    .section--about {
       margin-top: 100px;
    }
}/* pc 769px */

/*==========================
skill
==========================*/
.section--skill {
    margin-top: 60px;
    background-image: url(../images/bg_gradation_sp.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.section--skill div {
    padding: 20px 8%;
}

.topic {
    color: var(--primary-black);
    font-size: 1.8rem;
    font-weight: 500;
}

.skill__sp__img {
    margin-top: 30px;
}

.skill__pc__img {
    display: none;
}

/* skill pc */
@media screen and (min-width:769px) {
    .section--skill {
        margin-top: 130px;
        background-image: url(../images/bg_gradation.png);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .section--skill div {
        padding: 50px 6.7% 60px;
    }

    .topic {
        font-size: 2.5vw;
    }

    .skill__sp__img {
        display: none;
    }

    .skill__pc__img {
        display: block;
        margin-top: 50px;
        width: 100%;
    }
}/* pc 769px */

/*==========================
important
==========================*/
.important__list {
    margin-top: 40px;
}

.important__item {
    margin-top: 50px;
    font-weight: 400;
}

.important__item:first-of-type {
    margin-top: 0;
}

.important__mainTopic {
    font-size: 1.8rem;
    text-align: center;
}

.important__txt {
    font-size: 1.6rem;
    line-height: 1.7;
    margin-top: 30px;
}

.important__img {
    text-align: center;
}

.important__img img {
    margin-top: 30px;
}

.important__img1 {
    width: 28%;
}

.important__img3 {
    width: 59%;
}

/* works pc */
@media screen and (min-width:769px) {
    .section--important {
        margin-top: 130px;
    }

    .important__list {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-top: 50px;
    }

    .important__item {
        flex: 1;
        margin-top: 0;
    }

    .important__mainTopic {
        font-size: 2.2vw;
    }

    .important__txt {
        display: block;
        width: 90%;
        font-size: 1.2vw;
        margin: 30px auto;
    }

    .important__img img {
        vertical-align: middle;
    }
}/* pc 769px */