@charset "utf-8";

/* ==========================================================================
   お知らせページ専用スタイル (css/news.css)
   ========================================================================== */

/* 日付と記事タイトルのブロック設定 */
.news-meta {
  margin-top: 15px;
  margin-bottom: 25px;
  border-bottom: 1px solid #d4d8dd;
  padding-bottom: 15px;
}

.news-date {
  font-size: 14px;
  color: #666666;
  display: block;
  margin-bottom: 5px;
}

/* 記事固有のメインタイトル（既存のh3デザインをベースに調整） */
main h3.news-page-title {
  padding-top: 0;
  margin-bottom: 0;
  font-size: 24px;
  line-height: 1.4;
  color: #011b37;
}

/* メイン写真の表示エリア */
.news-visual {
  text-align: center;
  margin: 30px 0;
}

.news-visual img {
  max-width: 100%;
  height: auto;
  border: 1px solid #d4d8dd;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* スマホ表示（画面幅639px以下）の時のタイトル文字サイズ微調整 */
@media screen and (max-width: 639px) {
  main h3.news-page-title {
    font-size: 18px;
  }
  .news-visual {
    margin: 20px 0;
  }
}

/* ==========================================================================
   人事異動用 テーブルスタイル（追記分）
   ========================================================================== */

.news-table-transfer {
  width: 100%;               /* ページの表示領域に合わせて可変 */
  table-layout: fixed;       /* 列幅を均等に固定 */
  border-collapse: collapse; /* 枠線を一本にまとめる */
  margin: 30px 0;            /* テーブル前後の余白 */
  font-size: 15px;
}

/* ヘッダー行（氏名・新職・現職）のスタイル */
main .news-table-transfer th {
  background-color: #011b37 !important; /* 御社のテーマカラー（ネイビー） */
  color: #ffffff;            /* 文字は白 */
  font-weight: bold;
  border: 1px solid #d4d8dd;
  padding: 1.0em 10px;       /* 上下に1.0文字分の余白（1.0em） */
  text-align: center;        /* 左右中央揃え */
  vertical-align: middle;    /* 上下中央揃え */
}

/* データ行（各職員の情報）のスタイル */
.news-table-transfer td {
  border: 1px solid #d4d8dd; /* 薄いグレーの枠線 */
  padding: 1.5em 10px;       /* 上下に1.5文字分の余白（1.5em） */
  text-align: center;        /* 左右中央揃え（必要に応じてleftに変更可） */
  vertical-align: middle;    /* 上下中央揃え */
}

/* 1行おきに背景色を変えて見やすくする（縞々デザイン） */
.news-table-transfer tbody tr:nth-child(even) {
  background-color: #f7f9fa;
}

/* スマホ表示（画面幅639px以下）の時の微調整 */
@media screen and (max-width: 639px) {
  .news-table-transfer {
    font-size: 13px; /* スマホでは文字サイズを少し小さくして改行を防ぐ */
  }
  .news-table-transfer th, 
  .news-table-transfer td {
    padding: 0.5em 5px; /* 横の余白を少し詰める */
  }
}