@charset "utf-8";
/* -------------------------------------------
   フォトフェイシャルCSS
--------------------------------------------- */
body {
	padding-top: 0px !important;
	background-image: none;}
h2 {
	text-align: left;
	color: #009fe1;}
p {}
	
header {
	position: relative;
	height: 100px;
	background-image: none;}
header .container {
	margin: 0 auto;
	padding-top: 25px;
	width :1100px;}
#photofacial-mainview {
	padding-top: 0;}
#photofacial-mainview h1 {
	margin: 0 auto;
	width: 1100px;}
#photofacial-mainview img {
	display: block;
}

#photofacial-about {
	background-color: #C0E2CD;}

#photofacial-procedure {
	background-color: #96CEAB;}

.photofacial-box {
	padding: 40px 50px;
	background-color: #fff;
	border-radius: 1em;}
.photofacial-box p {
	margin-bottom: 1em;}
.photofacial-box table {
	margin-bottom: 2em;}
.photofacial-box table th {
	background-color: #EAF5EE;}

#photofacial-about h2 {
	margin-bottom: 2em;
	color: #333;
	text-align: center;}
#photofacial-about .about-box {
	margin-bottom: 2em;
	display: flex;
	justify-content: space-between;}
#photofacial-about .about-box p {
	width: 550px;}
#photofacial-about .about-recommend {
	padding: 40px 0 40px 240px;
	position: relative;
	width: 520px;
	background-color: rgba(255,255,255,0.8);
	border-radius: 0.5em;
	box-sizing: border-box;}
#photofacial-about .about-recommend h3 {
	position: absolute;
	top: -25px;
	left: 190px;
	width: 300px;
	height: 67px;
	color: #fff;
	background-image: url("../images/photofacial/recommend_title.png");
	text-align: center;}
#photofacial-about .about-recommend img {
	position: absolute;
	left: 30px;
	bottom: 20px;}
#photofacial-about .about-recommend ul {
	list-style: disc;}
#photofacial-about h3 {
	margin-bottom: 0.5em;
	color: #96ceab;
	font-size: 1.5em;}
#photofacial-about .about-mechanism {
	margin-bottom: 3em;
	padding: 40px 45px;
	border: solid 5px #96ceab;
	border-radius: 0.5em;}
#photofacial-about .about-mechanism ol {
	display: flex;
	justify-content: space-between;
	list-style: none;}
#photofacial-about .about-mechanism ol li {
	width: 230px;}
#photofacial-about .about-mechanism ol li img {
	margin-bottom: 0.5em;
	width: 100%;}
#photofacial-about .about-effective {
	margin-bottom: 2em;
	padding: 1em;
	display: flex;
	justify-content: center;
	background-color: #96ceab;
	border-radius: 0.5em;}
#photofacial-about .about-effective h4 {
	margin-right: 2em;
	font-size: 1.2em;
	color: #fff;}
#photofacial-about .about-effective p {
	margin-bottom: 0;
	font-size: 1.2em;
	font-weight: 700;}

#photofacial-about .about-sideeffect h4 {
	margin-bottom: 0.5em;
	font-size: 1.3em;}
#photofacial-about .about-sideeffect ul {
	margin-left: 1.5em;
	list-style: disc;}

#photofacial-procedure h2 {
	margin-bottom: 1em;
	padding: 0 1em;
	line-height: 2;
	color: #fff;
	background-color: #96CEAB;
	font-size: 1.4em;
	border-radius: 0.25em;}
#photofacial-procedure ol {
	margin-bottom: 2em;
	list-style: none;}
#photofacial-procedure ol > li {
	margin-bottom: 1em;
	padding: 25px;
	border: solid 5px #96ceab;
	display: flex;
	border-radius: 0.5em;}
#photofacial-procedure ol > li h3 {
	width: 6em;
	font-size: 1em;}
#photofacial-procedure ol > li .textbox {
	padding-left: 1.5em;
	border-left: solid 5px #ccc;}
#photofacial-procedure ol > li .textbox p {
	margin-bottom: 0;}
#photofacial-procedure ol > li .textbox p + p {
	margin-top: 0.5em;}
#photofacial-procedure ol > li .textbox ul {
	margin-top: 1em;
	margin-bottom: 0;}
#photofacial-procedure ul {
	margin-bottom: 1.5em;
	margin-left: 1.5em;
	list-style: disc;}
#photofacial-procedure .column2 {
	display: flex;
	justify-content: space-between;}
#photofacial-procedure .column2 > div {
	width: 485px;}
#photofacial-procedure .column2 > div h3 {
	margin-bottom: 0.5em;
	padding-bottom: 0.25em;
	border-bottom: solid 5px #96ceab;}
#photofacial-procedure .column2 > div dl {
	display: flex;
	flex-wrap: wrap;}
#photofacial-procedure .column2 .photofacial-hour dl dt {
	width: 9em;}
#photofacial-procedure .column2 .photofacial-hour dl dd {
	width: calc(100% - 9em);}
#photofacial-procedure .column2 .photofacial-fee dl dt {
	width: 4em;}
#photofacial-procedure .column2 .photofacial-fee dl dd {
	width: calc(100% - 4em);}
	
@media screen and (max-width: 640px){

header .container {
	width: 100%;}

#photofacial-mainview h1 {
	width: 100%;}
#photofacial-mainview img {
	width: 100%;}
	
#photofacial-about .about-box {
	flex-direction: column;}
#photofacial-about .about-box p {
	margin-bottom: 3em;
	width: 100%;}
#photofacial-about .about-box .about-recommend {
	padding: 50px 2em 2em 2em;
	width: 100%;}
#photofacial-about .about-box .about-recommend h3 {
	left: 5vw;}
#photofacial-about .about-box .about-recommend img {
	left: inherit;
	right: 2em;
	width: 20vw;}

#photofacial-about .about-mechanism {
	padding: 1.5em;}
#photofacial-about .about-mechanism ol {
	flex-direction: column;}
#photofacial-about .about-mechanism ol li {
	margin: 0 auto 1em auto;}
	
#photofacial-about .about-effective {
	flex-direction: column;}

#photofacial-procedure ol > li {
	padding: 1em 1.5em;
	flex-direction: column;}
#photofacial-procedure ol > li h3 {
	margin-bottom: 0.5em;}
#photofacial-procedure ol > li .textbox {
	padding-left: 0;
	border-left: none;}

.photofacial-box {
	padding: 1em;}

#photofacial-procedure .column2 {
	flex-direction: column;}
#photofacial-procedure .column2 > div {
	margin-bottom: 2em;
	width: 100%;}

}

/* ---------------------------------
  _02 アクセシビリティ対応
------------------------------------*/
body.color_black #davinci-merits {
	background-image: none;
	background-color: #000000;
}
body.color_black #davinci-about {
	background-image: none;
	background-color: #000000;
}
body.color_black #davinci-about .white-bg {
	background-color: rgba(255, 255, 255, 0);
}
body.color_black #davinci-doctors {
	background: linear-gradient(180deg, #000000 0%, #000000 50%, #009fe1 50%, #009fe1 100%);
}
body.color_blue #davinci-merits {
	background-image: none;
	background-color: #00f;
}
body.color_blue #davinci-merits h2 div {
	color: #fff;
}
body.color_blue #davinci-about {
	background-image: none;
	background-color: #00f;
}
body.color_blue #davinci-about .white-bg {
	background-color: rgba(255, 255, 255, 0);
}
body.color_blue #davinci-doctors {
	background: linear-gradient(180deg, #00f 0%, #00f 50%, #009fe1 50%, #009fe1 100%);
}
body.color_yellow #davinci-merits {
	background-image: none;
	background-color: #ff0;
}
body.color_yellow #davinci-merits h3 span {
	background: linear-gradient(transparent 70%, #fff 70%);
}
body.color_yellow #davinci-about {
	background-image: none;
	background-color: #ff0;
}
body.color_yellow #davinci-about .white-bg {
	background-color: rgba(255, 255, 255, 0);
}
body.color_yellow #davinci-doctors {
	background: linear-gradient(180deg, #ff0 0%, #ff0 50%, #009fe1 50%, #009fe1 100%);
}