@charset "utf-8";

/******************* 統一設定 *******************/
*{
	margin:0;
	padding:0;
	text-decoration:none;
	font-family:'ZenMaru',sans-serif,'Font Awesome 6 Free';
	font-weight:normal;
	table-layout:fixed;
	border-spacing:0;
	box-sizing:border-box;
}

:root{
	--sm-font-size-12px:clamp(6px,2.75vw,12px);
	--sm-font-size-13px:clamp(7px,3vw,13px);
	--sm-font-size-14px:clamp(8px,3.25vw,14px);
	--sm-font-size-15px:clamp(10px,3.5vw,15px);
	--sm-font-size-16px:clamp(12px,3.75vw,16px);
	--sm-font-size-18px:clamp(12px,4vw,18px);
	--sm-font-size-20px:clamp(15px,4.5vw,20px);
	--sm-font-size-22px:clamp(14px,4.75vw,22px);
	--sm-font-size-24px:clamp(16px,5vw,24px);
}

::selection{
	color:#fff;
	background:#337d98;
}

.flexbox{
	display:flex;
}

.button{
	width:fit-content;
	width:-moz-fit-content;
}

a{
	color:#000;
	transition:.3s;
}

a:hover{
	opacity:.7;
}

h1,h2,h3,h4{
	font-weight:bold;
}

ul,ol{
	list-style-position:inside;
}

body{
	color:#333;
	font-size:var(--sm-font-size-16px);
}

div.wrapper{
	margin:0 auto;
}

section[id^=sec] .circle{
	width:90%;
	max-width:500px;
	margin:0 auto;
	padding-top:50px;
	background:#fff;
	border-radius:50% / 0 0 100% 100%;
	aspect-ratio:2/1;
}

section[id^=sec] .circle .header{
	flex-direction:column;
	align-items:center;
}

section[id^=sec] .circle .header img{
	width:52px;
	margin-bottom:5px;
}

section[id^=sec] .circle .header h2{
	color:#337d98;
	font-weight:bold;
	border-bottom:dotted 3px #4db57d;
}

div.button a{
	width:100vw;
	text-align:center;
	vertical-align:middle;
	display:table-cell;
	transition:.3s;
}

img{
	object-fit:contain;
}


/******************* ヘッダー *******************/
header{
	width:100%;
	height:100px;
	background:#fff;
	box-shadow:0 0 15px rgb(0 0 0 / 30%);
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:99999;
}

header nav.pcView{
	width:1118px;
	height:100%;
	margin:0 auto;
	flex-direction:row;
	align-items:center;
	align-content:center;
}

header nav.smView{
	display:none;
}

header nav.pcView div.logo{
	width:200px;
	margin:-5px auto 0;
	display:block;
}

header nav.pcView div.logo a{
	width:200px;
	margin:0 auto;
	color:#337d98;
	text-align:center;
	font-size:1.575em;
	display:block;
	transition:.3s;
}

header nav.pcView div.logo a:hover{
	opacity:.7;
}

header nav.pcView div.item ul{
	width:918px;
	height:90px;
	margin:7.5px auto;
	padding:0;
	list-style:none;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
}

header nav.pcView div.item ul li{
	height:80px;
}

header nav.pcView div.item ul li:not(.recruit,.contacts){
	border-right:dotted 3px #337d98;
}

header nav.pcView div.item ul li.contacts{
	height:100px;
}

header nav.pcView div.item ul a{
	width:110px;
	height:100%;
	color:#337d98;
	text-align:center;
	transition:.3s;
	flex-direction:column;
	justify-content:center;
}

header nav.pcView div.item ul li.contacts a{
	width:130px;
	color:#fff;
	background:#337d98;
}

header nav.pcView div.item ul a img{
	height:28px;
	margin:0 auto;
}

header nav.pcView div.item ul a span{
	margin-top:10px;
	line-height:1.3em;
}

header nav.pcView div.item ul a.contacts{
	color:#fff;
	background:#337d98;
}

header nav.pcView div.item ul a:hover{
	opacity:.7;
}


/******************* コンテンツ *******************/
main{
	padding-top:100px;
}

/******************* フッター *******************/
footer{
	width:100%;
	color:#fff;
	text-align:center;
}

footer a{
	color:#fff;
}

footer .innerbox{
	width:90%;
	margin:0 auto;
	max-width:1152px;
}

footer .sitemap{
	background:#4d9ab7;
}

footer .sitemap .innerbox{
	align-items:center;
	justify-content:space-between;
}

footer .sitemap a{
	margin:20px 0;
	transition:.3s;
}

footer .sitemap a::before{
	content:"▶ "
}

footer .sitemap a:hover{
	opacity:.7;
}

footer .copyright{
	padding:40px 0;
	background:#337d98;
}

footer .copyright ::selection{
	color:#337d98;
	background:#e0f3fa;
}

footer .copyright .innerbox{
	align-items:center;
	justify-content:space-between;
}

footer .copyright .company{
	text-align:left;
	flex-direction:column;
}

footer .copyright .company .clinicName{
	margin-bottom:10px;
	font-size:2em;
	flex-direction:row;
}

footer .copyright .company .clinicName span{
	margin-right:10px;
}

footer .copyright .company .button{
	margin-top:15px;
	padding:4px 40px;
	border:solid 1px #fff;
	border-radius:999px;
}

footer .copyright .tel{
	padding:20px 30px;
	border:solid 1px #fff;
	flex-direction:column;
}

footer .copyright .tel a{
	font-size:2em;
}

footer .copyright .tel a::before{
	padding-right:5px;
	content:"\f095";
	font-size:.75em;
	font-family:'Font Awesome 6 Free';
	font-weight:bold;
	position:relative;
	top:-2px;
}

footer .copyright .tel span:last-child{
	font-size:1.25em;
}


@media (max-width:1151px){
	header{
		height:74px;
	}

	header nav.pcView{
		display:none;
	}

	header nav.smView{
		height:100%;
		display:block;
	}

	header nav.smView div.logo{
		width:fit-content;
		width:-moz-fit-content;
		height:100%;
		padding:8px 0 8px 15px;
	}
	
	header nav.smView div.logo a{
		color:#337d98;
		font-size:2.25em;
		display:block;
		transition:.3s;
	}


	/******************* コンテンツ *******************/
	main{
		padding-top:74px;
	}
}


@media (max-width:999px){
	/******************* ヘッダー *******************/
	header{
		height:65px;
	}

	header nav.pcView{
		display:none;
	}

	header nav.smView{
		height:100%;
		display:block;
	}

	header nav.smView div.logo{
		padding:6px 0 6px 15px;
	}

	footer .sitemap .innerbox{
		flex-wrap:wrap;
	}

	footer .sitemap .innerbox a{
		width:calc(100% / 4);
	}


	/******************* コンテンツ *******************/
	main{
		padding-top:65px;
	}
}


@media (max-width:767px){
	footer .sitemap .innerbox a{
		width:calc(100% / 2);
	}

	footer .copyright .innerbox{
		flex-direction:column;
	}

	footer .copyright .company{
		text-align:center;
	}

	footer .copyright .company .clinicName{
		justify-content:center;
	}

	footer .copyright .company .button{
		margin:15px auto;
	}
}


@media (max-width:450px){
	section[id^=sec] .circle{
		padding-top:25px;
	}

	section[id^=sec] .circle .header{
		flex-direction:column;
		align-items:center;
	}
	
	section[id^=sec] .circle .header img{
		width:42px;
	}
	
	section[id^=sec] .circle .header h2{
		font-size:1.475em;
	}
}