@charset "UTF-8";

.c-btn-insta{
    width: 100%;
    max-width: 18.7rem;
    margin-top: 4rem;
    padding: .8rem 0;
    border: solid .1rem #fff;
    background: #fff;
    border-radius: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    position: relative;
    transition: all cubic-bezier(0.75, 0, 0.25, 1) 0.3s;
}

.c-btn-insta::before{
    content: '';
    width: 2.8rem;
    aspect-ratio: 1 / 1;
    background: url( ../img/common/icon/sns-Instagram.png ) no-repeat center / contain;
    transition: background-image cubic-bezier(0.75, 0, 0.25, 1) 0.3s;
}

.c-btn-insta.-size__s{
    width: 4rem;
    aspect-ratio: 4 / 4;
    margin-top: 0;
    padding: 0;
    margin-left: 2.4rem;
    border-radius: 50%;
}

.c-btn-insta.-size__s::before{
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate( -50%, -50% );
}

.c-btn-insta .-icon{
    width: 2.8rem;
}

.c-btn-insta .-txt{
    letter-spacing: 0;
    font-weight: 400;
    transition: color cubic-bezier(0.75, 0, 0.25, 1) 0.3s;
}


.l-header .c-btn-insta{
    border: solid .1rem #ccc;
}






@media screen and (min-width: 820px){
    .c-btn-insta:hover{
        background: transparent;
    }
    
    .c-btn-insta:hover::before{
        background: url( ../img/common/icon/sns-Instagram_wh.png ) no-repeat center / contain;
    }
    
    .c-btn-insta:hover .-txt{
        color: #fff;
    }

    body.p-top .c-btn-insta.-size__s:hover{
        border: solid .1rem #fff;
    }

    body:not( .p-top ) .c-btn-insta.-size__s:hover{
        border: solid .1rem #68687B !important;
    }

    body:not( .p-top ) .c-btn-insta.-size__s:hover::before{
        background: url( ../img/common/icon/sns-Instagram.png ) no-repeat center / contain;
    }

    .l-header-mega .c-btn-insta:hover{
        border: solid .1rem #68687B !important;
    }
    
    .l-header-mega .c-btn-insta:hover::before{
        background: url( ../img/common/icon/sns-Instagram.png ) no-repeat center / contain;
    }

    .l-header-mega .c-btn-insta:hover .-txt{
        color: #111;
    }
}


@media screen and (max-width: 820px){
    .c-btn-insta{
        max-width: none;
        margin-top: 2rem;
    }

    .c-btn-insta.-size__s{
        margin-top: 0;
        margin-left: 0;
        margin-right: 9.6rem;
    }

    .l-header{
        align-items: center !important;
    }
}

@media screen and (max-width: 667px){
    .c-btn-insta.-size__s{
        margin-right: 7.6rem;
    }

    .l-header-mega .c-btn-insta{
        opacity: 0;
        visibility: hidden;
        transition: all .5s ease;
    }

    .l-header-mega.-active .c-btn-insta{
        opacity: 1;
        visibility: visible;
    }
}



.l-header__navi{
    padding-right: calc( 8rem + 2.4rem ) !important;
}