/* ============================================================
   reset.css
   Web制作向け汎用リセット
   ============================================================ */

/* 1. Box sizing
   ----------------------------------------------------------
   すべての要素でボーダーを幅・高さに含める */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. マージン・パディング除去 */
* {
  margin: 0;
  padding: 0;
}

/* 3. ルート設定
   ----------------------------------------------------------
   スクロール滑らか化 / モバイルフォントスケール禁止 /
   日本語の行頭・行末ぶら下がり */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  hanging-punctuation: first last;
}

/* 4. Body ベース
   ----------------------------------------------------------
   アンチエイリアス / テキストレンダリング改善 */
body {
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 5. 見出し
   ----------------------------------------------------------
   スタイルをリセットし、プロジェクトで自由に定義できるようにする */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
  overflow-wrap: break-word;
}

/* 6. テキスト系要素 — 長い単語でもはみ出さない */
p, li, dt, dd, blockquote, figcaption, caption, th, td {
  overflow-wrap: break-word;
}

/* 7. リンク — スタイルをリセット */
a {
  color: inherit;
  text-decoration: none;
}

/* 8. リスト */
ul, ol {
  list-style: none;
}

/* 9. メディア要素
   ----------------------------------------------------------
   inline → block / max-width で親からはみ出さない */
img, picture, video, canvas, svg, iframe, embed, object {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  font-style: italic; /* 画像読み込み失敗時に alt テキストをイタリック表示 */
}

/* 10. フォーム
   ----------------------------------------------------------
   ブラウザデフォルトのフォントをページに揃える */
input, button, textarea, select, optgroup {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

textarea {
  resize: vertical;
}

fieldset {
  border: none;
}

legend {
  padding: 0;
}

/* 11. テーブル */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 12. その他
   ----------------------------------------------------------*/
figure  { margin: 0; }
address { font-style: normal; }

/* blockquote の引用符を非表示 */
blockquote           { quotes: none; }
blockquote::before,
blockquote::after    { content: ''; }

/* 省略語のアクセシブルなスタイル */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* hr を細い線に統一 */
hr {
  border: none;
  border-top: 1px solid currentColor;
}

/* hidden 属性を確実に非表示 */
[hidden] { display: none !important; }

/* sub / sup がレイアウトに影響しないようにする */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* pre のはみ出し対策 */
pre, code, kbd, samp {
  font-family: monospace;
  font-size: 1em;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* 13. フォーカス
   ----------------------------------------------------------
   マウス操作時はアウトライン非表示、キーボード操作時は表示 */
:focus-visible {
  outline: 2px solid #083587;
  outline-offset: 3px;
}

/* 14. アニメーション縮小設定
   ----------------------------------------------------------
   vestibular disorders / 前庭障害に配慮 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }
}