@charset "utf-8";

/* top_area */
.top_area {
    padding: 1.2rem 0 1.3rem;
    background-color: #000;
    text-align: center;
}

.top_area_main_txt {
    font-weight: 700;
    color: #c63cb1;
    font-size: 1.3rem;
    line-height: 1;
}

.top_area_main_txt_l {
    font-size: 2.4rem;
}

.top_area_main_txt_m {
    font-size: 2rem;
}

.top_area_main_txt sup {
    font-size: 0.8rem;
    color: #7f7f7f;
}

.top_area_main_txt_sub {
    font-size: 0.8rem;
    color: #7f7f7f;
    line-height: 1.375;
    margin-top: 0.8rem;
    letter-spacing: 0;
}

.top_area_txt {
    margin-top: 0.7rem;
    color: #fff;
    font-size: 1.1rem;
}

/* top_pkg */
.top_pkg_area {
    padding: 1.6rem 0;
}

.top_pkg_list {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
}

.top_pkg_list li + li {
    margin-left: 0.9rem;
}

.top_pkg1 {
    width: 5.7rem;
}

.top_pkg2 {
    width: 5.7rem;
}

.top_pkg3 {
    width: 4.3rem;
}

.top_pkg4 {
    width: 2.95rem;
}

.top_pkg5 {
    width: 5.8rem;
}

/* content */
.content.content_border_top_none {
    border-top: none;
}

.pkg_mv {
    width: 100%;
    height: 12.9rem;
    position: relative;
    overflow: hidden;
    padding: 0.9rem 1.4rem 0.8rem;
}

.cont_box {
    position: relative;
}

.cont_box + .cont_box,
.cont_box_bleach_wrap + .cont_box {
    margin-top: 3.2rem;
}

.cont_box_mv + .cont_box,
.cont_box + .cont_box_btn_wrap {
    margin-top: 1.6rem;
}

.pkg_mv::before,
.pkg_mv::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    transform: rotate(-21.3deg);
    mix-blend-mode: multiply;
}

.pkg_mv::before {
    bottom: 7.5rem;
    left: 0;
    transform-origin: bottom left;
}

.pkg_mv::after {
    top: 7.5rem;
    right: 0;
    transform-origin: top right;
}

.pkg_mv_content_wrap {
    position: relative;
    z-index: 1;
}

.pkg_mv_txt {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
}

.pkg_mv_img_wrap {
    display: flex;
    margin-top: 0.5rem;
}

.pkg_mv_img_txt_wrap {
    margin-left: 0.8rem;
}

.pkg_mv_img_txt {
    font-size: 1.8rem;
    font-style: italic;
    line-height: 1.166;
    font-weight: 900;
    font-style: italic;
}

.one_day_crazy_mv .pkg_mv_img_txt {
    margin-top: 1.5rem;
}

.pkg_mv_img_txt_sub {
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 0.6rem;
    line-height: 1;
}

.pkg_mv_sub_txt_wrap {
    display: flex;
    align-items: center;
    margin-top: 0.8rem;
}

.pkg_mv_sub_txt_wrap_2col {
    margin-top: 0.1rem;
}

.pkg_mv_sub_txt_tag {
    font-size: 0.8rem;
    line-height: 1;
    letter-spacing: 0;
    padding: 0.2rem 0.3rem;
    border: 0.1rem solid #000;
    display: inline-block;
}

#makeup .pkg_mv_sub_txt_wrap {
    margin-top: 0.2rem;
}

#makeup .pkg_mv_sub_txt_tag {
    padding: 0.2rem 0;
    width: 8.4rem;
    text-align: center;
}

.pkg_mv_sub_txt {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #000;
    text-shadow:
        1px 1px 0 #fff,
        -1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px -1px 0 #fff,
        0px 1px 0 #fff,
        0-1px 0 #fff,
        -1px 0 0 #fff,
        1px 0 0 #fff;
    margin-left: 0.5rem;
    letter-spacing: 0.04em;
}

/* .section_ttl */
.section_ttl {
    font-size: 3.2rem;
    top: -0.9rem;
    position: absolute;
    font-weight: 800;
    line-height: 1;
    mix-blend-mode: multiply;
    z-index: 2;
    pointer-events: none;
}

.section_ttl_left {
    left: -1.8rem;
}

.section_ttl_right {
    right: -1.8rem;
}

/* feature */
.features_listitem {
    display: flex;
    justify-content: space-between;
    padding-top: 1.6rem;
    padding-bottom: 1.2rem;
    flex-direction: column;
}

.features_list li:first-child {
    padding-top: 0;
    margin-top: -0.1rem;
}

.features_ttl_box {
    display: flex;
}

.features_subttl {
    line-height: 1;
    font-weight: 800;
    display: flex;
    align-items: flex-end;
    width: 3rem;
    font-size: 1.2rem;
    padding-left: 1rem;
}

.features_list li:first-child .features_subttl {
    padding-top: 1rem;
}

.features_listitem:nth-child(odd) .features_subttl {
    align-items: flex-start;
    order: 1;
    padding-left: 0rem;
    padding-right: 1rem;
}

.features_txt {
    font-weight: 900;
    line-height: 1.5;
    padding: 0.4rem 1.3rem 0;
    font-size: 1.5rem;
}

.features_txt sup {
    font-size: 0.8rem;
    color: #7f7f7f;
}

.features_listitem:nth-child(even) .features_txt {
    padding-left: 0;
}

.features_txt_sub {
    color: #777777;
    font-size: 1rem;
    padding: 0 1.5rem 1.2rem;
}

.features_listitem + .features_listitem {
    border-top: 0.1rem solid #000;
}

.features_ttl_box,
.features_img_box {
    width: 100%;
}

.features_listitem:nth-child(even) .features_txt_box {
    padding-left: 3rem;
}

.features_listitem:nth-child(odd) .features_txt_box {
    padding-right: 3rem;
}

.features_img_box {
    flex: 1;
    width: calc(100% - 3rem);
}

/* cont_box_btn */
.cont_box_btn_inner {
    padding: 0 1.4rem;
    border-top: 0.1rem solid #000;
    border-bottom: 0.1rem solid #000;
}

.cont_box_btn {
    display: block;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1;
    padding: 1.6rem 0.3rem 1.6rem 0;
    background-color: #fff;
    color: #000;
    font-weight: 700;
    position: relative;
    border-left: 0.1rem solid #000;
    border-right: 0.1rem solid #000;
}

.cont_box_btn::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 0.2rem solid transparent;
    border-bottom: 0.2rem solid transparent;
    border-left: 0.7rem solid #000;
    border-right: 0.7rem solid transparent;
    position: absolute;
    right: 0.4rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.makeup_mv {
    background: url(../../../img/global/index/makeup_mv_model.jpg) no-repeat top center / cover;
}

.bleach_mv {
    background: url(../../../img/global/index/bleach_mv_model.jpg) no-repeat top center / cover;
}
.bleach_mv.bleach_mv_plex {
    background: url(../../../img/global/index/bleach_plex_mv_model.jpg) no-repeat top center / cover;
}
.bleach_mv.bleach_mv_airy {
    background: url(../../../img/global/index/bleach_airy_mv_model.jpg) no-repeat top center / cover;
}
.point_color_mv {
    background: url(../../../img/global/index/point_color_mv_model.jpg) no-repeat top center / cover;
}

.one_day_crazy_mv {
    background: url(../../../img/global/index/one_day_crazy_mv_model.jpg) no-repeat top center / cover;
}

.tonedown_mv {
    background: url(../../../img/global/index/tonedown_mv_model.jpg) no-repeat top center / cover;
}

.me_mv {
    background: url(../../../img/global/index/me_mv.jpg) no-repeat top center / cover;
}

.makeup_mv::before,
.makeup_mv::after {
    background-color: #c63cb1;
}

.bleach_mv::before,
.bleach_mv::after {
    background-color: #f4bb32;
}

.point_color_mv::before,
.point_color_mv::after {
    background-color: #18b3e0;
}

.one_day_crazy_mv::before,
.one_day_crazy_mv::after {
    background-color: #ed3504;
}

.tonedown_mv::before,
.tonedown_mv::after {
    background-color: #282828;
}

.me_mv::before,
.me_mv::after {
    display: none;
}

.makeup_pkg_mv_img,
.bleach_pkg_mv_img,
.tonedown_pkg_mv_img {
    width: 3.2rem;
}
.bleach_pkg_mv_img {
    filter: drop-shadow(0.6rem 1.5rem 1.5rem rgba(0, 0, 0, 0.16));
}

.point_color_pkg_mv_img {
    width: 2.25rem;
}

.one_day_crazy_pkg_mv_img {
    width: 1.8rem;
}

.bleach_mv .pkg_mv_img_txt {
    line-height: 1;
}

.bleach_mv .pkg_mv_img_txt_sub {
    margin-top: 0.2rem;
}

.tonedown_mv .pkg_mv_txt {
    color: #fff;
    text-shadow:
        1px 1px 0 #282828,
        -1px -1px 0 #282828,
        -1px 1px 0 #282828,
        1px -1px 0 #282828,
        0px 1px 0 #fff,
        0-1px 0 #fff,
        -1px 0 0 #282828,
        1px 0 0 #282828;
}

.tonedown_mv .pkg_mv_img_txt {
    text-shadow:
        1px 1px 0 #fff,
        -1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px -1px 0 #fff,
        0px 1px 0 #fff,
        0-1px 0 #fff,
        -1px 0 0 #fff,
        1px 0 0 #fff;
}

.makeup .section_ttl,
.makeup .features_txt_color {
    color: #c63cb1;
}

.bleach_mv::before,
.bleach_mv::after {
    background-color: #f4bb32;
}
.bleach_mv.bleach_mv_plex::before,
.bleach_mv.bleach_mv_plex::after {
    background-color: #f8d61c;
}
.bleach_mv.bleach_mv_airy::before,
.bleach_mv.bleach_mv_airy::after {
    background-color: #ff9d20;
}

.bleach_mv.bleach_mv_plex .pkg_mv_sub_txt_wrap_2col {
    margin-top: -1.2rem;
}
.bleach_mv.bleach_mv_plex .pkg_mv_sub_txt_tag {
    margin-top: 1.35rem;
}
.bleach_mv.bleach_mv_airy .pkg_mv_sub_txt_wrap_2col {
    margin-top: -0.03rem;
}

.bleach .section_ttl,
.bleach .features_txt_color,
.cont_box_bleach_tab_wrap .features_txt_color {
    color: #f4bb32;
}
[data-bleach-id='plex'] .section_ttl {
    color: #f8d61c;
}
[data-bleach-id='baseup'] .section_ttl {
    color: #f4bb32;
}
[data-bleach-id='airy'] .section_ttl {
    color: #ff9d20;
}
[data-bleach-id='plex'] .features_txt {
    width: 110%;
}
[data-bleach-id='plex'] .features_txt_color {
    color: #f8d61c;
}
[data-bleach-id='plex'] .features_txt_cap {
    font-size: 1rem;
    color: #777;
}
[data-bleach-id='airy'] .features_txt_color {
    color: #ff9d20;
}
.txt_info {
    font-size: 1rem;
    vertical-align: top;
}

.features_txt_list {
    margin-top: 0.5rem;
}
.features_txt_list > li {
    font-size: 1rem;
    margin-right: 2rem;
    --indent: 0.6em;
    padding-left: var(--indent);
    text-indent: calc(var(--indent) * -1);
}

.point_color .section_ttl,
.point_color .features_txt_color {
    color: #18b3e0;
}

.one_day_crazy .section_ttl,
.one_day_crazy .features_txt_color {
    color: #ed3504;
}

.tonedown .section_ttl {
    color: #282828;
}

.tonedown .features_txt_color {
    color: #8c8c8c;
}

.one_day_crazy .features_txt {
    font-size: 1.7rem;
}

/* bleach_box */
.bleach_box {
    width: 26rem;
    margin: 1.2rem auto 0;
    border: 0.1rem solid #000;
    padding: 1.6rem 1.8rem;
}

.cont_box_bleach_wrap .features_inner {
    margin-top: 1.5rem;
    border-top: 0.1rem solid #000;
}

.bleach_box_result_txt {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.bleach_box_txt {
    font-size: 0.9rem;
    line-height: 1.7;
    margin-top: 0.7rem;
}

.bleach_point_sample {
    margin-top: 0.6rem;
}

.bleach_box_sub {
    margin-top: 1rem;
}
.bleach_box_sub_color {
    color: #c63cb1;
}

.bleach_box_sub li {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    line-height: 1.375;
    text-indent: -0.5rem;
    padding-left: 0.5rem;
}
.bleach_mv_list > li {
    display: none;
}
.bleach_mv_list > li.is_show {
    display: block;
}
.bleach_cont_list > li {
    display: none;
}
.bleach_cont_list > li.is_show {
    display: block;
}
.bleach_mv_list_block {
    position: relative;
}
.bleach_mv_list_block .section_ttl {
    top: 13.7rem;
    white-space: nowrap;
}
.cont_box_bleach_tab_wrap {
    position: relative;
    margin-top: 1.5rem;
}
.cont_box_bleach_tab_list {
    display: flex;
    justify-content: center;
    border-top: 0.1rem solid #000;
}
.cont_box_bleach_tab_list > li {
    width: 30%;
}
.cont_box_bleach_tab_list > li > button {
    width: 100%;
    height: 100%;
    border: none;
    border-inline: 0.1rem solid #000;
    background: #fff;
}
.cont_box_bleach_tab_list > li + li {
    margin-left: -0.1rem;
}
.cont_box_bleach_tab_img_cover img {
    width: 50%;
    margin-top: 1rem;
    filter: drop-shadow(0.6rem 1.5rem 1.5rem rgba(0, 0, 0, 0.16));
}

[data-bleach-target='plex'] .cont_box_bleach_tab_img_ttl {
    --theme-nav-color: #f8d61c;
}
[data-bleach-target='baseup'] .cont_box_bleach_tab_img_ttl {
    --theme-nav-color: #f4bb32;
}
[data-bleach-target='airy'] .cont_box_bleach_tab_img_ttl {
    --theme-nav-color: #ff9d20;
}
.cont_box_bleach_tab_img_ttl {
    font-weight: 900;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--theme-nav-color);
    margin-top: -0.1rem;
    text-align: left;
}

.cont_box_bleach_tab_img {
    height: 13rem;
}
.cont_box_bleach_tab_img_btn {
    position: relative;
    height: 3rem;
    border-top: 0.1rem solid #000;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cont_box_bleach_tab_img_btn_arrow {
    width: 0.4rem;
    height: 0.7rem;
    background: #000;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
.is_tab_current .cont_box_bleach_tab_img_btn {
    background: #000;
}
.is_tab_current .cont_box_bleach_tab_img_btn_arrow {
    background: #fff;
}

/* me */
.me_content {
    width: 100%;
    background: url(../../../img/global/index/me_bg.jpg) no-repeat top center / cover;
    padding: 1.4rem 1.4rem 1.6rem;
}

.me_pkg {
    width: 26rem;
    margin: 0 auto;
    padding-top: 1.9rem;
}

.me_item_txt {
    margin-bottom: 0.6rem;
}

.me_pkg_sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -0.7rem;
}

.me_pkg_sub_txt {
    text-align: right;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
}

.me_pkg_sub_left {
    width: 7.7rem;
}

.me_txt {
    font-size: 1.3rem;
    line-height: 1.46;
    margin-top: 1.3rem;
    font-weight: 900;
}

.me_box {
    border-radius: 2rem;
    box-shadow: 0.2rem 0.3rem 1.6rem 0 rgba(225, 100, 69, 0.4);
    padding: 1.4rem 1.5rem;
    background-color: #fff;
    margin-top: 0.6rem;
}

.me_box_list li + li {
    margin-top: 0.8rem;
}

.me_box_list li {
    display: flex;
    align-items: flex-start;
}

.me_box_list_tag {
    display: inline-block;
    font-size: 0.9rem;
    border-radius: 0.5rem;
    color: #fff;
    letter-spacing: 0;
    margin-right: 0.8rem;
    font-weight: 700;
    padding: 0.45rem 1.24rem;
    line-height: 1;
}

.me_box_list_txt {
    font-size: 1.2rem;
    letter-spacing: 0;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.me_box_list li:nth-child(1) .me_box_list_tag {
    background-color: #ff6768;
}

.me_box_list li:nth-child(1) .me_box_list_txt {
    color: #ff6768;
}

.me_box_list li:nth-child(2) .me_box_list_tag {
    background-color: #f9de4f;
}

.me_box_list li:nth-child(2) .me_box_list_txt {
    color: #f9de4f;
}

.me_box_list li:nth-child(3) .me_box_list_tag {
    background-color: #69c2ff;
}

.me_box_list li:nth-child(3) .me_box_list_txt {
    color: #69c2ff;
}

.me .section_ttl {
    top: auto;
    bottom: 1.6rem;
    color: #ff6768;
}