/*
 * Custom CSS
 * 既存の site.css / site-recruit.css はビルド生成物のため直接編集しない
 * 保守・追加調整はこのファイルに記述すること
 */

/* --------------------
   見出し共通
-------------------- */
.heading-block {
  padding: 0 0 20px;
  margin-bottom: 42px;
  border-bottom: 1px solid #d6d6d6;
}

.heading-block h2,
.heading-block h3,
.heading-block h4 {
  margin: 0;
  line-height: 1.4;
  font-weight: 700;
}

.heading-block h2 {
  font-size: 38px;
}

.heading-block h3 {
  font-size: 30px;
}

.heading-block h4 {
  font-size: 22px;
}

.txt-green{
  color: #00994f;
}


/* --------------------
   テキスト＋画像（2カラム）
-------------------- */
.media-block {
  display: flex;
  align-items: flex-start;
  gap: 70px;
  margin: 60px 0;
}

/* 左右均等 */
.media-text,
.media-image {
  flex: 1 1 0;
  min-width: 0;
}

.media-text p {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 2;
}

.media-text p:last-child {
  margin-bottom: 0;
}

.media-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* スマホ */
@media (max-width: 767px) {
  .media-block {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    margin: 40px 0;
  }

  .media-text,
  .media-image {
    width: 100%;
  }
}


/* --------------------
   ボックス共通
-------------------- */

.box {
  margin: 38px 0;
  padding: 40px 42px;
  border-radius: 10px;
}

.box h5 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
}

.box p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
}


/* 白＋枠線 */
.box-outline {
  background: #fff;
  border: 1px solid #ccc;
}


/* 薄いグレー */
.box-gray {
  background: #f6f6f6;
  border: none;
}

.box-gray h5 {
  color: #00994f;
}


/* 薄いグリーン */
.box-green {
  background: #e6f4ed;
  border: none;
}

/* --------------------
   スマホ
-------------------- */

@media screen and (max-width: 767px) {

  .heading-block {
    padding-bottom: 18px;
    margin-bottom: 28px;
  }

  .heading-block h2 {
    font-size: 28px;
  }

  .heading-block h3 {
    font-size: 24px;
  }

  .heading-block h4 {
    font-size: 19px;
  }

  .media-block {
    display: block;
    margin: 40px 0;
  }

  .media-text,
  .media-image {
    width: 100%;
  }

  .media-text {
    margin-bottom: 28px;
  }

  .media-text p {
    font-size: 14px;
    line-height: 1.9;
  }

  .box {
    margin: 24px 0;
    padding: 26px 22px;
  }

  .box h5 {
    font-size: 18px;
  }

  .box p {
    font-size: 14px;
  }
}