@charset "UTF-8";
/* =============
　section-top
================ */
.section-top{
    margin-bottom: 0;
    height: auto;
}
.section-top::after{
    display: none;
}
.top-phrase{
    display: block;
    text-align: center;
    margin: 3vh 0;
    padding: 0;
}
.top-phrase span{
    padding: 0;
}
.top-phrase::before{
    display: block;
    content: "";
    width: 60%;
    aspect-ratio: 1/1;
    background-color: var(--mainYellow);
    border-radius: 100% 48% 82% 61% / 70% 100% 39% 80% ;
    position: absolute;
    top: -300%;
    right: 0;
    animation: visualBack-fade 3s forwards;
}
@keyframes visualBack-fade {
    0%{
        width: 0%;
    }
    100%{
        width: 60%;
    }
}
/* --------  section-contact  --------- */

.section-contact{
    width: 100%;
    height: fit-content;
    padding: 0 5vw 10vh;
    margin: 0 auto;
}
.heading{
    text-align: center;
}
.section-contact .p-box{
    margin: 5vh .5rem 7vh;
}
.section-contact .p-box p{
    margin-bottom: 1.5rem;
}
.mark{
    font-weight: 500;
    border-bottom: 2px solid var(--mainYellow);
    padding: 0 .5rem;
}
.section-contact .contact-caution{
    margin: 1.5rem 0 10vh;
    text-align: center;
}
.contact-SNS{
    width: fit-content;
    margin: 7vh auto 5vh;
}
.contact-SNS .flexBox{
    width: fit-content;
    margin: 3vh auto 2vh;
    padding-right: 1.5rem;
    display: flex;
    justify-content: left;
    gap: 1.5rem;
}
.contact-SNS .p-box p{
    margin-bottom: 1.5rem;
}
.contact-SNS i{
    font-size: 3rem;
}
.fa-instagram{
    padding-left: .5rem;
}
.toMember{
    text-align: center;
}
.toMember a{
    font-weight: 500;
    border-bottom: 2px solid var(--mainYellow);
    padding: 0 .5rem;
}
.section-contact .btn{
    margin: 10vh auto 0;
}



@media screen and (min-width:960px) {

    /* --------  section-top  --------- */
    .section-top{
        margin-top: 15vh;
    }
    .top-phrase{
        width: fit-content;
        position: relative;
        margin: 0 auto;
        left: 0;
    }
    .top-phrase span{
        padding: 0;
    }

    /* --------  section-contact  --------- */
   
    .section-contact{
        margin: .6px 0 5vh;
        padding: 0 5vw 15vh;
    }
    .section-contact .p-box{
        width: 600px;
        margin: 7vh auto;
        padding-left: 2vw;
    }
    .contact-SNS .p-box{
        width: 600px;
    }
    .contact-SNS .flexBox{
        font-size: 1.8rem;
        transition: .3s;
    }
    .contact-SNS .flexBox:hover{
        color: var(--mainYellow);
    }
    .toMember a{
        transition: .3s;
    }
    .toMember a:hover{
        color: var(--mainYellow);
    }
}