@charset "utf-8";

section .inner{
	max-width: 900px;
}
/* intro
---------------------------------------------- */
.intro{
	margin-top: 100px;
}

	/* slideWrap
	---------------------------------------------- */
	.slideWrap{
		width: 95%;
		max-width: 1100px;
		margin-top: 100px;
		margin-right: auto;
		margin-left: auto;
	}
		.clinicSlider{
			position: relative;
		}
			.clinicSlider .swiper-wrapper{
			}
				.clinicSlider .swiper-slide{
					position: relative;
				}
					.clinicSlider .swiper-slide .sliderCap{
						position: absolute;
						bottom: 5%;
						left: 3.1%;
						font-size: 34px;
						line-height: 1;
						letter-spacing: .05em;
						color: rgba(255, 255, 255, .65);
						text-shadow:
						2.5px 2.5px 20px rgba(0, 0, 0, .6);
					}
					.clinicSlider .swiper-slide .sliderCap2{
						left: 53.1%;
					}
					.clinicSlider .swiper-slide .p-caption2{
						right: 50%;
					}

					/* navigation｜ナビゲーション */
					.clinicSlider .swiper-button-prev,
					.clinicSlider .swiper-button-next{
						width: 50px;
						height: 70px;
						background: rgba(255, 255, 255, .3);
						transition: .3s;
						cursor: pointer;
					}
					.clinicSlider .swiper-button-next{
						right: 0;
					}
					.clinicSlider .swiper-button-prev{
						left: 0;
					}
					.clinicSlider .swiper-button-prev:hover,
					.clinicSlider .swiper-button-next:hover{
						opacity: .7;
					}
					.clinicSlider .swiper-button-prev:focus,
					.clinicSlider .swiper-button-next:focus{
						outline: none;
					}
					.clinicSlider .swiper-button-next::after,
					.clinicSlider .swiper-button-prev::after{
						content: '';
						display: inline-block;
						width: 25px;
						height: 25px;
						transform: rotate(45deg);
					}
					.clinicSlider .swiper-button-next::after{
						border-top: 1px solid #de8c9a;
						border-right: 1px solid #de8c9a;
						margin-right: 15px;
					}
					.clinicSlider .swiper-button-prev::after{
						border-bottom: 1px solid #de8c9a;
						border-left: 1px solid #de8c9a;
						margin-left: 15px;
					}

		/* clinicThumbnail｜サムネイル */
		.clinicThumbnail{
			margin-top: 15px;
		}
			.thumbnailList{
			}
				.thumbnailList li{
					position: relative;
					width: calc((100% - 78px) / 7);
					cursor: pointer;
				}
				.thumbnailList li:last-child{
					margin-right: 0;
				}
				.thumbnailList li::before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: rgba(63, 55, 50, .5);
					transition: opacity .5s;
				}
				.thumbnailList li.current::before{
					opacity: 0;
				}
					.thumbnailList li .thumbnailCap{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						width: 100%;
						font-size: 20px;
						line-height: 1.3;
						/* line-height: 1; */
						letter-spacing: .05em;
						color: rgba(255, 255, 255, .8);
						text-align: center;
						transition: opacity .5s;
						z-index: 1;
					}
					.thumbnailList li .thumbnailCap.small{
						font-size: 10px;
					}
					.thumbnailList li.current .thumbnailCap{
						opacity: 0;
					}
					.thumbnailList li .thumbnailCap .sp1300{
						display: none;
					}
	.intro .what{
		position: relative;
		margin-top: 80px;
		padding: 80px 90px 60px;
		box-sizing: border-box;
	}
	.intro .what::before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url('../../img/clinic/pc/bg_what.png') center/cover no-repeat;
		box-sizing: border-box;
		z-index: -1;
	}
		.intro .what .ttl1{
			font-size: 30px;
			line-height: 1.6;
		}
		.intro .what .movieWrap{
			position: relative;
			margin-top: 30px;
			padding-bottom: 56.25%;
			overflow: hidden;
		}
			.intro .what .movieWrap iframe{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		.intro .what .ttl2{
			font-size: 22px;
			margin-top: 50px;
		}
		.intro .what .des{
			font-size: 16px;
			line-height: 2.125;
			margin-top: 26px;
			text-align: justify;
			text-justify: inter-ideograph;
		}

@media screen and (min-width: 768px){
	.thumbnailList li:hover::before,
	.thumbnailList li:hover .thumbnailCap{
		opacity: 0;
	}
}
@media screen and (max-width: 768px){
	.intro{
		margin-top: 40px;
	}
		/* slideWrap
		---------------------------------------------- */
		.slideWrap{
			width: 100%;
			margin-top: 50px;
		}
			.clinicSlider .swiper-slide .sliderCap{
				bottom: 3.8%;
				left: 3.1%;
				font-size: 18px;
			}
			.clinicSlider .swiper-slide .sliderCap.sp-small{
				bottom: 10%;
			}
			.clinicSlider .swiper-slide .sliderCap2{
				left: 53.1%;
			}
			.clinicSlider .swiper-slide .p-caption{
				padding: 5px;
			}
			.clinicSlider .swiper-slide .p-caption2{
				right: 50%;
			}

			/* navigation｜ナビゲーション */
			.clinicSlider .swiper-button-prev,
			.clinicSlider .swiper-button-next{
				width: 40px;
				height: 50px;
			}
			.clinicSlider .swiper-button-prev:hover,
			.clinicSlider .swiper-button-next:hover{
				opacity: 1;
			}
			.clinicSlider .swiper-button-next::after,
			.clinicSlider .swiper-button-prev::after{
				width: 15px;
				height: 15px;
			}
			.clinicSlider .swiper-button-next::after{
				margin-right: 8px;
			}
			.clinicSlider .swiper-button-prev::after{
				margin-left: 8px;
			}

			/* clinicThumbnail｜サムネイル */
			.clinicThumbnail{
				width: 87.5%;
				margin-top: 12px;
				margin-right: auto;
				margin-left: auto;
			}
				.thumbnailList{
				}
					.thumbnailList li{
						width: 32.5333334%;
						margin-right: 1.2%;
					}
					.thumbnailList li:nth-child(3n){
						margin-right: 0;
					}
					.thumbnailList li:nth-child(n+4){
						margin-top: 4.5px;
					}
						.thumbnailList li .thumbnailCap{
							font-size: 12px;
							letter-spacing: 0;
						}
						.thumbnailList li .thumbnailCap.small{
							font-size: 11px;
							line-height: 1.3;
						}

		.intro .what{
			margin-top: 38px;
			padding: 27px 25px 30px;
		}
		.intro .what::before{
			background: url('../../img/clinic/sp/bg_what.png') center/cover no-repeat;
		}
			.intro .what .ttl1{
				font-size: 16px;
				letter-spacing: .05em;
				line-height: 1.6875;
			}
			.intro .what .movieWrap{
				margin-top: 14px;
			}
			.intro .what .ttl2{
				font-size: 14px;
				line-height: 1.6;
				letter-spacing: 0;
				margin-top: 25px;
			}
			.intro .what .des{
				font-size: 12px;
				line-height: 1.8;
				letter-spacing: .05em;
				margin-top: 13px;
			}
}

/* unique
---------------------------------------------- */
.unique{
	margin-top: 90px;
}
	.unique .ttl{
		font-size: 30px;
	}
	.uniqueWrap{
		margin-top: 50px;
	}
		.uniqueWrap .box{
			width: 46%;
		}
			.uniqueWrap .ttl1{
				display: flex;
				align-items: center;
				height: 100px;
				font-size: 22px;
				line-height: 1.6;
				letter-spacing: .1em;
				color: #6e5a50;
				padding-left: 1em;
				border-left: 6px solid #9ea562;
			}
			.uniqueWrap .des{
				font-size: 16px;
				line-height: 2.125;
				letter-spacing: .1em;
				margin-top: 30px;
				text-align: justify;
				text-justify: inter-ideograph;
			}

@media screen and (max-width: 768px){
	.unique{
		margin-top: 48px;
	}
		.unique .ttl{
			font-size: 16px;
			letter-spacing: .05em;
			line-height: 1.6;
		}
		.uniqueWrap{
			display: block;
			margin-top: 30px;
		}
			.uniqueWrap .box{
				width: 100%;
			}
			.uniqueWrap .box + .box{
				margin-top: 30px;
			}
				.uniqueWrap .ttl1{
					height: 65px;
					font-size: 14px;
					letter-spacing: .05em;
					border-left: 3px solid #9ea562;
				}
				.uniqueWrap .des{
					font-size: 12px;
					line-height: 1.8;
					letter-spacing: .05em;
					margin-top: 15px;
				}
}

/* overview
---------------------------------------------- */
.overview{
	margin-top: 90px;
	padding-bottom: 50px;
}
	.overview .ttl{
		font-size: 30px;
	}
		.overviewBox{
			margin-top: 50px;
		}
			.overviewBox dl dd .caution{
				display: block;
				font-size: 14px;
				line-height: 1.57;
				padding-left: 1.1em;
				text-indent: -1.1em;
				margin-top: 1em;
			}

		.overviewBox .time{
			position: relative;
		}
		.overviewBox .time .balloon{
			position: absolute;
			top: 16%;
			right: 15%;
			width: 333px;
		}

@media screen and (max-width: 768px){
	.overview{
		margin-top: 48px;
		padding-bottom: 25px;
	}
		.overview .ttl{
			font-size: 16px;
			letter-spacing: .05em;
		}
			.overviewBox{
				width: 87.5%;
				margin-top: 16px;
			}
				.overviewBox dl dt{
					font-size: 11px;
					line-height: 1.36;
				}
				.overviewBox dl dd{
					font-size: 11px;
					line-height: 1.36;
					padding: 10px 1em;
				}
				.overviewBox dl dd .caution{
					font-size: 10px;
					line-height: 1.36;
					letter-spacing: 0;
					margin-top: .5em;
				}
}