@charset "euc-jp";
/* CSS Document */
 @import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
 
/*=============================
body
==============================*/
body { margin: 0; padding: 0; font-family: 'Noto Sans Japanese', sans-serif; font-size: 80%; color: #565656; background-color: #FFFFFF; }
 @media (max-width: 767px) {
html,
body { width: 100%; -webkit-text-size-adjust: 100%; }
}

/*=============================
header
===============================*/

header{
width: 100%; border-top: 5px solid #008e76;
position: relative;
 background-color:rgba(255,255,255,0.8); position: fixed; top: 0; height: 100px;
 z-index: 999;
}

.logo{ position: absolute; top: 20px; left: 40px;}
.logo img{ width: 210px; height: 55px;}
.tel{ position: absolute; top: 10px; right: 320px; background: url("../images/tel_icon.png") no-repeat left center; text-align: center; padding-left:50px;}
.tel p{ font-weight: 600; font-size: 24px; margin: 10px; letter-spacing: 0.1rem;}
.tel p span{ display: block; font-size: 14px;}

.top_contact{  height: 50px; position: absolute; top:40px; right: 40px;}

.top_contact p a{  display: inline; color: #fff; font-size: 18px; font-weight: 600;  background-color: #f7ac3b;border-radius:30px;		/* CSS3草案 */
	-webkit-border-radius: 30px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 30px; background-image: url( "../images/mail_icon.png"); background-repeat: no-repeat; background-position: 20px center; padding: 15px 30px 15px 60px;}
    
.top_contact p a:hover{ background: #fcc883;  background-image: url( "../images/mail_icon.png"); background-repeat: no-repeat; background-position: 20px center;}
.sp_tel{ display: none;}

@media (max-width: 767px) {
header{
border-top: 3px;
 background-color:rgba(255,255,255,0.8); height: 80px;
}
.logo{ position: absolute; top: 20px; left: 5px; width: 40%;}
.logo img{ width: 100%; height: auto;}
.tel{ display: none;}
.top_contact{  display: none;}
.sp_tel{ display: block; position: absolute; top: 30px; right: 10px;}
.sp_tel a{ color: #fff; background: #008e76; width: 100%; padding: 10px 20px; font-size: 14px;border-radius:20px;		/* CSS3草案 */
	-webkit-border-radius: 20px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 20px;}
.sp_tel a:before{font-family: "Font Awesome 5 Free";
  content: "\f3cd";
  padding-right : 10px;/*文字との隙間*/
  color: #fFF;/*アイコンの色*/ font-weight: 600;}
}

/*=============================
layout
===============================*/
.right_img{ float: right; margin: 10px;}
.center_img{ text-align: center; margin-bottom: 20px;}
.pc_on{ display: block;}
.sp_on{ display: none;}


@media (max-width: 767px) {
    .right_img img, .center_img img{ width: 100%; height: auto;}
    .right_img{ float: none; margin: 10px;}
    .pc_on{ display: none;}
.sp_on{ display: block;}
}


/*=============================
inner
===============================*/
.inner{ width: 1100px; margin: 0 auto;}
@media (max-width: 767px) { .inner{width: 100%;}}

/*=============================
section
===============================*/
#main{ background: url("../images/main_bg.jpg") no-repeat top center; background-size: cover; overflow: hidden; min-height: 690px;}
.h1_ttl{ margin-top: 210px;}
.h1_ttl h1{ color: #333; font-size: 52px; font-weight: 600; letter-spacing: 0.2rem; margin-bottom: 40px;}
.h1_ttl h1 span.green{ color: #008e76;}
.h1_ttl span.small{ font-size: 36px;}
.h1_ttl p{ color: #565656; font-size: 16px; line-height: 2.0;}

#main .inner{ position: relative;}
#main .inner img{ position: absolute; top: 0; right: 20px;}

@media (max-width: 767px) {
#main{min-height:inherit; text-align: center;}
.h1_ttl{ margin-top: 350px;}
.h1_ttl h1{ font-size: 22px; margin-bottom:20px; padding: 0 20px;}
.h1_ttl span.small{ font-size: 16px;}
.h1_ttl p{ font-size: 13px;  padding: 0 20px;}
#main .inner{ position: inherit;}
#main .inner img{ position:  inherit; width: 80%; height: auto; margin: 20px auto;}
}

/*=============================
section
===============================*/
#main01{ background: url("../images/main_bg.jpg") no-repeat top center; background-size: cover; overflow: hidden; min-height: 400px;}
#main01 .h1_ttl{ margin-top: 120px;}
#main01 .h1_ttl h1{ color: #333; font-size: 52px; font-weight: 600; letter-spacing: 0.2rem; margin-bottom: 40px;}
#main01 .h1_ttl h1 span.green{ color: #008e76;}
#main01 .h1_ttl span.small{ font-size: 36px;}
#main01 .h1_ttl p{ color: #565656; font-size: 16px; line-height: 2.0;}

#main01 .inner{ position: relative;}
#main01 .inner img{ position: absolute; top: 5px; right: 20px;}

@media (max-width: 767px) {
#main01{min-height:inherit; text-align: center;}
.h1_ttl{ margin-top: 150px;}
.h1_ttl h1{ font-size: 22px; margin-bottom:20px; padding: 0 20px;}
.h1_ttl span.small{ font-size: 16px;}
.h1_ttl p{ font-size: 13px;  padding: 0 20px;}
#main01 .inner{ position: inherit;}
#main01 .inner img{ position:  inherit; width: 80%; height: auto; margin: 20px auto;}
}

#about{ background: #daeeeb; width: 100%; padding: 80px 0;}
#about .inner{ width: 1000px; box-sizing: border-box; padding: 40px; position: relative; background: #fff; }
#about .inner h2{position: absolute; display: inline; top: -15px;}
#about .inner h2 span{ position: relative; background: #008e76; color: #fff; font-size: 18px; font-weight: 600; padding: 10px 40px; height: 47px; letter-spacing: 0.2rem;}
#about .inner h2 span:before{content: " ";
	position: absolute;
	top: 0;
	left: -10px;
	width: 0;
	height: 0;
	border-width: 47px 10px 0 0;
	border-style: solid;
	border-color: transparent;
	border-right-color: #008e76;}
#about .inner h2 span:after{content: " ";
	position: absolute;
	top: 0;
	left: 100%;
	width: 0;
	height: 0;
	border-width:0 0px 47px 10px;
	border-style: solid;
	border-color: transparent;
	border-left-color:#008e76;}
    
#about .inner h3{ font-size: 18px; color: #008e76; font-weight: 600; margin-bottom: 20px; clear: both;}
#about .inner h3 span{ font-size: 14px;}
#about .inner p{ font-size: 16px; color: #222; line-height: 2.0; margin-bottom: 30px;}
#about .inner p em{background: linear-gradient(transparent 60%, #ffff66 60%);}

@media (max-width: 767px) {
    #about{ padding: 40px 0;}
    #about .inner{ width: 95%; padding: 30px 10px;  }
    #about .inner h2{left: 20px;}
    #about .inner h3{ font-size: 16px;}
#about .inner h3 span{ font-size: 14px;}
#about .inner p{ font-size: 13px;  margin-bottom: 20px;}
    #about .inner .right_img{ width: 60%; margin: 10px auto;}
    #about .inner .center_img{ width: 80%; margin: 10px auto;}
}

#price{ background: #fff; width: 100%;  padding: 80px 0 40px 0; position: relative;}
#price .inner{ width: 1000px; box-sizing: border-box; padding: 40px; position: relative; border: 5px solid #daeeeb;}

#price .inner h2{position: absolute; display: inline; top: -15px;}
#price .inner h2 span{ position: relative; background: #008e76; color: #fff; font-size: 18px; font-weight: 600; padding: 10px 40px; height: 47px; letter-spacing: 0.2rem;}
#price .inner h2 span:before{content: " ";
	position: absolute;
	top: 0;
	left: -10px;
	width: 0;
	height: 0;
	border-width: 47px 10px 0 0;
	border-style: solid;
	border-color: transparent;
	border-right-color: #008e76;}
#price .inner h2 span:after{content: " ";
	position: absolute;
	top: 0;
	left: 100%;
	width: 0;
	height: 0;
	border-width:0 0px 47px 10px;
	border-style: solid;
	border-color: transparent;
	border-left-color:#008e76;}
    
#price .inner p{ font-size: 14px; color: #222; line-height: 2.0; margin-bottom: 30px;}
#price .inner p em{ color: #ed1e79;}

@media (max-width: 767px) {
 #price{  padding: 40px 0 20px 0; position: relative;} 
 #price .inner{ width: 95%; padding: 40px 10px 10px; border: 5px solid #daeeeb;}
    #price .inner h2{left:20px;}
#price .inner p{ font-size: 12px; }
  
}



#clinic { background: #fff; width: 100%;  padding: 40px 0 0 ; }
#clinic .inner{ box-sizing: border-box; padding: 40px; background: #fff; }
#clinic .inner h2{ color: #565656; font-size: 24px; text-align: center; font-weight: 600;}
#clinic .inner h2 span{background: linear-gradient(transparent 60%, #daeeeb 60%); }

@media (max-width: 767px) {
    #clinic { padding: 20px 0 0 ; }
    #clinic .inner{ padding: 10px;}
    #clinic .inner h2{  font-size: 18px;}
}




#clinic ul{
	margin:40px 0;
	padding:0;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
	
}

#clinic ul li{
	float: left;
	width: 280px;
	list-style-type: none;
    margin: 20px 0;
}

@media (max-width: 767px) {
    #clinic ul li{
	float: none;
	width: 80%;
    margin: 20px auto;
}
}

#clinic ul li h4{
	background-color:#008e76;
	font-size:16px;
	line-height:40px;
	color:#ffffff;
	text-align:left;
	padding-left:20px;
	margin-bottom:15px;
    font-weight: 600;
}


#clinic dl{
	color:#333;
	font-size:13px;
	line-height:1.6em;
	margin-bottom:15px;
}


#clinic dl dt{
	width:20%;
	text-align:left;
	float:left;
	display:block;
}

#clinic dl dd{
	width:80%;
	text-align:left;
	display:block;
	margin-left:20%;
}


/*-------------
三田村先生
--------------*/
.dr_box01{
	background-image:url(../images/dr01.jpg);
	background-repeat:no-repeat;
	background-position:right bottom;
	min-height:200px;
}

/*------------
羽仁先生
-------------*/
.dr_box02{
	background-image:url(../images/dr02.jpg);
	background-repeat:no-repeat;
	background-position:right bottom;
	min-height: 200px;
}

/*------------
田中先生
-------------*/
.dr_box03{
	background-image:url(../images/dr03.jpg);
	background-repeat:no-repeat;
	background-position:right bottom;
	min-height:200px;
}

/*------------
北條先生
-------------*/
.dr_box04{
	background-image:url(../images/dr04.jpg);
	background-repeat:no-repeat;
	background-position:right bottom;
	min-height:200px;
}


/*------------
比嘉先生
-------------*/
.dr_box05{
	background-image:url(../images/dr05.jpg);
	background-repeat:no-repeat;
	background-position:right bottom;
	min-height:200px;
}


/*------------
野ス先生
-------------*/
.dr_box06{
	background-image:url(../images/dr06.jpg);
	background-repeat:no-repeat;
	background-position:right bottom;
	min-height:200px;
}


/*------------
野ス先生
-------------*/
.dr_box07{
	background-image:url(../images/dr07.jpg);
	background-repeat:no-repeat;
	background-position:right bottom;
	min-height:200px;
}

/*------------
大島先生
-------------*/
.dr_box08{
	background-image:url(../images/dr08.jpg);
	background-repeat:no-repeat;
	background-position:right bottom;
	min-height:200px;
}


.dr_box01 h5,
.dr_box02 h5,
.dr_box03 h5,
.dr_box04 h5,
.dr_box05 h5,
.dr_box06 h5,
.dr_box07 h5{
	color:#333;
	font-size:13px;
	font-weight:400;
	margin-bottom:10px;
	text-align:left;
	background:none;
}


#clinic .dr_box01 dl,
#clinic .dr_box02 dl,
#clinic .dr_box03 dl,
#clinic .dr_box05 dl,
#clinic .dr_box06 dl,
#clinic .dr_box07 dl{
	color:#333;
	font-size:10px;
	line-height:1.3em;
	margin-bottom:10px;
	background:none;
}


#clinic .dr_box01 dl dt,
#clinic .dr_box02 dl dt,
#clinic .dr_box03 dl dt,
#clinic .dr_box05 dl dt,
#clinic .dr_box06 dl dt,
#clinic .dr_box07 dl dt{
	width:20%;
	text-align:left;
	float:left;
	display:block;
	clear:both;
	background:none;
}

#clinic .dr_box01 dl dd,
#clinic .dr_box02 dl dd,
#clinic .dr_box03 dl dd,
#clinic .dr_box05 dl dd,
#clinic .dr_box06 dl dd,
#clinic .dr_box07 dl dd{
	width:80%;
	text-align:left;
	display:block;
	margin-left:20%;
	background:none;
	margin-bottom:10px;
}


#clinic .dr_box04 p{
	color:#333;
	font-size:10px;
	line-height:1.6em;
	margin-bottom:10px;
	background:none;
}


.accordion{
	display:none;
}

.info{ width: 100%; overflow: hidden; margin-bottom: 40px;}

.info h2{ color: #565656; font-size: 24px; text-align: center; font-weight: 600; margin-bottom: 80px;}
.info h2 span{background: linear-gradient(transparent 60%, #daeeeb 60%); }

@media (max-width: 767px) {
    .info{ padding: 20px 0; margin-bottom: 10px;}
    .info h2{ font-size: 18px; margin-bottom: 40px;}
}

/*==============================
btn
==============================-*/

.info_btn{ width: 560px; margin: 40px auto;}
.info_btn a{ width: 100%;line-height: 85px; background:  #f7ac3b; text-align: center; font-size: 22px;  color: #fff; display: block;border-radius:43px;		/* CSS3草案 */
	-webkit-border-radius: 43px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 43px; font-weight: 600; border: 3px solid #f7ac3b; position: relative;}
    
.info_btn a:hover{background: #fff; border: 3px solid #f7ac3b; color: #f7ac3b;  }
.info_btn a:after{ position: absolute;font-family: "Font Awesome 5 Free";
  content: "\f061";
  color: #fff;/*アイコンの色*/
  font-weight: 600; right: 63px;} 
  
.info_btn a:hover:after{font-family: "Font Awesome 5 Free";
  content: "\f061";
  padding-left: 30px;
  color: #f7ac3b;/*アイコンの色*/
  font-weight: 600;}

.pdf_btn{ width: 560px; margin: 40px auto;}
.pdf_btn a{background: #fff; border: 3px solid #008e76; color: #008e76; box-sizing: border-box;width: 100%;line-height: 85px; text-align: center; font-size: 22px;display: block;border-radius:43px;		/* CSS3草案 */
	-webkit-border-radius: 43px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 43px; font-weight: 600; position: relative;}
    
.pdf_btn a:hover{ background: #008e76; color: #fff;}

.pdf_btn a:after{ position: absolute;font-family: "Font Awesome 5 Free";
  content: "\f061";
  color: #008e76;/*アイコンの色*/
  font-weight: 600; right: 60px;} 
  
.pdf_btn a:hover:after{font-family: "Font Awesome 5 Free";
  content: "\f061";
  padding-left: 30px;
  color: #fff;/*アイコンの色*/
  font-weight: 600;}

@media (max-width: 767px) {
    .info_btn{ width: 80%; margin: 20px auto;}
    .info_btn a{ font-size: 16px; line-height: 60px;}
    .info_btn a:after{right: 20px;}
    .pdf_btn{ width:80%; margin: 20px auto; }
    .pdf_btn a{ font-size: 16px; line-height: 60px;}
    .pdf_btn a:after{right: 20px;}
}


/*==============================
footer
==============================-*/

footer{width:100%; background: #008e76; padding: 20px 0;}
footer p{ 
  color: #fff; font-size: 14px; font-weight: 600; text-align: center; 
}

@media (max-width: 767px) {
footer p{ 
  color: #fff; font-size: 12px;
}
}


.info_box{
margin: 1em auto 3em;
padding: 1.5em 1.5em;
width: 640px;
color: #707070;
background-color: #ffffff;
border: 2px solid #707070;
font-size: 15px;
	line-height: 1.5em;
}
.box_title{
font-weight: bold;
color: #ED668C;
font-size: 120%;
	margin-bottom: 10px;
}

@media (max-width: 768px) {
	.info_box{
		width: 85%;
	}
}



.video {
  width:100%;
  text-align: center;
}

.video iframe{
  width:800px;
  height:450px;
}
@media (max-width: 767px) {
    .video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}
}