@charset "utf-8";

/* ---------------------------------------------------------------------------------------------

　   common

--------------------------------------------------------------------------------------------- */

/* [firefoxで表示時画像なしがわかるように] */
img:-moz-broken {
	-moz-force-broken-image-icon:1;
	width:24px;
	height:24px;
}



.docimg {
	width: 30%;
	float: right;margin-left: 10px;
	margin-bottom: 10px;
}
@media (max-width: 750px) {
	.docimg { float: none; width: 60%; margin: auto; padding: 0 20%;}
}

/* ----------------------------------------------

* フロート定義

------------------------------------------------ */
/* float解除 */
.froot { display: flow-root; }


/* ----------------------------------------------

* 角丸

------------------------------------------------ */
.brd5 { border-radius: 5px; }


/*------------------------------------------------------

	小タイトル

-------------------------------------------------------*/
.stit {
	position: relative;
	font-size: 120%;
	color: #189a9f;
	padding: .3rem 2rem;
	border-bottom: 6px solid #9de7ea;
	margin-bottom: 1rem;
}

.stit:before {
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 20%;
	height: 6px;
	content: '';
	background: #189a9f;
}

@media screen and (max-width : 750px) {
	.stit {
		padding-left: 0;
		padding-right: 0;
	}
}


/* ---------------------------------------------------------------------------------------------

　   flex

--------------------------------------------------------------------------------------------- */
/*	flex(横並び）
---------------------------------------------------------------------------*/
.flex_box {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
/*
	-webkit-justify-content: space-between;
    justify-content: space-between;
*/
	-webkit-justify-content: space-evenly;
	justify-content: space-evenly;

}
.flex_box:nth-child(3n) {
	margin-right: 0;
}
.flex_box > div {
	width: calc((98% / 2) - 2px);
	padding: 2px;
}
.ai-c { align-items: center; }
.flex_box .ai-st { align-items: stretch; }
.flex_box .ai-s { align-items: start; }
.flex_box .ai-e { align-items: end; }



@media (max-width: 750px) {

	.flex_box {
		flex-direction: column;
	}
	.flex_box > div {
		width: 100%;
	}
	.flex_box img {
		width: 100%;
		padding: 1em;
		height: auto;
	}
}

h1.pc {
	font-weight: 400;
	font-size: 12px;
	text-align: right;
	max-width: 1300px;
	margin: auto;
}

@media (max-width: 750px){
	h1.pc {
		text-align: left;
/*		background-color: #eee;
		line-height: 60px;
*/
	}
}


/* ---------------------------------------------------------------------------------------------

	クリニック案内

--------------------------------------------------------------------------------------------- */
.photos ul {
	/* flex化 */
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	list-style: none;
}
.photos li {
	width: calc(32% - .3em);
	padding: .3em;
}
.photos img {
	margin-bottom: 0.5em;
	display: block;
	margin: auto; border: 1px #ccc solid;
}
.photos p {
	font-size: 1.2rem;
 	text-align: center;
}


@media (max-width: 750px) {

	.photos li { width: calc(50% - 1em); }
}


/* イメージの一覧表示 */
.img_list {
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	list-style: none;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;			/* add */
	-ms-flex-pack: justify;				/* add */


	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;

}

.img_list li {
	width: calc(30% - .2rem);
	padding: .8em;
	text-align:center;
}
.img_list li img { display: block; margin: auto; border: 1px #ccc solid; }
.img_list li:after {
	content:attr(title);
	display:block;
	text-align:center;
	margin-top:2px;
}


#map_canvas {
	width: 100%;
/*	height: 600px;	*/
	padding: 5px;
/*	border: 1px #ccc solid;	*/
}

@media (max-width: 750px){
	#map_canvas { /*height:300px;*/ }

	.img_list li { width: 100%; }
	.img_list li img { width: 99%; }
}


/* ---------------------------------------------------------------------------------------------

	診療案内料金表

--------------------------------------------------------------------------------------------- */
/*ta3設定*/
.ta3 {
	width: 100%;
	margin-bottom: 50px;
	background: #fff;	/*背景色*/
}
.ta3, .ta3 td, .ta3 th {
	border: 1px solid #189a9f;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;	/*ボックス内の余白*/
	word-break: break-all;
	font-weight: normal;
}
.ta3 th { background: #f2fde7; }

/*テーブル１行目に入った見出し部分*/
.ta3 th.tamidashi {
	width: auto;
	text-align: left;	/*左よせ*/
	background: #d7fdfe;	/*背景色*/
}
/*ta2の左側ボックス*/
.ta3 th {
	width: 70%;	/*幅*/
	text-align: left;
}
.ta3 td { text-align: right; }



/* ---------------------------------------------------------------------------------------------

	診療時間

--------------------------------------------------------------------------------------------- */
/* 診療時間 */
.timetbl { width: 100%; color: #666; background: #fff; }
.timetbl th {
	background: #e6fbf6;
	text-align: center;
	border-top: solid #96dde0 2px;
	border-bottom: solid #96dde0 2px;
	font-weight: normal;
	padding:.5em 0;
 }

.timetbl td {
	text-align: center;
	border-bottom: solid #96dde0 2px;
}
.timetbl tr {
	border-bottom: solid #96dde0 2px;
}
/*
.timetbl tr th:last-of-type {
	background: #d4f9e7;
}
*/
.timetbl tr th:first-of-type {
	width: 28%;
	text-align: center;
}
.timetbl tr td {
	width: 10%;
	font-size: 90%;
}


/*
	TEL装飾
*/
.tel {
	color: #fff;
	background: #189a9f;
	margin: 0 30px;
	border-radius: 8px;
}
.tel a {
	color: #fff;
	text-decoration:none;
}
@media (max-width: 750px){
	.tel {
		width: 90%;
		color: #fff;
		margin: 20px 30px;
	}
}
.pcnt { font-size: 0; }
.pcnt img { width: 0px; height: 0px; }