@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap');

.margin_none p {margin: 0;}

/* brand header */
#area-BrHeader {
	position: relative;
	z-index: 102;
	max-width: 450px;
	margin: 0 auto;
}
#liese_headmenu .menu.active {
	position: fixed;
	top: 0;
	right: calc(50% - 225px);
}
#liese_header .liese_head_logo.active {
	position: fixed;
	top: 15px;
	left: calc(50% - 210px);
}
@media only screen and (max-width: 640px) {
	#area-BrHeader {
		max-width: unset;
	}
	#liese_headmenu .menu.active {
		top: 0;
		right: 0;
	}
	#liese_header .liese_head_logo.active {
		top: 15px;
		left: 15px;
	}
}

/* SP特化 背景画像ロゴ表示 */
.bg_pc_wrap {
	position: fixed;
	z-index: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	top: 0;
	left: 0;
}
.bg_pc_wrap::before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background-repeat: no-repeat;
	background: url('/content/dam/sites/kao/www-kao-co-jp/liesecolor/lineup_awa/2610/bg_awa.jpg');
	background-size: cover;
	background-position: center center;
}

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

}
@media only screen and (max-width: 640px) {
	.bg_pc_wrap {
		display: none;
	}
}

/*color*/
.col00 {color: #333333}
.col01 {color: #753b30}
.col01b {color: #753b30;-webkit-text-stroke: 1px #753b30;}
.col02 {color: #FFF}
.col03 {color: #4b4b4b}
.col04 {color: #333333}
.col05 {color: #ab472c}

/*font size*/
.font-12 {font-size: clamp(11px,0.75em,13px);line-height: 1.5;}
.font-16 {font-size: clamp(15px,1em,17px);line-height: 1.5;}
.font-18 {font-size: clamp(16px,1.125em,20px);line-height: 1.5;}
.font-22 {font-size: clamp(20px,1.375em,24px);line-height: 1.4;}
.font-24 {font-size: clamp(22px,1.5em,26px);line-height: 1.4;}

/*font family*/
.font-fm00 {
font-family: "Playfair Display", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variant-numeric: lining-nums;
-webkit-font-feature-settings: "lnum" 1;
font-feature-settings: "lnum" 1;
}
.font-fm01 {
font-family: 'TT-PA1GothicStd-Regular', sans-serif;
}
.font-fm02 {
font-family: 'TT-PA1GothicStd-Medium', 'TT-PA1GothicStd-Regular', sans-serif;
font-weight: bold !important;
}

/*under line*/
.ul-pink {background: linear-gradient(transparent 60%, #fcc7bc 60%);}

/*bg*/
.bg00 {background: url('/content/dam/sites/kao/www-kao-co-jp/liesecolor/lineup_awa/2610/bg01.jpg') top center repeat-y;background-size: 100% auto;}
.bg01 {background-color: #f9e1d6;}

.bg_sec01 {position: relative;padding-bottom: 10%;}
.bg_sec01::after {background:url('/content/dam/sites/kao/www-kao-co-jp/liesecolor/lineup_awa/2610/bg_img01.png');background-position: bottom center;background-size: 100% auto; background-repeat: no-repeat;content: "";display: block;width: 100%;padding-bottom: 22.4%;position: absolute;left: 0;bottom: 0;}
.bg_sec02 {position: relative;padding-bottom: 10%;}
.bg_sec02::before {background:url('/content/dam/sites/kao/www-kao-co-jp/liesecolor/lineup_awa/2610/bg_img02.png');background-position: top center;background-size: 100% auto;background-repeat: no-repeat;content: "";display: block;width: 100%;padding-top: 22.4%;position: absolute;left: 0;top: 0;}

/*midashi*/
.ttl_h2_en {font-size:40px;line-height: 1.6; color:#753b30;font-family: "Playfair Display", serif;font-variant-numeric: lining-nums;-webkit-font-feature-settings: "lnum" 1;font-feature-settings: "lnum" 1;padding:15px 0 0;position:relative;}
.ttl_h2_en::before {content: "";display: inline-block;width: 128px;height: 16px;position: absolute;top: 0;left: 50%;transform: translate(-50%,0);background: url('/content/dam/sites/kao/www-kao-co-jp/liesecolor/lineup_awa/2610/ico_ttl_elm.svg') top center no-repeat;background-size: 100% auto;}
.ttl_h2_jp {font-size: 16px;color: #333;font-family: 'TT-PA1GothicStd-Medium', 'TT-PA1GothicStd-Regular', sans-serif;font-weight: bold !important;}

/*uruoi*/
.uruoi_wrap {padding:20px 20px 15px 20px;margin-top: 5px; background-color:rgba(255,255,255,0.80);border-radius:10px;}
.uruoi_ttl {font-size: 18px;color: #000;font-family: 'TT-PA1GothicStd-Medium', 'TT-PA1GothicStd-Regular', sans-serif;font-weight: bold !important;padding-left: 30px;background: url('/content/dam/sites/kao/www-kao-co-jp/liesecolor/lineup_awa/2610/ico_component.png') left center no-repeat;background-size: 26px auto;}
.uruoi_ttl span {background: linear-gradient(0deg,rgba(252, 199, 188, 1) 20%, rgba(255, 255, 255, 0) 20%);}

/*tre*/
.tre_wrap {padding:5px 20px 15px 20px;margin-top: 25px; background-color:rgba(255,255,255,0.80);border-radius:10px;text-align: center;}
.tre_ttl {font-size: 30px;text-decoration: underline;color: #753b30;}
.tre_ttl sup {font-size: 0.5em;vertical-align: super;}
.coltre_wrap {margin-top: -40px}
.coltre_wrap .g-ImageTextHP--v2__contentsBlock {align-items: center !important;}

.kome-list {
list-style: none;
counter-reset: kome-counter;
padding-left: 0;
margin: 10px 0 0 0;
}
.kome-list li {
font-size: 12px;
line-height: 1.4;
color: #333;
counter-increment: kome-counter;
position: relative;
padding-left: 2.25em;
text-indent: -2.25em;
}
.kome-list li::before {
content: "※" counter(kome-counter) " ";
}

/*colvar*/
.bg_colvar {background: url('/content/dam/sites/kao/www-kao-co-jp/liesecolor/lineup_awa/2610/awa_img05.png') top center no-repeat;background-size: 100% auto;padding: 23% 0 102%}
.line_catch {font-size:16px;text-align:center;color:#000;position:relative;}
.line_catch::before {content: "";display: block;width: 40px;border-top: 1px solid #ab472c;padding-top: 12px;margin: 0 auto;}

/*how to*/
.howto_wrap {background-color: rgba(255,255,255,0.90);position: relative;padding: 20px 20px 10px;}
#area-Contents .howto_wrap .g-ImageTextHP--v2__contentsBlock, #area-Contents .howto_wrap .g-ImageTextHP--v2__contentsBlock {align-items: center;}
.howto_h3_ttl h3 {position: absolute;color: #FFF!important;text-align: center;font-size: 18px;font-family: 'TT-PA1GothicStd-Regular', sans-serif;top: 0;left: 50%;transform: translate(-50%,-100%);z-index: 10;width: 100%;}
.howto_h3_ttl em {font-size: 26px;font-family: "Playfair Display", serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;font-variant-numeric: lining-nums;-webkit-font-feature-settings: "lnum" 1;font-feature-settings: "lnum" 1;}
.howto_h3_ttl h3::before {content: "";width: 244px;height: 2em; background-color: #9c6860;transform: translate(-50%,0) skewX(-15deg);position: absolute;top: 0;left: 50%;z-index: -1;}
#area-Contents .btn_awa a {background-color: #753b30;padding: 20px;font-size: 18px;color: #FFF;font-family: 'TT-PA1GothicStd-Medium', 'TT-PA1GothicStd-Regular', sans-serif;font-weight: bold !important;}
#area-Contents .btn_awa a .l-ButtonUnit__link__icon {color:#FFF;}