/*--------------------------------------------------------------
  RECRUIT
--------------------------------------------------------------*/
.a-recruit .l-main {
  overflow: hidden;
}

.a-recruit .introduction .inner {
  padding-top: min(136px, 8.5rem, 36.2666666667vw);
  /* padding-bottom: min(62px, 3.875rem, 16.5333333333vw); */
  position: relative;
  z-index: 0;
}

.a-recruit .introduction .inner>picture {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.a-recruit .introduction .title {
  font-family: sofia-pro, sans-serif;
  font-size: min(80px, 5rem, 21.3333333333vw);
  line-height: 1.25;
  letter-spacing: 0em;
  color: #ffffff;
  opacity: 0.15;
  position: absolute;
  top: min(5px, 0.3125rem, 1.3333333333vw);
  right: min(30px, 1.875rem, 8vw);
}

.a-recruit .introduction .text-container {
  background-color: #fff;
  width: 92%;
  margin-inline: auto;
  padding-top: min(50px, 3.125rem, 13.3333333333vw);
  padding-bottom: min(70px, 4.375rem, 18.6666666667vw);
  position: relative;
}

.a-recruit .introduction .text-container::before {
  content: "";
  display: block;
  background-image: linear-gradient(86.683deg, #2ED0FA, #0051CA);
  width: min(2px, 0.125rem, 0.5333333333vw);
  height: min(50px, 3.125rem, 13.3333333333vw);
  position: absolute;
  top: 0;
  right: min(40px, 2.5rem, 10.6666666667vw);
}

.a-recruit .introduction .lead {
  font-size: min(20px, 1.25rem, 5.3333333333vw);
  line-height: 1.5;
  text-align: center;
}

.a-recruit .introduction .lead img {
  /* width: min(187px, 11.6875rem, 49.8666666667vw); */
  width: min(487px, 41.6875rem, 89.8666666667vw);
}

.a-recruit .introduction .text {
  /* 9/24 */
  /* font-size: min(14px, 0.875rem, 3.7333333333vw); */
  /* line-height: 2.0714285714; */
  font-size: min(18px, 1.125rem, 4.8vw);
  line-height: calc(38/18);
  /* ------------------ 9/24 */
  font-weight: 400;
  width: 86.9565217391%;
  margin-top: min(38px, 2.375rem, 10.1333333333vw);
  margin-inline: auto;
}

.a-recruit .link .inner {
  display: flex;
  flex-direction: column;
  row-gap: min(40px, 2.5rem, 10.6666666667vw);
  width: 92%;
  margin-inline: auto;
  padding-top: min(34px, 2.125rem, 9.0666666667vw);
}

.a-recruit .link .box a {
  display: block;
  width: 100%;
}

@media (hover: hover) {
  .a-recruit .link .box a:hover .c-button::after {
    animation: skew-button 0.5s forwards;
  }
}

.a-recruit .link .image-container {
  display: grid;
  place-content: center;
  width: 100%;
  aspect-ratio: 345/195;
  position: relative;
  z-index: 0;
}

.a-recruit .link .image-container picture {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.a-recruit .link .text {
  display: grid;
  place-content: center;
  font-size: min(24px, 1.5rem, 6.4vw);
  font-weight: 500;
  line-height: 1.4583333333;
  letter-spacing: 0.05em;
  text-align: center;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.3);
  border: solid 2px #fff;
  width: min(180px, 11.25rem, 48vw);
  height: min(60px, 3.75rem, 16vw);
}

.a-recruit .link .c-button {
  background-image: linear-gradient(5.371deg, #00C85B, #00ADAC);
  width: 100%;
  height: min(47px, 2.9375rem, 12.5333333333vw);
}

.a-recruit .link .c-button::after {
  background-image: linear-gradient(12.818deg, #0FC3C1, #1CFF83);
}

.a-recruit .archive .inner {
  width: 92%;
  margin-inline: auto;
  padding-top: min(70px, 4.375rem, 18.6666666667vw);
  padding-bottom: min(74px, 4.625rem, 19.7333333333vw);
}

.a-recruit .archive .title {
  width: min(88px, 5.5rem, 23.4666666667vw);
  margin-inline: auto;
}

.a-recruit .archive .archive-list {
  display: flex;
  flex-direction: column;
  row-gap: min(18px, 1.125rem, 4.8vw);
  margin-top: min(32.5px, 2.03125rem, 8.6666666667vw);
}

.a-recruit .archive .archive-item a {
  display: block;
  background-color: #fff;
  border-radius: min(10px, 0.625rem, 2.6666666667vw);
  box-shadow: 0 0 min(15px, 0.9375rem, 4vw) rgba(106, 106, 106, 0.16);
  width: 100%;
  padding-block: min(21px, 1.3125rem, 5.6vw);
  padding-right: min(34.5px, 2.15625rem, 9.2vw);
  padding-left: min(26.5px, 1.65625rem, 7.0666666667vw);
  position: relative;
  transition: opacity 0.3s ease;
}

/* 全体 */
.recruit-news {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* 記事ごと */
.recruit-news article {
  display: flex;             /* 左: カテゴリ / 右: 本文 */
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid #ddd;
  padding: 1rem 0;
}

.recruit-news-title {
  color: #00C85B;
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 30px;
}

.recruit-news article:last-child {
  border-bottom: none;
}

/* カテゴリ（新卒・中途など） */
.news-h3 {
  display: flex;               /* ← block → flex に変更 */
  align-items: center;         /* 縦中央揃え */
  justify-content: center;     /* 横中央揃え */
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.95rem;
  color: #ffffff;
  min-width: 110px;
  text-align: center;          /* 不要でも残してOK */
  height: 2rem;                /* 高さを指定すると安定 */
}

/* 色分け */
.recruit-news .new-graduate {
  background-color: #28a745;  /* 緑 */
}

.recruit-news .mid-career {
  background-color: #d9534f;  /* 赤 */
}

.recruit-news .recruit-info {
  background-color: #007acc;  /* 青 */
}

/* 日付＋本文 */
.news-meta {
  display: flex;
  flex-direction: column;
}

.news-meta time {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.4rem;
}

.news-meta p {
  margin: 0;
  line-height: 1.6;
  color: #333;
}


@media (hover: hover) {
  .a-recruit .archive .archive-item a:hover {
    opacity: 0.6;
  }
}

.a-recruit .archive .post-date {
  display: inline-block;
  font-family: "Roboto Condensed", sans-serif;
  font-size: min(12px, 0.75rem, 3.2vw);
  line-height: 1.3333333333;
  letter-spacing: 0em;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(11.155deg, #2ED0FA, #0051CA);
  padding-bottom: min(2px, 0.125rem, 0.5333333333vw);
  padding-inline: min(7px, 0.4375rem, 1.8666666667vw);
}

.a-recruit .archive .post-title {
  /* 9/24 */
  /* font-size: min(14px, 0.875rem, 3.7333333333vw); */
  /* line-height: 1.5714285714; */
  font-size: min(18px, 1.125rem, 4.8888888vw);
  line-height: calc(32/18);
  /* ------------------ 9/24 */
  letter-spacing: 0.05em;
  margin-top: min(7px, 0.4375rem, 1.8666666667vw);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.a-recruit .archive .post-link {
  width: min(10px, 0.625rem, 2.6666666667vw);
  position: absolute;
  top: min(46px, 2.875rem, 12.2666666667vw);
  right: min(13px, 0.8125rem, 3.4666666667vw);
}

.a-recruit .archive .post-link img {
  vertical-align: top;
}

@media (768px <=width) {
  .a-recruit .introduction .inner {
    padding-top: min(117px, 7.3125rem, 8.125vw);
    /* padding-bottom: min(72px, 4.5rem, 5vw); */
    max-width: 1440px;
    margin: 0 auto;
  }

  .a-recruit .introduction .inner>picture {
    top: min(50px, 3.125rem, 3.4722222222vw);
    left: 0;
    width: min(1030px, 64.375rem, 71.5277777778vw);
    aspect-ratio: 1030/585;
  }

  .a-recruit .introduction .title {
    font-size: min(205px, 12.8125rem, 14.2361111111vw);
    line-height: 1.2487804878;
    color: #a3a3a3;
    opacity: 0.06;
    top: min(280px, 17.5rem, 19.4444444444vw);
    right: auto;
    left: min(970px, 60.625rem, 67.3611111111vw);
    transform: rotateZ(90deg);
  }

  .a-recruit .introduction .text-container {
    width: min(1000px, 62.5rem, 69.4444444444vw);
    box-shadow: 0 0 min(15px, 0.9375rem, 1.0416666667vw) rgba(103, 103, 103, 0.1);
    padding-top: min(70px, 4.375rem, 4.8611111111vw);
    padding-inline: min(100px, 6.25rem, 6.9444444444vw);
    padding-bottom: min(93px, 5.8125rem, 6.4583333333vw);
  }

  .a-recruit .introduction .text-container::before {
    width: min(6px, 0.375rem, 0.4166666667vw);
    height: min(66px, 4.125rem, 4.5833333333vw);
    right: min(66px, 4.125rem, 4.5833333333vw);
  }

  .a-recruit .introduction .lead {
    font-size: min(30px, 1.875rem, 2.0833333333vw);
    line-height: 1.4666666667;
    text-align: left;
  }

  .a-recruit .introduction .lead img {
    /* width: min(280px, 17.5rem, 19.4444444444vw); */
    width: min(580px, 37.5rem, 39.4444444444vw);
    margin-top: max(-5px, -0.3125rem, -0.3472222222vw);
    margin-right: min(5px, 0.3125rem, 0.3472222222vw);
  }

  .a-recruit .introduction .text {
    font-size: min(18px, 1.125rem, 1.25vw);
    font-weight: 500;
    line-height: 2.2222222222;
    width: auto;
    margin-top: min(40px, 2.5rem, 2.7777777778vw);
  }

  .a-recruit .link .inner {
    flex-direction: row;
    justify-content: space-between;
    width: min(1040px, 65rem, 72.2222222222vw);
    padding-top: min(107px, 6.6875rem, 7.4305555556vw);
  }

  .a-recruit .link .box {
    width: 44.2307692308%;
  }

  .a-recruit .link .text {
    font-size: min(40px, 2.5rem, 2.7777777778vw);
    line-height: 1.45;
    width: min(240px, 15rem, 16.6666666667vw);
    height: min(80px, 5rem, 5.5555555556vw);
  }

  .a-recruit .link .c-button {
    height: min(62px, 3.875rem, 4.3055555556vw);
  }

  .a-recruit .archive .inner {
    width: min(1000px, 62.5rem, 69.4444444444vw);
    padding-top: min(100px, 6.25rem, 6.9444444444vw);
    padding-bottom: min(106px, 6.625rem, 7.3611111111vw);
  }

  .a-recruit .archive .title {
    width: min(143px, 8.9375rem, 9.9305555556vw);
  }

  .a-recruit .archive .archive-list {
    row-gap: min(20px, 1.25rem, 1.3888888889vw);
    margin-top: min(56.5px, 3.53125rem, 3.9236111111vw);
  }

  .a-recruit .archive .archive-item a {
    display: flex;
    flex-direction: row;
    align-items: center;
    -moz-column-gap: min(40px, 2.5rem, 2.7777777778vw);
    column-gap: min(40px, 2.5rem, 2.7777777778vw);
    border-radius: min(20px, 1.25rem, 1.3888888889vw);
    padding-top: min(20px, 1.25rem, 1.3888888889vw);
    padding-right: min(125px, 7.8125rem, 8.6805555556vw);
    padding-left: min(50px, 3.125rem, 3.4722222222vw);
    padding-bottom: min(23px, 1.4375rem, 1.5972222222vw);
  }

  .a-recruit .archive .post-date {
    font-size: min(13px, 0.8125rem, 0.9027777778vw);
    line-height: 1.3846153846;
    letter-spacing: 0.05em;
    padding-block: min(2px, 0.125rem, 0.1388888889vw);
    padding-inline: min(9.5px, 0.59375rem, 0.6597222222vw);
  }

  .a-recruit .archive .post-title {
    font-size: min(17px, 1.0625rem, 1.1805555556vw);
    line-height: 1.4705882353;
    margin-top: 0;
  }

  .a-recruit .archive .post-link {
    width: min(10px, 0.625rem, 0.6944444444vw);
    top: min(30px, 1.875rem, 2.0833333333vw);
    right: min(25px, 1.5625rem, 1.7361111111vw);
  }
}

.insta-feed {
  text-align: center;
}

.insta-feed .insta-section-title {
  font-size: 18px;
  margin: 0 auto;
  text-align: center;
  color: white;

  /* display: inline-block;
  background: linear-gradient(90deg, #4158D0, #C850C0 30%, #FFCC70);
  background: -webkit-linear-gradient(0deg, #4158D0, #C850C0 30%, #FFCC70);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */

}

.insta-feed .insta-box {
  max-width: 400px;
  height: auto;
  align-items: center;
  border-radius: 48px;
  box-shadow: -4px -4px 10px 2px #922929;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  margin: 30px auto;
}

.insta-feed .insta-area {
  width: 100%;
  margin: 0 auto;
  background: linear-gradient(var(--g-angle), var(--g-color-0) var(--g-position-0), var(--g-color-1) var(--g-position-1), var(--g-color-2) var(--g-position-2), var(--g-color-3) var(--g-position-3));
  --gap-uuid: 87900362 -96ee -4d26 -9e99 -94bbdd8cecc9;
  --gap-h-87900362-96ee-4d26-9e99-94bbdd8cecc9: 0px;
  --gap-v-87900362-96ee-4d26-9e99-94bbdd8cecc9: 0px;
  --g-color-0: #55479a;
  --g-position-0: 0%;
  --g-color-1: #a93288;
  --g-position-1: 32%;
  --g-color-2: #da2c6d;
  --g-position-2: 66%;
  --g-color-3: #f5c469;
  --g-position-3: 100%;
  --g-color-4: #f5c469;
  --g-position-4: 100%;
  --g-color-5: #f5c469;
  --g-position-5: 100%;
  --g-color-6: #f5c469;
  --g-position-6: 100%;
  --g-color-7: #f5c469;
  --g-position-7: 100%;
  --g-color-8: #f5c469;
  --g-position-8: 100%;
  --g-color-9: #f5c469;
  --g-position-9: 100%;
  --g-color-10: #f5c469;
  --g-position-10: 100%;
  --g-color-11: #f5c469;
  --g-position-11: 100%;
  --g-angle: 135deg;
}

.insta-feed .title {
  /* display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center; */
  padding: 60px 0 10px;
}


.insta-feed .title img {
  width: 300px;
}

.insta-feed .subtitle h2 {
  font-size: 45px;
  font-weight: 600;
  color: white;
}

.insta-feed .subtitle p {
  font-weight: 600;
  text-align: center;
  font-size: 20px;
}

.insta-feed .insta-btn {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translate(-50%, -50%);

  color: white;
  align-items: center;
  background: #bd0000;
  border-radius: 12px;
  box-shadow: 3px 3px 0px 1px #9c1e1e;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 40px;
  width: 250px;

  justify-content: center;
  text-align: center;
  margin: 0 auto;
  padding: 10px 15px;

  /* transition: all 0.2s ease-in-out; */
}

/* @keyframes shine {
  0% {
    transform: skewY(-45deg) translateX(3em);
  }

  100% {
    transform: skewY(-45deg) translateX(12.5em);
  }
} */

.insta-feed .insta-btn:before {
  content: "";
  background-color: rgba(255, 255, 255, 0.5);
  height: 100%;
  width: 3em;
  display: block;
  position: absolute;
  top: 0;
  left: -4.5em;
  transform: skewX(-45deg) translateX(80px);
  transition: none;
  opacity: 0;
}

.insta-feed .insta-btn:hover {
  /* background-color: #2194E0;; */
  color: #fff;
  border-bottom: 4px solid darken(#2194E0, 10%);
}

.insta-feed .insta-btn:hover:before {
  transform: skewX(-45deg) translateX(15.5em);
  opacity: 1;
  transition: all 0.5s ease-in-out;
}


.insta-feed .insta-btn:hover {
  background: linear-gradient(var(--g-angle), var(--g-color-0) var(--g-position-0), var(--g-color-1) var(--g-position-1), var(--g-color-2) var(--g-position-2), var(--g-color-3) var(--g-position-3));
  box-shadow: 3px 3px 0px 1px #4e0092;
  transition-duration: 400ms;
  /* transition-timing-function: cubic-bezier(0.99, 0.575, 0.565, 1); */
  --g-color-0: #55479a;
  --g-position-0: 0%;
  --g-color-1: #a93288;
  --g-position-1: 32%;
  --g-color-2: #da2c6d;
  --g-position-2: 66%;
  --g-color-3: #f5c469;
  --g-position-3: 100%;
  --g-color-4: #f5c469;
  --g-position-4: 100%;
  --g-color-5: #f5c469;
  --g-position-5: 100%;
  --g-color-6: #f5c469;
  --g-position-6: 100%;
  --g-color-7: #f5c469;
  --g-position-7: 100%;
  --g-color-8: #f5c469;
  --g-position-8: 100%;
  --g-color-9: #f5c469;
  --g-position-9: 100%;
  --g-color-10: #f5c469;
  --g-position-10: 100%;
  --g-color-11: #f5c469;
  --g-position-11: 100%;
  --g-angle: 135deg;
}

.insta-feed .insta-btn a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: white;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  vertical-align: center;
}


.insta-feed .insta-section {
  /* margin-bottom: 20px; */
  position: relative;
}

.insta-feed .insta-section img {
  max-width: 100%;
  border-radius: 30px;
}


/* Instagram interview slideshow */
.slider1 {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 94%;
  margin: 0 auto;
}

.slider1 img {
  /* width: 60vw; */
  /*スライダー内の画像を60vwにしてレスポンシブ化*/
  height: auto;
}

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

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


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute;
  /*絶対配置にする*/
  top: 42%;
  cursor: pointer;
  /*マウスカーソルを指マークに*/
  outline: none;
  /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid white;
  /*矢印の色*/
  border-right: 2px solid white;
  /*矢印の色*/
  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; */
  padding: 20px 0 30px;
}

.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: white;
  /*ドットボタンの色*/
}

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

@media screen and (max-width:400px) {
  .insta-feed .insta-box {
    max-width: 300px;
    bottom: -10px;
  }

  .insta-feed .insta-btn {
    bottom: -15px;
  }
}

.insta-feed .insta-area .title .insta-btn {
  position: relative;
  margin: 20px 0;
}

.insta-feed .insta-area .title .insta-btn a {
  display: block;
  width: 100%;
}

.a-recruit .recruit-numberinfo>div>div {
  margin: 0 auto;
}

.a-recruit .recruit-numberinfo img {
  max-width: 800px;
}

@media screen and (max-width:768px) {
  .is-sp {
    display: block !important;
  }

  .is-pc {
    display: none !important;
  }

  /* recruitnews */

  
}

.is-sp {
  display: none;
}

.is-pc {
  display: block;
}