@charset "utf-8";
/* ==========================================================================
   base.css ― リセット・地の文・フォーカス・支援技術むけユーティリティ
   色・余白・文字サイズは必ず tokens.css の変数を参照する。直値を書かない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. リセット（最小限）
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* ブラウザ／OS の文字サイズ設定を尊重する。px で固定しない */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--c-page);
  color: var(--c-on-page);
  font-family: var(--font-base);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-jp);
  /* iOS で横に溢れさせない */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

table {
  border-collapse: collapse;
  width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

button { cursor: pointer; }

/* --------------------------------------------------------------------------
   2. フォーカスインジケーター ― ★変更禁止
   デジタル庁デザインシステム（MIT License, Copyright (c) 2025 デジタル庁）
   の global.css に基づく2重構造。outline:none は書かない。
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--focus-outline-w) solid var(--c-focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
  box-shadow: 0 0 0 var(--focus-halo-w) var(--c-focus-halo);
}

/* 背景も黄色にしたい要素（文字が細く周囲が濃い場合） */
:where(.u-focus-fill):focus-visible {
  background-color: var(--c-focus-halo);
  color: var(--c-focus-outline);
}

/* --------------------------------------------------------------------------
   3. リンク
   DADS：色だけでリンクと分からせない。本文中のリンクは下線を保つ。
   ナビ・ボタン・カード全体リンクは位置と形で判別できるため .u-plain で外す。
   -------------------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
}

a:hover { color: var(--c-brand); }

a.u-plain,
.u-plain a {
  text-decoration: none;
}

a.u-plain:hover { color: inherit; }

/* --------------------------------------------------------------------------
   4. 見出しの既定
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
}

/* --------------------------------------------------------------------------
   5. 支援技術むけ
   -------------------------------------------------------------------------- */

/* 目には見えないが読み上げには乗る */
.u-visually-hidden {
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
}

/* スキップリンク：Tab で最初に現れる */
.skip-link {
  position: absolute;
  left: var(--sp-8);
  top: var(--sp-8);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--sp-8) var(--sp-20);
  background: var(--c-ink-strong);
  color: var(--c-on-ink-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transform: translateY(calc(-200%));
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--c-on-ink-strong);
}

/* --------------------------------------------------------------------------
   6. ターゲット領域の下限（DADS 44px）
   見た目が小さいボタン・リンクにも当てて操作領域を確保する
   -------------------------------------------------------------------------- */
.u-tap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
}

/* --------------------------------------------------------------------------
   7. 動きを減らす設定への対応
   引き渡しでは トップページ にしか入っていなかったため、ここで全ページに効かせる。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   8. 印刷（最低限：固定要素を消す）
   -------------------------------------------------------------------------- */
@media print {
  .side-nav,
  .mobile-bar,
  .skip-link { display: none !important; }
}