@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');

/* COMMON */
#eglp {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	line-height: 1.85;
	color: #040404;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#eglp p {
	text-align: justify;
}

#eglp .slidein_image {
	transform: translateX(-30vw);
	opacity: 0;
}
#eglp .fadein_text {
	transform: translateY(60px);
	opacity: 0;
}
#eglp .typing {
	opacity: 0;
}

#eglp * {
	transition: 0.8s
}
#eglp a img:hover {
	opacity: .7;
	transition: 0.3s
}
#eglp .detailLinkBtn {
	margin: 0 auto;
	padding: 8px 0;
	max-width: 320px;
	color: #FFF;
	text-align: center;
	background: #8a6d3b;
	line-height: 2rem;
}
	#eglp .detailLinkBtn:hover {
		opacity: .7;
	}
		#eglp .detailLinkBtn a {
			display: block;
			color: #FFF;
			text-decoration: none;
		}


/* RIBBON */
#eglp .ribbon {
	font-size: 1.4rem;
	color: #FFF;
}
#eglp .ribbon {
	--f: .5em;
	--r: .8em;
	position: absolute;
	top: 20px;
	right: calc(-1*var(--f));
	padding: 2px 12px;
	line-height: 1.8;
	background: #8a6d3b;
	border-bottom: var(--f) solid #0005;
	border-left: var(--r) solid #0000;
	clip-path: 
		polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
			calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
			var(--r) calc(50% - var(--f)/2));
}

/* FLEX */
#eglp .flex {
	display: flex;
}
	#eglp .flex.col2 > * {
		padding: 24px;
		width: 50%;
	}

#eglp .skew {
position: absolute;
		width: 100vw;
		background: #8a6d3b;
		height: 200px;
		transform: skew(0deg, 197deg);
		left: calc((1190px - 100vw) / 2);
		z-index: -1;
		top: 70px;
}

/* eyelash_care */
#eyelash_care {
	max-width: 1190px;
	margin: 0 auto;
}

#eyelash_care #eglp h2.title {
	margin: 54px 80px;
	padding: 40px 0;
	font-weight: normal;
	text-align: center;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
}

#eyelash_care #eglp .leadArea h2 {
	padding: 16px;
}
#eyelash_care #eglp .leadArea p {
	padding: 12px;
	font-size: 1.6rem;
}

#eyelash_care #eglp .kv h1 {
	height: 320px;
	text-indent: 100%;
	white-space: nowrap;
	background-image: url(/_ui/responsive/common/ui_assets/online/eg/pickup/eyelash_care/img/kv.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
	#eyelash_care #eglp .leadArea {
		padding: 24px 80px;
	}

	/* PRODUCT_BLOCK */
	#eyelash_care #eglp .product_block {
		margin: 0 12px;
	}
		#eyelash_care #eglp .product_block > div {
			position: relative;
			margin-bottom: 20px;
			padding: 24px;
			border-radius: 8px;
			background: #F5F5F5;
			z-index: 1;
		}
			#eyelash_care #eglp .product_block > div > div {
				margin-bottom: 12px;
			}
		#eyelash_care #eglp .product_block > div img {
			width: 100%;
		}

		#eyelash_care #eglp .product_block > div h2 {
			font-size: 2rem;
		}
			#eyelash_care #eglp .product_block > div h2 a {
				color: #9d988a;
			}
		#eyelash_care #eglp .product_block > div h3 {
			font-size: 2.4rem;
		}
			#eyelash_care #eglp .product_block > div h3 a {
				color: #c7a957;
			}
		#eyelash_care #eglp .product_block > div h4 {
			margin-bottom: 12px;
			font-size: 2.1rem;
		}
		#eyelash_care #eglp .product_block > div .contentArea {
		}
			#eyelash_care #eglp .product_block > div .contentArea h3 {
				padding: 18px 0;
			}
				#eyelash_care #eglp .product_block > div .contentArea p {
					padding: 8px 0;
				}

		#eyelash_care #eglp .product_block > div .uservoiceArea {
			display: flex;
			padding: 12px;
			color: #555;
			font-size: 1.6rem;
			font-family: "Yomogi";
			font-weight: 700;
		}
			#eyelash_care #eglp .product_block > div .uservoiceArea .uservoice_text {
				position: absolute;
				left: 8px;
				bottom: -20px;
				color: rgba(238, 120, 130, 0.1);
				font-family: "Noto Serif JP";
				font-size: 6.6rem;
				letter-spacing: -0.4rem;
			}

			#eyelash_care #eglp .product_block > div .uservoiceArea > div {
				position: relative;
				width: 50%;
				margin: 24px;
				padding: 24px;
				border-radius: 12px;
				background: #FFF;
				box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.2);
			}

			#eyelash_care #eglp .product_block > div .uservoiceArea > div:before {
				content: "";
				position: absolute;
				top: 8px;
				left: -18px;
				width: 64px;
				height: 16px;
				transform: rotate(-45deg);
				box-sizing: border-box;
				background-color: #ff57b1;
				mix-blend-mode: multiply;
			}
			#eyelash_care #eglp .product_block > div .uservoiceArea > div:after {
				content: "";
				position: absolute;
				top: calc(100% - 24px);
				right: -18px;
				width: 64px;
				height: 16px;
				transform: rotate(-45deg);
				box-sizing: border-box;
				background-color: #64ffb2;
				mix-blend-mode: multiply;
			}



				#eyelash_care #eglp .product_block > div .uservoiceArea .icon {
					position: absolute;
					top: -20px;
					right: -16px;
					padding: 12px;
					width: 80px;
					border-radius: 100%;
					border: 4px solid #e9cbcb;
					background: #FFF;
				}

@media screen and (max-width: 1199px){
	/*bootstrapを使用する場合。幅を1200pxとして
	左右に15pxずつpaddingをつけている為*/
	
}
@media screen and (max-width: 1169px){
	/*bootstrapを使用しない場合*/
	#eyelash_care #eglp .product_block > div .uservoiceArea .uservoice_text {
		font-size: 5.4rem;
	}
}
	
@media screen and (max-width: 1024px){
	#eyelash_care #eglp .kv h1 {
		height: 240px;
	}
	#eglp .detailLinkBtn a {
		line-height: 2.8rem;
	}
	#eyelash_care #eglp .product_block > div .uservoiceArea .uservoice_text {
		font-size: 4.8rem;
	}
}

@media (max-width: 767px){
	#eyelash_care #eglp .kv h1 {
		height: 120px;
	}
	#eglp .flex {
		display: block;
	}
		#eglp .flex.col2 > * {
			padding: 0;
			width: auto;
		}

	#eyelash_care #eglp .leadArea {
		padding: 24px;
	}


	#eyelash_care #eglp h2.title {
		margin-left: 24px;
		margin-right: 24px;
	}

	#eyelash_care #eglp .product_block > div .uservoiceArea .icon {
		width: 70px;
	}
	#eyelash_care #eglp .product_block > div .uservoiceArea .uservoice_text {
		font-size: 6.6rem;
	}

		#eyelash_care #eglp .product_block > div .uservoiceArea {
			display: block;
		}
			#eyelash_care #eglp .product_block > div .uservoiceArea > div {
				margin: 24px 0;
				width: auto;
			}
}