@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. メディア要素のレスポンシブ対応 */
:where(img, picture, video, canvas, svg) {
  display: inline-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: baseline;
}

/* 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;
}