@charset "UTF-8";

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

SNS2（TOP用）

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


#sns-section {
    position: relative;
    padding-top: 90px;
    padding-bottom: 90px;
    background: linear-gradient(165deg, #F3F4F7 0%, #F3F4F7 70%, #ffdc00 30%, #ffdc00 100%);
}

.sns {
    width: 100%;
    max-width: 1000px;
    margin: 0px auto;
}

.sns:after {
    content: "";
    clear: both;
    display: block;
}

.sns .box {
    float: left;
    overflow: hidden;
    position: relative;
    width: 41%;
    margin: 0 4%;
    text-align: center;
}

@media screen and (max-width:600px) {
    .sns .box {
        width: 88%;
        margin: 40px 6%;
    }
}

.sns .box h3 {
    text-align: center;
    margin-bottom: 5px;
}

.sns .box p {
    font-size: 1.4rem;
    position: relative;
    color: #777;
    text-align: center;
    width:80%;
    margin: 0 auto 30px;
}

@media screen and (max-width:600px) {
    .sns .box p {
        font-size: 1.2rem;
    }
}

.sns .box .image {
    position: relative;
    width: 90%;
    padding-top: 90%;
    overflow: hidden;
    margin: 0 auto 30px;
}

.sns .box .image img {
    position: absolute;
    border-radius: 1000px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
}

.sns .box:hover img {
    opacity: 0.7;
}