@charset "UTF-8";
/* CSS Document */

.show_pc {display: block!important}
.show_sp {display: none !important}
.margin_none p {margin: 0;}
@media only screen and (max-width: 640px) {
.show_pc {display: none !important}
.show_sp {display: block!important}
}

.center_layout { display: flex;
	justify-content: space-between;
flex-wrap: wrap;}

	.center_layout_item  {
		width: 100%;}


/* テキスト */
body {font-family: 'Yu Gothic medium', sans-serif;}
p {margin: 0 0 10px 0;}
h2 {font-size: 36px; line-height: 1.4;}

@media only screen and (max-width: 1024px) {
h2 {font-size: 30px;}
}

.font-pink {color:#E52E8A}

/*font family*/
.font-fm01{font-family: 'YuGoPr6N-Medium', sans-serif}
.font-fm02{font-family: 'YuGoPr6N-Bold', sans-serif}


/*font size*/
.font-26 {font-size: 26px;line-height: 1.2}
.font-24 {font-size: 24px;line-height: 1.2}
.font-22 {font-size: 22px;line-height: 1.2}
.font-22s {font-size: 22px;line-height: 1.4}
.font-20 {font-size: 20px;line-height: 1.4}
.font-18 {font-size: 18px;line-height: 1.5}
.font-18s {font-size: 18px;line-height: 1.5}
.font-16 {font-size: 16px;line-height: 1.4}
.font-15 {font-size: 15px;line-height: 1.3}
.font-14 {font-size: 14px;line-height: 1}
.font-12 {font-size: 12px;line-height: 1.25}
.font-10 {font-size: 10px;line-height: 1}

@media only screen and (max-width: 1024px) {
/*font size*/
.font-26 {font-size: 22px;line-height: 1.2}
.font-24 {font-size: 20px;line-height: 1.2}
.font-22 {font-size: 20px;line-height: 1.2}
.font-22s {font-size: 20px;line-height: 1.4}
.font-20 {font-size: 19px;line-height: 1.4}
.font-18 {font-size: 18px;line-height: 1.5}
.font-18s {font-size: 18px;line-height: 1.5}
.font-16 {font-size: 14px;line-height: 1.4}
.font-15 {font-size: 14px;line-height: 1.3}
.font-14 {font-size: 14px;line-height: 1}
.font-12 {font-size: 12px;line-height: 1.25}
.font-10 {font-size: 10px;line-height: 1}
}

@media only screen and (max-width: 640px) {
/*font size*/
.font-26 {font-size: 18px;line-height: 1.2}
.font-24 {font-size: 18px;line-height: 1.2}
.font-22 {font-size: 18px;line-height: 1.2}
.font-22s {font-size: 18px;line-height: 1.25}
.font-20 {font-size: 16px;line-height: 1.4}
.font-18 {font-size: 16px;line-height: 1.5}
.font-18s {font-size: 15px;line-height: 1.5}
.font-16 {font-size: 14px;line-height: 1.4}
.font-15 {font-size: 13px;line-height: 1.3}
.font-14 {font-size: 12px;line-height: 1}
.font-12 {font-size: 12px;line-height: 1.25}
.font-10 {font-size: 9px;line-height: 1}
}


/* 見出し */

.item_cat {
	font-size: 36px;
	font-weight: bold;
	line-height: 1.4;
	position: relative;
}
.item_cat::after {
content: "";
display: block;
width: 100%;
border-bottom: 1px solid #BABABA;
position: absolute;
top: 50%;
left: 0;
z-index: 0;
}
.item_cat p span{background-color: #FFF;padding: 10px 30px;position: relative;z-index: 5;}

.rerise_cat {
border: 1px solid #F7B502;
padding: 30px;
}
.recommend {
border-radius: 10px;
background-color: #FFF2E4 !important;
padding: 20px !important;
}
.recommend .g-TileLinkHUnit__inner {display: none;}

@media only screen and (max-width: 1024px) {
.item_cat {font-size: 28px;}
.rerise_cat {
padding: 30px;
}
.item_cat p span{background-color: #FFF;padding: 8px 25px;position: relative;z-index: 5;}
}

@media only screen and (max-width: 640px) {
.item_cat {font-size: 24px;}
.rerise_cat {
padding: 20px;
}
.recommend {
padding: 0 10px !important;
}
.item_cat p span{background-color: #FFF;padding: 5px 10px;position: relative;z-index: 5;}
}


/* マーカー */

span.marker-bl {background: linear-gradient(transparent 50%, #d4e0e6 50%);}
span.marker-y {background: linear-gradient(transparent 50%, #ffef7f 50%);}
span.marker-p {background: linear-gradient(transparent 75%, #eeb4cd 75%);}


/* 色 */
.pink {color: #d4145a;}
.yellow {color: #e9b630;}
.blue {color: #8ec4e0;}


/* テキスト装飾 */

.ase {padding: 10px 0 0 !important;position: relative;z-index: 10;}
.ase::before {
content: "";
background: url(/content/dam/sites/kao/www-kao-co-jp/blaune/merit/sweat.png) 0 center no-repeat;
background-size: 100% auto;
position: absolute;
top: 5px;
left: 73%;
width: 26px;
height: 30px;
transform: translate(-50%,0);
z-index: -1;
}

@media only screen and (max-width: 1024px) {
.ase::before {
content: "";
background: url(/content/dam/sites/kao/www-kao-co-jp/blaune/merit/sweat.png) 0 center no-repeat;
background-size: 100% auto;
position: absolute;
top: 7px;
left: 77%;
width: 22px;
height: 30px;
transform: translate(-50%,0);
z-index: -1;
}
}

@media only screen and (max-width: 640px) {
.ase::before {
content: "";
background: url(/content/dam/sites/kao/www-kao-co-jp/blaune/merit/sweat.png) 0 center no-repeat;
background-size: 100% auto;
position: absolute;
top: 35px;
left: 86%;
width: 22px;
height: 30px;
transform: translate(-50%,0);
z-index: -1;
}
}


/* アコーディオン */
#area-Contents .retouch_wrap.g-AccordionMenu {display: flex;flex-wrap: wrap;}
#area-Contents .retouch_wrap .g-AccordionMenu__item {width: 30%; margin: 0 1.66667% 30px;}
#area-Contents .retouch_wrap .g-AccordionUnit {height: 100%;display: flex;flex-direction: column;}
#area-Contents .retouch_wrap .g-AccordionUnit__titleBlock {flex: 0 0 auto;}
#area-Contents .retouch_wrap .l-AccordionUnit__contentBlock {height: auto;flex: 1 1 auto;}
#area-Contents .retouch_wrap .menu01 .l-AccordionUnit__titleBlock {background-color: #F0E1F5;border: 1px #F0E1F5 solid;box-shadow: 0 0 8px #F0E1F5;}
#area-Contents .retouch_wrap .menu02 .l-AccordionUnit__titleBlock {background-color: #FAE1F0;border: 1px #FAE1F0 solid;box-shadow: 0 0 8px #FAE1F0;}
#area-Contents .retouch_wrap .menu03 .l-AccordionUnit__titleBlock {background-color: #FAF0D2;border: 1px #FAF0D2 solid;box-shadow: 0 0 8px #FAF0D2;}
#area-Contents .retouch_wrap .menu04 .l-AccordionUnit__titleBlock {background-color: #F5D2DC;border: 1px #F5D2DC solid;box-shadow: 0 0 8px #F5D2DC;}
#area-Contents .retouch_wrap .menu05 .l-AccordionUnit__titleBlock {background-color: #E1DCFA;border: 1px #E1DCFA solid;box-shadow: 0 0 8px #E1DCFA;}
#area-Contents .qa {background-color: #e5e5e5;border: 1px #777777 solid;}
#area-Contents .retouch_wrap .g-AccordionUnit__titleBlock {padding: 20px 15px 15px;}
#area-Contents .retouch_wrap .l-AccordionUnit__contentBlock {border: none;}
#area-Contents .retouch_wrap .is-colorset--1 .l-ButtonUnit__link,
#area-Contents .retouch_wrap .is-colorset--1 .l-ButtonUnit__link .l-ButtonUnit__link__icon{color: #333;}
#area-Contents .retouch_wrap .btn-circle-detail {margin: 25px auto;}
@media only screen and (max-width: 1024px) {
#area-Contents .retouch_wrap .g-AccordionMenu__item {width: 47%; margin: 0 1.5% 30px;}
}
@media only screen and (max-width: 640px) {
#area-Contents .retouch_wrap .g-AccordionMenu__item {width: 100%; margin: 0 0 20px;}
#area-Contents .menu01 .g-AccordionUnit__titleBlock__icon,
#area-Contents .menu02 .g-AccordionUnit__titleBlock__icon,
#area-Contents .menu03 .g-AccordionUnit__titleBlock__icon {right:0.5em;}
}

.shadow_menu01 .l-AccordionUnit__contentBlock {box-shadow: 0 0 8px #F0E1F5;}
.shadow_menu02 .l-AccordionUnit__contentBlock {box-shadow: 0 0 8px #FAE1F0;}
.shadow_menu03 .l-AccordionUnit__contentBlock {box-shadow: 0 0 8px #FAF0D2;}
.shadow_menu04 .l-AccordionUnit__contentBlock {box-shadow: 0 0 8px #F5D2DC;}
.shadow_menu05 .l-AccordionUnit__contentBlock {box-shadow: 0 0 8px #E1DCFA;}

/* 私にぴったりのブローネは？ */

.menu01_itemlist {background-color: #faedf3;}
.menu02_itemlist {background-color: #FFF; border: 30px #f8f4ff solid; border-radius: 0 0 10px 10px; border-top: none;}
.menu02_2_itemlist {background-color: #FFF; border: 30px #fff3e5 solid; border-radius: 0 0 10px 10px; border-top: none;}
.menu03_itemlist {background-color: #FFF; border: 30px #fceaf2 solid; border-radius: 0 0 10px 10px; border-top: none;}
.menu04_itemlist {background-color: #FBEAF2;}
.menu01_itemlist li a,.menu02_itemlist li a,.menu02_2_itemlist li a,.menu03_itemlist li a,.menu04_itemlist li a {text-decoration: none;}
.notice_waku {padding: 3px;border: 1px solid #000;display: inline-block;}
.color_waku{padding: 3px;border: 1px solid #000;background-color: #FFF; display: inline-block;line-height: 1.5;margin-bottom: 15px; text-align: center;}

@media only screen and (max-width: 1024px) {
.menu02_itemlist {background-color: #FFF; border: 20px #f8f4ff solid; border-radius: 0 0 10px 10px; border-top: none;}
.menu02_2_itemlist {background-color: #FFF; border: 20px #fff3e5 solid; border-radius: 0 0 10px 10px; border-top: none;}
.menu03_itemlist {background-color: #FFF; border: 20px #fceaf2 solid; border-radius: 0 0 10px 10px; border-top: none;}
}

@media only screen and (max-width: 640px) {
.menu02_itemlist {background-color: #FFF; border: 10px #f8f4ff solid; border-radius: 0 0 10px 10px; border-top: none;}
.menu02_2_itemlist {background-color: #FFF; border: 10px #fff3e5 solid; border-radius: 0 0 10px 10px; border-top: none;}
.menu03_itemlist {background-color: #FFF; border: 10px #fceaf2 solid; border-radius: 0 0 10px 10px; border-top: none;}
.opt-sm-w5p {width: 7%}
.g-HeadingTitle.is-layoutL .g-HeadingTitle__titleBlock__imageBox{padding-right: 10px;}
}


/* カラー　*/

.bg-pink01 {background-color: #ffdaef;}
.bg-pink02 {background-color: #f8cfdf;}
.bg-pink03 {background-color: #ffb6de;}
.bg-palepink {background-color: #faedf3;}
.bg-palepink02 {background-color: #fceaf2;}
.bg-purple {background-color: #eee4ff;}
.bg-palepurple {background-color: #f8f4ff;}
.bg-orange {background-color: #ffc887;}
.bg-paleorange {background-color: #fff3e5;}
.bg-yellow {background-color: #e9b630;}
.bg-paleyellow {background-color: #fcf4e0;}
.bg-blue {background-color: #8ec4e0;}
.bg-paleblue {background-color: #eef6fa;}

/* 角丸 */
.border_circle04 {border-radius: 4px;}
.border_circle10 {border-radius: 10px;}
.border_circle_t10 {border-radius: 10px 10px 0 0;}
.border_circle_b10 {border-radius: 0 0 10px 10px;}

/* 線 */
.border-pink {border-bottom: 1px #e15291 solid; padding: 0.2rem 0}
/* .border-white {border-top: 2px #ffffff solid;} */
.border-white{
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}
.border-white:before {
  content: '';
  position: absolute;
  left: 50%;
  top: -10px;/*線の上下位置*/
  display: inline-block;
  width: 97%;/*線の長さ*/
  height: 2px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #FFFFFF;/*線の色*/
}

/* 位置調整 */
.pc-center {text-align: center;}
.mt0 {margin-top: 0px}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mt60 {margin-top: 60px}
.mt70 {margin-top: 70px;}
.mt80 {margin-top: 80px;}
.mt90 {margin-top: 90px}
.mt100 {margin-top: 100px}
.mt120 {margin-top: 120px}
.mb30 {margin-bottom: 30px;}

.cq-dd-image {margin-bottom: 0px;}

@media only screen and (max-width: 640px) {
.center {text-align: center;}
}


/* 余白調整 */
.g-TileLinkVUnit {padding: 0 20px;}
.l-LabelTagUnit.is-colorset2 {margin: 5px 0 -15px 0;}
.l-LabelTagUnit {margin-right: 0.4em;}
.g-HeadingTitle {margin-bottom: 0px;}
.g-AccordionUnit__titleBlock {padding: 0px 1.875em 0 10px;}
.g-HeadingTitle__p l-HeadingTitle__p {margin-bottom: 0px;}

/* チェックリスト */

.list_check-wrap {
    list-style:  none;  /* デフォルトのアイコンを消す */
    margin:  0;         /* デフォルト指定上書き */
    padding: 0;         /* デフォルト指定上書き */
}

.list_check:before {
    content:  "";                 			/* 空の要素作成 */
    width: 28px;                            /* 幅指定 */
    height: 28px;                           /* 高さ指定 */
    display:  inline-block;                 /* インラインブロックにする */
    position:  relative;                    /* アイコンの位置を調整 */
    top: 3px;                             /* アイコンの位置を調整 */
    margin-right: 5px;                      /* 余白指定 */
    background-image:  url(/content/dam/sites/kao/www-kao-co-jp/blaune/merit/check01.png);  /* アイコン指定 */
    background-size:  contain;              /* アイコンの大きさ指定 */
    background-repeat:  no-repeat;          /* アイコンをリピートしないようにする */
    vertical-align: top;                    /* アイコンの位置を調整 */
}

.list_check {
    padding:  10px;                         /* 余白指定 */
    margin-bottom: 5px;                     /* 要素と要素の間指定 */
    font-size:  20px;                       /* 文字サイズ指定 */
}

/*　リスト　*/
ul.list_wrap {
    list-style:  none;  /* デフォルトのアイコンを消す */
    margin:  0;         /* デフォルト指定上書き */
    padding: 0;         /* デフォルト指定上書き */
	padding-left: 1em;
	text-align: left;
}


li.iconList:before {
    content:  "";     /* 空の要素作成 */
    width:  10px;               /* 幅指定 */
    height:  10px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #e52e8a;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    top: -1px;                  /* 位置調整 */
    margin-right: 0.4em;          /* 余白指定 */
				margin-left: -1em;
}

li.iconList-yellow:before {
    content:  "";     /* 空の要素作成 */
    width:  10px;               /* 幅指定 */
    height:  10px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #e9b630;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    top: -1px;                  /* 位置調整 */
    margin-right: 0.4em;          /* 余白指定 */
				margin-left: -1em;
}

li.iconList-blue:before {
    content:  "";     /* 空の要素作成 */
    width:  10px;               /* 幅指定 */
    height:  10px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #8ec4e0;  /* 背景色指定 */
    border-radius:  50%;        /* 要素を丸くする */
    position:  relative;        /* 位置調整 */
    top: -1px;                  /* 位置調整 */
    margin-right: 0.4em;          /* 余白指定 */
				margin-left: -1em;
}


li {
	list-style: none;
}

/*髪色シミュレーション*/
.sim_wrap .g-ImageTextHP__contentsBlock {display: flex; align-content: center;align-items: center;flex-wrap: wrap;}

/*ボタン*/
/* .btn-circle a, .g-ButtonUnit__link {border-radius: 999px;} */
.btn-circle .l-ButtonUnit__link {border-radius: 999px;}
.btn-circle-detail .l-ButtonUnit__link {border-radius: 999px; border: none; background: #FFDBF0;}

@media only screen and (max-width: 640px) {
	/*ボタン*/
	/* .btn-circle a, .g-ButtonUnit__link {border-radius: 999px;} */
.btn-circle-detail {text-align: center;}
}

/*
.btn-buy a {font-family: 'YuGoPr6N-Bold', sans-serif;border-radius: 5px;padding:14px 75px 14px 100px;letter-spacing: 1px;background-image:url("/is/image/content/dam/sites/kao/www-kao-co-jp/blaune/products/awa/2303/awa2303_buy_icon.png?fmt=png-alpha&hei=820");background-position: 20% center;background-repeat: no-repeat;background-size: 60px auto;background-color: #e6007e!important;color: #FFF!important;border: none!Important;}
.btn-buy a .l-ButtonUnit__link__icon {color: #FFF!important;}
.btn-buy a p {padding: 20px 20px 20px 50px!important;}

@media only screen and (max-width: 1024px) {
/*button*/

/*
.border_circle a,.g-ButtonUnit__link {font-family: 'YuGoPr6N-Bold', sans-serif;color: #000000;background-color: #ffffff;border-radius: 8px;padding:6px 25px 6px 25px;letter-spacing: 1px;}
}

@media only screen and (max-width: 640px) {
.btn-buy a {border-radius: 4px;padding:5px 10px 5px 40px;background-position: 15% center;background-repeat: no-repeat;background-size: 32px auto;}
.btn-buy a p {padding: 20px 20px 20px 30px!important;}
.border_circle a,.g-ButtonUnit__link {font-family: 'YuGoPr6N-Bold', sans-serif;color: #000000;background-color: #ffffff;border-radius: 8px;padding:4px 10px 4px 10px;letter-spacing: 1px;}
}

*/


/*button*/
.btn-buy a {font-family: 'YuGoPr6N-Bold', sans-serif;border-radius: 5px;padding:14px 75px 14px 100px;letter-spacing: 1px;}
.btn-buy a {background-image:url("/is/image/content/dam/sites/kao/www-kao-co-jp/blaune/products/awa/2303/awa2303_buy_icon.png?fmt=png-alpha&hei=820");background-position: 10% center;background-repeat: no-repeat;background-size: 60px auto;background-color: #e6007e!important;color: #FFF!important;border: none!Important;}
.btn-buy a .l-ButtonUnit__link__icon {color: #FFF!important;}
.btn-buy a p {padding: 20px 20px 20px 50px!important;}

@media only screen and (max-width: 1024px) {
/*button*/
.btn-buy a {border-radius: 4px;padding:10px 15px 10px 60px;}
.btn-buy a {background-repeat: no-repeat;background-size: 50px auto;}
}

@media only screen and (max-width: 640px) {
/*button*/
.btn-buy a {border-radius: 4px;padding:6px 10px 6px 40px;background-position: 15% center;background-repeat: no-repeat;background-size: 32px auto;}
.btn-buy a p {padding: 20px 20px 20px 30px!important;}
}