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

#high-review {
	color: #FFF;
	font-size: 14px;
	font-family: "Noto Serif JP";
	box-sizing: border-box;
	background-color: #002347;
	transition: 1s;
/*
background-image: url(../eyelash_img/star1.png);
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
*/
}

/*----- OVERRIDE -----*/
#pickupArea {
	margin-bottom: 0;
}

div.visible-md.visible-xs.visible-sm:has(+ footer){
	position: relative;
	z-index: 1;
	background: #FFF;
}
footer {
	position: relative;
	z-index: 1;
}

/*----- BACKGROUND COLOR CHANGER -----*/
#high-review.background_color_extension{background-color: #002347;}
#high-review.background_color_glue {background-color: #9c450a;}
#high-review.background_color_tweezer {background-color: #013220;}
#high-review.background_color_remover {background-color: #182946;}
#high-review.background_color_pretreatment {background-color: #9c450a;}
#high-review.background_color_lashliftcosme {background-color: #751029;}
#high-review.background_color_lashliftglue {background-color: #002347;}
#high-review.background_color_lashliftrod {background-color: #013220;}
#high-review.background_color_eyebrow {background-color: #6e1f1d;}
#high-review.background_color_esaleproduct {background-color: #9c450a;}
#high-review.background_color_recliningchair {background-color: #7c0523;}
#high-review.background_color_stool {background-color: #7c0523;}
#high-review.background_color_wagon {background-color: #7c0523}
#high-review.background_color_light {background-color: #7c0523;}
ss
/*----- COMMON -----*/
#high-review img {
	width: 100%;
}

#high-review a {
	color: inherit;
	font-size: inherit;
	text-decoration: none;
}

#high-review ::selection {
	color: #FFF;
	background: #ff9541;
}

/*----- H1 H2 H3 H4-----*/
#high-review h1,
#high-review h2,
#high-review h3,
#high-review h4 {
	margin: 0;
	color: #FFF;
	font-weight: 300;
}

#high-review h2 {
	position: relative;
	margin: 128px 0 24px 0;
	text-align: center;
	font-size:2.5em;
}
	#high-review h2::before {
		position: absolute;
		left: 0;
		top: -64px;
		width: 100%;
		color: rgba(255, 255, 255, 0.2);
		font-size: 100px;
		font-family: "Bonheur Royale";
		text-align: center;
		letter-spacing: 5px;
	}

	#high-review h2#extension::before { content: "Extension";}
	#high-review h2#glue::before { content: "Extension Glue";}
	#high-review h2#tweezer::before { content: "Tweezer";}
	#high-review h2#remover::before { content: "Remover";}
	#high-review h2#pretreatment::before { content: "Pre-treatment";}
	#high-review h2#lashliftcosme::before { content: "Lashlift Set Cosme";}
	#high-review h2#lashliftglue::before { content: "Lashlift Glue";}
	#high-review h2#lashliftrod::before { content: "Lashlift Rod";}
	#high-review h2#eyebrow::before { content: "Eyebrow";}
	#high-review h2#esaleproduct::before { content: "Esalasproduct";}
	#high-review h2#recliningchair::before { content: "Recliningchair";}
	#high-review h2#stool::before { content: "Stool";}
	#high-review h2#wagon::before { content: "Wagon";}
	#high-review h2#light::before { content: "Light";}

/*----- NAV -----*/
#high-review #globalNav {
	position: sticky;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	top: 0;
	font-family: "Noto Sans JP";
	z-index: 2;
}
	#high-review #globalNav > div {
		position: relative;
		padding: 8px 0px 16px 0;
		flex: 1 1 0;
		text-align: center;
		background: rgba(0,0,0,0.5);
		cursor: pointer;
		transition: .5s;
		border-bottom: 1px dashed rgba(255, 255, 255, 0.8);
	}
		#high-review #globalNav > div::after {
			content: "";
			position: absolute;
			bottom: 10px;
			left: 50%;
			width: 10px;
			height: 10px;
			border-top: 2px solid #FFF;
			border-right: 2px solid #FFF;
			transform: rotate(135deg) translate(75%);
		}

		#high-review #globalNav > div:hover {
			color: #333;
			background: #FFF;
		}

/*----- MODAL -----*/
#high-review #modalArea {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 960px;
	border-radius: 32px;
	background: #332919;
	box-shadow: 0 0 48px 8px rgba(255, 255, 255, 0.4);
	z-index: 10;
}
	#high-review #modalAreaBack {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100dvh;
		background: rgba(0,0,0,0.6);
		z-index: 3;
	}

	#high-review #modalArea .categoryArea	{
		max-width: none;
	}
	#high-review #modalArea .categoryArea .itemArea {
		display: flex;
		flex-wrap: wrap;
		margin: 20px 38px 0 38px;
		padding: 33px;
		cursor: default
	}
		#high-review #modalArea .categoryArea .itemArea > * {
			width: 50%;
		}
		#high-review #modalArea .categoryArea .itemArea > *:last-child {
			padding: 12px 12px 12px 28px;
		}
		#high-review #modalArea .categoryArea .itemArea:first-child h3,
		#high-review #modalArea .categoryArea .itemArea:first-child h4 {
			text-align: left;
		}


	#high-review #modalArea .categoryArea .itemArea .priceArea {
		margin-bottom: 24px;
		text-align: left;
		font-size: 2.4rem;
	}
		#high-review #modalArea .categoryArea .itemArea .priceArea span {
			font-size: 1.6rem;
		}

	#high-review #modalArea .categoryArea .reviewArea {
		display: block;
	}
		#high-review #modalArea .categoryArea .reviewArea .body {
			margin-bottom: 24px;
		}
			#high-review #modalArea .categoryArea .reviewArea .body:nth-child(odd) {
				margin: 12px 32px 24px 0;
			}
			#high-review #modalArea .categoryArea .reviewArea .body:nth-child(even) {
				margin-left: 80px;
			}
				#high-review #modalArea .categoryArea .reviewArea .body p {
					position: relative;
				}
				#high-review #modalArea .categoryArea .reviewArea .body p::after {
					content: "";
					position: absolute;
					top: -10px;
					width: 75px;
					height: 75px;
					background-color: #FFF;
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
					border-radius: 50%;
				}
					#high-review #modalArea .categoryArea .reviewArea .body:nth-child(odd) p::after {
						right: -100px;
					}
						#high-review #modalArea .categoryArea .reviewArea .body:nth-child(odd) p.person_01::after {background-image: url("../img/person_01.jpg");}
						#high-review #modalArea .categoryArea .reviewArea .body:nth-child(odd) p.person_02::after {background-image: url("../img/person_02.jpg");}
						#high-review #modalArea .categoryArea .reviewArea .body:nth-child(odd) p.person_03::after {background-image: url("../img/person_03.jpg");}
						#high-review #modalArea .categoryArea .reviewArea .body:nth-child(odd) p.person_04::after {background-image: url("../img/person_04.jpg");}
						#high-review #modalArea .categoryArea .reviewArea .body:nth-child(odd) p.person_05::after {background-image: url("../img/person_05.jpg");}

						/* FIRST */
						#high-review .categoryArea .itemArea:first-child > .reviewArea .body.person_01::after { background-image: url("../img/person_01.jpg");}
						#high-review .categoryArea .itemArea:first-child > .reviewArea .body.person_02::after { background-image: url("../img/person_02.jpg");}
						#high-review .categoryArea .itemArea:first-child > .reviewArea .body.person_03::after { background-image: url("../img/person_03.jpg");}
						#high-review .categoryArea .itemArea:first-child > .reviewArea .body.person_04::after { background-image: url("../img/person_04.jpg");}
						#high-review .categoryArea .itemArea:first-child > .reviewArea .body.person_05::after { background-image: url("../img/person_05.jpg");}


					#high-review #modalArea .categoryArea .reviewArea .body:nth-child(even) p::after {
						left: -100px;
						background-image: url("../img/person_02.png");
					}

		#high-review #modalArea .categoryArea .itemArea .closeBtn {
			position: absolute;
			top: -13px;
			right: 10px;
			font-size: 5rem;
			cursor: pointer;
		}


/*----- KEY VISUAL-----*/
#high-review #kv {
	position: relative;
	margin: 0 auto;
	max-width: 1120px;
	overflow: hidden;
	z-index: 2;
}
	#high-review #kv img {
		width: 100%;
	}
	#high-review #kv .inner {
		position: absolute;
		left: 0;
		white-space: nowrap;
	}

#high-review #plx {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100dvh;
	background-image: url("../eyelash_img/back_star.png");
	background-repeat: no-repeat;
	background-size: cover;
}
	#high-review #plx img {
		position: absolute;
		display: block;
		opacity: 1;
	}


/*----- LAYOUT-----*/
#high-review #container {
}

/*----- CATEGORY AREA-----*/
	#high-review .categoryArea {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;
		max-width: 840px;
		width: 100%;
	}

#high-review .categoryArea::before {
	content: '';
	display:block;
	position:absolute;
	top: -176px;
	left: 50%;
	transform: translateX(-50%);
	width: 500px;
	height: 58px;	
	background-position: center;		
	background-image:url('../eyelash_img/ornament.png');
}


/*----- ITEM AREA-----*/
	#high-review .categoryArea .itemArea {
		position:relative;
		margin-bottom: 32px;
		padding: 12px 80px;
		width: 50%;
		text-align: justify;
		cursor: pointer;
		transition: .5s;
	}
	#high-review .categoryArea .itemArea:hover:not(:first-child){
		transform: scale(1.1, 1.1);
	}

		#high-review .categoryArea .itemArea h3 {
			padding: 4px 0;
			font-size: 1.3rem;
			font-weight: 900;
			line-height: 1em;
			color: #c3ac6e;
		}
		#high-review .categoryArea .itemArea h4 {
			margin-bottom: 12px;
			font-size: 1.6rem;
			font-weight: 600;
			word-break: break-all;
		}

		/*--- IMAGE AREA ---*/
		#high-review .categoryArea .itemArea > .imageArea {	
			margin: 0 auto 16px auto;
			position: relative;
		}

		#high-review .categoryArea .itemArea > .imageArea::after {
			content: '';
			display:block;
			position:absolute;
			top: -40px;
			left: 50%;
			transform: translateX(-50%);
			width: 100px;
			height: 58px;			
			background-image:url('../eyelash_img/crown.png');
			background-size: contain;
		}

			#high-review .categoryArea .itemArea > .imageArea img {
				width:100%;
				margin:;
				border-radius: 12px;
				background: #FFF;
			}

		/*
		#high-review .line::before {
			content: '';
			display: block;
			padding: 0 1rem;
			background-image: url();
			background-repeat: no-repeat;
			background-position: center;
			background-size: 1.5rem 1.6rem;s
			width: 1.5rem;
			height: 1.6rem;
			position: relative;
			z-index: 2;
			margin: auto;
		}

		#high-review .line::after{
			content: '';
			height: 1px;
			width: 100%;
			background-image: linear-gradient(to right, #C3AC6E 2px, transparent 2px);
			background-size: 4px 1px;
			background-repeat: repeat-x;
			background-position: left top;
			opacity: 0.7;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			z-index: 1;
		}
*/

		/*--- PRICE AREA ---*/
		#high-review .categoryArea .itemArea > .priceArea {
			display: none;
		}
		#high-review .categoryArea .itemArea > .priceArea>.bgprice {
			text-align: center;
		}

		/*--- REVIEW AREA ---*/
		#high-review .categoryArea .itemArea .reviewArea {
			display: none;
			font-family: "Yomogi";
			font-size: 1.6rem;
			font-weight: bold;
			line-height: 2.4rem;
		}
			#high-review .categoryArea .itemArea .reviewArea .body {
				position: relative;
				margin: 30px;
				padding: 12px 16px 12px 16px;
				letter-spacing: -0.1rem;
				border: 2px solid #FFF;
				border-bottom-width: 6px;
				border-radius: 12px;
				background-color: rgba(255, 255, 255, 0.2);
			}

		/*--- LINK AREA ---*/
		#high-review .categoryArea .linkArea p {
			margin: 0 auto;
			padding: 12px 40px;
			width: fit-content;
			color: #fff;
			font-size: 2rem;
			font-family: 'Yomogi';
			font-weight: bold;
			border-radius: 8px;
			background: #b39565;
			transition: .2s;
		}
			#high-review .categoryArea .linkArea p:hover {
				transform: scale(1.05);
			}

/* FIRST */
	#high-review .categoryArea .itemArea:first-child {
		margin-bottom: 64px;
		width: 100%;
	}
		#high-review .categoryArea .itemArea:first-child h3,
		#high-review .categoryArea .itemArea:first-child h4 {
			text-align: center;
		}

		#high-review .categoryArea .itemArea:first-child > .imageArea {
			margin-left: auto;
			margin-right: auto;
			width: 50%;
		}

		#high-review .categoryArea .itemArea:first-child > .priceArea,
		#high-review .categoryArea .itemArea:first-child > .reviewArea {
			display: block;
		}
			#high-review .categoryArea .itemArea:first-child > .reviewArea .body {
				position: relative;
				width: 80%;
			}
				#high-review .categoryArea .itemArea:first-child > .reviewArea .body::after {
					content: "";
					position: absolute;
					top: -40px;
					right: -60px;
					width: 72px;
					height: 72px;
					border-radius: 50%;
					background-size: contain;
					background-position: center;
					/* background-image -> js */
				}

	#high-review .reviewBox {
		position: relative;
		padding: 12px;
		z-index: 2;
	}
		#high-review .reviewBox .pdp__tab--reviewComment {
			margin: 0 80px 15px 80px;
			padding: 20px;
			text-align: center;
			color: #333;
			border-radius: 8px;
			background: rgba(255, 255, 255, 0.7);
		}

		#high-review .reviewBox .btn-large {
			display: block;
			margin: 0 auto;
			padding: 0 16px;
			width: fit-content;
		}



@media screen and (max-width: 1199px){
	/*bootstrapを使用する場合。幅を1200pxとして
	左右に15pxずつpaddingをつけている為*/
}
@media screen and (max-width: 1169px){
	/*bootstrapを使用しない場合*/
}
	
@media screen and (max-width: 1024px){
}

@media (max-width: 767px){
	#high-review #globalNav {
		font-size: 1.6rem;
	}
	#high-review #globalNav.sticky {
		position: fixed;
		top: 59px;
	}
	#high-review #globalNav > div {
		flex: none;
		width: 25%;
	}

	#high-review #modalArea {
		width: 100%;
		height: 100dvh;
		top: 0;
		left: 0;
		transform: translate(0, 0);
		border-radius: 0;
	}
	#high-review #modalArea .categoryArea::before {
		background-image: none;
	}

	#high-review #modalArea .categoryArea .itemArea {
		margin: 0;
		height: 100dvh;
		display: block;
	}
	#high-review #modalArea .categoryArea .itemArea > * {
		width: 100%;
	}
		#high-review #modalArea .categoryArea .itemArea > .imageArea {
			max-width: 60%;
		}
	#high-review #modalArea .categoryArea .itemArea > *:last-child {
		padding: 12px;
	}
	#high-review #modalArea .categoryArea .itemArea > * img {
		width: 100%;
	}
	#high-review #modalArea .categoryArea .itemArea .closeBtn {
		top: unset;
		bottom: 20px;
		left: 50%;
		right: unset;
		transform: translateX(-50%);
	}

	#high-review h2 {
		margin-top: 72px;
		letter-spacing: -0.4rem;
		font-size:25px;
	}
	#high-review h2::before {
		top: -36px;
		font-size: 60px;
	}
	#high-review .categoryArea::before {
		top: -137px;
		width: 280px;
		background-size: contain;
		background-repeat: no-repeat;
	}

	#high-review .categoryArea .itemArea {
		padding: 2% 4%;
		font-size: 1.4rem;
		word-break: break-all;
	}
	#high-review .categoryArea .itemArea > .imageArea {
		margin-bottom: 8px;
	}
	#high-review .categoryArea .itemArea > .imageArea::after {
		top: -21px;
		width: 60px;
		height: 36px;
	}
	#high-review .categoryArea .itemArea h3 {
		
	}
	#high-review .categoryArea .itemArea h4 {
		font-size: 1.8rem;
		line-height: 2rem;
	}
	#high-review .categoryArea .itemArea .reviewArea .body {
		padding: 8px;
	}
	#high-review .categoryArea .itemArea .reviewArea .body::after {
		top: 100%;
	}
	#high-review .categoryArea .itemArea:first-child > .reviewArea .body {
		width: 75%;
	}
	#high-review .categoryArea .itemArea:first-child > .reviewArea .body::after {
		right: -42px;
		top: -36px;
		width: 55px;
		height: 55px;
	}

	#high-review #modalArea .categoryArea .reviewArea .body:nth-child(odd) {
		margin-right: 48px;
	}
	#high-review #modalArea .categoryArea .reviewArea .body:nth-child(odd) p::after {
		right: -90px;
	}


	#high-review .reviewBox .pdp__tab--reviewComment {
		margin: 0px 25px 15px 25px;
}