/* single-news.css */

/* ------------------------------
  基本レイアウト
------------------------------ */
.news-single{
  /* 枠/背景は外す（高さは中身依存に） */
  padding: 100px 0 60px;   /* 横paddingは container が持つので0 */
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  height: auto;
  min-height: 0;
}

/* フッター下付け（既存でOK。重複あればこれを残す） */
main.news-single { flex: 1; display: block; }
@media (min-width: 769px){
  main.news-single { margin-top: var(--header-total, 96px); }
}


/* ------------------------------
  日付・カテゴリ
------------------------------ */
.single-news .news-date {
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
}

.single-news .news-label {
  display: inline-block;
  font-size: 12px;
  background-color: #002b7f; /* 緑 → 紺色 */
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  margin-left: 10px;
  white-space: nowrap; /* ラベル自体も折り返さない */
}


/* ------------------------------
  タイトル＋星アイコン横並び
------------------------------ */
.news-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 16px;
}

.news-title-wrap::after{
  content:"";
  position:absolute;
  bottom:0; left:50%;
  width:60px; height:3px;
  background:#002b7f;
  transform:translateX(-50%);
}

/* タイトル */
.news-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #002b7f;
  margin: 0;

  /* 常に1行・省略せず */
  white-space: nowrap;
}


/* ------------------------------
  本文
------------------------------ */

.news-article{
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 24px;
  max-width: 900px;           /* 読みやすい横幅に */
  margin: 0 auto;             /* 中央寄せ */
  box-sizing: border-box;
}

.single-news .news-content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.single-news .news-content img {
  display: block;
  margin: 30px auto;
  max-width: 95%; /* デスクトップ時に少し大きめ */
  height: auto;
}

/* 全ページ共通の“下付きフッター”の土台（入ってなければ） */
html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.header, .footer { flex-shrink: 0; }

/* ニュース詳細ページの <main> も伸ばす */
main.news-single {
  flex: 1;            /* ← これが肝。余白を受け持ってフッターを最下部へ */
  display: block;     /* 念のため */
}

/* （任意）上に固定ヘッダーがあるなら、被り防止の余白 */
@media (min-width: 769px) {
  main.news-single {
    /* 既に --header-total を使っているならそれを流用 */
    margin-top: var(--header-total, 96px);
  }
}


/* ------------------------------
  戻るボタン（一覧ページへ）
------------------------------ */
.back-to-archive {
  margin-top: 60px;
  text-align: center;
}

.back-to-archive .btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  background-color: #4caf50;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.back-to-archive .btn:hover {
  background-color: #388e3c;
}


/* フッターを下に固定したい場合は別途mainで管理 */
main.news-single {
  flex: 1 auto; /* ← 高さは自動で伸縮 */
}


/* ====== スマホ最適化 ====== */
@media (max-width: 768px){
  .news-single{ padding: 60px 0 36px; }
  .news-article{
    padding: 16px;
    border-radius: 6px;
    max-width: 100%;
    margin: 0 16px;           /* 端に張り付かないよう余白 */
  }

  .news-title-wrap{
    flex-direction: column;
    gap: 8px;
    margin-bottom: 28px;
    padding-bottom: 12px;
  }
  .news-title-wrap::after{ width:48px; height:3px; }

  .news-title{
    font-size: 1.25rem;
    line-height: 1.35;
    white-space: nowrap;      /* 1行維持 */
  }

  .single-news .news-content img{
    max-width: 100%;
    margin: 20px auto;
  }
}

/* 極小端末 */
@media (max-width: 420px){
  .news-article{ margin: 0 12px; padding:14px; }
  .news-title{ font-size: 1.15rem; }
}

/* ===== はみ出し防止の共通ケア ===== */
.news-article {
  box-sizing: border-box;
  overflow: visible;             /* クリップしない */
}
.news-article * {
  max-width: 100%;
  box-sizing: border-box;
}
.news-article img {
  height: auto;
}

/* PC: タイトルは1行維持（これまで通り） */
@media (min-width: 769px) {
  .news-title {
    white-space: nowrap;
    overflow: visible;           /* 省略しない／…なし */
    text-overflow: clip;
  }
}

/* スマホ: タイトルは自動改行で枠内に収める（…なし） */
@media (max-width: 768px) {
  .news-title {
    white-space: normal;         /* ← 1行固定を解除して折り返し可 */
    overflow-wrap: anywhere;     /* 長い語でも折り返す */
    word-break: break-word;
    text-wrap: balance;          /* 対応ブラウザで見栄えよく改行 */
  }

  /* 本文やリンクのはみ出しも防ぐ */
  .news-content {
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.75;
  }
  .news-content a {
    word-break: break-all;       /* 超長URL対策 */
  }
}