/**** 
2025/10/20 reset.css
****/

/*
  1. box-sizingをborder-boxに設定し、継承させます。
     これにより、paddingやborderが要素の幅(width)や高さ(height)に含まれるようになり、
     レイアウト計算が直感的になります。
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  2. デフォルトのマージンとパディングを削除します。
     これにより、ブラウザ間の表示の差異をなくし、意図した通りのスペーシングが可能になります。
*/
* {
  margin: 0;
  padding: 0;
}

/*
  3. ルート要素(html)とbodyの高さを100%にします。
     これにより、ビューポート全体を使ったレイアウト（例：vh単位の使用）が容易になります。
*/
html,
body {
  height: 100%;
}

/*
  4. 読みやすい行間(line-height)を設定し、テキストのアンチエイリアスを適用します。
     font-familyにはモダンなシステムフォントを指定しています。
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/*
  5. 画像や動画などのメディア要素が、親要素からはみ出さないようにします。
     display: block; は、画像の下にできる不要な余白（ベースラインの隙間）を取り除きます。
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
  6. input, button, textarea, select のフォントを親要素から継承させます。
     デフォルトではフォーム要素は独自のフォントを持つため、これをリセットします。
*/
input,
button,
textarea,
select {
  font: inherit;
}

/*
  7. テキストが親要素からはみ出す場合に、単語の途中で改行(break-word)するようにします。
     これにより、長いURLなどがレイアウトを崩すのを防ぎます。
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
  8. ルート（html）にスタッキングコンテキスト（重なりの基準）を作成します。
     これは、z-indexの管理を容易にするためのモダンなテクニックです。
     （必須ではありませんが、多くのモダンリセットに含まれます）
*/
#root,
#__next {
  isolation: isolate;
}

/*
  9. アクセシビリティ対応：
     ユーザーがOSで「動きを減らす」設定をしている場合、
     すべてのアニメーションやトランジション、スムーズスクロールを無効化します。
*/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto; /* スムーズスクロールを無効化 */
  }

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