@charset "UTF-8";

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

#kv {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
}
	#kv ul.slick_box {
		width: 100%;
		height: 20em;
		margin: 0 auto;
		padding: 0;
		list-style: none;
	}
		#kv ul.slick_box li {
			width: 100%;
			height: 20em;
			margin: 0 auto;
			padding: 0;
		}
		#kv ul.slick_box li.kv01 {
			background: url(../images/top/kv_01_sp.jpg) center / cover no-repeat;
		}
		#kv ul.slick_box li.kv02 {
			background: url(../images/top/kv_02_sp.jpg) center / cover no-repeat;
		}
		#kv ul.slick_box li.kv03 {
			background: url(../images/top/kv_03_sp.jpg) center / cover no-repeat;
		}
		#kv ul.slick_box li.kv04 {
			background: url(../images/top/kv_04_sp.jpg) center / cover no-repeat;
		}
	#kv .kv_in {display: none;}
	#kv .kv_in_sp {
		width: 90%;
		margin: 0 auto;
		padding: 13% 0 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-end;
		position: absolute;
		top: 20px;
		left: 5%;
		z-index: 1;
	}
		#kv .kv_in_sp img {
			display: block;
			margin: 0 auto;
			width: 90%;
			height: auto;
		}
		#kv .kv_in_sp img:nth-child(2) {
			margin: 5% auto 0;
		}


/* Information */
#index_info {
	width: 88%;
	margin: -7% auto 10%;
	padding: 0;
	position: relative;
	box-shadow: 0 0 15px rgba(89,68,36,0.35);
	z-index: 2;
}
	#index_info .info_in {
		margin: 0 auto;
		padding: 5%;
		background: #FFFFFF;
		border: 10px solid #F0F0E1;
	}
	#index_info h3 {
		margin: 0 auto;
		padding: 0;
		font-size: 5.6vw;
		line-height: 130%;
		color: #663200;
		letter-spacing: 1px;
		font-style: italic;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	}
	#index_info div.info_box {
		width: 100%;
		height: 250px;
		margin: 5% auto 0;
		padding: 0 2%;
		font-size: 3.4vw;
		line-height: 160%;
		color: #333333;
		text-align: left;
		overflow-y: scroll;
	}
		#index_info div.info_box div
		,#index_info div.info_box p {
			margin: 0 auto;
			padding: 0;
			font-size: 3.4vw;
			line-height: 160%;
		}
		#index_info div.info_box div a
		,#index_info div.info_box p a {
			color: #529A7A;
		}


/* プルメリア デンタルオフィスの治療 */
#index_treatment {
	margin: 0 auto;
	padding: 10% 0 10%;
	background: url(../images/top/treatment_top.png) center top / 60% auto no-repeat, #CBB48F;
}
	#index_treatment .treatment_in{
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	#index_treatment h3 {
		width: 90%;
		margin: 0 auto;
		padding: 0;
		font-size: 6.0vw;
		line-height: 130%;
		color: #F0F0E0;
		letter-spacing: 3px;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	}
	#index_treatment h4 {
		margin: 3% auto 0;
		padding: 0;
		font-size: 3.6vw;
		line-height: 120%;
		color: #673400;
		letter-spacing: 1px;
		font-weight: normal;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	}
	#index_treatment div.treatment_list {
		margin: 0 auto;
		padding: 5% 0 0;
	}
		#index_treatment div.treatment_list .list_box {
			margin: 5% auto 0;
			padding: 0;
		}
			#index_treatment div.treatment_list .list_box .img {
				margin: 0;
				padding: 0;
			}
				#index_treatment div.treatment_list .list_box .img img {
					width: 100%;
					height: auto;
				}
				#index_treatment div.treatment_list .list_box .img img {
					vertical-align: bottom;
				}
			#index_treatment div.treatment_list .list_box .cont {
				width: 80%;
				margin: -12% 0 0 17%;
				padding: 8%;
				text-align: left;
				background: linear-gradient(150deg, #72552E 0%, #594424 200px, #594424);
				position: relative;
				z-index: 1;
			}
				#index_treatment div.treatment_list .list_box.rev .cont {
					background: linear-gradient(240deg, #72552E 0%, #594424 200px, #594424);
				}
				#index_treatment div.treatment_list .list_box.rev .cont {
					margin: -12% 0 0 3%;
				}
				#index_treatment div.treatment_list .list_box .cont h5 {
					margin: 0;
					padding: 0;
					font-size: 4.6vw;
					line-height: 130%;
					color: #fff;
					font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
					position: relative;
				}
					#index_treatment div.treatment_list .list_box .cont h5:before {
						position: absolute;
						content: '';
						margin: auto;
						padding: 0;
						width: 3em;
						height: 1px;
						background: #F0F0E1;
						top: 0.5em;
						left: -3.5em;
					}
						#index_treatment div.treatment_list .list_box.rev .cont h5:before {
							display: none;
						}
						#index_treatment div.treatment_list .list_box.rev .cont h5:after {
							position: absolute;
							content: '';
							margin: auto;
							padding: 0;
							width: 3em;
							height: 1px;
							background: #F0F0E1;
							top: 0.5em;
							right: -3.5em;
						}
				#index_treatment div.treatment_list .list_box .cont p {
					margin: 5% 0 0;
					padding: 0;
					font-size: 3.2vw;
					line-height: 160%;
					color: #F0F0E1;
				}


/* 診療案内 */
#index_guide {
	margin: 0 auto;
	padding: 10% 0 15%;
	background: url(../images/top/guide_bg_p_sp.jpg) center bottom / cover no-repeat;
}
	#index_guide h3 {
		margin: 0 auto;
		padding: 0;
		font-size: 5.0vw;
		line-height: 130%;
		color: #663200;
		letter-spacing: 2px;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	}
	#index_guide .item {
		margin: 3% auto 0;
		padding: 0;
	}
		#index_guide .item span {
			display: inline-block;
			margin: 0 2% 0;
			padding: 0 5%;
			font-size: 3.4vw;
			line-height: 40px;
			color: #663300;
			background: #fff;
			font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		}
	#index_guide .guide_cont {
		width: 100%;
		margin: 0 auto;
		padding: 2% 0 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
		#index_guide .guide_cont .guide_box {
			display: block;
			width: 48%;
			margin: 5% 0 0;
			padding: 5%;
			color: #663200;
			background: #F0F0E1;
			box-shadow: 5px 5px rgba(50,35,48,0.5);
			text-decoration: none;
			position: relative;
		}
			#index_guide .guide_cont .guide_box:after {
				position: absolute;
				display: block;
				content: '';
				width: 50%;
				height: 11px;
				margin: auto;
				padding: 0;
				background: url(../images/top/guide_arrow.png) center / contain no-repeat;
				bottom: 5%;
				right: 2%;
			}
			#index_guide .guide_cont .guide_box h4 {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				height: 2.5em;
				margin: 0 auto;
				padding: 0;
				font-size: 4.0vw;
				line-height: 140%;
				font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
			}
				#index_guide .guide_cont .guide_box h4 span {
					display: block;
					width: 100%;
					margin: 0 auto;
					padding: 0;
					font-size: 3.6vw;
					line-height: 140%;
				}
			#index_guide .guide_cont .guide_box p {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 2.8em;
				margin: 3% auto 0;
				padding: 0;
				font-size: 2.8vw;
				line-height: 140%;
			}


/* 動画・バナー */
#index_btm {
	margin: 0 auto;
	padding: 0;
}
	#index_btm .youtube {
		margin: 0 auto;
		padding: 0;
	}
		#index_btm .youtube div {
			width: 100%;
			margin: 10% auto 0;
			padding: 0;
		}
			#index_btm .youtube div h3 {
				margin: 0 auto;
				padding: 0;
				font-size: 4.0vw;
				line-height: 130%;
				color: #663200;
				font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
			}
				#index_btm .youtube div h3 span {
					display: block;
					margin: 0 auto;
					padding: 0;
					font-size: 3.6vw;
					line-height: 130%;
				}
			#index_btm .youtube div a {
				display: block;
				margin: 20px auto 0;
				padding: 0;
				transition: 0.2s linear;
				position: relative;
			}
				#index_btm .youtube div a:before {
					position: absolute;
					display: block;
					content: '';
					width: 60px;
					height: 42px;
					margin: auto;
					padding: 0;
					background: url("../images/icon/youtube_on.png") center / contain no-repeat;
					top: 50%;
					left: 50%;
					transform: translateY(-50%) translateX(-50%);
					-webkit- transform: translateY(-50%) translateX(-50%);
					transition: 0.2s linear;
				}
				#index_btm .youtube div a img {
					display: block;
					width: 100%;
					height: auto;
					vertical-align: bottom;
					
				}
	#index_btm .bnr  {
		margin: 10% auto 0;
		padding: 0;
	}
		#index_btm .bnr a  {
			margin: 0 auto;
			padding: 0;
		}
			#index_btm .bnr a img {
				width: 100%;
				height: auto;
			}

}