/* One shared bottom reservation component. Do not override this per page. */
:root {
  --bottom-nav-height: 74px;
  --bottom-nav-max-width: 720px;
  --bottom-nav-side-gap: 12px;
  --bottom-nav-bottom-gap: 8px;
  --bottom-nav-inner-padding: 4px;
  --bottom-nav-item-padding-x: 8px;
  --bottom-nav-item-gap: 3px;
  --bottom-nav-radius: 17px;
  --bottom-nav-item-radius: 12px;
  --bottom-nav-border: 1px solid rgba(45, 49, 51, .07);
  --bottom-nav-divider: rgba(45, 49, 51, .055);
  --bottom-nav-shadow: 0 7px 20px rgba(41, 45, 47, .075), inset 0 1px 0 rgba(255, 255, 255, .78);
  --bottom-nav-icon-size: 33.35px;
  --bottom-nav-icon-svg-size: 20.7px;
  --bottom-nav-label-size: .6555rem;
  --bottom-nav-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bottom-nav-clearance: calc(var(--bottom-nav-height) + var(--bottom-nav-bottom-gap) + var(--bottom-nav-safe-bottom) + 16px);
}

.bottom-fixed-nav {
  display: none;
}

@media (max-width: 640px) {
  .bottom-fixed-nav {
    position: fixed;
    z-index: 1000;
    right: var(--bottom-nav-side-gap);
    bottom: calc(var(--bottom-nav-bottom-gap) + var(--bottom-nav-safe-bottom));
    left: var(--bottom-nav-side-gap);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: auto;
    max-width: var(--bottom-nav-max-width);
    height: var(--bottom-nav-height);
    margin: 0 auto;
    padding: var(--bottom-nav-inner-padding);
    gap: 0;
    border: var(--bottom-nav-border);
    border-radius: var(--bottom-nav-radius);
    background: rgba(255, 255, 255, .83);
    box-shadow: var(--bottom-nav-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-sizing: border-box;
    isolation: isolate;
    pointer-events: auto;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: opacity .2s ease, visibility 0s linear .2s;
  }

  .bottom-fixed-nav__item {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    min-height: calc(var(--bottom-nav-height) - (var(--bottom-nav-inner-padding) * 2));
    align-items: center;
    justify-content: center;
    gap: var(--bottom-nav-item-gap);
    padding: 0 var(--bottom-nav-item-padding-x);
    border: 0;
    border-radius: var(--bottom-nav-item-radius);
    background: transparent;
    color: #303537;
    font-family: var(--font-body, "Noto Sans JP", sans-serif);
    font-size: var(--bottom-nav-label-size);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .025em;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
    will-change: transform;
    transition: background-color .12s ease, box-shadow .12s ease, transform .12s cubic-bezier(.2, .8, .2, 1);
  }

  .bottom-fixed-nav__item > * {
    pointer-events: none;
  }

  .bottom-fixed-nav__item + .bottom-fixed-nav__item {
    border-left: 1px solid var(--bottom-nav-divider);
  }

  .bottom-fixed-nav__icon {
    display: grid;
    width: var(--bottom-nav-icon-size);
    height: var(--bottom-nav-icon-size);
    flex: 0 0 var(--bottom-nav-icon-size);
    place-items: center;
    border-radius: 50%;
    transition: filter .12s ease, transform .12s cubic-bezier(.2, .8, .2, 1);
  }

  .bottom-fixed-nav__icon--phone { background: rgba(128, 204, 241, .32); }
  .bottom-fixed-nav__icon--line { background: rgba(126, 223, 175, .29); }
  .bottom-fixed-nav__icon--web { background: rgba(246, 148, 185, .28); }

  .bottom-fixed-nav__icon svg {
    width: var(--bottom-nav-icon-svg-size);
    height: var(--bottom-nav-icon-svg-size);
    fill: none;
    stroke: #303537;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bottom-fixed-nav__label {
    display: block;
    min-width: 0;
    white-space: nowrap;
    text-align: left;
    transition: opacity .12s ease, transform .12s ease;
  }

  .bottom-fixed-nav__item:active,
  .bottom-fixed-nav__item.is-pressed {
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: translateY(1px) scale(.98);
  }

  .bottom-fixed-nav__item:active .bottom-fixed-nav__icon,
  .bottom-fixed-nav__item.is-pressed .bottom-fixed-nav__icon {
    filter: none;
    transform: scale(.94);
  }

  .bottom-fixed-nav__item:active .bottom-fixed-nav__label,
  .bottom-fixed-nav__item.is-pressed .bottom-fixed-nav__label {
    opacity: 1;
    transform: none;
  }

  .bottom-fixed-nav__item:focus-visible {
    outline: 2px solid rgba(104, 160, 184, .55);
    outline-offset: -2px;
  }

  .bottom-fixed-nav__item[aria-disabled="true"] {
    pointer-events: none;
    opacity: .45;
  }

  .site-footer {
    padding-bottom: var(--bottom-nav-clearance);
  }
}

@media (hover: hover) and (pointer: fine) {
  .bottom-fixed-nav__item:hover .bottom-fixed-nav__icon {
    transform: scale(1.05);
  }
}

@media (max-width:359px) { :root { --bottom-nav-item-padding-x:3px; } }