@charset "utf-8";
#gallery{
    .wrap{
        .contents{
            width: 100%;
            max-width: 100%;
            h2{
                max-width: 1200px;
                width: calc(100% - 60px);
                margin: 0 auto 40px;
            }
            .contents_inner{
                display: grid;
                grid-template-columns: repeat(6, auto);
                grid-column-gap: 5px;
                grid-row-gap: 5px;
            }
        }
    }
}
#facility{
    .wrap{
        .contents{
            .contents_inner{
                text-align: center;
                margin-bottom: 70px;
                position: relative;
                &:last-child{
                   margin-bottom: 0; 
                }
                img{
                    width: 80%;
                    max-width: 1000px;
                }
                h3{
                    font-size: 3rem;
                    position: absolute;
                    top:5%;
                    right: 10%;
                    display: inline-block;
                    background-color: #fff;
                    padding:1em;
                    border-radius: 50px;
                }
            }
        }
    }
}

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

    #gallery{
        .wrap{
            .contents{
                h2{
                    margin: 0 auto 30px;
                }
            }
        }
    }
    #facility{
        .wrap{
            .contents{
                .contents_inner{
                    img{
                        width: 100%;
                        max-width: 100%;
                    }
                }
            }
        }
    }

}

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

    #gallery{
        .wrap{
            .contents{
                h2{
                    margin: 0 auto 20px;
                }
                .contents_inner{
                    grid-template-columns: repeat(4, auto);
                }
            }
        }
    }
    #facility{
        .wrap{
            .contents{
                .contents_inner{
                    margin-bottom: 50px;
                    img{
                        max-width: 100%;
                    }
                    h3{
                        font-size: 2rem;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:768px){
    
    #gallery{
        .wrap{
            .contents{
                h2{
                    margin: 0 auto 15px;
                }
                .contents_inner{
                    grid-template-columns: repeat(3, auto);
                }
            }
        }
    }
    #facility{
        .wrap{
            .contents{
                .contents_inner{
                    margin-bottom: 30px;
                    img{
                        width: 100%;
                        max-width: 100%;
                    }
                    h3{
                        font-size: 2rem;
                    }
                }
            }
        }
    }
}