@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: -webkit-gradient(linear, left top, right top, from(#e6f5ec), to(#f3faed));
    background: linear-gradient(to right, #e6f5ec 0%, #f3faed 100%);
}

/* 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 : #a7cc09;
}
#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: -webkit-gradient(linear, left top, right top, from(#e6f5ec), to(#f3faed));
    background: linear-gradient(to right, #e6f5ec 0%, #f3faed 100%);
}
#greeting .history h4 {
	margin-bottom : 0.8em;
	color : #a7cc09;
}
#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 : #a7cc09;
}
#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: -webkit-gradient(linear, left top, right top, from(#e6f5ec), to(#f3faed));
    background: linear-gradient(to right, #e6f5ec 0%, #f3faed 100%);
}
#doctors .history h4 {
	margin-bottom : 0.8em;
	color : #a7cc09;
}
#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;
}

/* counselor */
#pageBody > section#counselor {
	margin-top : -100px;
	padding : 0;
	padding-top : 100px;
}
#counselor > .leadText {
	margin-bottom : 48px;
	text-align : center;
	background : url("/staff/img/bg_counselor.jpg") 50% 50% no-repeat;
	background-size : cover;
}
#counselor > .leadText > .inner {
	max-width : 1024px;
	margin : 0 auto;
	padding : 60px 24px;
}
#counselor > .leadText .copy {
	font-size : 1.4em;
	margin-bottom : 1.2em;
}
#counselor > .inner > .column {
	display : grid;
	grid-template-columns : auto 30%;
	grid-gap : 24px;
	margin-bottom : 32px;
}
#counselor .ctsBody > p:not(:last-child) {
	margin-bottom : 1.2em;
}
#counselor .ctsBody > .copy {
	font-size : 1.4em;
}
#counselor h3 {
	font-size : 1.4em;
	text-align : left;
}
#counselor h3 span:first-child {
	display : block;
	font-size : 0.8em;
	margin-bottom : 0.4em;
	color : #a7cc09;
}
#counselor h3 .name {
	font-size : 1.4em;
	letter-spacing : 0.1em;
}
#counselor .ctsImg {
	padding-top : 5.6em;
}
#counselor .ctsImg img {
	width : 100%;
}
#counselor .history {
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 24px;
	padding : 40px;
	background-color : #f1eae4;
}
#counselor .history h4 {
	margin-bottom : 0.4em;
	color : #a7cc09;
}
#counselor .history ul > li:not(:last-child) {
	margin-bottom : 0.4em;
}

/* dentalHygenist */
#pageBody > section#dentalHygenist {
	margin-top : -100px;
	padding : 0;
	padding-top : 100px;
}
section#dentalHygenist h3 {
	margin-bottom : 0.4em;
}
#dentalHygenist > .leadText {
	margin-bottom : 48px;
	text-align : center;
	background : url("/staff/img/bg_dental_hygenist.jpg") 50% 50% no-repeat;
	background-size : cover;
}
#dentalHygenist > .leadText > .inner {
	max-width : 1024px;
	margin : 0 auto;
	padding : 60px 24px;
}
#dentalHygenist > .leadText .copy {
	font-size : 1.4em;
	margin-bottom : 1.2em;
}
#dentalHygenist > .inner > .column {
	display : flex;
	flex-direction : column;
}
#dentalHygenist .ctsImg {
	display : grid;
	grid-template-columns : 1fr 1fr;
	order : 1;
}
#dentalHygenist .ctsImg img {
	width : 100%;
}
#dentalHygenist .ctsBody {
	order : 2;
	margin : -32px 60px 0;
	padding : 40px;
	text-align : center;
	background-color : #f1eae4;
}
#dentalHygenist .ctsBody h3 {
	text-align : center;
}
#dentalHygenist .ctsBody > p {
	text-align : left;
}
#dentalHygenist .ctsBody > p:not(:last-child) {
	margin-bottom : 1.2em;
}
#dentalHygenist .ctsBody > .copy {
	font-size : 1.4em;
}
#dentalHygenist h3 {
	font-size : 1.4em;
	text-align : left;
}
#dentalHygenist h3 span:first-child {
	display : block;
	font-size : 0.6em;
	margin-bottom : 0.2em;
	color : #a7cc09;
}
#dentalHygenist h3 .name {
	font-size : 1.4em;
	margin-left : 0.4em;
	letter-spacing : 0.1em;
}

/* visitingMedicalStaff */
#pageBody > section#visitingMedicalStaff {
	margin-top : -100px;
	padding : 0;
	padding-top : 100px;
}
section#visitingMedicalStaff h3 {
	margin-bottom : 0.4em;
}
#visitingMedicalStaff > .leadText {
	margin-bottom : 48px;
	text-align : center;
	background : url("/staff/img/bg_visiting_medical_staff.jpg") 50% 50% no-repeat;
	background-size : cover;
}
#visitingMedicalStaff > .leadText > .inner {
	max-width : 1024px;
	margin : 0 auto;
	padding : 60px 24px;
}
#visitingMedicalStaff > .leadText .copy {
	font-size : 1.4em;
	margin-bottom : 1.2em;
}
#visitingMedicalStaff > .inner > .column {
	display : flex;
	flex-direction : column;
}
#visitingMedicalStaff .ctsImg {
	display : grid;
	grid-template-columns : 1fr 1fr;
	order : 1;
}
#visitingMedicalStaff .ctsImg img {
	width : 100%;
}
#visitingMedicalStaff .ctsBody {
	order : 2;
	margin : -32px 60px 0;
	padding : 40px;
	text-align : center;
	background-color : #f1eae4;
}
#visitingMedicalStaff .ctsBody h3 {
	text-align : center;
}
#visitingMedicalStaff .ctsBody p {
	text-align : left;
}
#visitingMedicalStaff .ctsBody > p:not(:last-child) {
	margin-bottom : 1.2em;
}
#visitingMedicalStaff .ctsBody > .copy {
	font-size : 1.4em;
}
#visitingMedicalStaff h3 {
	font-size : 1.4em;
	text-align : left;
}
#visitingMedicalStaff h3 span:first-child {
	display : block;
	font-size : 0.6em;
	margin-bottom : 0.2em;
	color : #a7cc09;
}
#visitingMedicalStaff h3 .name {
	font-size : 1.4em;
	margin-left : 0.4em;
	letter-spacing : 0.1em;
}

/* staffs */
#pageBody > section#staffs {
	margin-top : -100px;
	padding : 0;
	padding-top : 100px;
}
section#staffs h3 {
	margin-bottom : 0.4em;
}
#staffs > .leadText {
	margin-bottom : 48px;
	text-align : center;
	background : url("/staff/img/bg_staffs.jpg") 50% 50% no-repeat;
	background-size : cover;
}
#staffs > .leadText > .inner {
	max-width : 1024px;
	margin : 0 auto;
	padding : 60px 24px;
}
#staffs > .leadText .copy {
	font-size : 1.4em;
	margin-bottom : 1.2em;
}
#staffs > .inner > .column {
	display : flex;
	flex-direction : column;
}
#staffs .ctsImg {
	display : grid;
	grid-template-columns : 1fr 1fr;
	order : 1;
}
#staffs .ctsImg img {
	width : 100%;
}
#staffs .ctsBody {
	order : 2;
	margin : -32px 60px 0;
	padding : 40px;
	text-align : center;
	background-color : #f1eae4;
}
#staffs .ctsBody h3 {
	text-align : center;
}
#staffs .ctsBody > p {
	text-align : left;
}
#staffs .ctsBody > p:not(:last-child) {
	margin-bottom : 1.2em;
}
#staffs .ctsBody > .copy {
	font-size : 1.4em;
}
#staffs h3 {
	font-size : 1.4em;
	text-align : left;
}
#staffs h3 span:first-child {
	display : block;
	font-size : 0.6em;
	margin-bottom : 0.2em;
	color : #a7cc09;
}
#staffs h3 .name {
	font-size : 1.4em;
	margin-left : 0.4em;
	letter-spacing : 0.1em;
}

/* --- 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;
	}

	/* counselor */
	#counselor > .inner > .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;
	}

	/* counselor */
	#counselor > .inner > .column {
		display : flex;
		grid-gap : 0;
		flex-direction : column-reverse;
	}
	#counselor > .inner > .column .ctsImg {
		margin-bottom : 32px;
		padding-top : 0;
	}

	/* dentalHygenist */
	#dentalHygenist .ctsImg {
		margin-bottom : 24px;
	}
	#dentalHygenist .ctsBody {
		margin : 0;
		padding : 24px;
	}

	/* visitingMedicalStaff */
	#visitingMedicalStaff .ctsImg {
		margin-bottom : 24px;
	}
	#visitingMedicalStaff .ctsBody {
		margin : 0;
		padding : 24px;
	}

	/* staffs */
	#staffs .ctsImg {
		margin-bottom : 24px;
	}
	#staffs .ctsBody {
		margin : 0;
		padding : 24px;
	}
}