@charset "utf-8";

#about {
    .wrap {
        .contents {
            .contents_inner {
                display:grid;
                grid-template-columns:200px 1fr;
                grid-column-gap:5%;
                margin-bottom:90px;
                .img {
                    img {
                        display:block;
                    }
                    p {
                        display:grid;
                        font-size:1.4rem;
                        line-height:1.5;
                        justify-items:center;
                        padding-top:1em;
                        span {
                            img {
                                display:inline-block;
                                width:7em;
                            }
                        }
                    }
                }
                .detail {
                    h2 {
                        font-size:2.8rem;
                        font-family: "Noto Serif", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
                        font-weight:500;
                        line-height:1.8;
                        margin-bottom:1em;
                    }
                }
            }
            .about {
                dl {
                    display:grid;
                    grid-template-columns:12em 1fr;
                    grid-gap:1em;
                    dt,dd {
                        font-size:1.6rem;
                        line-height:1.8;
                    }
                    dt {
                        span {
                            display:block;
                            font-size:.9em;
                        }
                    }
                    dd {
                        ul {
                            display:grid;
                            grid-template-columns:repeat(2,auto);
                            justify-content:start;
                            grid-gap:.5em 3em;
                            li {
                                line-height:1.3;
                            }
                        }
                    }
                }
                .about_inner {
                    padding:30px 0;
                    border-top:2px solid #333333;
                    border-bottom:2px solid #333333;
                    display:grid;
                    grid-template-columns:1fr 30%;
                    align-items:end;
                    margin-bottom:30px;
                    .imgwrap {
                        display:grid;
                        grid-row-gap:30px;
                        .img {
                            p {
                                line-height:1;
                                text-align:center;
                                padding-top:1em;
                            }
                        }
                    }
                }
            }
        }
    }
}

#group {
    .wrap {
        .contents {
            h2 {
                font-size:4.2rem;
                text-align:center;
                margin-bottom:1em;
                font-weight:400;
            }
            ul {
                display:grid;
                grid-template-columns:repeat(5,auto);
                justify-content:space-around;
                grid-gap:.66em 1em;
                li {
                    font-size:1.8rem;
                    line-height:1.3;
                }
            }
        }
    }
}

#map {
    .wrap {
        .contents {
            iframe {
                display:block;
                width:100%;
                height:auto;
                aspect-ratio:2.2;
            }
        }
    }
}

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

}

@media screen and (max-width:1024px){
    
    #about {
        .wrap {
            .contents {
                .contents_inner {
                    grid-column-gap:3%;
                    margin-bottom:60px;
                    .img {
                        p {
                            font-size:1.3rem;
                        }
                    }
                    .detail {
                        h2 {
                            font-size:2.4rem;
                            margin-bottom:.66em;
                        }
                        p {
                            font-size:min(1.68vw,1.6rem);
                        }
                    }
                }
                .about {
                    dl {
                        dd {
                            ul {
                                grid-gap:1em 1em;
                            }
                        }
                    }
                    .about_inner {
                        dd {
                            margin-right:-5em;
                        }
                    }
                }
            }
        }
    }
    
    #group {
        .wrap {
            .contents {
                ul {
                    li {
                        font-size:1.6rem;
                    }
                }
            }
        }
    }
    
}

@media screen and (max-width:768px){
    
    #about {
        .wrap {
            .contents {
                .contents_inner {
                    grid-template-columns:1fr;
                    grid-row-gap:30px;
                    .img {
                        max-width:300px;
                        margin:0 auto;
                        p {
                            font-size:1.5rem;
                        }
                    }
                    .detail {
                        padding-top:0;
                        h2 {
                            font-size:min(5.4vw,2.4rem);
                        }
                        p {
                            font-size:1.4rem;
                        }
                    }
                }
                .about {
                    dl {
                        grid-template-columns:1fr;
                        grid-gap:0;
                        dt,dd {
                            font-size:1.4rem;
                            line-height:1.6;
                        }
                        dt {
                            border-bottom:2px solid #cccccc;
                            font-size:1.5rem;
                            background-color:#f5f5f5;
                            padding:.2em .5em;
                            span {
                                display:inline-block;
                            }
                        }
                        dd {
                            padding:.66em .5em 1em;
                            ul {
                                grid-template-columns:1fr;
                                grid-row-gap:.5em;
                                li {
                                    line-height:1.3;
                                }
                            }
                        }
                    }
                    .about_inner {
                        border-top:1px solid #333333;
                        border-bottom:1px solid #333333;
                        grid-template-columns:1fr;
                        grid-row-gap:30px;
                        .imgwrap {
                            .img {
                                max-width:300px;
                                margin:0 auto;
                                p {
                                    line-height:1;
                                    text-align:center;
                                    padding-top:1em;
                                }
                            }
                            & > img {
                                display:block;
                                width:100%;
                                max-width:500px;
                                margin:0 auto;
                            }
                        }
                        dd {
                            margin-right:0;
                        }
                    }
                }
            }
        }
    }
    
    #group {
        .wrap {
            .contents {
                h2 {
                    font-size:3.0rem;
                }
                ul {
                    grid-template-columns:repeat(2,auto);
                    justify-content:center;
                    li {
                        font-size:1.5rem;
                        &:nth-last-child(4) {
                            grid-area:16/1/17/3;
                        }
                    }
                }
            }
        }
    }
    
    #map {
        .wrap {
            .contents {
                iframe {
                    aspect-ratio:1;
                }
            }
        }
    }
    
}