@charset "utf-8";
body {
}
.colors {
	color: rgba(20, 117, 135, 1);
	color: rgba(250, 126, 92, 1);
	color: rgba(246, 241, 235, 1);
	color: rgba(254, 203, 95, 1);
	color: rgba(99, 204, 200, 1);
}

.cautionUl li {
	text-indent: -1em;
	margin-left: 1em;
}
.pageTitleBox h2 {
	padding-bottom: 0;
	font-size: 4rem;
	line-height: 1.4;
}
.pageTitleBox::after {
	content: attr(data-subtext)'';
	display: inline-block;
	border-top: 2px solid rgba(255, 255, 255, 1);
	font-size: small;
	text-shadow: 1px 1px 2px rgba(100, 100, 100, 0.5);
}

h3 {
	/*
	color: #000;
	padding: 0.6em 0.6em 0.6em 1.5em;
	background-color: rgba(246, 241, 235, 1);
	margin-bottom: 1em;
	position: relative;
	border-left: solid 4px rgba(20, 117, 135, 1);
	font-size: 120%;
	letter-spacing: 0.5em;
	font-weight: normal;
	*/
	font-size: 3rem;
	margin-bottom: 2.5rem;
	line-height: 1.5;
	letter-spacing: 0.1em;
	font-weight: normal;
}
h3:not(:first-child) {
	margin-top: 6rem;
}
	h3.lineH3 {
		padding-bottom: 1.5rem;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		position: relative;
		margin-bottom: 4rem;
	}
	h3.lineH3::after {
		content: '';
		position: absolute;
		width: 25%;
		border-bottom: 1px solid rgba(250, 126, 92, 1);
		left: 0;
		bottom: -1px;
		display: inline-block;
	}
/*
h3::after {
	content: '';
	position: absolute;
	width: 25%;
	bottom: -1px;
	left: 0;
	display: block;
	border-bottom: 2px solid #a52f3a;
}*/
	#newsBody h3 {
		color: #333;
		font-size: 2.4rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid rgba(100, 100, 100, 1);
		position: relative;
	}
		#newsBody h3::after {
			content: '';
			position: absolute;
			width: 25%;
			bottom: -2px;
			left: 0;
			display: block;
			border-bottom: 3px solid rgba(20, 117, 135, 1);
		}
h4 { font-size: 110%; }
h5 { font-size: 1.6rem; }

.lineTitle {
	position: relative;
	line-height: 1;
	z-index: 100;
}
	.lineTitle::after {
		content: '';
		border-top: 1px solid rgba(20, 117, 135, 1);
		width: 100%;
		position: absolute;
		top: 0.5em;
		left: 0;
		z-index: -1;
	}
	.lineTitle span {
		background: rgba(255, 255, 255, 1);
		padding: 0 1em;
		position: relative;
		display: inline-block;
	}
	.colorBox .lineTitle span { background: rgba(246, 241, 235, 1); }
		.lineTitle span::before, 
		.lineTitle span::after {
			position: absolute;
			top: 0;
		}
		.lineTitle span::before { content: '【'; left: -0.5em; }
		.lineTitle span::after { content: '】'; right: -0.5em; }


time {
	display: block;
	text-align: right;
}
.contentBtnBox {
	margin: 2em 0;
	text-align: center;
}
#menuBody .contentBtnBox { text-align: left; }
	.contentBtnBox a {
		display: inline-block;
		text-decoration: none;
		text-align: center;
		background: #FF6600;
		color: rgba(255, 255, 255, 1);
		width: 30vw;
		padding: 1.5em 0;
		border-radius: 3px;
	}
	.contentBtnBox a:hover { background: #a52f3a; }
	#menuBody .contentBtnBox a { padding: 0.5rem; }
.newsContentBox {
	padding: 2em 0;
}
.cautionBox {
/*	background: rgba(255, 119, 0, 0.1);*/
	background: rgba(246, 241, 235, 1);
	padding: 1.5rem;
}
.cautionTel {
	padding-left: 15rem;
	position: relative;
}

#footerBox #footerSubMenuBox li a {
	background: rgba(250, 126, 92, 1);
	color: #FFF;
	border-radius: 2em;
	padding: 1em 0;
	font-size: 1.5rem;
}
	#footerBox #footerSubMenuBox li.news a {
	/*	padding: 0.5em 0;*/
	}
	#footerBox #footerSubMenuBox li a:hover {
		background: rgba(20, 117, 135, 1);
	}

/* [ pages ] ===========================================*/
.pageTitleBox {
	background-image: url(../img/common/header.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	text-align: center;
	padding: 3em;
	position: relative;
	display: block;
	color: rgba(255, 255, 255, 1);
	text-shadow: 1px 1px 3px rgba(100, 100, 100, 0.5);
	margin-bottom: 2em;
	position: relative;
	z-index: -2;
	border-top: 1px solid rgba(100, 100, 100, 0.1);
	border-bottom: 1px solid rgba(100, 100, 100, 0.1);
}
	.pageTitleBox h2 {
		text-shadow: 0 0 8px rgba(100, 100, 100, 1);
	}

.pageTitleBox::before {
	position: absolute;
	top: 0;
	left: 0;
	background-image: linear-gradient(
						45deg, 
						rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)
					), 
					linear-gradient(
						45deg, 
						rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)
					);
	background-position: 0 0, 2px 2px;
	background-size: 4px 4px;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#aboutBody .pageTitleBox { background-image: url(../img/about/header.jpg); }
#menuBody .pageTitleBox { background-image: url(../img/menu/header.jpg); }
#facilityBody .pageTitleBox { background-image: url(../img/facility/header.jpg); }
#contactBody .pageTitleBox { background-image: url(../img/contact/header.jpg); }
#accessBody .pageTitleBox { background-image: url(../img/access/header.jpg); }
#recruitBody .pageTitleBox { background-image: url(../img/recruit/header.jpg); }
/*
*/
#pageBox h2 { margin-bottom: 4rem; }
#pageBox h3, 
#pageBox h4 { margin-bottom: 2.5rem; }
#pageBox h3 { color :#a52f3a; }
#pageBox .mb { margin-bottom: 4rem; }
#pageBox .mbm { margin-bottom: 2rem; }
#companyBody #pageBox img, 
#aboutBody #pageBox img { margin-bottom: 2rem; }

.medicalhoursBox tbody td:not(:nth-child(1)){ text-align: center; width: 12%; }

.colorBox {
	padding: 4rem 0;
	background-color: rgba(246, 241, 235, 1);
	margin-bottom: 4rem;
}

/* home */
#homeImgBox {
	height: 50vw !important;
	max-height: 90vh !important;
	transition: 0.3s;
	background: url(../img/home/bg_slide.jpg) no-repeat 50% 50%;
	background-size: cover;
/*	margin-bottom: 3rem;*/
}
#facilityImgBox {
	height: 45vw !important;
	max-height: 528px !important;
	transition: 0.3s;
}
#homeCopyBox {
	padding: 2em 0;
	margin-bottom: 2em;
}
	#homeCopyBox img {
	/*	width: 100%;*/
		max-width: 600px;
	}
	#homeCopyBox h2 {
		color: #FF6600;
		padding-top: 2rem;
	}
#homePointBox dl {
	padding-left: 80px;
	position: relative;
}
	#homePointBox dl::before {
		content: '';
		background: rgba(250, 126, 92, 1);
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		width: 70px;
		height: 70px;
	}
#homeNewsBox {
	padding:0;
	background-color: rgba(246, 241, 235, 1);
/*	margin: 3em 0 0 0;*/
}
	#homeNewsBox > .initBox > h3 {
		width: 23%;
		padding-top: 1.7em;
		text-align: center;
		border-left: none;
		background-color: rgba(250, 126, 92, 1);
		color: #FFF;
		margin-bottom: 0;
	}
	#homeNewsBox > .initBox > div {
		width: 70%;
		padding: 2em 0;
	}
	.newslistUl li { flex-wrap: nowrap; }
	#newslistBox .newslistUl > li:not(:last-child), 
	#homeNewsBox .newslistUl > li:not(:last-child) {
		padding-bottom: 1rem;
		border-bottom: 1px dotted rgba(51, 51, 51, 1);
		margin-bottom: 1rem;
	}
		#newslistBox li .newsDateBox, 
		#newslistBox li .newsCategoryUl, 
		#homeNewsBox li .newsDateBox, 
		#homeNewsBox li .newsCategoryUl {
			width: 10em;
			font-size: 1.2rem;
		}
			.newsCategoryUl li {
				border: 1px solid rgba(254, 203, 95, 1);
				background: #FFF;
				color: rgba(254, 203, 95, 1);
				border-radius: 3px;
				text-align: center;
				font-weight: bold;
			}
			.newsCategoryUl li.categorycloseLi {
				border-color: rgba(20, 117, 135, 1);
				color: rgba(20, 117, 135, 1);
				background-color: rgba(255, 255, 255, 0.5);
			}

			.newsCategoryUl {
				white-space: nowrap;
				height: calc(2.8rem + 2px);
				overflow: hidden;
			}
			.newsCategory2 li:first-child {
				animation-name: slideNewsCategory2;
				animation-duration: 5s;
				animation-delay: 0;
				animation-iteration-count: infinite;
			}
			@keyframes slideNewsCategory2 {
				0% { margin-top: 0; }
				35% { margin-top: 0; }
				45% { margin-top: calc((2.8rem + 2px) * -1); }
				90% { margin-top: calc((2.8rem + 2px) * -1); }
				100% { margin-top: calc((2.8rem + 2px) * -2); }
			}

		#newslistBox li .newstitle, 
		#homeNewsBox li .newstitle {
			flex: 1;
			padding-left: 2rem;
		}
			#newslistBox li .newstitle a, 
			#homeNewsBox li .newstitle a { color: #000; }
		#homeNewsBox .more-link {
			text-decoration: none;
			margin-top: 0.5em;
			text-align: right;
			font-size: 1.2rem;
			font-weight: bold;
		}
			#homeNewsBox .more-link a {
				background: rgba(250, 126, 92, 1);
				border-radius: 1.5em;
				display: inline-block;
				color: #FFF;
				padding: 0.25rem 2rem;
			}
				#homeNewsBox .more-link a:hover { background: rgba(20, 117, 135, 1); }

		#homeNewsBox .newslistUl li.covid19 {
			margin-bottom: 2rem;
			border-bottom: none;
		}
			#homeNewsBox .newslistUl li.covid19 a {
				background: rgba(20, 117, 135, 1);
				color: rgba(255, 255, 255, 1);
				text-decoration: none;
				text-align: center;
				padding: 1em;
				display: block;
			}
			#homeNewsBox .newslistUl li.covid19 a:hover { background: rgba(254, 203, 95, 1); color: rgba(0, 0, 0, 1); }

/* about */
.flexL { justify-content: flex-start; }
.coloumcount2 { column-count: 2; }
#doctorProfileBox > .flexBox {
	flex-wrap: nowrap;
}
	#doctorProfileBox .flexBox .image {
		width: 25%;
	}
	#doctorProfileBox .flexBox .text {
		width: 75%;
		padding-left: 4rem;
	}
		#doctorProfileBox .flexBox .text dl dt {
			padding-bottom: 0.5rem;
			border-bottom: 1px solid rgba(51, 51, 51, 0.5);
			margin-bottom: 1rem;
			color: rgba(100, 100, 100, 1);
			font-size: 1.4rem;
			margin-bottom: 1rem;
		}
	#aboutBody dl dt {
		font-size: 2.2rem;
		font-weight: bold;
		color: rgba(20, 117, 135, 1);
		margin-bottom: 2rem;
	}
/*
.doctorNameBox {
	padding-left: 22vw;
	height: 18vw;
	background: url(../img/about/doctor.jpg) no-repeat;
	background-size: contain;
}
*/

/* facility */
#facilityBox {}
	#aestheticBody dl dt, 
	#generalBody dl dt, 
	#preventionBody dl dt, 
	#implantBody dl dt, 
	#correctionBody dl dt, 
	#facilityBox dl dt {
		font-size: 1.8rem;
		font-weight: bold;
		color: rgba(20, 117, 135, 1);
		margin-bottom: 1rem;
	}
		#menuBody dl dd .image, 
		#facilityBox dl dd .image {
			width: 23%;
			max-width: 220px;
			order: 2;
		}
		#menuBody dl dd .text, 
		#facilityBox dl dd .text {
			width: 73%;
			order: 1;
		}

/* contact */
#contactFormBox dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-bottom: 1rem;
	border-bottom: 1px dotted rgba(51, 51, 51, 1);
	margin-bottom: 2rem;
}
	#contactFormBox dl dt { width: 10em; }
	#contactFormBox dl dt.required { position: relative; }
		#contactFormBox dl dt.required::after {
			content: '必須';
			top: 0;
			right: 0;
			position: absolute;
			background: #a52f3a;
			color: rgba(255, 255, 255, 1);
			font-size: 1rem;
			font-weight: bold;
			padding: 0 1rem;
			border-radius: 5px;
		}
	#contactFormBox dl dd { flex: 1; }
	#contactFormBox dl dd { padding-left: 1rem; }
	#contactFormBox dd input { font-size: 1.8rem; }
	#contactFormBox dd input.iwS { width: 25%; }
	#contactFormBox dd input.iwM { width: 50%; }
	#contactFormBox dd input.iwF { width: 100%; }
	#contactFormBox dd input:not(:last-child), 
	#contactFormBox dd select:not(:last-child) { margin-bottom: 0.5rem; }

/* menu */
#menuBody {}
	#menuBody dl dt {
		font-size: 2.2rem;
		font-weight: bold;
		color: rgba(20, 117, 135, 1);
		margin-bottom: 1rem;
	}

/* news */
	#newsBody .newsContentBox strong { color: rgba(20, 117, 135, 1); }
	#newsBody .newsContentBox ol, 
	#newsBody .newsContentBox ul {
		margin: 1rem 0;
	}
		#newsBody .newsContentBox ol li, 
		#newsBody .newsContentBox ul li {
			list-style: disc;
			margin-left: 2em;
		}
		#newsBody .newsContentBox ol li { list-style: decimal; }
		#newsBody .newsContentBox ol li:not(:last-child), 
		#newsBody .newsContentBox ul li:not(:last-child) { margin-bottom: 0.5rem; }
	.newslistDl:not(:last-child) {
		padding-bottom: 1em;
		border-bottom: 1px dotted #a52f3a;
		margin-bottom: 1em;
	}
		.newslistDl dt { font-weight: bold; }
		.newslistDl dd { }
			.newslistDl dd .newsDateBox {
				width: 8em;
				display: inline-block;
				color: #a52f3a;
				margin-right: 1em;
			}
			.newslistDl dd .newsCategoryUl {
				display: inline-block;
				width: 5em;
			}
				.newslistDl dd .newsCategoryUl li {
					font-size: 1.2rem;
					text-align: center;
					border-radius: 3px;
					line-height: 2em;
				}
				.newslistDl dd .newstitle { flex: 1; }
			.newslistDl dd p {
				padding-left: 2em;
				color: rgba(102, 102, 102, 0.75);
			}

.myPagenation {
	margin: 2rem 0;
}
	.myPagenation li {
		width: 4rem;
		height: 4rem;
		line-height: 4rem;
		display: inline-block;
		margin: 0.25rem;
		border-bottom: none !important;
	}
		.myPagenation li.nowpage {
			background: rgba(255, 119, 0, 0.5);
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
		.myPagenation li a {
			background: rgba(51, 51, 51, 0.5);
			text-align: center;
			text-decoration: none;
			display: block;
			color: rgba(255, 255, 255, 1);
		}
			.myPagenation li a:hover {
				background: rgba(250, 126, 92, 1);
				color: rgba(255, 255, 255, 1);
			}


/* [sp] ============================================ */
@media only screen and (max-width: 780px) {

	h2 { font-size: 2.8rem; line-height: 130%; }
	h3 { font-size: 2.4rem; line-height: 130%; }

	#homeImgBox {
		height: 50vw !important;
	}
	#miniMedicalTableBox .medicalhoursBox {
		position: relative;
		width: 100%;
		top: 0;
		right: 0;
		background: none;
		box-shadow: none;
	}
	#homeNewsBox li { margin-left: 25px; }

	#doctorProfileBox .flexBox .image, 
	#doctorProfileBox .flexBox .text, 
	#contactFormBox dd input.iwM, 
	#homeNewsBox > .initBox > h3, 
	#homeNewsBox > .initBox > div, 
	#menuBody dl dd .image, 
	#menuBody dl dd .text, 
	#facilityBox dl dd .image, 
	#facilityBox dl dd .text, 
	#contactFormBox dl dt, 
	#contactFormBox dl dd, 
	#homeNewsBox li .newsdate,  
	#homeNewsBox li .newstitle, 
	#homeNewsBox h3, 
	#homeNewsBox ul, 
	.contentBtnBox a { width: 100%; }
	#contactFormBox dd input.iwS { width: 50%; }

	#homeNewsBox h3{ margin: 1em 0; padding: 0.5em 0 0.5em 1.5em;} 
	#homeNewsBox ul { margin-bottom: 1em; }
	#contactFormBox dl dt { margin-bottom: 0.5rem; }
	#costBox .spTable th + td, 
	.spTable td:first-child:not(.nochangecolor) {
		background: rgba(246, 241, 235, 1);
	}

	#homeNewsBox > .initBox > h3 { padding: 0.5rem 1rem; }
	#homeNewsBox > .initBox > div { padding: 0; margin-top: 1rem; }
	#homeNewsBox li { margin-left: 0; }
	#doctorProfileBox > .flexBox, 
	#homeNewsBox li, 
	#newslistUl li { flex-wrap: wrap; }
		#doctorProfileBox > .flexBox .text, 
		#homeNewsBox li .newstitle, 
		#newslistBox li .newstitle { flex: auto; width: 100%; padding-left: 0; }
	#homeBody .ggmap { padding-bottom: 80%; }

	/* about */
	.doctorNameBox {
		padding-left: 55%;
		height: 40.5vw;
	}

	#menuBody dl dd .image, 
	#facilityBox dl dd .image {
		text-align: center;
		margin-bottom: 1rem;
		order: 1;
	}
	#facilityBox dl dd .text {
		order: 2;
	}
	.cautionTel {
		padding-left: 7rem;
	}

}