:root {
  /* 線の色 */
  --bottom-nav-border-color: #95aad8;
  /* 背景色 */
  --bottom-nav-bg-color: #6289c6;
  /* ボタンの数 */
  --bottom-nav-NoB: 4;
  /* ボタンの高さ */
  --bottom-nav-height: 120px;
  /* LPの幅 */
  --bottom-nav-max-width: 500px;
  /* ボトムナビ消える幅 */
  --bottom-nav-min-width: 1096px;
}

/*-------------------------------------------
l-footer
--------------------------------------------*/

@media screen and (min-width: var(--bottom-nav-min-width)) {
  .l-footer {
    margin-bottom: 0px;
  }
}

/* 501pxより前でボトムナビを表示させるなら追加、させないならコメントアウト */
@media screen and (max-width: 1096px) {
  .l-footer {
    margin-bottom: var(--bottom-nav-height);
  }
}

/* ナビの大きさ分マージンを開ける */
@media screen and (max-width: 501px) {
  .l-footer {
    margin-bottom: calc(100vw * var(--bottom-nav-height) / 499);
  }
}

/*-------------------------------------------
global-nav
--------------------------------------------*/
.global-nav {
  width: 100%;
  max-width: var(--bottom-nav-max-width);
  height: auto;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  background-color: var(--bottom-nav-bg-color);
  z-index: 1000;
}
.global-nav nav {
  width: 100%;
}
.global-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.global-nav__list__item {
  border-top: 3px solid var(--bottom-nav-border-color);
}

.global-nav__list__item:not(:last-child) {
  border-right: 3px solid var(--bottom-nav-border-color);
}

.global-nav__list__item a {
  width: calc(var(--bottom-nav-max-width) / var(--bottom-nav-NoB));
  height: auto;
}
.global-nav__list__item img {
  width: 100%;
  height: auto;
  pointer-events: auto;
}
@media screen and (min-width: 501px) {
  .global-nav {
    width: 100%;
    max-width: var(--bottom-nav-max-width);
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
  }
  .global-nav nav {
    width: 100%;
  }
  .global-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .global-nav__list__item a {
    width: calc(var(--bottom-nav-max-width) / var(--bottom-nav-NoB));
    height: auto;
  }
  .global-nav__list__item img {
    width: 100%;
    height: auto;
  }
}