@charset 'utf-8';

/** 下部固定バートップ要素 */
/** 固定処理など */
.bottom_bar_bl_box {
  bottom: 0;
  display: flex;
  justify-content: center;
  max-width: 100vw;
  padding-bottom: constant(safe-area-inset-bottom);
  /* for iOS11.1 */
  padding-bottom: env(safe-area-inset-bottom);
  pointer-events: none;
  position: fixed;
  /* 中央寄せしてコンテンツと同位置にそろえる */
  right: max(0px, calc((100% - 1366px) / 2));
  z-index: 90;
}

/* 単独で浮くタイプ */
.bottom_bar_bl_box_single {
  bottom: 50px;
  display: flex;
  justify-content: center;
  max-width: 100vw;
  padding-bottom: constant(safe-area-inset-bottom);
  /* for iOS11.1 */
  padding-bottom: env(safe-area-inset-bottom);
  pointer-events: none;
  position: fixed;
  /* 中央寄せしてコンテンツと同位置にそろえる */
  /* right: 50px; */
  right: max(50px, calc((100% - 1366px) / 2) + 50px);
  z-index: 90;
}

/* メニューと位置を揃えるため、flexをひとつ入れる */
.bottom_bar_bl_innerBox {
  display: flex;
  width: 100%;
}


/* 各要素をflexで整列する */
.bottom_bar_bl_list ul {
  display: flex;
  height: 100%;
  justify-content: flex-end;
  width: 100%;
  /* 右寄せにする */
}

/* 各固定バータイプをデフォルトで非表示。表示するコンテンツのcssにて.bottom_bar_type? { display: block; width: 100%;}を指定すること */
.bottom_bar_bl_list {
  display: none;
  pointer-events: auto;
  width: 0;
}

/* 要素の表示調整(共通) */
.bottom_bar_bl_list li {
  border-radius: 12px 12px 0 0;
  box-shadow: -1px -1px 10px var(--col_blackTransparent);
  height: 100%;
  transition: .4s ease-in-out;
}

/* type4 */
.bottom_bar_bl_list__single li {
  border: solid 4px var(--col_white);
  border-radius: 12px;
  box-shadow: -1px -1px 10px var(--col_blackTransparent);
  font-weight: bold;
  height: 100%;
  transition: .4s ease-in-out;
  width: 45.8rem;
}

.bottom_bar_bl_box li:hover,
.bottom_bar_bl_list__single li:hover {
  cursor: pointer;
}


/** リンク領域を要素全体に広げる */
.bottom_bar_bl_list a,
.bottom_bar_bl_list button,
.bottom_bar_bl_list__single a {
  align-items: center;
  color: var(--col_white);
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

/* type4のみ矢印をつける */
.bottom_bar_bl_list__single a {
  position: relative;
}

.bottom_bar_bl_list__single a::after {
  border-right: solid 3px var(--col_white);
  border-top: solid 3px var(--col_white);
  content: '';
  height: 16px;
  margin-left: auto;
  position: absolute;
  right: 5px;
  transform: rotate(45deg);
  width: 16px;
}

.bottom_bar_bl_list button {
  background-color: transparent;
  border: none;
  outline: none;
}

/* アイコン */
.bottom_bar_bl_list img {
  aspect-ratio: 1 / 1;
  height: 24px;
  margin: 0;
  padding: 0;
  width: 24px;
}


/* 遷移後もリンク文字列の色が変わらないように固定 */
.bottom_bar_bl_list a:visited,
.bottom_bar_bl_list__single a:visited {
  color: var(--col_white);
}

/* 各要素の表示 */
.bottom_bar__bgBrown {
  background-color: var(--col_bottom_bar_brown_pc);
}

.bottom_bar__bgGold {
  background-color: var(--col_bottom_bar_gold);
}

li.bottom_bar__flex2 {
  flex: 2;
}

li.bottom_bar__flex3 {
  flex: 3;
}

.bottom_bar_bl_typeNone {
  pointer-events: none;
}

/* ポップアップ共通 */
.bottom_bar_bl_popup {
  color: var(--col_mainCol);
  display: none;
  pointer-events: auto;
  position: fixed;
  text-align: left;
  z-index: 90;
}

/* ポップアップメニュー */
.bottom_bar_bl_popup {
  background-color: var(--col_grayE3Transparent);
  box-shadow: -1px -1px 10px var(--col_blackTransparent);
  text-align: left;
}

.bottom_bar_bl_popup li {
  border-bottom: solid 1px var(--col_gray70);
}

.bottom_bar_bl_popup li:last-of-type {
  border-bottom-style: none;
}

/** リンク領域を要素全体に広げる */
.bottom_bar_bl_popup a {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: flex-start;
  transition: .4s ease-in-out;
  width: 100%;
}

.bottom_bar_bl_popup a,
.bottom_bar_bl_popup a:visited {
  color: var(--col_mainCol);
}

.bottom_bar_bl_popup a:hover,
.bottom_bar_bl_popup a:focus,
.bottom_bar_bl_popup a:active {
  background-color: var(--col_mainColTransparent);
  color: var(--col_white);
}

.bottom_bar_bl_modal {
  display: none;
  height: 100vh;
  left: 0;
  pointer-events: auto;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 89;
}


/*===============================================
●スマホ用（896px未満）
===============================================*/
@media screen and (max-width:896px) {
  /** 固定処理など */
  .bottom_bar_bl_box {
    width: 100%;
  }

  /* 単独で浮くタイプ */
.bottom_bar_bl_box_single {
  bottom: 10px;
  right: 40px;
}

  /* 各要素の表示 */
  .bottom_bar__bgBrown {
    background-color: var(--col_bottom_bar_brown_sp);
  }


  /* 要素の表示調整(共通) */
  .bottom_bar_bl_list li {
    flex: 1 1 calc(100% / 3);
    padding: 8px;
  }

  .bottom_bar_bl_list__single li {
    flex: 0 1 300px;
    font-size: 14px;
    letter-spacing: .0014em;
    padding: 15px;
    width: 300px;
  }

  .bottom_bar_bl_list li,
  .bottom_bar_bl_list li button {
    font-size: 10px;
    height: 54px;
    letter-spacing: .001em;
  }

  .bottom_bar_bl_list li:hover,
  .bottom_bar_bl_list li:focus,
  .bottom_bar_bl_list li:active {
    border-bottom: solid 2px var(--col_white);
  }

  .bottom_bar_bl_list__single li:hover,
  .bottom_bar_bl_list__single li:focus,
  .bottom_bar_bl_list__single li:active {
    border: solid 4px var(--col_bottom_bar_brown_sp);
  }

  /* アイコンとテキストの並び */
  .bottom_bar_bl_list a,
  .bottom_bar_bl_list button {
    flex-direction: column;
    gap: 4px;
    justify-content: flex-start;
  }

  .bottom_bar_bl_popup li {
    font-size: 10px;
    height: 40px;
    letter-spacing: -.0004em;
    line-height: 1.7;
  }
  .bottom_bar_bl_popup a {
    padding: 5px 8px;
  }
}


/*===============================================
●PC用（897px以上）
===============================================*/
@media screen and (min-width:897px) {
  .bottom_bar_bl_innerBox {
    max-width: 1440px;
  }

  /* 各要素の表示 */
  .bottom_bar__bgBrown {
    background-color: var(--col_bottom_bar_brown_pc);
  }

  /* 要素の表示調整(共通) */
  .bottom_bar_bl_list li {
    flex: 0 1 250px;
    padding: 18px;
    width: 250px;
  }

  .bottom_bar_bl_list__single li {
    flex: 0 1 458px;
    font-size: 20px;
    letter-spacing: .0002em;
    padding: 20px;
    width:458px;
  }

  .bottom_bar_bl_list li,
  .bottom_bar_bl_list li button {
    font-size: 14px;
    letter-spacing: .0014em;
  }

  .bottom_bar_bl_list li:hover,
  .bottom_bar_bl_list li:focus,
  .bottom_bar_bl_list li:active {
    border-bottom: solid 3px var(--col_white);
  }

  .bottom_bar_bl_list__single li:hover,
  .bottom_bar_bl_list__single li:focus,
  .bottom_bar_bl_list__single li:active {
    border: solid 4px var(--col_bottom_bar_brown_pc);
  }

  /* アイコンとテキストの並び */
  .bottom_bar_bl_list a,
  .bottom_bar_bl_list button {
    flex-direction: row;
    gap: 10px;
  }

  .bottom_bar_bl_popup li {
    font-size: 16px;
    height: 48px;
    line-height: 1.6875;
  }
  .bottom_bar_bl_popup a {
    padding: 8px 20px;
  }
}