/* quick menu */
.nav {
    background: url(../images/quick-menu-background-image.png) no-repeat 0 0 /
        contain;
    position: fixed;
    bottom: 10%;
    right: 5%;
    width: var(--quick-menu-width);
    height: var(--quick-menu-height);
    z-index: 100;
}
.nav-content {
    padding-top: var(--quick-menu-padding-top);
}

.nav-showcase {
    position: relative;
    background: url(../images/main-page/showcase-banner.png) no-repeat 0 0 /
        100% 100%;
    position: absolute;
    top: var(--quick-menu-showcase-position-top);
    left: var(--quick-menu-showcase-position-left);
    width: var(--quick-menu-showcase-width);
    height: var(--quick-menu-showcase-height);
}
.link-to-online-showcase {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--quick-menu-showcase-link-to-online-showcase);
}

.event-wrapper {
    position: absolute;
    top: -55%;
    left: 0;
}

.nav-list {
    width: var(--quick-menu-list-width);
    margin: 0 auto;
}
.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--quick-menu-link-height);
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--quick-menu-link-font-size);
    font-weight: 500;
    letter-spacing: -0.5px;
    color: #998882;
    transition: color 0.35s;
}
.nav-link:active {
    color: #998882;
}
.nav-item.official-cafe .nav-link {
    color: #12df4f;
    padding-left: var(--quick-menu-official-cafe-link-padding-left);
    position: relative;
}
.nav-item.official-cafe .nav-link::before {
    content: "";
    background: url(../images/ico-naver.png) no-repeat 0 0 / contain;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: var(--quick-menu-official-cafe-link-icon-width);
    height: var(--quick-menu-official-cafe-link-icon-height);
}
.nav-link.active,
.nav-link:hover {
    color: #fff;
}
.nav-item:last-child .nav-link:focus {
    color: #998882;
}
.nav-item:last-child .nav-link:hover {
    color: #fff;
}