@charset "UTF-8";

/* =====================================
   カード: 共通コンポーネント（BEM命名規則）
   ===================================== */

/* 体験談カード（採用ページ用） */
.experience-card {
  margin-bottom: 50px;
  background: var(--color-white, #fff);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.experience-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgb(0 0 0 / 12%);
}

.experience-card__image {
  width: 100%;
  height: 250px;
  overflow: hidden;
  background: var(--color-light-gray, #f7f7f7);
}

.experience-card__image-first {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.experience-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

/* 最初の体験談カードの画像のみtop配置と高さ指定 */
.part-time-experience-section .experience-card:first-child .experience-card__image img {
  height: 350px !important;
  object-position: top !important;
}

.experience-card:hover .experience-card__image img {
  transform: scale(1.05);
}

.experience-card__content {
  padding: 32px 28px;
}

.experience-card__item {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border, #e5e5e5);
}

.experience-card__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.experience-card__item h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary, #cf0d37);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.experience-card__item p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text, #333);
  margin: 0;
}

/* 体験談セクションタイトル */
.experience-section-title {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: var(--color-text, #333);
  position: relative;
  padding-bottom: 16px;
}

.experience-section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary, #cf0d37), #ff4d6d);
}

/* ニュースカード（section8用） */
.news-card {
  background-color: var(--color-white, #fff);
  color: var(--color-black, #000);
  padding: 0 32px 24px;

  --image--width: 5rem;

  position: relative;
  margin: 36px auto 0; /* 上36px、左右auto（中央配置）、下0 */
  width: 100%;
  max-width: 800px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
}

.news-card__image {
  display: block;
  margin-top: calc(var(--image--width) / -2);
  width: var(--image--width);
  object-fit: cover;
  position: absolute;
  left: 45%;
  background-color: var(--color-white, #fff);
  padding: 8px 2px;
}

.news-card__content {
  padding-top: 60px;
  font-size: 14px;
}

.news-card__content img {
  text-align: center;
  max-width: 100%;
  object-fit: cover;
  background-position: center;
  max-height: 600px;
}

.news-card__link {
  text-decoration: none;
  color: var(--color-black, #000);
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.news-card__link:hover {
  opacity: 0.7;
}

/* セクション8用の旧クラス名との互換性維持 */
.section8 .container .card,
.section-news-info .container .card {
  background-color: var(--color-white, #fff);
  color: var(--color-black, #000);
  padding: 0 32px 24px;

  --image--width: 5rem;

  position: relative;
  margin: 36px auto 0; /* 上36px、左右auto（中央配置）、下0 */
  width: 100%;
  max-width: 800px;
  box-sizing: border-box;
}

.section8 .container .card .section8-img,
.section-news-info .container .card .section-news-img {
  display: block;
  margin-top: calc(var(--image--width) / -2);
  width: var(--image--width);
  object-fit: cover;
  position: absolute;
  left: 45%;
  background-color: var(--color-white, #fff);
  padding: 8px 2px;
}

.section8 .container .card .section8-newstext {
  padding-top: 60px;
  font-size: 14px;
}

.section-news-info .container .card .section-news-content {
  padding-top: 60px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.section-news-info .container .card .section-news-content h2 {
  font-size: 20px;
  color: var(--color-text, #333);
}

.section-news-info .container .card .section-news-content h3 {
  font-size: 18px;
  color: var(--color-text, #333);
}

.section-news-info .container .card .section-news-content h4 {
  font-size: 16px;
  color: var(--color-text, #333);
}

.section-news-info .container .card .section-news-content p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text, #333);
  text-align: left;
}

.section-news-info .container .card .section-news-content img {
  text-align: center;
  max-width: 100%;
  object-fit: cover;
  background-position: center;
  max-height: 600px;
}

/* 旧クラス名との互換性 */
.experience-image {
  width: 100%;
  height: 250px;
  overflow: hidden;
  background: var(--color-light-gray, #f7f7f7);
}

.experience-image-first {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.experience-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.experience-card .experience-image img {
  object-position: center;
}

.experience-card:hover .experience-image img {
  transform: scale(1.05);
}

.experience-content {
  padding: 32px 28px;
}

.experience-item {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border, #e5e5e5);
}

.experience-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.experience-item h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary, #cf0d37);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.experience-item p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text, #333);
  margin: 0;
}

/* section8とsection-news-infoのコンテナ調整 */
.section8 .container,
.section-news-info .container {
  max-width: 1200px; /* カードより大きくして、カード自身がマージンを持てるようにする */
  padding: 0;
  margin: 0 auto;
}

/* =====================================
   レスポンシブ: モバイル対応
   ===================================== */

/* 800px以下の場合、左右に8pxのマージンを確保 */
@media (width <= 816px) {
  .news-card,
  .section8 .container .card,
  .section-news-info .container .card {
    margin: 36px 8px 0 !important; /* 上36px、右8px、下0、左8px */
    width: calc(100% - 16px); /* 全幅から左右のマージン分を引く */
    max-width: calc(800px - 16px); /* 最大幅も調整 */
  }
}

@media (width <= 768px) {
  .experience-section-title {
    font-size: 24px;
    margin-bottom: 30px;
  }

  .experience-card {
    margin-bottom: 40px;
  }

  .experience-card__content,
  .experience-content {
    padding: 24px 20px;
  }

  .experience-card__item h4,
  .experience-item h4 {
    font-size: 16px;
  }

  .experience-card__item p,
  .experience-item p {
    font-size: 14px;
  }
}

@media (width <= 600px) {
  .news-card__image,
  .section8 .container .card .section8-img,
  .section-news-info .container .card .section-news-img {
    left: 40%;
  }
}