@charset "utf-8";


/* クリニックについて(/clinic/)
---------------------------------------------------------------------------*/


/**************************************/
/* フォルダ共通設定 */
/**************************************/
.clinic #page_img { background-image: url("../../common/img/clinic/page_img.jpg"); }


/* index.php
---------------------------------------------------------------------------*/
.clinic .btn_area div .detail_btn:first-child { float: left; }
@media screen and (min-width:768px) { /* PC・タブレット */
	.clinic .btn_area {
		width: 600px;
		margin: 0 auto;
	}
}
@media screen and (max-width:767px) { /*SP */
	.clinic .btn_area div .detail_btn {
		width: 45%;
	}
}

/* ドクター紹介　doctor
---------------------------------------------------------------------------*/
/* ドクターエリア */
.doctor_area { margin-bottom: 20px; }
.doctor_area .pos {
	font-size: 16px;
	margin-bottom: 10px;
	color: #caa92c;
	border-bottom: 1px solid #D6BD22;
}
.doctor_area .name {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 20px;
}
.doctor_area .name span {
	display: inline-block;
	margin-left: 20px;
	font-size: 14px;
	color: #caa92c;
}
.doctor_area .img_area > img {
	display: block;
	margin: 0 auto;
}
@media screen and (min-width:1200px) { /* PC */
	.doctor_area > div {
		float: right;
		width: 600px;
	}
	.doctor_area .img_area {
		float: left;
		display: block;
		margin: 0 auto;
	}

	.bgGlay01 .doctor_area > div { float: left; }
	.bgGlay01 .doctor_area > img { float: right; }
}
@media screen and (max-width:1199px) { /* SP・タブレット */
	.doctor_area > div {
		margin-bottom: 30px;
	}
	.doctor_area .img_area > img { width: 100%; }
}

/* ライセンスエリア */
.license_area p {
	text-align:center;
	margin-bottom: 10px;
}


/* 院長挨拶　greeting
---------------------------------------------------------------------------*/
@media screen and (min-width:1200px) { /* PC */
	.greeting_area div {
		float: left;
		width: 750px;
	}
	.greeting_area img { float: right; }
}
@media screen and (min-width:1200px) { /* PC */
	.greeting_area img { margin-top: 70px; }
}
@media screen and (max-width:1199px) { /* SP・タブレット */
	.greeting_area img {
		display: block;
		margin: 20px auto 0;
		width: 70%;
		max-width: 400px;
	}
}

/* 診察の流れ　flow
---------------------------------------------------------------------------*/
.flow_list {
	counter-reset: flow_num;
	margin-bottom: 20px;
}
.flow_list li {
	position:relative;
	line-height: 30px;
	margin: 0 0 50px 150px;
	padding-left: 10px;
}
.flow_list li:before {
	counter-increment: flow_num;
	content: counter(flow_num);
	position: absolute;
	top: 10px;
	left: -145px;
	width: 40px;
	height: 40px;
	text-align: center;
	color: #fff;
	line-height:30px;
	z-index:1;
	font-size: 20px;
}
.flow_list li:after{
  content:"";
  position: absolute;
  top: 3px;
  left: -150px;
  width: 50px;
  height: 50px;
  background-color: #d6bd22;
  color: #fff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.flow_list li p.title {
	font-weight: bold;
	font-size: 20px;
	border-bottom: 1px solid #c7c7c7;
	margin-bottom: 10px;
}
@media screen and (min-width:1200px) { /* PC */
	.flow_list > li > div > div {
		float: left;
		width: 600px;
	}
	.flow_list > li > div > img {
		float: right;
		width: 300px;
	}
}
@media screen and (max-width:1199px) { /* SP・タブレット */
	.flow_list li { margin: 0 0 30px 60px; }
	.flow_list li:before {
		top: 5px;
		left: -55px;
		width: 30px;
		height: 30px;
	}
	.flow_list li:after{
		left: -60px;
		width: 40px;
		height: 40px;
	}
	.flow_list > li > div > div {
		margin-bottom: 20px;
	}
	.flow_list > li > div > img {
		display: block;
		width: 100%;
		margin: 0 auto;
		max-width: 300px;
	}
}