@charset "UTF-8";
/*----------------------------------------------------
	style_clinic.css
	クリニック案内のスタイル
----------------------------------------------------*/

/*----------------------------------------------------
	SP　(599px以下)
----------------------------------------------------*/
/* メインイメージ */
#mainimage_cont {
	background: url(../images/clinic/bg_mainimage.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

/* 紹介 */
#aboutclinic {
	width: calc(100% - 60px);
	margin: 0 auto 80px auto;
}
#aboutclinic .photo {
	width: 100%;
	margin: 0 0 40px 0;
}
#aboutclinic .txt {
	padding: 0 10px;
	font-size: 1.4rem;
	color: #707070;
}
#aboutclinic .txt p { margin: 0 0 40px 0; }

/* 特徴 */
#features {
	margin: 0 0 40px 0;
	padding: 40px 30px;
	background: rgba(250, 239, 208, 0.2);
}
#features .box .list { margin: 0 0 60px 0; }
#features .box div.list:last-child { margin: 0; }
#features .box .list dl dt {
	padding: 10px 0;
	font-size: 2.4rem;
	text-align: center;
}
#features .box .list dl dd {
	font-size: 1.4rem;
	color: #707070;
}

/* 院内紹介 */
#hospital {
	margin: 0 0 40px 0;
	padding: 40px 30px;
}
#hospital .box .list { margin: 0 0 60px 0; }
#hospital .box div.list:last-child { margin: 0; }
#hospital .box .list dl dt {
	padding: 10px 0;
	font-size: 2.4rem;
	text-align: center;
}
#hospital .box .list dl dd {
	font-size: 1.4rem;
	color: #707070;
}


/*----------------------------------------------------
	Tablet　(600px 〜 )
----------------------------------------------------*/
@media screen and (min-width: 600px) {
	
}


/*----------------------------------------------------
	※850pxからレイアウト変更
----------------------------------------------------*/
@media screen and (min-width: 850px) {
	/* 紹介 */
	#aboutclinic { display: table; }
	#aboutclinic .photo {
		width: 50%;
		margin: 0;
		display: table-cell;
		vertical-align: middle;
	}
	#aboutclinic .txt {
		width: 50%;
		padding: 0 0 0 60px;
		display: table-cell;
		vertical-align: middle;
	}
	
	/* 特徴 */
	#features .box .list { margin: 0 0 60px 0; }
	#features .box .list .photo {
		width: 45%;
		display: table-cell;
		vertical-align: middle;
	}
	#features .box .list dl {
		width: 55%;
		padding: 0 0 0 40px;
		display: table-cell;
		vertical-align: middle;
	}
	#features .box .list dl dt {
		padding: 0 0 10px 0;
		text-align: left;
	}
	
	/* 院内紹介 */
	#hospital { margin: 0 0 100px 0; }
	#hospital .box .list { margin: 0 0 60px 0; }
	#hospital .box .list .photo {
		width: 45%;
		display: table-cell;
		vertical-align: middle;
	}
	#hospital .box .list dl {
		width: 55%;
		padding: 0 0 0 40px;
		display: table-cell;
		vertical-align: middle;
	}
	#hospital .box .list dl dt {
		padding: 0 0 10px 0;
		text-align: left;
	}
}


/*----------------------------------------------------
	PC　(1200px 〜 )
----------------------------------------------------*/
@media screen and (min-width: 1200px) {
	/* 紹介 */
	#aboutclinic {
		width: 1200px;
		margin: 0 auto 140px auto;
	}
	
	/* 特徴 */
	#features {
		margin: 0 0 140px 0;
		padding: 80px 0;
	}
	#features .box {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	#features .box .list { width: calc((100% - 120px) / 3) ; }
	#features .box .list .photo {
		width: 100%;
		display: block;
		vertical-align: inherit;
	}
	#features .box .list dl {
		width: 100%;
		padding: 0;
		display: block;
		vertical-align: inherit;
	}
	#features .box .list dl dt {
		padding: 20px 0;
		text-align: center;
	}
	
	/* 院内紹介 */
	#hospital {
		width: 1200px;
		margin: 0 auto 140px auto;
	}
	#hospital .box {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
	}
	#hospital .box .list {
		width: calc((100% - 50px) / 2) ;
		margin: 0 0 80px 0;
	}
	#hospital .box .list .photo {
		width: 100%;
		display: block;
		vertical-align: inherit;
	}
	#hospital .box .list dl {
		width: 100%;
		padding: 0;
		display: block;
		vertical-align: inherit;
	}
	#hospital .box .list dl dt {
		padding: 20px 0;
		text-align: center;
	}
}