@charset "utf-8";

/*--------------------------------------
treatment common｜治療
--------------------------------------*/
.treatment .inner{ max-width: 900px; }
.secTtl{
	position: relative;
	height: 80px;
	font-size: 34px;
	font-weight: 600;
	line-height: 2.35;
	-webkit-filter: drop-shadow(5px 5px 3px rgba(0,0,0,.1));
	filter: drop-shadow(5px 5px 3px rgba(0,0,0,.1))
}
.secTtl::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 7px;
	background: #b4aa91;
}
.ie11 .secTtl::before{
	box-shadow: 5px 5px 3px rgba(0, 0, 0, .1);
}
	.secTtl span{
		position: relative;
		display: inline-block;
		height: 100%;
		padding-right: 75px;
		padding-left: 45px;
	}
	.secTtl span::before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-bottom: 80px solid #b4aa91;
		border-left: 0 solid transparent;
		border-right: 48px solid transparent;
		box-sizing: border-box;
		z-index: -1;
	}

@media screen and (max-width: 768px){
	.secTtl{
		height: 40px;
		font-size: 19px;
		line-height: 2.1;
	}
	.secTtl::before{
		height: 3px;
	}
		.secTtl span{
			padding-right: 35px;
			padding-left: 24px;
		}
		.secTtl span::before{
			border-bottom: 40px solid #de8c9a;
			border-right: 25px solid transparent;
		}
}

/* 共通
---------------------------------------------- */
.br-sp {
	display: none;
}

@media screen and (max-width: 768px){
	.br-sp {
		display: block;
	}
}

/* kv
-------------------------------------- */
.kv{
	position: relative;
}
.kv:before {
    content: "TREATMENT";
    display: block;
    font-size: 30px;
    font-family: "Yu Mincho", Yumincho, serif;
    color: #675d43;
    font-style: italic;
    letter-spacing: 0.1em;
    position: absolute;
    top: 30px;
    left: 10vw;
	font-weight: 400;
}
.kv:after {
    content: "施術メニュー";
    display: block;
    font-size: 16px;
    font-family: "Yu Mincho", Yumincho, serif;
    color: #675d43;
    letter-spacing: 0.1em;
    position: absolute;
    top: 36px;
    left: calc(10vw + 245px);
	font-weight: 400;
}
.kvWrap{
	position: relative;
	padding-top: 130px;
}
.kvWrap::before {
    content: "";
    position: absolute;
    left: 10vw;
	top: 85px;
    z-index: 10;
    display: block;
    width: 100px;
    height: 1px;
    background: #675d43;
}
.kvBox{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
	background: #f9f5f3;
    height: 190px;
}
.kvTxt{
    font-style: normal;
    font-weight: 400;
    font-size: 200%;
    line-height: 1.5;
    text-align: center;
	color: #6e5a50;
	padding: 0 5vw;
}
.kvTxt .en{
	display: none;
}


			.kvIcon {
				text-align: center;
				}
			.kvIcon img {
				width: 25%;
				}
			.kvIcon img + img {
				margin-left: 2%;
				}
			.kvImg{
				position: relative;
				width: 57.181819%;
				box-shadow: 7px 7px 5px rgba(55, 0, 1, .2);
				z-index: 5;
			}
			.kvImg::before{
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 96.875%;
				height: 94.791667%;
				border: 1px solid rgba(255, 255, 255, .5);
				z-index: 6;
			}

@media screen and (max-width: 768px){
    .kv:before {
        font-size: 20px;
    }
    .kv:after {
        font-size: 12px;
        left: calc(10vw + 160px);
    }	
	.kvWrap::before {
		top: 70px;
	}	
	.kvWrap {
		padding-top: 100px;
	}
	.kvBox{
		height: 150px;
	}
	.kvTxt{
		font-size: 150%;
	}

	.kvIcon img {
				width: 20%;
				}
				.kvImg{
					width: 100%;
				}
				.kvImg::before{
					border: 1px solid rgba(255, 255, 255, 1);
				}
}

/* intro
-------------------------------------- */
.intro{
}
	.introWrap{
		margin-top: 60px;
	}
		.introWrap .img{
		}
		.introWrap .txt{
			margin-top: 60px;
		}
			.introWrap .txt h3,
			.introTtl{
				font-size: 28px;
				font-weight: 600;
				line-height: 1.78;
				letter-spacing: .08em;
				margin-bottom: 20px;
			}
			.introWrap .txt .des{
				width: 96%;
				font-size: 18px;
				line-height: 2.2;
				text-align: justify;
				text-justify: inter-ideograph;
			}

@media screen and (max-width: 768px){
	.introWrap{
		margin-top: 30px;
	}
		.introWrap .txt{
			margin-top: auto;
		}
			.introWrap .txt h3,
			.introTtl{
				font-size: 14px;
				letter-spacing: .05em;
				margin-bottom: 9px;
			}
			.introWrap .txt .des{
				font-size: 12px;
				line-height: 1.8;
			}
}

/* reservation
---------------------------------------------- */
.reservation {
	padding: 32px;
	border: solid 3px #b4aa78;
}

.reservation-inner {
	box-sizing: border-box;
	margin: 60px auto 20px;
	width: 80%;
	max-width: 700px;
	text-align: center;
	font-size: 18px;
	letter-spacing: 2px;
}

.reservation .pink {
	color: #b4aa91;
}

.reservation dt {
	margin-bottom: 8px;
	color: #b4aa78;
	font-size: 32px;
}

.reservation dt span {
	font-size: 0.75em;
}

.reservation .price {
	margin-bottom: 16px;
	font-size: 34px;
	letter-spacing: -0.5px;
}

.reservation .price span {
	margin-left: 2px;
	font-size: 0.6em;
	letter-spacing: 1px;
}

.reservation .text {
	margin-bottom: 16px;
}

@media screen and (max-width: 768px){
	.reservation {
		padding: 16px;
	}

	.reservation-inner {
		margin: 30px auto 20px;
		width: 90%;
		font-size: 14px;
		letter-spacing: 1px;
	}

	.reservation dt {
		font-size: 26px;
	}

	.reservation .price {
		font-size: 28px;
	}
}

 /* reservation-btn */
.reservation-btn {
	display: flex;
	gap: 16px;
	justify-content: center;
	align-items: center;
}

.reservation-btn a {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	flex-basis: calc(50% - 8px);
	padding: 16px 0;
	color: #fff;
	font-size: 18px;
}
.reservation-btn a:hover {
	opacity: 0.8;
}

.reservation-btn a::before {
	display: inline-block;
	content: '';
	width: 20px;
	height: 20px;
	background-size: cover;
}

.reservation-btn .tel {
	background-color: #8a7a2c;
}
.reservation-btn .tel::before {
	background-image: url(../../img/common/pc/icon_tel.svg);
}

.reservation-btn .web {
	background-color: #a9ad68;
}
.reservation-btn .web::before {
	background-image: url(../../img/common/pc/icon_reserve.svg);
}

@media screen and (max-width: 768px){
	.reservation-btn a {
		font-size: 14px;
	}

	.reservation-btn a::before {
		width: 14px;
		height: 14px;
	}
}

/* sticky */
.sticky {
	opacity: 0;
  visibility: hidden;
}

@media screen and (max-width: 768px){
.sticky {
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	padding: 12px 8px;
	background-color: rgba(68, 68, 68,0.8);
	transition: .3s;
}
.sticky.active {
	opacity: 1;
	visibility: visible;
}

.sticky p {
	color: #fff;
	font-size: 12px;
	letter-spacing: 0;
	line-height: 1.4;
	white-space: nowrap;
}

.sticky .reservation-btn {
	gap: 8px;
}

.sticky .reservation-btn a {
	gap: 4px;
	padding: 16px 4px;
	font-size: 12px;
}

.sticky .reservation-btn a::before {
	width: 11px;
	height: 11px;
}
}

/* kayokoPoint
---------------------------------------------- */
.kayokoPoint {
	margin-top: 30px;
	padding: 30px;
	box-sizing: border-box;
	border: 1px solid #de8c9a;
}
.kayokoPoint .ttl {
	font-size: 22px;
    letter-spacing: .05em;
    font-weight: 600;
    margin-bottom: 12px;
}
.kayokoPoint .txt {
	margin-top: 12px;
	font-size: 18px;
    line-height: 2.2;
}

@media screen and (max-width: 768px){
	.kayokoPoint {
	margin-top: 18px;
	padding: 16px;
	}
	.kayokoPoint .ttl {
	margin-bottom: 6px;
	font-size: 14px;
}
	.kayokoPoint .txt {
	margin-top: 6px;
	font-size: 12px;
    line-height: 1.8;
}
	}


/* kayokoComment
---------------------------------------------- */
.kayokoComment {}
	.kayokoCommentTtl {
		position: relative;
	    margin: auto;
		margin-top: 120px;
	    max-width: 384px;
	    z-index: 1;
	}
	.kayokoCommentTxt {
	    position: relative;
	    /* z-index: -1; */
	    margin-top: -57px;
	    box-sizing: border-box;
		border-radius: 50px;
	    border: 4px dotted #eec5cc;
	    background: #fdfcf2;
	    padding: 80px 0 60px 80px;
	    overflow: hidden;
	}
		.kayokoCommentTxt h4 {
		    font-size: 24px;
		    font-weight: 600;
		    line-height: 1.5;
		    letter-spacing: .08em;
		    margin-bottom: 20px;
		}
		.kayokoCommentImg {
			position: relative;
		    bottom: -100px;
		    clear: both;
			float: right;
			width: 30.8%;
			max-width: 250px;
			height: 312px;
			background: url('../../img/common/pc/img_kayokoCommentImg.png') right bottom/contain no-repeat;
		}
		.kayokoCommentTxt .des {
			float: left;
			max-width: 550px;
		    width: 67.8%;
		    font-size: 18px;
		    line-height: 2.2;
		    text-align: justify;
		    text-justify: inter-ideograph;
		}

@media screen and (max-width: 768px){
	.kayokoComment {}
		.kayokoCommentTtl {
			max-width: 61vw;
			margin-top: 20vw;
		}
		.kayokoCommentTxt {
		    margin-top: -9vw;
			border-radius: 7.8vw;
		    padding: 7.8vw 0 0 7.8vw;
		}
			.kayokoCommentTxt h4 {
			    margin-top: 5vw;
				margin-bottom: 3vw;
				margin-right: 20px;
			    font-size: 14px;
			}
			.kayokoCommentImgPadding {
				float: right;
			    width: 7.8vw;
			}
			.kayokoCommentImg {
				position: static;
				float: right;
				width: 39vw;
				height: 48.75vw;
			}
			.kayokoCommentTxt .des {
				float: none;
				float: none;
			    width: auto;
			    max-width: none;
			    font-size: 12px;
			}
}


/* trialArea
---------------------------------------------- */
.trialArea{
	position: relative;
	margin-top: 100px;
	padding: 85px 55px 50px;
	box-sizing: border-box;
	background: url('../../img/common/pc/bg_trial.png') center/376px;
	overflow: hidden;
    border-radius: 50px 0 50px 0;
}
	.trialArea .ttl{
		position: relative;
		font-size: 30px;
		color: #6e5a50;
		text-align: center;
	}
	.trialArea .ttl::before{
		content: '';
		position: absolute;
		top: -26px;
		left: 50%;
		transform: translateX(-50%);
		width: 92px;
		height: 12px;
		background: url('../../img/common/pc/icon_trial_star.svg') center/contain no-repeat;
	}
		.trialArea .cardsWrap{
			margin-top: 45px;
		}
			.trialArea .cards{
				margin-top: -30px;
			}
				.trialArea .cards li{
					width: calc((100% - 30px) / 2);
					margin-top: 30px;
					box-sizing: border-box;
					-webkit-filter: drop-shadow(4px 4px 3px rgba(0,0,0,.1));
    				filter: drop-shadow(4px 4px 3px rgba(0,0,0,.1));
				}

@media screen and (max-width: 768px){
	.intro{
	}

	/* trialArea
	---------------------------------------------- */
	.trialArea{
		margin-top: 25px;
		padding: 40px 20px 20px;
		border-radius: 7.8vw 0 7.8vw 0;
		background-size: 188px;
	}
		.trialArea .ttl{
			font-size: 15px;
			letter-spacing: .05em;
		}
		.trialArea .ttl::before{
			top: -16px;
			width: 54px;
			height: 8px;
		}
			.trialArea .cardsWrap{
				margin-top: 15px;
			}
				.trialArea .cards{
					margin-top: 0;
				}
					.trialArea .cards li{
						width: 100%;
						margin-top: 0;
					}
					.trialArea .cards li + li{
						margin-top: 13px;
					}
}

/* kind
---------------------------------------------- */
.kind{
	margin-top: 70px;
}
	.kindList{
	}
		.kindList li{
			font-size: 20px;
			line-height: 2.1;
			letter-spacing: .1em;
		}
		.kindList li::before{
			top: 8px;
		}
	.kindImg{
		margin-top: 28px;
	}
		.kindImg .ttl{
			font-size: 22px;
			margin-bottom: 20px;
		}

@media screen and (max-width: 768px){
	.kind{
		margin-top: 20px;
	}
		.kindList{
		}
			.kindList li{
				font-size: 14px;
				line-height: 1.57;
				letter-spacing: .01em;
			}
			.kindList li + li{
				margin-top: 8px;
			}
			.kindList li::before{
				top: 4px;
			}
		.kindImg{
			margin-top: 30px;
		}
			.kindImg .ttl{
				font-size: 14px;
				letter-spacing: .05em;
				margin-bottom: 15px;
			}
}

/* efficacy
---------------------------------------------- */
.efficacy{
	margin-top: 120px;
}
	.efficacyWrap{
		margin-top: 35px;
		padding: 70px 0;
		background : -webkit-radial-gradient(49.67% 49.74%, circle farthest-corner, rgba(253, 249, 250, 1) 0%, rgba(252, 246, 248, 1) 62.27%, rgba(250, 238, 240, 1) 99.68%, rgba(250, 238, 240, 1) 100%);
		background : -webkit-gradient(radial,49.67% 49.74% ,0 , 49.67% 49.74%, 459.5 ,color-stop(0,rgba(253, 249, 250, 1) ),color-stop(0.6227,rgba(252, 246, 248, 1) ),color-stop(0.9968,rgba(250, 238, 240, 1) ),color-stop(1,rgba(250, 238, 240, 1) ));
		background : -ms-radial-gradient(49.67% 49.74%, circle farthest-corner, rgba(253, 249, 250, 1) 0%, rgba(252, 246, 248, 1) 62.27%, rgba(250, 238, 240, 1) 99.68%, rgba(250, 238, 240, 1) 100%);
		background : radial-gradient(49.67% 49.74%, circle farthest-corner, rgba(253, 249, 250, 1) 0%, rgba(252, 246, 248, 1) 62.27%, rgba(250, 238, 240, 1) 99.68%, rgba(250, 238, 240, 1) 100%);
		border-radius : 50px 0px;
	}
		.efficacyBox{
			max-width: 386px;
			margin: auto;
		}
			.efficacyBox dl{
			}
			.efficacyBox dl + dl{
				margin-top: 20px;
			}
				.efficacyBox dl dt{
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 105px;
					height: 40px;
					font-size: 18px;
					font-weight: 600;
					letter-spacing: .1em;
					color: #fff;
					margin-right: 25px;
					background: #de8c9a;
					border-radius: 20px;
					text-align: center;
					font-family: 'Yu Gothic',Yugothic,sans-serif;
				}
				.efficacyBox dl .efficacyCrown::before{
					content: '';
					position: absolute;
					top: -14px;
					left: -24px;
					width: 48px;
					height: 44px;
					background: url('../../img/common/pc/icon_efficacy_crown.svg') center/contain no-repeat;
				}
				.efficacyBox dl dd{
					width: calc(100% - 105px - 25px);
					height: 40px;
				}
				.efficacyBox dl dd.efficacyStar0{
					background: url('../../img/common/pc/icon_efficacy_star0.png') center/contain no-repeat;
				}
				.efficacyBox dl dd.efficacyStar1{
					background: url('../../img/common/pc/icon_efficacy_star1.png') center/contain no-repeat;
				}
				.efficacyBox dl dd.efficacyStar2{
					background: url('../../img/common/pc/icon_efficacy_star2.png') center/contain no-repeat;
				}
				.efficacyBox dl dd.efficacyStar3{
					background: url('../../img/common/pc/icon_efficacy_star3.png') center/contain no-repeat;
				}
				.efficacyBox dl dd.efficacyStar4{
					background: url('../../img/common/pc/icon_efficacy_star4.png') center/contain no-repeat;
				}
				.efficacyBox dl dd.efficacyStar5{
					background: url('../../img/common/pc/icon_efficacy_star5.png') center/contain no-repeat;
				}

				.efficacycheckList{
					margin: 50px 90px auto;
				}
				.efficacy .listStyle > li::before{
					top: 7px;
					font-size: 10px;
				}

@media screen and (max-width: 768px){
	.efficacy{
		margin-top: 50px;
	}
		.efficacyWrap{
			margin-top: 15px;
			padding: 30px 0;
			border-radius: 25px 0;
		}
			.efficacyBox{
				max-width: 219px;
			}
				.efficacyBox dl{
				}
				.efficacyBox dl + dl{
					margin-top: 10px;
				}
					.efficacyBox dl dt{
						width: 60px;
						height: 23px;
						font-size: 10px;
						letter-spacing: .05em;
						margin-right: 15px;
					}
					.efficacyBox dl .efficacyCrown::before{
						top: -7px;
						left: -12px;
						width: 27px;
						height: 25px;
					}
					.efficacyBox dl dd{
						width: calc(100% - 60px - 15px);
						height: 22px;
					}

					.efficacycheckList{
						width: calc(220 / 280 * 100%);
						margin: 30px auto auto;
					}

					.efficacy .listStyle > li::before{
						top: 4px;
						font-size: 7px;
					}
}



/* efficacy - 同列バージョン
---------------------------------------------- */
.efficacyListBox {
    margin: auto 70px;
}
	.efficacyList {
	    justify-content: flex-start;
	}
		.efficacyList li {
		    margin-right: 10px;
		    margin-bottom: 10px;
		    border-radius: 20px;
		    background: #de8c9a;
		    min-width: 65px;
		    height: 20px;
		    padding: 10px 20px;
		    line-height: 20px;
		    text-align: center;
		    font-weight: bold;
		    font-size: 18px;
		    color: #fff;
		}

	.checkList {
	    margin-top: 30px;
	}
		.checkList > li {
			background: url('../../img/common/pc/icon_check.svg') left 5px / 22.5px no-repeat;
			margin-top: 12px;
			padding-left: 40px;
		    line-height: 1.888;
		    text-align: justify;
			text-justify: inter-ideograph;
		    font-size: 18px;
		}

@media screen and (max-width: 768px){
	.efficacyListBox {
	    margin: auto 30px;
	}
		.efficacyList {}
			.efficacyList li {
			    margin-right: 6px;
			    margin-bottom: 6px;
			    border-radius: 20px;
			    min-width: 34px;
			    height: 10px;
			    padding: 5px 12px;
			    line-height: 10px;
			    font-size: 10px;
			}
		.checkList {
		    margin-top: 20px;
		}
			.checkList > li {
			    background: url(../../img/common/pc/icon_check.svg) left 2px / 17.5px no-repeat;
			    margin-top: 12px;
			    padding-left: 28px;
			    line-height: 1.666;
			    font-size: 12px;
			}
}

/* index */
.index{
	margin-top: 70px;
}
	.indexList{
	}
		.indexList li{
			width: 18.6666667%;
			height: 110px;
		}
			.indexList li a{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				font-size: 18px;
				font-weight: 600;
				line-height: 1.3;
				font-family: 'Yu Gothic',Yugothic,sans-serif;
				color: #6e5a50;
				background: #faf9f7;
				text-align: center;
			}
			.indexList li a::before{
				border-top: 30px solid transparent;
					border-right: 30px solid #e8aeb8;
			}
@media screen and (max-width: 768px){
	.index{
		margin-top: 27px;
	}
		.indexList{
			margin-top: -5px;
		}
			.indexList li{
				flex-grow: 1;
				width: 48.928572%;
				height: 40px;
				margin-top: 5px;
				margin-right: 2.1428571%;
			}
			.indexList li:nth-child(even),
			.indexList li:last-child{
				margin-right: 0;
			}
				.indexList li a{
					justify-content: flex-start;
					font-size: 12px;
					line-height: 1.2;
					padding-left: 15px;
					text-align: left;
					box-sizing: border-box;
				}
				.indexList li a::before{
					border-top: 20px solid transparent;
						border-right: 20px solid #e8aeb8;
				}
}

/* troubleCheck
---------------------------------------------- */
.troubleCheck{
	margin-top: 150px;
}
	.troubleBox{
		position: relative;
		/* border: 4px dotted #eec5cc; */
		/* border-radius: 50px; */
		/* padding-top: 80px; */
		/* box-sizing: border-box; */
	}
	.troubleBox::before{
		content: '';
		position: absolute;
		top: 18px;
		right: 40px;
		width: 240px;
		height: 160px;
/* 		background: url('../../img/common/pc/img_human02.png') center/contain no-repeat; */
		z-index: 10;
	}
		.troubleBox .ttl{
			/* position: absolute; */
			/* top: -65px; */
			/* left: 50%; */
			/* transform: translateX(-50%); */
			width: 750px;
			margin: 0 auto;
		}
		.troubleList{
			margin-top: 50px;
		}
			.troubleList li{
				position: relative;
				/* display: flex;
				align-items: center; */
				height: 70px;
				font-size: 20px;
				letter-spacing: .1em;
				background: #fdf7f8;
				border-radius: 35px;
				padding-top: 25px;
				padding-right: 50px;
				padding-bottom: 25px;
				padding-left: 100px;
				box-sizing: border-box;
			}
			.troubleList li::before{
				content: '';
				position: absolute;
				top: 50%;
				left: 50px;
				transform: translateY(-50%);
				width: 28px;
				height: 26px;
				background: url('../../img/common/pc/icon_check.svg') center/contain no-repeat;
			}
			.troubleList li + li{
				margin-top: 20px;
			}
@media screen and (max-width: 768px){
	.troubleCheck{
		margin-top: 60px;
	}
		.troubleBox{
			/* border: 2px dotted #eec5cc; */
			/* border-radius: 30px; */
			/* padding-top: 40px; */
		}
		.troubleBox::before{
			top: 18px;
			right: 3px;
			width: 120px;
			height: 80px;
		}
			.troubleBox .ttl{
				/* top: -50px; */
				width: 280px;
			}
			.troubleList{
				margin-top: 20px;
			}
				.troubleList li{
					height: auto;
					font-size: 12px;
					line-height: 1.5;
					letter-spacing: .01em;
					border-radius: 10px;
					padding-top: 11px;
					padding-right: 10px;
					padding-bottom: 11px;
					padding-left: 35px;
				}
				.troubleList li::before{
					left: 12px;
					width: 16px;
					height: 15px;
				}
				.troubleList li + li{
					margin-top: 10px;
				}
}



/* step
---------------------------------------------- */
.step{
	margin-top: 120px;
}
	.stepWrap{
		margin-top: 35px;
	}
		.stepList{
		}
			.stepList li{
				position: relative;
			}
			.stepList li + li{
				margin-top: 20px;
			}
				.stepList li .numBox{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 70px;
					background: #b4aa91;
					border-radius: 1.5vw 0 0 1.5vw;
				}
					.stepList li .numBox .num{
						font-size: 36px;
						font-family: 'Pinyon Script',cursive;
						color: #fff;
					}
				.stepList li .container{
					position: relative;
					width: 91.1111112%;
					background: #fcfcfc;
					border-bottom: 1px solid #d8d8d8;
					padding: 30px 30px 30px 50px;
					box-sizing: border-box;
				}
				.stepList li .container::before{
					content: '';
					position: absolute;
					bottom: -11px;
					left: 50%;
					transform: translateX(-50%);
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 10px 10px 0 10px;
					border-color: #d8d8d8 transparent transparent transparent;
				}
				.stepList li:last-child .container::before{
					content: none;
				}
					.stepList li .container .txtBox{
						/* width: calc(100% - 32.432433% - 5.4878048%); */
						flex: 1;
					}
						.stepList li .container .stepTtl{
							font-size: 24px;
							line-height: 1.4;
							letter-spacing: .1em;
						}
							.stepList li .container .stepTtl .small{
								font-size: 18px;
							}
						.stepList li .container .des{
							font-size: 16px;
							line-height: 1.75;
							letter-spacing: .05em;
							margin-top: 10px;
							text-align: justify;
							text-justify: inter-ideograph;
						}
					.stepList li .container .imgBox{
						width: 32.432433%;
						margin-left: 5.4878048%;
					}

		/* 術後クライオ */
		.stepList li.cryo .container .or{
			width: 100%;
			height: 40px;
			background: #de8c9a;
			color: #fff;
			font-size: 22px;
			font-weight: 600;
			line-height: 1.82;
			letter-spacing: .043em;
			border-radius: 50vw;
			margin-bottom: 26px;
			text-align: center;
		}
		.stepList li.cryo .container{
			background: #fdfdf5;
		}
			.stepList li.cryo .container .txtBox .cryoTxt{
				position: relative;
				font-size: 18px;
				font-weight: 600;
				letter-spacing: .1em;
				margin-bottom: 20px;
			}
				.stepList li.cryo .container .txtBox .des .large{
					font-size: 20px;
				}
			.stepList li.cryo .container .txtBox .cryoTxt .icon{
				position: absolute;
				top: -5px;
				right: 0;
				width: 60px;
				height: 60px;
			}
				.stepList li .container .imgBox .btn{
					margin-top: 5px;
				}
					.stepList li .container .imgBox .movieLink{
					    position: relative;
					    display: flex;
						height: 50px;
						background: #6e5a50;
					    color: #fff;
					    cursor: pointer;
					    transition: opacity .3s ease-in-out;
					}
					.stepList li .container .imgBox .movieLink::before{
						content: '';
					    display: block;
					    width: 0;
					    height: 0;
					    border: 6px solid transparent;
					    border-left: 10px solid #fff;
					    position: relative;
					    left: -10px;
					    top: 0;
					}
			.stepList li.cryo .cryoCap{
				/* position: absolute;
				left: 0;
				bottom: -30px; */
				width: 100%;
				font-size: 12px;
				line-height: 1.5;
				letter-spacing: .05em;
				margin-top: 1em;
				padding-left: 1em;
				text-indent: -1em;
				box-sizing: border-box;
			}

	.step .note{
	    margin-top: 1em;
	    font-size: 14px;
	    line-height: 1.3;
	    letter-spacing: .05em;
	}

	/* .stepScrollWrap{
		position: relative;
		max-width: 1100px;
		margin-top: 35px;
		margin-right: auto;
		margin-left: auto;
	}
	.stepScrollWrap::after{
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 100px;
		height: 100%;
		background : linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	}
	.stepScroll{
		overflow-x: auto;
		white-space: nowrap;
		margin-left: 9.0909091%;
	}
	.stepScroll::-webkit-scrollbar{
		display: none;
	}
		.step .img{
			position: relative;
			height: 320px;
		}
		.step .img img {
			height: 100%;
		    width: auto;
		    max-width: none;
		}
		.step .annotation{
			margin-top: 30px;
			font-size: 16px;
			letter-spacing: .05em;
		} */
			.step .modalOpen{
				position: absolute;
				display: block;
				cursor: pointer;
				transition: background .3s;
				z-index: 1;
			}
			.step .modalOpen:hover{
				background: rgba(255,255,255,.3);
			}
			.step .modalClose{
				top: -60px;
				background: transparent;
			}
			.step .modalClose::before,
			.step .modalClose::after{
				content: '';
				position: absolute;
				z-index: 1;
				top: 50%;
				left: 50%;
				width: 1px;
				height: 100%;
				background: #fff;
			}
			.step .modalClose::before{
				transform: translateX(-50%) translateY(-50%) rotate(45deg);
			}
			.step .modalClose::after{
				transform: translateX(-50%) translateY(-50%) rotate(-45deg);
			}

@media screen and (max-width: 768px){
	.step{
		margin-top: 45px;
	}
		.stepWrap{
			margin-top: 20px;
		}
			.stepList{
			}
				.stepList li{
					position: relative;
				}
				.stepList li + li{
					margin-top: 17px;
				}
					.stepList li .numBox{
						width: 30px;
					}
						.stepList li .numBox .num{
							font-size: 19px;
						}
					.stepList li .container{
						width: 87.5%;
						padding: 15px;
					}
					.stepList li .container::before{
						bottom: -8px;
						border-width: 7px 7px 0 7px;
					}
						.stepList li .container .txtBox{
							/* width: calc(100% - 55.813954% - 4.65%); */
						}
							.stepList li .container .stepTtl{
								font-size: 14px;
								letter-spacing: .05em;
							}
								.stepList li .container .stepTtl .small{
									font-size: 9px;
								}
							.stepList li .container .des{
								font-size: 11px;
								line-height: 1.65;
							}
						.stepList li .container .imgBox{
							width: 55.813954%;
							margin-left: 4.65%;
						}

			/* 術後クライオ */
			.stepList li.cryo .container .or{
				height: 20px;
				font-size: 11px;
			}
				.stepList li.cryo .container .txtBox .cryoTxt{
					font-size: 10px;
					line-height: 1.6;
					letter-spacing: .05em;
					margin-bottom: 0;
				}
					.stepList li.cryo .container .sp_txtBox .des .large{
						font-size: 12px;
					}
				.stepList li.cryo .container .txtBox .cryoTxt .icon{
					position: static;
					display: block;
					width: 40px;
					height: 40px;
					margin-bottom: 5px;
				}
						.stepList li .container .imgBox .movieLink{
							height: 25px;
							font-size: 7px;
						}
						.stepList li .container .imgBox .movieLink::before{
						    border: 4px solid transparent;
						    border-left: 6px solid #fff;
						    left: -4px;
						}
					.stepList li.cryo .container .sp_txtBox{
						width: 100%;
						margin-top: 10px;
					}
						.stepList li .container .sp_txtBox .stepTtl{
							font-size: 14px;
							letter-spacing: .05em;
						}
							.stepList li .container .sp_txtBox .stepTtl .small{
								font-size: 9px;
							}
						.stepList li .container .sp_txtBox .des{
							font-size: 11px;
							line-height: 1.65;
							letter-spacing: .05em;
							margin-top: .5em;
							text-align: justify;
							text-justify: inter-ideograph;
						}
				.stepList li.cryo .cryoCap{
					bottom: -40px;
					font-size: 10px;
				}

		.step .note{
			font-size: 11px;
		}

		/* .stepScrollWrap{
			margin-top: 18px;
		}
		.stepScrollWrap::after{
			width: 50px;
		}
		.stepScroll{
			margin-left: 6.25%;
		}
			.step .img{
				height: 50vw;
			}
			.step .annotation{
				margin-top: 15px;
				font-size: 12px;
			} */
				.step .modalClose{
					width: 40px;
					height: 40px;
				}
}

/* movie
---------------------------------------------- */
.movie{
	max-width: 720px;
	margin: 40px auto 0;
}
	.movieWrap{
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
		overflow: hidden;
	}
		.movieWrap iframe{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

@media screen and (max-width: 768px){
	.movie{
		width: 87.5%;
		margin: 25px auto 0;
	}
}

/* progress
---------------------------------------------- */
.progress{
	margin-top: 110px;
}
	.progressWrap{
		margin-top: 30px;
	}
		.progressList{
			width: 47.2222%;
		}
			.progressList li{
			}
			.progressList li + li{
				margin-top: 20px;
			}
				.progressList li .ttl{
					position: relative;
					font-size: 18px;
					font-weight: 600;
					letter-spacing: .05em;
				}
				.progressList li .ttl::before{
					content: '';
					position: absolute;
					top: 50%;
					left: 0;
					width: 100%;
					height: 1px;
					transform: translateY(-50%);
					background: #d8d8d8;
					z-index: -1;
				}
					.progressList li .ttl .txt{
						display: inline-block;
						padding-right: 25px;
						background: #fff;
					}
						.progressList li .ttl .num{
							display: inline-block;
							font-size: 32px;
							font-weight: 300;
							letter-spacing: 0;
							margin-right: 15px;
							transform: rotate(-10deg);
						}
				.progressList li .des{
					font-size: 16px;
					line-height: 1.875;
					letter-spacing: .1em;
					margin-top: 10px;
					text-align: justify;
					text-justify: inter-ideograph;
				}
					.progressList li ul li::before{
						font-size: 10px;
					}

@media screen and (max-width: 768px){
	.progress{
		margin-top: 50px;
	}
		.progressWrap{
			margin-top: 15px;
		}
			.progressList{
				width: 100%;
			}
			.progressList + .progressList{
				margin-top: 15px;
			}
				.progressList li{
				}
				.progressList li + li{
					margin-top: 15px;
				}
					.progressList li .ttl{
						font-size: 13px;
					}
						.progressList li .ttl .txt{
							padding-right: 12px;
						}
							.progressList li .ttl .num{
								font-size: 25px;
								margin-right: 12px;
							}
					.progressList li .des{
						font-size: 12px;
						letter-spacing: .05em;
					}
						.progressList li ul li::before{
							transform: scale(.7);
							top: 2px;
						}
}

/* precaution
---------------------------------------------- */
.precaution{
	margin-top: 100px;
}
	.precautionWrap{
		margin-top: 30px;
		padding: 40px 50px;
		background: #fdf7f8;
	}
		.precautionList{
		}
			.precautionList li{
				font-size: 16px;
				line-height: 2;
				letter-spacing: .1em;
			}
			.precautionList li::before{
				font-size: 10px;
			}

@media screen and (max-width: 768px){
	.precaution{
		margin-top: 50px;
	}
		.precautionWrap{
			margin-top: 15px;
			padding: 16px 20px;
		}
			.precautionList{
			}
				.precautionList li{
					font-size: 12px;
					line-height: 1.8;
					letter-spacing: .05em;
				}
				.precautionList li::before{
					transform: scale(.7);
					top: 2px;
				}
}


/* case
---------------------------------------------- */
.case{
	margin-top: 110px;
}
	.caseWrap{
		position: relative;
		margin-top: 80px;
	}
	.caseWrap + .caseWrap{
		margin-top: 130px;
	}
	.caseWrap::before{
		content: '';
		position: absolute;
		top: -35px;
		left: 50%;
		transform: translateX(-50%);
		width: 92px;
		height: 12px;
		background: url('../../img/common/pc/icon_star.svg') center/contain no-repeat;
	}
		.caseWrap h3,
		.caseWrap h4{
			font-size: 32px;
			text-align: center;
		}
			.caseWrap h3 small,
			.caseWrap h4 small{
				font-size: 24px;
			}
		.caseWrap figure{
			position: relative;
			max-width: 739px;
			margin: 50px auto 50px;
		}
		.caseWrap figure .icon{
			position: absolute;
			flex-direction: column;
			top: -20px;
			right: -20px;
			width: 90px;
			height: 90px;
			font-size: 16px;
			line-height: 1.2;
			letter-spacing: .05em;
			background: #de8c9a;
			border-radius: 50%;
			text-align: center;
			box-shadow: 5px 5px 3px rgba(0, 0, 0, .1);
		}
			.caseWrap figure .icon small{
				font-size: 14px;
				margin-top: 6px;
			}
		.caseWrap figure .iconBefore{
			right: 55%;
		    width: 70px;
		    height: 70px;
		    background: #8b7b73;
		}
		.case .cellBox dl dd{
			padding-top: 16px;
			padding-bottom: 16px;
		}
	.case .caution{
		max-width: 500px;
		height: 40px;
		margin: 40px auto 0;
		background: #fcf4f6;
		border-radius: 20px;
		text-align: center;
	}

	/* 画像3枚 */
	.caseWrap.column3 figure{
		max-width: 100%;
	}
	.caseWrap.column3 figure .iconBefore{
		right: 69%;
	}
	.caseWrap.column3 figure .icon2{
		right: 33%;
	}

	/* 画像4枚 */
	.caseWrap.column4 figure{
		max-width: 100%;
	}
	.caseWrap.column4 figure .iconBefore{
		right: 77%;
	}
	.caseWrap.column4 figure .icon2{
		right: 50%;
	}
	.caseWrap.column4 figure .icon3{
		right: 24%;
	}

@media screen and (max-width: 768px){
	.case{
		margin-top: 50px;
	}
		.caseWrap{
			margin-top: 40px;
		}
		.caseWrap + .caseWrap{
			margin-top: 52px;
		}
		.caseWrap::before{
			top: -18px;
			width: 46px;
			height: 6px;
		}
			.caseWrap h3,
			.caseWrap h4{
				font-size: 16px;
				line-height: 1.4;
				letter-spacing: .05em;
			}
				.caseWrap h3 small,
				.caseWrap h4 small{
					font-size: 12px;
				}
			.caseWrap figure{
				max-width: 773px;
				margin: 25px auto 20px;
			}
				.caseWrap figure .icon{
					top: -15px;
					width: 60px;
					height: 60px;
					font-size: 12px;
					letter-spacing: 0;
					transform: scale(.85)
				}
					.caseWrap figure .icon small{
						font-size: 9px;
						margin-top: 4px;
					}
				.caseWrap figure .iconBefore{
					top: -12px;
					right: 53%;
				    width: 45px;
				    height: 45px;
				}
			.case .cellBox dl dd{
				padding-top: 9px;
				padding-bottom: 9px;
			}
		.case .caution{
			max-width: 250px;
			height: 30px;
			font-size: 12px;
			margin: 25px auto 0;
		}
}

/* features
---------------------------------------------- */
.features{
	margin-top: 120px;
}
	.featuresWrap{
		margin-top: 45px;
	}
		.featuresBox{
			width: 47.7777778%;
			border: 1px solid #b6aca7;
			background: #f8f7f6;
		}
			.featuresBox .ttl{
				height: 50px;
				font-size: 20px;
				font-weight: 600;
				background: #8b7b73;
			}
			.featuresBox .txt{
				padding: 20px 28px;
			}
				.featuresBox .txt .list{
				}
					.featuresBox .txt .list li{
						font-size: 16px;
						line-height: 2;
						letter-spacing: .1em;
						text-align: justify;
						text-justify: inter-ideograph;
					}
						.featuresBox .txt .list li::before{
							font-size: 10px;
						}

	.features .cellBox{
		margin-top: 50px;
	}

@media screen and (max-width: 768px){
	.features{
		margin-top: 50px;
	}
		.featuresWrap{
			margin-top: 15px;
		}
			.featuresBox{
				width: 100%;
			}
			.featuresBox + .featuresBox{
				margin-top: 10px;
			}
				.featuresBox .ttl{
					height: 25px;
					font-size: 13px;
				}
				.featuresBox .txt{
					padding: 10px 10px;
				}
					.featuresBox .txt .list{
					}
						.featuresBox .txt .list li{
							font-size: 12px;
							line-height: 1.8;
							letter-spacing: .02em;
						}
							.featuresBox .txt .list li::before{
								transform: scale(.7);
								top: 2px;
							}

		.features .cellBox{
			margin-top: 25px;
		}
}

/* priceArea
---------------------------------------------- */
.priceArea{
	margin-top: 120px;
	margin-bottom: 120px;
}
	.priceAreaWrap{
		margin-top: 30px;
	}

@media screen and (max-width: 768px){
	.priceArea{
		margin-top: 60px;
		margin-bottom: 30px;
	}
		.priceAreaWrap{
			margin-top: 15px;
		}
}

/* bnrArea
---------------------------------------------- */
.bnrArea{
	margin-top: 80px;
	margin-bottom: 60px;
}
	.bnrArea .copy{
		font-size: 28px;
		line-height: 1.57;
		text-align: center;
	}
	.bnrArea a{
		position: relative;
		display: block;
		max-width: 480px;
		margin: 55px auto 0;
	}
	.bnrArea a::before{
		content: '';
		position: absolute;
		top: -40px;
		left: 50%;
		transform: translateX(-50%);
		border-top: 15px solid #d26478;
  		border-right: 15px solid transparent;
  		border-left: 15px solid transparent;
	}

@media screen and (max-width: 768px){
	.bnrArea{
		margin-top: 40px;
		margin-bottom: 30px;
	}
		.bnrArea .copy{
			font-size: 15px;
		}
		.bnrArea a{
			margin: 32px auto 0;
		}
		.bnrArea a::before{
			top: -23px;
			border-top: 10px solid #d26478;
	  		border-right: 10px solid transparent;
	  		border-left: 10px solid transparent;
		}
}