@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;@400;500;700&display=swap');
@import url("reset.css");
@import url("gnav.css");
@import url("page.css");

html{
	scroll-behavior: smooth;
	margin: 0; padding: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: black;
	line-height: 150%;
}
body{ 
	margin: 0 0 0 0; padding: 0; width: 100%;
	background-color: #FAFAF7;
	color: #505050;
	.body-inner{ overflow-y: scroll;scrollbar-width: none;}
	.body-inner::-webkit-scrollbar{display:none !important;}
	
	p,img,div,ul{ margin: 0; padding: 0;}
	
	.br-pc{display: inline;}
	.br-sp{display: none;}
	.hide-pc{display: none;}
	.hide-sp{display: inline;}
	@media screen and (max-width: 768px){
		.br-pc{display: none;}
		.br-sp{display: inline;}
		.hide-pc{display: inline;}
		.hide-sp{display: none;}
	}
	
	h1{
		font-size: 50px;
		text-align: center;
		span{font-size: 30px;}
	}
	h2{
		padding: 50px 0; margin: 0;
		font-size: 31px;
		color: #317C96;
		text-align: center;
		.Ttl{line-height: 120%; padding: 0 0 5px 0}
		.TtlSub{font-size: 21px;line-height: 120%;}
	}
	h2.SimpleH2{
		background-color: #E0EBEF;
		padding: 40px 0;
	}
	h3{
		padding: 10px; margin: 0 0 30px 0;
		font-size: 28px;
		text-align: center;
		color: white;
		background-color: #00BA9B;
		border-radius: 25px;
	}
	h4{
		padding: 18px; margin: 0 0 30px 0;
		font-size: 28px;
		text-align: center;
		color: #317C96;
		border: 2px solid #317C96;
		border-radius: 50px;
		.Ttl{line-height: 120%; padding: 0 0 5px 0}
		.TtlSub{font-size: 21px;line-height: 120%;}
	}
	@media screen and (max-width: 768px){
		h1{
			font-size: 50px;
		}
		h2{
			font-size: 31px;
			.Ttl{line-height: 120%; padding: 0 0 10px 0}
			.TtlSub{font-size: 21px;line-height: 120%;}
		}
		h3{
			padding: 10px; margin: 0 0 5px 0;
			font-size: 26px;
			.SubTtl{font-size: 18px;line-height: 100%;}
		}
	}
}

/*コンテンツブロック*/
/*───────────────*/
.Contents{
	max-width: 960px;
	margin: 0 auto;
}
@media screen and (max-width: 1020px){
	.Contents{margin: 0 30px;}
}
@media screen and (max-width: 768px){
	.Contents{margin: 0 10px;}
}
/*白背景コンテンツブロック*/
/*───────────────*/
.ContentsWhiteBg{
	background-color: white;
	padding: 75px 0; margin: 0;
}
@media screen and (max-width: 768px){
	.ContentsWhiteBg{
		padding: 50px 0 15px 0; margin: 0 0 0 0;
	}
}


/*ヘッダー*/
/*───────────────*/

#header{
	width: 100%; height: 120px;
	margin: 0; padding: 0;
	background-color: #FAFAF7;
	display: flex;
	justify-content: space-between;
	
	.HdLeft{
		.ClinicLogo{
			display: flex;
			margin: 25px 0 0 20px; 
			
			img{
				height: 70px;
			}
			.Name{
				padding: 12px 0 0 15px;
				color: #317C96;
				.NameJp{
					padding: 0 0 6px 0;
					font-size: 26px;
				}
				.NameEng{
					font-size: 20px;
				}
			}
		}
		a{
			text-decoration: none;
			color: #317C96;
			display: block;
		}
		a:hover{
			opacity: 0.5;
		}
	}
	@media screen and (max-width: 768px){
		.HdLeft{
			.ClinicLogo{
				display: flex;
				margin: 12px 0 0 10px;
				
				img{
					height: 40px;
				}
				.Name{
					padding: 4px 0 0 15px;
					color: #317C96;
					.NameJp{
						padding: 0 0 3px 0;
						font-size: 17px;
					}
					.NameEng{
						font-size: 12px;
					}
				}
			}
		}
	}
	.HdRight{
		height: 60px;
		margin: 0; padding: 0 20px 0 0;
	}
	@media screen and (max-width: 768px){
		.HdRight{
			height: 60px;
			margin: 0; padding: 0;
		}
	}
}
body.HdSticky{
	margin: 120px 0 0 0; padding: 0; width: 100%
}
.HdSticky #header{
	width: 100%; height: 120px;
	position: fixed;top:0;left:0;z-index:20;
}
@media screen and (max-width: 768px){
	body,body.HdSticky{
		margin: 64px 0 0 0; padding: 0; width: 100%;
	}
	#header,.HdSticky #header{
		width: 100%; height: 64px;
		position: fixed !important;top:0;left:0;z-index:20;
	}
	body.HdSticky #header .HdLeft{width: 20%;}
	body.HdSticky #header .HdRight{width: 80%;}
}

/*SPメニュー*/
/*───────────────*/

nav{
	.HdSpace{
		background: #00BA9B;
		height: 64px;
	}
	.Symptoms{
		text-align: center;
		.SymTtl{
			p{
				padding: 20px 0 7px 0; 
				background: #00BA9B;
				font-size: 18px;
				line-height: 130%;
				color: white;
				
				span{
					font-size: 15px;
				}
			}
			ul.SymSub li{
				margin: 15px 20px 0 20px; padding: 0 0 10px 0;
				font-size: 21px;
				line-height: 130%;
				color: #505050;
				border-bottom: 1px solid #00BA9B;
				
				span{
					font-size: 18px;
				}
			}
			ul.SymSub li:last-child{
				border-bottom: 0px solid #00BA9B;
			}
			ul.SymSub li.ShowLine{
				border-bottom: 1px solid #00BA9B;
			}
		}
	}
	.SymptomsOther{
		margin: 40px 0 0 0;
		text-align: center;
		.SymTtl{
			p{
				margin: 15px 20px 0 20px; padding: 0 0 10px 0;
				font-size: 21px;
				line-height: 130%;
				color: #505050;
				border-bottom: 1px solid #00BA9B;
				
				span{
					font-size: 18px;
				}
			}
		}
	}
	.Other{
		margin: 40px 0 100px 0;
		p{
			margin: 10px 20px 10px 20px; padding: 0;
			font-size: 21px;
			line-height: 130%;
			color: #505050;
			text-align: center;
		}
	}
	a{
		display: block;
		color: #505050;
	}
	a:hover{
		color: #505050;
		text-decoration: none;
	}
}



/*PageTop*/
/*───────────────*/
#GoTop{
	width: 40px;
	position: fixed;
	bottom:20px;
	right:20px;
	z-index: 10;
	
	img{width: 40px;}
	img:hover{opacity:0.5;}
}


/*共通ボタン*/
/*───────────────*/

.ComBtReserv{
	padding: 0; margin: 25px auto;
	width: 380px;
	border-radius: 50px;
	text-align: center;
	background-color: #F0476B;
	color: white;
	
	a{
		color: white;
		text-decoration: none;
		
		.TextJpn{
			font-size: 26px;
			padding: 10px 0 5px 0;
		}
		.TextEng{
			font-size: 18px;
			padding: 0 0 10px 0;
		}
	}
	a:hover{
		color: white;
	}
}
.ComBtReserv:hover{
	opacity: 0.35;
	
}
@media screen and (max-width: 960px){
	.ComBtReserv{
		width: 300px;
	}
}
@media screen and (max-width: 768px){
	.ComBtReserv{
		width: 90%;
		padding: 0; margin: 20px auto;
	}
	
	body.HdSticky #header .HdRight .ComBtReservWrap{
		margin: 0 70px 0 0;
	}
	body.HdSticky #header .HdRight .ComBtReserv{
		padding: 0; margin: 10px auto;
		width: 100%;
		a{	
			.TextJpn{
				font-size: 18px;
				padding: 5px 0 2px 0;
			}
			.TextEng{
				font-size: 13px;
				padding: 0 0 5px 0;
			}
		}
	}
	
}



.ComOtheBtn{
	padding: 0; margin: 25px auto;
	border: 2px solid #317C96;
	max-width: 560px;
	border-radius: 50px;
	text-align: center;
	background-color: white;
	color: #317C96;
	
	a{
		color: #317C96;
		text-decoration: none;
		
		.TextJpn{
			font-size: 28px;
			padding: 20px 0 10px 0;
		}
		.TextEng{
			font-size: 21px;
			padding: 0 0 20px 0;
		}
	}
	a:hover{
		color: white;
	}
}
@media screen and (max-width: 500px){
	.ComOtheBtn{
	}
}
.ComOtheBtn:hover{
	border: 2px solid #D3F3EE;
	background-color: #D3F3EE;
	
}

.ComFaqBtn{
	padding: 0; margin: 45px auto 25px auto;
	max-width: 360px;
	border-radius: 10px;
	background-color: #D3F3EE;
	color: #317C96;
	
	a{
		color: #317C96;
		text-decoration: none;
		
		.ComFaqBtnInner{
			display: flex;
			justify-content: center;
			
			.FaqIcon{
				width: 33px;
				svg{
					margin: 8px 0 0 0;
					height: 30px;
					width: 33px;
					stroke: #317c96;
				}
			}
			.TextJpn{
				font-size: 16px;
				padding: 15px;
				text-align: center;
			}	
		}
	}
	a:hover{
		color: white;
		
		.FaqIcon svg{
			stroke: white;
		}
	}
}
.ComFaqBtn:hover{
	background-color: #317C96;
	
}
@media screen and (max-width: 768px){
	.ComFaqBtnWrap{
		padding: 0 30px;
	}
}

.ComContactBtn{
	padding: 0; margin: 45px auto 25px auto;
	max-width: 360px;
	border-radius: 10px;
	background-color: #00BA9B;
	color: white;
	
	a{
		color: white;
		text-decoration: none;
		
		.ComContactBtnInner{
			display: flex;
			justify-content: center;
			
			.TextJpn{
				font-size: 16px;
				padding: 15px;
				text-align: center;
			}	
		}
	}
	a:hover{
		color: white;
		
		.FaqIcon svg{
			stroke: white;
		}
	}
}
.ComContactBtn:hover{
	opacity: 0.5;
	
}
@media screen and (max-width: 768px){
	.ComContactBtnWrap{
		padding: 0 30px;
	}
}

/*フッター*/
/*───────────────*/
#footer{
	border-top: 1px solid #317C96;
	background-color: white;
	.FtMenu{
		padding: 30px 60px 70px 60px;
		width: calc(100% - 120px);
		
		ul{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justyify-content:center;
		}
		li{
			padding: 0 10px 0px 10px;
			margin: 0 0 10px 0;
			border-right: 1px solid black;
		}
		li:last-of-type{
			border-right: 0px solid black;
		}
		a{
			color: black;
			text-decoration: none;
		}
		a:hover{
			color: black;
			text-decoration: underline;
		}
	}
	@media screen and (max-width: 768px){
		.FtMenu{
			padding: 20px 30px 20px 30px;
			width: calc(100% - 60px);
			
			ul{
				width: 100%;
				display: block;
			}
			li{
				padding: 20px 0;
				border-right: 0px solid black;
				border-bottom: 1px solid #C8C8C8;
				text-align: center;
				
				a{
					display: block;
				}
			}
			li:last-of-type{
				border-bottom: 0px solid #C8C8C8;
			}
		}
	}
	.FtCopy{
		background-color: #317C96;
		padding: 70px 0 30px 20px;
		
		.Copyright{
			color: white;
			font-size: 12px;
		}
	}
	@media screen and (max-width: 768px){
		.FtCopy{
			background-color: #317C96;
			padding: 60px 20px 20px 20px;
			width: calc(100% - 40px);
			text-align: center;
			
			.Copyright{
				color: white;
				font-size: 12px;
				line-height: 150%;
			}
		}
	}
}