@charset "UTF-8";
/* ============================================================
 * pg-pointmake-04.css — スタイリング アイブロウ マスカラ（眉色カバー）(pointmake/04) 専用
 * ============================================================
 *
 *  読込順序: global.css → category-pointmake.css → pg-pointmake-04.css
 *  全セレクタは `.esp-wrap.pg-pointmake-04` 配下にスコープ
 *  詳細度上限 0,3,0
 *  値は旧版から忠実に移植（変数化禁止）
 *
 *  値の出典:
 *  - 旧 esprique_old/pointmake/css/pointmake.css 行 1593-1705 （pg-eyebrow04）
 *  - 旧 esprique_old/pointmake/css/pointmake_common_ver2.css 行 1-34 （PC専用 共通 + pg-eyebrow04 .circleList 上書き）
 *  - 旧 esprique_old/common/css/product_detail.css 行 1060-1130 （pmd-secPoint 汎用ベース） 行 1552-1619 （pmd-colorChipList 汎用）
 *
 *  カスケード順:
 *    1. ベース（メディアクエリなし）       — pointmake.css L1593-1659 PC値 + product_detail.css 汎用ベース
 *    2. @media (min-width: 950px)         — pointmake_common_ver2.css 由来の PC上書き
 *    3. @media (max-width: 950px)         — pointmake.css L1662-1705 SP値 + product_detail.css 汎用SP
 *
 *  本ファイルに含まれる「04 専用 delta」:
 *    - c-secPoint（旧 .pmd-secPoint）— global 未定義のため product_detail.css ベース + 04 値
 *    - c-colorChipList__name（汎用 SP値）— pointmake_01 未使用要素
 *    - c-productMain__kvImage（旧 .kvimgWrap）— PC で flex 用ラッパ
 *
 *  汎用化候補:
 *    - c-secPoint は他 pointmake ページ（eyebrow03, eyse07 等）でも使われる。
 *      2 ページ以上で再利用が発生したら category-pointmake.css に昇格させる。
 * ============================================================ */


/* ============================================================
 * 1. ベース（メディアクエリなし）
 *    値の出典: 旧 pointmake.css 行 1593-1659 (PC) + product_detail.css 汎用
 * ============================================================ */

/* 旧 pointmake.css 行 1596-1598: .pg-eyebrow04 .md-secFtRecommend margin-top */
.esp-wrap.pg-pointmake-04 .c-recommend {
	margin-top: 0;
}

/* 旧 pointmake.css 行 1599-1601: .pg-eyebrow04 .pmd-secMainCol .topCol .dscCol .name letter-spacing */
.esp-wrap.pg-pointmake-04 .c-productMain__name {
	letter-spacing: 0.1em;
}

/* 旧 pointmake.css 行 1607-1609: prodImg margin-top -80px */
.esp-wrap.pg-pointmake-04 .c-productMain__image {
	margin-top: -80px;
}

/* 旧 pointmake.css 行 1610-1613: prodImg img max-width 134px, margin-left -60px */
.esp-wrap.pg-pointmake-04 .c-productMain__image img {
	max-width: 134px;
	margin-left: -60px;
}

/* 旧 pointmake.css 行 1614-1616: .pg-eyebrow04 .pmd-secMainCol .circleList margin-top 35px
   ※ PC(≥950px) では @media min-width:950px の margin: 60px 0 0 で上書き */
.esp-wrap.pg-pointmake-04 .c-circleList {
	max-width: 141px;
}
.esp-wrap.pg-pointmake-04 .c-circleList__item {
	width: 100%;
}


/* ============================================================
 * c-productMain__kvImage（旧 .kvimgWrap）
 * ============================================================
 *  旧 pointmake_common_ver2.css 行 15-17 で width: 50% を持つが PC 専用
 *  ベース（SP込み）では幅100% — 何も書かないと flex子としてデフォルト
 */


/* ============================================================
 * c-features__body / c-features__contents — 04 専用padding
 * ============================================================
 *  旧 pointmake.css 行 1626-1639
 */

/* 旧 pointmake.css 行 1626-1629: .pg-eyebrow04 .pmd-secFeatures .secCtsWrapBg padding
   + 旧 product_detail.css 行 1024-1026 .pmd-secFeatures .secCtsWrapBg { background: #fff } */

/* 旧 pointmake.css 行 1630-1636: .pg-eyebrow04 .pmd-secFeatures .secCtsWrapBg .secCts */
.esp-wrap.pg-pointmake-04 .c-features__contents p {
	color: #d07184;
	font-size: 20px;	/* 旧 2.4rem */
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: 0.1em;
}

/* 旧 pointmake.css 行 1637-1639: .pg-eyebrow04 .pmd-secFeatures .secCts p + p */
.esp-wrap.pg-pointmake-04 .c-features__contents p + p {
	margin-top: 20px;
}


/* ============================================================
 * c-colorVariation__body — 04 専用padding
 * ============================================================
 *  旧 pointmake.css 行 1621-1624
 */

/* 旧 pointmake.css 行 1621-1624: .pg-eyebrow04 .pmd-secColor .secCts padding */
.esp-wrap.pg-pointmake-04 .c-colorVariation__body {
	padding: 80px 0 50px;
	box-sizing: border-box;
}


/* ============================================================
 * c-colorChipList — 旧 .pmd-colorChipList 汎用ベース
 * ============================================================
 *  値の出典: 旧 product_detail.css 行 1552-1591 (PC)
 *  pg-eyebrow04 では .name の表示があるため、.name 関連も含める。
 */

/* PC ベース — 旧 product_detail.css 行 1552-1591 */
.esp-wrap.pg-pointmake-04 .c-colorChipList {
	text-align: center;
	max-width: 950px;
	margin: 0 auto;
}

.esp-wrap.pg-pointmake-04 .c-colorChipList__item {
	display: inline-block;
	vertical-align: top;
	color: #000;
	margin-top: 32px;
	width: 230px;
	text-align: center;
}

.esp-wrap.pg-pointmake-04 .c-colorChipList__img img {
	width: 56px;
	height: auto;
}

.esp-wrap.pg-pointmake-04 .c-colorChipList__num {
	font-size: 15px;	/* 旧 1.5rem */
	line-height: 1.4;
	margin-top: 17px;
	letter-spacing: 0.1em;
}

.esp-wrap.pg-pointmake-04 .c-colorChipList__name {
	color: #4b4b4b;
	font-size: 13px;	/* 旧 1.3rem */
	margin-top: 6px;
	line-height: 1.35;
}


/* ============================================================
 * c-secPoint — 旧 .pmd-secPoint （04 専用 + 汎用ベース）
 * ============================================================
 *  値の出典:
 *  - 旧 product_detail.css 行 1060-1130 （汎用ベース、PC + SP）
 *  - 旧 pointmake.css 行 1641-1650 （pg-eyebrow04 PC delta）
 *  - 旧 pointmake.css 行 1689-1694 （pg-eyebrow04 SP delta）
 *
 *  BEM マッピング:
 *  - .pmd-secPoint .secInr → .c-secPoint__inner
 *  - .pmd-secPoint .secTtl → .c-secPoint__sectionTitle
 *  - .pmd-secPoint .secTtl .prodImg → .c-secPoint__prodImg
 *  - .pmd-secPoint .secTtl .txt → .c-secPoint__txt
 *  - .pmd-secPoint .secCtsWrap → .c-secPoint__body
 *  - .pmd-secPoint .secCtsWrap .secCts → .c-secPoint__contents
 */

/* PC ベース */
.esp-wrap.pg-pointmake-04 .c-secPoint__inner {
	position: relative;
	background: #f1f3f4;
	padding-top: 112px;
}

.esp-wrap.pg-pointmake-04 .c-secPoint__sectionTitle {
	position: absolute;
	top: 74px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	padding-left: 65px;	/* 旧 pointmake.css 行 1645-1647: .pg-eyebrow04 .pmd-secPoint .secTtl padding-left */
}

.esp-wrap.pg-pointmake-04 .c-secPoint__prodImg {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 48px;	/* 旧 pointmake.css 行 1648-1650: .pg-eyebrow04 .pmd-secPoint .secTtl .prodImg width */
}

.esp-wrap.pg-pointmake-04 .c-secPoint__prodImg img {
	width: 100%;
	height: auto;
}

.esp-wrap.pg-pointmake-04 .c-secPoint__txt img {
	width: 119px;
	height: auto;
}

.esp-wrap.pg-pointmake-04 .c-secPoint__body {
	padding: 93px 30px 56px;
	position: relative;
}

.esp-wrap.pg-pointmake-04 .c-secPoint__body::before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 50%;
	margin-right: -200px;
	background: #ece3e4;
}

.esp-wrap.pg-pointmake-04 .c-secPoint__contents {
	position: relative;
	z-index: 2;
	max-width: 730px;	/* 旧 pointmake.css 行 1641-1644: .pg-eyebrow04 .pmd-secPoint .secCtsWrap .secCts max-width + margin */
	margin: 0 auto;
}


/* ============================================================
 * c-howto__body / c-howto__contents — 04 専用padding
 * ============================================================
 *  旧 pointmake.css 行 1652-1655
 */

/* 旧 pointmake.css 行 1652-1655: .pg-eyebrow04 .pmd-secHowto .secCts padding */
.esp-wrap.pg-pointmake-04 .c-howto__contents {
	padding: 95px 20px 60px;
	box-sizing: border-box;
}


/* ============================================================
 * c-ttlImgDescGrid__item — 04ではグリッド親なし（standalone）
 * ============================================================
 *  category-pointmake.css の `.c-ttlImgDescGrid__item { flex: 1; padding: 0 20px; }`
 *  はグリッド前提のため、04 standalone 利用では padding を打ち消す。
 *  （旧 .pmd-ttlImgDescItem standalone は paddingを持たない — pointmake.css 行 354 は
 *   .pmd-ttlImgDescItemGrid 内の限定で詳細度0,2,0でしか効かない）
 */
.esp-wrap.pg-pointmake-04 .c-ttlImgDescGrid__item {
	padding: 0;
}


/* ============================================================
 * 2. @media (min-width: 950px) — PC専用上書き
 *    旧 pointmake_common_ver2.css 行 1-49（旧版で <link media="(min-width: 950px)"> で読込）
 * ============================================================ */

@media screen and (min-width: 950px) {

	/* 旧 pointmake_common_ver2.css 行 1-5: .pmd-secMainCol .topCol .dscCol */
	.esp-wrap.pg-pointmake-04 .c-productMain__visual {
		width: 100%;
		box-sizing: border-box;
		padding-right: 0;
	}

	/* 旧 pointmake_common_ver2.css 行 7-9: .pmd-secMainCol margin-top */
	.esp-wrap.pg-pointmake-04 .c-productMain {
		margin-top: 84px;
	}

	/* 旧 pointmake_common_ver2.css 行 11-13: .dscWrap (HTML上は c-productMain__visual と同階層、
	   c-productMain__kvImage + c-productMain__text を囲む flex親に相当)
	   新版 HTML では c-productMain__visual がその役割を兼ねるため display: flex を付与 */
	.esp-wrap.pg-pointmake-04 .c-productMain__visual {
		display: flex;
	}

	/* 旧 pointmake_common_ver2.css 行 15-17: .kvimgWrap width 50% */
	.esp-wrap.pg-pointmake-04 .c-productMain__kvImage {
		width: 50%;
	}

	/* 旧 pointmake_common_ver2.css 行 19-21: .pmd-pgTtlCol::before right 150px */
	.esp-wrap.pg-pointmake-04 .c-pageTitle::before {
		right: 150px;
	}

	/* 旧 pointmake_common_ver2.css 行 23-25: .pt-simulate .inr margin */
	.esp-wrap.pg-pointmake-04 .c-simulate__link {
		margin: 0 auto 0 0;
	}

	/* 旧 pointmake_common_ver2.css 行 32-34: .pg-eyebrow04 .pmd-secMainCol .circleList margin */

}


/* ============================================================
 * 3. @media (max-width: 950px) — SP値
 *    旧 pointmake.css 行 1662-1705
 *    + product_detail.css 汎用 SP（c-colorChipList）
 * ============================================================ */

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

	/* 旧 pointmake.css 行 1663-1665: prodImg margin-top -15px */
	.esp-wrap.pg-pointmake-04 .c-productMain__image {
		margin-top: -15px;
	}

	/* 旧 pointmake.css 行 1666-1669: prodImg img max-width 106px, margin-left 0 */
	.esp-wrap.pg-pointmake-04 .c-productMain__image img {
		max-width: 106px;
		margin-left: 0;
	}

	/* 旧 pointmake.css 行 1670-1672: .pg-eyebrow04 .pmd-secMainCol .circleList margin-top SP */
	.esp-wrap.pg-pointmake-04 .c-circleList {
		max-width: 97px;
	}

	/* 旧 pointmake.css 行 1674-1676: .pg-eyebrow04 .pmd-secColor .secCts padding SP */
	.esp-wrap.pg-pointmake-04 .c-colorVariation__body {
		padding: 45px 0 20px;
	}

	/* 旧 pointmake.css 行 1678-1681: .pg-eyebrow04 .pmd-secFeatures .secCtsWrapBg padding SP */

	/* 旧 pointmake.css 行 1682-1684: .pg-eyebrow04 .pmd-secFeatures .secCtsWrapBg .secCts font-size SP */
	.esp-wrap.pg-pointmake-04 .c-features__contents p {
		font-size: 16px;	/* 旧 1.6rem */
	}

	/* 旧 pointmake.css 行 1685-1687: .pg-eyebrow04 .pmd-secFeatures .secCts p + p SP */
	.esp-wrap.pg-pointmake-04 .c-features__contents p + p {
		margin-top: 15px;
	}

	/* c-secPoint SP — 旧 product_detail.css 行 1108-1129 + pointmake.css 行 1689-1694 */
	.esp-wrap.pg-pointmake-04 .c-secPoint__inner {
		padding-top: 63px;
	}

	.esp-wrap.pg-pointmake-04 .c-secPoint__sectionTitle {
		top: 45px;
		left: 50%;
		padding-left: 40px;	/* 旧 pointmake.css 行 1689-1691: .pg-eyebrow04 .pmd-secPoint .secTtl SP padding-left */
	}

	.esp-wrap.pg-pointmake-04 .c-secPoint__prodImg {
		width: 35px;	/* 旧 pointmake.css 行 1692-1694: .pg-eyebrow04 .pmd-secPoint .secTtl .prodImg SP width */
	}

	.esp-wrap.pg-pointmake-04 .c-secPoint__txt img {
		width: 72px;
	}

	.esp-wrap.pg-pointmake-04 .c-secPoint__body {
		padding: 62px 0 39px;
	}

	.esp-wrap.pg-pointmake-04 .c-secPoint__body::before {
		right: 40px;
		margin-right: 0;
		width: calc(100% - 25px);
	}

	/* 旧 pointmake.css 行 1696-1698: .pg-eyebrow04 .pmd-secHowto .secCts padding SP */
	.esp-wrap.pg-pointmake-04 .c-howto__contents {
		padding: 50px 10px 25px;
		box-sizing: border-box;
	}

	/* 旧 pointmake.css 行 1702-1704: .pg-eyebrow04 .pt-simulate margin-top SP */
	.esp-wrap.pg-pointmake-04 .c-simulate {
		margin-top: 30px;
	}

	/* c-colorChipList SP — 旧 product_detail.css 行 1595-1615 汎用 */
	.esp-wrap.pg-pointmake-04 .c-colorChipList__item {
		margin-top: 25px;
		width: 105px;
	}

	.esp-wrap.pg-pointmake-04 .c-colorChipList__img img {
		width: 50px;
		height: auto;
	}

	.esp-wrap.pg-pointmake-04 .c-colorChipList__num {
		font-size: 12px;	/* 旧 1.2rem */
		margin-top: 12px;
	}

	.esp-wrap.pg-pointmake-04 .c-colorChipList__name {
		color: #4b4b4b;
		font-size: 10px;	/* 旧 1rem */
		margin-top: 5px;
		line-height: 1.4;
	}

}