@charset "utf-8";
/* CSS Document */

/*---------------
 コーディネート
-----------------*/
.coordinateSlider{
 position: relative;
 padding-bottom: 90px;
}
.coordinateSlider .sliderLi{ text-align: center;}
.coordinateSlider .sliderLi a{ outline: none;}
.coordinateSlider .sliderLi .img{
 position: relative;
 width: 225px;
 height: 186px;
 display: inline-block;
}
.coordinateSlider .sliderLi .img img{
 width: 100%;
 height: auto;
 position: relative;
 z-index: 1;
 margin-top: 48px;
 transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.8);
 filter: drop-shadow(0px 3px 4px rgba(0,0,0,0.2));
 transform: translateZ(0);/*safariがたつき解消*/
}
.coordinateSlider .sliderLi a:hover .img img{ transform: scale(1.09) rotate(0.01deg) translateZ(0);}
.coordinateSlider .sliderLi .img p{
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 font-size: 1.2rem;
 line-height: 1.5rem;
 color: #fff;
 width: 76px;
 height: 76px;
 border-radius: 50%;
 position: absolute;
 top: 0;
 right: 0;
}
.coordinateSlider .hospital .img p{ background-color: #3467cd;}
.coordinateSlider .senior .img p{ background-color: #d9941d;}
.coordinateSlider .industrial .img p{ background-color: #60b432;}
.coordinateSlider .restaurant .img p{ background-color: #de6641;}
.coordinateSlider .buffet .img p{ background-color: #6455c2;}
.coordinateSlider .kids .img p{ background-color: #d44370;}

.coordinateSlider .sliderLi .catch{
 padding-top: 15px;/*.imgに下マージンをとるとリンクが外れる部分が出現するため*/
 font-size: 1.2rem;
 margin-bottom: 10px;
}
.coordinateSlider .hospital .catch{ color: #3467cd;}
.coordinateSlider .senior .catch{ color: #d9941d;}
.coordinateSlider .industrial .catch{ color: #60b432;}
.coordinateSlider .restaurant .catch{ color: #de6641;}
.coordinateSlider .buffet .catch{ color: #6455c2;}
.coordinateSlider .kids .catch{ color: #d44370;}

.coordinateSlider .sliderLi h3{
 font-size: 1.8rem;
 font-weight: 400;
}

/*矢印*/
.coordinateSlider .prevArrow,
.coordinateSlider .nextArrow{
 position: absolute;
 bottom: 0;
 width: 44px;
 height: 44px;
 cursor: pointer;
 z-index: 1;
}
.coordinateSlider .prevArrow{ left: calc(50% - 58px);}
.coordinateSlider .nextArrow{ right: calc(50% - 58px);}
.coordinateSlider .prevArrow::before,
.coordinateSlider .nextArrow::before{
 content: "";
 display: block;
 width: 10px;
 height: 10px;
 border-right: 2px solid #fff;
 border-top: 2px solid #fff;
 position: absolute;
 top: 16px;
}
.coordinateSlider .prevArrow::before{ transform: rotate(-135deg); left: 18px;}
.coordinateSlider .nextArrow::before{ transform: rotate(45deg); left: 14px;}
.coordinateSlider .prevArrow::after,
.coordinateSlider .nextArrow::after{
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 background-color: #003f7e;
 border-radius: 50%;
 width: 100%;
 height: 100%;
 transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.8);
 outline: 1px solid transparent;/*firefoxカクカク解消*/
}
.coordinateSlider .prevArrow:hover::after,
.coordinateSlider .nextArrow:hover::after{ transform: scale(1.09) rotate(0.01deg);}