@charset "UTF-8";

/* 共通 */
div.cont_ttl {
	margin: 0 auto;
	padding: 0;
	position: relative;
	z-index: 1;
	h3 {
		margin: 0;
		padding: 0;
		font-size: 15px;
		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 {
		margin: 5px 0 0;
		padding: 0;
		font-size: 40px;
		line-height: 160%;
		font-weight: var(--weight-nomal);
		letter-spacing: 0.05em;
	}
}

/* KV */
#kv {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
	h2 {
		position: absolute;
		display: inline-block;
		margin: 0;
		padding: 0;
		font-size: 38px;
		line-height: 210%;
		font-weight: var(--weight-bold2);
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		top: 110px;
		left: calc(50% - 720px);
		strong {
			display: block;
			width: 540px;
			height: 110px;
			margin: 60px 20px 15px 0;
			padding: 5px;
			font-size: 48px;
			line-height: 210%;
			font-weight: var(--weight-extrabold1);
			font-family: var(--font-zenkaku);
			background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	@media screen and (max-width:1520px) {
		h2 {
			left: 30px;
		}
	}
	ul.slick_box {
		width: 100%;
		height: 827px;
		margin: 0 auto;
		padding: 0;
		list-style: none;
		li {
			width: 100%;
			height: 827px;
			margin: 0 auto;
			padding: 0;
			&.kv01 {
				background: url(../images/top/kv_01.jpg) center / cover no-repeat;
			}
			&.kv02 {
				background: url(../images/top/kv_02.jpg) center / cover no-repeat;
			}
			&.kv03 {
				background: url(../images/top/kv_03.jpg) center / cover no-repeat;
			}
		}
	}
}
section.kv_reservation_time {
	width: 100%;
	margin: -128px auto 0;
	padding: 0;
	display: flex;
	justify-content: flex-end;
	position: relative;
	z-index: 2;
	.reservation_time_box {
		width: 980px;
		margin: 0;
		padding: 45px 60px;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tel_reservation {
			width: 292px;
			margin: 0;
			padding: 0;
			a.tel {
				display: inline-block;
				margin: 0 auto;
				padding: 0;
				text-decoration: none;
				pointer-events: none;
				display: flex;
				justify-content: center;
				align-items: center;
				P {
					margin: -0.1em 0 0 6px;
					font-size: 38px;
					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 {
				margin: 10px auto 0;
				padding: 0;
				font-size: 17px;
				line-height: 160%;
			}
			a.reservation {
				width: 100%;
				height: 70px;
				margin: 15px auto 0;
				padding: 0;
				font-size: 20px;
				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;
				&:hover {
					background: #284B66;
				}
				img {
					margin: 0 18px 0 0;
				}
			}
		}
	}
}

/* クリニックの想い */
section.top_mind {
	width: 100%;
	margin: 80px auto 0;
	padding: 0;
	position: relative;
	.mind_img {
		position: absolute;
		display: block;
		width: 930px;
		margin: 0;
		padding: 0;
		top: 70px;
		left: calc(50% - 120px);
		z-index: 1;
	}
	.mind_in {
		width: 100%;
		max-width: 1320px;
		margin: 0 auto;
		padding: 0;
		position: relative;
		z-index: 2;
		.mind_box {
			width: 750px;
			margin: 0;
			padding: 0 135px 115px 10px;
			text-align: left;
			background: #fff;
			div {
				margin: 0;
				padding: 0;
				h3 {
					margin: 0;
					padding: 0;
					font-style: 17px;
					line-height: 180%;
					color: #D1933D;
					font-weight: var(--weight-bold2);
				}
				h4 {
					margin: 30px 0 0;
					padding: 0 0 10px;
					font-size: 34px;
					line-height: 160%;
					font-weight: var(--weight-bold2);
				}
				p {
					margin: 20px 0 0;
					font-size: 18px;
					line-height: 200%;
				}
			}
		}
	}
}

/* 診療の特徴 */
section.top_feature {
	margin: 330px auto 0;
	padding: 0;
	.cont_ttl {
		width: 100%;
		max-width: 1320px;
		margin: 0 auto;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.feature_cont {
		width: 100%;
		position: relative;
		.img {
			position: absolute;
			width: 690px;
			margin: 0;
			padding: 0;
		}
		.feature_cont_in {
			width: 100%;
			max-width: 1320px;
			margin: 0 auto;
			padding: 0;
			display: flex;
			.feature_box {
				width: 50%;
				margin: 0;
				padding: 0;
				text-align: left;
				h4 {
					display: inline-block;
					margin: 0;
					padding: 0;
					font-size: 17px;
					line-height: 140%;
					color: #D1933D;
					font-weight: var(--weight-bold2);
					border-bottom: 1px solid #D1933D;
					span {
						margin: 0 0 0 7px;
						font-size: 40px;
						line-height: 140%;
						font-family: var(--font-cairo);
						font-optical-sizing: auto;
						font-variation-settings: "slnt" 0;
					}
				}
				h5 {
					margin: 40px 0 0;
					padding: 0 0 10px;
					font-size: 36px;
					line-height: 160%;
					font-weight: var(--weight-bold2);
				}
				p {
					margin: 20px 0 0;
					font-size: 18px;
					line-height: 200%;
				}
			}
		}
		&.feature_01 {
			height: 700px;
			margin: -30px auto 0;
			padding: 100px 0 0;
			background: #F9F3EA;
			justify-content: flex-end;
			.img {
				top: -100px;
				left: calc(50% - 810px);
			}
			.feature_cont_in {
				justify-content: flex-end;
			}
		}
		&.feature_02 {
			height: 679px;
			margin: 0 auto;
			padding: 130px 0 0;
			background: #F8EEE0;
			justify-content: flex-start;
			.img {
				top: 0;
				right: calc(50% - 810px);
			}
			.feature_cont_in {
				justify-content: flex-start;
			}
		}
		&.feature_03 {
			height: 920px;
			margin: 0 auto;
			padding: 250px 0 0;
			background: #F9F3EA;
			justify-content: flex-end;
			.img {
				top: 120px;
				left: calc(50% - 810px);
			}
			.feature_cont_in {
				justify-content: flex-end;
			}
		}
		&.feature_04 {
			height: 579px;
			margin: 0 auto;
			padding: 100px 0 0;
			background: #F8EEE0;
			justify-content: flex-start;
			.img {
				top: 0;
				right: calc(50% - 810px);
			}
			.feature_cont_in {
				justify-content: flex-start;
			}
		}
	}
}

/* 診療案内 */
section.top_treatment {
	margin: 280px auto 0;
	padding: 0;
	.top_img {
		height: 338px;
		margin: 0;
		padding: 0;
		img {
			width: 100%;
			height: 338px;
			object-fit: cover;
		}
	}

	.treatment_box {
		width: 100%;
		max-width: 1420px;
		min-width: 1280px;
		margin: -50px auto 0;
		padding: 80px 5px 90px;
		background: #F9F3EA;
		border: 20px solid #E9CAA0;
		position: relative;
		z-index: 1;
				ul {
			margin: 0 auto;
			padding: 5px 0 0;
			list-style: none;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			li {
				width: 240px;
				margin: 40px 20px 0;
				padding: 0;
				a {
					display: block;
					width: 100%;
					height: 240px;
					margin: 0;
					padding: 57px 10px 10px;
					text-decoration: none;
					background: #fff;
					border-radius: 8px;
					border: 2px solid transparent;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					&:hover {
						border: 2px solid #D1933D;
					}
					h4 {
						height: 66px;
						margin: 15px 0 0;
						padding: 0;
						font-size: 20px;
						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: 18px;
							line-height: 160%;
						}
					}
				}
			}
		}

	}
}
	
/* 院長ごあいさつ */
section.top_message {
	margin: 145px auto 0;
	padding: 0;
	.message_cont {
		width: 100%;
		max-width: 1320px;
		min-width: 1280px;
		margin: 90px auto 0;
		padding: 0;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: center;
		.message_img {
			width: 620px;
			margin: 0 -50px 0 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			div {
				display: inline-block;
				margin: -75px 0 0;
				padding: 25px 40px;
				font-size: 20px;
				line-height: 160%;
				background: #fff;
				position: relative;
				z-index: 1;
				small {
					display: block;
					font-size: 16px;
					line-height: 160%;
				}
				strong {
					margin-left: 25px;
					font-size: 28px;
					line-height: 160%;
					font-weight: var(--weight-nomal);
				}
			}
		}
		.message_txt {

			width: 50%;
			margin: 0;
			padding: 0;
			text-align: left;
			h4 {
				margin: 0;
				padding: 0 0 20px;
				font-size: 36px;
				line-height: 160%;
				font-weight: var(--weight-bold2);
			}
			p {
				margin: 20px 0 0;
				padding: 0;
				font-size: 18px;
				line-height: 200%;
			}
			a {
				display: inline-block;
				width: 250px;
				height: 60px;
				margin: 55px 0 0;
				padding: 5px;
				font-size: 19px;
				line-height: 140%;
				font-weight: var(--weight-bold2);
				color: #fff;
				text-decoration: none;
				background: #D1933D;
				border-radius: 8px;
				display: flex;
				justify-content: center;
				align-items: center;
				&:hover {
					background: #284B66;
				}
			}
		}
	}
}

/* クリニックからのお知らせ */
section.top_news {
	margin: 135px auto 0;
	padding: 105px 0 115px;
	background: #F9F3EA;
	.news_cont {
		width: 100%;
		max-width: 1420px;
		min-width: 1280px;
		margin: 0 auto;
		padding: 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		.info_cont {
			width: 59.2%;
			margin: 0;
			padding: 0;
			.info_box {
				margin: 35px auto 0;
				padding: 35px 6%;
				text-align: left;
				background: #FFFFFF;
				.basic_cont {
					width: 100%;
					max-height: 320px;
					overflow-y: auto;
					margin: 0;
					padding: 0 10px 0 0;
					font-size: 16px !important;
					line-height: 200% !important;
					scrollbar-color: #555 #F9F3EA;
					scrollbar-width: thin;
					p, div {
						margin: 0;
						padding: 0;
						font-size: 16px !important;
						line-height: 200% !important;
					}
					b, stront {
						font-weight: var(--weight-bold2) !important;
					}
				}
			}
		}
		.payment_cont {
			width: 510px;
			margin: 0;
			padding: 122px 0 0;
			.credit {
				width: 100%;
				margin: 0;
				padding: 35px 60px;
				background: #F8EEE0;
				p {
					margin: 0;
					padding: 0;
					font-size: 16px;
					line-height: 180%;
					text-align: left;
				}
				img {
					display: inline-block;
					margin: 15px auto 0;
				}
			}
			.document {
				width: 100%;
				margin: 30px 0 0;
				a {
					display: block;
					width: 100%;
					height: 86px;
					margin: 0;
					padding: 0;
					font-size: 15px;
					line-height: 180%;
					text-decoration: none;
					background: #F8EEE0;
					display: flex;
					justify-content: center;
					align-items: center;
					&:hover {
						background: #fff;
					}
					img {
						margin: 0 0 0 10px;
					}
				}
			}
		}
	}
}

/* アクセス・診療時間 */
section.top_access {
	margin: 110px auto 0;
	padding: 0 0 50px;
	.access_time {
		width: 1120px;
		margin: 80px auto 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		.name_address {
			width: 470px;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			.logo {
				width: 120px;
				margin: 0;
				padding: 0;
			}
			.name_txt {
				width: 320px;
				margin: 0;
				padding: 0;
				h5 {
					margin: 0;
					padding: 0;
					font-size: 14px;
					line-height: 120%;
					font-weight: var(--weight-nomal);
				}
				h4 {
					margin: 10px 0 0;
					padding: 0;
					font-size: 25px;
					line-height: 120%;
					font-weight: var(--weight-bold2);
				}
				p {
					margin: 15px 0 0;
					padding: 0;
					font-size: 16px;
					line-height: 160%;
					text-align: left;
				}
			}
		}
	}
	.access_gmap {
		height: 580px;
		margin: 45px auto 0;
		padding: 0;
		position: relative;
		iframe {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}
	.access_train {
		width: 1260px;
		margin: -40px auto 0;
		padding: 50px 60px;
		list-style: none;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		position: relative;
		z-index: 1;
		li {
			width: 330px;
			margin: 0;
			padding: 0;
			h6 {
				margin: 0;
				padding: 0 5px 5px 6px;
				font-size: 22px;
				line-height: 180%;
				border-bottom: 1px solid #D1933D;
				img {
					margin: 0 10px 0 0;
					vertical-align: -0.35em;
				}
			}
			p {
				margin: 15px 0 0;
				padding: 0;
				font-size: 16px;
				line-height: 200%;
				text-align: left;
			}
		}
	}
}