@charset "utf-8";
/* CSS Document */

/* 診療案内 */

html{
	scroll-behavior: smooth;
	}

#information001{
	margin:80px 0;
}

#information001 h2{
    margin:0;
    font-size:2.4rem;
	color:#53453E;
    padding-bottom:10px;
    margin-bottom:35px;
    position:relative;
	}

#information001 h2:before {
    content:'';
    width:50px;
    height:4px;
    background-color:#D093BF;
    display:block;
    position:absolute;
    left:0;
    bottom:-6px;
	}

#information001 h3{
	margin: 20px 0 10px 0;
	padding:0 0 0 10px;
	border-left: #D093BF solid 5px;
	font-size:1.6rem;
	color:#53453E;
	line-height:180%;
	font-weight:bold;
	}

#information001 .info_text01{
	width: 65%;
	float: left;
	}

#information001 .info_text01 p{
	margin: 0 0 10px 0;
	font-size:1.4em;
	color:#53453E;
	line-height:160%;
	}

#information001 .info_text01 p span{
	background: linear-gradient(transparent 50%, #FEEAEE 50%);
	}

#information001 .info_text01 p.info_text02{
	font-size:1.5em;
	color:#6D6E8C;
	font-weight: bold;
	}

#information001 .info_images01{
	width: 30%;
	float: right;
	}

#information001 .info_images01 img{
	width: 100%;
	height: auto;
	}


/* -------------------------------------------------- スマートフォン */
@media screen and (max-width:767px) {
	/* 表示領域が767px未満の場合に適用するスタイル */
	#information001{
	width: 96%;
	margin:0 2% 80px 2%;
	}
	#information001 h2{
    margin:30px 0 20px 0;
	}
	#information001 .info_text01{
	width: 100%;
	float: none;
	}
	#information001 .info_images01{
	width: 100%;
	float: none;
	}
	#information001 .info_images01 img{
	width: 70%;
	height: auto;
	margin: 0 15%;
	}
}


/* 診療案内 */

.emsella{
	width: 80%;
	margin: 50px 10%;
	}

.emsella img{
	width: 100%;
	height: auto;
	}

/* -------------------------------------------------- スマートフォン */
@media screen and (max-width:767px) {
	/* 表示領域が767px未満の場合に適用するスタイル */
	.emsella{
	width: 90%;
	margin: 50px 5%;
	}
}


#information_nav h2{
    margin:0;
    font-size:2.4rem;
	color:#53453E;
    padding-bottom:10px;
    margin-bottom:20px;
    position:relative;
	}

#information_nav h2:before {
    content:'';
    width:50px;
    height:4px;
    background-color:#D093BF;
    display:block;
    position:absolute;
    left:0;
    bottom:-6px;
	}

#information_nav ul{
	width: 100%;
	padding:10px 0 0 0;
	clear: both;
	}

/* -------------------------------------------------- パソコン */
@media screen and (min-width:768px){
	/* 表示領域が768px以上の場合に適用するスタイル */
	#information_nav li{
	width: 32.5%;
	margin: 0 1.25% 1.25% 0;
	float: left;
	}
	#information_nav li:nth-of-type(3n){
	margin: 0;
	}
}

/* -------------------------------------------------- スマートフォン */
@media screen and (max-width:767px) {
	/* 表示領域が767px未満の場合に適用するスタイル */
	#information_nav{
	width: 96%;
	margin:30px 2% 80px 2%;
	}
}

button{
	width: 100%;
	background:#E5C3DB;
	color:#FFFFFF;
	border:none;
	position:relative;
	height:50px;
	font-size:1.6rem;
	padding:0;
	cursor:pointer;
	transition:800ms ease all;
	outline:none;
	}
	
button:hover{
	background:#FFFFFF;
	color:#D093BF;
	}

button:before,button:after{
	content:'';
	position:absolute;
	top:0;
	right:0;
	height:2px;
	width:0;
	background: #D093BF;
	transition:400ms ease all;
	}

button:after{
	right:inherit;
	top:inherit;
	left:0;
	bottom:0;
	}

button:hover:before,button:hover:after{
	width:100%;
	transition:800ms ease all;
	}


/* -------------------------------------------------- スマートフォン */
@media screen and (max-width:767px) {
	/* 表示領域が767px未満の場合に適用するスタイル */
	#information_nav li{
	width: 49%;
	margin: 0 2% 2% 0;
	float: left;
	}
	#information_nav li:nth-of-type(even) {
	margin: 0;
	}
	button{
	height:40px;
	font-size:1.3rem;
	}
}


.information_wrap{
	margin: 0 0 50px 0;
	padding: 30px;
	background-color:#FEFAFB;
	clear: both;
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
	}

/* -------------------------------------------------- スマートフォン */
@media screen and (max-width:767px) {
	/* 表示領域が767px未満の場合に適用するスタイル */
	.information_wrap{
	padding: 15px;
	}
}

.information_wrap h3.information_title{
	margin: 0 0 20px 0;
	padding: 10px 0 10px 3px;
	border-top:#FDB8C6 double 3px;
	border-bottom:#FDB8C6 double 3px;
	font-size:1.8rem;
	color:#FB607F;
	}

.information_wrap h3.information_title:before {
	content: '◆';
	color:#FB607F;
	margin-right: 8px;
	}

.information_wrap h3.information_title span{
	padding: 0 0 0 25px;
	font-size:1.2rem;	
	color:#FDB8C6;
	}

.information_wrap h4.information_title{
	margin:50px 0 10px 0;
	padding: 10px 0 10px 3px;
	background-color: #FFFFFF;
	border-top:#FDB8C6 solid 1px;
	border-bottom:#FDB8C6 solid 1px;
	font-size:1.6rem;
	color:#FB607F;
	line-height: 140%;
	}

.information_wrap h4.information_title:before {
	content: '◇';
	color:#FB607F;
	margin-right: 8px;
	}

.information_wrap h4.information_title span{
	font-size:1.2rem;
	}

.information_wrap p span.text01{
	font-size:1.5rem;
	color:#004069;
	font-weight: bold;
	}

/* -------------------------------------------------- パソコン */
@media screen and (min-width:768px){
	/* 表示領域が768px以上の場合に適用するスタイル */
	.information_wrap h3.information_title br{
	display: none;
	}
	.information_wrap h4.information_title br{
	display: none;
	}
	.information_wrap h4.information_title span{
	font-size:1.4rem;
	}
}


.information_wrap h5.information_title{
	margin:20px 0 10px 0;
	padding: 10px 0 10px 3px;
	border-bottom:#FDB8C6 solid 1px;
	font-size:1.6rem;
	color:#FB607F;
	}

.information_wrap h5.information_title:before {
	content: '◇';
	color:#FB607F;
	margin-right: 8px;
	}

.information_wrap h6.information_title{
	width: 100%;
	margin:10px 0;
	padding: 10px 0 10px 10px;
	background:#FDD9E0;
	font-size:1.4rem;
	color:#FB607F;
	border-radius: 15px 15px 15px 15px;/*左側の角を丸く*/
	display: inline-block;
	}

.information_wrap h6.information_title:before {
	content: '●';
	color:#FFFFFF;
	margin-right: 8px;
	}


.information_wrap p{
	margin: 0 0 10px 0;
	font-size:1.4rem;
	color:#53453E;
	line-height:160%;
	}

.information_wrap p.detail a{
	color:#FB607F;
	text-decoration: none;
	}

.information_wrap div#sub_text01{
	padding: 20px 20px 15px 20px;
	background-color: #FEEAEE;
	border-left: #FB607F solid 5px;
	border-right: #FB607F solid 5px;
	}

.information_wrap div#sub_text01 h4{
	margin:0 0 10px 0;
	padding: 10px 0 10px 3px;
	border-bottom:#FDB8C6 solid 1px;
	font-size:1.6rem;
	color:#FB607F;
	}

.information_wrap div#sub_text02{
	padding: 20px 20px 15px 20px;
	background-color: #FEEAEE;
	border-left: #FB607F solid 5px;
	border-right: #FB607F solid 5px;
	}

.information_wrap div#sub_text02 h4{
	margin:0 0 10px 0;
	padding: 10px 0 10px 3px;
	border-bottom:#FDB8C6 solid 1px;
	font-size:1.6rem;
	color:#FB607F;
	}

.information_wrap div#sub_text02 .text_box{
	width: 65%;
	float: left;
	}

.information_wrap div#sub_text02 .images_box{
	width: 30%;
	float: right;
	}

.information_wrap div#sub_text02 .images_box img{
	width:100%;
	height: auto;
	}

.information_wrap div#sub_text03{
	padding: 20px 20px 15px 20px;
	background-color: #FEEAEE;
	border-left: #FB607F solid 5px;
	border-right: #FB607F solid 5px;
	}

.information_wrap div#sub_text03 h4{
	margin:0 0 10px 0;
	padding: 10px 0 10px 3px;
	border-bottom:#FDB8C6 solid 1px;
	font-size:1.6rem;
	color:#FB607F;
	}

.information_wrap div#sub_text03 p.text01{
	font-size:1.6rem;
	color:#FB607F;
	font-weight: bold;
	}

.information_wrap div#sub_text03 p span{
	border-bottom:#FB607F solid 1px;
	font-size:1.4rem;
	color:#FB607F;
	font-weight: bold;
	}

/* -------------------------------------------------- スマートフォン */
@media screen and (max-width:767px) {
	/* 表示領域が767px未満の場合に適用するスタイル */
	.information_wrap div#sub_text02 .text_box{
	width:100%;
	float:none;
	}
	.information_wrap div#sub_text02 .images_box{
	width:100%;
	float:none;
	}
	.information_wrap div#sub_text02 .images_box img{
	width:80%;
	height: auto;
	margin: 0 10%;
	}
}

#information002 h2{
    margin:0;
    font-size:2.4rem;
	color:#53453E;
    padding-bottom:10px;
    margin-bottom:20px;
    position:relative;
	}

#information002 h2:before {
    content:'';
    width:50px;
    height:4px;
    background-color:#FB607F;
    display:block;
    position:absolute;
    left:0;
    bottom:-6px;
	}


#information02 img{
	width: 70%;
	margin: 0 15%;
	}

/* -------------------------------------------------- スマートフォン */
@media screen and (max-width:767px) {
	/* 表示領域が767px未満の場合に適用するスタイル */
	#information02 img{
	width:100%;
	height: auto;
	margin: 0;
	}	
}

#information010 p span{
	padding: 0 0 0 20px;
	font-size:1.2rem;
	color:#FB607F;
	font-weight: bold;
	}