.header .frame-type-gkmb_shortcut_icon {
  position: absolute;
  right: 4vw;
  bottom: 50%;
  transform: translateY(50%);
  z-index: 200;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--g-gap-s);
}

.frame-type-gkmb_shortcut_icon {
  display: flex;
  gap: var(--g-gap-s);
  flex-wrap: wrap;
}

.shortcut-icon__link {
  position: relative;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: rgb(var(--c-primary));
  border-radius: 40px;
  transition: 0.2s ease all;
  color: rgb(var(--c-neutral-lightest));
}

.shortcut-icon__text {
  opacity: 0;
  transition: 0.5s ease all;
  position: absolute;
  bottom: 100%;
  background: rgb(var(--c-neutral-lightest));
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
  border-radius: var(--b-radius-s);
  padding: 0.6rem 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--f-size-s-1);
  color: rgb(var(--c-neutral-darker));
}

.header .shortcut-icon__text {
  left: auto;
  right: 100%;
  bottom: 50%;
  transform: translateY(50%);
}

.shortcut-icon__icon {
  line-height: 1;
  font-size: 18px;
}

@media (hover: hover) {
  .shortcut-icon__link:hover {
    background: rgb(var(--c-neutral-lightest));
    color: rgb(var(--c-neutral-darker));
    -webkit-box-shadow: 0 3px 7px rgba(var(--c-neutral-darkest), 0.1);
    -moz-box-shadow: 0 3px 7px rgba(var(--c-neutral-darkest), 0.1);
    -o-box-shadow: 0 3px 7px rgba(var(--c-neutral-darkest), 0.1);
    box-shadow: 0 3px 7px rgba(var(--c-neutral-darkest), 0.1);
  }

  .shortcut-icon__link:hover img {
    filter: brightness(0.1);
  }

  .shortcut-icon__link:hover .shortcut-icon__text {
    opacity: 1;
    bottom: calc(100% + 1rem);
  }

  .header .shortcut-icon__link:hover .shortcut-icon__text {
    bottom: 50%;
    right: calc(100% + 1rem);
  }
}

.page.-sub .header .frame-type-gkmb_shortcut_icon {
  display: none;
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 400px) {
  .page.-sub .header .frame-type-gkmb_shortcut_icon {
    display: flex;
  }
}

@media (min-width: 640px) {
  .header {
    & .frame-type-gkmb_shortcut_icon {
      bottom: 0;
      transform: translateY(50%);
      flex-direction: row;
    }

    & .shortcut-icon__text {
      bottom: 100%;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
    }

    & .shortcut-icon__link:last-child .shortcut-icon__text {
      left: auto;
      right: 0 !important;
      transform: none;
    }
  }

  @media (hover: hover) {
    .header .shortcut-icon__link:hover .shortcut-icon__text {
      bottom: calc(100% + 1rem);
      right: auto;
    }
  }
}

@media (min-width: 900px) {
  .shortcut-icon__link {
    width: 75px;
    height: 75px;
    padding: 15px;
  }

  .shortcut-icon__icon {
    line-height: 1;
    font-size: 29px;
  }
}

@media (min-width: 1580px) {
  .header {
    & .frame-type-gkmb_shortcut_icon {
      right: calc(50vw - 720px);
    }

    & .shortcut-icon__link:last-child .shortcut-icon__text {
      left: 50%;
      right: auto !important;
      transform: translateX(-50%);
    }
  }
}