@charset "utf-8";

.color_item + .color_item {
    margin-top: 36px;
}

.color_item_box {
    display: flex;
    margin: auto;
}

.color_item_ttl_box {
    text-align: center;
}

.color_1 .twentytwenty-handle {
    background-color: #2C2D71;
}

.color_2 .twentytwenty-handle {
    background-color: #B44481;
}

.color_3 .twentytwenty-handle {
    background-color: #49749D;
}

.color_4 .twentytwenty-handle {
    background-color: #57688B;
}

.color_5 .twentytwenty-handle {
    background-color: #125B38;
}

.color_6 .twentytwenty-handle {
    background-color: #A21D24;
}

.color_1 .color_item_ttl {
    color: #2C2D71;
}

.color_2 .color_item_ttl {
    color: #B44481;
}

.color_3 .color_item_ttl {
    color: #49749D;
}

.color_4 .color_item_ttl {
    color: #57688B;
}

.color_5 .color_item_ttl {
    color: #125B38;
}

.color_6 .color_item_ttl {
    color: #A21D24;
}

@media (min-width: 520px) {
    
    .beforeafter_img {
        width: 564px;
    }
    
    .color_item_ttl {
        color: #fff;
    }
}

.color_slidecontent {
    position: relative;
}

.gray-bar {
    position: absolute;
    background: #EEEEEE;
    height: 41px;
    width: calc(100% - 40px);
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.gray-bar::after,
.gray-bar::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    background: #eeeeee;
    transform: rotate(45deg);
    position: absolute;
    top: 7px;
}

.gray-bar::before {
    left: -14px;
}

.gray-bar::after {
    right: -14px;
}


@media (max-width: 519px) {
    html {
        font-size: 2.66666vw;
    }

    .color_item {
        padding-bottom: 3rem;
    }

    .color_slidecontent {
        width: 100%;
        /* padding-left: 5.2rem; */
        background: url(../img/makeup/img_before.jpg) no-repeat 0 0;
        background-size: 5.2rem auto;
        position: relative;
        z-index: 3;
    }

    .color_item_box {
        width: 100%;
    }

    .beforeafter_img {
        width: 99.3%;
    }
}

/* twentytwenty */
.twentytwenty-before-label,
.twentytwenty-after-label,
.twentytwenty-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.twentytwenty-before-label,
.twentytwenty-after-label {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
    font-size: 14px;
    position: absolute;
    bottom: 8px;
    width: 146px;
    text-align: center;
    padding-top: 5px;
}
.twentytwenty-left-arrow,
.twentytwenty-right-arrow {
    position: absolute;
    top: 0;
    background-color: inherit;
    transform-origin: 0 0;
    transform: rotate(45deg);
}
.twentytwenty-left-arrow {
    left: 0;
}
.twentytwenty-container {
    box-sizing: content-box;
    z-index: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.twentytwenty-container img {
    max-width: 100%;
    position: absolute;
    top: 0;
    display: block;
}
.twentytwenty-container * {
    box-sizing: content-box;
}
.twentytwenty-before {
    z-index: 20;
}
.twentytwenty-after {
    z-index: 10;
}
.twentytwenty-handle {
    position: absolute;
    left: 50%;
    z-index: 40;
    cursor: pointer;
    text-align: center;
    cursor: pointer;
}
.twentytwenty-horizontal .twentytwenty-handle:before {
    content: ' ';
    bottom: 50%;
    display: block;
    background: inherit;
    position: absolute;
    z-index: 30;
    left: 50%;
}
.twentytwenty-horizontal .twentytwenty-handle:after {
    content: 'SLIDE';
    font-weight: 900;
    font-style: italic;
    color: #fff;
    position: relative;
    z-index: 1;
    letter-spacing: 0.06em;
}

@media (min-width: 520px) {
    .twentytwenty-handle {
        width: 96px;
        margin-left: -48px;
        height: 40px;
        bottom: -41px;
    }
    .twentytwenty-horizontal .twentytwenty-handle:before {
        margin-bottom: 20px;
        width: 6px;
        height: 404px;
        margin-left: -3px;
    }
    .twentytwenty-horizontal .twentytwenty-handle:after {
        font-size: 20px;
        line-height: 40px;
    }
    .twentytwenty-left-arrow,
    .twentytwenty-right-arrow {
        width: 28px;
        height: 28px;
    }
    .twentytwenty-right-arrow {
        right: -28px;
    }
}
@media (max-width: 519px) {
    .twentytwenty-handle {
        height: 2.8rem;
        width: 6rem;
        margin-left: -3rem;
        bottom: -2.8rem;
    }
    .twentytwenty-horizontal .twentytwenty-handle:before {
        width: 0.4rem;
        height: 23.6rem;
        margin-bottom: 0.8rem;
        margin-left: -0.2rem;
    }
    .twentytwenty-horizontal .twentytwenty-handle:after {
        font-size: 1.2rem;
        line-height: 2.8rem;
    }
    .twentytwenty-left-arrow,
    .twentytwenty-right-arrow {
        width: 2rem;
        height: 2rem;
    }
    .twentytwenty-right-arrow {
        right: -2rem;
    }

    .gray-bar {
        height: 2.8rem;
    }

    .gray-bar::before,
    .gray-bar::after {
        width: 2rem;
        height: 2rem;
        top: 4px;
    }

    .gray-bar::before {
        left: -8px;
    }
    
    .gray-bar::after {
        right: -8px;
    }
}

dt.c-btn.no-icon:after,
dt.c-btn.no-icon:before {
    display: none;
}

dt.c-btn.no-icon:hover {
    background-color: #333 !important;
}

.cont_box.colors section {
    margin-top: 0;
}

.color_item .inner {
    padding-bottom: 64px;
}

.static-color-combo .color-combo {
    margin-left: 24px;
}

.static-color-combo .color_item_ttl{
    /* color: #b44381; */
    text-align: left;
    font-weight: 800;
    font-style: italic;
    font-size: 24px;
}

.static-color-combo h5 {
    text-align: left;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 992px) {
    .static-color-combo .color-combo {
        margin-left: 0;
    }

    .color_item .color_item_box {
        padding-bottom: 64px;
    }

    .color_item .inner {
        padding-bottom: 0;
    }
}

@media (max-width: 576px) {
    .color_item .color_item_box {
        padding-bottom: 42px;
    }

    .color-brightness {
        max-width: 48%;
    }
}


.products .qs_body__entry .recommended-text p,
.products .qs_body__entry .recommended-text ul {
    line-height: 1.5;
    font-size: 14px;
}

.products .qs_body__entry .recommended-text ul {
    padding-left: 1.5rem;
}

.products .qs_body__entry .recommended-text ul li {
    text-align: left;
    list-style: disc;
    font-weight: 600;
}