@charset "utf-8";

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

#pageTitle {
	background : url(/implant/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;
	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-color : #73ccef;
}
nav#ctsNav ul li a:hover {
  	opacity: 0.7;
	-moz-opacity:0.7;
	filter: alpha(opacity=70);
}

/* visitDentistry inspection */
#pageBody > section#whats {
	position : relative;
}
#pageBody #whats h2.contentTitle {
	align-items : flex-start;
}

#whats {
	margin-top : -120px;
	padding-top : 120px;
}
#whats .leadTexts {
	margin-right : calc(calc(100vw * 0.35) - calc(calc(100vw - 1024px) / 2));
	margin-bottom : 48px;
	padding-right : 48px;
}
#whats .leadTexts h3 {
	font-size : 1.3em;
	text-align : left;
}
#whats .merit {
	display : flex;
	margin-bottom : 48px;
}
#whats .merit h3 {
	display : flex;
	font-size : 1.2em;
	flex-basis : 12em;
	flex-grow : 1;
	justify-content : center;
	align-items : center;
	margin : 0;
	padding : 24px;
	background-color : #0183bc;
	color: #FFF;
}
#whats .merit ul {
	flex-grow : 1;
	padding : 32px;
	background-color : #fafafa;
}
#whats .merit ul > li {
	position : relative;
	line-height : 1.25;
	margin-left : 1.4em;
}
#whats .merit ul > li::before {
	display : inline-block;
	position : absolute;
	top : 0.1em;
	left : -1.4em;
	width : 10px;
	height : 5px;
	content : "";
	transform : translateY(-50%);
	transform : rotate(-45deg);
	border-bottom : 3px solid #0183bc;
	border-left : 3px solid #0183bc;
}
#whats .merit ul > li:not(:last-child) {
	margin-bottom : 0.8em;
}
#whats .column {
	display : grid;
	grid-template-columns : 360px 1fr;
	grid-gap : 48px;
}
#whats .column > .ctsImg img {
	width : 100%;
}
#whats > .ctsImg {
	position : absolute;
	top : 0;
	right : 0;
	overflow : hidden;
	width : 35%;
	max-height : 320px;
}
#whats > .ctsImg {
	padding-top : 7.4em;
}
#whats > .ctsImg img {
	width : 100%;
}

/* feature */
#pageBody > section#feature {
	position : relative;
	background-color : #fafafa;
	background-image : url(/implant/img/bg_feature_left.png),
	url(/implant/img/bg_feature_right.png);
	background-repeat : no-repeat;
	background-position : 0 50%, 100% 50%;
	background-size : contain;
}
#feature > .inner {
	max-width : 1024px;
	margin : 0 auto;
	padding : 100px 32px;
}
#feature h3 {
	display : flex;
	font-size : 2.4em;
	justify-content : center;
	align-items : center;
	color : #0183bc;
}
#feature h3 > span {
	display : flex;
	font-size : 0.5em;
	flex-direction : column;
	justify-content : center;
	align-items : center;
	min-width : 5.2em;
	min-height : 5.2em;
	margin : 0 1em;
	padding : 1em;
	letter-spacing : 0.0625em;
	color : #ffffff;
	border-radius : 50%;
	background-color : #0183bc;
}
#feature h3 > span mark {
	display : block;
	font-size : 1.6em;
	margin-top : 0.25em;
	color : inherit;
	background : none transparent;
}

#feature .column {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr;
	grid-gap : 24px;
}
#feature .column h4 {
	display : flex;
	font-family : "リュウミン B-KL";
	font-size : 1em;
	line-height : 1.45;
	margin-bottom : 1em;
	color : #0183bc;
}
#feature .column h4::before {
	display : flex;
	justify-content : center;
	align-items : center;
	width : 2.5em;
	height : 2.5em;
	margin-right : 0.5em;
	letter-spacing : 0;
	color : #ffffff;
	border-radius : 50%;
	background-color : #000000;
}
#feature .column > li:nth-child(1) h4::before {
	content : "1";
}
#feature .column > li:nth-child(2) h4::before {
	content : "2";
}
#feature .column > li:nth-child(3) h4::before {
	content : "3";
}
#feature .column .content {
	font-size : 0.9em;
	line-height : 1.45;
}
#feature .attention {
	position : absolute;
	bottom : -2em;
	left : 50%;
	line-height : 1.45;
	width : 92%;
	max-width : 990px;
	padding : 1em 1em 1em 4em;
	transform : translateX(-50%);
	text-align : center;
	border : 1px solid #0183bc;
	background-color : #ffffff;
}

#feature .attention::before {
	display : flex;
	position : absolute;
	top : 50%;
	left : 1.6em;
	font-family : "丸フォーク M";
	justify-content : center;
	align-items : center;
	min-width : 2em;
	min-height : 2em;
	content : "!";
	transform : translateY(-50%);
	letter-spacing : 0;
	color : #0183bc;
	border : 2px solid #0183bc;
	border-radius : 50%;
}

/* flow */
#pageBody > section#flow {
	margin-top : -120px;
	margin-bottom : 80px;
	padding-top : 120px;
}
#flow > .inner {
	padding : 0 32px;
}
#flowList > li {
	display : grid;
	grid-template-columns : 340px 1fr;
	grid-gap : 32px;
	margin-bottom : 32px;
}
#flowList > li:last-child {
	margin-bottom : 0;
}
#flowList > li .ctsImg {
	order : 1;
}
#flowList > li .ctsImg img {
	width : 100%;
}
#flowList > li .content {
	order : 2;
}
#flowList > li .content h3 {
	font-size : 1.2em;
	margin-bottom : 0.4em;
	text-align : left;
}
#flowList > li .content h3 span {
	color : #0183bc;
}

/* price */

#price {
	margin-top : -120px;
	padding-top : 120px;
}
#price > .inner {
	padding : 0 32px;
}
#price .table > li {
	display : grid;
	grid-template-columns : 1fr 1fr;
}
#price .table > li:not(:last-child) {
	border-bottom : 1px solid #000000;
}
#price .table > li > * {
	padding : 1.4em;
}
#price .table > li > h3 {
	font-size : 1em;
	margin : 0;
	text-align : left;
	color : #0183bc;
	border-right : 1px solid #000000;
}
#price .table > li > .summary {
	font-size : 0.85em;
	border-right : 1px solid #000000;
}
#price .table > li > .summary.column {
	display : grid;
	grid-template-columns : 80px auto;
	grid-gap : 16px;
}
#price .table > li > .summary.column .img img {
	width : 100%;
}
#price .table > li > .price {
	font-size : 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) {
	#whats .leadTexts {
		padding-right : 24px;
	}
	#whats .merit {
		margin-bottom : 32px;
	}

	#whats .column {
		grid-gap : 32px;
	}

	#feature > .inner {
		padding : 80px 32px 60px;
	}
	#feature .column {
		grid-gap : 12px;
	}

	#flow > .inner {
		padding : 0 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;
	}
	#whats .leadTexts {
		margin-right : 0;
		margin-bottom : 32px;
		padding-right : 0;
	}
	#whats > .ctsImg {
		position : static;
		width : auto;
		max-height : 100%;
		padding-top : 0;
	}
	#whats .merit {
		display : block;
		margin-bottom : 32px;
	}
	#whats .column {
		display : block;
		margin-bottom : 24px;
	}
	#whats .column .ctsImg {
		margin-bottom : 32px;
	}

	#pageBody > section#feature {
		background-image : none;
	}

	#feature > .inner {
		padding : 32px 24px;
	}
	#feature .column {
		display : block;
		margin-bottom : 32px;
	}
	#feature .column > li:not(:last-child) {
		margin-bottom : 24px;
	}
	#feature .attention {
		position : static;
		width : auto;
		padding : 1em;
		transform : none;
		text-align : center;
		background-color : #ffffff;
	}
	#feature .attention::before {
		display : none;
	}
	#flowList > li {
		display : block;
	}
	#flowList > li .content {
		margin-bottom : 32px;
	}

	#price .table > li {
		display : block;
		padding : 1em 0;
	}
	#price .table > li > h3 {
		margin-bottom : 0.5em;
		padding : 0;
		border-right : none;
	}
	#price .table > li > p {
		padding : 0;
		border-right : none;
	}
}