@charset "UTF-8";
/* =============================================================================
 * NIPPONIA 灯サポーター ── ブログ記事本文スタイル（nipponia-blog.css）
 * -----------------------------------------------------------------------------
 * WordPress 投稿（the_content()）が出力する素の HTML（見出し / 段落 / リスト
 * など）を、参照サイト https://nipponia-note.sakura.ne.jp/akari/st/ の
 * デザイン言語（和紙色の地・Noto Serif JP の細身見出し・灯（あかり）色アクセント）
 * に合わせて整形する。
 *
 * 【スコープ】
 *   .p-news-detail__body       … 投稿詳細（single.php ＝ ブログ記事）
 *   .p-activities-detail__body … 地域だより / 有料コンテンツ詳細
 *   .p-news-detail__hero-img img … ブログ記事アイキャッチ（常に16:9）
 *   いずれもブログ記事詳細の要素。会員系ページ（.p-login / .p-mypage 等）には
 *   一切セレクタが当たらないため影響しない。
 *
 * 【トークン】
 *   既存テーマの :root 変数（nipponia.css が全ページで読込済）を参照し、
 *   単体表示でも崩れないよう参照サイトの実 HEX をフォールバックに持たせる。
 *   既存の基本設定（_variables.scss / :root）は変更しない。
 *
 * 【読込順】
 *   akari-style（style.css）より後に enqueue すること。素タグ（h2/p/ul…）
 *   への element セレクタなので、同一詳細度でも後勝ちで確実に適用される。
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * A. アイキャッチ画像（記事ヒーロー）── 元画像の比率に関わらず常に 16:9
 *    二重の仕組み:
 *      ① サーバー側 … add_image_size('akari-blog-eyecatch', 1160, 653, true)
 *         で 1160×653（16:9・ハードクロップ）のリサイズ画像を生成し配信。
 *      ② CSS 側 … 生成画像・元画像の比率に関わらず 16:9 の枠へ object-fit:
 *         cover で流し込み（未再生成の旧画像や小さい元画像でも常に 16:9）。
 *    既存 style.css の .p-news-detail__hero-img img（aspect-ratio: 3/2）を
 *    同一詳細度・後読みで上書きする。
 * -------------------------------------------------------------------------- */
.p-news-detail__hero-img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
  background-color: var(--color-bg-light, #f0ece3);
}

/* -----------------------------------------------------------------------------
 * 0. 本文コンテキスト（ラッパ既定）
 *    既存 .p-news-detail__body は max-width / padding のみ持つ素のラッパ。
 *    ここに本文の基準タイポグラフィ（書体・行間・字間・色）を与える。
 * -------------------------------------------------------------------------- */
.p-news-detail__body,
.p-activities-detail__body {
  font-family: var(--font-sans, "Noto Sans JP", "游ゴシック", "YuGothic", sans-serif);
  font-size: 0.9375rem; /* 15px */
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--color-text-dark, #5a5a52);
  overflow-wrap: break-word;
  word-break: normal;
}
@media screen and (min-width: 769px) {
  .p-news-detail__body,
  .p-activities-detail__body {
    font-size: 1rem; /* 16px */
    line-height: 2.05;
  }
}

/* 先頭・末尾要素の余白リセット（本文の縦リズムを崩さない） */
.p-news-detail__body > :first-child,
.p-activities-detail__body > :first-child {
  margin-top: 0;
}
.p-news-detail__body > :last-child,
.p-activities-detail__body > :last-child {
  margin-bottom: 0;
}

/* float 画像などのクリアフィックス */
.p-news-detail__body::after,
.p-activities-detail__body::after {
  content: "";
  display: block;
  clear: both;
}

/* -----------------------------------------------------------------------------
 * 1. 段落（p）
 * -------------------------------------------------------------------------- */
.p-news-detail__body p,
.p-activities-detail__body p {
  margin: 0 0 1.5rem;
  line-height: inherit;
}
.p-news-detail__body p:last-child,
.p-activities-detail__body p:last-child {
  margin-bottom: 0;
}

/* リード文（先頭段落を少し大きく・濃く：任意で .is-lead 付与も可） */
.p-news-detail__body > p.is-lead,
.p-activities-detail__body > p.is-lead {
  font-size: 1.0625rem;
  line-height: 2;
  color: var(--color-text, #1f1f1a);
}

/* -----------------------------------------------------------------------------
 * 2. 見出し（h1–h6）── Noto Serif JP・灯色アクセント
 * -------------------------------------------------------------------------- */
.p-news-detail__body :is(h1, h2, h3, h4, h5, h6),
.p-activities-detail__body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-serif, "Noto Serif JP", "Yu Mincho", serif);
  color: var(--color-text, #1f1f1a);
  line-height: 1.5;
  letter-spacing: 0.06em;
}

/* h1（本文中では稀。タイトルは記事ヘッダ側が担当） */
.p-news-detail__body h1,
.p-activities-detail__body h1 {
  margin: 3rem 0 1.25rem;
  font-weight: 300;
  font-size: 1.75rem;
}
@media screen and (min-width: 769px) {
  .p-news-detail__body h1,
  .p-activities-detail__body h1 {
    font-size: 2.25rem;
  }
}

/* h2 ── 上部に灯色グラデ短線＋下部ヘアライン（参照サイトの区切り意匠） */
.p-news-detail__body h2,
.p-activities-detail__body h2 {
  margin: 3rem 0 1.5rem;
  padding-bottom: 0.6em;
  font-weight: 500;
  font-size: 1.5rem;
  border-bottom: 1px solid var(--color-border, #d9d3c3);
}
.p-news-detail__body h2::before,
.p-activities-detail__body h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-bottom: 0.9rem;
  background: linear-gradient(90deg, var(--color-accent, #d98a3c), #e8a157);
}
@media screen and (min-width: 769px) {
  .p-news-detail__body h2,
  .p-activities-detail__body h2 {
    margin-top: 3.5rem;
    font-size: 2rem;
  }
}

/* h3 ── 灯色ドットマーカー（既存 .p-news-detail__heading--dot と統一） */
.p-news-detail__body h3,
.p-activities-detail__body h3 {
  position: relative;
  margin: 2.5rem 0 1rem;
  padding-left: 1.375rem;
  font-weight: 500;
  font-size: 1.25rem;
}
.p-news-detail__body h3::before,
.p-activities-detail__body h3::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #e8a157;
}
@media screen and (min-width: 769px) {
  .p-news-detail__body h3,
  .p-activities-detail__body h3 {
    margin-top: 2.75rem;
    font-size: 1.375rem;
  }
}

/* h4 ── 灯色の細い左罫 */
.p-news-detail__body h4,
.p-activities-detail__body h4 {
  margin: 2rem 0 0.85rem;
  padding-left: 0.75rem;
  font-weight: 600;
  font-size: 1.125rem;
  border-left: 3px solid var(--color-accent, #d98a3c);
}
@media screen and (min-width: 769px) {
  .p-news-detail__body h4,
  .p-activities-detail__body h4 {
    font-size: 1.1875rem;
  }
}

/* h5 */
.p-news-detail__body h5,
.p-activities-detail__body h5 {
  margin: 1.75rem 0 0.75rem;
  font-weight: 600;
  font-size: 1.0625rem;
}

/* h6 ── 英字ラベル調（Cormorant / Manrope・大字間・灯色） */
.p-news-detail__body h6,
.p-activities-detail__body h6 {
  margin: 1.75rem 0 0.75rem;
  font-family: var(--font-en, "Cormorant Garamond", "Manrope", serif);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent, #d98a3c);
}

/* -----------------------------------------------------------------------------
 * 3. 本文リンク（素の <a>）
 * -------------------------------------------------------------------------- */
.p-news-detail__body a,
.p-activities-detail__body a {
  color: var(--color-accent, #d98a3c);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(217, 138, 60, 0.4);
  transition: color 0.3s, text-decoration-color 0.3s;
}
.p-news-detail__body a:hover,
.p-activities-detail__body a:hover {
  color: #e8a157;
  text-decoration-color: #e8a157;
}

/* -----------------------------------------------------------------------------
 * 4. リスト（ul / ol）── リセットで list-style:none 済のため独自マーカーを再付与
 * -------------------------------------------------------------------------- */
.p-news-detail__body :is(ul, ol),
.p-activities-detail__body :is(ul, ol) {
  margin: 0 0 1.5rem;
  padding-left: 0.25rem;
}
.p-news-detail__body li,
.p-activities-detail__body li {
  position: relative;
  margin-bottom: 0.6em;
  padding-left: 1.6em;
  line-height: 1.95;
}
.p-news-detail__body li:last-child,
.p-activities-detail__body li:last-child {
  margin-bottom: 0;
}

/* ul ── 灯色の小円マーカー */
.p-news-detail__body ul > li::before,
.p-activities-detail__body ul > li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0.35em;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: var(--color-accent, #d98a3c);
}

/* ol ── カウンタ（灯色・明朝の連番） */
.p-news-detail__body ol,
.p-activities-detail__body ol {
  counter-reset: nipponia-ol;
}
.p-news-detail__body ol > li,
.p-activities-detail__body ol > li {
  counter-increment: nipponia-ol;
  padding-left: 2em;
}
.p-news-detail__body ol > li::before,
.p-activities-detail__body ol > li::before {
  content: counter(nipponia-ol) ".";
  position: absolute;
  top: 0;
  left: 0;
  min-width: 1.5em;
  font-family: var(--font-serif, "Noto Serif JP", "Yu Mincho", serif);
  font-weight: 600;
  color: var(--color-accent, #d98a3c);
  letter-spacing: 0.02em;
}

/* 入れ子リスト */
.p-news-detail__body :is(ul, ol) :is(ul, ol),
.p-activities-detail__body :is(ul, ol) :is(ul, ol) {
  margin: 0.6em 0 0;
}
/* 入れ子 ul ── 中空の小円 */
.p-news-detail__body ul ul > li::before,
.p-activities-detail__body ul ul > li::before {
  top: 0.68em;
  width: 0.375rem;
  height: 0.375rem;
  background-color: transparent;
  border: 1px solid var(--color-accent, #d98a3c);
}
/* 入れ子 ol ── 小文字英字 */
.p-news-detail__body ol ol,
.p-activities-detail__body ol ol {
  counter-reset: nipponia-ol-sub;
}
.p-news-detail__body ol ol > li,
.p-activities-detail__body ol ol > li {
  counter-increment: nipponia-ol-sub;
}
.p-news-detail__body ol ol > li::before,
.p-activities-detail__body ol ol > li::before {
  content: counter(nipponia-ol-sub, lower-alpha) ".";
}

/* 定義リスト（dl / dt / dd） */
.p-news-detail__body dl,
.p-activities-detail__body dl {
  margin: 0 0 1.5rem;
}
.p-news-detail__body dt,
.p-activities-detail__body dt {
  margin-bottom: 0.35em;
  font-family: var(--font-serif, "Noto Serif JP", "Yu Mincho", serif);
  font-weight: 600;
  color: var(--color-text, #1f1f1a);
}
.p-news-detail__body dd,
.p-activities-detail__body dd {
  margin: 0 0 1.1em;
  padding-left: 1em;
  border-left: 1px solid var(--color-border, #d9d3c3);
}

/* -----------------------------------------------------------------------------
 * 5. 引用（blockquote）
 * -------------------------------------------------------------------------- */
.p-news-detail__body blockquote,
.p-activities-detail__body blockquote {
  position: relative;
  margin: 2rem 0;
  padding: 1.5rem 1.5rem 1.5rem 2.75rem;
  background-color: var(--color-bg-light, #f0ece3);
  border-left: 3px solid var(--color-accent, #d98a3c);
  border-radius: 0 4px 4px 0;
  color: var(--color-text-dark, #5a5a52);
  font-family: var(--font-serif, "Noto Serif JP", "Yu Mincho", serif);
  line-height: 1.95;
}
.p-news-detail__body blockquote::before,
.p-activities-detail__body blockquote::before {
  content: "\201C";
  position: absolute;
  top: 0.1em;
  left: 0.55rem;
  font-family: var(--font-en, "Cormorant Garamond", Georgia, serif);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-accent, #d98a3c);
  opacity: 0.35;
}
.p-news-detail__body blockquote p:last-child,
.p-activities-detail__body blockquote p:last-child {
  margin-bottom: 0;
}
.p-news-detail__body blockquote cite,
.p-activities-detail__body blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-sans, "Noto Sans JP", sans-serif);
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--color-text-muted, #8a8a80);
}
.p-news-detail__body blockquote cite::before,
.p-activities-detail__body blockquote cite::before {
  content: "— ";
}

/* -----------------------------------------------------------------------------
 * 6. 画像 / figure / キャプション ＋ 配置クラス
 * -------------------------------------------------------------------------- */
.p-news-detail__body img,
.p-activities-detail__body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.p-news-detail__body figure,
.p-activities-detail__body figure {
  margin: 2rem 0;
}
.p-news-detail__body figure img,
.p-activities-detail__body figure img {
  width: 100%;
}
.p-news-detail__body figcaption,
.p-news-detail__body .wp-caption-text,
.p-activities-detail__body figcaption,
.p-activities-detail__body .wp-caption-text {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  text-align: center;
  color: var(--color-text-muted, #8a8a80);
}

/* WordPress 配置クラス */
.p-news-detail__body .aligncenter,
.p-activities-detail__body .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.p-news-detail__body .alignleft,
.p-activities-detail__body .alignleft {
  float: left;
  margin: 0.4rem 1.5rem 1rem 0;
}
.p-news-detail__body .alignright,
.p-activities-detail__body .alignright {
  float: right;
  margin: 0.4rem 0 1rem 1.5rem;
}
.p-news-detail__body .alignnone,
.p-activities-detail__body .alignnone {
  height: auto;
}
.p-news-detail__body .wp-caption,
.p-activities-detail__body .wp-caption {
  max-width: 100%;
  margin: 2rem 0;
}
@media screen and (max-width: 768px) {
  .p-news-detail__body .alignleft,
  .p-news-detail__body .alignright,
  .p-activities-detail__body .alignleft,
  .p-activities-detail__body .alignright {
    float: none;
    margin: 1.5rem auto;
    display: block;
  }
}

/* -----------------------------------------------------------------------------
 * 7. 表（table）
 * -------------------------------------------------------------------------- */
.p-news-detail__body table,
.p-activities-detail__body table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  border-top: 1px solid var(--color-border, #d9d3c3);
  font-size: 0.875rem;
  line-height: 1.7;
}
.p-news-detail__body :is(th, td),
.p-activities-detail__body :is(th, td) {
  padding: 0.85em 1em;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border, #d9d3c3);
}
.p-news-detail__body th,
.p-activities-detail__body th {
  font-family: var(--font-serif, "Noto Serif JP", "Yu Mincho", serif);
  font-weight: 600;
  color: var(--color-text, #1f1f1a);
  background-color: var(--color-bg-light, #f0ece3);
}
.p-news-detail__body td,
.p-activities-detail__body td {
  color: var(--color-text-dark, #5a5a52);
}
@media screen and (max-width: 768px) {
  .p-news-detail__body table,
  .p-activities-detail__body table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* -----------------------------------------------------------------------------
 * 8. コード（inline code / pre）
 * -------------------------------------------------------------------------- */
.p-news-detail__body :is(code, kbd, samp),
.p-activities-detail__body :is(code, kbd, samp) {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875em;
}
.p-news-detail__body :not(pre) > code,
.p-activities-detail__body :not(pre) > code {
  padding: 0.15em 0.45em;
  background-color: var(--color-bg-light, #f0ece3);
  border: 1px solid var(--color-border, #d9d3c3);
  border-radius: 3px;
  color: var(--color-accent-hover, #c27a30);
}
.p-news-detail__body pre,
.p-activities-detail__body pre {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background-color: var(--color-bg-light, #f0ece3);
  border: 1px solid var(--color-border, #d9d3c3);
  border-radius: 4px;
  overflow-x: auto;
  line-height: 1.7;
  -webkit-overflow-scrolling: touch;
}
.p-news-detail__body pre code,
.p-activities-detail__body pre code {
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text, #1f1f1a);
}
.p-news-detail__body kbd,
.p-activities-detail__body kbd {
  padding: 0.1em 0.4em;
  background-color: var(--color-bg-light, #f0ece3);
  border: 1px solid var(--color-border, #d9d3c3);
  border-radius: 3px;
}

/* -----------------------------------------------------------------------------
 * 9. 区切り線（hr）── 中央に灯色ドットを重ねたヘアライン
 * -------------------------------------------------------------------------- */
.p-news-detail__body hr,
.p-activities-detail__body hr {
  position: relative;
  height: 1px;
  margin: 3rem 0;
  border: 0;
  background-color: var(--color-border, #d9d3c3);
}
.p-news-detail__body hr::before,
.p-activities-detail__body hr::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: #e8a157;
  box-shadow: 0 0 0 5px var(--color-bg, #fafaf7);
}

/* -----------------------------------------------------------------------------
 * 10. インライン要素
 * -------------------------------------------------------------------------- */
.p-news-detail__body :is(strong, b),
.p-activities-detail__body :is(strong, b) {
  font-weight: 700;
  color: var(--color-text, #1f1f1a);
}
.p-news-detail__body :is(em, i),
.p-activities-detail__body :is(em, i) {
  font-style: italic;
}
.p-news-detail__body mark,
.p-activities-detail__body mark {
  padding: 0.05em 0.25em;
  background-color: rgba(232, 161, 87, 0.25);
  color: var(--color-text, #1f1f1a);
  border-radius: 2px;
}
.p-news-detail__body small,
.p-activities-detail__body small {
  font-size: 0.85em;
  color: var(--color-text-muted, #8a8a80);
}
.p-news-detail__body abbr[title],
.p-activities-detail__body abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}
.p-news-detail__body :is(sub, sup),
.p-activities-detail__body :is(sub, sup) {
  font-size: 0.72em;
  line-height: 0;
}