@charset "utf-8";

/* ==================================================================
	service.css
	
=================================================================== */





	/* ◇ title
	-------------------------------- */	

	.contents .accent{
		background:url(../../images/introduce/accent.jpg) no-repeat 50% 50%; 
		background-size:cover;
	}

	.contents .mainvisual h2 {
		background:url(../../images/introduce/title_icon.png) 0 50% no-repeat;
	}

	/* ◇ 共通
	-------------------------------- */	
	p.image{
		display:block;
		text-align:center;
		margin:30px 0;
	}
	
	p.image span{
		display: block;
		margin-top: 10px;
	}



/* --------------------------------
   □ クリニックのご紹介トップ
-------------------------------- */ 

#index ul.menu li{
	width:485px;
	float:left;
	margin-right:30px;
	margin-bottom:55px;
}

#index ul.menu li a{
	display:block;
	color:#333;
}

#index ul.menu li:nth-child(2n){
	margin-right:0;
}

#index ul.menu li p.image{
	margin-bottom:15px;
}

#index ul.menu li dl{
	text-align:center;
}

#index ul.menu li dl dt{
	font-size:157%;
	margin-bottom:15px;
	font-weight:700;
}

#index ul.menu li dl dd{
	font-size:107%;
}

#index ul.visitor li{
	width:485px;
	float:left;
	margin-right:30px;
	text-align: center;
}

#index ul.visitor li:nth-child(2n){
	margin-right:0;
}

#index ul.visitor li a{
	display: block;
    padding: 30px 40px;
    color: #fff;
    background: #555;
    text-decoration: none;
    transition: all 300ms 0s ease;
    font-size: 128%;
    border-radius: 4px;
    box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.4);

}

#index ul.visitor li a span{
	background: none;
    padding-left: 14px;
    position: relative;
}

#index ul.visitor li a span:before{
	display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    width: 0;
    height: 0;
    margin-top: -5px;
    border: 5px solid transparent;
    border-left: 10px solid #fff;
}


#index ul.visitor li.firstvisit a{
	background:#eb6795;
}

#index ul.visitor li.repeat a{
	background:#aacd06;
}

/* --------------------------------
   □ クリニックのご紹介 医院紹介
-------------------------------- */ 



#about table.pink{
	margin-bottom:0;
}

/* --------------------------------
   □ クリニックのご紹介 食事・エステ
-------------------------------- */ 

#meal .box{
	width:86%;
	margin:auto;
	overflow:hidden;
}

#meal dl{
	float:left;
	margin-right:50px;
}

#meal dl:last-child{
	margin-right:0;
}

#meal dl dd{
	text-align:center;
	margin-top:10px;
}


.explain {
    width: 65%;
    float: left;
}

p.imageright{
	float:right;
	width:35%;
}

p.imageright span{
	display:block;
}

#aesthetic p.image{
	margin-top: 30px;
    display: inline-block;
    width: 100%;
}

/* --------------------------------
   □ クリニックのご紹介 ドクタースタッフ紹介
-------------------------------- */ 

#doctorstaff #doctortab{
	margin-bottom:30px;
}

	#doctorstaff #doctortab ul.doctortabarea li{
		width:25%;
		float:left;
	}
	
	#doctorstaff #doctortab ul.doctortabarea li a{
		display:block;
	}
	
	#doctorstaff #doctortab ul.doctortabarea li p.img{
		display:inline-block;
		margin-right:15px;
	}
	
	#doctorstaff #doctortab ul.doctortabarea li dl{
		font-weight:700;
		width:65%;
		float:right;
		color:#eb6795;
	}
	
	#doctorstaff #doctortab ul.doctortabarea li dl dt{
		font-size:85%;
	}
	
	#doctorstaff #doctortab ul.doctortabarea li dl dd{
		font-size:178%;
	}

#doctorstaff #stafftab{
	background:#ffecec;
	padding:10px 15px;
	box-sizing:border-box;
}

	#doctorstaff #stafftab p.title{
		color:#eb6795;
		font-size:114%;
		display:inline-block;
		float:left;
		margin-bottom:0;
		margin-right: 10px;
	}
	
	#doctorstaff #stafftab ul.stafftabarea li{
		border: 2px solid #eb6795;
		border-radius: 5px;
		background: #fff;
		color: #eb6795;
		font-size: 107%;
		width: 13%;
		margin: 0 7px;
		float: left;
		text-align: center;
	}

	#doctorstaff #stafftab ul.stafftabarea li a{
		display:block;
	}
	

#doctorstaff .division{
	margin-bottom:80px;
}

	#doctorstaff .division p.doctorimg{
		display:inline-block;
		float:left;
		margin-right:20px;
	}
	
	#doctorstaff .division .rightarea{
		width:79%;
		float:right;
		margin-bottom:55px;
	}
	
	#doctorstaff .division table.name{
		margin-bottom:25px;
	}
	
		#doctorstaff .division table.name td{
			color:#eb6795;
			font-weight:700;
		}
		
		#doctorstaff .division table.name td:first-child{
			font-size:121%;
			width:28%;
		}
		
		#doctorstaff .division table.name td:last-child{
			float:right;
			font-size:128%;
		}
		
		#doctorstaff .division table.name td:first-child span{
			font-size:194%;
			display: block;
		}
	
	#doctorstaff .division table.career{
		width:100%;
	}
	
		#doctorstaff .division table.career th,
		#doctorstaff .division table.career td{
			padding: 10px;
			border: 1px solid #ffacac;
		}

		#doctorstaff .division table.career th{
			width: 20%;
		}
		
		#doctorstaff .division table.career tr{
			background:#ffe1e1;
		}
		#doctorstaff .division table.career tr:nth-child(2n){
			background:#fff;
		}

	#doctorstaff .division .area{
		margin-bottom:20px;
		clear:both;
	}
	
		#doctorstaff .division .area ul.t-list li{
			margin-bottom:20px;
			border-left:2px solid #eb6795;
			padding-left:15px;
		}

	#doctorstaff .division#doctor2 .rightarea table.name td{
		display: block;
		width: 100%;	
	}

	#doctorstaff .division#doctor5 p.doctorimg {		
		margin-bottom:55px;
	}

/*
	#doctorstaff #staff ul.imglist li{
		float:left;
		width:auto;
		margin-right:10px;
	}

	#doctorstaff #staff ul.imglist li:last-child{
		margin-right:0;
	}
	
	#doctorstaff #staff ul.column2 li{
	}

	#doctorstaff #staff ul.column3{
		padding: 0 40px;
	}
	
	#doctorstaff #staff ul.column3 li{
		width:32%;
		text-align:center;
	}

	#doctorstaff #staff ul.column4 li{
		width:24%;
		text-align:center;
	}

	#doctorstaff #staff4 ul.imglist{
		width:35%;
		float:right;
	}

	#doctorstaff #staff4 ul.imglist li{
		float:right;
	}
	

	#doctorstaff #staff5 .explain,
	#doctorstaff #staff6 .explain{
		width: 40%;
	}

	#doctorstaff #staff5 ul.imglist,
	#doctorstaff #staff6 ul.imglist{
		float: right;
		width: 55%;
	}

	#doctorstaff #staff5 ul.imglist li,
	#doctorstaff #staff6 ul.imglist li{
	}
*/

#doctorstaff #staff .division {
    margin-bottom: 40px;
}
#doctorstaff #staff ul.imglist {
    display: none;
}
#doctorstaff #staff .explain,
#doctorstaff #staff5 .explain,
#doctorstaff #staff6 .explain {
    width: auto;
    float: none;
}

/* --------------------------------
   □ introduceFacility
-------------------------------- */ 

#introduceFacility .visual{
	margin-bottom:55px;
}


/* ◇ gallary
-------------------------------- */	
#introduceFacility .gallery{
	position:relative;
	margin-bottom:30px;
}
#introduceFacility .gallery:last-child{
	margin-bottom:0px;
}

#introduceFacility .gallery h4{
	margin-bottom:30px;
}


#introduceFacility ul.galleryList{
	margin-left:-2.1%;
}
	
	#introduceFacility ul.galleryList li{
		float:left;
		width:14.5%;
		margin-left:2.1%;
		margin-bottom:2%;
		line-height:1.2;
		font-size:92%;
	}
	
	#introduceFacility ul.galleryList li img{
		margin-bottom:4px;
		width:100%;
	}

#introduceFacility .gallery p.buttonStyle{
	position:absolute;
	top:0;
	right:0;
}

#introduceFacility .gallery p.buttonStyle a{
	padding:5px 40px;
}


/* --------------------------------
   □ introduceFacilityDetail
-------------------------------- */ 

#introduceFacilityDetail .contents{
	padding:20px;
}

#introduceFacilityDetail .contents #slide{
	position:relative;
	margin-bottom:40px;
}

#introduceFacilityDetail .contents ul#list{
	position:relative;
}

#introduceFacilityDetail .contents ul#list li{
	position:absolute;
	top:0;
	left:0;
}

#introduceFacilityDetail .contents #slide #navi{
	position:absolute;
	bottom:-30px;
	text-align:center;
	width:100%;
}
#introduceFacilityDetail .contents #slide #navi li{
	display:inline-block;
	margin:0 0.5em;
}
#introduceFacilityDetail .contents #slide #navi li a.current{
	color:#F5B9C4;
}

#introduceFacilityDetail .contents h3{
	text-align:left;
	margin-bottom:10px;
	font-size:110%;
	background-position:0 100%;
}


@media only screen and
(max-width : 767px) {
	
/* --------------------------------
   □ 
-------------------------------- */ 


/* --------------------------------
   □ 共通部分
-------------------------------- */ 

.subsection{
	margin-bottom:45px;
}

.subsection .explain{
	width:auto;
	float:none;
}

    /* --------------------------------
       □ クリニックのご紹介トップ
    -------------------------------- */ 
    #index ul.menu li{
        width:auto;
        float:none;
        margin-right:0;
        margin-bottom:10%;
    }
    #index ul.menu li p.image{
        margin-bottom:5%;
    }
    #index ul.menu li dl dt{
        font-size:140%;
    }
    #index ul.menu li dl dd{
        font-size:114%;
        width: 80%;
        margin: 0 auto;
    }
	
    /* --------------------------------
       □ クリニックのご紹介　医師紹介
    -------------------------------- */ 

#doctorstaff #doctortab ul.doctortabarea li {
    width: 50%;
	margin-bottom: 10px;
}

#doctorstaff #doctortab ul.doctortabarea li:nth-child(3){
	clear:both;
}

#doctorstaff #doctortab ul.doctortabarea li p.img {
	display: block;
    text-align: center;
}

#doctorstaff #doctortab ul.doctortabarea li dl {
	width: 100%;
    font-size: 83%;
    text-align: center;
}

#doctorstaff #doctortab ul.doctortabarea li dl dd {
    font-size: 150%;
}

#doctorstaff #stafftab p.title {
    display: block;
    float: none;
    margin-bottom: 10px;
    margin-right: 0;
}

#doctorstaff #stafftab ul.stafftabarea li {
	width: 43%;
    margin-bottom: 10px;
}


#doctorstaff .division p.doctorimg {
    display: block;
    float: none;
    margin-right: 0;
    text-align: center;
    margin-bottom: 25px;
}
    
    #doctorstaff .division#doctor5 p.doctorimg {		
		margin-bottom:25px;
	}
	
#doctorstaff .division table.name td:first-child span {
    font-size: 131%;
}

#doctorstaff .division .rightarea {
    width: auto;
    float: none;
    margin-bottom: 30px;
}

#doctorstaff .division table.name td {
	display:block;
	font-size:115%;
}

#doctorstaff .division table.name td:first-child {
    font-size: 121%;
    width:auto;
}

#doctorstaff .division table.career th{
    width: 35%;
}
    
    #doctorstaff .division#doctor1 table.career th{
        width: 40%;
    }    

#doctorstaff #doctor .division:last-of-type {
    margin-bottom: 40px;
}
#doctorstaff #staff .division {
    margin-bottom: 20px;
}
    #doctorstaff #staff .division:last-of-type {
        margin-bottom: 0;
    }

/*
#doctorstaff #staff ul.column1{
	width:auto;
	float:none;
}

#doctorstaff #staff ul.column1 li{
	float:none;
	text-align:center;
}


#doctorstaff #staff ul.column3 {
    padding: 0 ;
}

#doctorstaff #staff ul.column3 li{
	width: 32%;
    margin-right: 2%;
}

#doctorstaff #staff ul.column3 li:last-child{
	margin-right:0;
}

#doctorstaff #staff ul.column4 li {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 10px;
    text-align: center;
}

#doctorstaff #staff ul.column4 li:nth-child(2n){
	margin-right:0;
}

#doctorstaff #staff5 .explain, 
#doctorstaff #staff6 .explain {
    width: auto;
}

#doctorstaff #staff5 ul.imglist, 
#doctorstaff #staff6 ul.imglist {
    float: none;
    width: auto;
}

#doctorstaff #staff5 ul.imglist li, 
#doctorstaff #staff6 ul.imglist li {
    width: 49%;
    margin-right: 2%;
}
*/

/* --------------------------------
   □ introduceFacility
-------------------------------- */ 

#introduceFacility .visual{
	margin-bottom:5%;
}


/* ◇ gallary
-------------------------------- */	
#introduceFacility .gallery{
	margin-bottom:3%;
}
#introduceFacility .gallery:last-child{
	margin-bottom:0px;
}

#introduceFacility ul.galleryList{
	margin-left:-2%;
}
	
	#introduceFacility ul.galleryList li{
		float:left;
		width:48%;
		margin-left:2%;
	}
	

#introduceFacility .gallery p.buttonStyle a{
	padding:5px 10px;
}

/* --------------------------------
   □ introduceFacilityDetail
-------------------------------- */ 
#introduceFacilityDetail header,
#introduceFacilityDetail footer{
	display:none;
}

/* --------------------------------
   □ 食事・エステ
-------------------------------- */ 

#meal .box {
    width:auto;
    margin: auto;
    overflow: hidden;
}

#meal dl {
    float: none;
    margin-right: 0;
	margin-bottom: 25px;
}

p.imageright {
    float: none;
    width:auto;
}

p.imageright img{
	display:block;
	margin: auto;
}




}