@charset "UTF-8";

/* ▼▼▼ 
======================================================*/

/* treatment */
.treatment-keywords{ text-align: center; margin-bottom: 10px;}
.treatment-keywords span{ display: inline-block; vertical-align: top; padding: 0 1em; margin: 0 5px 10px; min-width: 150px; line-height: 38px; color: #697C92; font-weight: bold; background: #fff; border: 2px dotted #697C92; border-radius: 100px;}
.treatment-effective{ background: #fff; border: 1px solid #E3E3E3;}
.treatment-effective dt{ padding: 5px 20px; color: #697C92; font-size: 20px; font-weight: bold; background: #F3E7DD; border-bottom: 1px solid #E3E3E3;}
.treatment-effective dd{ padding: 20px;}
.treatment-effective dd .list li{ display: inline-block; margin-right: 3em;}
.menunav{ max-width: 1240px; text-align: center;}
.menunav dd{ display: flex;}
.menunav dd a{ display: block; width: 28%; color: #697C92; font-size: 23px;}
.menunav dd a:not(:last-child){ width: 24%; border-right: 1px solid #BEC2C7;}
.menunav dd a:after{ display: inline-block; vertical-align: middle; content: ""; margin-left: .5em; margin-bottom: .3em; width: 16px; height: 16px; background: url("../img/ic-circle-right.svg") no-repeat;}
.photolist3{ display: flex; flex-wrap: wrap;}
.photolist3 li{ width: 30.5%;}
.photolist3 li:not(:nth-child(3n)){ margin-right: 4.25%;}
.photolist4{ display: flex; flex-wrap: wrap;}
.photolist4 li{ width: 22.2%;}
.photolist4 li:not(:nth-child(4n)){ margin-right: 3.73%;}
.treatment-flow{ border-top: 1px dashed #909FB2;}
.treatment-flow.bd-none{ border-top: none;}
.treatment-flow dl{ display: flex; padding: 20px 0; border-bottom: 1px dashed #909FB2;}
.treatment-flow.bd-none dl{ border-bottom: none; padding: 0;}
.treatment-flow dl dt{ width: 230px;}
.treatment-flow.bd-none dl dt{ width: auto; margin-right: 30px;}
.treatment-flow dl dd{ flex: 1;}
.treatment-faq dt{ margin-bottom: 20px; padding: 20px 20px 20px 80px; font-family: 'Zen Old Mincho', serif; color: #697C92; font-size: 23px; line-height: 1.4; background: #FAF7F4; border-bottom: 1px dashed #909FB2; position: relative;}
.treatment-faq dt:before{ display: inline-block; content: "Q"; position: absolute; left: 30px; top: 45%; transform: translateY(-50%); font-size: 32px; line-height: 1;}


.menu1 section{ margin-bottom: 100px;}
ul.link-list{
	display: flex;
	flex-wrap: wrap;
}
ul.link-list.flex-center{ justify-content: center;}
ul.link-list li{
	width: 32%;
	margin: 0 2% 25px 0;
}
ul.link-list li a{
	color: #697C92;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 700;
	min-height: 65px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	font-family: 'Zen Old Mincho', serif;
	padding: 2px 35px 2px 10px;
	background: url("../img/ic-circle-right.svg") right 15px center no-repeat;
	border-bottom: 1px solid #697C92;
}
ul.link-list li a.link-no{ background: none;}
ul.link-list li a.link-no:hover{ opacity: 1;}
ul.link-list li:nth-child(3n){ margin-right: 0;}
ul.link-list li a small{
	display: inline-block;
	padding-top: 5px;
}

.menu-ttl{ font-family: 'Zen Old Mincho', serif; color: #697C92; font-size: 30px; font-weight: 400; line-height: 1.4; padding-left: 1em; text-indent: -1em; position: relative;}
.menu-ttl.ttl-orange{ border-left: 5px solid #F3E7DD;}
.menu-ttl.ttl-lightblue{ border-left: 5px solid #CDE8EB;}
.menu-ttl.ttl-green{ border-left: 5px solid #CBD9A7;}
.menu-ttl.ttl-yellow{ border-left: 5px solid #E5CA8B;}
.menu-ttl span,.menu-ttl b{ vertical-align: middle;}
.menu-ttl span{ padding-left: 20px;}
.menu-ttl b{
	font-size: 50px;
	 padding-left: 25px;
	vertical-align: middle;
}
.menu-ttl2{ font-family: 'Zen Old Mincho', serif; color: #697C92; font-size: 25px; font-weight: 400; line-height: 1.4; position: relative; padding: 12px; text-align: center; background: #F3E7DD;}
.menu-lower-list > li{
	overflow: hidden;
	padding-bottom: 30px;
	border-bottom: 1px solid #E3E3E3;
	margin-bottom: 50px;
}
.menu-lower-list > li:last-child{
	padding-bottom: 0;
	border-bottom: none;
}
.bd-btm{
	margin-bottom: 20px;
}
.bd-bottom{
	padding-bottom: 70px;
	border-bottom: 1px solid #E3E3E3;
}
.bd-box{
	padding: 30px;
	border: 1px solid #E3E3E3;
	background: #fff;
}
.rightimg .rightcol.clm2{
	display: flex;
	justify-content: space-between;
}
.rightimg .rightcol.clm2 figure{ width: 48.5%;}
.rightimg .rightcol.clm2 figure img{ margin-bottom: 5px;}
.dermatology3-cont{
	padding: 40px 70px;
	background: #fff;
}
.dermatology3-cont h4{
	font-size: 27px;
	line-height: 1.4;
	font-weight: 300;
	text-align: center;
}
.dermatology3-cont ul li{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0 25px;
	border-bottom: 1px solid #E3E3E3;
}
.dermatology3-cont ul li:last-child{ border-bottom: none;}
.dermatology3-cont ul li figure{ width: 20.6%;}
.dermatology3-cont ul li dl{ width: 77%;}
.dermatology3-cont ul li dl dt{
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
	margin-bottom: 20px;
}
.dermatology3-cont ul li dl dt small{
	font-size: 14px;
	font-weight: 400;
}
.img-clm2{
	display: flex;
	justify-content: space-between;
}
.img-clm2 figure{ width: 49%;}
table.menu-tb{ width: 100%;}
.bd-bottom.caption h3{
	font-size: 23px;
	line-height: 1.4;
	font-weight: 700;
	text-align: center;
	margin-bottom: 10px;
}

table.menu-tb th,table.menu-tb td{
	vertical-align: middle;
	border-top: 1px solid #BEC2C7;
}
table.menu-tb tr:first-child th,table.menu-tb tr:first-child td{ border-top: none;}
table.menu-tb th{
	font-weight: 700;
	padding: 1px;
	text-align: center;
	background: #F8F8F8;
	min-width: 290px;
}
table.menu-tb th.th-bgorange{ background: #F3E7DD;}
table.menu-tb th.th-bgblue{ background: #EFEFEF;}
table.menu-tb td{
	padding: 20px 45px;
	background: #fff;
}
table.menu-tb2{ width: 100%;}
table.menu-tb2 th,table.menu-tb2 td{
	vertical-align: middle;
	padding: 12px 35px;
	background: #fff;
}
table.menu-tb2 th{
	color: #697C92;
	font-weight: bold;
}
table.menu-tb2 th.bg-gray{
	color: #565F68;
	text-align: center;
	padding: 5px;
	background: #EFEFEF;
}
table.menu-tb2 td{
	font-size: 14px;
	text-align: center;
}
table.menu-tb2 th.bg-lightgreen,table.menu-tb2 td.bg-lightgreen{ background: #F4F7F6;}

/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px) {
	/* treatment */
	.treatment-effective dd .list li{ display: block; margin-right: 0;}
	.menunav dt{ font-size: 30px;}
	.menunav dd{ display: block;}
	.menunav dd a{ width: auto!important; padding: 10px 0; text-align: left; position: relative;}
	.menunav dd a:not(:last-child){ border-right: none; border-bottom: 1px solid #BEC2C7;}
	.menunav dd a:after{ margin: 0; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
	.photolist3{ display: block;}
	.photolist3 li{ width: auto;}
	.photolist3 li:not(:nth-child(3n)){ margin-right: 0; margin-bottom: 20px;}
	.photolist4 li{ width: 48%; margin-bottom: 20px;}
	.photolist4 li:not(:nth-child(4n)){ margin-right: 0;}
	.photolist4 li:nth-child(odd){ margin-right: 4%!important;}
	.treatment-flow dl{ display: block;}
	.treatment-flow dl dt{ width: auto; margin-bottom: 10px;}
	.treatment-flow.bd-none dl dt{ margin-right: 0;}
	.treatment-faq dt{ padding: 15px 15px 15px 60px;}
	.treatment-faq dt:before{ left: 20px; font-size: 30px;}
	
	ul.link-list{ display: block;}
	ul.link-list li{
		width: 100%;
		margin: 0 1% 10px;
	}
	.menu-lower{ padding: 40px 0 10px;}
	.bd-btm{
		padding-bottom: 40px;
		margin-bottom: 0;
	}
	.bd-bottom{ padding-bottom: 40px;}
	.bd-bottom .scroll{overflow-x: scroll; padding-bottom: 10px;}
	.bd-box{ padding: 15px;}
	.rightimg .rightcol.clm2{ display: block;}
	.rightimg .rightcol.clm2 figure{
		width: 266px;
		margin: 0 auto 20px;
	}
	.dermatology3-cont{ padding: 30px 20px 5px;}
	.dermatology3-cont h4{ font-size: 24px;}
	.dermatology3-cont ul li{
		display: block;
		padding: 30px 0;
	}
	.dermatology3-cont ul li figure{
		width: 100%;
		text-align: center;
		margin-bottom: 30px;
	}
	.dermatology3-cont ul li dl{ width: 100%;}
	.dermatology3-cont ul li dl dt small{ display: block;}
	.img-clm2{ display: block;}
	.img-clm2 figure{ width: 100%; margin-bottom: 30px;}
	table.sp-tb th,table.sp-tb td{ display: block;}
	table.menu-tb2 th.bg-gray{ padding: 12px;}
	table.menu-tb2 th,table.menu-tb2 td{
		font-size: 14px;
		line-height: 1.4;
		padding: 10px 15px 5px;
		display: block;
	}
	table.menu-tb2 tr.bg-gray th{ padding: 3px;}
	table.menu-tb2 td{
		text-align: left;
		padding-top: 0;
		padding-bottom: 10px;
	}
	table.menu-tb2 td:last-child{ margin-bottom: 20px;}
}



/*______POPUP______*/
.pop{
	cursor: pointer;
}
.popup{
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.7);
	z-index: 9999;
	top: 0;
	left: 0;
	display: none;
}
.popup.active{
	display: block;
}
.popup .pop_wrap{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%,-50%);
}
.popup .pop_wrap .img{
	position: relative;
	max-width: 700px;
	width: 100%;
	padding: 10px;
	margin: auto;
}
.popup .pop_wrap .img .close{
	position: absolute;
	top: 0px;
	right: 0px;
	background-color: #fff;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.7);
	cursor: pointer;
}
.popup .pop_wrap .img .close span{
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.popup .pop_wrap .img .close span::before{
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,0) rotate(135deg);
	background-color: #000;
	width: 30px;
	height: 3px;
}
.popup .pop_wrap .img .close span::after{
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,0) rotate(-135deg);
	background-color: #000;
	width: 30px;
	height: 3px;
}
@media screen and (max-width: 768px){
	.popup .pop_wrap .img .close span::after{
		transform: translate(-130%,0) rotate(-135deg);
	}
	.popup .pop_wrap .img .close span::before{
		transform: translate(-130%,0) rotate(135deg);
	}
}