/**
 * Margin
 *
 * 通常のマージンは padding と gap で代替する方針のため、ここに置くのは
 * 要素を重ねるためのネガティブマージンと mx-auto だけ。
 *
 * セクションに食い込む見出し、ヒーローに重なるパネル、罫線の光学補正などに使う。
 * 命名は position の .-top-4 と同じ先頭ハイフン方式。
 *
 * ブレークポイント版は「prefix の md-- + クラス名の -mt-16」をそのまま繋げるため
 * ハイフンが3つ並ぶ（.md---mt-16）。見た目は不格好だが、prefix の付け方を
 * 他のファミリーと揃えている。
 *
 * Bootstrap のネガティブマージン（BS4 の .mt-n1 系 / BS5 は既定で無効）とは
 * 命名が重ならないため衝突しない。
 */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/**
 * Full Bleed
 * コンテナの内側から画面幅いっぱいへ脱出する。帯状の背景やフルブリード画像に使う。
 *
 * 100vw はスクロールバーの幅を含むため、そのままでは幅がスクロールバーぶん
 * 余って横スクロールが出る。祖先に .overflow-x-clip を当てて切る。
 *
 * hidden ではなく clip を使う。hidden はスクロールコンテナを作るため内側の
 * position: sticky が効かなくなるが、clip は作らないので sticky が生きる。
 * body や html へ常時当てるのは避ける。はみ出しを常に握り潰すことになり、
 * レイアウトの不具合が横スクロールとして現れなくなるため。
 *
 * width: auto にしても結果は変わらない。margin-inline が効いているため
 * 使用値は W - 2(0.5W - 0.5V) = 100vw となり 100vw と同じになる。
 * また #root に max-width: 1920px が掛かっているため、それを超える画面幅では
 * コンテナからのはみ出し量が意図とずれる。広い画面での確認を推奨。
 */
.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* margin-top */
.-mt-8 {
  margin-top: -0.5rem;
}
.-mt-16 {
  margin-top: -1rem;
}
.-mt-24 {
  margin-top: -1.5rem;
}
.-mt-32 {
  margin-top: -2rem;
}
.-mt-40 {
  margin-top: -2.5rem;
}
.-mt-48 {
  margin-top: -3rem;
}
.-mt-64 {
  margin-top: -4rem;
}
.-mt-80 {
  margin-top: -5rem;
}
.-mt-120 {
  margin-top: -7.5rem;
}
.-mt-160 {
  margin-top: -10rem;
}

/* margin-right */
.-mr-8 {
  margin-right: -0.5rem;
}
.-mr-16 {
  margin-right: -1rem;
}
.-mr-24 {
  margin-right: -1.5rem;
}
.-mr-32 {
  margin-right: -2rem;
}
.-mr-40 {
  margin-right: -2.5rem;
}
.-mr-48 {
  margin-right: -3rem;
}
.-mr-64 {
  margin-right: -4rem;
}
.-mr-80 {
  margin-right: -5rem;
}
.-mr-120 {
  margin-right: -7.5rem;
}
.-mr-160 {
  margin-right: -10rem;
}

/* margin-bottom */
.-mb-8 {
  margin-bottom: -0.5rem;
}
.-mb-16 {
  margin-bottom: -1rem;
}
.-mb-24 {
  margin-bottom: -1.5rem;
}
.-mb-32 {
  margin-bottom: -2rem;
}
.-mb-40 {
  margin-bottom: -2.5rem;
}
.-mb-48 {
  margin-bottom: -3rem;
}
.-mb-64 {
  margin-bottom: -4rem;
}
.-mb-80 {
  margin-bottom: -5rem;
}
.-mb-120 {
  margin-bottom: -7.5rem;
}
.-mb-160 {
  margin-bottom: -10rem;
}

/* margin-left */
.-ml-8 {
  margin-left: -0.5rem;
}
.-ml-16 {
  margin-left: -1rem;
}
.-ml-24 {
  margin-left: -1.5rem;
}
.-ml-32 {
  margin-left: -2rem;
}
.-ml-40 {
  margin-left: -2.5rem;
}
.-ml-48 {
  margin-left: -3rem;
}
.-ml-64 {
  margin-left: -4rem;
}
.-ml-80 {
  margin-left: -5rem;
}
.-ml-120 {
  margin-left: -7.5rem;
}
.-ml-160 {
  margin-left: -10rem;
}

@media screen and (min-width: 768px) {
  .md---mt-8 {
    margin-top: -0.5rem;
  }
  .md---mt-16 {
    margin-top: -1rem;
  }
  .md---mt-24 {
    margin-top: -1.5rem;
  }
  .md---mt-32 {
    margin-top: -2rem;
  }
  .md---mt-40 {
    margin-top: -2.5rem;
  }
  .md---mt-48 {
    margin-top: -3rem;
  }
  .md---mt-64 {
    margin-top: -4rem;
  }
  .md---mt-80 {
    margin-top: -5rem;
  }
  .md---mt-120 {
    margin-top: -7.5rem;
  }
  .md---mt-160 {
    margin-top: -10rem;
  }
  .md---mr-8 {
    margin-right: -0.5rem;
  }
  .md---mr-16 {
    margin-right: -1rem;
  }
  .md---mr-24 {
    margin-right: -1.5rem;
  }
  .md---mr-32 {
    margin-right: -2rem;
  }
  .md---mr-40 {
    margin-right: -2.5rem;
  }
  .md---mr-48 {
    margin-right: -3rem;
  }
  .md---mr-64 {
    margin-right: -4rem;
  }
  .md---mr-80 {
    margin-right: -5rem;
  }
  .md---mr-120 {
    margin-right: -7.5rem;
  }
  .md---mr-160 {
    margin-right: -10rem;
  }
  .md---mb-8 {
    margin-bottom: -0.5rem;
  }
  .md---mb-16 {
    margin-bottom: -1rem;
  }
  .md---mb-24 {
    margin-bottom: -1.5rem;
  }
  .md---mb-32 {
    margin-bottom: -2rem;
  }
  .md---mb-40 {
    margin-bottom: -2.5rem;
  }
  .md---mb-48 {
    margin-bottom: -3rem;
  }
  .md---mb-64 {
    margin-bottom: -4rem;
  }
  .md---mb-80 {
    margin-bottom: -5rem;
  }
  .md---mb-120 {
    margin-bottom: -7.5rem;
  }
  .md---mb-160 {
    margin-bottom: -10rem;
  }
  .md---ml-8 {
    margin-left: -0.5rem;
  }
  .md---ml-16 {
    margin-left: -1rem;
  }
  .md---ml-24 {
    margin-left: -1.5rem;
  }
  .md---ml-32 {
    margin-left: -2rem;
  }
  .md---ml-40 {
    margin-left: -2.5rem;
  }
  .md---ml-48 {
    margin-left: -3rem;
  }
  .md---ml-64 {
    margin-left: -4rem;
  }
  .md---ml-80 {
    margin-left: -5rem;
  }
  .md---ml-120 {
    margin-left: -7.5rem;
  }
  .md---ml-160 {
    margin-left: -10rem;
  }
}

@media screen and (min-width: 1024px) {
  .lg---mt-8 {
    margin-top: -0.5rem;
  }
  .lg---mt-16 {
    margin-top: -1rem;
  }
  .lg---mt-24 {
    margin-top: -1.5rem;
  }
  .lg---mt-32 {
    margin-top: -2rem;
  }
  .lg---mt-40 {
    margin-top: -2.5rem;
  }
  .lg---mt-48 {
    margin-top: -3rem;
  }
  .lg---mt-64 {
    margin-top: -4rem;
  }
  .lg---mt-80 {
    margin-top: -5rem;
  }
  .lg---mt-120 {
    margin-top: -7.5rem;
  }
  .lg---mt-160 {
    margin-top: -10rem;
  }
  .lg---mr-8 {
    margin-right: -0.5rem;
  }
  .lg---mr-16 {
    margin-right: -1rem;
  }
  .lg---mr-24 {
    margin-right: -1.5rem;
  }
  .lg---mr-32 {
    margin-right: -2rem;
  }
  .lg---mr-40 {
    margin-right: -2.5rem;
  }
  .lg---mr-48 {
    margin-right: -3rem;
  }
  .lg---mr-64 {
    margin-right: -4rem;
  }
  .lg---mr-80 {
    margin-right: -5rem;
  }
  .lg---mr-120 {
    margin-right: -7.5rem;
  }
  .lg---mr-160 {
    margin-right: -10rem;
  }
  .lg---mb-8 {
    margin-bottom: -0.5rem;
  }
  .lg---mb-16 {
    margin-bottom: -1rem;
  }
  .lg---mb-24 {
    margin-bottom: -1.5rem;
  }
  .lg---mb-32 {
    margin-bottom: -2rem;
  }
  .lg---mb-40 {
    margin-bottom: -2.5rem;
  }
  .lg---mb-48 {
    margin-bottom: -3rem;
  }
  .lg---mb-64 {
    margin-bottom: -4rem;
  }
  .lg---mb-80 {
    margin-bottom: -5rem;
  }
  .lg---mb-120 {
    margin-bottom: -7.5rem;
  }
  .lg---mb-160 {
    margin-bottom: -10rem;
  }
  .lg---ml-8 {
    margin-left: -0.5rem;
  }
  .lg---ml-16 {
    margin-left: -1rem;
  }
  .lg---ml-24 {
    margin-left: -1.5rem;
  }
  .lg---ml-32 {
    margin-left: -2rem;
  }
  .lg---ml-40 {
    margin-left: -2.5rem;
  }
  .lg---ml-48 {
    margin-left: -3rem;
  }
  .lg---ml-64 {
    margin-left: -4rem;
  }
  .lg---ml-80 {
    margin-left: -5rem;
  }
  .lg---ml-120 {
    margin-left: -7.5rem;
  }
  .lg---ml-160 {
    margin-left: -10rem;
  }
}

@media screen and (min-width: 1200px) {
  .xl---mt-8 {
    margin-top: -0.5rem;
  }
  .xl---mt-16 {
    margin-top: -1rem;
  }
  .xl---mt-24 {
    margin-top: -1.5rem;
  }
  .xl---mt-32 {
    margin-top: -2rem;
  }
  .xl---mt-40 {
    margin-top: -2.5rem;
  }
  .xl---mt-48 {
    margin-top: -3rem;
  }
  .xl---mt-64 {
    margin-top: -4rem;
  }
  .xl---mt-80 {
    margin-top: -5rem;
  }
  .xl---mt-120 {
    margin-top: -7.5rem;
  }
  .xl---mt-160 {
    margin-top: -10rem;
  }
  .xl---mr-8 {
    margin-right: -0.5rem;
  }
  .xl---mr-16 {
    margin-right: -1rem;
  }
  .xl---mr-24 {
    margin-right: -1.5rem;
  }
  .xl---mr-32 {
    margin-right: -2rem;
  }
  .xl---mr-40 {
    margin-right: -2.5rem;
  }
  .xl---mr-48 {
    margin-right: -3rem;
  }
  .xl---mr-64 {
    margin-right: -4rem;
  }
  .xl---mr-80 {
    margin-right: -5rem;
  }
  .xl---mr-120 {
    margin-right: -7.5rem;
  }
  .xl---mr-160 {
    margin-right: -10rem;
  }
  .xl---mb-8 {
    margin-bottom: -0.5rem;
  }
  .xl---mb-16 {
    margin-bottom: -1rem;
  }
  .xl---mb-24 {
    margin-bottom: -1.5rem;
  }
  .xl---mb-32 {
    margin-bottom: -2rem;
  }
  .xl---mb-40 {
    margin-bottom: -2.5rem;
  }
  .xl---mb-48 {
    margin-bottom: -3rem;
  }
  .xl---mb-64 {
    margin-bottom: -4rem;
  }
  .xl---mb-80 {
    margin-bottom: -5rem;
  }
  .xl---mb-120 {
    margin-bottom: -7.5rem;
  }
  .xl---mb-160 {
    margin-bottom: -10rem;
  }
  .xl---ml-8 {
    margin-left: -0.5rem;
  }
  .xl---ml-16 {
    margin-left: -1rem;
  }
  .xl---ml-24 {
    margin-left: -1.5rem;
  }
  .xl---ml-32 {
    margin-left: -2rem;
  }
  .xl---ml-40 {
    margin-left: -2.5rem;
  }
  .xl---ml-48 {
    margin-left: -3rem;
  }
  .xl---ml-64 {
    margin-left: -4rem;
  }
  .xl---ml-80 {
    margin-left: -5rem;
  }
  .xl---ml-120 {
    margin-left: -7.5rem;
  }
  .xl---ml-160 {
    margin-left: -10rem;
  }
}