@charset "UTF-8";
/*--------------------------------------------------
**************************************************
  Googleマップ PCスマホ共通
  高さは各メディアクエリー内で設定
**************************************************
--------------------------------------------------*/
.gmap{
	position:relative;
	height:0;
	overflow:hidden;
}
.gmap iframe{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

/* 料金表 */
.menu-price table{
	width:100%;
	margin-top:30px;
	border:#0aa9c8 2px solid;
}
.menu-price table th,.menu-price table td{
	padding:10px;
	border:#0aa9c8 1px solid;
	vertical-align: middle;
}
.menu-price table th{
	background-color: #e2faff;
}
.menu-price table td{
}

/*--------------------------------------------------
**************************************************
  PC用
**************************************************
--------------------------------------------------*/
@media screen and (min-width: 768px) {
	
	.heading{
		position:relative;
		width:1200px;
		height:400px;
		margin:15px auto 0;
		overflow:hidden;
	}
	
	.heading .heading_inner{
		display:-webkit-flex; display:flex;
		-webkit-flex-wrap:wrap; flex-wrap:wrap;
		-webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
		-webkit-box-align:center; -ms-flex-align:center; align-items:center;
		width:auto;
		height:400px;
	}
	
	.heading .heading_inner h1{
		-ms-writing-mode:tb-rl;
		writing-mode:vertical-rl;
		position:relative;
		z-index:20;
		display:block;
		line-height:1.5;
		padding:50px 0;
		text-align:left;
		font-family:"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
		font-size:28px;
		color:#fff;
	}
	
	.heading .overlay{
		position:absolute;
		top:0;
		left:0;
		z-index:1;
		width:100%;
		height:100%;
	}
	
	.layout_1,
	.layout_2,
	.layout_3,
	.layout_4,
	.image_description,
	.hours,
	.access_map,
	.profile,
	#recruit,
	.privacy,
	.sitemap{
		margin:70px auto;
	}
	
	div[class^="layout"] h2,
	.image_description h2,
	.hours h2,
	.access_map h2,
	#recruit h2{
		margin-bottom:30px;
	}
	
	div[class^="layout"] h2 span,
	.image_description h2 span,
	.hours h2 span,
	.access_map h2 span,
	#recruit h2 span{
		padding-top:20px;
		border-top:#00a7ce 3px solid;
		font-size:24px;
		font-weight:bold;
	}
	
	.layout_1 .content,
	.layout_2 .content{
		display:-webkit-flex; display:flex;
		-webkit-flex-direction:row; flex-direction:row;
		-webkit-justify-content:space-between; justify-content:space-between;
	}
	
	.layout_1 .image,
	.layout_2 .image{
		width:40%;
	}
	
	.layout_1 .image img,
	.layout_2 .image img,
	.layout_3 .image img{
		max-width:100%;
	}
	
	.layout_1 .text,
	.layout_2 .text{
		width:55%;
	}
	
	.layout_3 .image{
		text-align:center;
	}
	
	/* 画像と説明 */
	.image_description ul li{
		width:320px;
		margin:0 20px 30px;
	}
	
	.image_description ul li .image img{
		vertical-align:bottom;
		object-fit:cover;
		width:320px;
		height:210px;
	}
	
	.image_description ul li p{
		margin-top:5px;
		font-size:16px;
	}
	
	/* 診察時間 */
	.hours table{
		width:100%;
		margin-top:30px;
	}
	
	.hours table th,
	.hours table td{
		padding:5px 0;
		border:#333 1px solid;
	}
	
	.hours table th{
		background-color:#00b1ff;
		color:#fff;
	}
	
	.hours table td{
		background-color:#fff;
		text-align:center;
	}
	
		.hours table td:first-child{
			width:180px;
			padding-left:10px;
			padding-right:10px;
			text-align:left;
			font-weight:bold;
		}
	


	/* アクセスマップ */
	.gmap{
		padding-bottom:56.25%;
	}
	
	/* 採用エントリー */
	#recruit .staff_message_list li{
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		margin:30px auto;
	}
	
	#recruit .staff_message_list li .image{
		width:40%;
	}
	
	#recruit .staff_message_list li .image img{
		width:100%;
		height:auto;
	}
	
	#recruit .staff_message_list li .text{
		width:55%;
	}
	
	#recruit .staff_message_list li .text .name,
	#recruit .staff_message_list li .text .director{
		margin-bottom:5px;
		border-bottom:#ddd 1px solid;
	}
	
	#recruit .job_description table{
		width:700px;
		margin:0 auto;
	}
	
	#recruit .job_description table th,
	#recruit .job_description table td{
		padding:25px ;
		border:#ccc 1px solid;
		text-align:left;
	}
	
	#recruit .job_description table th{
		width:200px;
		background-color:#eee;
	}
	
	#recruit .job_description table td dt{
		font-weight:bold;
	}
	
	#recruit .job_description table td dt:not(:first-child){
		margin-top:30px;
	}
	
	/* プライバシーポリシー */
	.privacy h2{
		margin-top:30px;
		font-size:24px;
		font-weight:bold;
	}
	
	.privacy strong{
		font-size:18px;
	}
	
	/* サイトマップ */
	.sitemap{
		max-width:900px;
	}

	/* メディカルシャンプー */
	.shmp_price .c-red{
		color: #EA5D4D;
		font-weight: bold;
	}
	.shmp_price .set-3 p{
		margin-top: 15px;
	}
	.shmp_price .f-s{
		font-size: 12px;
	}
	.shmp_step .step_fl{
		display: flex;
		justify-content: space-between;
		margin-bottom: 60px;
	}
	.shmp_step .step_fl span{
		width: 20%;
		display: flex;
		padding: 30px;
		text-align: center;
		color: #fff;
		background-color: #00b1ff;
		position: relative;
		font-weight: bold;
		border-radius: 6px;
		align-items: center;
		justify-content: center;
	}
	.shmp_step .step_fl > div{
		width: 75%;
		padding: 10px 0;
	}
	.shmp_step .step_fl > div p.step_ttl{
		color: #00b1ff;
		font-weight: bold;
		margin-bottom: 15px;
	}
	.shmp_footer{
		background-color: #e2faff;
		padding: 30px;
		margin-top: 110px;
	}
	.shmp_footer .f-ttl{
		text-align: center;
		color: #00b1ff;
		font-weight: bold;
		margin-bottom: 30px;
		font-size: 18px;
	}
	.shmp_footer .bk_b{
		background-color: #00b1ff;
		color: #fff;
		padding: 10px 15px;
		margin-bottom: 15px;
		display: inline-block;
	}
	.shmp_footer .f-fl_l{
		margin-bottom: 30px;
	}
	.shmp_footer .f_tel{
		font-size: 18px;
	}
	.shmp_footer .f_tel span{
		color: #00b1ff;
		font-weight: bold;
	}
	.shmp_footer .f-fl_r p span{
		font-weight: bold;
	}

}/* End PC */



/*--------------------------------------------------
**************************************************
  SP用
**************************************************
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	
	.heading{
		position:relative;
		width:100%;
		height:200px;
		margin:0 auto;
		overflow:hidden;
	}
	
	.heading .heading_inner{
		display:-webkit-flex; display:flex;
		-webkit-flex-wrap:wrap; flex-wrap:wrap;
		-webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
		-webkit-box-align:center; -ms-flex-align:center; align-items:center;
		width:auto;
		height:200px;
	}
	
	.heading .heading_inner h1{
		-ms-writing-mode:tb-rl;
		writing-mode:vertical-rl;
		position:relative;
		z-index:20;
		display:block;
		line-height:1.5;
		padding:25px 0;
		text-align:left;
		font-family:"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
		font-size:18px;
		color:#fff;
	}
	
	.heading .overlay{
		position:absolute;
		top:0;
		left:0;
		z-index:1;
		width:100%;
		height:100%;
	}
	
	.layout_1,
	.layout_2,
	.layout_3,
	.layout_4,
	.image_description,
	.hours,
	.access_map,
	.profile,
	#recruit,
	.privacy,
	.sitemap{
		margin:50px auto;
	}
	
	div[class^="layout"] h2,
	.image_description h2,
	.hours h2,
	.access_map h2,
	#recruit h2{
		margin-bottom:30px;
	}
	
	div[class^="layout"] h2 span,
	.image_description h2 span,
	.hours h2 span,
	.access_map h2 span,
	#recruit h2 span{
		padding-top:20px;
		border-top:#00a7ce 3px solid;
		font-size:20px;
		font-weight:bold;
	}
/*
	.layout_1 .content,
	.layout_2 .content{
		display:-webkit-flex; display:flex;
		-webkit-flex-direction:row; flex-direction:row;
		-webkit-justify-content:space-between; justify-content:space-between;
	}
*/
	.layout_1 .image,
	.layout_2 .image{
		margin:20px auto;
	}
	
	.layout_1 .text,
	.layout_2 .text{
		width:100%;
		margin:20px auto;
	}
	
	/* 画像と説明 */
	.image_description ul li{
		width:48%;
		margin:0 2% 20px;
	}
	
		.image_description ul li:nth-child(odd){
			margin-left:0;
		}
		
		.image_description ul li:nth-child(even){
			margin-right:0;
		}
		
		.image_description ul li:nth-child(2n+1):last-child{
			margin-left:0;
			margin-right:0;
		}
	
	.image_description ul li .image img{
		vertical-align:bottom;
		object-fit:cover;
		max-height:100px;
	}
	
	.image_description ul li p{
		margin-top:5px;
		font-size:14px;
	}
	
	/* 診察時間 */
	.hours table{
		width:100%;
		margin-top:20px;
	}
	
	.hours table th,
	.hours table td{
		padding:5px 0;
		border:#333 1px solid;
		font-size:12px;
	}
	
	.hours table th{
		background-color:#00b1ff;
		color:#fff;
	}
	
	.hours table td{
		background-color:#fff;
		text-align:center;
	}
	
		.hours table td:first-child{
			width:120px;
			padding-left:10px;
			padding-right:10px;
			text-align:left;
			font-weight:bold;
		}
	.hours p{
		font-size:14px;
	}
	
	/* アクセスマップ */
	.gmap{
		padding-bottom:56.25%;
	}
	
	/* 採用エントリー */
	#recruit .staff_message_list li{
		margin:30px auto;
	}
	
	#recruit .staff_message_list li .image{
		width:50%;
		margin:0 auto;
	}
	
	#recruit .staff_message_list li .text{
		width:75%;
		margin:10px auto;
	}
	
	#recruit .staff_message_list li .text .name,
	#recruit .staff_message_list li .text .director{
		margin-bottom:5px;
		border-bottom:#ddd 1px solid;
	}
	
	#recruit .job_description table{
		width:100%;
		margin:0 auto;
	}
	
	#recruit .job_description table th,
	#recruit .job_description table td{
		padding:15px;
		border:#ccc 1px solid;
		text-align:left;
	}
	
	#recruit .job_description table th{
		width:35%;
		background-color:#eee;
	}
	
	#recruit .job_description table td dt{
		font-weight:bold;
	}
	
	#recruit .job_description table td dt:not(:first-child){
		margin-top:20px;
	}
	
	/* プライバシーポリシー */
	.privacy h2{
		margin-top:30px;
		font-size:20px;
		font-weight:bold;
	}
	
	.privacy strong{
		font-size:16px;
	}

	/* メディカルシャンプー */
	.shmp_price .c-red{
		color: #EA5D4D;
		font-weight: bold;
	}
	.free_field .layout_3 .f-18{
		font-size: 18px;
	}
	.shmp_price .sp-scroll{
		overflow-x: scroll;
		white-space: nowrap;
		width: 100%;
	}
	.shmp_price table{
		width: auto;
		font-size: 12px;
	}
	.shmp_step .step_fl{
		margin-bottom: 30px;
	}
	.shmp_step .step_fl span{
		display: inline-block;
		padding: 10px 30px;
		text-align: center;
		color: #fff;
		background-color: #00b1ff;
		font-weight: bold;
		margin-bottom: 8px;
	}
	.shmp_step .step_fl > div p.step_ttl{
		color: #00b1ff;
		font-weight: bold;
		margin-bottom: 15px;
	}
	.shmp_footer{
		background-color: #e2faff;
		padding: 30px 15px;
		margin-top: 60px;
	}
	.shmp_footer .f-ttl{
		text-align: center;
		color: #00b1ff;
		font-weight: bold;
		margin-bottom: 30px;
		font-size: 16px;
	}
	.shmp_footer .bk_b{
		background-color: #00b1ff;
		color: #fff;
		padding: 10px 10px;
		margin-bottom: 15px;
		display: inline-block;
		font-size: 15px;
	}
	.shmp_footer .f-fl_l{
		margin-bottom: 30px;
	}
	.shmp_footer .f_tel{
		font-size: 16px;
	}
	.shmp_footer .f_tel span{
		color: #00b1ff;
		font-weight: bold;
	}
	.shmp_footer .f-fl_r p span{
		font-weight: bold;
	}
	

}/* End SP */