@charset "utf-8";
/* service ------------------------------*/

/*margin- bottom*/
.projectList, .facilitiesList, .block, .btnArea02{
  margin-bottom:min(160px, 8.33vw);
}
.serviceConList, .facilityTitle{
margin-bottom: min(130px, 6.77vw);
}
.facilities .refine, .detailTxt, .detailPicture, .snsLink, .yelArea li dt{
  margin-bottom:min(80px, 4.16vw);
}
.snsLink h3{
  margin-bottom:min(40px, 2.08vw);
}


/*font-size*/
.projectList li .text02, .facilities .refine select, .facilities .refine .refineBtn, .serviceConList li, .yelArea li dt span{
   font-size:clamp(1rem, 0.9375vw, 1.8rem);
}
.subTit02 span, .facilityTitle h2 span{
 font-size:clamp(1.2rem, 1.04166vw, 2rem);
}
.projectList li h3{
  font-size:clamp(1.4rem, 1.25vw, 2.4rem);
}
.yelArea li dt{
 font-size:clamp(1.4rem, 2.5vw, 4.8rem);
}

.facilityTitle h2{
  font-size:clamp(2.5rem, 3.125vw, 6rem);
}


/* index ------------------------------*/

.projectList {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.projectList li{
  width: 33%;
  border-left: 1px solid #D9D9D9;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1.5em;
  box-sizing: border-box;
}
.projectList li:nth-child(3n), 
.projectList li:last-child{
  border-right: 1px solid #D9D9D9;
}
.projectList li:nth-last-child(-n + 3){
  border-bottom: 1px solid #D9D9D9;
}


.projectList li h3{
  text-align: center;
  margin-bottom: min(1.875vw, 36px);
  display: flex;
  justify-content: center;
  font-weight: 700;
}

.projectList li img {
  margin-bottom: 1.5em;
}
.projectList li:first-child{
  background: url("/img/service/project01_bg.png") no-repeat left top;
  background-size: 60% auto;
  border-top: 1px solid #ED4F37;
}

.projectList li:nth-child(2){
  background: url("/img/service/project02_bg.png") no-repeat left top;
  background-size: 60% auto;
  border-top: 1px solid #F6893E;
}

.projectList li:nth-child(3){
  background: url("/img/service/project03_bg.png") no-repeat left top;
  background-size: 60% auto;
  border-top: 1px solid #8C519C;
}

.projectList li:nth-child(4){
  background: url("/img/service/project04_bg.png") no-repeat left top;
  background-size: 60% auto;
  border-top: 1px solid #EF66A0;
}

.projectList li:nth-child(5){
  background: url("/img/service/project05_bg.png") no-repeat left top;
  background-size: 60% auto;
  border-top: 1px solid #16B8F0;
}

.projectList li:nth-child(6){
  background: url("/img/service/project06_bg.png") no-repeat left top;
  background-size: 60% auto;
  border-top: 1px solid #7EBF47;
}

.projectList li:nth-child(7){
  background: url("/img/service/project07_bg.png") no-repeat left top;
  background-size: 60% auto;
  border-top: 1px solid #00ACA0;
}

.projectList li:nth-child(8){
  background: url("/img/service/project08_bg.png") no-repeat left top;
  background-size: 60% auto;
  border-top: 1px solid #296BB4;
}
.projectList li h3::before{
  content: "";
  width: 1em;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin-right: 0.2em;
}
.projectList li:first-child h3::before{
  background:#ED4F37;
}
.projectList li:nth-child(2) h3::before{
  background:#F6893E;
}
.projectList li:nth-child(3) h3::before{
  background:#8C519C;
}

.projectList li:nth-child(4) h3::before{
  background:#EF66A0;
}
.projectList li:nth-child(5) h3::before{
  background:#16B8F0;
}
.projectList li:nth-child(6) h3::before{
  background:#7EBF47;
}
.projectList li:nth-child(7) h3::before{
  background:#00ACA0;
}
.projectList li:nth-child(8) h3::before{
  background:#296BB4;
}

.projectList li .text01{
  line-height: 1.8;
  padding-bottom: 1.5em;
  flex-grow: 1;
  text-align: justify;
}

.projectList li .text02{
  line-height: 1.8;
  padding-bottom: 1.5em;
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  height: 3em;
  text-align: justify;
}

.yelArea{
  background: url("/img/service/art_bg.png") no-repeat center center;
  background-size: cover;
  width: 100%;
  aspect-ratio:3.48 / 1 ;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.yelArea li a{
  color: #fff;
  text-decoration: none;
  width: 100%;
  aspect-ratio: 3.45 / 1;
  box-sizing: border-box;
  display: block;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}



.yelArea li dt span{
  font-family: "Manrope", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  display: block;
  padding-top: 1em;
}

.yelArea li a::after{
  content: "";
  display: flex;
  width: min(14.88%, 200px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  -webkit-filter: brightness(130%);
  filter: brightness(130%);
  background: url("/img/common/icon_blank.svg") no-repeat center center;
  background-size: 1em;
  justify-content: center;
  align-items: center;
  transition: all .3s ease-out;
}


.grNav.sodan{
  grid-template-columns: repeat(auto-fit, 45%);
}
.grNav li a{
  background: #C6A700;
}
.grNav li a::after {
  background: url("/img/common/arrow_wh_yel.svg") no-repeat center center;
  background-size: contain;
}

.news .newsList li a::after{
  background: url("/img/common/arrow_yel.svg") no-repeat center center;
  background-size: contain;
}

.areaMap img{
  box-shadow: 0.5em 0.5em 0px 0px #C6A700;
}

.contactArea{
  padding: min(6.77vw, 130px) 0;
}
.areaMap{
  border-bottom: 1px solid #C6A700;
  background:  url("/img/common/areamap.png") no-repeat center center;
  background-size: cover;

}
.hl48::after{
  background: #C6A700;
}

.subTit02::before{
  content: "";
  background:#C6A700 ;

}

.subTit02{
  display: flex;
  justify-content: space-between;
}
.subTit02 span{
 font-weight: 400;
}

/* list-----------------------*/

.facilities .refine{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.facilities .refine select{
  width: 25%;
  aspect-ratio: 5 / 1;
  text-align: center;
  border: 1px solid #9F9F9F;
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
}
.facilities .refine select.region{
  margin: 0 1em;
}

.facilities .refine .refineBtn{
  background:url("/img/common/icon_search.svg") no-repeat 85% center #C6A700 ;
  background-size: 7% auto;
  color: #fff;
  width: 20%;
  border: none;
  border-radius: 9999px;
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
}

.serviceConList{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.serviceConList li{
  position: relative;
  display: flex;
  justify-content:flex-start;
  align-items: center;
  margin-bottom: 1em;
}
.serviceConList li::before{
  content: "";
  width: 1em;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin-right: 0.3em;
}


.serviceConList li.sreviceCon01::before{background: #ED4F37;}
.serviceConList li.sreviceCon02::before{background: #F6893E;}
.serviceConList li.sreviceCon03::before{background: #8C519C;}
.serviceConList li.sreviceCon04::before{background: #EF66A0;}
.serviceConList li.sreviceCon05::before{background: #16B8F0;}
.serviceConList li.sreviceCon06::before{background: #7EBF47;}
.serviceConList li.sreviceCon07::before{background: #00ACA1;}
.serviceConList li.sreviceCon08::before{background: #296BB4;}




.facilitiesList li a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  border-bottom: 1px solid #D9D9D9;
  padding: min(1.8229vw , 35px) 0;
  background: url("/img/common/arrow_yel.svg") no-repeat right center;
  background-size: auto 35%;
}
.sc01{color:#ED4F37;}/*障害医療治療*/
.sc02{color:#F6893E;}/*知的障害福祉*/
.sc03{color:#8C519C;}/*身体障害福祉*/
.sc04{color:#EF66A0;}/*高齢者福祉*/
.sc05{color:#16B8F0;}/*児童福祉*/
.sc06{color:#7EBF47;}/*地域医療*/
.sc07{color:#00ACA1;}/*相談支援*/
.sc08{color:#296BB4;}/*研修・研究・その他*/


.facilitiesList li a h3{
  width: 92%;
}


/* detail-----------------------*/

.facilityTitle{
  aspect-ratio:2.4 / 1 ;
  margin-top: min(130px, 6.77vw);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.facilityTitle figure{
  position: absolute;
  width: 100%;
  height: 100%;
}
.facilityTitle figure img{
  width: 100%;
  aspect-ratio:2.4 / 1 ;
  object-fit: cover;
}

.facilityTitle div{
  position: absolute;
  background:rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2em 4em;
  box-sizing: border-box;
  max-width: 90%;
}

.facilityTitle h2{
  font-weight: 700;
  line-height: 1.6;
}
.facilityTitle h2 span{
  font-weight: 400;
  display: block;
}
.facilityTitle .serviceConList{
  margin:1em 0 0;
}

.facilityTitle .pnkz{
  position: absolute;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 2em 5em 2em 4em;
}


.detailTxt{
  line-height: 2.0;
  text-align: justify;
}

.detailTxt b, .detailTxt strong{
  font-weight: 900;
}

.detailTxt i, .detailTxt em{
  font-style: italic;
}
.detailTxt s, .detailTxt del{
  text-decoration: line-through;
}


.gmap{
  width: 100%;
  aspect-ratio:16 / 7 ;
}

.snsLink h3{
  color: #35801D;
  font-weight: 700;
  font-size:clamp(1.6rem, 1.6666vw, 3.2rem);
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
}
.snsLink h3::before, .snsLink h3::after{
  content: "";
  background: #35801D;
  width: 3px;
  aspect-ratio: 1 / 10;
  border-radius: 2px;
}
.snsLink h3::before{
    transform: rotate(-30deg);
    margin-right: 1em;
}
.snsLink h3::after{
    transform: rotate(30deg);
    margin-left: 1em;
}

.snsLink ul{
  background:#F8F4F2 ;
  display:flex ;
  padding: 1em;
  justify-content: space-around;
  flex-wrap: wrap;
}
.snsLink ul li{
  margin: 0.5em;
}
.snsLink ul a{
  text-decoration: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.snsLink ul a::after{
  content: "";
  background: url("/img/common/icon_blank_yel.svg") no-repeat center center;
  background-size: contain;
  width: 1.5em;
  aspect-ratio: 1 / 1;
  margin-left: 0.8em;
}

.btnArea02 .btnBack a{
  background:#C6A700 ;
}
.btnArea02 .btnBack a::before{
   background: url("/img/common/arrow_wh_yel.svg") no-repeat left center #C6A700;
  background-size: auto 37.5%;
}


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

/*margin- bottom*/
.projectList, .facilitiesList, .block, .btnArea02{
  margin-bottom:5rem;
}
.serviceConList, .facilityTitle{
margin-bottom:4rem ;
}
.facilities .refine, .detailTxt, .detailPicture, .snsLink, .yelArea li dt, .yelArea{
  margin-bottom:3.5rem;
}
.snsLink h3{
  margin-bottom:2rem;
}


/*font-size*/
.projectList li .text02, .facilities .refine select, .facilities .refine .refineBtn, .serviceConList li, .yelArea li dt span{
   font-size:1.26rem;
}
.subTit02 span, .facilityTitle h2 span{
font-size:1.4rem;
}
.projectList li h3{
  font-size:1.68rem;
}
.facilityTitle h2{
  font-size:2.8rem;
}
.yelArea li dt{
 font-size:2.4rem;
}




  .projectList li{
    width: 100%;
    border-right: 1px solid #D9D9D9;
  }
  .areaMap{
    background-image: url("/img/common/areamap.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    aspect-ratio: 1 / 1.9;
    margin-bottom: 0;
  }

  .areaMap img{
    box-shadow: 0.1em 0.1em 0px 0px #C6A700;
  }

  .areaMap figure{
    margin-top: 6em;
  }

  .yelArea{
    aspect-ratio: 1 / 1;
  }
  .yelArea li{
    padding: 2em 1em;
  }
   .yelArea li a{
    flex-direction: column;
   }
  .yelArea li dl{
    width: 100%;
    padding-bottom: 1em;
  }
  .yelArea li dt{
   margin-bottom: 1em;
   line-height: 1.6;
 }
 .yelArea li dd{
  line-height: 2.0;
}
.subTit02{
  align-items: center;
}
.subTit02 span{
  width: 50%;
  text-align: right;
}

/* list-----------------------*/

.facilities .refine select{
  width: 45%;
  aspect-ratio: 3.5 / 1;
}
.facilities .refine select.region{
  margin: 0 0 0 5%;
}
.facilities .refine .refineBtn{
  width: 50%;
  margin-top: 1em;
  padding: 1.5em;
}


.facilitiesList{
 margin-bottom:8rem;
}
.facilitiesList li a{
  padding: 1.3em 0;
  background: url("/img/common/arrow_yel.svg") no-repeat right center;
  background-size: 7% auto;
}

.facilitiesList li a h3{
  padding-right: 10%;
  line-height: 1.6;
}

/* detail-----------------------*/


.facilityTitle{
  aspect-ratio:1 / 1.2 ;
}
.facilityTitle h2{
  text-align: center;
}
.facilityTitle figure img{
  aspect-ratio:1 / 1.2 ;
}
.facilityTitle div{
  width: 95%;
  top: 1em;
  bottom: unset;
  padding: 2em;
  box-sizing: border-box;
}
.gmap{
  width: 100%;
  aspect-ratio:1 / 1.5 ;
}

.snsLink ul{
flex-direction: column;
align-items: flex-start;
}

.snsLink ul li{
  width: 100%;
  border-bottom: 1px solid #D9D9D9;
}
.snsLink ul li a{
  padding: 1em 0;
  width: 100%;
}
.btnArea02 .btnBack a::before{
   background: url("/img/common/arrow_wh_yel.svg") no-repeat left center #C6A700;
  background-size: auto 100%;
}
}
/*SPここまで---------------------------------------------*/

/******* メディアクエリ での制御 *******/
/* :hoverが使える端末を想定 */
@media (hover: hover) {
  .yelArea li a:hover::after{
  filter: brightness(150%);
  scale: 1.1;
} 
.news .newsList li a:hover {
  border-bottom: 1px solid #C6A700;
}
.facilities .refine .refineBtn:hover{
  cursor: pointer;
}
.facilitiesList li a:hover{
  scale: 1.02;
  border-bottom:1px solid #C6A700;
}
.snsLink ul a:hover{
  color:#C6A700;
  scale: 1.1;
}

}