/* MIEKATA キャンペーンの帯（全ページ。2026-10-23 吉田さんの改修指示書 A5・A10）
   - 上からの順は「LISH の帯 → この帯 → ヘッダーの白い板」。帯は高さ 36px・13px・500・紺の地
   - data-until（YYYY-MM-DD）の日を過ぎたら出さない。サーバー側（MiekataPageView）とブラウザ側（MiekataBootScript が
     html に mcp-off を付ける）の両方で消すので、手で差し替え忘れても古い期限が残らない
   - 期限と文言の差し替えは scripts/miekata-campaign-deadline.py */

:root {
  --mcp-bg: var(--ds-navy, #102650);
  --mcp-fg: #fff;
  --mcp-sub: #dfe6f2;
}

html body:is(#mcp#mcp#mcp#mcp, *) a.mcp-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  height: 36px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 16px !important;
  background: var(--mcp-bg) !important;
  border: 0 !important;
  color: var(--mcp-fg) !important;
  font: 500 13px/1 'Noto Sans JP', sans-serif !important;
  letter-spacing: .04em !important;
  font-feature-settings: "palt" 1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
html body:is(#mcp#mcp#mcp#mcp, *) a.mcp-bar b { font-weight: 700 !important; color: var(--mcp-fg) !important; }
html body:is(#mcp#mcp#mcp#mcp, *) a.mcp-bar span { color: var(--mcp-sub) !important; }
html body:is(#mcp#mcp#mcp#mcp, *) a.mcp-bar i { font-style: normal !important; font-family: 'Barlow', sans-serif !important; transition: transform .2s; }
html body:is(#mcp#mcp#mcp#mcp, *) a.mcp-bar:hover i { transform: translateX(3px); }
html body:is(#mcp#mcp#mcp#mcp, *) a.mcp-bar:focus-visible { outline: 2px solid var(--mcp-fg) !important; outline-offset: -4px !important; }
/* スマホは1行に収まる分だけ（月額の部分と矢印は出さない。390px より狭い画面は文字を少し小さく） */
@media (max-width: 767px) {
  html body:is(#mcp#mcp#mcp#mcp, *) a.mcp-bar { gap: 8px !important; padding: 0 12px !important; letter-spacing: .02em !important; }
  html body:is(#mcp#mcp#mcp#mcp, *) a.mcp-bar i { display: none !important; }
}
@media (max-width: 419px) {
  html body:is(#mcp#mcp#mcp#mcp, *) a.mcp-bar .mcp-price { display: none !important; }
}
@media (max-width: 389px) {
  html body:is(#mcp#mcp#mcp#mcp, *) a.mcp-bar { padding: 0 8px !important; font-size: 12px !important; letter-spacing: 0 !important; }
}
@media (max-width: 359px) {
  html body:is(#mcp#mcp#mcp#mcp, *) a.mcp-bar { font-size: 11px !important; }
}
/* 締め切りを過ぎたら隠す（上の表示の指定より強くする） */
html.mcp-off body:is(#mcp#mcp#mcp#mcp#mcp, *) a.mcp-bar { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html body a.mcp-bar i { transition: none !important; }
}