@charset "utf-8";

/*//////////////////////////////////////////////////////////

	index
	about
	medical
	access
	initial medical
	contact

//////////////////////////////////////////////////////////*/


/*=========================================================

	index

==========================================================*/
/*
#mainimage{
	color: #e77478;
	background: url('../img/back_mainimage.webp') 0 0 no-repeat;
	background-size: cover;
}
#mainimage .layout{
	position: relative;
	overflow: hidden;
	height: 500px;
}
#mainimage p{
	font-weight: 900;
	font-size: 200%;
	padding-top: 50px;
}
*/

#index-information,
#index-service{
	margin-top: 80px;
}
#index-information h2,
#index-service h2{
	text-align: center;
	font-size: 180%;
	margin-bottom: 30px;
}
#index-information h2 span{
	font-size: 50%;
	margin-left: 10px;
}

#index-information .layout > p,
#index-service .layout > p{
	text-align: center;
}

#index-information ul{
	list-style: none;
	margin: 0;
	border-bottom: 1px solid #e2dec2;
}
#index-information ul li{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 30px;
	border-top: 1px solid #e2dec2;
	background: #fff;
}
#index-information ul li span{
	order: -1;
	text-align: center;
	font-size: 80%;
	color: #fff;
	width: 130px;
	padding: 7px 0;
	margin-right: 15px;
	background: #bd8d53;
}
#index-information ul li i{
	margin-left: auto;
}

#index-information .layout > p{
	margin-top: 50px;
}

ul.medical-list{
	display: flex;
	flex-wrap: wrap;
	gap: 17px;
	list-style: none;
	margin: 50px 0 0 0;
}
ul.medical-list li{
	box-sizing: border-box;
	border-radius: 10px;
	background: #fff;
	box-shadow: 5px 5px 0 #f1efd9;
}
ul.medical-list li a{
	box-sizing: border-box;
	display: block;
	height: 100%;
	padding: 30px;
}
ul.medical-list li a::after{
	display: none;
}
ul.medical-list li a:hover{
	opacity: 0.5;
}

ul.medical-list li a h3{
	text-align: center;
	font-size: 120%;
}
ul.medical-list li a p{
	margin-top: 10px;
}

ul.medical-list li:nth-child(1) a h3{color: #546e7a}
ul.medical-list li:nth-child(2) a h3{color: #ffa000}
ul.medical-list li:nth-child(3) a h3{color: #3f51b5}
ul.medical-list li:nth-child(4) a h3{color: #4caf50}
ul.medical-list li:nth-child(5) a h3{color: #9c27b0}
ul.medical-list li:nth-child(6) a h3{color: #03a9f4}
ul.medical-list li:nth-child(7) a h3{color: #e91e63}
ul.medical-list li:nth-child(8) a h3{color: #00897b}
ul.medical-list li:nth-child(9) a h3{color: #ff5722}


@media screen and (min-width: 737px){ /* PC */
	/*#mainimage img{
		position: absolute;
		bottom: -100px;
		right: 0;
	}*/
	
	ul.medical-list li{
		width: 322px;
	}
}

@media screen and (max-width: 736px){ /* SP */
	/*#mainimage .layout{
		text-align: center;
		height: 400px;
	}
	#mainimage p{
		text-align: center;
		font-size: 130%;
		margin-bottom: 15px;
	}
	#mainimage img{
		width: 70%;
	}*/
	
	#index-information ul li span{
		margin-bottom: 10px;
	}
	#index-information ul li a{
		width: 100%;
	}
	
	ul.medical-list li{
		width: 100%;
	}
}


/*=========================================================

	about

==========================================================*/

.about-greeting{
	text-align: center;
	margin-bottom: 50px;
}
.about-greeting img{
	border-radius: 10px;
}

table.about th,
table.about td{
	padding: 15px;
	border-top: 1px solid #e2dec2;
	border-bottom: 1px solid #e2dec2;
	background: #fff;
}
table.about th{
	background: #f1efd9;
}
table.about td em{
	font-size: 80%;
}

.equipment ul{
	list-style: none;
	margin: 50px 0 0 0;
}
.equipment ul li{
	padding: 30px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 5px 5px 0 #f1efd9;
}
.equipment ul li:not(:first-child){
	margin-top: 30px;
}
.equipment ul li h4{
	color: #e77478;
	margin-bottom: 10px;
}

dl.about-doctor dt{
	font-size: 120%;
	font-weight: 700;
}
dl.about-doctor dd{
	margin-top: 15px;
}

@media screen and (min-width: 737px){ /* PC */
	table.about th{
		width: 250px;
	}
	
	dl.about-doctor dd th{
		width: 150px;
	}
}

@media screen and (max-width: 736px){ /* SP */
	table.about{
		border-bottom: 1px solid #e2dec2;
	}
	table.about th,
	table.about td{
		display: block;
	}
	table.about td{
		border: 0;
	}
	
	dl.about-doctor dd tr,
	dl.about-doctor dd th,
	dl.about-doctor dd td{
		display: block;
	}
	dl.about-doctor dd tr ~ tr{
		margin-top: 10px;
	}
}


/*=========================================================

	medical

==========================================================*/

#naika .section > h3::after{border-bottom-color: #546e7a}
#allergy .section > h3::after{border-bottom-color: #ffa000}
#kokyuki .section > h3::after{border-bottom-color: #3f51b5}
#kinen .section > h3::after{border-bottom-color: #4caf50}
#online .section > h3::after{border-bottom-color: #9c27b0}
#sas .section > h3::after{border-bottom-color: #03a9f4}
#vaccine .section > h3::after{border-bottom-color: #e91e63}
#kenshin .section > h3::after{border-bottom-color: #00897b}
#jihi .section > h3::after{border-bottom-color: #ff5722}

h3.medical-title{
	font-size: 180%;
	color: #e77478;
	margin-bottom: 30px;
}

p.medical-comment{
	text-align: center;
}

.medical-detail > p{
	margin-bottom: 30px;
}

.allergy-list{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	list-style: none;
	margin: 30px 0 0 0;
}
.allergy-list li a{
	display: inline-block;
	text-align: center;
	line-height: 50px;
	color: #fff;
	padding: 0 30px;
	border-radius: 25px;
	background: #f5d100;
}
.allergy-list li a::after{
	display: none;
}
.allergy-list li a:hover{
	background: #f5b800;
}

.allergy-faq,
.allergy-flow,
.lge{
	padding: 30px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 5px 5px 0 #f1efd9;
}

.lge{
	margin-bottom: 30px;
}

.allergy-flow + p{
	margin-top: 30px;
}

.allergy-faq h4,
.allergy-flow h4,
.lge h4{
	font-size: 130%;
	color: #b68d50;
}
.allergy-faq dl dt{
	color: #0288d1;
	margin-top: 30px;
}
.allergy-faq dl dd i,
.allergy-faq dl dd strong{
	color: #d81b60;
}
.allergy-faq dl dd p{
	margin-top: 15px;
}

.allergy .allergy-attention{
	font-size: 80%;
}

table.vaccine-price caption{
	font-weight: 700;
	margin-bottom: 10px;
}
table.vaccine-price th,
table.vaccine-price td{
	padding: 10px;
	border: 1px solid #e2dec2;
	background: #fff;
}
table.vaccine-price td{
	text-align: right;
}
table.vaccine-price thead th,
table.vaccine-price thead td{
	text-align: center;
	background: #f5d100;
}


@media screen and (min-width: 737px){ /* PC */
	img.sas-flow{
		float: right;
		width: 320px;
		margin-left: 30px;
	}
	
	table.vaccine-price{
		width: 600px;
	}
}

@media screen and (max-width: 736px){ /* SP */
	.allergy-list{
		font-size: 80%;
	}
	.allergy-list li a{
		line-height: 40px;
		padding: 0 20px;
		border-radius: 20px;
	}
	
	img.sas-flow{
		display: block;
		width: calc(100% - 40px);
		margin: 0 20px 30px 20px;
	}
	
	table.vaccine-price th,
	table.vaccine-price td{
		font-size: 90%;
		padding: 8px;
	}
}


/*=========================================================

	access

==========================================================*/

.g-map iframe{
	border: 0;
}

.access-guide-list{
	margin-top: 30px;
}
.access-guide-list h3{
	font-size: 130%;
	margin-bottom: 15px;
}

@media screen and (min-width: 737px){ /* PC */
	
}

@media screen and (max-width: 736px){ /* SP */
	.g-map iframe{
		width: 100%;
		height: 400px;
	}
}


/*=========================================================

	initial medical

==========================================================*/


#attention-wrap{
	box-sizing: border-box;
	padding: 30px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 5px 5px 0 #f1efd9;
}
#attention-wrap h3{
	font-size: 120%;
}
#attention-wrap .first-attention p{
	margin-top: 15px;
}
#attention-wrap .first-attention p a{
	display: inline-block;
	padding: 10px 30px;
	border-radius: 20px;
	background: #f5d100;
}
#attention-wrap .first-attention p a:hover{
	background: #f5b800;
}
#attention-wrap .first-attention p a::after{
	display: none;
}

.initial dl{
	margin-top: 15px;
}

.initial strong{
	color: #e53935;
}

.initial em{
	color: #1e88e5;
}

.initial > p ~ p{
	margin-top: 15px;
}

@media screen and (min-width: 737px){ /* PC */
	
}

@media screen and (max-width: 736px){ /* SP */
	#attention-wrap .first-attention p a{
		display: block;
	}
	#attention-wrap .first-attention p a ~ a{
		margin-top: 10px;
	}
}


/*=========================================================

	contact

==========================================================*/

.contact-message{
	text-align: center;
}

.contact-form{
	margin-top: 30px;
}

.contact-form table th,
.contact-form table td{
	padding: 15px 0;
}

.contact-form table td input,
.contact-form table td textarea{
	width: 300px;
	padding: 10px;
	border: 1px solid #e2dec2;
	border-radius: 10px;
	background: #fff;
}
.contact-form table td textarea{
	resize: none;
	width: 100%;
}

span.require{
	line-height: 1;
	font-size: 70%;
	color: #fff;
	padding: 3px 5px;
	margin-left: 10px;
	border-radius: 5px;
	background: #e53935;
}

.send-button{
	text-align: center;
	padding-top: 20px;
}
.send-button .button.send-back{
	margin-right: 15px;
	border: 1px solid #9e9e9e;
	box-shadow: 0 4px 0 #9e9e9e;
}

.contact-check{
	text-align: center;
	font-weight: 900;
}

.contact-complete h3{
	font-size: 120%;
	margin-bottom: 30px;
}

.comp-attention{
	margin: 15px 0;
}

@media screen and (min-width: 737px){ /* PC */
	.contact-form{
		padding: 0 50px;
	}
	
	.contact-form table th{
		width: 200px;
	}
}

@media screen and (max-width: 736px){ /* SP */
	.contact-form table td input{
		width: 100%;
	}
	
	.contact-form table th,
	.contact-form table td{
		display: block;
	}
	.contact-form table th{
		padding-bottom: 0;
	}
}