@charset "UTF-8";
/* =========================================================
   お知らせ一覧・詳細（求職者向け・企業向け 共通）
   企業向けだけの差分は co-info.css
   ========================================================= */

/* ---------------------------------------------------------
   一覧（info/）
--------------------------------------------------------- */
.p-news-list { padding: 120px 0; }

.p-news-list .c-news { margin-top: 85px; }

.p-news-list .c-pager { margin-top: 80px; }

@media (max-width: 767.98px) {
  .p-news-list { padding: 48px 0 64px; }
  .p-news-list .c-news { margin-top: 44px; }
  .p-news-list .c-pager { margin-top: 40px; }
}

/* ---------------------------------------------------------
   詳細（info/news/）
   左に日付（右揃え）、37px あけて本文。全体は 908px 幅で中央
--------------------------------------------------------- */
.p-post { padding: 100px 0 121px; }

.p-post__inner {
  display: grid;
  grid-template-columns: 61px minmax(0, 1fr);
  column-gap: 37px;
  max-width: 908px;
  margin-inline: auto;
}

/* 日付が長くなっても本文位置は動かさない（左へはみ出す） */
.p-post__date {
  justify-self: end;
  margin: 4px 0 0;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.p-post__year {
  display: block;
  font-size: 1.125rem; /* 18px */
  line-height: 26px;
}

.p-post__day {
  display: block;
  font-size: 1.75rem; /* 28px */
  line-height: 1.45;
}

/* タイトル: 文字幅だけテーマ色の下線（5px） */
.p-post__title {
  margin: 0;
  font-size: 2rem; /* 32px */
  font-weight: 700;
  line-height: 1.45;
}

.p-post__title span {
  padding-bottom: 2px;
  border-bottom: 5px solid var(--c-key);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* カテゴリ（色は c-news__tag--* と共通） */
.p-post__tag {
  width: fit-content;
  margin: 26px 0 0;
  padding: 0 15px;
  color: var(--c-white);
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  line-height: 36px;
}

/* 本文（CMS 出力想定） */
.p-post__body {
  margin-top: 60px;
  font-size: 1rem; /* 16px */
  line-height: 30px;
}

.p-post__body h3 {
  margin: 0 0 21px;
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  line-height: 36px;
}

.p-post__body h4 {
  margin: 22px 0 13px;
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  line-height: 26px;
}

/* 導入文のあとは広めに */
.p-post__body h3 + p + h4 { margin-top: 57px; }
.p-post__body h3 + h4 { margin-top: 24px; }

.p-post__body p { margin: 0; }

/* 表（左: 淡色地の項目名 130px / 右: 内容）。
   内容の 1 行目を太字の見出し、2 行目以降を 14px の説明にする場合は <strong> と <small> */
.p-post__body table {
  width: 100%;
  max-width: 804px;
  margin-top: 27px;
  border-collapse: collapse;
}

.p-post__body table + table { margin-top: 30px; }
.p-post__body table + h4 { margin-top: 50px; }

.p-post__body th,
.p-post__body td {
  padding: 21.5px 0;
  border-block: 1px solid #c4c8cd;
}

.p-post__body th {
  width: 130px;
  padding-left: 40px;
  background: var(--c-key-pale);
  font-weight: 700;
  text-align: left;
  vertical-align: middle;
}

.p-post__body td {
  padding-left: 30px;
  vertical-align: top;
}

.p-post__body td strong {
  display: block;
  font-weight: 700;
}

.p-post__body td small {
  display: block;
  margin-top: 10px;
  font-size: .875rem; /* 14px */
  line-height: 24px;
}

.p-post__link {
  word-break: break-all;
}

.p-post__link:hover { text-decoration: underline; opacity: 1; }

.p-post__link img { margin: -2px 0 0 6px; }

.p-post__back { margin-top: 78px; }

@media (max-width: 767.98px) {
  .p-post { padding: 40px 0 72px; }

  /* 日付は本文の上に 1 行で */
  .p-post__inner { display: block; }

  .p-post__date {
    justify-self: start;
    margin: 0 0 8px;
    text-align: left;
  }

  .p-post__year,
  .p-post__day {
    display: inline;
    font-size: 1rem;
    line-height: 1.5;
  }

  .p-post__year::after { content: "."; }

  .p-post__title {
    font-size: 1.375rem; /* 22px */
    line-height: 1.75;
  }

  .p-post__tag {
    margin-top: 20px;
    padding: 0 12px;
    font-size: .9375rem;
    line-height: 30px;
  }

  .p-post__body { margin-top: 36px; font-size: .9375rem; line-height: 1.9; }
  .p-post__body h3 { margin-bottom: 16px; font-size: 1.25rem; line-height: 1.45; }
  .p-post__body h4 { margin: 20px 0 8px; font-size: 1rem; }
  .p-post__body h3 + p + h4 { margin-top: 36px; }
  .p-post__body h3 + h4 { margin-top: 20px; }

  .p-post__body table { margin-top: 20px; }
  .p-post__body table + table { margin-top: 20px; }
  .p-post__body table + h4 { margin-top: 36px; }

  .p-post__body th,
  .p-post__body td { padding-block: 14px; }

  .p-post__body th {
    width: 84px;
    padding-left: 12px;
  }

  .p-post__body td { padding-left: 14px; }
  .p-post__body td small { margin-top: 6px; font-size: .8125rem; line-height: 1.7; }

  .p-post__back { margin-top: 48px; }
}