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

#pageTitle {
	background : url(/aesthetic/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;
	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);
}



/* aesthetic */
#pageBody > section#aesthetic,
#pageBody > section#whitening {
	position : relative;
	margin-top : -120px;
	padding-top : 120px;
}
#pageBody #aesthetic h2.contentTitle,
#pageBody #whitening h2.contentTitle {
	align-items : flex-start;
}
#pageBody #aesthetic > .inner,
#pageBody #whitening > .inner {
	margin-bottom : 32px;
}
#aesthetic .leadTexts {
	margin-right : 50%;
	margin-bottom : 48px;
	padding-right : 48px;
}
#whitening .leadTexts {
	min-height : 30.5vw;
	margin-right : 50%;
	margin-bottom : 48px;
	padding-right : 48px;
}
#aesthetic .leadTexts > h3,
#whitening .leadTexts > h3 {
	font-size : 1.4em;
	text-align : left;
}
#aesthetic .leadTexts > p,
#whitening .leadTexts > p {
	margin-bottom : 1em;
}
#aesthetic .merit,
#whitening .merit {
	display : flex;
	margin-bottom : 42px;
}
#aesthetic .merit h3,
#whitening .merit h3 {
	display : flex;
	font-size : 1.2em;
	flex-basis : 16em;
	flex-grow : 1;
	justify-content : center;
	align-items : center;
	margin : 0;
	padding : 24px;
	background-color : #0183bc;
	color: #FFF;
}
#aesthetic .merit ul,
#whitening .merit ul {
	flex-grow : 1;
	padding : 32px;
	background-color : #fafafa;
}
#aesthetic .merit ul > li,
#whitening .merit ul > li {
	position : relative;
	line-height : 1.25;
	margin-left : 1.4em;
}
#aesthetic .merit ul > li:before,
#whitening .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 #73ccef;
	border-left : 3px solid #73ccef;
}
#aesthetic .merit ul > li:not(:last-child),
#whitening .merit ul > li:not(:last-child) {
	margin-bottom : 0.8em;
}
#aesthetic > .inner > .ctsImg {
	margin-bottom : 32px;
}
#aesthetic > .inner > .ctsImg img {
	width : 100%;
}
#aesthetic > .ctsImg {
	position : absolute;
	top : 234px;
	right : 0;
	overflow : hidden;
	width : 50%;
}
#aesthetic > .ctsImg img {
	width : 100%;
	height : 100%;
	object-fit : contain;

	object-position : top;
}
#whitening > .ctsImg {
	position : absolute;
	top : 120px;
	right : 0;
	overflow : hidden;
	width : 50%;
	height : 30.5vw;
}
#whitening > .ctsImg img {
	width : 100%;
	height : 100%;
	object-fit : contain;

	object-position : top;
}

/* recommendation */
#pageBody > section#recommendation {
	background : url(/aesthetic/img/bg_recommendation.jpg) 50% 50% no-repeat;
	background-size : cover;
}
#recommendation > .inner {
	padding : 80px 0;
	text-align : center;
}

/* price */
#price {
	margin-top : -120px;
	padding-top : 120px;
}
#price .table > li {
	display : grid;
	grid-template-columns : 20% 40% 40%;
}
#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;
}
#price .table > li > .summary {
	font-size : 0.85em;
	border-right : 1px solid #000000;
}
#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 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;
	}
	#aesthetic .leadTexts,
	#whitening .leadTexts {
		margin-right : 0;
		margin-bottom : 32px;
		padding-right : 0;
	}
	#aesthetic .ctsImg,
	#whitening .ctsImg {
		position : static;
		width : auto;
	}
	#whitening > .ctsImg {
		height : 60vw;
	}
	#aesthetic > .ctsImg img,
	#whitening > .ctsImg img {
		height : auto;
	}

	#aesthetic .merit,
	#whitening .merit {
		display : block;
	}

	#recommendation > .inner {
		padding : 48px 24px;
	}

	#price .table > li {
		display : block;
		padding : 1.4em 0;
	}
	#price .table > li > h3 {
		font-weight : 700;
	}
	#price .table > li > * {
		padding : 0;
	}
	#price .table > li > *:not(:last-child) {
		margin-bottom : 1.4em;
	}
	#price .table > li > .summary {
		border : none;
	}
}

/* --- for tablet --- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#aesthetic .leadTexts,
	#whitening .leadTexts {
		padding-right : 32px;
	}
}