@charset "UTF-8";
/* ==============================================================================
   福利厚生｜働き方を支える制度
============================================================================== */
.p-welfare-support {
  /* margin-top */
  margin-top: clamp(2.5rem, 2.06rem + 1.878vw, 3.75rem);
}
@media (max-width: 768px) {
  .p-welfare-support {
    margin: 40px auto 40px auto;
  }
}
.p-welfare-support__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 32px;
}
@media (max-width: 768px) {
  .p-welfare-support__list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 24px;
  }
}
.p-welfare-support__item {
  width: calc((100% - 96px) / 4); /* 32px × 3 */
  text-align: center;
}
@media (max-width: 768px) {
  .p-welfare-support__item {
    width: calc((100% - 24px) / 2);
  }
}
.p-welfare-support {
  /* クリックエリア */
}
.p-welfare-support__button {
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
}
.p-welfare-support {
  /* 罫線ボックス */
}
.p-welfare-support__box {
  width: 100%;
  max-width: 255px;
  height: auto;
  aspect-ratio: 255/191;
  margin: 0 auto;
  border: 2px solid #e6e6e6;
  border-radius: 12px;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: -webkit-box-shadow 0.3s ease, -webkit-transform 0.3s ease;
  transition: -webkit-box-shadow 0.3s ease, -webkit-transform 0.3s ease;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  transition: box-shadow 0.3s ease, transform 0.3s ease, -webkit-box-shadow 0.3s ease, -webkit-transform 0.3s ease;
}
.p-welfare-support__button:hover .p-welfare-support__box, .p-welfare-support__button:focus-visible .p-welfare-support__box {
  -webkit-box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
          box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
}
.p-welfare-support {
  /* アイコン */
}
.p-welfare-support__icon {
  width: 120px;
  height: auto;
}
@media (max-width: 900px) {
  .p-welfare-support__icon {
    width: 80px;
  }
}
@media (max-width: 768px) {
  .p-welfare-support__icon {
    width: 60px;
  }
}
.p-welfare-support {
  /* テキスト */
}
.p-welfare-support__text {
  margin-top: 16px;
  font-size: clamp(0.8rem, 0.73rem + 0.3vw, 1rem);
  font-weight: 600;
  color: #1f1f1f;
  line-height: 1.4;
}

/* ==============================================================================
   福利厚生｜カードリスト（働きやすさ／クラブ活動／年間イベント）
============================================================================== */
.p-welfare-list {
  margin-top: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 48px 32px;
}
@media (max-width: 768px) {
  .p-welfare-list {
    margin-top: 40px;
    gap: 60px;
  }
}
.p-welfare-list {
  /* アイテム */
}
.p-welfare-list__item {
  width: calc((100% - 32px) / 2);
}
@media (max-width: 768px) {
  .p-welfare-list__item {
    width: 100%;
  }
}