@charset "utf-8";

.anim {
	transition : 0.4s ease-out;
	transform : translateY(60px);
	opacity : 0;
}
.anim.fire {
	transform : translateY(0);
	opacity : 1;
}

#pageTitle {
	background : url(/staff/img/bg_content_header.jpg) 50% 50% no-repeat;
	background-size : cover;
}

nav#ctsNav {
	z-index : 2;
	position : relative;
	margin-bottom : 32px;
}
nav#ctsNav ul {
	display : grid;
	grid-template-columns : auto auto auto auto auto auto;
	grid-gap : 16px;
	max-width : 1024px;
	margin : 0 auto;
	padding : 0 32px;
}
nav#ctsNav ul li {
	display : flex;
}
nav#ctsNav ul li a {
	display : flex;
	line-height : 1.45;
	flex-basis : 100%;
	justify-content : center;
	align-items : center;
	padding : 0.8em 0.4em;
	color : #ffffff;
	border-radius : 3em;
	background: #f0faff;
}

/* greeting */
#greeting {
	margin-top : -100px;
	padding-top : 100px;
}
#greeting > .inner > .column {
	display : grid;
	grid-template-columns : auto 30%;
	grid-gap : 60px;
	margin-bottom : 48px;
}
#greeting .ctsBody > p:not(:last-child) {
	margin-bottom : 1.2em;
}
#greeting h3 {
	font-size : 1.4em;
	text-align : left;
}
#greeting h3 span:first-child {
	display : block;
	font-size : 0.8em;
	margin-bottom : 0.4em;
	color : #0183bc;
}
#greeting h3 .name {
	font-size : 1.4em;
	letter-spacing : 0.1em;
}
#greeting .ctsImg {
	padding-top : 5.6em;
}
#greeting .ctsBody > .copy {
	font-size : 1.4em;
}
#greeting .ctsImg img {
	width : 100%;
}
#greeting .history {
	width : 60%;
	margin : 0 auto;
	padding : 40px;
	background: #f0faff;
}
#greeting .history h4 {
	margin-bottom : 0.8em;
	color : #0183bc;
}
#greeting .history ul > li:not(:last-child) {
	margin-bottom : 0.4em;
}

/* doctors */
#doctors {
	margin-top : -100px;
	padding-top : 100px;
	padding-bottom: 20px;
}
#doctors > .inner > .column {
	display : grid;
	grid-template-columns : auto 30%;
	grid-gap : 60px;
	margin-bottom : 48px;
}
#doctors .ctsBody > p:not(:last-child) {
	margin-bottom : 1.2em;
}

#doctors h3 {
	font-size : 1.4em;
	text-align : left;
}
#doctors h3 span:first-child {
	display : block;
	font-size : 0.8em;
	margin-bottom : 0.4em;
	line-height: 1.2em;
	color : #0183bc;
}
#doctors h3 .name {
	font-size : 1.4em;
	letter-spacing : 0.1em;
}
#doctors .ctsImg img {
	width : 100%;
}
#doctors .history {
	width : 60%;
	margin : 0 auto;
	margin-bottom : 70px;
	padding : 40px;
	background: #f0faff;
}
#doctors .history h4 {
	margin-bottom : 0.8em;
	color : #0183bc;
}
#doctors .history ul > li:not(:last-child) {
	margin-bottom : 0.4em;
}
#doctors > .inner > #parttime.column {
	grid-template-columns : 50% auto;
	grid-gap : 60px;
	margin-bottom : 48px;
}

/* --- for 2K or more pc --- */
@media screen and (min-width: 1980px) {
}

/* --- for HD pc --- */
@media screen and (min-width: 1440px) and (max-width: 1979px) {
}

/* --- for normal pc --- */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
}
/* --- for tablet --- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#pageBody > section {
		margin-bottom : 0;
	}
	section > .inner {
		padding-top : 32px;
		padding-bottom : 32px;
	}

	/* greeting */
	#greeting > .inner > .column {
		grid-gap : 32px;
		margin-bottom : 32px;
	}

	/* doctors */
	#doctors > .inner > .column {
		grid-gap : 32px;
		margin-bottom : 32px;
	}
	#doctors > .inner > #parttime.column {
		grid-gap : 32px;
	}

}

/* --- for mobile --- */
@media screen and (max-width: 767px) {
	
	
	
	nav#ctsNav ul {
		display : grid;
		grid-template-columns : auto auto auto;
		grid-gap : 8px;
		font-size : 0.75em;
		margin : 0 auto;
		padding : 0 24px;
		letter-spacing : 1px;
	}

	/* greeting */
	#greeting > .inner > .column {
		display : flex;
		grid-gap : 0;
		flex-direction : column-reverse;
	}
	#greeting > .inner > .column .ctsImg {
		margin-bottom : 32px;
		padding-top : 0;
	}
	#greeting .history {
		display : block;
		width : auto;
		padding : 1.4em;
	}
	#greeting .history ul {
		font-size : 0.85em;
	}

	/* doctors */
	#doctors {
		padding-bottom: 0px; 
	}
	#doctors > .inner > .column {
		display : flex;
		grid-gap : 0;
		flex-direction : column-reverse;
	}
	#doctors > .inner > .column .ctsImg {
		margin-bottom : 32px;
	}
	#doctors .history {
		display : block;
		width : auto;
		padding : 1.4em;
		margin-bottom : 48px;
	}
	#doctors .history ul {
		font-size : 0.85em;
	}
	#doctors > .inner > #parttime.column {
		grid-gap : 0;
	}
	#doctors > .inner > #parttime.column .ctsBody {
		margin-bottom : 32px;
	}
}