@charset "UTF-8";

/* =================
article__header
=================== */
article{
    max-width: 1440px;
    margin: 0 auto;
}

.article__header{
    padding: 120px var(--contentpaddingpc) 0;
}

h1{
    font-size: 3rem;
    text-align: left;
}

.store{
    font-weight: 700;
    margin-left: 20px;
}

.works__item{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
}

.works__item img{
    width: 530px;
    padding: 42px 4%;
    margin-top: -62px;
}

.content{
    text-align: left;
    margin: 50px 0 0 45px;
}

.content p:not(:first-of-type){
    margin-top: 10px;
}

.url span{
    margin-left: 20px;
}

.content__group{
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.content__group span{
    margin-left: 20px;
}

.content__txt{
    width: 51.3%;
    line-height: 2;
    text-align: left;
    margin: 100px auto 0;
}

/* article__header sp */
@media screen and (max-width:800px) {
    h1{
        font-size: 1.8rem;
    }
    .works__item{
        display: block;
    }
    .works__item img{
        padding: 36px 4%;
        margin-top: 30px;
    }
    .content{
        padding: 0;
        margin: 25px 0 0 30px;
    }
    .content__txt{
        width: 80%;
        margin: 100px auto 40px;
    }
}

/* =================
process
================== */
.section--process{
    max-width: 1440px;
    margin: 0 auto;
    padding: 120px var(--contentpaddingpc) 0;
}

h2{
    font-size: 3.5rem;
    text-align: left;
    border-bottom: 3px solid rgba(124, 133, 161, 0.4);
    padding: 0 0 20px;
}

h2 span{
    color: var(--primary-orange);
}

.process__group:first-of-type{
    margin-top: 20px;
}

.process__group{
    display: flex;
    padding: 50px 5%;
    border-bottom: 2px dashed rgba(124, 133, 161, 0.4);
    margin: 0 auto;
}

h3{
    font-size: 1.6rem;
    font-weight: 700;
    width: 36%;
    text-align: left;
    border-right: 1px solid var(--primary-gray);
    padding: 0 0 0 30px;
}

.process__group ul{
    width: 60%;
    text-align: left;
    padding: 0 0 0 30px;
}

.process__group li:not(:first-of-type){
    margin-top: 10px;
}

/* process sp */
@media screen and (max-width:700px) {
    .section--process{
        padding: 80px var(--contentpadding) 0;
    }
    h2{
        font-size: 2.5rem;
    }
    .process__group:first-of-type{
        margin-top: 14px;
    }
    .process__group{
        display: block;
        padding: 34px 5%;
    }
    h3{
        width: 100%;
        border-right: none;
        padding: 0;
    }
    .process__group ul{
        width: 96%;
        padding: 0;
        margin: 30px auto 0;
    }
}

/* ==================
concept
=================== */
.section--concept{
    max-width: 1440px;
    margin: 0 auto;
    padding: 100px var(--contentpaddingpc) 0;
}

.concept__group:first-of-type{
    margin-top: 20px;
}

.concept__group{
    display: flex;
    padding: 50px 5%;
    border-bottom: 2px dashed rgba(124, 133, 161, 0.4);
    margin: 0 auto;
}

.concept__group ul{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
    padding: 0 0 0 30px;
}

.concept__group li{
    background-color: rgba(157, 146, 146, 0.45);
    color: #fff;
    font-size: 1.4rem;
    width: 154px;
    padding: 7px 8px;
    border-radius: 8px;
}

.design__image,
.design__concept,
.color__concept{
    width: 60%;
}

.design__image p{
    margin-top: 10px;
}

.concept__group p:not(:first-of-type){
    margin-top: 10px;
}

.design__image p,
.design__concept,
.color__txt{
    text-align: left;
    padding: 0 0 0 30px;
}

.color__group{
    display: flex;
    justify-content: center;
    align-items: center;
}

.color__group li{
    font-size: 1.3rem;
    color: #fff;
    width: 80px;
    height: 80px;
    padding: 0;
    border-radius: 0px;
}


/* concept sp */
@media screen and (max-width:700px) {
    .section--concept{
        padding: 80px var(--contentpadding) 0;
    }
    .concept__group:first-of-type{
        margin-top: 14px;
    }
    .concept__group{
        display: block;
        padding: 34px 5%;
    }
    .concept__group ul{
        width: 96%;
        padding: 0;
        margin: 30px auto 0;
    }
    .design__image,
    .design__concept,
    .color__concept{
        width: 96%;
        padding: 0;
    }
    .design__image,
    .design__concept,
    .color__txt{
        margin-top: 30px;
    }
    .design__image p,
    .design__concept,
    .color__txt{
        width: 96%;
        padding: 0;
        margin: 30px auto 0
    }

}

/* ==============
btn__group
================ */
.btn__group{
    padding: 100px var(--contentpaddingpc) 120px;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 30px;
    margin-left: auto;
}

.works__btn{
    background-color: rgba(157, 146, 146, 0.45);
    color: #fff;
    font-size: 1.4rem;
    width: 133px;
    padding: 9px 5px;
    border-radius: 20px;
    border: none;
}

/* btn__group sp */
@media screen and (max-width:700px) {
    .btn__group{
        padding: 50px var(--contentpadding);
        gap: 20px;
    }
    .works__btn{
        font-size: 1.3rem;
        width: 100px;
    }
}