@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/width:94%;margin:0 auto;}
.slider img {width:100%;/*スライダー内の画像を横幅100%に*/height:auto;border-radius:15px;margin:0 0% 10px 0%; }
.slider small { width:100%; display:inline-block; font-size:14px; text-align:center; }
.slider span {width:100%; display:inline-block; font-size: 12px;color: #FED631;width: 100%;display: block;line-height: 12px;
letter-spacing: 0.1em; text-align:center; }
.slider strong { width:100%; display:inline-block; font-weight:bold; font-size:18px; text-align:center; }


.slider_wrap { width:70%; margin: 50px auto 0px; }
.slider_wrap a.staff .staff_img{width:165px;height:165px;overflow:hidden; margin:0 auto; }
.slider_wrap a.staff .staff_img img{width: auto; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); border-radius: 18px; }

.slider_wrap a.staff p{font-size: 14px;width: 100%;margin-top: 10px;letter-spacing: 0.1em;}
.slider_wrap a.staff span{font-size: 12px;color: #FED631;width: 100%;display: block;line-height: 12px;letter-spacing: 0.1em; }
.slider_wrap a.staff strong{font-size: 16px;letter-spacing: 0.1em;width: 100%;}

.slider_wrap .zoom_box{
    width:165px;
    height:165px;
    margin:0 auto;
    overflow:hidden;
    will-change: transform;
    border-radius:50%;
    text-align:center;
   }
   .zoom_box img{
    width:165px;
    transition: transform 0.3s;
    border-radius:18px;
      transform-origin: center center;
   }
   .zoom_box img:hover{
     transform:scale(1.2,1.2);
     transition:1s all;
   }
.slider li { width:165px; }




/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {margin:0 10px;}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 26%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 8px;
    width: 8px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    height:10px;
    text-align:center;
    margin:20px 0 0 0;
    display:none;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    display:none;
}

.slick-dots .slick-active button{
    display:none;
}