/* トップ（/）とお知らせ一覧（/news/）だけで使う。
   共通の styles.css を変えると全ページ（約1,800）の送り直しになるため、トップ専用の追加はここに置く（2026-10-24） */

/* ---- このサイトでできること ---- */
.nowrap-phrase { display: inline-block; }
.features-section .related-content-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; line-height: 1.45; word-break: auto-phrase; }
.feature-new {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  padding: 3px 7px; border-radius: 4px; border: 1px solid var(--accent);
  background: var(--accent-bg); color: var(--accent-ink);
  font-family: var(--font-en); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
}
.feature-card { position: relative; transition: background-color .18s ease, transform .12s ease; }
.feature-card .related-content-icon { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.feature-card::after { transition: transform .18s ease; }
.feature-card:hover .related-content-icon { background: var(--accent-bg); border-color: var(--accent); }
.feature-card:hover::after { transform: translateX(4px); }
.feature-card:active { transform: scale(.985); }
.feature-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: 0 0 0 4px var(--accent-bg); }

/* 入場：画面に入ったカードから順にふわっと出す（js/home-motion.js が .is-ready / .is-in を付ける。JS が無ければそのまま表示） */
.feature-grid.is-ready .feature-card { opacity: 0; transform: translateY(12px); }
.feature-grid.is-ready .feature-card.is-in {
  opacity: 1; transform: none;
  transition: opacity .42s cubic-bezier(.2, .8, .2, 1), transform .42s cubic-bezier(.2, .8, .2, 1), background-color .18s ease;
  transition-delay: calc(var(--i, 0) * 45ms), calc(var(--i, 0) * 45ms), 0s;
}
.feature-grid.is-ready .feature-card.is-in:active { transform: scale(.985); transition-delay: 0s; }

/* ---- お知らせ（トップは最新3件・本文は2行まで） ---- */
.news-cards-top .news-row p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.news-all-link { margin: 16px 0 0; }
.news-all-link a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2;
  min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 6px;
  color: var(--accent-ink); font-size: 14.5px; font-weight: 700; background: var(--surface);
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.news-all-link a::after { content: "→"; transition: transform .18s ease; }
.news-all-link a:hover { background: var(--accent-bg); border-color: var(--accent); }
.news-all-link a:hover::after { transform: translateX(3px); }
.news-all-link a:active { transform: scale(.97); }
.news-all-link a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-bg); }

/* ---- お知らせ一覧ページ ---- */
.news-page { padding-bottom: 48px; }
.news-page-title { margin: 20px 0 8px; font-size: 26px; line-height: 1.4; word-break: auto-phrase; }
.news-page-lead { margin: 0 0 20px; font-size: 15px; line-height: 1.8; color: var(--ink-2); }

@media (max-width: 640px) {
  /* スマホ：検索パネル（3）のすぐ下に「できること」を出す。お知らせは都道府県の後 */
  .home-main .features-section { order: 4; }
  .home-main .mychild-section { order: 4; }
  .home-main .mychild-section:has(.mychild-panel) { order: 3; }
  /* 11件を縦に並べても長くなりすぎないよう、余白とアイコンを詰める */
  .features-section .feature-card,
  .features-section .feature-card:nth-child(even) { align-items: center; gap: 14px; padding: 14px 2px; }
  .feature-card .related-content-icon { width: 36px; height: 36px; }
  .feature-card .related-content-title { font-size: 15px; }
  .feature-card .related-content-desc { margin-top: 2px; font-size: 12.5px; line-height: 1.6; }
  .news-page-title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card, .feature-card .related-content-icon, .feature-card::after,
  .news-all-link a, .news-all-link a::after { transition: none; }
  .feature-card:active, .news-all-link a:active, .feature-grid.is-ready .feature-card.is-in:active { transform: none; }
  .feature-card:hover::after, .news-all-link a:hover::after { transform: none; }
  .feature-grid.is-ready .feature-card { opacity: 1; transform: none; }
}