/* =========================================================
   アクセシビリティ(デジタル庁デザインシステム DADS に合わせる)
   ---------------------------------------------------------
   - 文字:本文16px、小さい文字も14px以上
   - 色:文字と背景のコントラスト 4.5:1 以上
   - フォーカス:キーボードで選んだところを黄色+黒の2重で示す(DADS と同じ)
   - 押せる場所:高さ44px以上
   - リンク:色だけでなく下線でもわかるように
   - 動き:「動きを止める」ボタンや OS の「視差効果を減らす」設定で止まる
   style.css のあとに読み込む。
   ========================================================= */

/* ---------- X の表示スイッチ ----------
   いまは X を動かしていないので、X 関連(data-x)を隠している。
   X を再開するときは、下の2行を入れかえる:
     [data-x]    { display: none !important; }   ← この行を消す
     [data-no-x] { display: none !important; }   ← この行を足す
   data-no-x は「X がないとき用」の代わりの文。 */
[data-x] { display: none !important; }

/* hidden 属性は、CSS の display 指定より優先して隠す */
[hidden] { display: none !important; }

/* ---------- 色(ライトモードだけ。ダークモードは style.css のまま) ---------- */
@media not (prefers-color-scheme: dark) {
  :root {
    --gray: #6F6860;     /* 文字に使うグレー:紙色の上で 5.3:1 */
    --red:  #B5443F;     /* 赤:紙色の上で 5.3:1、白文字をのせても 5.4:1 */
    --red-deep: #96362F;
  }
}

/* ---------- 文字 ---------- */
@media (max-width: 600px) {
  body { font-size: 16px; }
}

/* トップのロゴを h1 にした。見た目は前と同じにする */
.hero-title {
  margin: 0;
  font-size: inherit;
  line-height: 0;
}

/* ---------- フォーカス(キーボードで選んだところ) ---------- */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #000 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px #FFD43D !important;
}

/* ---------- リンク ---------- */
/* 文章の中のリンクには下線をつける */
.page-card a,
.page-hero a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.page-card a:hover,
.page-hero a:hover { text-decoration-thickness: 2px; }

/* ---------- 押せる場所を44px以上に(見た目の大きさはなるべく変えない) ---------- */
.brand,
.nav a,
.footer-links a,
.back-link,
.link-button,
.viewer-share,
.motion-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.viewer-nav,
.viewer-close {
  min-width: 44px;
  min-height: 44px;
}

/* ---------- 動きを止める ---------- */
/* play.js が、動きを止めたいときに html に motion-off をつける */
.motion-off *,
.motion-off *::before,
.motion-off *::after {
  animation: none !important;
  transition: none !important;
}
.motion-off { scroll-behavior: auto; }
.motion-off .fade-item {
  opacity: 1 !important;
  translate: 0 0 !important;
  transform: none !important;
}