/* 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; }
/* ホームの枠のリードと更新日。PC ではリードの行の右端に更新日を置き、スマホ幅（tv の 640px 区切り）ではリードの下に回す。 */
@media (min-width: 641px) {
  .home-lead-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
  .home-lead-row .home-build-info { flex: none; margin: 0; white-space: nowrap; }
}
/* 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); }

/* 外部のページの OGP カード（ショートコード linkcard）。画像は上、文字は下。 */
.article-body .link-card { margin: 0 0 1.2em; max-width: 560px; }
.article-body .link-card a {
  display: block; overflow: hidden; border: 1px solid var(--border); border-radius: 8px;
  text-decoration: none; color: var(--fg);
}
.article-body .link-card a:hover { border-color: var(--accent-pink); }
.article-body .link-card-image { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-bottom: 1px solid var(--border); }
.article-body .link-card-body { display: block; padding: 10px 14px 12px; line-height: 1.5; }
.article-body .link-card-title { display: block; font-weight: 700; }
.article-body .link-card-desc { display: block; margin-top: 4px; font-size: 0.88em; color: var(--muted); }
.article-body .link-card-site { display: block; margin-top: 6px; font-size: 0.8em; color: var(--muted); }

/* 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 への文字のカードも tv の配色（ピンク）のまま。縁と影を tv の値に戻す。 */
.footer-sister-link.sister-site-text-card { --accent-pink: #d81b60; border-color: #f4c6dd; }
.footer-sister-link.sister-site-text-card:hover,
.footer-sister-link.sister-site-text-card:focus-visible { box-shadow: 0 2px 8px rgba(233, 30, 99, 0.16); }

/* ──────── 感想記事のハイライトのセリフ（ショートコード dialogue） ────────
   字幕どおりに引いたセリフだと一目で分かるよう、地の文の「」とは別の飾り枠にする。
   書体は precure.tv のコラムの囲みの札と同じ Kaisei Decol。news の青の淡い地に点を敷き、
   かぎ括弧を飾りとして大きく添え、右下に話した人物を ✦ つきで小さく出す。 */
.article-body .dialogue {
  position: relative;
  margin: 1.8em 0;
  padding: 1.3em 1.5em 1em 1.5em;
  border: 1px solid #c2d6ff;
  border-radius: 14px;
  background:
    radial-gradient(circle, rgba(102, 153, 255, 0.16) 1px, transparent 1.2px) 0 0 / 16px 16px,
    #f8fbff;
  box-shadow: 0 3px 0 rgba(51, 102, 204, 0.10);
}
.article-body .dialogue::after {
  content: "✧ ✦ ✧";
  position: absolute; top: 0.55em; right: 1em;
  font-size: 0.8em; letter-spacing: 0.15em; color: var(--accent-yellow);
}
.article-body .dialogue .dialogue-line {
  margin: 0; padding: 0; border: none; color: var(--fg);
}
.article-body .dialogue .dialogue-line p {
  margin: 0;
  font-family: var(--font-accent-deco); font-weight: 500;
  font-size: 1.12em; line-height: 1.85;
  text-indent: -0.6em; padding-left: 0.6em;
  /* 語の途中（「わた／し」）で折り返さないよう、文節で折り返す（対応しないブラウザは普通に折り返す） */
  word-break: auto-phrase;
  /* 最後の行に 1〜2 字だけ残る折り返しを避ける */
  text-wrap: pretty;
}
.article-body .dialogue .dialogue-line p::before { content: "「"; color: #6699ff; font-weight: 700; }
.article-body .dialogue .dialogue-line p::after { content: "」"; color: #6699ff; font-weight: 700; }
.article-body .dialogue .dialogue-who {
  margin-top: 0.6em; text-align: right;
  font-size: 0.85em; color: #1e40a0;
}
.article-body .dialogue .dialogue-who::before { content: "✦ "; color: var(--accent-yellow); }
@media (max-width: 600px) {
  .article-body .dialogue { padding: 1.2em 1.1em 0.9em; }
  .article-body .dialogue .dialogue-line p { font-size: 1.05em; }
}