@charset "utf-8";

/* ==================================================

    * intro
    
================================================== */
body:has(.intro),
.wrap.intro {
    background-color:#f1f1f1; 
}
.intro-wrap { 
    position:relative; 
    width: 100%;
    height: 100dvh;
}
.intro-wrap .inner-layer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
}
.intro-btn { 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: auto auto;
}
.intro-btn > li,
.intro-btn > li > a,
.intro-btn > li > a > img {
    display: inline-block;
}
.intro-btn > li > a img {
    max-width: 100%;
}


/* ==================================================

    * responsive
    
================================================== */

@media screen and (max-width: 768px){
    .intro-btn { 
        display: block;
        padding: 40px 20px;
    }
    .intro-btn > li + li {
        margin-top: 20px;
    }
}