@charset "utf-8";

.section_ttl {
    color: #282828;
}
@media (min-width: 520px) {
    .cont_box + .cont_box {
        margin-top: 64px;
    }
}
@media (max-width: 519px) {
    .cont_box + .cont_box {
        margin-top: 4.8rem;
    }
    .cont_box + .cont_box.makeup_cont_box,
    .cont_box + .cont_box.howtouse_nav_cont_box {
        margin-top: 2.3rem;
    }
    .wrap {
        padding-top: 2.3rem;
    }
    .wrapper {
        padding-top: 4.8rem;
    }
}

/* howtouse_top_movie_content */
.movie_wrap_howtouse_top {
    width: 100%;
}
.howtouse_top_movie_ttl_wrap {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #000;
    overflow: hidden;
    border-top: none;
}
.howtouse_top_movie_ttl_new {
    background-color: #000;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    letter-spacing: 0.08em;
    font-weight: 700;
    position: relative;
}
.howtouse_top_movie_ttl_new::after {
    content: '';
    display: block;
    height: 200%;
    width: 200%;
    background-color: #fff;
    transform-origin: bottom right;
    position: absolute;
    right: 0;
    bottom: 0;
}
.howtouse_top_movie_ttl {
    display: flex;
    align-items: center;
    font-weight: 700;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.howtouse_top_movie_ttl_icon {
    display: inline-block;
}
@media (min-width: 520px) {
    .movie_wrap_howtouse_top {
        padding-top: 59.723%;
    }
    .howtouse_top_movie {
        max-width: 1360px;
        margin: 0 auto;
    }
    .howtouse_top_movie_content {
        width: 720px;
        margin: 0 auto;
    }
    .howtouse_top_movie_ttl_wrap {
        height: 56px;
    }
    .howtouse_top_movie_ttl_new {
        width: 106px;
        padding-right: 12px;
        font-size: 20px;
    }
    .howtouse_top_movie_ttl_new::after {
        transform: rotate(65deg);
    }
    .howtouse_top_movie_ttl {
        padding: 0 24px;
        font-size: 18px;
    }
    .howtouse_top_movie_ttl_icon {
        width: 24px;
        margin: 0 10px -2px 0;
    }
}
@media (max-width: 519px) {
    .movie_wrap_howtouse_top {
        padding-top: 20.55rem;
    }
    .howtouse_top_movie_content {
        width: 100%;
    }
    .howtouse_top_movie_ttl_wrap {
        height: 4rem;
    }
    .howtouse_top_movie_ttl_new {
        width: 7.6rem;
        padding-right: 1.3rem;
        font-size: 1.2rem;
    }
    .howtouse_top_movie_ttl_new::after {
        transform: rotate(68deg);
    }
    .howtouse_top_movie_ttl {
        padding: 0 0.7rem;
        font-size: 1.2rem;
    }
    .howtouse_top_movie_ttl_icon {
        width: 1.6rem;
        margin: 0 0.8rem -0.1rem 0;
    }
}

/* nav */
.howtouse_nav {
    display: flex;
    justify-content: space-between;
    border-right: 1px solid #000;
}
.howtouse_nav_btn {
    line-height: 1.2;
    background-color: #fff;
    color: #000;
    border-left: 1px solid #000;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.howtouse_nav_btn_arrow {
    position: absolute;
    left: 50%;
    background: url(../img/default/icon_arrow_black.svg) no-repeat;
    background-size: 100% auto;
    transform: rotate(90deg);
    transition: background 0.4s 0.2s;
    z-index: 3;
}
@media (min-width: 520px) {
    .howtouse_nav {
        margin: 0 auto;
    }
    .howtouse_nav_btn {
        padding: 17px 0 24px;
        font-size: 20px;
        width: 100%;
    }
    .howtouse_nav_btn_arrow {
        bottom: 9px;
        margin-left: -6px;
        width: 10px;
        height: 6px;
    }
    .howtouse_nav_btn:hover .howtouse_nav_btn_arrow {
        background-image: url(../img/default/icon_arrow_white.svg);
    }
    .howtouse_nav_btn_me {
        font-size: 28px;
    }
}
@media (max-width: 519px) {
    .howtouse_nav {
        flex-wrap: wrap;
    }
    .howtouse_nav_btn {
        width: 33.3%;
        min-height: 5.5rem;
        padding: 0.5rem 0 1.3rem;
        font-size: 1.3rem;
    }
    .howtouse_nav_btn:nth-child(1),
    .howtouse_nav_btn:nth-child(2),
    .howtouse_nav_btn:nth-child(3),
    .howtouse_nav_btn:nth-child(4) {
        width: 50%;
    }
    .howtouse_nav_btn_arrow {
        bottom: 0.4rem;
        margin-left: -0.4rem;
        width: 0.7rem;
        height: 0.4rem;
    }
    .howtouse_nav_btn:nth-child(n + 3) {
        border-top: 1px solid #000;
    }
    .howtouse_nav_btn_me {
        font-size: 1.8rem;
    }
}

/* howtouse_content_ttl */
.howtouse_content_ttl_wrap {
    text-align: center;
    border-bottom: 1px solid #000;
}
.howtouse_content_ttl_inner {
    position: relative;
    max-width: 1360px;
    margin: 0 auto;
}
.howtouse_content_ttl {
    line-height: 1;
    letter-spacing: 0;
    font-weight: 700;
}
.howtouse_content_ttl_sub {
    line-height: 1;
    font-weight: 700;
}
.howtouse_content_ttl_pkg {
    position: absolute;
    height: auto;
}
@media (min-width: 520px) {
    .howtouse_content_ttl_inner {
        padding: 32px 0;
    }
    .howtouse_content_ttl {
        font-size: 44px;
    }
    .howtouse_content_ttl_sub {
        font-size: 18px;
        margin-top: 22px;
    }
    .howtouse_content_ttl_pkg {
        bottom: 8px;
        filter: drop-shadow(6px 10.392px 28px rgba(0, 0, 0, 0.16));
    }
    .makeup_pkg,
    .bleach_pkg,
    .tonedown_pkg {
        left: 174px;
    }
    .point_color_pkg {
        left: 186px;
    }
    .one_day_crazy_pkg {
        left: 193px;
    }
    .me_pkg {
        left: 170px;
    }
}
@media (max-width: 519px) {
    .howtouse_content_ttl_inner {
        padding: 2rem 0 1.9rem 4.8rem;
    }
    .howtouse_content_ttl {
        font-size: 2.4rem;
    }
    .point_color_ttl .howtouse_content_ttl,
    .tonedown_ttl .howtouse_content_ttl {
        font-size: 2.2rem;
    }
    .howtouse_content_ttl_sub {
        font-size: 1.2rem;
        margin-top: 1.1rem;
    }
    .howtouse_content_ttl_pkg {
        bottom: 0.9rem;
        filter: drop-shadow(0.3rem 0.5rem 1.4rem rgba(0, 0, 0, 0.16));
    }
    .makeup_pkg,
    .bleach_pkg,
    .tonedown_pkg {
        left: 1.6rem;
        width: 3.2rem;
    }
    .point_color_pkg {
        left: 2.1rem;
        width: 2.25rem;
    }
    .one_day_crazy_pkg {
        left: 2.4rem;
        width: 1.65rem;
    }
    .me_pkg {
        left: 1.5rem;
        width: 3.5rem;
    }
}

/* color */
.makeup_ttl {
    background-color: #c63cb1;
    color: #fff;
}
.plex_ttl {
    background-color: #f8d61c;
    color: #fff;
}
.baseup_ttl {
    background-color: #f4bb32;
    color: #fff;
}
.airy_ttl {
    background-color: #ff9d20;
    color: #fff;
}
.point_color_ttl {
    background-color: #18b3e0;
    color: #fff;
}
.tonedown_ttl {
    background-color: #282828;
    color: #fff;
}
.one_day_crazy_ttl {
    background-color: #ed3504;
    color: #fff;
}

/* me_ttl */
@media (min-width: 520px) {
    .me_ttl {
        background: url(../img/howtouse/me_ttl_bg.jpg) no-repeat center center / cover;
    }
    .me_ttl .howtouse_content_ttl_inner {
        padding: 18px 0;
    }
    .me_ttl .howtouse_content_ttl_sub {
        margin-top: 9px;
    }
}
@media (max-width: 519px) {
    .me_ttl {
        background: url(../img/howtouse/me_ttl_bg_sp.jpg) no-repeat center center / cover;
    }
    .me_ttl .howtouse_content_ttl_inner {
        padding: 1.2rem 0 1.2rem 5rem;
    }
    .me_ttl_img {
        width: 7.85rem;
    }
    .me_ttl .howtouse_content_ttl_sub {
        margin-top: 0.4rem;
    }
}

/* step */
.makeup_step .slide_step_ttl {
    background-color: #c63cb1;
}
.bleach_step .slide_step_ttl {
    color: #fff;
}
.plex_step .slide_step_ttl {
    background-color: #f8d61c;
}
.baseup_step .slide_step_ttl {
    background-color: #f4bb32;
}
.airy_step .slide_step_ttl {
    background-color: #ff9d20;
}
.point_color_step .slide_step_ttl {
    background-color: #18b3e0;
}
.one_day_crazy_step .slide_step_ttl {
    background-color: #ed3504;
}
.movie_wrap_thumb_renovation {
    width: 100%;
    position: absolute;
    height: auto;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}
@media (min-width: 520px) {
    .step_col1 {
        width: 650px;
        margin: auto;
    }
}
@media (max-width: 519px) {
    .cont_box_even .movie_ttl,
    .cont_box_even .step_ttl {
        order: 1;
    }
    .cont_box_even .slide_step_txt {
        padding: 0.5rem 0 0 9rem;
    }
    .cont_box_even .swiper-button-prev,
    .cont_box_even .swiper-container-rtl .swiper-button-next {
        right: auto;
        left: 0;
    }
    .cont_box_even .swiper-button-next,
    .cont_box_even .swiper-container-rtl .swiper-button-prev {
        right: auto;
        left: 4rem;
    }
}