@charset "utf-8";

/* 1. Box-sizing を直感的に */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. margin/padding 初期化 */
* {
  margin: 0;
  padding: 0;
}

/* 3. ユーザーがアニメーションを許容している場合のみ（実験用） */
@media (prefers-reduced-motion: no-preference) {
  /* html {
    interpolate-size: allow-keywords;
  } */
}

/* 4. ボディ基本設定 */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: system-ui, sans-serif;
}

/* 5. メディア要素のレスポンシブ対応 */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 6. フォーム要素：フォントと見た目をリセット */
:where(input, textarea, select, button) {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* 7. テキスト系要素に共通の初期化 */
:where(html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup,
tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header,
hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video) {
  font: inherit;
  font-size: 100%;
  border: 0;
  vertical-align: top;
}

/* 8. テキストの折り返し・改行調整 */
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
  margin: 0;
}

/* 9. より読みやすい段落の改行 */
p {
  text-wrap: pretty;
}

/* 複数行タイトルのバランス（必要に応じて） */
/*
:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}
*/

/* 10. React/Next.js のルート要素にスタッキングコンテキストを作る */
#root, #__next {
  isolation: isolate;
}

/* 11. HTML5セクショナル要素の display を保証（旧ブラウザ対策） */
:where(article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section) {
  display: block;
}

/* 12. blockquote, q の引用符削除 */
blockquote, q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before, q::after {
  content: "";
}

/* 13. リストの装飾を削除 */
ol, ul {
  list-style: none;
  padding: 0;
}