@charset "UTF-8";

/* 共通 */
div.cont_ttl {
	margin: 0 auto;
	padding: 0;
	position: relative;
	z-index: 1;
	h3 {
		/*/*opacity: 0;*/*/
		margin: 0;
		padding: 0;
		font-size: 3.4vw;
		line-height: 120%;
		color: #D1923D;
		font-family: var(--font-cairo);
		font-optical-sizing: auto;
		font-variation-settings: "slnt" 0;
		font-weight: var(--weight-bold1);
	}
	h2 {
		/*opacity: 0;*/
		margin: 0.2em 0 0;
		padding: 0;
		font-size: 6.4vw;
		line-height: 160%;
		font-weight: var(--weight-nomal);
		letter-spacing: 0.05em;
	}
}

/* KV */
#kv {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
	h2 {
		/*opacity: 0;*/
		position: absolute;
		display: inline-block;
		margin: 0;
		padding: 0;
		font-size: 4.6vw;
		line-height: 210%;
		font-weight: var(--weight-bold2);
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		top: 2%;
		left: 3.2%;
		strong {
			display: block;
			width: 11em;
			margin: 2% 0.2em 0 0;
			padding: 0.2em 0.5em;
			font-size: 5.2vw;
			line-height: 210%;
			font-weight: var(--weight-extrabold1);
			font-family: var(--font-zenkaku);
			background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	ul.slick_box {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		list-style: none;
		li {
			width: 100%;
			height: 28em;
			margin: 0 auto;
			padding: 0;
			&.kv01 {
				background: url(../images/top/kv_01_sp.jpg) center / cover no-repeat;
			}
			&.kv02 {
				background: url(../images/top/kv_02_sp.jpg) center / cover no-repeat;
			}
			&.kv03 {
				background: url(../images/top/kv_03_sp.jpg) center / cover no-repeat;
			}
		}
	}
}
section.kv_reservation_time {
	width: 100%;
	margin: 0 auto 0;
	padding: 8% 4.6%;
	.reservation_time_box {
		width: 100%;
		margin: 0;
		padding: 0;
		.tel_reservation {
			width: 100%;
			margin: 0;
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: flex-start;
			a.tel {
				display: inline-block;
				width: 48%;
				margin: 0 auto;
				padding: 0;
				text-decoration: none;
				display: flex;
				justify-content: center;
				align-items: center;
				order: 1;
				img {
					width: 9%;
					height: auto;
				}
				P {
					margin: -0.1em 0 0 0.2em;
					font-size: 5.0vw;
					line-height: 100%;
					color: #D1933D;
					font-family: var(--font-cairo);
					font-optical-sizing: auto;
					font-variation-settings: "slnt" 0;
					font-weight: var(--weight-bold1);
					transition: 0.2s linear;
				}
			}
			.weekend {
				width: 48%;
				margin: -7% 0 0;
				padding: 0;
				font-size: 3.4vw;
				line-height: 160%;
				order: 3;
			}
			a.reservation {
				width: 48%;
				height: 3.0em;
				margin: 0 0 0 4%;
				padding: 0;
				font-size: 3.8vw;
				line-height: 130%;
				color: #fff;
				font-weight: var(--weight-bold2);
				text-decoration: none;
				background: #D1933D;
				border-radius: 9px;
				display: flex;
				justify-content: center;
				align-items: center;
				order: 2;
				img {
					width: 9%;
					height: auto;
					margin: 0 0.8em 0 0;
				}
			}
		}
		.week_tbl {
			margin-top: 10% !important;
		}
	}
}

/* クリニックの想い */
section.top_mind {
	width: 100%;
	margin: 15% auto 0;
	padding: 0;
	.mind_img {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		img {
			width: 100%;
			height: auto;
		}
	}
	.mind_in {
		width: 92%;
		margin: -20% 0 0;
		padding: 0;
		position: relative;
		z-index: 2;
		.mind_box {
			width: 100%;
			margin: 0;
			padding: 8% 5%;
			text-align: left;
			background: #fff;
			div {
				/*opacity: 0;*/
				margin: 0;
				padding: 0;
				h3 {
					margin: 0;
					padding: 0;
					font-style: 3.8vw;
					line-height: 180%;
					color: #D1933D;
					font-weight: var(--weight-bold2);
				}
				h4 {
					margin: 1em 0 0;
					padding: 0 0 0.5em;
					font-size: 5.4vw;
					line-height: 160%;
					font-weight: var(--weight-bold2);
				}
				p {
					width: 110%;
					margin: 1em 0 0;
					font-size: 3.8vw;
					line-height: 200%;
				}
			}
		}
	}
}

/* 診療の特徴 */
section.top_feature {
	margin: 10% auto 0;
	padding: 0;
	.cont_ttl {
		width: 100%;
		margin: 0 auto;
		padding: 0 7.5%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.feature_cont {
		width: 100%;
		.img {
			width: 92.5%;
			margin: 0;
			padding: 0;
			img {
				width: 100%;
				height: auto;
			}
		}
		.feature_cont_in {
			width: 100%;
			margin: 0 auto;
			padding: 0 4.6%;
			display: flex;
			.feature_box {
				/*opacity: 0;*/
				width: 100%;
				margin: 10% 0 0;
				padding: 0;
				text-align: left;
				display: flex;
				flex-direction: column;
				h4 {
					display: inline-block;
					margin: 0;
					padding: 0;
					font-size: 3.6vw;
					line-height: 140%;
					color: #D1933D;
					font-weight: var(--weight-bold2);
					border-bottom: 1px solid #D1933D;
					span {
						margin: 0 0 0.1em 0.2em;
						font-size: 7.8vw;
						line-height: 140%;
						font-family: var(--font-cairo);
						font-optical-sizing: auto;
						font-variation-settings: "slnt" 0;
					}
				}
				h5 {
					width: 100%;
					margin: 1em 0 0;
					padding: 0 0 0.5em;
					font-size: 5.8vw;
					line-height: 160%;
					font-weight: var(--weight-bold2);
				}
				p {
					width: 100%;
					margin: 1em 0 0;
					font-size: 3.8vw;
					line-height: 200%;
				}
			}
		}
		&.feature_01 {
			margin: -1.2em auto 0;
			padding: 15% 0 20%;
			background: #F9F3EA;
			.feature_cont_in {
				.feature_box {
					align-items: flex-start;
				}
			}
		}
		&.feature_02 ,&.feature_04 {
			margin: 0 auto;
			padding: 0 0 20%;
			background: #F8EEE0;
			.img {
				margin-left: 7.5%;
			}
			.feature_cont_in {
				.feature_box {
					align-items: flex-end;
				}
			}
		}
		&.feature_03 {
			margin: 0 auto;
			padding: 15% 0 20%;
			background: #F9F3EA;
			justify-content: flex-end;
			.feature_cont_in {
				.feature_box {
					align-items: flex-start;
				}
			}
		}
	}
}

/* 診療案内 */
section.top_treatment {
	margin: 20% auto 0;
	padding: 0;
	.top_img {
		width: 100%;
		margin: 0;
		padding: 0;
		img {
			width: 100%;
			height: auto;
		}
	}
	.treatment_box {
		width: 90.6%;
		margin: -5% auto 0;
		padding: 10% 6.9% 10%;
		background: #F9F3EA;
		border: 0.5em solid #E9CAA0;
		position: relative;
		z-index: 1;
		ul {
			margin: 0 auto;
			padding: 1em 0 0;
			list-style: none;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			li {
				/*opacity: 0;*/
				width: 30%;
				margin: 1em 0 0 5%;
				padding: 0;
				&:nth-of-type(3n - 2) {
					margin-left: 0;
				}
				a {
					display: block;
					width: 100%;
					margin: 0;
					padding: 10% 2% 4%;
					text-decoration: none;
					background: #fff;
					border-radius: 0.5em;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					img {
						width: 60%;
						height: auto;
					}
					h4 {
						height: 3em;
						margin: 0.5em 0 0;
						padding: 0;
						font-size: 2.9vw;
						line-height: 160%;
						font-weight: var(--weight-bold2);
						color: #333333;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						small {
							display: block;
							font-size: 1.9vw;
							line-height: 160%;
						}
					}
				}
			}
		}
	}
}

/* 院長ごあいさつ */
section.top_message {
	margin: 20% auto 0;
	padding: 0;
	.message_cont {
		width: 90.6%;
		margin: 10% auto 0;
		padding: 0;
		.message_img {
			width: 100%;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			img {
				width: 100%;
				height: auto;
			}
			div {
				display: inline-block;
				margin: -4em 0 0;
				padding: 5% 1.6em;
				font-size: 3.4vw;
				line-height: 160%;
				background: #fff;
				position: relative;
				z-index: 1;
				small {
					display: block;
					font-size: 2.8vw;
					line-height: 160%;
				}
				strong {
					margin-left: 1em;
					font-size: 4.6vw;
					line-height: 160%;
					font-weight: var(--weight-nomal);
				}
			}
		}
		.message_txt {
			/*opacity: 0;*/
			width: 90.6%;
			margin: 8% auto 0;
			padding: 0;
			text-align: left;
			h4 {
				margin: 0;
				padding: 0 0 0.5em;
				font-size: 5.8vw;
				line-height: 160%;
				font-weight: var(--weight-bold2);
			}
			p {
				margin: 1em 0 0;
				padding: 0;
				font-size: 3.6vw;
				line-height: 200%;
			}
			a {
				display: inline-block;
				width: 60%;
				height: 2.8em;
				margin: 10% auto 0;
				padding: 5px;
				font-size: 3.8vw;
				line-height: 140%;
				font-weight: var(--weight-bold2);
				color: #fff;
				text-decoration: none;
				background: #D1933D;
				border-radius: 0.5em;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}

/* クリニックからのお知らせ */
section.top_news {
	margin: 15% auto 0;
	padding: 15% 5% 20%;
	background: #F9F3EA;
	.news_cont {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		.info_cont {
			width: 100%;
			margin: 0;
			padding: 0;
			.info_box {
				margin: 8% auto 0;
				padding: 5% 6%;
				text-align: left;
				background: #FFFFFF;
				.basic_cont {
					width: 100%;
					max-height: 35em;
					overflow-y: auto;
					margin: 0;
					padding: 0 0.5em 0 0;
					font-size: 3.4vw !important;
					line-height: 200% !important;
					scrollbar-color: #555 #F9F3EA;
					scrollbar-width: thin;
					p, div {
						margin: 0;
						padding: 0;
						font-size: 3.4vw !important;
						line-height: 200% !important;
					}
					b, stront {
						font-weight: var(--weight-bold2) !important;
					}
				}
			}
		}
		.payment_cont {
			width: 100%;
			margin: 8% 0 0;
			padding: 0;
			.credit {
				width: 100%;
				margin: 0;
				padding: 5% 6%;
				background: #F8EEE0;
				p {
					margin: 0;
					padding: 0;
					font-size: 3.4vw;
					line-height: 180%;
					text-align: left;
				}
				img {
					display: inline-block;
					width: 70%;
					margin: 5% auto 0;
					img {
						width: 100%;
						height: auto;
					}
				}
			}
			.document {
				width: 100%;
				margin: 30px 0 0;
				a {
					display: block;
					width: 100%;
					height: 6em;
					margin: 0;
					padding: 0;
					font-size: 3.4vw;
					line-height: 180%;
					text-decoration: none;
					background: #F8EEE0;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					img {
						position: absolute;
						content: '';
						display: block;
						width: 0.8em;
						height: auto;
						margin: 0;
						padding: 0;
						top: calc(50% - 0.4em);
						right: 5%;
					}
				}
			}
		}
	}
}

/* アクセス・診療時間 */
section.top_access {
	margin: 15% auto 0;
	padding: 0 0 20%;
	.access_time {
		margin: 10% auto 0;
		padding: 0 4.6%;
		.name_address {
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			.logo {
				width: 23%;
				margin: 0;
				padding: 0;
				img {
					width: 100%;
					height: auto;
				}
			}
			.name_txt {
				width: 72%;
				margin: 0 0 0 5%;
				padding: 0;
				text-align: left;
				h5 {
					margin: 0;
					padding: 0;
					font-size: 2.5vw;
					line-height: 120%;
					font-weight: var(--weight-nomal);
				}
				h4 {
					margin: 0.3em 0 0;
					padding: 0;
					font-size: 4.7vw;
					line-height: 120%;
					font-weight: var(--weight-bold2);
				}
				p {
					margin: 0.5em 0 0;
					padding: 0;
					font-size: 3.1vw;
					line-height: 160%;
					text-align: left;
				}
			}
		}
		.week_tbl {
			margin-top: 10% !important;
		}
	}
	.access_gmap {
		height: 20em;
		margin: 8% auto 0;
		padding: 0;
		position: relative;
		iframe {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}
	.access_train {
		margin: 0 auto;
		padding: 3% 4.6% 0;
		list-style: none;
		background: #fff;
		li {
			width: 100%;
			margin: 8% 0 0;
			padding: 0;
			text-align: left;
			h6 {
				margin: 0;
				padding: 0 0.2em 0.2em 0.2em;
				font-size: 4.0vw;
				line-height: 180%;
				border-bottom: 1px solid #D1933D;
				img {
					width: 6%;
					height: auto;
					margin: 0 0.5em 0 0;
					vertical-align: -0.35em;
				}
			}
			p {
				margin: 0.8em 0 0;
				padding: 0;
				font-size: 3.2vw;
				line-height: 200%;
			}
		}
	}
}