/* assets/css/base.css
   - ベースタイポ、ユーティリティ、アクセシビリティ
*/
*,
*::before,
*::after { box-sizing: border-box; }
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--color-ink);
  background:var(--color-bg);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--color-accent);text-decoration:none}
a:hover{text-decoration:underline}
ul{list-style:none;margin:0;padding:0}

/* Accessibility utilities */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:8px;top:8px;background:#000;color:#fff;padding:8px 12px;border-radius:4px;z-index:100;
  transform:translateY(-120%);transition:transform .18s;
}
.skip-link:focus{transform:translateY(0)}
:focus{outline:3px solid rgba(0,119,204,0.18);outline-offset:2px}

/* モバイル優先: 既存の body の font-size を上書き */
body {
  font-size: 0.8rem; /* モバイルでの基準フォント（例: 0.8rem = 12.8px if root 16px） */
}

/* タブレット以上で 16px に戻す（variables.css の --break-md を利用） */
@media (min-width: 768px) {
  body {
    font-size: 16px; /* タブレット以上の固定ピクセル値 */
  }
}