/* precure.news だけで使う部品。色・余白は precure.tv の site.css の変数に合わせる。 */

/* ──────── 配色 ────────
   precure.tv の site.css のピンクを、news のキーカラー #6699ff と同じ色相の青に置き換える。
   #6699ff は白地の文字には薄い（2.8:1）ので、面・線・アイコンに使い、文字は白地 4.5:1 を満たす濃さにする：
   #3366cc（tv の #d81b60 にあたる。リンク・現在地・縁）／ #2a56c6（#be185d。見出し）／ #1e40a0（#9d174d。リード）。
   淡い面は #f0f5ff・#e3ecff・#f8fbff（tv のホームの枠のグラデーション）、#f5f8ff（フッター・シェアの面）、
   淡い線は #dde8ff・#c2d6ff。ヘッダ上端の虹色の帯はシリーズ共通の飾りなのでそのまま。
   tv の CSS で色を直に書いている所だけをここで上書きし、var(--accent-pink) / var(--accent) を使う所は変数で変わる。 */
:root {
  --accent: #3366cc;
  --accent-pink: #3366cc;
  /* tv で h2 の左の縦帯だけに使う紫。news は飾りの帯なのでキーカラーそのもの（文字ではないので薄くてよい）。 */
  --accent-purple: #6699ff;
}
#pageFooter { border-top-color: #dde8ff; background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%); }
.footer-nav a { color: #2a56c6; }
.footer-sister-link { border-color: #c2d6ff; }
.footer-sister-link:hover,
.footer-sister-link:focus-visible { box-shadow: 0 2px 8px rgba(51, 102, 204, 0.16); }
.footer-legal { border-top-color: #c2d6ff; }
.hero.hero-gradient { background: linear-gradient(180deg, #f0f5ff 0%, #e3ecff 45%, #f8fbff 100%); }
.hero.hero-gradient h1 { color: #2a56c6; }
.hero.hero-gradient .lead { color: #1e40a0; }
.not-found-hero { background: linear-gradient(180deg, #f5f8ff 0%, #fff 100%); }
.not-found-hero h1 { color: #2a56c6; }
.not-found-hero .lead { color: #1d3d8f; }
.ep-prev-next-card:hover { box-shadow: 0 2px 6px rgba(51, 102, 204, 0.12); }
.article-card:hover { box-shadow: 0 4px 14px rgba(51, 102, 204, 0.10); }
.mobile-nav-overlay-close:hover { background: rgba(51, 102, 204, 0.06); }
.mobile-nav-overlay-list a:hover,
.mobile-nav-overlay-list a:focus-visible { background: rgba(51, 102, 204, 0.08); }
.share-buttons { border-color: #dde8ff; background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 90%); }
.share-buttons-heading { color: #1e40a0; }
.share-button:focus-visible { outline-color: #3366cc; }
.skip-link { background: #3366cc; }
/* precure.tv へのカードは tv の配色（ピンク）のまま。変数を要素の上で tv の値に戻す。 */
.sister-site-link { --accent-pink: #d81b60; }

/* 埋め込み動画は横幅いっぱいの 16:9。 */
.article-body .video-embed { position: relative; aspect-ratio: 16 / 9; margin: 0 0 1.2em; }
.article-body .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }

/* 埋め込みの代わりのリンク（自サイトの記事・外部のページ）。 */
.article-body .embed-card a {
  display: block; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px;
  text-decoration: none; color: var(--fg); line-height: 1.6; word-break: break-all;
}
.article-body .embed-card a:hover { border-color: var(--accent-pink); }

/* X の埋め込みが読み込まれるまでの見た目。 */
.article-body blockquote.twitter-tweet { margin: 0 0 1.2em; }

/* 画像とキャプション。 */
.article-body figure { margin: 0 0 1.2em; }
.article-body figcaption { font-size: 0.85em; color: var(--muted); margin-top: 0.3em; }

/* 記事の分類はリンクにする。 */
a.article-tag { text-decoration: none; }

/* カテゴリの一覧。 */
.news-term-list { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; list-style: none; }

/* 姉妹サイトの文字のリンク（precure.tv）。 */
.footer-sister-text { font-weight: 500; }