/* ============================================
   リセットCSS - Modern CSS Reset
   ブラウザごとの見た目の違いをなくすための設定
   全てのブラウザで同じ見た目になるようにする
   ============================================ */

/* 全ての要素と疑似要素に適用 
   * は全要素、::before/::afterは要素の前後に挿入される疑似要素 */
*,
*::before,
*::after {
  /* ボックスサイズの計算方法を変更
       border-box = 幅と高さにpadding（内側余白）とborder（枠線）を含める
       これにより、要素のサイズ計算が簡単になる */
  box-sizing: border-box;
}

/* 全ての要素に適用される基本設定 */
* {
  /* 外側の余白をゼロに */
  margin: 0;
  /* 内側の余白をゼロに */
  padding: 0;
}

/* HTML要素の基本設定 */
html {
  /* 基準となる文字サイズを設定
       62.5% = ブラウザ標準(16px)の62.5% = 10px
       これにより 1rem = 10px となり、計算しやすくなる
       例: 1.6rem = 16px, 2.4rem = 24px */
  font-size: 62.5%;

  /* スムーズスクロール - ページ内リンクをクリックした時に滑らかに移動 */
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* ========================================
   レスポンシブ font-size 調整
   画面サイズに応じて基準文字サイズを変更
   ======================================== */

/* 1300px以下の画面（ノートPCなど） */
@media screen and (max-width: 1300px) {
  html {
    font-size: 60%;
    /* 1rem = 9.6px */
  }
}

/* 1100px以下の画面（小型ノートPCなど） */
@media screen and (max-width: 1100px) {
  html {
    font-size: 58%;
    /* 1rem = 9.28px */
  }
}

/* 768px以下の画面（タブレット） */
@media screen and (max-width: 768px) {
  html {
    font-size: 56%;
    /* 1rem = 8.96px */
  }
}

/* 480px以下の画面（スマートフォン） */
@media screen and (max-width: 480px) {
  html {
    font-size: 54%;
    /* 1rem = 8.64px */
  }
}

/* htmlとbodyの高さ設定 */
html,
body {
  /* ページの高さを画面いっぱいに
       これにより、フッターを画面下部に配置しやすくなる */
  height: 100%;
}

/* body要素の文字表示設定 */
body {
  /* Mac/iOSで文字を滑らかに表示 */
  -webkit-font-smoothing: antialiased;
  /* 文字の描画を最適化して読みやすく */
  text-rendering: optimizeSpeed;
}

/* 画像・動画などのメディア要素の設定 */
img,
picture,
video,
canvas,
svg {
  /* ブロック要素として表示（前後に改行が入る） */
  display: block;
  /* 横幅は最大100%（親要素からはみ出さない） */
  max-width: 100%;
  /* 高さは自動調整（縦横比を保つ） */
  height: auto;
}

/* フォーム要素の設定 */
input,
button,
textarea,
select {
  /* 親要素のフォント設定を引き継ぐ */
  font: inherit;
  /* 親要素の文字色を引き継ぐ */
  color: inherit;
}

/* テキスト要素の設定 */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  /* 長い単語や文章が要素からはみ出した時に自動改行 */
  overflow-wrap: break-word;
}

/* リスト要素の設定 */
ul,
ol {
  /* デフォルトの点や数字を消す */
  list-style: none;
}

/* リンクの設定 */
a {
  /* 下線を消す */
  text-decoration: none;
  /* 親要素の文字色を引き継ぐ（青色にならない） */
  color: inherit;
}

/* ボタンの設定 */
button {
  /* 枠線を消す */
  border: none;
  /* 背景を透明に */
  background: none;
  /* マウスカーソルを指マークに */
  cursor: pointer;
}

/* テーブル（表）の設定 */
table {
  /* セル間の隙間をなくす */
  border-collapse: collapse;
  /* セル間の余白をゼロに */
  border-spacing: 0;
}

/* 引用要素の設定 */
blockquote,
q {
  /* デフォルトの引用符を消す */
  quotes: none;
}

/* 引用要素の前後の疑似要素 */
blockquote:before,
blockquote:after,
q:before,
q:after {
  /* 空の内容を設定 */
  content: "";
  content: none;
}

/* ========================================
   アクセシビリティ対応
   キーボード操作時の見やすさを確保
   ======================================== */

/* フォーカス時（タブキーで選択時）のアウトライン */
:focus {
  /* 青色の枠線を表示 */
  outline: 2px solid #0066cc;
  /* 青色 */
  /* 要素から2px離して表示 */
  outline-offset: 2px;
}

/* マウス操作時はアウトラインを非表示
   （キーボード操作時のみ表示） */
:focus:not(:focus-visible) {
  outline: none;
}

/* キーボード操作時のみアウトラインを表示 */
:focus-visible {
  /* 青色の枠線を表示 */
  outline: 2px solid #0066cc;
  /* 青色 */
  /* 要素から2px離して表示 */
  outline-offset: 2px;
}

/* ============================================
   リセットCSSの役割と効果
   ============================================
   
   【なぜリセットCSSが必要？】
   ブラウザ（Chrome, Safari, Firefox等）には、それぞれ独自の
   デフォルトスタイルがあります。例えば：
   - h1の文字サイズがブラウザによって微妙に違う
   - ulの左側の余白の大きさが違う
   - buttonの見た目が大きく異なる
   
   リセットCSSを使うことで、これらの違いをなくし、
   全てのブラウザで同じ見た目からスタートできます。
   
   【このリセットCSSの特徴】
   1. モダンな設定（IE対応不要）
   2. アクセシビリティに配慮
   3. レスポンシブ対応の基本設定込み
   4. 日本語サイトに最適化
   ============================================ */