@charset "utf-8";


/* color */

html,body {
   color: #000000;
   font-family: hiragino-kaku-gothic-pron, sans-serif;
   font-weight: 300;
   font-style: normal;
   scroll-behavior: smooth;
}

/* century */
.ct {
   font-family: century-gothic, sans-serif;
   font-weight: 400;
   font-style: normal;
}


/* メイン青 */
.mainblue { color:#1675B8;}
.gray { color: #4e4e4e;}
.lightgray { color: #afafaf;}
.white {color: #ffffff;}


/* flexbox */
.flex { display: flex;}
.column {
   display: flex;
   flex-direction: column;
}

.auto {
   margin-right: auto;
   margin-left: auto;
}






/* アニメーション */
/* 共通の非表示スタイル */
.animate-me {
   opacity: 0;
   transform: translateY(20px);
   transition: transform 0.5s, opacity 0.5s;
 }
  
 .animate-me.active {
   opacity: 1; 
 }


 /* アニメーション１ */
 .fade-in.active {
   opacity: 1;
 }
 
 /* アニメーション２ */
 .slide-up-fade-in {
   transform: translateY(20px);
   transition: opacity 0.5s, transform 0.5s;
 }
 .slide-up-fade-in.active {
   opacity: 1;
   transform: translateY(0);
 }
 
 /* 個別の遅延設定 */
.flex-container .animate-me:nth-child(1) {
   transition-delay: 0s; /* 直ちに開始 */
 }
 
 .flex-container .animate-me:nth-child(2) {
   transition-delay: 0.1s; /* 0.1秒遅延 */
 }
 
 .flex-container .animate-me:nth-child(3) {
   transition-delay: 0.2s; /* 0.2秒遅延 */
 }
 
 .flex-container .animate-me:nth-child(4) {
   transition-delay: 0.3s; /* 0.3秒遅延 */
 } 
 .flex-container .animate-me:nth-child(5) {
   transition-delay: 0.4s; /* 0.3秒遅延 */
 } 
 .flex-container .animate-me:nth-child(6) {
   transition-delay: 0.5s; /* 0.3秒遅延 */
 }

 .flex-container .animate-me:nth-child(7) {
   transition-delay: 0.6s; /* 0.3秒遅延 */
 }



.flex-container div:nth-child(1) .animate-me {
   transition-delay: 0s; /* 直ちに開始 */
 }
 
 .flex-container div:nth-child(2) .animate-me  {
   transition-delay: 0.1s; /* 0.1秒遅延 */
 }
 
 .flex-container div:nth-child(3) .animate-me  {
   transition-delay: 0.2s; /* 0.2秒遅延 */
 }
 
 .flex-container div:nth-child(4) .animate-me  {
   transition-delay: 0.3s; /* 0.3秒遅延 */
 } 
 .flex-container div:nth-child(5) .animate-me  {
   transition-delay: 0.4s; /* 0.3秒遅延 */
 } 
 .flex-container div:nth-child(6) .animate-me  {
   transition-delay: 0.5s; /* 0.3秒遅延 */
 }

 .flex-container div:nth-child(7) .animate-me {
   transition-delay: 0.6s; /* 0.3秒遅延 */
 }




 /* アニメーション３の背景 */
 .image-animate {
   position: relative;
   background-color: transparent;
   width: 100%;
   /* height: 300px; */
   overflow: hidden;
   transform: translateY(0px);
 }
 

 .image-animate:before {
   content: '';
   position: absolute;
   left: -100%;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: #1675B8;
   transition: left 1s ease-out;
 }
 
 .image-animate.active:before {
   left: 0;
 }
 
 .hidden-image {
   width: 100%;
   height: 100%;
   opacity: 0;
   transform: scale(1);
   transition: opacity 1s 1s, transform 1s 1s; /* Wait for the blue background to finish */
 }
 
 .image-animate.active .hidden-image {
   opacity: 1;
   transform: scale(1.1);
 }
 





/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
   margin:0 auto;
}

.slider img {
   width:100%;/*スライダー内の画像を横幅100%に*/
   height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
   margin:0 10px;
}

/*矢印の設定*/

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

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

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

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

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

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

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

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

.recruit_slide .slick-arrow {
   display: flex !important; /* !important を使って強制的に表示 */
}
.slick-disabled {
   display: none!important; /* 矢印を非表示にする */
 }

 .recruit_slide .slick-arrow.slick-disabled {
   display: none !important;
 }