@charset "UTF-8";
.g-Area#area-Contents {padding-top: 85px;}

/* CSS Document */
.margin_0 {margin: 0;}
.mg_0 p {margin: 0;}
.margin_none p {margin: 0;}


/* フォントサイズ */
p {font-size: 18px; letter-spacing: normal;}
.ttl-h2 {font-size: 25px !important}
.ttl-h3 {font-size: 28px !important}
.btn-txt {letter-spacing: 1.6px;}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 640px) {
p {font-size: 16px; letter-spacing: normal;}
.ttl-h2 {font-size: 20px !important}
.ttl-h3 {font-size: 22px !important}
}

/* Image&Text Pack 上下中央揃え */
.tb_center_wrap .l-ImageTextHP--v2__contentsBlock, .pkg_wrap .g-ImageTextHP--v2__contentsBlock, .tb_center_wrap .l-ImageTextHP__contentsBlock {display: flex;align-items: center;}
@media only screen and (max-width: 640px) {
.tb_center_wrap .l-ImageTextHP--v2__contentsBlock, .pkg_wrap .g-ImageTextHP--v2__contentsBlock, .tb_center_wrap .l-ImageTextHP__contentsBlock {display: block;}
}
.g-Text {margin-bottom: 0;}


/*　使用方法テキスト　*/
@media screen and (min-width: 641px) {.howto_txt {font-size: 16px;}}
@media screen and (max-width: 640px) {.howto_txt {font-size: 16px;}}

.list_txt {vertical-align: 0.15em;}
@media screen and (min-width: 641px) {.pink_list {font-size: 18px; line-height: 1.5;}}
@media screen and (max-width: 640px) {.pink_list {font-size: 16px; line-height: 1.5;}}

/* 小見出し */
@media screen and (min-width: 641px) {.pt20_s16 {font-size: 20px; line-height: 1.5; margin-top: 0px; margin-bottom: -15px;}}
@media screen and (max-width: 640px) {.pt20_s16 {font-size: 16px; line-height: 1.5;}}


/*　リスト　*/
.l-ListUnit	 {font-size: 14px; line-height: 1.5;}
li::marker {font-size: 2em; font-weight: bold; line-height: 1;}
.list_att li:nth-child(1) {color: #d4145a;}
ul.list_att.g-List--ver2__ul, ul.l-List--ver2__ul {padding-left: 0;}
@media screen and (max-width: 1024px) {ul.list_att.g-List--ver2__ul, ul.l-List--ver2__ul {padding-left: 60px;}}
@media screen and (max-width: 640px) {ul.list_att.g-List--ver2__ul, ul.l-List--ver2__ul {padding-left: 20px;}}


/* 色 */
.pink {color: #d4145a;}


/* コンテンツ */
#howto_awa_content {max-width: 1030px; padding: 0 10%; margin: 0 auto;}
.att_box img {max-width: 84px;}
@media screen and (max-width: 1024px) {.l-TabMenuUnit.is-gutter--m {padding: 60px 0 8px 0;}
.att_box img {max-width: 70px;}}
@media only screen and (max-width: 640px) {.l-TabMenuUnit.is-gutter--m {padding: 50px 0 8px 0;}
.att_box img {max-width: 59px;}}


/* 使い方 */
.howto {width: 90%; margin: 0 auto; margin-top: 40px;}

@media screen and (max-width: 1024px) {
.howto {width: 90%; margin: 0 auto; margin-top: 30px;}}

@media only screen and (max-width: 640px) {
.howto {width: 100%; margin: 0 auto; margin-top: 30px;}}


/* タブ */
#tab_menu_howto .tab_ttl {font-size: 16px; line-height: 1.4;}
#tab_menu_howto .tab_area {padding: 0;height: 90px!important;display: flex;justify-content: center;align-items: center;margin-bottom: 0; border-left: 1px solid #c8c8c8; border-top: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8; border-radius: 10px 10px 0 0;}
#tab_menu_howto .tab_acctive {background-color: #fff; border-bottom: none;}
#tab_menu_howto .tab_passive {background-color: #edeceb;  border-bottom: 1px solid #c8c8c8;}
#tab_menu_howto .g-Text {margin-bottom: 0;}
#tab_menu_howto h2 {font-size: 28px; line-height: 1.4;}

@media screen and (max-width: 1024px) {
#tab_menu_howto .tab_ttl {font-size: 12px; line-height: 1.4;}
#tab_menu_howto .tab_area {height: 76px!important;}
#tab_menu_howto h2 {font-size: 22px; line-height: 1.4;}
}

@media only screen and (max-width: 640px) {
#tab_menu_howto .tab_ttl {font-size: 9px; line-height: 1.4; text-align: center;}
#tab_menu_howto .tab_area {height: 56px!important;}
#tab_menu_howto h2 {font-size: 18px; line-height: 1.4;}
#tab_menu_howto .g-TileLinkTextP__list__tile-sm-1 {width: 33.33%;}
}

/* タイトル */
.howto_awa {width: 500px; display: block; margin: 0 auto; background-image: url(/content/dam/sites/kao/www-kao-co-jp/liesecolor/howto/2603/howto_img_awa_2603.png); background-repeat: no-repeat; background-position: 110px 0px; background-size: 140px; padding: 10px 0px 0px 280px;}
.howto_awableach {width: 500px; display: block; margin: 0 auto; background-image: url(/content/dam/sites/kao/www-kao-co-jp/liesecolor/howto/2403/howto_img_bleach.png); background-repeat: no-repeat; background-position: 110px 0px; background-size: 140px; padding: 10px 0px 0px 280px;}
.howto_ttl {font-size: 44px; line-height: 1.4; font-style: oblique; letter-spacing: 0.21em;}
.sub_ttl {font-size: 18px; line-height: 1.4;}

@media screen and (max-width: 1024px) {
.howto_awa {width: 420px; background-position: 100px 5px; background-size: 100px; padding: 0 0 12px 230px;}
.howto_awableach {width: 420px; background-position: 110px 5px;  background-size: 100px; padding: 0 0 0 230px;}
.howto_ttl {font-size: 36px; line-height: 1.4; font-style: oblique; letter-spacing: 0.21em;}
.sub_ttl {font-size: 16px; line-height: 1.4;}
}

@media only screen and (max-width: 640px) {
.howto_awa {width: 65vw; background-position: left center; background-size: 21.3vw; padding-left: 25vw; padding: 0 0 0 110px;}
.howto_awableach {width: 65vw; background-position: left center; background-size: 21.3vw; padding-left: 25vw; padding: 0 0 0 90px;}
.howto_ttl {font-size: 8vw; line-height: 1.4; font-style: oblique; letter-spacing: 0.21em;}
.sub_ttl {font-size: 3.7vw; line-height: 1.3!important; display: inline-block;}
}

/*注意表記リスト*/
ul.dot_list {margin: 0.5em 0 0 0;padding: 0;}
ul.dot_list li {margin: 0 0 0.2em 1em;padding: 0;list-style-position: outside;}
ul.dot_list li::marker {font-size: 1em;font-weight: normal;}
ul.dot_list li p {margin: 0;line-height: 1.2;}

/* 手順画像サイズ調整(1カラム時) */
.step_no .g-Image--v2__img img {max-width: 60%;}
.step_txt .g-HeadingTitle--v2__titleBlock__titleBox {position: relative; left: -2rem;}
@media screen and (max-width: 1024px) {
.step_no .g-Image--v2__img img {max-width: 50%;}
.step_txt .g-HeadingTitle--v2__titleBlock__titleBox {position: relative; left: -1.8rem;}}
@media only screen and (max-width: 640px) {
.step_no .g-Image--v2__img img {max-width: 100%;}
.step_txt .g-HeadingTitle--v2__titleBlock__titleBox {position: relative; left: 0.2rem;}}


/*ティントカラーのみ*/
.howto_tint {width: 500px; display: block; margin: 0 auto; background-image: url(/content/dam/sites/kao/www-kao-co-jp/liesecolor/howto/2608_tint/tint_howto_img.png); background-repeat: no-repeat; background-position: 110px 0; background-size: 140px; padding: 10px 0px 0px 280px;}
.bg_yellow {background-color: #FFFACC; padding: 20px 40px;}
.txt_pink{color: #D4145A;}
.txt_black{color: #000000;}
.ttl_black {color: #ffffff; background-color: #000000; padding: 10px;}
.border_pink{border: solid 1px #D4145A;}
.font-26 {font-size: 26px;line-height: 1.4;letter-spacing: 0.1em;}
.font-22 {font-size: 22px;line-height: 1.4;letter-spacing: 0.1em;}
.font-22s {font-size: 22px;line-height: 1.4;letter-spacing: normal;}
.font-14 {font-size: 14px;line-height: 1.4;letter-spacing: 0.1em;}
@media screen and (max-width: 1024px) {
.howto_tint{width: 420px; background-position: 110px 5px; background-size: 100px; padding: 0 0 0px 230px;}
.font-26 {font-size: 24px;line-height: 1.4;letter-spacing: 0.1em;}
.font-22 {font-size: 20px;line-height: 1.4;letter-spacing: 0.1em;}
.font-22s {font-size: 20px;line-height: 1.4;letter-spacing: normal;}
.font-14 {font-size: 14px;line-height: 1.4;letter-spacing: 0.1em;}
.bg_yellow {background-color: #FFFACC; padding: 20px 20px;}
}
@media only screen and (max-width: 640px) {
.howto_tint{width: 65vw; background-position: left center; background-size: 21.3vw; padding-left: 24vw;}
.font-26 {font-size: 22px;line-height: 1.4;letter-spacing: 0.1em;}
.font-22 {font-size: 19px;line-height: 1.4;letter-spacing: 0.1em;}
.font-22s {font-size: 18px;line-height: 1.4;letter-spacing: normal;}
.font-14 {font-size: 12px;line-height: 1.4;letter-spacing: 0.1em;}
.point_img {max-width: 200px; margin: 0 auto;}
}


/* 医薬部外品 */
.iyaku {font-size: 10px; border: 1px #333 solid; padding: 0.35em; position: relative; top: -10px;}

@media screen and (max-width: 1024px) {
.iyaku {font-size: 8px; position: relative; top: -15px;}
}

@media only screen and (max-width: 640px) {
.iyaku {font-size: 8px; position: relative; top: -5px;}
}

/* ヘアカラーの前に */
.haircolor_before_ttl .g-Column__cols.l-Column__cols.g-Column__cols-lg-1.g-Column__cols-md-1.g-Column__cols-sm-1{
    padding: 12px 12px 0;
}
.haircolor_before{
    padding: 0 30px;
    margin: 0 auto 60px;
}
.haircolor_before .g-Column__cols.l-Column__cols{
    padding: 0 12px 12px;
}
.haircolor_before .g-ColumnUnit.l-ColumnUnit{
    border:1px solid #333333;
}
@media screen and (max-width: 1024px) {
    .haircolor_before .g-ColumnUnit.l-ColumnUnit{
        padding: 0 30px;
    }
}

/* point_wrap / tips_wrap */
.point_wrap .g-ImageTextHP--v2.is-imageL .opt-lg-imageW20p,
.tips_wrap .g-ImageTextHP--v2.is-imageL .opt-lg-imageW20p{
    align-items: center;
}
@media only screen and (max-width: 640px) {
    .point_wrap p{
        text-align: center;
    }
}
/* 切り替え */
.pc-only {
  display: block;
}
.sp-only {
  display: none;
}
@media only screen and (max-width: 640px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block; 
  }
}