/*
============================================
SITE-BOTTOM.CSS
全ページ共通フッター
============================================
*/


/* =========================================
   FOOTER
========================================= */

.site-footer{
    position:relative;

    border-top:
        1px solid
        rgba(184,139,53,.30);

    color:#9f9687;

    background:#080806;
}


/* =========================================
   FOOTER NAV AREA
========================================= */

.footer-nav-area{
    padding:
        48px
        0
        42px;
}


.footer-nav-groups{
    display:grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap:34px;
}


/* =========================================
   FOOTER GROUP
========================================= */

.footer-nav-group{
    padding:
        26px
        28px;

    border:
        1px solid
        rgba(184,139,53,.30);

    background:
        linear-gradient(
            145deg,
            rgba(184,139,53,.045),
            transparent 50%
        ),
        #11100d;
}


.footer-nav-group__title{
    margin:
        0
        0
        18px;

    color:#ddb96a;

    font-family:
        "Noto Serif JP",
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size:1.02rem;
    font-weight:400;
    line-height:1.6;
    letter-spacing:.08em;
}


/* =========================================
   FOOTER LINKS
========================================= */

.footer-nav-links{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        0
        22px;
}


.footer-nav-links a{
    display:block;

    padding:
        11px
        0;

    border-bottom:
        1px solid
        rgba(184,139,53,.14);

    color:#cfc6b6;

    font-family:
        "Noto Serif JP",
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size:.86rem;
    font-weight:400;
    line-height:1.7;
    letter-spacing:.025em;

    text-decoration:none;

    transition:
        color .25s ease,
        padding-left .25s ease;
}


.footer-nav-links a:hover,
.footer-nav-links a:focus-visible,
.footer-nav-links a[aria-current="page"]{
    color:#ddb96a;
}


.footer-nav-links a:hover,
.footer-nav-links a:focus-visible{
    padding-left:5px;
}


/* =========================================
   FOOTER BOTTOM
========================================= */

.footer-bottom{
    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:24px;

    padding:
        22px
        0
        26px;

    border-top:
        1px solid
        rgba(184,139,53,.18);

    color:#9f9687;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        sans-serif;

    font-size:.76rem;
    line-height:1.8;
    letter-spacing:.025em;
}


.footer-bottom__copyright{
    min-width:0;
}


.footer-bottom__top{
    flex-shrink:0;

    color:#cfc6b6;

    text-decoration:none;

    transition:
        color .25s ease;
}


.footer-bottom__top:hover,
.footer-bottom__top:focus-visible{
    color:#ddb96a;
}


/* =========================================
   PAGE TOP
========================================= */

.page-top{
    position:fixed;

    right:24px;
    bottom:24px;

    z-index:1000;

    width:58px;
    height:58px;

    padding:0;

    border:
        1px solid
        rgba(221,185,106,.55);

    border-radius:50%;

    color:#ddb96a;

    background:
        rgba(13,12,9,.92);

    cursor:pointer;

    opacity:0;
    visibility:hidden;

    transform:
        translateY(10px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease,
        color .25s ease,
        background .25s ease;
}


.page-top.is-visible{
    opacity:1;
    visibility:visible;

    transform:
        translateY(0);
}


.page-top:hover,
.page-top:focus-visible{
    color:#080806;

    background:#ddb96a;
}


/* 矢印 */

.page-top::before{
    position:absolute;

    top:21px;
    left:50%;

    width:10px;
    height:10px;

    content:"";

    border-top:
        1px solid
        currentColor;

    border-left:
        1px solid
        currentColor;

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* TOP文字 */

.page-top::after{
    position:absolute;

    right:0;
    bottom:8px;
    left:0;

    content:"TOP";

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:.56rem;
    line-height:1;
    letter-spacing:.08em;

    text-align:center;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:960px){

    .footer-nav-groups{
        grid-template-columns:1fr;
    }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:700px){

    .footer-nav-area{
        padding:
            40px
            0
            34px;
    }


    .footer-nav-group{
        padding:
            24px
            22px;
    }


    .footer-nav-group__title{
        font-size:.98rem;
    }


    .footer-nav-links{
        grid-template-columns:1fr;
    }


    .footer-nav-links a{
        padding:
            12px
            0;

        font-size:.84rem;
    }


    .footer-bottom{
        flex-direction:column;

        align-items:flex-start;

        gap:8px;

        padding:
            20px
            0
            24px;

        font-size:.74rem;
    }


    .page-top{
        right:16px;
        bottom:16px;

        width:54px;
        height:54px;
    }


    .page-top::before{
        top:19px;
    }


    .page-top::after{
        bottom:7px;
    }

}