@charset "UTF-8";
/* CSS Document */


.sub-main-visual {
	>.inner {
		background: url("../img/hyaluronic/img_sub_mainview.webp") no-repeat center center / cover #ededed;
	}
}


.hyaluronic-catch {
	position: relative;
	overflow: hidden;
	margin: 0 auto 40px;

	&::before {
		content: "";
		position: absolute;
		width: 600px;
		height: 600px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, .9);
		z-index: 3;
		left: -280px;
		top: 50%;
		transform: translateY(-50%);
	}

	.image {
        width: 100%;
        height: auto;
		aspect-ratio: 2/1;

		> img {
			width: 100%;
			height: auto;
			display: block;
			aspect-ratio: 2/1;
			object-fit: cover;
			object-position: top right;
		}
	}

	.catch {
		position: absolute;
		left: min(4vw, 40px);
		top: 50%;
		transform: translateY(-50%);
		z-index: 5;

		p {
			font-size: min(5.33vw, 32px);
			text-align: center;
			font-family: "Yu Mincho", "YuMincho", 'Noto Serif JP', serif;
			line-height: 1.4;
			color: #F18D1E;
			position: relative;
			margin-bottom: 40px;

			&::before {
				content: "・・・";
				position: absolute;
				left: 50%;
				font-size: min(3.73vw, 18px);
				transform: translateX(-50%);
				z-index: 5;
				bottom: -20px;
			}
		}

		span {
			position: relative;
			text-align: center;
			font-size: min(3.2vw, 15px);
			font-family: "Yu Mincho", "YuMincho", 'Noto Serif JP', serif;
			display: block;
			line-height: 1.6;

			&::before {
				content: "";
				position: absolute;
				width: min(4.26vw, 16px);
				height: min(4.26vw, 16px);
				border-radius: 50%;
				top: -2px;
				left: -4px;
				background-color: #F18D1E;
				opacity: .4;
				z-index: -1;
			}
		}
	}
}







.case-slider { position: relative; width: 60%; margin: 50px auto;}

.slider-viewport { overflow: hidden; width: 100%;}

.ul-slides { display: flex; transition: transform 0.4s ease; width: 100%; }

.li-slide { min-width: 100%;}

.li-slide figcaption {position: relative; padding-left: 40px; font-family: "Yu Mincho", "YuMincho", 'Noto Serif JP', serif; line-height: 48px; font-weight: 700;}

.li-slide figcaption:before {content: "◆"; position: absolute; color: #1B2A55; font-size: 32px; top: 50%; transform: translateY(-50%); left: 0;}

.li-slide figure {width: 100%;}

.li-slide img { width: 100%; height: auto; object-fit: cover;}

.prev,
.next { position: absolute; top: 50%; transform: translateY(-50%); color: #1B2A54; font-size: 48px; cursor: pointer; z-index: 10;}

.prev { left: -30px;}

.next { right: -30px;}



.table-30-70 table {border-collapse: collapse; margin: auto;}

.table-30-70 th,
.table-30-70 td {padding: 12px 16px; line-height: 1.4; border: 0.5px solid #ccc;}

.table-30-70 th {width: 30%; font-weight: 500; background-color: #f0f0f1;;}

.table-30-70 td {text-align: left; }

.table-30-70 table ul {}

.table-30-70 table li {text-indent: -1em; padding-left: 1em;}

.table-scroll {height: 250px; overflow-y: scroll; display: inline-block; -webkit-overflow-scrolling: touch;}



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

    
.case-slider { margin: 3.6vw auto;}

.li-slide figcaption {padding-left: 2.9vw; line-height: 3.5vw;}

.li-slide figcaption:before {font-size: 2.3vw;}

.prev,
.next { font-size: 3.5vw;}

.prev { left: -2.9vw;}

.next { right: -2.9vw;}
    
}




@media screen and (max-width: 767px) {
    
.sub-main-visual {
	>.inner {
		background: url("../img/hyaluronic/img_sub_mainview_sp.webp") no-repeat center center / cover #ededed;
	}
}    
    
    
    
.hyaluronic-catch {
		&::before {
			width: 80vw;
			height: 80vw;
			left: -30vw;
		}

		.image {
			aspect-ratio: 141/100;

			> img { aspect-ratio: 141/100; }
		}



		.catch {
			p { margin-bottom: min(5.86vw, 40px); }

			span {
				&::before { top: -4px; left: -6px; }
			}
		}
	}
    
    
    
    
    
.case-slider { margin: 12.8vw auto; width: 100%;}
    
.slider-viewport { width: 80%; margin: auto;}

.li-slide figcaption {padding-left: 10.2vw; line-height: 12.3vw;}

.li-slide figcaption:before {font-size: 8.2vw;}

.prev,
.next { font-size: 12.3vw; top: 56%;}

.prev { left: -0.6vw;}

.next { right: -0.6vw;}
    
  
    

.table-30-70 th,
.table-30-70 td {display: block; width: 100%; border-bottom: none;}
    
.table-30-70 tr:last-child td {border-bottom: 0.5px solid #ccc;}
    
}