@charset "utf-8";

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

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

/* policy */
section#policy > .inner {
	max-width : 100%;
	padding : 60px 24px;
	background : url(/treatment/img/bg_policy.jpg) 50% 0 no-repeat;
	background-color : #f9f8f7;
	background-size : cover;
}
section#policy > .inner > .content {
	max-width : 1024px;
	margin : 0 auto;
}

#policy > .inner p:not(last-child) {
	margin-bottom : 1em;
}
/* departments */

#departmentList {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr;
	grid-gap : 48px;
	max-width : 800px;
	margin : 0 auto;
}
#departmentList > li a {
	display : flex;
	font-size : 1em;
	flex-direction : column-reverse;
	align-items : center;
	padding : 2.4em 0;
	text-decoration : none;
	letter-spacing : 0.0625em;
	border-radius : 50%;
	background: #f0faff;
}
#departmentList > li a .img {
	width : 88px;
	height : 60px;
	margin-bottom : 12px;
}
#departmentList > li a .img img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}

#departments > .content {
	position : relative;
	padding : 200px 32px 80px;
}
#departments > .content:nth-child(2n) {
	background: #f0faff;
}
#departments > .content > .wrapper {
	display : grid;
	grid-template-columns : 1fr 30%;
	grid-gap : 60px;
	max-width : 1024px;
	margin : 0 auto;
}
#departments > #pediatric.content > .wrapper {
	display : block;
}
#departments > .content h3 {
}
#departments > .content .texts {
	margin-bottom : 2.8em;
}
#departments > .content .texts > p:not(:last-child) {
	margin-bottom : 1.2em;
}
#departments > .content .texts .point {
	padding : 2em 3em;
	background: #f0faff;
}
#departments > .content .texts .point > li {
	line-height : 1.45;
}
#departments > .content .texts .point > li:not(:last-child) {
	margin-bottom : 0.6em;
}
#departments .ctsNav {
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 24px;
}
#departments .ctsNav p {
	margin-bottom : 1.2em;
}
#departments .ctsNav .button {
	margin-bottom : 0;
}
#departments .ctsNav .button a {
	display : flex;
	position : relative;
	justify-content : flex-start;
	align-items : center;
	min-height : 3em;
	padding : 0.8em 1em;
	color : #ffffff;
	background-color : #0183bc;
}
#departments .ctsNav .button a::before {
	margin-right : 1em;
}
#departments .ctsNav .button a::after {
	position : absolute;
	right : 1em;
}
#departments .ctsNav .aesthetic.button a::before {
	display : inline-block;
	content : url(/treatment/img/icon_aesthetic_button.png);
}
#departments .ctsNav .housevisit.button a::before {
	display : inline-block;
	content : url(/treatment/img/icon_visiting_button.png);
}
#departments .ctsNav .implant.button a::before {
	display : inline-block;
	content : url(/treatment/img/icon_implant_button.png);
}
#departments .ctsNav .button a::after {
	display : inline-block;
	content : ">";
}
#departments .ctsImg img {
	width : 100%;
}



#departments > .content::before {
	display : inline-block;
	position : absolute;
	top : 80px;
	left : 50%;
	width : 100px;
	height : 100px;
	content : "";
	transform : translateX(-50%);
	border-radius : 50%;
}

#departments > #dentistry.content::before {
	background : url(/treatment/img/icon_general.png) 50% 50% #f0faff no-repeat;
	background-size : 65%;
}
#departments > #pediatric.content::before {
	background : url(/treatment/img/icon_pediatric.png) 50% 50% #FFF no-repeat;
	background-size : 65%;
}
#departments > #maintenance.content::before {
	background : url(/treatment/img/icon_maintenance.png) 50% 50% #f0faff no-repeat;
	background-size : 65%;
}
#departments > #oralsurgery.content::before {
	background : url(/treatment/img/icon_surgery.png) 50% 50% #FFF no-repeat;
	background-size : 65%;
}
#departments > #dentures.content::before {
	background : url(/treatment/img/icon_dentures_2.png) 50% 50% #f0faff no-repeat;
	background-size : 65%;
}

/* --- 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) {
	#departmentList {
		grid-gap : 32px;
		margin : 0 48px;
	}
	#departments > .content {
		position : relative;
		padding : 200px 32px 48px;
	}#departments > .content > .wrapper {
		grid-template-columns : 1fr 25%;
		grid-gap : 32px;
	}
}

/* --- for mobile --- */
@media screen and (max-width:767px) {
	html {
		scroll-behavior: smooth;
		scroll-padding-top: 60px;
	}
	
	#departmentList {
		grid-template-columns : 1fr 1fr 1fr;
		grid-gap : 8px;
		max-width : 100%;
		margin : 0 24px;
	}
	#departmentList > li a {
		font-size : 0.8em;
		padding : 1.8em 1em;
	}
	#departmentList > li a .img {
		width : 60px;
		height : 41px;
		margin-bottom : 8px;
	}
	#departments > .content {
		position : relative;
		padding : 140px 24px 48px;
	}
	#departments > .content::before {
		top : 32px;
	}
	#departments > .content > .wrapper {
		display : block;
	}
	#departments .ctsNav {
		display : block;
		margin-bottom : 24px;
	}
	#departments .ctsNav > div:first-child {
		margin-bottom : 24px;
	}
	#departments > .content .texts .point {
		padding : 1.4em;
	}
}