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

/*==================================================
TOP社員インタビュースライダーのためのcss
===================================*/
.interview_slider .slider {/*元は横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
    margin:0 auto;
}


.interview_slider .slider img {
	/*width:44vw;*//*スライダー内の画像を60vwにしてレスポンシブ化。左右もう少しみせたいので４４に変更*/
    width: 100%;
    height: 400px;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 50%;
}

@media screen and (max-width: 468px){
.interview_slider .slider img {
    width:80vw;
    height:auto;
}
}

.interview_slider .slider .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.interview_slider .slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}

@media screen and (max-width: 1200px) {
    .top li.interview_area {
      width: 80vw;
    }
  }
  
  @media screen and (max-width: 767px) {
    .top li.interview_area {
      max-width: 720px;
      margin: 0 6vw;
    }
  
    .interview_slider .slider img {
      height: 280px;
    }
  }
  
  @media screen and (max-width: 468px) {
    .top li.interview_area {
      width: 92vw;
    }
  
    .interview_slider .slider img {
      width: 100vw;
      height: 200px;
    }
  }


/*矢印の設定*/

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

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

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

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

.interview_slider .slick-dots {
	display:none;/*TOPスライダーではボタン表示させない*/
    text-align:center;
	margin:20px 0 0 0;
}

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

.interview_slider .slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    /*border-radius:50%;*/
    background:#ccc;/*ドットボタンの色*/
}

.interview_slider .slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

/*==================================================
TOP社員インタビューをスライダーにしないときはcssを

.slider を　.slider_none　に変更する

===================================*/
.interview_slider .slider_none {/*元は横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
    margin:0 auto;
}

.interview_slider .slider_none img {
    width:100%;
    height: 400px;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 50%;
}

    

@media screen and (max-width: 468px){
.interview_slider .slider_none img {
    width:80vw;
    height:auto;
}
}




/*==================================================
募集職種　職場風景スライダーのためのcss
===================================*/
.job_slider .slider {/*元は横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
    margin:0 auto;
}

.job_slider .slider img {
    width:30vw;/*スライダー内の画像を60vwにしてレスポンシブ化。元は44。30に変更*/
    height:auto;
}

@media screen and (max-width: 468px){
.job_slider .slider img {
    width:80vw;
    height:auto;
}
}

.job_slider .slider .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.job_slider .slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}


/*矢印の設定*/

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

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

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

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

.job_slider .slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

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

.job_slider .slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    /*border-radius:50%;*/
    background:#ccc;/*ドットボタンの色*/
}

.job_slider .slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}