@charset "UTF-8";
/*----------------------------------------------------
	style_doctor.css
	院長紹介のスタイル
----------------------------------------------------*/

/*----------------------------------------------------
	SP　(599px以下)
----------------------------------------------------*/
/* コンテンツ背景 */
.pageback { background-position: 10px 12%, 96% 50%, 10px 100%; }

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

/* 院長紹介 */
#aboutdoctor {
	width: calc(100% - 60px);
	margin: 0 auto 80px auto;
}
#aboutdoctor dl dt {
	padding: 20px 0;
	font-size: 2.4rem;
}
#aboutdoctor dl dd p {
	margin: 0 0 20px 0;
	font-size: 1.4rem;
	color: #707070;
	line-height: 2;
}
#aboutdoctor dl dd p.history { color: #109853; }

/* 理由 */
#reason {
	width: calc(100% - 60px);
	margin: 0 auto 100px auto;
}
#reason .photo {
	margin: 0 0 20px 0;
}
#reason .txt p {
	margin: 0 0 20px 0;
	font-size: 1.4rem;
	color: #707070;
	line-height: 2;
}



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


/*----------------------------------------------------
	※850pxからレイアウト変更
----------------------------------------------------*/
@media screen and (min-width: 850px) {
	/* 院長紹介 */
	#aboutdoctor .box {
		display: flex;
		flex-direction: row;
	}
	#aboutdoctor .box .photo {
		width: 50%;
		flex-shrink: 0;
	}
	#aboutdoctor .box dl {
		width: 50%;
		padding: 0 0 0 30px;
		flex-shrink: 0;
	}
	
	/* 理由 */
	#reason .box {
		display: flex;
		flex-direction: row-reverse;
	}
	#reason .box .photo {
		width: 50%;
		flex-shrink: 0;
	}
	#reason .box .txt {
		width: 50%;
		padding: 0 30px 0 0;
		flex-shrink: 0;
	}
}


/*----------------------------------------------------
	PC　(1200px 〜 )
----------------------------------------------------*/
@media screen and (min-width: 1200px) {
	/* コンテンツ背景 */
	.pageback { background-position: 10px 30%, 96% 60%, 10px 98%; }
	
	/* 院長紹介 */
	#aboutdoctor {
		width: 1200px;
		margin: 0 auto 140px auto;
	}
	#aboutdoctor .box .photo { width: 640px; }
	#aboutdoctor .box dl {
		width: 560px;
		padding: 0 0 0 80px;
	}
	
	/* 理由 */
	#reason {
		width: 1200px;
		margin: 0 auto 140px auto;
	}
	#reason .box .photo { width: 575px; }
	#reason .box .txt {
		width: 625px;
		padding: 0 80px 0 0;
	}
}