/* トップページ以外の共通ヘッダー・フッター（includes/site_chrome.php）。2026-10-25
 * #tnh・#tnf の中だけに効かせる。サイト全体のリンク色（color-variables.php の !important）に負けないよう、ID付きで指定する */
#tnh, #tnf { --tn-pink: #e91e63; --tn-grad: linear-gradient(135deg, #e91e63, #9c27b0); --tn-ink: #1f1f24; --tn-sub: #6b6b76; --tn-line: #ececf1; --tn-sale: #d32f2f;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Segoe UI", sans-serif; line-height: 1.5; text-align: left; }
#tnh *, #tnf * { box-sizing: border-box; }
#tnh a, #tnf a { text-decoration: none !important; }
#tnh .tnh-wrap, #tnf .tnh-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

#tnh .tnh-age { background: #2a2530; color: #cfc8d8; font-size: 11px; }
#tnh .tnh-age .tnh-wrap { display: flex; justify-content: space-between; gap: 8px; padding-top: 4px; padding-bottom: 4px; }
#tnh .tnh-top { background: #fff; border-bottom: 1px solid var(--tn-line); position: sticky; top: 0; z-index: 50; }
#tnh .tnh-bar { display: flex; align-items: center; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
#tnh a.tnh-logo { font-weight: 800; font-size: 20px; white-space: nowrap; background: var(--tn-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
#tnh .tnh-search { flex: 1; display: flex; max-width: 620px; margin: 0; border: 2px solid var(--tn-pink); border-radius: 6px; overflow: hidden; background: #fff; }
#tnh .tnh-search input { flex: 1; border: 0; padding: 9px 12px; font-size: 15px; min-width: 0; outline: none; background: #fff; color: var(--tn-ink); margin: 0; box-shadow: none; border-radius: 0; }
#tnh .tnh-search button { border: 0; background: var(--tn-grad); color: #fff !important; font-weight: 700; padding: 0 18px; font-size: 14px; cursor: pointer; margin: 0; border-radius: 0; }
#tnh .tnh-links { display: flex; gap: 14px; font-size: 12px; white-space: nowrap; }
#tnh .tnh-links a { color: var(--tn-sub) !important; }
#tnh .tnh-links a:hover { color: var(--tn-pink) !important; }
#tnh .tnh-tabs { background: #fff; border-top: 1px solid var(--tn-line); }
#tnh .tnh-tabs .tnh-wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
#tnh .tnh-tabs a { padding: 10px 14px; font-weight: 700; font-size: 14px; white-space: nowrap; border-bottom: 3px solid transparent; color: #444 !important; }
#tnh .tnh-tabs a:hover { color: var(--tn-pink) !important; }
#tnh .tnh-tabs a.on { color: var(--tn-pink) !important; border-bottom-color: var(--tn-pink); }
#tnh .tnh-tabs a.hot { color: var(--tn-sale) !important; }

#tnf { margin-top: 36px; background: #2a2530; color: #cfc8d8; font-size: 12px; padding: 22px 0; }
#tnf p { margin: 0 0 10px; color: #cfc8d8; }
#tnf .tnf-links a { color: #fff !important; margin-right: 14px; display: inline-block; margin-bottom: 4px; }

@media (max-width: 640px) {
  #tnh .tnh-top { position: static; }
  #tnh .tnh-count { display: none; }
  #tnh .tnh-bar { flex-wrap: wrap; gap: 8px; }
  #tnh a.tnh-logo { font-size: 18px; }
  #tnh .tnh-links { display: none; }
  #tnh .tnh-search { order: 3; flex-basis: 100%; max-width: none; }
}