@charset "utf-8";
/*!
 * quick-access.css
 * 下端五等分のクイックアクセスUI（提案 案01）
 *
 * 【対象】
 *   共有ヘッダー（css/new/header.css）を使う各ページの <nav class="quick-access">
 *
 * 【ON / OFF の切り替え】
 *   A. リンク先を変える
 *      ON : css/new/quick-access.css
 *      OFF: css/new/quick-access.off.css
 *   B. ファイル名を入れ替える（リンクはそのまま）
 *      mv quick-access.css quick-access.on.css
 *      mv quick-access.off.css quick-access.css
 */

:root {
  --qa-ink: #161616;
  --qa-red: #ab161a;
  --qa-cream: #f6f3ee;
  --qa-height: 64px;
  --qa-height-sp: 62px;
}

/* バーに隠れないよう余白を確保 */
body {
  padding-bottom: calc(var(--qa-height) + env(safe-area-inset-bottom, 0px)) !important;
}

.quick-access {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--qa-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--qa-ink);
  box-sizing: border-box;
}

.quick-access a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 6px 8px;
  color: var(--qa-cream);
  text-decoration: none;
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  box-sizing: border-box;
  opacity: 1;
}

/* メニュー間の縦区切り（変更前よりわずかに黒寄り） */
.quick-access a + a {
  box-shadow: inset 1px 0 0 rgba(60, 58, 55, 0.7);
}

.quick-access .qa-label {
  display: block;
}

.quick-access a:hover,
.quick-access a:focus-visible,
.quick-access a:active,
.quick-access a[aria-current="page"],
.quick-access a[aria-current="page"]:hover,
.quick-access a[aria-current="page"]:focus-visible,
.quick-access a[aria-current="page"]:active {
  background: var(--qa-red);
  outline: none;
  opacity: 1; /* reset.css の a:hover { opacity: .5 } を打ち消す */
}

/* 「上へ戻る」がバーに被らないよう持ち上げる */
#pageScroll.appearUp {
  bottom: calc(var(--qa-height) + 24px) !important;
}

@media screen and (max-width: 767px) {
  body {
    padding-bottom: calc(var(--qa-height-sp) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .quick-access {
    height: calc(var(--qa-height-sp) + env(safe-area-inset-bottom, 0px));
  }

  .quick-access a {
    font-size: 10px;
    padding: 4px 3px;
  }

  #pageScroll.appearUp {
    bottom: calc(var(--qa-height-sp) + 16px) !important;
    right: 16px !important;
  }
}