/* =========================================================
   single-news.css — NEWS 詳細ページ専用スタイル
   ---------------------------------------------------------
   役割：
     - NEWS アーカイブから遷移してくる「お知らせ詳細」のレイアウトと装飾
     - 見出し・本文カード・前後ナビ・戻りリンクを .news-* でスコープ

   構成：
     1. 共通カスタムプロパティ（色 / 角丸 / 幅などのトークン）
     2. ページヘッダー（NEWS 見出し + サブ + 一覧へ戻るボタン）
     3. 本文カードのラッパー（中央寄せレイアウト）
     4. 記事カード本体（サムネ・メタ情報・タイトル・本文）
        - Gutenberg 画像ブロックの角丸スタイル対応を含む
     5. テキスト型 前後ナビゲーション（← 前／次 →）
     6. サムネイル付き前後ナビ（.news-pager--thumb バリアント）
     7. 下部リンク（一覧に戻る / TOPに戻る）
     8. 本文中テキストリンクの装飾
     9. スクロール連動リビール用の状態クラス
    10. レスポンシブ調整（SP 時の余白・並び）
    11. prefers-reduced-motion 対応（アニメーション抑制）
   ========================================================= */


/* =========================================================
   1. 共通カスタムプロパティ（テーマ内トークン）
   ---------------------------------------------------------
   - NEWS 詳細で共通して使う色・角丸・最大幅などを :root に定義
   ========================================================= */
: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); /* 区分・日付などのメタ */
}


/* =========================================================
   2. ページヘッダー（NEWS 見出し・サブ・一覧へ戻る）
   ---------------------------------------------------------
   - ページ上部の「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;
}

/* 一覧に戻るボタン（ページヘッダー用）
   - 枠線のみの pill ボタン
   - ホバー時：下から塗りつぶし → 文字を白に反転 */
.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;
}


/* =========================================================
   3. 本文カードのラッパー（ページ中央寄せレイアウト）
   ---------------------------------------------------------
   - NEWS 本文カードをページ中央に配置するための外枠
   ========================================================= */
.news-single{
  padding: clamp(12px, 3vw, 28px) 16px clamp(60px, 10vw, 120px);
}
.news-single__wrap{
  max-width: var(--news-max);
  margin: 0 auto;  /* 画面中央に寄せる */
}


/* =========================================================
   4. 記事カード本体
   ---------------------------------------------------------
   4-1. カード外枠
   4-2. アイキャッチ画像
   4-3. メタ情報（区分 / 日付 / 右端アクション［Xシェア・編集］）
   4-4. 区切り線
   4-5. タイトル
   4-6. 本文（段落・画像・見出し）
   4-7. Gutenberg 画像ブロックの角丸スタイル
   ========================================================= */

/* 4-1. カード外枠 */
.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;
}

/* 4-2. アイキャッチ画像（16:9 固定のトリミング） */
.news-card__thumb img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* 4-3. メタ情報（カテゴリ pill + 公開日/更新日 + 右端アクション） */
.news-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: baseline;
  padding: clamp(16px, 3vw, 28px) clamp(20px, 3vw, 32px) 0;
}

/* 区分ラベル（黒地 pill） */
.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; /* 「更新日」の存在を少しだけトーンダウン */
}

/* ---------------------------------------------------------
   追加：右端アクション枠（Xシェア + 編集リンク）
   ---------------------------------------------------------
   要件：
     - 編集リンクの左に Xシェアボタンを配置
     - 右端に寄せる（左側のメタ群と分離）

   実装方針：
     - 旧実装は .news-editlink 単体に margin-left:auto を付与して右寄せしていた
     - 今回は “X + 編集” をまとめて右寄せしたいため、
       右寄せの責務を .news-actions に移す
   --------------------------------------------------------- */
.news-card__meta .news-actions{
  margin-left: auto;                 /* 右端に押し出す主役 */
  display: inline-flex;
  align-items: center;
  gap: 8px;                          /* Xボタンと編集リンクの間隔 */
}

/* SP など折返し発生時でも “右端グループ” としてまとまるように */
.news-card__meta .news-actions{
  white-space: nowrap;
}

/* Xシェアボタン（正円・背景 #222222・アイコンのみ） */
.news-card__meta .news-xshare{
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background: #222222;               /* 指定色 */
  text-decoration: none;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;

  /* -------------------------------------------------------
     方針A：ロゴ色はCSSで管理する（SVG側に色を直書きしない）
     -------------------------------------------------------
     - single-news.php 側の <path> には fill="#fff" を書かない
     - 代わりに、ボタン（.news-xshare）の文字色（color）を白にして
       SVGの path を currentColor で塗る
     - これにより「ロゴ色変更」はCSSだけで完結する
  ------------------------------------------------------- */
  color: #ffffff;                    /* ← Xロゴ（= currentColor）の色をCSSで指定 */

  /* “シンプル”の範囲で最低限の操作感だけ付与 */
  transition: transform .06s ease, filter .18s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.news-card__meta .news-xshare:hover{
  filter: brightness(1.08);
}
.news-card__meta .news-xshare:active{
  transform: translateY(1px);
}
.news-card__meta .news-xshare:focus-visible{
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
}

/* SVG：サイズを安定させる */
.news-card__meta .news-xshare__icon{
  display: block;
  width: 18px;
  height: 18px;
}

/* ---------------------------------------------------------
   方針A：SVGの塗りは currentColor を使う
   ---------------------------------------------------------
   - SVG の <path> に fill 属性を書かない（PHP側で対応済み）
   - ここで fill: currentColor を与え、親 .news-xshare の color に追従させる
   - ついでに stroke は不要なので明示しない（=塗りのみ）
   --------------------------------------------------------- */
.news-card__meta .news-xshare__icon path{
  fill: currentColor;
}

/* 編集リンクコンテナ
   - 旧：margin-left:auto で右寄せしていた
   - 新：右寄せは .news-actions が担当するため、ここでは見た目だけ維持 */
.news-card__meta .news-editlink{
  /* margin-left: auto;  ← 右寄せの責務を .news-actions に移したため削除 */
  display: inline-flex;
  align-items: center;
}

/* .post-edit-link を pill ボタン化（ブログ詳細と統一トーン） */
.news-card__meta .news-editlink .post-edit-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  border-radius: 9999px;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.news-card__meta .news-editlink .post-edit-link:hover{
  background: #f5f5f5;
}
.news-card__meta .news-editlink .post-edit-link:focus-visible{
  outline: 2px solid var(--news-accent);
  outline-offset: 2px;
}

/* 4-4. メタと本文を区切る横線 */
.news-divider{
  border: 0;
  height: 1px;
  background: var(--news-border);
  margin: clamp(14px, 2.2vw, 22px) clamp(20px, 3vw, 32px);
}

/* 4-5. 記事タイトル */
.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;
}

/* 4-6. 本文（段落・画像など）
   - 文字サイズ／行間は「読みやすさ優先」でやや大きめ
   - 余白は上下左右ともゆとりを持たせる */
.news-card__content{
  font-size: clamp(1.06rem, 0.92rem + .7vw, 1.25rem);
  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;
}

/* 4-7. Gutenberg 画像ブロックの角丸スタイル
   - デフォルト：角丸なし（四角）
   - エディタで「角丸」スタイルを選んだ場合のみ 16px で丸める */
.news-card__content .wp-block-image img{
  border-radius: 0;
}
.news-card__content .wp-block-image.is-style-rounded img{
  border-radius: 16px;
}

.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;
}


/* =========================================================
   5. テキスト型 前後ナビゲーション
   ---------------------------------------------------------
   - 旧仕様の「テキストのみボタン」型前後ナビ
   - 現在は .news-pager--thumb を併用する想定だが、
     既存レイアウトとの互換性のためスタイルを残している
   ========================================================= */
.news-pager{
  max-width: var(--news-max);
  margin: clamp(26px, 4vw, 48px) auto 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

/* 前後ボタン共通：枠のみの pill ボタン（下から塗りアニメ付き） */
.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;
}

/* 5-1. 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;
}

/* 5-2. 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;
}


/* =========================================================
   6. サムネイル付き前後ナビ（.news-pager--thumb）
   ---------------------------------------------------------
   - single-news.php 側で .news-pager に .news-pager--thumb を付与
   - 中身は「画像 16:9 ＋ タイトル 2行まで」のカード型プレビュー
   - 従来のボタンアニメと矢印はこのバリアント内では無効化する
   ========================================================= */

/* ラッパー：カード同士の間隔だけ調整 */
.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 の左上に「PREV」「NEXT」などを pill で表示する想定 */
.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 固定・塗りつぶし
   - ホバーでごくわずかに拡大 */
.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);
}

/* サムネイルが存在しない場合のプレースホルダ
   - 同じ領域に「no-image」テキストを中央表示 */
.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;
  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;
}

/* SP では前後カードを縦並びにする */
@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;
  }
}


/* =========================================================
   7. 下部リンク（一覧に戻る / TOPに戻る）
   ---------------------------------------------------------
   - 記事下部中央に配置されるボタン群
   - 一覧へ戻る：.news-backlink を再利用
   - TOPに戻る：角丸 8px のスクロール用ボタン
   ========================================================= */
.news-links{
  max-width: var(--news-max);
  margin: clamp(20px, 4vw, 56px) auto 0;
  text-align: center;
  display: grid;
  gap: 12px;
}

/* TOP に戻るボタン
   - 枠ラインのみ → ホバーで下から塗りつぶし */
.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);
  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;  /* 余計な疑似要素を作らない */
}
.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;
}
.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;
}


/* =========================================================
   8. 本文中のテキストリンク装飾
   ---------------------------------------------------------
   - ボタン風リンク以外（本文内 a）のみ対象
   - デフォルト：#333 + ドット下線
   - ホバー/フォーカス：色を #666 に
   ========================================================= */
.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 非対応ブラウザ向けフォールバック */
@supports not (text-decoration-style: dotted){
  .news-card__content a{
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    padding-bottom: 2px;
  }
}


/* =========================================================
   9. スクロール連動リビール
   ---------------------------------------------------------
   - JS 側で data-reveal / .is-prepared / .is-inview を制御
   - 初期：下に 24px ずらして透明（.is-prepared）
   - 画面内：位置を戻してフェードイン（.is-inview）
   ========================================================= */
.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); /* 任意のディレイを CSS 変数で指定 */
}


/* =========================================================
   10. レスポンシブ微調整
   ---------------------------------------------------------
   - 640px 以下：カード内余白をやや減らし、手元感を調整
   - 480px 以下：戻りボタンを横いっぱいに広げる
   ========================================================= */
@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;
  }

  /* 追加：SPで折り返したときの見栄えを安定化
     - 右端アクションが次行に落ちた場合も “右側” に寄せる */
  .news-card__meta .news-actions{
    margin-left: auto;
  }
}
@media (max-width: 480px){
  .news-backlink{
    min-inline-size: 100%;
  }
  .news-toplink{
    min-inline-size: 100%;
  }
}


/* =========================================================
   11. prefers-reduced-motion 対応
   ---------------------------------------------------------
   - ユーザー環境設定で「動きを減らす」が有効な場合、
     装飾的なアニメーションはすべて停止する
   ========================================================= */
@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;
  }

  /* 追加：Xシェア（押下感・明るさ変化）も停止 */
  .news-card__meta .news-xshare{
    transition: none !important;
  }

  /* リビールも常時表示に切り替え */
  .news-single [data-reveal].is-prepared,
  .news-single [data-reveal].is-inview{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}