/* =========================================================
   news.css — single-news 基本デザイン（読みやすさ強化版）
   仕様：
     - 上部：NEWS（大見出し）＋「ニュース」（サブ）＋ 一覧へ戻る
     - 本体：角丸カード内に「画像 → 区分＋公開日 → 区切り線 → タイトル → 本文」
     - 下部：前後ナビ → 一覧へ戻る → TOPに戻る
   ポイント：
     - 記事コンテンツ幅を拡大（最大 1120px）
     - 本文の文字サイズ＆行間を拡大、余白もゆったりに
     - すべて .news-* 接頭辞でスコープ（他ページに非干渉）
     - 区分（.news-chip）・日付（.news-date）はタイトルより小さく（微小化）
     - 「一覧に戻る」（.news-backlink）は“枠のみ”→ホバーで下から#333がせり上がり文字反転
       ※ちらつき対策で ::after + transform（GPU合成）を使用
     - 前/次リンク（.news-pager）は同テイストに刷新：
       枠のみ → ホバーで下から#333がスライドイン＆文字反転
       矢印は ← → を常時表示し、ホバー時に
       「その場から矢印方向へスライドアウト」＋「逆側から同矢印がスライドイン」
     - TOPに戻る（.news-toplink）も“枠のみ”→ホバーで下からスライドイン＆文字反転（矢印なし）
       角丸は小さめ（8px）、横幅は十分に確保
     - 本文中のテキストリンクは #333 ＋ ドット下線、ホバーで薄い色（#666）へ

   【今回の変更点（追加仕様）】
     - single-news.php の前後ナビを「アイキャッチ＋タイトル」に変更したため、
       画像付き前後ナビ専用のバリアント .news-pager--thumb を追加。
       既存のテキストボタン版（矢印アニメ／下から塗り）はそのまま維持。
       バリアント配下では矢印アニメ等を“無効化”し、カード風プレビューに最適化。
     - ★サムネイルが無い場合のために、同サイズ領域へ「no-image」テキストの
       プレースホルダ（枠付き）を表示する .news-pager__noimg を追加。
     - ★公開日・更新日の横に表示する編集リンク（.news-editlink）を新設。
       └ メタ行のトーンに合わせた控えめな見た目／フォーカス可視化を付与。
   ========================================================= */


/* ------------------------------
   テーマ内で使い回すカスタムプロパティ
   ------------------------------ */
:root{
  --news-accent: #333;                /* テキスト・アクセント基調色 */
  --news-border: #e2e2e2;             /* 枠線・区切り線 */
  --news-radius: 16px;                /* カード角丸 */
  --news-max: clamp(720px, 92vw, 1120px); /* 記事本体の最大幅 */

  /* 見出し（タイトル）基準サイズ */
  --news-title-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.1rem);

  /* 区分・日付（メタ）サイズ：タイトルより小さめ（さらに小型化） */
  --news-meta-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.2rem);
}


/* =========================================================
   ページヘッダ（NEWS 見出し・サブタイトル・一覧へ戻る）
   ========================================================= */
.news-head{
  text-align: center;
  padding: clamp(32px, 6vw, 64px) 16px 12px;
}
.news-head__title{
  font-size: clamp(2.6rem, 7.2vw, 5.2rem);
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--news-accent);
  margin: 0;
  line-height: 1.08;
  text-transform: uppercase;
}
.news-head__subtitle{
  margin: 8px 0 0;
  font-size: .95rem;
  color: #666;
  letter-spacing: .08em;
}
.news-head__back{
  margin-top: 14px;
}

/* ▼ 一覧に戻る：枠のみ→ホバーで下から塗りが上がり文字反転。
   ※ちらつき回避のため ::after + translate3d でGPU合成。 */
.news-backlink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;

  /* 少し大きめの押しやすいサイズ */
  font-size: clamp(1rem, 0.95rem + .4vw, 1.25rem);
  padding: .9em 1.4em;
  line-height: 1.1;
  font-weight: 600;

  color: var(--news-accent);
  text-decoration: none;
  border: 1px solid var(--news-accent);
  border-radius: 999px;

  /* 横幅を持たせて“ボタンらしさ”を強化 */
  min-inline-size: clamp(240px, 48vw, 320px);

  /* 擬似要素クリップ用 */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: none;

  transition: color .35s ease, transform .06s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.news-backlink::before{ content: none; } /* ← は不要 */
.news-backlink::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--news-accent);
  transform: translate3d(0, 100%, 0); /* 下に隠す */
  transition: transform .35s ease;
  will-change: transform;
  z-index: -1; /* テキストの下に敷く */
}
.news-backlink:hover{
  color: #fff;
}
.news-backlink:hover::after{
  transform: translate3d(0, 0, 0);    /* 下→上 */
}
.news-backlink:active{
  transform: translateY(1px);
}
.news-backlink:focus-visible{
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
}


/* =========================================================
   本文カード（アイキャッチ → メタ → 区切り線 → タイトル → 本文）
   ========================================================= */
.news-single{
  padding: clamp(12px, 3vw, 28px) 16px clamp(60px, 10vw, 120px);
}
.news-single__wrap{
  max-width: var(--news-max);
  margin: 0 auto;
}

.news-card{
  background: #fff;
  border: 1px solid var(--news-border);
  border-radius: var(--news-radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
  margin: clamp(16px, 4vw, 40px) auto 0;
}

/* --- アイキャッチ（16:9 固定・切り抜き） --- */
.news-card__thumb img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* --- 区分ピル + 公開日（必要なら更新日） --- */
.news-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: baseline;
  padding: clamp(16px, 3vw, 28px) clamp(20px, 3vw, 32px) 0;
}
.news-chip{
  display: inline-block;
  background: var(--news-accent);
  color: #fff;
  font-weight: 700;
  font-size: var(--news-meta-size);
  letter-spacing: .03em;
  border-radius: 999px;
  padding: .18em .85em;
  line-height: 1.1;
  white-space: nowrap;
}
.news-date{
  font-size: var(--news-meta-size);
  color: #666;
  line-height: 1.2;
}
.news-date.is-updated{ opacity: .9; }

/* --- 編集リンク（WP標準 edit_post_link の見た目最小調整） --- */
.news-card__meta .news-editlink{
  display: inline-flex;                 /* メタと横並び */
  align-items: center;
  margin-inline-start: .5em;            /* 日付の直後に間隔を確保 */
  font-size: var(--news-meta-size);     /* メタと同じサイズ */
}
.news-card__meta .news-editlink::before{
  /* 直前要素との区切り用の小さなドット（装飾） */
  content: "・";
  margin-inline: .2em .35em;
  opacity: .5;
}
.news-card__meta .news-editlink a{
  color: #666;                          /* 控えめな色 */
  text-decoration: none;                /* 既定は下線なし */
  padding: .1em .25em;                  /* タップ/フォーカス面積をわずかに拡大 */
  border-radius: 4px;
}
.news-card__meta .news-editlink a:hover{
  color: #333;                          /* 近接UIに合わせて少し濃く */
  text-decoration: underline;           /* ホバー時のみ下線 */
}
.news-card__meta .news-editlink a:focus-visible{
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
  text-decoration: none;
}

/* --- 区切り線（上品に薄く） --- */
.news-divider{
  border: 0;
  height: 1px;
  background: var(--news-border);
  margin: clamp(14px, 2.2vw, 22px) clamp(20px, 3vw, 32px);
}

/* --- タイトル --- */
.news-card__title{
  padding: 2px clamp(20px, 3vw, 32px) 0;
  margin: 0;
  font-size: var(--news-title-size);
  line-height: 1.35;
  font-weight: 800;
  color: #111;
}

/* --- 本文（読みやすさ最優先でゆったり） --- */
.news-card__content{
  font-size: clamp(1.06rem, 0.92rem + .7vw, 1.25rem); /* PCで約19〜20px目安 */
  line-height: 2.0;
  padding: clamp(18px, 3vw, 28px) clamp(20px, 3vw, 32px) clamp(28px, 4vw, 40px);
  color: #222;
}
.news-card__content > *:first-child{ margin-top: 0; }
.news-card__content p{ margin: 1.1em 0 1.3em; }
.news-card__content img{ max-width: 100%; height: auto; }
.news-card__content figure{ margin: 1.2em 0; }
.news-card__content h2,
.news-card__content h3,
.news-card__content h4{
  margin: 1.6em 0 .6em;
  line-height: 1.35;
}
.news-card__content ul,
.news-card__content ol{ padding-left: 1.3em; }


/* =========================================================
   前後ナビ（前のお知らせ／次のお知らせ）
   ---------------------------------------------------------
   デフォルト：枠のみ（塗り無し）
   ホバー：下から#333がせり上がり、文字は白に反転
   矢印アニメ：
     - prev：左矢印 ← がその場から左へスライドアウト
              右から同矢印がスライドイン
     - next：右矢印 → がその場から右へスライドアウト
              左から同矢印がスライドイン
   背景の塗りは background-size の高アニメで実装
   ========================================================= */
.news-pager{
  max-width: var(--news-max);
  margin: clamp(26px, 4vw, 48px) auto 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.news-pager a{
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;

  /* 枠のみの見た目 */
  color: var(--news-accent);
  border: 1px solid var(--news-accent);
  background: none;
  border-radius: 999px;

  /* ボタン寸法 */
  padding: 10px 16px;
  line-height: 1;
  font-weight: 600;

  /* 背景スライド（下→上） */
  background-image: linear-gradient(var(--news-accent), var(--news-accent));
  background-repeat: no-repeat;
  background-size: 100% 0%;     /* 初期は塗り無し */
  background-position: 0 100%;  /* 下端からスタート */
  transition: background-size .35s ease, color .35s ease, transform .06s ease;

  overflow: hidden;  /* 角丸内にクリップ */
  isolation: isolate;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* ----- prev：左の矢印アニメ ----- */
.news-pager__prev a{
  padding-left: 2.4em;          /* 矢印ぶんの余白を確保 */
}
.news-pager__prev a::before,
.news-pager__prev a::after{
  content: "←";
  position: absolute;
  left: .9em;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  transition: transform .28s ease, opacity .28s ease;
  pointer-events: none;
}
.news-pager__prev a::after{
  /* 入ってくる矢印（右から） */
  transform: translate3d(40%, -50%, 0);
  opacity: 0;
}
.news-pager__prev a:hover{
  background-size: 100% 100%;
  color: #fff;
}
.news-pager__prev a:hover::before{
  /* その場から左へ抜ける */
  transform: translate3d(-40%, -50%, 0);
  opacity: 0;
}
.news-pager__prev a:hover::after{
  /* 右から入ってきて定位置へ */
  transform: translate3d(0, -50%, 0);
  opacity: 1;
}

/* ----- next：右の矢印アニメ ----- */
.news-pager__next a{
  padding-right: 2.4em;         /* 矢印ぶんの余白を確保 */
}
.news-pager__next a::before,
.news-pager__next a::after{
  content: "→";
  position: absolute;
  right: .9em;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  transition: transform .28s ease, opacity .28s ease;
  pointer-events: none;
}
.news-pager__next a::after{
  /* 入ってくる矢印（左から） */
  transform: translate3d(-40%, -50%, 0);
  opacity: 0;
}
.news-pager__next a:hover{
  background-size: 100% 100%;
  color: #fff;
}
.news-pager__next a:hover::before{
  /* その場から右へ抜ける */
  transform: translate3d(40%, -50%, 0);
  opacity: 0;
}
.news-pager__next a:hover::after{
  /* 左から入ってきて定位置へ */
  transform: translate3d(0, -50%, 0);
  opacity: 1;
}


/* =========================================================
   ▼▼▼ 追加：画像付き前後ナビ（.news-pager--thumb バリアント） ▼▼▼
   -----------------------------------------------------------------
   - single-news.php 側で .news-pager に .news-pager--thumb が付与される。
   - 既存のテキストボタン用スタイルは“維持”しつつ、バリアント配下のみ
     見た目をカードプレビューに“上書き”する。
   - ポイント：
       1) ボタンの「下から塗り」や矢印アニメは無効化（画像を隠さない）
       2) a をブロック化して角丸カードに、内部は「画像(16:9)→タイトル」
       3) PREV/NEXT の小ラベルは a の左上にピルで表示（aria-hidden）
   ----------------------------------------------------------------- */
.news-pager.news-pager--thumb{
  gap: clamp(12px, 2.2vw, 24px);
}
.news-pager.news-pager--thumb .news-pager__prev,
.news-pager.news-pager--thumb .news-pager__next{
  flex: 1 1 0;         /* 2枚を均等に並べる */
}

/* a を“カード”に。下から塗りや円形角丸は解除し、枠・影をカード用に再設定 */
.news-pager.news-pager--thumb a{
  display: block;
  padding: 0;                          /* ボタンの内側余白は不要（カード側で管理） */
  border-radius: var(--news-radius);   /* 角丸カード */
  overflow: hidden;
  background: #fff;                    /* カード地色 */
  border: 1px solid var(--news-border);
  color: inherit;                      /* テキスト色は継承 */
  background-image: none;              /* ← ボタン版の“下から塗り”を無効化 */
  transition: box-shadow .25s ease, border-color .25s ease, transform .06s ease;
}

/* ▲ ボタン版の矢印アニメを完全に無効化（競合防止） */
.news-pager.news-pager--thumb .news-pager__prev a::before,
.news-pager.news-pager--thumb .news-pager__prev a::after,
.news-pager.news-pager--thumb .news-pager__next a::before,
.news-pager.news-pager--thumb .news-pager__next a::after{
  content: none !important;
}

/* ホバー：カードの“浮き”のみ（画像はほんのり拡大） */
.news-pager.news-pager--thumb a:hover{
  border-color: #d8d8d8;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  color: inherit;                      /* 反転しない（画像を隠さない） */
  background-color: #fff;
}
.news-pager.news-pager--thumb a:focus-visible{
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
}

/* PREV/NEXT の小ラベル（任意表示）：a の左上にピル */
.news-pager.news-pager--thumb a{ position: relative; }
.news-pager.news-pager--thumb .news-pager__label{
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  background: rgba(0,0,0,.66);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 8px;
  border-radius: 999px;
  pointer-events: none;                /* 装飾用 */
}

/* 画像：16:9 固定・切り抜き。ホバー時にごく僅かだけ拡大（SPでは後述で無効） */
.news-pager__thumb{
  position: relative;
  aspect-ratio: 16 / 9;
  background: #f2f2f2;
  overflow: hidden;
}
.news-pager__thumb img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transform: none;
  transition: transform .35s ease;
}
.news-pager.news-pager--thumb a:hover .news-pager__thumb img{
  transform: scale(1.03);
}

/* ★NEW：サムネ無し時のプレースホルダ（同じ領域に“no-image”＋枠）
   - figure.news-pager__thumb 内に .news-pager__noimg を挿入する想定
   - 画像と同寸で中央寄せ、淡色背景＋細枠、軽いトーンの文字 */
.news-pager__noimg{
  position: absolute; inset: 0;             /* 画像と同じ領域いっぱい */
  display: grid; place-items: center;       /* テキストを中央へ */
  background: #f6f6f6;                      /* うっすら灰色の台紙 */
  border: 1px solid var(--news-border);     /* 細い枠で“サムネ枠感”を強調 */
  color: #b4b4b4;                           /* プレースホルダの文字色 */
  font: 700 .9rem/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing: .08em;
  text-transform: none;                      /* “no-image” の表記を保持 */
  user-select: none; -webkit-user-select:none;
  pointer-events: none;                      /* 視覚要素としてイベントを拾わない */
}

/* タイトル：2行省略で整える */
.news-pager__title{
  display: block;
  padding: 12px 14px 16px;
  font-weight: 800;
  font-size: clamp(1rem, .9rem + .6vw, 1.25rem);
  line-height: 1.35;
  color: #111;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* モバイルでは上下に積む（prev/next を縦並び） */
@media (max-width: 640px){
  .news-pager.news-pager--thumb{ flex-direction: column; }
}

/* “動きを抑える”設定のときは、カードのアニメも最小化 */
@media (prefers-reduced-motion: reduce){
  .news-pager.news-pager--thumb a,
  .news-pager.news-pager--thumb .news-pager__thumb img{
    transition: none !important;
  }
}


/* =========================================================
   下部リンク（一覧に戻る／TOPに戻る）
   ---------------------------------------------------------
   ※ 下部の「一覧に戻る」も .news-backlink を付ければ同じ見た目
   --------------------------------------------------------- */
.news-links{
  max-width: var(--news-max);
  margin: clamp(20px, 4vw, 56px) auto 0;
  text-align: center;
  display: grid;
  gap: 12px;
}

/* ★ TOPに戻る：デフォルトは“枠のみ”（塗りなし）・角丸は小さめ（8px）
   → ホバーで下から #333 がスライドインし、文字は白に反転（矢印なし） */
.news-toplink{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: clamp(1rem, 0.95rem + .35vw, 1.2rem);
  font-weight: 600;
  text-decoration: none;

  color: var(--news-accent);         /* デフォルト：#333 文字 */
  border: 1px solid var(--news-accent);
  border-radius: 8px;                /* ← 角丸は小さめ */
  background: none;                  /* ← 塗りなし */

  /* 横幅をしっかり確保（中央寄せのまま） */
  padding: .9em 1.6em;
  min-inline-size: clamp(240px, 48vw, 360px);

  overflow: hidden;
  isolation: isolate;
  transition: color .35s ease, transform .06s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.news-toplink::before{ content: none; } /* 矢印は不要 */

/* 下から#333がせり上がるレイヤー（テキストの下に敷く） */
.news-toplink::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--news-accent);
  transform: translate3d(0, 100%, 0); /* 下に隠しておく */
  transition: transform .35s ease;
  will-change: transform;
  z-index: -1;                        /* テキストより下 */
}

/* ホバーで#333が上がり、文字は白に反転 */
.news-toplink:hover{
  color: #fff;
}
.news-toplink:hover::after{
  transform: translate3d(0, 0, 0);    /* 下→上へスライドイン */
}

/* 押下のちょい沈み＆フォーカス可視化 */
.news-toplink:active{ transform: translateY(1px); }
.news-toplink:focus-visible{
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
}


/* =========================================================
   本文中の“テキストリンク”のデザイン（ボタン風以外）
   - デフォルト：#333、下線はドット（……）
   - ホバー/フォーカス：色を #666 に（下線も同色で追随）
   - 既存のボタン風リンク（.news-backlink / .news-toplink / .news-pager a）
     には当てないため、.news-card__content 内に限定
   ========================================================= */
.news-card__content a{
  color: #333;
  text-decoration-line: underline;
  text-decoration-style: dotted;   /* ← 下線を「……」に */
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;    /* 文字と下線の間隔を少し広めに */
  text-decoration-color: currentColor;
  text-decoration-skip-ink: auto;  /* 画面での滲み/衝突を回避 */

  transition: color .2s ease, text-decoration-color .2s ease;
}
.news-card__content a:hover,
.news-card__content a:focus-visible{
  color: #666;                      /* 薄い色へ */
  text-decoration-color: currentColor;
  outline: none;
}
/* ▼ 古いブラウザ向けフォールバック
   （text-decoration-style が無い環境では border-bottom のドットに） */
@supports not (text-decoration-style: dotted){
  .news-card__content a{
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    padding-bottom: 2px;
  }
}


/* =========================================================
   ★ 追加：スクロール連動リビール（下からスライドイン）
   ---------------------------------------------------------
   ・JSが対象要素に data-reveal と --reveal-delay(ms) を付与。
   ・初期は「準備中」クラス（.is-prepared）で非表示＋下から待機。
   ・画面に入ったら「表示」クラス（.is-inview）でフェード＋上方向へ。
   ・transform/opacity のみを操作するため CLS は発生しません。
   ・JS無効時は .is-prepared が付かない＝常時表示（安全設計）。
   ========================================================= */
.news-single [data-reveal].is-prepared{
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.news-single [data-reveal].is-inview{
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--reveal-delay, 0ms); /* 例：80ms, 120ms … */
}

/* =========================================================
   レスポンシブ微調整
   ========================================================= */
@media (max-width: 640px){
  .news-card__content{ padding: 12px 16px 20px; }
  .news-card__title{ padding: 2px 16px 0; }
  .news-card__meta{ padding: 14px 16px 0; }
  .news-divider{ margin: 12px 16px; }
}
@media (max-width: 480px){
  .news-backlink{ min-inline-size: 100%; } /* 一覧に戻るを横いっぱいに */
  .news-toplink { min-inline-size: 100%; } /* TOPに戻るも横いっぱいに */
}

/* ユーザー環境配慮：アニメ最小化（動きが苦手な方へ） */
@media (prefers-reduced-motion: reduce){
  .news-backlink::after,
  .news-toplink::after{ transition: none; }
  .news-backlink,
  .news-toplink,
  .news-pager a{ transition: none; }
  .news-pager__prev a::before,
  .news-pager__prev a::after,
  .news-pager__next a::before,
  .news-pager__next a::after{ transition: none; }

  /* 画像付き前後ナビのアニメも停止 */
  .news-pager.news-pager--thumb a,
  .news-pager.news-pager--thumb .news-pager__thumb img{
    transition: none !important;
  }

  /* プレースホルダ自体はトランジション無し（明示・安全網） */
  .news-pager__noimg{ transition: none !important; }

  /* ★追加：リビールを無効化（常時表示に） */
  .news-single [data-reveal].is-prepared,
  .news-single [data-reveal].is-inview{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}