@charset "UTF-8";

/* ==========================================================
   SP FOOTER NAV
========================================================== */

/* PCでは非表示 */
.sp-footer-nav{
    display:none;
}

/* SPのみ表示 */
@media screen and (max-width:1079px){

    .sp-footer-nav{
        position:fixed;
        left:0;
        bottom:0;
        width:100%;
        height:7rem;

        display:flex;

        z-index:10050;

        /* 上側に薄い影 */
        box-shadow:0 -3px 10px rgba(0, 0, 0, .1);
    }

    .sp-footer-nav__item{
        position:relative;
        flex:1;

        display:flex;
        justify-content:center;
        align-items:center;

        color:#fff;
        text-decoration:none;
        text-align:center;

        /* 項目の区切り線 */
        border-right:1px solid rgba(255, 255, 255, .16);
    }

    .sp-footer-nav__item:last-child{
        border-right:none;
    }

    .sp-footer-nav__item--member{
        background:#7b9dbf;
    }

    .sp-footer-nav__item--reserve{
        background:#5076ab;
    }

    .sp-footer-nav__item--online{
        background:#184786;
    }

    .sp-footer-nav__arrow{
        position:absolute;
        left:1.2rem;
        top:50%;

        transform:translateY(-50%);

        /* 少し小さく */
        font-size:2.6rem;
        font-weight:300;
        line-height:1;
    }

    .sp-footer-nav__text{
        font-size:1.3rem;
        line-height:1.5;
        letter-spacing:.08em;
    }

    /* 固定メニューで本文が隠れないように */
    body{
        padding-bottom:7rem;
    }

}

.sp-footer-nav__item::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:1px;
    background:rgba(255,255,255,.25);
}

.sp-footer-nav__item{
    transition:.3s;
}

.sp-footer-nav__item:active{
    filter:brightness(.6);
}

.sp-footer-nav__item--member{
    background:linear-gradient(
        to bottom,
        #88aacb 0%,
        #7b9dbf 55%,
        #7395b8 100%
    );
}

.sp-footer-nav__item--reserve{
    background:linear-gradient(
        to bottom,
        #5a81b6 0%,
        #5076ab 55%,
        #476da2 100%
    );
}

.sp-footer-nav__item--online{
    background:linear-gradient(
        to bottom,
        #24508f 0%,
        #184786 55%,
        #123f79 100%
    );
}

.sp-footer-nav__item,
.sp-footer-nav__item:link,
.sp-footer-nav__item:visited{
    color:#fff;
    text-decoration:none;
}

.sp-footer-nav__item{
    position:relative;
    overflow:hidden;
}

.sp-footer-nav__item::before{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.18) 0%,
        rgba(255,255,255,.08) 22%,
        rgba(255,255,255,0) 45%
    );

    pointer-events:none;
}


.sp-footer-nav{
    transform:translateY(100%);
    opacity:0;
    visibility:hidden;

    transition:
        transform .5s ease,
        opacity .5s ease,
        visibility 0s linear .5s;
}

.sp-footer-nav.is-show{
    transform:translateY(0);
    opacity:1;
    visibility:visible;

    transition:
        transform .5s ease,
        opacity .5s ease;
}