@charset "utf-8";
/* ----------------------------------------
 main
------------------------------------------- */
#main{
width: 100%;
max-width: 1600px;
height: 873px;
background: url("../images/index-images/main01.jpg") 0 0 no-repeat;
margin: 0 auto 60px auto;
}
#main h2{
width: 816px;
margin: 0 auto;
padding-top: 400px;
}
/* ----------------------------------------
 info
------------------------------------------- */
#info .float-l{
width: 60%;
margin-left: 80px;
padding-top: 20px;
}
#info .float-r{
width:31%;
padding-top: 20px;
}
#info ul li:nth-child(1){background: url("../images/index-images/map-icon01.png") 0 50% no-repeat;background-size: 37px auto;}
#info ul li:nth-child(2){background: url("../images/index-images/map-icon02.png") 0 50% no-repeat;background-size: 37px auto;}
#info ul li:nth-child(3){background: url("../images/index-images/map-icon03.png") 0 50% no-repeat;background-size: 37px auto;}
#info ul li:nth-child(4){background: url("../images/index-images/map-icon05.png") 0 50% no-repeat;background-size: 37px auto;}
#info ul li:nth-child(5){background: url("../images/index-images/map-icon04.png") 0 50% no-repeat;background-size: 37px auto;}
#info ul li:nth-child(6){background: url("../images/index-images/map-icon07.png") 0 50% no-repeat;background-size: 37px auto;}
#info ul li:nth-child(7){background: url("../images/index-images/map-icon08.png") 0 50% no-repeat;background-size: 37px auto;}
#info ul li:nth-child(8){background: url("../images/index-images/map-icon09.png") 0 50% no-repeat;background-size: 37px auto;}
#info ul li:nth-child(9){background: url("../images/index-images/map-icon06.png") 0 50% no-repeat;background-size: 37px auto;}
#info ul li:nth-child(10){background: url("../images/index-images/map-icon11.png") 0 50% no-repeat;background-size: 37px auto;}
#info ul li:nth-child(11){background: url("../images/index-images/map-icon12.png") 0 50% no-repeat;background-size: 37px auto;}
#info ul li:nth-child(12){background: url("../images/index-images/map-icon13.png") 0 50% no-repeat;background-size: 37px auto;}
#info ul li:nth-child(13){background: url("../images/index-images/map-icon10.png") 0 50% no-repeat;background-size: 37px auto;}
#info ul li{
min-height: 55px;
cursor: pointer;
padding-left: 50px;
margin-bottom: 10px;
}
#info ul li a{
text-decoration: none;
}
#info ul li h3{
font-size: 1.6rem;
}
/* ----------------------------------------
clinic
------------------------------------------- */
#clinic ul{
overflow: hidden;
}
#clinic ul li{
float: left;
width: 25%;
box-sizing: border-box;
border-right: 1px solid #e1e1e1;
text-align: center;
}
#clinic ul li:nth-child(4n){
border-right: none;
}
#clinic ul li img{
margin-bottom: 30px;
}
#clinic ul li h3{
font-size: 2.2rem;
margin-bottom: 30px;
transition: 0.3s;
}
#clinic ul li p{
color: #006bb6;
font-size: 1.4rem;
margin-bottom: 30px;
transition: 0.3s;
}
#clinic ul li i{
color: #d2d2d2;
font-size: 1.8rem;
margin-bottom: 30px;
transition: 0.3s;
}
#clinic ul li a{
display: block;
position: relative;
transition: 0.7s;
}
#clinic ul li a:hover{
text-decoration: none;
}
#clinic ul li a:hover h3,#clinic ul li a:hover p,#clinic ul li a:hover i{
color: #fff;
}

#clinic ul li a::after {
  position: absolute;
  content: '';
  bottom: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transition: all 0.7s ease 0s;
  z-index: -1;
}
#clinic ul li a:hover::after {
  width: 100%;
  height: 100%;
    bottom: 0;
  left: 0;
}
#clinic ul li:nth-child(1) a::after {background-color: #34a6eb;}
#clinic ul li:nth-child(2) a::after {background-color: #8ac60f;}
#clinic ul li:nth-child(3) a::after {background-color: #f4af41;}
#clinic ul li:nth-child(5) a::after {background-color: #a279c1;}
#clinic ul li:nth-child(4) a::after {background-color: #f392aa;}
#clinic ul li:nth-child(9) a::after {background-color: #d8b05b;}
#clinic ul li:nth-child(6) a::after {background-color: #35bec6;}
#clinic ul li:nth-child(7) a::after {background-color: #e86f8c;}
#clinic ul li:nth-child(8) a::after {background-color: #67ad63;}
#clinic ul li:nth-child(13) a::after {background-color: #6788cb;}
#clinic ul li:nth-child(10) a::after {background-color: #953cd8;}
#clinic ul li:nth-child(11) a::after {background-color: #fabbd6;}
#clinic ul li:nth-child(12) a::after {background-color: #00bded;}
/* ----------------------------------------
 recruit
------------------------------------------- */
#recruit .float-l{
width: 50%;
}
#recruit .float-r{
width: 50%;
}
/* ----------------------------------------
con-box
------------------------------------------- */
#con-box ul{
overflow: hidden;
display:flex;
justify-content:center;
}
#con-box ul li{
float: left;
width: 33%;
box-sizing: border-box;
border-right: 1px solid #e1e1e1;
text-align: center;
}
#con-box ul li:nth-child(3n){
border-right: none;
}
#con-box ul li:nth-child(2n){
border-right: none;
}
#con-box ul li img{
width: 100%;
max-width: 135px;
margin-bottom: 25px;
}
#con-box ul li p{
color: #ababab;
font-size: 1.4rem;
}
#con-box ul li h3{
color: #71afdb;
font-size: 1.8rem;
}
/* =======================
  PC
======================== */
@media screen and (min-width: 1200px) {
}
/* =======================
  TABLET
======================== */
@media screen and (max-width:1199px) {
#main h2{
width: 80%;
margin: 0 auto 60px auto;
padding-top: 400px;
}
/* ----------------------------------------
 info
------------------------------------------- */
#info .float-l{
width: 60%;
margin-left: 0;
}
#info .float-r{
width: 38%;
padding-top: 0;
}

}
/* =======================
  SP
======================== */
@media screen and (max-width: 699px) {
#main{
width: 100%;
height: 400px;
background-size: cover;
margin: 0 auto 30px auto;
}
#main h2{
width: 300px;
margin: 0 auto;
padding-top: 180px;
}
/* ----------------------------------------
 info
------------------------------------------- */
#info .cmn-box02{
padding-bottom: 0;
}
#info .float-l{
float: none;
width: 100%;
margin-left: 0;
}
#info .float-r{
float: none;
width: 100%;
padding-top: 15px;
}
#info ul li{
min-height: 55px;
padding-left: 50px;
margin-bottom: 10px;
}
#info ul li h3{
font-size: 1.6rem;
}
/* ----------------------------------------
clinic
------------------------------------------- */
#clinic ul{
overflow: hidden;
}
#clinic ul li{
float: left;
width: 50%;
}
#clinic ul li:nth-child(4n){
border-right: none;
}
#clinic ul li:nth-child(2n){
border-right: none;
}
#clinic ul li img{
margin-bottom: 15px;
}
#clinic ul li h3{
font-size: 1.5rem;
margin-bottom: 15px;
padding: 0 10px;
}
#clinic ul li p{
font-size: 1.2rem;
margin-bottom: 15px;
padding: 0 10px;
}
#clinic ul li i{
font-size: 1.6rem;
margin-bottom: 30px;
}
/* ----------------------------------------
 recruit
------------------------------------------- */
#recruit .float-l{
width: 100%;
}
#recruit .float-r{
width: 100%;
}
/* ----------------------------------------
con-box
------------------------------------------- */
#con-box ul{
overflow: hidden;
display:contents;
}
#con-box ul li{
float: none;
width: 100%;
border-right: none;
}
#con-box ul li a{
display: block;
padding: 15px 0;
}
#con-box ul li:nth-child(1){
border-bottom: 1px solid #e1e1e1;
}
/*
#con-box ul li:nth-child(2){
border-bottom: 1px solid #e1e1e1;
}
*/
#con-box ul li img{
width: 50%;
max-width: 135px;
margin-bottom: 15px;
}
#con-box ul li p{
font-size: 1.2rem;
}
#con-box ul li h3{
font-size: 1.6rem;
}

}