@charset "UTF-8";

/*=================================
    チューンリフティング
    クリニック一覧
    250502
=================================*/
body.list{
  background:url(../img/list_bg.jpg) no-repeat center center;
  background-size:cover;
  background-attachment: fixed;
}
body.list #contact{
  padding:0 !important;
}

/*
body.list header .sc-header{
  padding-right:290px;
}
*/
@media only screen and (max-width: 767px){
  body.list{
    background:url(../img/list_bg.jpg) no-repeat left center;
    background-size:cover;
    background-attachment: fixed;
  }
  /*
  body.list header .sc-header{
    padding-right:290px;
  }
  body.list .list-btn{
    width:8em;
    padding:6px 10px;
    right:clamp(5px, 1.19vw, 16px);
      width: fit-content;
  }
  */
}
@media only screen and (max-width: 767px){
  /*
  body.list .list-btn{
    width:11em;
  }
  */
}
@media only screen and (max-width: 700px){
  /*
  body.list header .sc-header{
    padding-right:180px;
    min-height: 5em;
  }
  body.list .list-btn{
    width:8em;
  }
  */
}


#clinic-list .inner{
  max-width: 100%;
  width: min(89.35vw, 1200px);
  margin: 0 auto;
  padding: clamp(40px , 5.96vw, 80px) 0;
  position: relative;
}
#clinic-list .inner h3{
	font-size:clamp(23px, 2.38vw , 32px);
  font-weight:500;
  display:inline-block;
  position:relative;
  margin:0 auto clamp(80px , 8.94vw, 120px);
}
#clinic-list .inner ,txtC{
  font-size:clamp(15px, 1.19vw  ,16px);
}

#clinic-list .inner h3::before{
  content:"";
  position: absolute;
  width:calc(100% + min(14.89vw, 200px));
  max-width:96vw;
  height:clamp(30px , 3.72vw , 50px);
  bottom: calc(-1 * clamp(40px , 4.47vw , 60px));
  left: 50%;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
  background:url(../img/title_bg.png) no-repeat center center;
  background-size:100% clamp(30px , 3.72vw , 50px);
}
#clinic-list .inner h3 span.tit-e{
  font-family: "Lato", serif;
	font-size:clamp(19px, 1.79vw , 24px);
  font-weight:400;
  color:#8778B8;
}
#clinic-list nav ul{
  display: flex;
  flex-wrap: wrap;
  gap:clamp(10px , 1.49vw , 20px);
  margin: clamp(40px , 4.47vw , 60px) auto 0;
}
#clinic-list nav ul li{
  width:calc(calc(100% - calc(clamp(10px , 1.49vw , 20px) * 3)) / 4);
  height:70px;
  border:1px solid #fff;
  box-sizing:border-box;
}
#clinic-list nav ul li:hover{
  opacity:.8;
}
#clinic-list nav ul li a{
  color:#fff;
  display:block;
  width:100%;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration:none;
  flex-wrap: wrap;
	font-size:clamp(16px, 1.34vw , 18px);
  line-height:1.4;
}
#clinic-list nav ul li a .small{
	font-size:clamp(13px, 1.04vw , 14px);
}

#clinic-list .inner h4{
  font-size: clamp(21px, 2.08vw, 28px);
  font-weight: 500;
  padding:clamp(45px , 5.96vw, 80px) 0 0;
}
#clinic-list .inner h4 .small{
  font-size:0.8em;
}

#clinic-list .clinic{
  background:rgba(255,255,255,.1);
  margin:clamp(20px , 2.23vw, 30px) auto 0;
  padding: clamp(20px , 2.23vw, 30px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:clamp(30px , 2.98vw, 40px);
}
#clinic-list .clinic .txt{
  text-align:justify;
  width:calc(100% - clamp(30px , 2.98vw, 40px) - clamp(332px, 35.7%, 400px));
}
#clinic-list .clinic .txt h5{
	font-size:clamp(19px, 1.79vw , 24px);
  font-weight:500;
  line-height: 1.6;
}
#clinic-list .clinic.on .txt h5::after{
  content:"";
  height:1.58em;
  width:1.58em;
  background:url(../img/ico_tl.svg) no-repeat center center;
  background-size:cover;
  display: inline-block;
  vertical-align: bottom;
  margin-left:10px;
}
#clinic-list .clinic .txt .add{
  margin:clamp(5px, 0.74vw , 10px) 0 clamp(10px, 1.49vw , 20px);
  line-height: 1.6;
}
#clinic-list .clinic .txt .data{
  display: flex;
}
#clinic-list .clinic .txt .data a{
  color:#fff;
  text-decoration:none;
}
#clinic-list .clinic .txt .data .tel::before{
  content: "";
  display: inline-block;
  height:0.88em;
  width:0.88em;
  background:url('../img/ico_tel.svg') no-repeat center center;
  background-size:cover;
  margin-right:0.4em;
  vertical-align: middle;
}
#clinic-list .clinic .txt .data .site{
  margin-left:1em;
}
#clinic-list .clinic .txt .data .site a{
  border:1px solid #999;
  padding:0 0.5em;
  display:inline-block;
  padding:0 0.5em;
}
#clinic-list .clinic .txt .data .site a:hover{
  opacity:.8;
}
#clinic-list .clinic .txt .data .site a::after{
  content: "";
  display: inline-block;
  height:0.88em;
  width:0.88em;
  background:url('../img/ico_blank.svg') no-repeat center center;
  background-size:cover;
  margin-left:0.4em;
}
#clinic-list .clinic .check{
  width:clamp(332px, 35.7%, 400px);
}
#clinic-list .clinic .check .check-list{
  background:rgba(0,0,0,.3);
  padding:clamp(10px, 1.12vw , 15px);
  display: flex;
  align-items: flex-start;
  gap:clamp(10px, 1.12vw , 15px);
}
#clinic-list .clinic .check .check-list +  .check-list{
  margin:5px 0 0;
}
#clinic-list .clinic .check .check-list p{
	font-size:clamp(13px, 1.04vw , 14px);
  white-space:nowrap;
}
#clinic-list .clinic .check .check-list ul{
  display: flex;
  flex-wrap: wrap;
  gap:5px;
}
#clinic-list .clinic .check .check-list ul li{
	font-size:clamp(13px, 1.19vw  ,16px);
  background:rgba(255,255,255,.1);
  padding:1px 0.8em;
  color:#000;
  font-weight:500;
  color:rgba(0,0,0,.3);
}
#clinic-list .clinic .check .check-list ul li.on{
  background:rgba(255,255,255,1);
  color:#000;
}
#clinic-list .clinic .check .check-list.treatment ul li:nth-of-type(1).on{
  background: linear-gradient(to right,#c7a241 0%, #ffffd1 48.77%, #c7a241 100%);
}
#clinic-list .clinic .check .check-list.model ul li:nth-of-type(1).on{
  background: #5841A2;
  color:#fff;
}

@media only screen and (min-width: 768px){
  #clinic-list .clinic .txt .data .tel a{
    pointer-events: none
  }
}

@media only screen and (max-width: 767px){
  #clinic-list .clinic{
    flex-wrap: wrap;
    gap:20px;
  }
  #clinic-list .clinic .txt,
  #clinic-list .clinic .check{
    width:100%;
  }
}
@media only screen and (max-width: 600px){
  #clinic-list nav ul li{
    width:calc(calc(100% - calc(clamp(10px , 1.49vw , 20px) * 2)) / 3);
    height:54px;
  }
  #clinic-list nav ul li:nth-last-child(-n+2){
    width:calc(calc(100% - calc(clamp(10px , 1.49vw , 20px) * 1)) / 2);
  }
}
@media only screen and (max-width: 420px){
  #clinic-list .clinic .check .check-list{
    display:block;
  }
  #clinic-list .clinic .check .check-list p{
    text-align: justify;
    line-height: 1;
    margin-bottom: 0.5em;
  }
}