/* ==========================================
   Fantasy CMS
   Access Component
========================================== */


/* ==========================================
   Access Box
========================================== */

.access-box {

    background:var(--color-surface);


    border:1px solid var(--color-border);


    border-radius:var(--radius);


    padding:40px;


    max-width:800px;


    margin:0 auto 40px;


    box-shadow:var(--shadow);

}



/* ==========================================
   Text
========================================== */

.access-box p {

    margin-bottom:20px;


    color:var(--color-text);


    font-size:1.05rem;


    line-height:1.8;

}



.access-box p::before {

    color:var(--color-gold);

}



/* ==========================================
   SNS
========================================== */

#snsLinks {

    display:flex;


    gap:15px;


    margin-top:30px;

}



#snsLinks a {

    display:inline-flex;


    justify-content:center;


    align-items:center;


    min-width:120px;


    padding:12px 25px;


    border:1px solid var(--color-gold);


    border-radius:30px;


    color:var(--color-gold);


    transition:var(--transition);

}



#snsLinks a:hover {


    background:var(--color-gold);


    color:#111;


}



/* ==========================================
   Google Map
========================================== */

#googleMap {


    width:100%;


    height:400px;


    background:#222;


    border-radius:var(--radius);


    overflow:hidden;


    border:1px solid var(--color-border);

}



/* ==========================================
   Responsive
========================================== */

@media(max-width:768px){


    .access-box {

        padding:25px;

    }


    #snsLinks {

        flex-direction:column;

    }


    #snsLinks a {

        width:100%;

    }


    #googleMap {

        height:300px;

    }

}