@charset "utf-8";

/* point_color */
.section_ttl {
    color: #18b3e0;
}
.color_notes_list .strong,
.howtouse_notes_list .strong {
    color: #18b3e0;
}
.slide_step_ttl {
    background-color: #18b3e0;
}
.gloves_img_txt .strong {
    color: #18b3e0;
}

/* mv */
.color_1 .mv_bg {
    background-color: #fd2a45;
}
.color_2 .mv_bg {
    background-color: #ee53b9;
}
.color_3 .mv_bg {
    background-color: #c14d9a;
}
.color_4 .mv_bg {
    background-color: #18b3e0;
}
.color_5 .mv_bg {
    background-color: #9696a9;
}
.mv_color_list > li:nth-child(1) {
    background-color: #f61d39;
}
.mv_color_list > li:nth-child(2) {
    background-color: #e946d1;
}
.mv_color_list > li:nth-child(3) {
    background-color: #c14d9a;
}
.mv_color_list > li:nth-child(4) {
    background-color: #3493e6;
}
.mv_color_list > li:nth-child(5) {
    background-color: #9e9eb2;
}
.mv .icon_new {
    position: absolute;
    z-index: 3;
    opacity: 0;
}
.mv .swiper-slide-duplicate-active .icon_new,
.mv .swiper-slide-active .icon_new {
    transition: opacity 0.3s 0.2s;
    opacity: 1;
}
@media (min-width: 520px) {
    .mv_ttl_box {
        top: 117px;
        margin-left: -501px;
    }
    .mv_ttl_en {
        bottom: 68px;
        margin-right: -512px;
    }
    .mv_bg_1 {
        top: -120px;
    }
    .mv_model {
        margin-left: -212px;
    }
    .mv_info {
        margin-left: -314px;
    }
    .mv_pkg {
        bottom: 33px;
        margin-left: -500px;
    }
    .mv .icon_new {
        top: 35px;
        left: 50%;
        margin-left: -505px;
    }
}
@media (max-width: 519px) {
    .mv_ttl_box {
        top: 6.9rem;
    }
    .mv_ttl_en {
        right: -0.4rem;
        top: 9.7rem;
    }
    .mv_bg_1 {
        height: 35.6%;
    }
    .mv_bg_2 {
        height: 39%;
    }
    .mv_info {
        left: 8.5rem;
    }
    .mv_pkg {
        width: 24.53%;
        left: 1.8rem;
        bottom: 1rem;
        left: -3rem;
        width: 23%;
    }
    .mv .icon_new {
        top: 3%;
        left: 4%;
        width: 10%;
    }
}

/* lineup */
.product_list .icon_new {
    position: absolute;
}
.product_name {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
@media (min-width: 520px) {
    .lineup_inner {
        padding: 0 0 40px;
    }
    .product_listitem {
        margin: 40px 36px 0;
        width: 72px;
    }
    .product_name {
        width: 200%;
    }
    .product_listitem .icon_new {
        top: -31px;
        left: -31px;
    }
}
@media (max-width: 519px) {
    .lineup_inner {
        padding: 1.2rem 1.6rem 1.6rem;
    }
    .product_list{
        flex-wrap: nowrap;
        margin-inline: 0.15rem;
    }
    .product_listitem {
        width: 4.8rem;
        margin: 1.2rem 0 0;
        position: relative;
    }
    .product_listitem + .product_listitem {
        margin-left: 1.6rem;
    }
    .product_name {
        width: 170%;
    }
    .product_listitem .icon_new {
        top: -5.6666vw;
        left: -3.133vw;
        width: 63.1%;
    }
}

/* color */
.color_1 .color_item_box {
    background-color: #f84a61;
}
.color_2 .color_item_box {
    background-color: #ed6bda;
}
.color_3 .color_item_box {
    background-color: #cd71ae;
}
.color_4 .color_item_box {
    background-color: #5da9eb;
}
.color_5 .color_item_box {
    background-color: #b1b1c1;
}
.color_item_ttl_box {
    text-align: center;
    color: #fff;
    position: relative;
}

.color_pattern {
    background-color: #fff;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    display: flex;
}
.color_pattern_list {
    position: relative;
    z-index: 1;
}
.color_pattern_list_item {
    display: flex;
}
.color_pattern_list_txt_box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.color_pattern_list_txt_box_light1 {
    background-color: #c69b31;
}
.color_pattern_list_txt_box_light2 {
    background-color: #855429;
}
.color_pattern_list_txt_box_light3 {
    background-color: #693a0f;
}
.color_pattern_list_txt {
    color: #fff;
}
.color_pattern_image_item {
    position: relative;
}
.color_pattern_image_item::after {
    content: '';
    display: block;
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    transform: rotate(45deg) skew(24deg, 24deg);
}
.color_item_ttl_box .icon_new {
    position: absolute;
    left: 50%;
    z-index: 1;
}

@media (min-width: 520px) {
    .color_item_ttl_box {
        width: 386px;
        padding: 40px 0;
    }
    .color_item_img {
        margin-top: 27px;
        filter: drop-shadow(12px 30px 30px rgba(0, 0, 0, 0.16));
    }
    .color_pattern {
        padding: 12px;
        width: 580px;
    }
    .color_pattern_list_item + .color_pattern_list_item,
    .color_pattern_image_item + .color_pattern_image_item {
        margin-top: 8px;
    }
    .color_pattern_list_txt_box {
        width: 110px;
        height: 124px;
    }
    .color_pattern_list_txt {
        font-size: 16px;
        line-height: 1.5;
    }
    .color_pattern_image {
        margin-left: -1px;
    }
    .color_pattern_image_item::after {
        width: 46px;
        height: 46px;
        left: -32px;
    }
    .color_item_ttl_box .icon_new {
        top: 89px;
        margin-left: -102px;
    }
}
@media (max-width: 519px) {
    .color_pattern {
        border-bottom: 1px solid #000;
    }
    .color_item_ttl_box {
        width: 21.2rem;
        align-self: center;
    }
    .color_item_ttl_box {
        width: 9rem;
        padding: 2.6rem 0;
    }
    .color_item_img {
        width: 4.2rem;
        height: auto;
        margin-top: 0;
        filter: drop-shadow(0.6rem 1.5rem 1.5rem rgba(0, 0, 0, 0.16));
    }
    .color_pattern {
        padding: 0.8rem;
        width: 25.2rem;
    }
    .color_pattern_list_item + .color_pattern_list_item,
    .color_pattern_image_item + .color_pattern_image_item {
        margin-top: 0.4rem;
    }
    .color_pattern_list_txt_box {
        width: 5.5rem;
        height: 5.2rem;
    }
    .color_pattern_list_txt {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    .color_pattern_image {
        margin-left: -0.05rem;
    }
    .color_pattern_list_item_light {
        width: 6.95rem;
        height: auto;
    }
    .color_pattern_image_light {
        width: 11rem;
        height: auto;
    }
    .color_pattern_image_item::after {
        width: 2.3rem;
        height: 2.3rem;
        left: -1.6rem;
    }
    .color_item_ttl_box .icon_new {
        width: 2.6rem;
        top: 0.8rem;
        margin-left: -3.6rem;
    }
}

/*how to use */
@media (min-width: 520px) {
    .step {
        width: 650px;
        margin: auto;
    }
}