/* ==========================================
   Top Hero
========================================== */

.top-hero{
    min-height:calc(100vh - 84px);
    background:url("images/top-hero.jpg") center center / cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.top-hero__overlay{
    width:100%;
    min-height:inherit;
    padding:clamp(52px,8vh,88px) 0;
    background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.48) 45%,rgba(0,0,0,.76));
    display:flex;
    align-items:center;
}

.top-hero__content{
    text-align:center;
    color:#fff;
}

.top-hero__title{
    font-size:clamp(2.15rem,4.8vw,4rem);
    font-weight:800;
    line-height:1.2;
    margin-bottom:1rem;
    color:#fff;
}

.top-title-sp{display:none}

.top-hero__lead{
    font-size:clamp(1rem,1.8vw,1.35rem);
    color:#fff;
    margin-bottom:2.25rem;
}

.top-hero__buttons{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    justify-content:center;
    gap:1rem;
    max-width:1060px;
    margin:0 auto;
}

.top-hero__buttons .gm-button{
    position:relative;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 18px;
    align-items:center;
    gap:14px;
    min-width:0;
    min-height:82px;
    padding:14px 18px;
    border:1px solid rgba(211,171,92,.72);
    border-radius:24px;
    background:linear-gradient(135deg,rgba(31,22,16,.9),rgba(72,48,29,.78));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 28px rgba(0,0,0,.3);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#fff;
    text-align:left;
    font-size:1.02rem;
    line-height:1.35;
    overflow:hidden;
    grid-column:span 2;
}

.top-hero__buttons .gm-button::after{
    content:"›";
    justify-self:end;
    color:#dfbd73;
    font-size:1.8rem;
    font-weight:400;
    line-height:1;
}

.top-hero__buttons .gm-button::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:linear-gradient(180deg,transparent,#d8af5e,transparent);
}

.top-hero__buttons .gm-button > i{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid rgba(223,189,115,.58);
    border-radius:50%;
    background:rgba(192,153,78,.16);
    color:#e8c77f;
    font-size:1.05rem;
}

.top-hero__buttons .gm-button span{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
}

.top-hero__buttons .gm-button small{
    font-size:.72rem;
    font-weight:500;
    color:#e8ddca;
    opacity:.92;
}

.top-hero__buttons .gm-button:hover{
    border-color:#e2bf76;
    background:linear-gradient(135deg,rgba(49,34,23,.94),rgba(91,60,34,.86));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 34px rgba(0,0,0,.38);
    transform:translateY(-3px);
}

.top-hero__buttons .top-hero__resale{
    grid-column:2 / span 2;
    margin-top:2px;
}

.top-hero__buttons .top-hero__maintenance{
    grid-column:4 / span 2;
    margin-top:2px;
}

@media (max-width:768px){

    .top-hero{min-height:calc(100vh - 68px)}

    .top-hero__overlay{padding:38px 0 48px}

    .top-hero__title{font-size:2rem;line-height:1.28;margin-bottom:.75rem}

    .top-title-pc{display:none}
    .top-title-sp{display:inline}

    .top-hero__lead{font-size:1rem;line-height:1.65;margin:0 auto 1.75rem;max-width:19em}

    .top-hero__buttons{
        grid-template-columns:1fr;
        width:min(100%,420px);
        gap:12px;
    }

    .top-hero__buttons .top-hero__resale,.top-hero__buttons .top-hero__maintenance{grid-column:auto}

    .top-hero__buttons .gm-button{
        grid-column:auto;
        grid-template-columns:40px minmax(0,1fr) 16px;
        min-height:76px;
        padding:12px 15px;
        border-radius:20px;
        gap:12px;
    }

    .top-hero__buttons .gm-button > i{
        width:40px;
        height:40px;
    }

}