@charset "utf=8";

.commmon-in-first-illust01:before,
.commmon-in-first-illust02:before {
	right: auto;
    left: 0;
}

.commmon-in-first-illust01:after,
.commmon-in-first-illust02:after {
	left: auto;
    right: 0;
}

.common-in-timing01-list-content.first-img {
    background-image: url(../../../../uploads/color_timing_img01.jpg); 
}

.common-in-timing01-list-content.second-img {
    background-image: url(../../../../uploads/color_timing_img02.jpg); 
}

.common-in-timing01-list-content.third-img {
    background-image: url(../../../../uploads/color_timing_img03.jpg);
}

/* ==========================================
COLOR
========================================== */

.in-color-match-wrapper{
    padding: 10rem 0;
}

.in-color-match-area{
    width: 100%;
    max-width: 147rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.in-color-match-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.in-color-match-flex-l{
    width: 44%;
    max-width: 62rem;
}

.in-color-match-img01{
    width: 75%;
    max-width: 46rem;
    margin: 0 0 0 auto;
}

.in-color-match-img02{
    position: relative;
    z-index: 1;
    width: 68%;
    max-width: 42rem;
    margin: -11.5rem auto 0 0;
}

.in-color-match-flex-r{
    position: relative;
    width: 52%;
    max-width: 74rem;
}

.in-color-match-flex-r::after{
    content: "";
    position: absolute;
    z-index: 1;
    top: -7rem;
    right: 0;
    width: 35rem;
    height: 12rem;
    background: url(../../../../uploads/color_illust03.png) no-repeat center /contain;
}

.in-color-match-text{
    width: 78%;
    max-width: 57rem;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 3.125;
}

.in-color-match-title {
    margin-bottom: 2rem;
}


.in-color-commitment-wrapper{
    margin: 15rem 0 0;
}

.in-color-commitment-area{
    width: 100%;
    max-width: 99rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}


.in-color-commitment-text-box{
    width: 100%;
    max-width: 82rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.in-color-commitment-title{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    text-align: center;
}

.in-color-commitment-title::before,
.in-color-commitment-title::after{
    content: "";
    width: 4rem;
    height: 6.8rem;
}

.in-color-commitment-title::before{
    left: 0;
    background: url(../../../../uploads/color_illust04.png) no-repeat center bottom /contain ;
}

.in-color-commitment-title::after{
    right: 0;
    background: url(../../../../uploads/color_illust05.png) no-repeat center bottom /contain ;
}

.in-color-commitment-title br{
    display: none;
}

.in-color-commitment-text{
    margin: 5rem 0 0;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 3.125;
    text-align: center;
}

.in-color-commitment-item{
    position: relative;
    border: var(--light-gray) solid 1px;
    margin: 9rem 0 0;
    padding: 7rem 1.5rem 6rem;
}

.in-color-commitment-item::before{
    position: absolute;
    top: -4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10rem;
    height: 10rem;
    background: var(--light-blue);
    font-size: 5rem;
    color: #000;
    letter-spacing: 0;
    line-height: 1.4;
    font-family: var(--font-family01);
}

.in-color-commitment-item:nth-of-type(1):before{
    content: "01";
    left: -4rem;
}

.in-color-commitment-item:nth-of-type(2):before{
    content: "02";
    right: -4rem;
}

.in-color-commitment-item:nth-of-type(3):before{
    content: "03";
    left: -4rem;
}

.in-color-commitment-item-text{
    width: 84%;
    max-width: 80rem;
    margin: 0 auto;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.5;
    letter-spacing: 0;
}

.in-color-timing .common-in-timing01-title-illust01::before{
    background: url(../../../../uploads/color_illust06.png) no-repeat center /contain;
}

.in-color-timing .common-in-timing01-img-illust01:before{
    background: url(../../../../uploads/cut_illust03.png) no-repeat center /contain;
}

.in-color-timing .common-in-timing01-img-illust01:after{
    background: url(../../../../uploads/cut_illust04.png) no-repeat center /contain;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1920px) {

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1550px) {

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1024px) {

    .in-color-match-flex-r::after{
        width: 30rem;
    }

    .in-color-commitment-item:nth-of-type(1):before{
        left: -1rem;
    }

    .in-color-commitment-item:nth-of-type(2):before{
        right: -1rem;
    }
    
    .in-color-commitment-item:nth-of-type(3):before{
        left: -1rem;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 768px) {

    .in-color-match-wrapper{
        margin: 10rem 0 5rem;
    }

    .in-color-match-flex{
        flex-direction: column-reverse;
    }
    
    .in-color-match-flex-l{
        margin: 3rem 0 0;
        width: 100%;
        max-width: 80rem;
    }
    
    .in-color-match-flex-r{
        width: 100%;
        max-width: 80rem;
    }

    .in-color-commitment-wrapper{
        margin: 7rem 0 0;
    }

    .in-color-commitment-text{
        margin: 2rem 0 0;
        text-align: start;
        line-height: 2em;
    }

    .in-color-timing .common-in-timing01-title-illust01::before{
        top: -190%;
    }

    .in-color-match-text{
        line-height: 2em;
    }

    .in-color-commitment-item-text{
        line-height: 2em;
    }
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 576px) {

    .in-color-match-flex-r::after{
        top: -10rem;
        width: 25rem;
    }

    .in-color-match-text{
        width: 100%;
        max-width: 57rem;
    }

    .in-color-commitment-title br{
        display: block;
    }

    .in-color-commitment-item-text{
        width: 100%;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 414px) {

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */