@charset "utf-8";

#sdgs {
    .wrap {
        .contents {
            h3 {
                font-size:2.6rem;
                background-color:var(--color_main);
                color:#FFFFFF;
                line-height:1.33;
                padding:.33em .5em;
                margin-bottom:1em;
            }
            .contents_inner {
                display:grid;
                grid-template-columns:50% 1fr;
                grid-column-gap:5%;
                margin-bottom:50px;
                align-items:start;
                .detail {
                    padding-top:1em;
                    h4 {
                        font-size:2.0rem;
                        line-height:1.5;
                        margin-bottom:.33em;
                    }
                    p {
                        &:not(:last-child) {
                            margin-bottom:1em;
                        }
                    }
                }
                .img {
                    position:relative;
                    overflow:hidden;
                    &::before {
                        content:'';
                        display:block;
                        width:100%;
                        height:100%;
                        position:absolute;
                        left:0;
                        top:0;
                        box-shadow:0 0 10px 10px #FFFFFF inset;
                    }
                }
            }
            & > .img {
                max-width:600px;
                margin:0 auto 50px;
                img {
                    display:block;
                    width:100%;
                }
            }
            .smenu {
                display:grid;
                grid-template-columns:repeat(2,1fr);
                grid-gap:30px;
                margin-bottom:50px;
                li {
                    a {
                        display:grid;
                        grid-template-columns:30% 1fr;
                        grid-column-gap:3%;
                        border:1px solid #000000;
                        box-shadow:0 0 0 #000000;
                        .img {
                            overflow:hidden;
                            img {
                                display:block;
                            }
                        }
                        & > span {
                            display:grid;
                            grid-template-rows:1fr auto;
                            padding:10px;
                            h4 {
                                font-size:2.4rem;
                                color:var(--color_main);
                                align-self:center;
                            }
                            .btn {
                                font-size:1.5rem;
                                height:2em;
                                width:9em;
                                padding:0;
                                grid-template-columns:repeat(2,auto);
                                border-radius:4px;
                                justify-self:end;
                                margin-right:0;
                                border:2px solid var(--color_main);
                                &::after {
                                    content:'';
                                    width:.75em;
                                    height:.66em;
                                    background-color:#FFFFFF;
                                    clip-path:polygon(0 0,100% 0,50% 100%);
                                }
                            }
                        }
                    }
                }
            }
            &.contents2 {
                padding-bottom:60px;
                ul {
                    width:100%;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    column-gap:5%;
                    li {
                        width:auto;
                        max-width:156px;
                    }
                }
            }
        }
        .msg {
            background-color:var(--color_main);
            margin-top:30px;
            p {
                text-align:center;
                color:#FFFFFF;
                font-size:1.8rem;
                line-height:1.5;
                padding:1em;
            }
        }
    }
}

@media (hover:hover) {
    
    #sdgs {
        .wrap {
            .contents {
                .smenu {
                    li {
                        a {
                            .btn {
                                transition:.3s;
                                &::after {
                                    transition:.3s;        
                                }
                            }
                            .img {
                                img {
                                    transition:.3s;
                                }
                            }
                            &:hover {
                                opacity:1;
                                border-color:var(--color_main);
                                .img {
                                    img {
                                        transform:scale(1.05);
                                    }
                                }
                                .btn {
                                    background-color:#FFFFFF;
                                    color:var(--color_main);
                                    &::after {
                                        background-color:var(--color_main);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

}

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

@media screen and (max-width:1024px){ 
    
    #sdgs {
        .wrap {
            .contents {
                .smenu {
                    grid-gap:20px;
                    li {
                        a {
                            & > span {
                                padding:5px;
                                h4 {
                                    font-size:1.8rem;
                                }
                                .btn {
                                    font-size:1.4rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:768px){
    
#sdgs {
    .wrap {
        .contents {
            h3 {
                font-size:2.0rem;
            }
            .contents_inner {
                grid-template-columns:1fr;
                margin-bottom:30px;
                grid-row-gap:20px;
                .detail {
                    padding-top:0;
                    h4 {
                        font-size:1.6rem;
                    }
                }
            }
            .smenu {
                grid-template-columns:1fr;
                grid-gap:10px;
                max-width:500px;
                margin:0 auto 50px;
                li {
                    a {
                        grid-template-columns:25% 1fr;
                        & > span {
                            h4 {
                                font-size:min(4.6vw,2.2rem);
                            }
                            .btn {
                                font-size:1.3rem;
                            }
                        }
                    }
                }
            }
            &.contents2 {
                padding-bottom:50px;
                ul {
                    li {
                        width:30%;
                    }
                }
            }
        }
        .msg {
            margin-top:0;
            p {
                font-size:1.5rem;
            }
        }
    }
}
    
}