@charset "utf-8";

#social {
    .wrap {
        padding-bottom:0;
    }
    .wrap2 {
        background:url(../img/social/bg01.jpg) no-repeat center center/cover;
        padding:0;
        .contents {
            padding:90px 0;
            min-height:760px;
            position:relative;
            .contents_inner {
                max-width:640px;
                margin:0 auto;
                text-shadow:0 0 10px #FFFFFF,
                            0 0 10px #FFFFFF,
                            0 0 10px #FFFFFF,
                            0 0 10px #FFFFFF,
                            0 0 10px #FFFFFF,
                            0 0 10px #FFFFFF;
                h3 {
                    font-size:4.0rem;
                    color:var(--color_main);
                    margin-bottom:.5em;
                }
                p {
                    font-size:2.0rem;
                    font-weight:600;
                    margin-bottom:1em;
                }
                span {
                    font-size:1.6rem;
                    display:block;
                    line-height:1.5;
                }
            }
            ul {
                position:absolute;
                left:0;
                bottom:0;
                width:100%;
                display:grid;
                grid-template-columns:repeat(3,1fr);
                align-items:center;
                grid-column-gap:5%;
                transform:translateY(50%);
                li {
                    a {
                        display:grid;
                        grid-template-columns:repeat(2,auto);
                        align-items:center;
                        justify-content:center;
                        grid-column-gap:.5em;
                        font-size:min(2vw,1.8rem);
                        line-height:1.5;
                        color:var(--color_main);
                        font-weight:600;
                        padding:.5em;
                        background-color:#FFFFFF;
                        border-radius:15px;
                        box-shadow: 0 6px 9px rgba(0,0,0,.15);
                        border:3px solid #FFFFFF;
                        img {
                            width:4em;
                        }
                    }
                }
            }
        }
    }
}

#support {
    .wrap {
        padding-top:150px;
    }
}
#support,#operation,#donate {
    .wrap {
        .contents {
            h2 {
                grid-column-gap:.33em;
                &::before {
                    width:1.4em;
                    height:1.4em;
                    background:url(../img/social/icon.png) no-repeat center center/contain;
                }
            }
            dl {
                font-size:1.6rem;
                display:grid;
                grid-template-columns:auto 1fr;
                grid-column-gap:.5em;
                padding-top:1em;
                dt,dd {
                    line-height:2;
                }
            }
            .img {
                max-width:720px;
                margin:0 auto;
                padding-top:50px;
                &.w60 {
                    max-width: 500px;
                }
                img {
                    display:block;
                    width:100%;
                }
            }
        }
    }
}

#cac {
    .wrap {
        .contents {
            h3 {
                font-size:2.4rem;
                line-height:1.5;
                margin-bottom:.5em;
            }
            p {
                margin-bottom:1em;
            }
            a {
                img {
                    width:100%;
                    max-width:120px;
                }
            }
        }
    }
}

@media (hover:hover) {
    
    #social {
        .wrap2 {
            .contents {
                ul {
                    li {
                        a {
                            &:hover {
                                border-color:var(--color_main);
                                opacity:1;
                            }
                        }
                    }
                }
            }
        }
    }

}

@media screen and (max-width:1200px){
}

@media screen and (max-width:1024px){ 
}

@media screen and (max-width:768px){
    
    #social {
        .wrap2 {
            .contents {
                padding:50px 0;
                min-height:360px;
                height:80vw;
                .contents_inner {
                    h3 {
                        font-size:min(7vw,3rem);
                    }
                    p {
                        font-size:1.6rem;
                    }
                    span {
                        font-size:1.4rem;
                    }
                }
                ul {
                    grid-column-gap:3%;
                    li {
                        a {
                            grid-template-columns:1fr;
                            justify-items:center;
                            text-align:center;
                            grid-row-gap:.5em;
                            font-size:min(3.6vw,1.8rem);
                            img {
                                width:3em;
                            }
                        }
                    }
                }
            }
        }
    }
    
    #support {
        .wrap {
            padding-top:120px;
        }
    }
    #support,#operation,#donate {
        .wrap {
            .contents {
                h2 {
                    grid-column-gap:.33em;
                    &::before {
                        width:1.4em;
                        height:1.4em;
                        background:url(../img/social/icon.png) no-repeat center center/contain;
                    }
                }
                dl {
                    font-size:1.4rem;
                    grid-template-columns:1fr;
                    dt,dd {
                        line-height:1.8;
                    }
                    dd {
                        padding-left:1em;
                    }
                }
                .img {
                    padding-top:20px;
                }
            }
        }
    }
    
    #cac {
        .wrap {
            .contents {
                h3 {
                    font-size:1.8rem;
                }
            }
        }
    }
    
}