/**
 * Z-index
 */
.z-0 {
  z-index: 0;
}
.z-1 {
  z-index: 1;
}
.z-2 {
  z-index: 2;
}
.z-3 {
  z-index: 3;
}
.z-4 {
  z-index: 4;
}
.z-5 {
  z-index: 5;
}
/* 層の目安は、コンテンツ内の重なりが 0〜5、浮遊するUIが 10〜50、
 * オーバーレイが 100番台（.dialog__layer が 100、.header が 99）。 */
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-50 {
  z-index: 50;
}
.z-100 {
  z-index: 100;
}
/* 背景装飾を本文の背後へ送る。親に z-index が付いていると効かないため、
 * その場合は親の z-index を外す。 */
.-z-1 {
  z-index: -1;
}

/**
 * Position
 */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}
/* SPだけ absolute にして、PCで通常フローに戻す用途。 */
.static {
  position: static;
}

/**
 * Top, right, bottom, left
 */
.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.inset-x-0 {
  right: 0;
  left: 0;
}
.inset-y-0 {
  top: 0;
  bottom: 0;
}

.top-0 {
  top: 0;
}
.top-4 {
  top: 0.25rem;
}
.top-8 {
  top: 0.5rem;
}
.top-10 {
  top: 0.625rem;
}
.top-12 {
  top: 0.75rem;
}
.top-16 {
  top: 1rem;
}
.top-20 {
  top: 1.25rem;
}
.top-24 {
  top: 1.5rem;
}
.top-32 {
  top: 2rem;
}
.top-40 {
  top: 2.5rem;
}
.top-48 {
  top: 3rem;
}
.top-56 {
  top: 3.5rem;
}
.top-60 {
  top: 3.75rem;
}
.top-64 {
  top: 4rem;
}
.top-half {
  top: 50%;
}

.-top-4 {
  top: -0.25rem;
}
.-top-8 {
  top: -0.5rem;
}
.-top-10 {
  top: -0.625rem;
}
.-top-12 {
  top: -0.75rem;
}
.-top-16 {
  top: -1rem;
}
.-top-20 {
  top: -1.25rem;
}
.-top-24 {
  top: -1.5rem;
}
.-top-32 {
  top: -2rem;
}
.-top-40 {
  top: -2.5rem;
}
.-top-48 {
  top: -3rem;
}
.-top-56 {
  top: -3.5rem;
}
.-top-60 {
  top: -3.75rem;
}
.-top-64 {
  top: -4rem;
}

.right-0 {
  right: 0;
}
.right-4 {
  right: 0.25rem;
}
.right-8 {
  right: 0.5rem;
}
.right-10 {
  right: 0.625rem;
}
.right-12 {
  right: 0.75rem;
}
.right-16 {
  right: 1rem;
}
.right-20 {
  right: 1.25rem;
}
.right-24 {
  right: 1.5rem;
}
.right-32 {
  right: 2rem;
}
.right-40 {
  right: 2.5rem;
}
.right-48 {
  right: 3rem;
}
.right-56 {
  right: 3.5rem;
}
.right-60 {
  right: 3.75rem;
}
.right-64 {
  right: 4rem;
}
.right-half {
  right: 50%;
}

.-right-4 {
  right: -0.25rem;
}
.-right-8 {
  right: -0.5rem;
}
.-right-10 {
  right: -0.625rem;
}
.-right-12 {
  right: -0.75rem;
}
.-right-16 {
  right: -1rem;
}
.-right-20 {
  right: -1.25rem;
}
.-right-24 {
  right: -1.5rem;
}
.-right-32 {
  right: -2rem;
}
.-right-40 {
  right: -2.5rem;
}
.-right-48 {
  right: -3rem;
}
.-right-56 {
  right: -3.5rem;
}
.-right-60 {
  right: -3.75rem;
}
.-right-64 {
  right: -4rem;
}

.bottom-0 {
  bottom: 0;
}
.bottom-4 {
  bottom: 0.25rem;
}
.bottom-8 {
  bottom: 0.5rem;
}
.bottom-10 {
  bottom: 0.625rem;
}
.bottom-12 {
  bottom: 0.75rem;
}
.bottom-16 {
  bottom: 1rem;
}
.bottom-20 {
  bottom: 1.25rem;
}
.bottom-24 {
  bottom: 1.5rem;
}
.bottom-32 {
  bottom: 2rem;
}
.bottom-40 {
  bottom: 2.5rem;
}
.bottom-48 {
  bottom: 3rem;
}
.bottom-56 {
  bottom: 3.5rem;
}
.bottom-60 {
  bottom: 3.75rem;
}
.bottom-64 {
  bottom: 4rem;
}
.bottom-half {
  bottom: 50%;
}

.-bottom-4 {
  bottom: -0.25rem;
}
.-bottom-8 {
  bottom: -0.5rem;
}
.-bottom-10 {
  bottom: -0.625rem;
}
.-bottom-12 {
  bottom: -0.75rem;
}
.-bottom-16 {
  bottom: -1rem;
}
.-bottom-20 {
  bottom: -1.25rem;
}
.-bottom-24 {
  bottom: -1.5rem;
}
.-bottom-32 {
  bottom: -2rem;
}
.-bottom-40 {
  bottom: -2.5rem;
}
.-bottom-48 {
  bottom: -3rem;
}
.-bottom-56 {
  bottom: -3.5rem;
}
.-bottom-60 {
  bottom: -3.75rem;
}
.-bottom-64 {
  bottom: -4rem;
}

.left-0 {
  left: 0;
}
.left-4 {
  left: 0.25rem;
}
.left-8 {
  left: 0.5rem;
}
.left-10 {
  left: 0.625rem;
}
.left-12 {
  left: 0.75rem;
}
.left-16 {
  left: 1rem;
}
.left-20 {
  left: 1.25rem;
}
.left-24 {
  left: 1.5rem;
}
.left-32 {
  left: 2rem;
}
.left-40 {
  left: 2.5rem;
}
.left-48 {
  left: 3rem;
}
.left-56 {
  left: 3.5rem;
}
.left-60 {
  left: 3.75rem;
}
.left-64 {
  left: 4rem;
}
.left-half {
  left: 50%;
}

.-left-4 {
  left: -0.25rem;
}
.-left-8 {
  left: -0.5rem;
}
.-left-10 {
  left: -0.625rem;
}
.-left-12 {
  left: -0.75rem;
}
.-left-16 {
  left: -1rem;
}
.-left-20 {
  left: -1.25rem;
}
.-left-24 {
  left: -1.5rem;
}
.-left-32 {
  left: -2rem;
}
.-left-40 {
  left: -2.5rem;
}
.-left-48 {
  left: -3rem;
}
.-left-56 {
  left: -3.5rem;
}
.-left-60 {
  left: -3.75rem;
}
.-left-64 {
  left: -4rem;
}

/**
 * 中央固定
 * transform を使う。16_animations.css のアニメーションは独立した translate
 * プロパティを使っているため、両者は打ち消し合わず合成される。
 * （中央に置いた要素を fade-in--up させる、といった併用ができる）
 *
 * .absolute-center 系は position ごと指定するショートカット。
 * ヒーローの見出しや画像上のバッジに、ラッパーを増やさず直接付けられる。
 */
.-translate-x-half {
  transform: translateX(-50%);
}
.-translate-y-half {
  transform: translateY(-50%);
}
.-translate-half {
  transform: translate(-50%, -50%);
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.absolute-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.absolute-center-y {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (min-width: 768px) {
  .md--relative {
    position: relative;
  }
  .md--absolute {
    position: absolute;
  }
  .md--fixed {
    position: fixed;
  }
  .md--sticky {
    position: sticky;
  }
  .md--static {
    position: static;
  }
}

@media screen and (min-width: 1024px) {
  .lg--relative {
    position: relative;
  }
  .lg--absolute {
    position: absolute;
  }
  .lg--fixed {
    position: fixed;
  }
  .lg--sticky {
    position: sticky;
  }
  .lg--static {
    position: static;
  }
  .lg--top-80 {
    top: 5rem;
  }
  .lg--bottom-40 {
    bottom: 2.5rem;
  }
}

@media screen and (min-width: 1200px) {
  .xl--relative {
    position: relative;
  }
  .xl--absolute {
    position: absolute;
  }
  .xl--fixed {
    position: fixed;
  }
  .xl--sticky {
    position: sticky;
  }
  .xl--static {
    position: static;
  }
}