/* ======================================================
   single-important_notice.css
   重要なお知らせ（single）
   - トップの「赤帯＋白カプセル」トーンを踏襲
====================================================== */

.single-important-notice{
  /* トップの重要枠に寄せた赤 */
  --notice-red: #d94a43;
  --notice-red-deep: #c83e38;

  /* 文字・枠 */
  --notice-text: #222;
  --notice-muted: #555;
  --notice-border: rgba(0,0,0,.10);

  /* 幅 */
  --notice-max: 980px;
}

/* ======================================================
   Layout / Card
====================================================== */

.single-important-notice .page-content,
.single-important-notice .page-header{
  max-width: var(--notice-max);
  margin-inline: auto;
  padding-inline: var(--gutter, 16px);
  box-sizing: border-box;
}

/* ヒーロー下の余白（必要なら） */
.single-important-notice .page-hero + .page-header{
  margin-top: 18px;
}

/* ======================================================
   Header (赤帯・トップの重要表示を意識)
====================================================== */

.single-important-notice .page-header{
  /* “赤帯の上に白カプセル”の印象を、single では「赤ライン＋白カード」に変換 */
  background: #fff;
  border: 1px solid var(--notice-border);
  border-top: 6px solid var(--notice-red);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  border-radius: 0;
  padding: 18px 18px 14px;
}

/* タイトル */
.single-important-notice .page-title{
  margin: 0 0 10px;
  font-weight: var(--fw-bold, 700);
  color: var(--notice-text);
  line-height: 1.25;

  /* 見出しが長い時に読みやすい */
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: .02em;
}

/* メタ：日付＋重要ラベル */
.single-important-notice .entry-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 2px;

  color: var(--notice-muted);
  font-size: 14px;
  line-height: 1.2;
}

/* 日付を「白カプセル」っぽく */
.single-important-notice .entry-meta time{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
  border-radius: 999px;

  color: #222;
  font-weight: var(--fw-semi, 600);
}

/* notice_level（ACF）バッジ：トップの「重要なお知らせ」感 */
.single-important-notice .notice-level{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.0);

  font-weight: var(--fw-bold, 700);
  letter-spacing: .02em;
}

/* 値が「重要」のときは赤帯トーン */
.single-important-notice .notice-level--重要,
.single-important-notice .notice-level--important{
  background: var(--notice-red);
  color: #fff;
}

/* 「通常」等は落ち着いた表示 */
.single-important-notice .notice-level--通常,
.single-important-notice .notice-level--normal{
  background: rgba(0,0,0,.06);
  color: #222;
}

/* ======================================================
   Content (本文：読みやすさ優先)
====================================================== */

.single-important-notice .page-content{
  margin-top: 16px;

  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  border-radius: 0;

  padding: 18px;
}

/* 本文の基本 */
.single-important-notice .entry-content{
  color: #333;
}

.single-important-notice .entry-content > *:first-child{
  margin-top: 0;
}
.single-important-notice .entry-content > *:last-child{
  margin-bottom: 0;
}

/* リンク（重要なお知らせは“案内”が多いので視認性高め） */
.single-important-notice .entry-content a{
  color: var(--brand, #004b8d);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.single-important-notice .entry-content a:hover{
  text-decoration-thickness: 2px;
}

/* 注意文・強調ブロックをトップの“赤帯”に寄せる */
.single-important-notice .entry-content .is-style-alert,
.single-important-notice .entry-content .tch-alert,
.single-important-notice .entry-content .wp-block-group.tch-alert{
  border-left: 6px solid var(--notice-red);
  background: rgba(217,74,67,.06);
  padding: 14px 14px;
  margin: 16px 0;
}

/* 見出し（本文内）— 赤を少しだけ効かせる */
.single-important-notice .entry-content h2{

  border-left: 6px solid var(--notice-red);
  padding-left: 12px;
  margin: 26px 0 12px;
}
.single-important-notice .entry-content h3{
  margin: 22px 0 10px;
}

/* リスト */
.single-important-notice .entry-content ul,
.single-important-notice .entry-content ol{
  padding-left: 1.4em;
}

/* 画像のはみ出し防止 */
.single-important-notice .entry-content img{
  max-width: 100%;
  height: auto;
}

/* ======================================================
   Bottom Nav (戻る / 一覧へ)
====================================================== */

.single-important-notice .notice-actions{
  max-width: var(--notice-max);
  margin: 18px auto 0;
  padding-inline: var(--gutter, 16px);
  box-sizing: border-box;

  display: flex;
  justify-content: flex-end;
}

.single-important-notice .notice-actions a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 10px 14px;

  border-radius: 999px;
  background: var(--notice-red);
  color: #fff;
  font-weight: var(--fw-bold, 700);
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.single-important-notice .notice-actions a:hover{
  background: var(--notice-red-deep);
}

/* ======================================================
   Responsive
====================================================== */

@media (max-width: 640px){
  .single-important-notice .page-header{
    padding: 16px 14px 12px;
  }
  .single-important-notice .page-content{
    padding: 16px 14px;
  }
  .single-important-notice .entry-meta{
    gap: 8px 10px;
  }
}

/* ======================================================
   Kicker（⚠ 重要なお知らせ：トップの赤帯トーンを再現）
====================================================== */

.single-important-notice .notice-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;
  border-radius: 999px;

  background: var(--notice-red);
  color: #fff;

  font-weight: var(--fw-bold, 700);
  font-size: 13px;
  letter-spacing: .02em;

  /* タイトルの上で“締まる”位置 */
  margin: 0 0 10px;

  /* 白カード上で浮く感じ */
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}

.single-important-notice .notice-kicker__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;
  border-radius: 999px;

  background: rgba(255,255,255,.18);
  line-height: 1;
  font-size: 14px;
}

.single-important-notice .notice-kicker__text{
  line-height: 1;
}