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

/* article header */
.article__content {
    margin-top: 70px;
    padding: 0 var(--contentPadding-sp);
}

.article__title {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.066rem;
}

.article__tag {
    color: var(--primary-orange);
    font-size: 1.2rem;
    letter-spacing: 0.036rem;
    margin-top: 4px;
}

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

/* article header pc */
@media screen and (min-width: 960px) {
    .article__header {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding: 0 var(--contentPadding-pc);
    }

    .mainImg {
        width: 52.8vw;
    }

    .article__content {
        width: 24.5vw;
        margin: 0 -32px 40px;
        padding: 0;
        z-index: 10;
    }

    .article__title {
        font-size: 3.4rem;
        font-weight: 700;
        letter-spacing: 0.1rem;
    }

    .article__tag {
        color: var(--primary-orange);
        font-size: 1.4rem;
        letter-spacing: 0.042rem;
        margin-top: 8px;
    }

    .article__txt {
    font-size: 1.8rem;
    letter-spacing: 0.054rem;
    margin-top: 36px;
}
}/* pc 960px */

/* overview */
.section--overview {
    padding: 70px var(--contentPadding-sp) 100px;
}

.overview__item {
    margin-top: 38px;
}

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

.overview__topic {
    width: 100px;
    padding: 6px 19px;
    background-color: var(--primary-orange);
    border-radius: 50px;
    color: var(--primary-white);
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 0.036rem;
}

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

.btnbox {
    margin-top: 70px;
}

.btn--site {
    width: 131.2px;
    margin: 0 auto;
}

.btnbox__pass {
    width: fit-content;
    margin: 18px auto 0;
    padding: 4px 9px;
    border: 1px solid var(--primary-black);
    border-radius: 10px;
    font-size: 1.2rem;
    letter-spacing: 0.036rem;
}

/* overview pc */
@media screen and (min-width: 960px) {
    .section--overview {
        padding: 120px var(--contentPadding-pc);
    }

    .overview__list {
        max-width: 1080px;
        margin: 0 auto;
    }

    .overview__item {
        margin-top: 80px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 100px;
    }

    .overview__topic {
        width: 10vw;
        min-width: 120px;
        max-width: 144px;
        padding: 8px 0;
        font-size: 1.4rem;
        letter-spacing: 0.042rem;
    }

    .overview__txt {
        font-size: 1.6rem;
        letter-spacing: 0.048rem;
        margin-top: 0;
    }

    .btnbox {
        margin-top: 80px;
    }

    .btn--site {
        width: 149.2px;
    }
}/* pc 960px */

/* eyeCatch */
.section--eyeCatch {
    margin: 20px 0;
}

.eyeCatch__catchCopy {
    margin: 140px 0 20px;
    position: relative;
}

.image--01 {
    position: absolute;
    width: 29.3%;
    top: -26vw;
    left: -4vw;
}

.image--02 {
    position: absolute;
    width: 26.7%;
    top: 4vw;
    right: -5vw;
}

.image--03 {
    position: absolute;
    width: 32%;
    top: 13vw;
    right: 5vw;
}

.catchcopy {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.054rem;
}

/* eyeCatch pc */
@media screen and (min-width: 960px) {
    .section--eyeCatch {
        margin: 80px 0 0;
    }

    .eyeCatch__img img {
        width: 100%;
    }

    .eyeCatch__catchCopy {
        margin: 200px 0 120px;
    }

    .image--01 {
        width: 14.6%;
        top: -8vw;
        left: 15vw;
    }

    .image--02 {
        width: 13%;
        top: 1vw;
        right: 21vw;
    }

    .image--03 {
        width: 16.7%;
        top: -6vw;
        right: 13vw;
    }

    .catchcopy {
        font-size: 2.8rem;
        font-weight: 500;
        letter-spacing: 0.084rem;
    }
}/* pc 960px */

/* designProcess */
.section--designProcess {
    padding: 140px var(--contentPadding-sp) 100px;
}

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

.topic__txt {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 4px;
}

.designProcess__list {
    margin-top: 70px;
}

.designProcess__item {
    margin-top: 46px;
}

.designProcess__item::after{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--primary-beige);
    margin-top: 46px;
} 

.designProcess__topic {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.045rem;
    margin-bottom: 30px;
    padding: 0 10px;
}

.designProcess__txtbox {
    padding: 0 10px;
}

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

.color {
    color: var(--primary-orange);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.045rem;
}

.bold {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.045rem;
}

.designProcess__point {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.045rem;
}

.designProcess__detail {
    font-size: 1.2rem;
    letter-spacing: 0.036rem;
    margin: 12px 0 38px;
}

.designProcess__item:last-of-type::after {
    display: none;
}

.space {
    margin-left: 1em;
}

/* designProcess pc */
@media screen and (min-width: 960px) {
    .section--designProcess {
        padding: 120px var(--contentPadding-pc);
    }

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

    .topic__txt {
        font-size: 4.8rem;
        margin-top: 4px;
    }

    .designProcess__list {
        margin-top: 120px;
    }

    .designProcess__item {
        margin-top: 105px;
        padding: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
    }

    .designProcess__item::after{
        margin-top: 0;
        position: absolute;
        bottom: -36px;
    } 

    .designProcess__topic {
        font-size: 1.8rem;
        letter-spacing: 0.054rem;
        margin-bottom: 0;
        padding: 0 0 0 54px;
        width: 17vw;
        min-width: 147px;
    }

    .designProcess__txtbox {
        width: 54.2vw;
    }

    .designProcess__txt {
        font-size: 1.4rem;
        letter-spacing: 0.042rem;
        margin: 0 0 32px 0;
    }

    .color {
        font-size: 2rem;
        letter-spacing: 0.06rem;
    }

    .bold {
        font-size: 2rem;
        letter-spacing: 0.06rem;
    }

    .designProcess__point {
        font-size: 2rem;
        letter-spacing: 0.06rem;
    }

    .designProcess__detail {
        font-size: 1.4rem;
        letter-spacing: 0.042rem;
    }
    
    .designProcess__item:nth-of-type(4) .designProcess__detail {
        margin: 0 0 32px 0;
    }
    
    .designProcess__item:nth-of-type(5) .designProcess__detail {
        margin: 6px 0 32px;
    }

    .btnbox:last-of-type {
        margin-top: 88px;
    }
}/* pc 960px */