@charset "UTF-8";
/* ==========================================================
   news.css — お知らせ（一覧・詳細 共通）
   style2.css ベース / Bootstrap不使用 / 既存マークアップ維持
   読み込み順： style2.css → news.css
   scope : main.page-news
   ========================================================== */

/* ==========================================================
   0. 使用されているユーティリティの最小shim
   ========================================================== */
.page-news .d-flex { display: flex }
.page-news .d-inline-flex { display: inline-flex }
.page-news .align-items-center { align-items: center }
.page-news .position-relative { position: relative }
.page-news .text-center { text-align: center }
.page-news .text-uppercase { text-transform: uppercase }
.page-news .text-nowrap { white-space: nowrap }
.page-news .text-decoration-none { text-decoration: none }
.page-news .mx-auto { margin-inline: auto }

.page-news .gap-2 { gap: .5rem }
.page-news .gap-3 { gap: 1rem }
.page-news .mb-4 { margin-bottom: 1.35rem }
.page-news .mt-5 { margin-top: 2.7rem }
.page-news .py-3 { padding-block: 1rem }
.page-news .py-5 { padding-block: 2.7rem }
.page-news .pb-4 { padding-bottom: 1.35rem }
.page-news .pb-5 { padding-bottom: 2.7rem }
.page-news .pt-4 { padding-top: 1.35rem }
.page-news .px-3 { padding-inline: .9em }
.page-news .py-2 { padding-block: .45em }

.page-news .fw-black { font-weight: 700 }
.page-news .fw-bold { font-weight: 700 }
.page-news .small { font-size: .875em }
.page-news .fs-4 { font-size: 1.35em }
.page-news .text-dark { color: var(--ink) }
.page-news .text-secondary { color: var(--muted) }
.page-news .text-white { color: #fff }
.page-news .text-orange { color: var(--orange) }
.page-news .lh-sm { line-height: 1.25 }

.page-news .border-bottom { border-bottom: 1px solid var(--line) }
.page-news .border-top { border-top: 1px solid var(--line) }

/* デザインシステムは角丸・装飾ブロブを使わない */
.page-news .rounded-0,
.page-news .rounded-2 { border-radius: 0 }
.page-news .hero-blob { display: none }

/* ==========================================================
   1. ヒーロー（ページ見出し）
   ========================================================== */
.page-news .hero-section {
  padding: 2.7rem 0 1.35rem;
  border-bottom: 1px solid var(--line);
}

.page-news .badge-custom {
  display: inline-block;
  padding: .45em .9em;
  border: 1px solid #f0c5a8;
  background: #fff7f0;
  color: var(--orange);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.45;
}

.page-news .hero-title {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 3.375rem);
  line-height: 1.25;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}

/* ==========================================================
   2. カラム幅（一覧・詳細共通）
   ========================================================== */
.page-news .col-lg-8 {
  width: 100%;
  max-width: 52em;
  min-width: 0;
}

.page-news .col-lg-9 {
  max-width: 56em;
}

/* ==========================================================
   3. 一覧（行リンク）
   ========================================================== */

.page-news .info-item {
	list-style: none;
}


.page-news a.d-flex {
  transition: background-color .2s, color .2s;
}

.page-news a.d-flex:hover {
  background: var(--soft);
}

.page-news a.d-flex:hover .text-dark:last-child {
  color: var(--orange);
}

/* カテゴリバッジ（お知らせ 等） */
.page-news .badge {
  display: inline-block;
  flex: none;
  padding: .3em .6em;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.page-news .badge.bg-dark {
  background: var(--navy);
  color: #fff;
}

/* 日付 */
.page-news a.d-flex .text-secondary {
  flex: none;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}

/* タイトル */
.page-news a.d-flex .text-dark:last-child {
  line-height: 1.7;
  text-wrap: pretty;
}

/* ==========================================================
   4. 詳細（記事カード）
   ========================================================== */
.page-news .news-article {
  padding: 2.7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
}

.page-news .news-article h2 {
  margin: 0 0 1em;
  padding-left: .6em;
  border-left: .18em solid var(--orange);
  font-size: 1.5em;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
}

/* 本文（TinyMCE出力） */
.page-news .inner {
  line-height: 1.9;
}

.page-news .inner p {
  margin: 0 0 1.35em;
  text-wrap: pretty;
}

.page-news .inner p:last-child { margin-bottom: 0 }

.page-news .inner a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .25em;
}

.page-news .inner ul,
.page-news .inner ol {
  margin: 0 0 1.35em;
  padding-left: 1.5em;
}

.page-news .inner img {
  max-width: 100%;
  height: auto;
}

/* 一覧へ戻る */
.page-news a[href].text-orange {
  letter-spacing: .08em;
  transition: color .2s;
}

.page-news a[href].text-orange:hover {
  color: var(--orange-dark);
}

/* ==========================================================
   5. 初回表示のフェードイン（JS不要）
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  .page-news a.d-flex,
  .page-news .news-article {
    transition: opacity .45s ease, translate .45s ease, background-color .2s, color .2s;
    transition-behavior: allow-discrete;
  }
  @starting-style {
    .page-news a.d-flex,
    .page-news .news-article {
      opacity: 0;
      translate: 0 .75em;
    }
  }
}

/* ==========================================================
   6. レスポンシブ
   ========================================================== */
@media (max-width: 800px) {
  .page-news .hero-section { padding: 2rem 0 1rem }
  .page-news .hero-title { font-size: 2.1rem }   /* ≒29.4px（モバイル上限30px内） */

  /* 一覧行：バッジ＋日付を1行目、タイトルを2行目へ折り返し */
  .page-news a.d-flex {
    flex-wrap: wrap;
    gap: .5rem 1rem;
  }

  .page-news a.d-flex .text-dark:last-child {
    flex-basis: 100%;
  }

  .page-news .news-article { padding: 1.35rem 1rem }
}