@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&family=Pinyon+Script&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&family=M+PLUS+1p&family=Pinyon+Script&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
/* ANIMATION FRAME */
body {
	--scroll_speed: 20s;
}
@keyframes x_scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/*-----COMMON-----*/

#medicalash {
	color:#615a5a;
	background-color:#f3f3f3;
	font-size:14px;
	font-family: "Noto Sans JP";
	}

#medicalash img {
	width:100%;
}

#medicalash h1 {
    position: absolute;
    top: 45%;
    left: 5%;
    color: #282525;
    font-size: 3rem;
    font-weight: 400;
    font-family: "Noto Serif JP", serif;
}

#medicalash .logo {
    position: absolute;
    top: 8%;
    left: 4%;
    width: 9%;
}

#medicalash a {
	font-size: inherit;
	text-decoration: none;
}

#medicalash h2 {
	font-size: 5rem;
	text-align: center;
	letter-spacing: 0.3rem;
	font-weight: 300;
	color:#4e4c4c;
}

#medicalash h2 span {
	font-size:2.0rem;
}
#medicalash h4 {
	text-align: center;
	font-size:2.0rem;
	padding-bottom: 20px;
	color:#4e4c4c;
	font-weight: 500;
}

#medicalash ::selection {
	color:#fff;
	background-color: #000;
}

/*-----KV-----*/
#medicalash .kv {
	position:relative;
	margin:0 auto;
	max-width: 1920px;
	width: 100%;
	height: 80vh;
	display:block;
	background-image: url("../img/kv.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#medicalash .kv h1.brand_logo {
		position: absolute;
		top: 24px;
		left: 24px;
		width: 100px;
		line-height: 0;
		z-index: 1;
}


/* SPLIT 
	#medicalash .kv .kvArea {
		overflow: hidden;
		height: 720px;
	}
		#medicalash .kv .kvArea > p {
			position: absolute;
			width: calc(100% / 2);
			top: 0;
			height: 720px;
			background-size: cover;
			background-position: center;
			transition: 3s;
		}

		/*READY
		#medicalash .kv .kvArea > p.ready {
			opacity: .3;
			z-index: 1;
		}
			#medicalash .kv .kvArea > p.left {
				left: 0;
			}
				#medicalash .kv .kvArea > p.ready.left {
					top: -10%;
				}
				#medicalash .kv .kvArea > p.complete.left {
					left: -20%;
					opacity: .3;
				}
			#medicalash .kv .kvArea > p.right {
				left: 50%;
			}
				#medicalash .kv .kvArea > p.ready.right {
					top: 10%;
				}
				#medicalash .kv .kvArea > p.complete.right {
					left: 20%;
					opacity: .3;
				}
					

		/*ACTIVE
		#medicalash .kv .kvArea > p.left_active {
			top: 0;
			left: 0;
			opacity: 1;
			z-index: 1;
		}
		#medicalash .kv .kvArea > p.right_active {
			top: 0;
			left: 50%;
			opacity: 1;
			z-index: 1;
		}
		*/


#medicalash .kv .kv_sp {
	display: none;
}


/*-----concept-----*/
#medicalash #concept {
	width:50%;
	margin:80px auto;
	padding: 80px 20px 0 20px;
}

#medicalash #concept h2 {
	margin-bottom: 70px;
}

#medicalash #concept p {
	line-height: 4.0rem;
		font-size: 1.7rem;
		text-align: justify;
}

#medicalash #concept .fade_up {
	opacity: 0;
	transform: translateY(20px);
	transition: all 1.5s ease-out;
}

#medicalash #concept .fade_up.show {
	opacity: 1;
	transform: translateY(0);
}


/*-----HEADER NAV-----*/
#medicalash .header_nav {
	position: sticky;
	top: 0;
	display: flex;
	flex-wrap: wrap;
	font-weight:bold;
	z-index: 20;
}

#medicalash .header_nav a {
	transition: 0.5s;
	background: #000000ed;		  
	color: #fff;
	}

#medicalash .header_nav a:hover {
	background: #FFF;		  
	color: #000000ed;
}


#medicalash .header_nav > * {
	flex: 1 1 0;
	padding: 20px 0;
	text-align: center;
	cursor: pointer;
	}

#medicalash .header_nav p {
	position: relative;
	font-size: 2.4rem;
	letter-spacing: 0.1rem;
	font-weight: 400;
	cursor: pointer;
	user-select: none;
}


/*-----FEATURE-----*/

#medicalash #feature {
	width: 80%;
	margin:80px auto;
	padding-top:80px;
}

#medicalash #feature .wrapper {
	position: relative;
}

#medicalash #feature h4 {
	text-align: left;
	font-size: 2.2rem;
	font-weight: 400;
}


#medicalash #feature .description {
	font-size: 1.5rem;
	line-height: 3rem;
}

#medicalash #feature > div:nth-child(odd) .description {
	padding-right: 64px;
}

#medicalash #feature > div:nth-child(even) .description {
	padding-left: 64px;
}

#medicalash #feature .reverse {
	flex-direction: row-reverse;
}

#medicalash #feature h2 {
	margin-bottom: 115px;
}

#medicalash #feature .flex {
	display:flex;
	align-items: center;
	margin-bottom: 36px; 
}


#medicalash #feature .flex > * {
	width: 50%;
}

#medicalash #feature div {
	position:relative;
}

#medicalash #feature .number {
display: none;
		font-family: "Playfair Display", serif;
		color: #7b6363;
	mix-blend-mode: difference;
	font-size: 15vw;
		z-index: 10;

}

#medicalash #feature div:nth-child(even) .number {
	position: absolute;
	top: -33vh;
		left: 0vw;
}

#medicalash #feature div:nth-child(odd)  .number {
	position:absolute;
	top:-33vh;
	right:73vh;
}


/*-----PRODUCT-----*/
#medicalash #products {
	margin:80px auto;
	padding-top: 80px;
	width:100%;
}

#medicalash #products .flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border-bottom: 1px solid #00000048;
}

#medicalash #products .flex .items {
	width: calc(100% / 3);
	border-top: 1px solid #00000048 ;
	border-right:1px solid #00000048 ;
}

#medicalash #products .flex .items:nth-child(3n) {
	border-right: none;
	}
	

#medicalash #products h2 {
	margin-bottom:60px;
}

#medicalash #products img {
	width:100%;
}

/*--hover前--*/
#medicalash #products .product_image_container {
	position: relative;
	width: 100%;
	overflow: hidden;
	cursor: pointer;
}
#medicalash #products .product_image_container img,
#medicalash #products .product_image_container .product_name,
#medicalash #products .product_image_container .product_name span {
	transition: opacity 1.5s, transform 1.5s cubic-bezier(0, 0, 0.1, 1), color .5s ease, background-color .2s ease;
}


#medicalash #products .product_image_container .default_img {
	position:absolute;
	top: 0;
	left:0;
	opacity: 1;
}

#medicalash #products .product_image_container .hover_img {
	position: absolute;
	top: 0;
	left: 0;
	transform: scale(1.5);
	opacity: 0; 
}
	#medicalash #products .product_image_container .product_name {
		position: absolute;
		top: 13px;
		width: 100%;
		color: #5a5757;
		text-align: center;
		font-size: 2rem;
	}

	#medicalash #products .product_image_container .product_name span {
		font-size: 1.2rem;
		color:#908e89;
	}
		#medicalash #products .product_image_container .product_name span.icon {
			display: block;
			margin: 8px auto 0 auto;
			padding: 5px 15px;
			width: fit-content;
			color: #FFF;
			font-size: 1rem;
			line-height: 1rem;
			border-radius: 24px;
			background: #979298;
		}

	#medicalash #products .product_image_container .remarks {
		position: absolute;
		bottom: 4px;
		width: 100%;
		color: #a19a9a;
		font-size: 1.0rem;
		text-align: center;
	}

/*--hover時--*/

#medicalash #products .product_image_container:hover .hover_img {
	opacity: 1; 
	transform: scale(1);
}
#medicalash #products .product_image_container:hover .product_name,
#medicalash #products .product_image_container:hover .product_name span {
	color:#fff;
}
	#medicalash #products .product_image_container:hover .product_name span.icon {
		color: #979298;
		background: #FFF;
	}


/*--BUTTON--*/

#medicalash .buttonArea  {
	margin: 0 auto;
		text-align: center;
		width: 265px;
		height: 45px;
		line-height: 45px;
	font-weight: 500;
	cursor: pointer;
	background-color: #000;
}

#medicalash .buttonArea a {
	color: #fff;
}

#medicalash .buttonArea:hover {
	opacity: 0.7;
	transition: 0.3s;
}


/* MODAL AREA */
#medicalash #modalArea {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	z-index: 1100;
}
	#medicalash #modalArea .flex {
		display: flex;
		flex-wrap: wrap;
	}
		#medicalash #modalArea .flex > div {
			width: 50%;
			height: 100vh;
		}
			#medicalash #modalArea .flex > div.imageArea {
				display:flex;
				background-color: #FFF;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
			}

			#medicalash #modalArea .flex > div.imageArea > img {
				width:40%;
				margin:30px;
			}

			#medicalash #modalArea .flex > div.textArea {
				padding: 24px;
				background: #F5F5F5;
				overflow-y: scroll;
			}

			#medicalash #modalArea .flex > div.textArea .product_name {
				font-size: 3.0rem;
				margin-bottom: 10px;
				line-height:2.5rem;
			}
			#medicalash #modalArea .flex > div.textArea .product_name span {
				font-size: 1.2rem;
			}

			#medicalash #modalArea .flex > div.textArea	.description > h3 {
				margin-top: 60px;
				margin-bottom: 16px;
				font-weight: 500;
				font-size: 2rem;
					color: #605d5d;
			}
			#medicalash #modalArea .flex > div.textArea	.description .method {
				line-height:3rem;
				margin-top: 20px;
				font-size: 1.4rem;
			} 

			#medicalash #modalArea .flex > div.textArea	.description ol {
				padding-left: 16px;
			}

			#medicalash #modalArea .flex > div.textArea	.description ol li {
				line-height: 2rem;
					font-size: 1.2rem;
				list-style: decimal;
			}

			#medicalash #modalArea .flex > div.textArea	.description h3.title {
				width: fit-content;
				font-size: 1.8rem;
				border-bottom: 1px solid #605d5d;
			}
			#medicalash #modalArea .flex > div.textArea	.description .spec {
				font-size: 1.6rem;
				line-height: 2.4rem;
			}
			#medicalash #modalArea .flex > div.textArea	.description .imageList {
				display: flex;
				flex-wrap: wrap;
			}
				#medicalash #modalArea .flex > div.textArea	.description .imageList > div {
					flex: 1 1 0;
					margin-right: 2%;
				}
					#medicalash #modalArea .flex > div.textArea	.description .imageList > div p.image {
						position: relative;
						height: 20vw;
						overflow: hidden;
					}
						#medicalash #modalArea .flex > div.textArea	.description .imageList > div p.image img {
							position: absolute;
							bottom: 0;
						}
						#medicalash #modalArea .flex > div.textArea	.description .imageList > div p.text {
							font-size: 1.2rem;
							text-align: center;
						}

			#medicalash #modalArea .flex > div.textArea .pdpbutton  {
				margin: 0 auto 72px auto;
				width: fit-content;
				height:40px;
				text-align: center;
				line-height: 40px; 
			}
			#medicalash #modalArea .flex > div.textArea .pdpbutton a {
				display: block;
				padding: 0 24px;
				color:#fff;
				background-color: #000;
				user-select: none;
				transition: .3s;
			}
				#medicalash #modalArea .flex > div.textArea .pdpbutton a:hover {
					background-color: #AAA;
				}


			#medicalash #modalArea .flex > div.textArea .description {
				margin:35px 0;
			}
			
			#medicalash #modalArea .flex > div.textArea .description p {
				font-size: 1.6rem;
				text-align: justify;
				line-height: 2.4rem;
			}

			#medicalash #modalArea .modalCloseBtn {
				position: absolute;
				right: 24px;
				top: 0;
				color: #CCC;
				font-size: 5rem;
				cursor: pointer;
				user-select: none;
				transition: .3s;
			}
				#medicalash #modalArea .modalCloseBtn:hover {
					color: #000;
				}

/*--Customer's Review--*/
	#medicalash #reviewArea {
		margin: 80px auto;
		padding-bottom: 60px;
	}

	#medicalash #reviewArea h2 {
		font-size: 3rem;
}
	#medicalash #reviewArea .scrollArea {
		overflow: hidden;
	}
		#medicalash #reviewArea .scrollArea .flex {
			display: flex;
			padding: 80px 0;
			width: max-content;
			animation: x_scroll var(--scroll_speed) linear infinite;/* KEYFRAME */
		}
			#medicalash #reviewArea .scrollArea .flex:hover {
				animation-play-state: paused;
			}

	#medicalash #reviewArea .review {
		margin: 1px 10px;
		padding: 15px;
		max-width: 280px;
		background-color: #fff;
		flex:1 1 0;
		border-radius: 10px;
		cursor: pointer;
		transition: .4s;
	}
		#medicalash #reviewArea .review:hover {
			transform: scale(1.1);
			box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
		}


	#medicalash #reviewArea .review .product {
		font-weight: 500;
		height: 37px;
	}
	#medicalash #reviewArea .review img {
	padding-bottom: 10px;
	}

	#medicalash #reviewArea .review .star_rating {
		color: #f1c660;
	}

	#medicalash #reviewArea .review .review_title {
		padding-top: 3px;
		font-weight: 500;
	}

	#medicalash #reviewArea .review .review_text {
		padding: 15px 0 7px;
		font-weight: 400;
		font-size: 1.3rem;
			line-height: 2rem;
}

	#medicalash #reviewArea .review .user_name {
		text-align: right;
			font-size: 1.2rem;
	}



@media screen and (max-width: 1199px){
	/*bootstrapを使用する場合。幅を1200pxとして
	左右に15pxずつpaddingをつけている為*/
	#medicalash #feature .description {
		font-size: 1.3rem;
		line-height: 2.7rem;
	}
}
@media screen and (max-width: 1169px){
	/*bootstrapを使用しない場合*/
}
@media screen and (max-width: 1024px){
	#medicalash #feature .description {
		font-size: 1.6rem;
		line-height: 3.2rem;
	}

}
@media (max-width: 767px){

/*--common--*/
#medicalash {
	overflow: hidden;
}

#medicalash h1 {
	top: 35%;
	font-size: 1.6rem;
	left: 5%;
}

#medicalash h2 {
	padding-top: 16px;
	font-size: 4.5rem;
}

/*--kv--*/
#medicalash .kv {
	height: 50vh;
}

#medicalash .kv .kvArea > p {
	width: 100%;
	height: 160px;
}

#medicalash .logo {
	top: 5%;
	left: 5%;
	width: 20%;
}

/*--header--*/

#medicalash .header_nav.fixed {
	position:fixed;
	top:59px;
	width:100%;
}

#medicalash .header_nav > * {
	padding:12px 0px;
}

#medicalash .header_nav p {
	font-size:2.2rem;
}

/*--concept--*/
#medicalash #concept {
	width:330px;
	margin: 30px auto;
	padding-top: 30px;
}

#medicalash #concept p {
	line-height:3.6rem ;
}

#medicalash #concept h2 {
	margin-bottom: 40px;
}
	

/*--feature--*/
#medicalash #feature {
	position:relative;
	margin:0px 24px;
	padding-top: 30px;
	width: auto;
}

#medicalash #feature h2 {
	margin-bottom: 28px;
}

#medicalash #feature h4 {
	font-size: 2.5rem;
	font-weight: 400;
	text-align: center;
	padding: 24px;
}

#medicalash #feature .flex {
	flex-direction: column-reverse;
}


#medicalash #feature .flex > * {
	width: 100%;
}

#medicalash #feature .number {
	font-size: 16rem;
}

#medicalash #feature div:nth-child(odd) .number {
	top:-25%;
	left: -3%;
}

#medicalash #feature div:nth-child(even) .number {
	top:-30%;
	left:-3%;
}

#medicalash #feature > div:nth-child(even) .description,
#medicalash #feature > div:nth-child(odd) .description{
	padding: 0 0 12px 0;
	font-size:1.8rem;
	text-align: justify;
}

/*--products--*/
#medicalash #products {
	margin:0px auto;
	padding-top: 30px;
}

#medicalash #products .flex {
	justify-content: start;
}

#medicalash #products .flex .items {
		width: calc(100% / 2); 
}

#medicalash #products .product_image_container .product_name {
	font-size: 1.3rem;
}

#medicalash #products .product_image_container .product_name span {
	font-size:1.0rem;
}

#medicalash #products .flex .items:nth-of-type(3n) {
		border-right: 1px solid #00000048;
}

#medicalash #products .flex .items:nth-of-type(2n) {
		border-right: none;
}

#medicalash #products .items img {
	width: 100%;
	object-fit: cover;
}

#medicalash #modalArea .flex {
	display: flex;
}
#medicalash #modalArea .flex > div.textArea .description .imageList > div p.image {
	height: 160px;
}

/*--buttonArea--*/
#medicalash .buttonArea {
	margin: 45px auto;
	width: 210px;
		height: 43px;
		line-height: 43px;
}

#medicalash .buttonArea p {
	margin: 55px auto;
	width: 200px;
}

/*--modal area--*/
#medicalash #modalArea {
}


#medicalash #modalArea .flex > div {
	height: 50vh;
	width: 100%;
	overflow-y:scroll; 
}
#medicalash #modalArea .flex > div.imageArea,
#medicalash #modalArea .flex > div.textArea {
	width: 100%;
	background-size: cover;
}

#medicalash #modalArea .flex > div.textArea .description > h3 {
		margin-top: 30px;
}

#medicalash #modalArea .modalCloseBtn {
}

/*--Customer's Review--*/
#medicalash #reviewArea {
	margin-bottom: 0;
}
#medicalash #reviewArea .scrollArea {
	overflow-x: scroll;
}
#medicalash #reviewArea .scrollArea .flex {
	animation: none;
	padding: 40px 0 16px 0;
}
#medicalash #reviewArea .review:hover {
	box-shadow: none;
	transform: none;
}

#medicalash #reviewArea .flex div {
	flex: 1 1 0;
	width: 200px;
}



#medicalash #reviewArea .review .product,
#medicalash #reviewArea .review .review_title {
	font-size: 1.7rem;
}

#medicalash #reviewArea .review .review_text {
	font-size: 1.6rem;
	line-height: 2.5rem;
}
}