@charset "utf-8";

#contribute {
    .wrap {
        .contents {
            h2 {
                color:var(--color_sub);
                font-weight:600;
                grid-template-columns:repeat(3,auto);
                justify-content:center;
                grid-column-gap:.33em;
                margin-bottom:1em;
                &::before {
                    content:none;
                }
            }
            .contents_inner {
                padding:3em;
                background-color:#FAFAFA;
                border-radius:50px 10px;
                box-shadow:0 3px 6px rgba(0,0,0,.15);
                text-align:center;
                p {
                    font-size:1.8rem;
                    &:not(:last-child) {
                        margin-bottom:1.5em;
                    }
                }
            }
        }
    }
}

#provide {
    .wrap {
        .contents {
            h2 {
                display:block;
                text-align:center;
                font-weight:600;
                &::before {
                    content:none;
                }
                span {
                    font-size:1.5em;
                }
            }
            .contents_inner {
                background-color:var(--color_main);
                border-radius:20px;
                padding:20px;
                display:grid;
                grid-row-gap:20px;
                .item {
                    background-color:#FFFFFF;
                    border-radius:15px;
                    padding:1.5em 2em;
                    display:grid;
                    grid-template-columns:26% 33% 1fr;
                    align-items:center;
                    grid-column-gap:3%;
                    h3 {
                        display:grid;
                        font-size:2.2rem;
                        grid-row-gap:.5em;
                        font-weight:500;
                        .sub {
                            font-family: "M PLUS 1p", sans-serif;
                        }
                        .tit {
                            color:var(--color_sub);
                            font-size:2em;
                            font-weight:600;
                            span {
                                font-size :1.33em;
                            }
                        }
                        .txt {
                            color:var(--color_sub);
                            font-size:.8em;
                            letter-spacing:.05em;
                        }
                    }
                    & > .txt {
                        h4 {
                            color:var(--color_sub);
                            font-size:2.0rem;
                            line-height:1.66;
                            margin-bottom:.5em;
                        }
                        p {
                            line-height:1.66;
                            margin-bottom:1em;
                        }
                        .btn {
                            font-size:1.4rem;
                        }
                    }
                }
            }
        }
    }
}

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

    #contribute {
        .wrap {
            .contents {
                h2 {
                    font-size:2.6rem;
                }
                .contents_inner {
                    padding:2em 1em;
                }
            }
        }
    }
    
    #provide {
        .wrap {
            .contents {
                .contents_inner {
                    .item {
                        h3 {
                            font-size:2.0rem;
                        }
                    }
                }
            }
        }
    }

}

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

    #contribute {
        .wrap {
            .contents {
                h2 {
                    font-size:min(2.6vw,2.6rem);
                }
                .contents_inner {
                    p {
                        font-size:1.8rem;
                    }
                }
            }
        }
    }
    
    #provide {
        .wrap {
            .contents {
                h2 {
                    font-size:2.4rem;
                }
                .contents_inner {
                    .item {
                        grid-template-columns:1fr 33%;
                        grid-row-gap:10px;
                        h3 {
                            font-size:2.2rem;
                        }
                        & > .txt {
                            grid-area:2/1/3/3;
                            h4 {
                                br {
                                    display:none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
}

@media screen and (max-width:768px){
    
    #contribute {
        .wrap {
            .contents {
                h2 {
                    line-height:1.3;
                    align-items:end;
                    text-align:center;
                    font-size:min(4.6vw,2.4rem);
                    margin:0 -1em .5em;
                    grid-column-gap:0;
                    span {
                        font-size:1.5em;
                    }
                }
                .contents_inner {
                    padding:1.5em 1em;
                    border-radius:15px;
                    text-align:left;
                    p {
                        font-size:1.5rem;
                        &:not(:last-child) {
                            margin-bottom:1em;
                        }
                    }
                }
            }
        }
    }
    
    #provide {
        .wrap {
            .contents {
                h2 {
                    font-size:min(5vw,2.4rem);
                    margin-bottom:1em;
                    strong {
                        display:block;
                        padding-bottom:.33em;
                    }
                }
                .contents_inner {
                    border-radius:10px;
                    padding:10px;
                    grid-row-gap:10px;
                    .item {
                        padding:20px;
                        grid-row-gap:15px;
                        h3 {
                            font-size:min(4.0vw,2.0rem);
                        }
                        & > .txt {
                            h4 {
                                font-size:min(5.0vw,2.0rem);
                                line-height:1.5;
                                margin-bottom:.33em;
                                br {
                                    display:inline;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
}