@charset "utf-8";

section {
    &:not(:last-child) {
        .wrap {
            padding-bottom:90px;
        }
    }
    &:not(#search) {
        .wrap {
            .contents {
                h2 {
                    font-size:2.1rem;
                    margin-bottom:.5em;
                    &::before {
                        content:none;
                    }
                }
            }
        }
    }
    .wrap {
        .contents {
            table {
                width:100%;
                border-collapse:collapse;
                th,td {
                    font-size:1.6rem;
                    line-height:1.5;
                    font-weight:400;
                    padding:.66em;
                    border:1px solid #C8C8C8;
                    vertical-align:middle;
                    
                    
                    a {
                        img {
                            width:.8em;
                            vertical-align:baseline;
                            margin-left:.5em;
                        }
                    }
                }
                thead {
                    th {
                        text-align:center;
                        background-color:#F5F5F5;
                        font-weight:500;
                    }
                }
                tbody {
                    th {
                        background-color:#DAE5F6;
                        width:15em;
                    }
                    td:last-child {
                        text-align:center;
                        width:9em;
                    }
                }
            }
        }
    }
}

#search {
    .wrap {
        .contents {
            & > p {
                margin-bottom:2em;
            }
            .contents_inner {
                background-color:#F5F5F5;
                padding:30px 30px 40px;
                box-shadow:0 3px 6px rgba(0,0,0,.15);
                h3 {
                    font-size:3.0rem;
                    color:var(--color_main);
                    grid-template-columns:1fr;
                    text-align:center;
                    margin-bottom:1em;
                }
                ul {
                    display:grid;
                    grid-template-columns:repeat(5,1fr);
                    max-width:720px;
                    grid-gap:10px;
                    margin:0 auto;
                    li {
                        a {
                            font-size:1.6rem;
                            color:var(--color_main);
                            height:3em;
                            display:grid;
                            align-items:center;
                            justify-content:center;
                            border:1px solid var(--color_main);
                            background-color:#FFFFFF;
                        }
                    }
                }
            }
        }
    }
}

@media (hover:hover) {
    
    #search {
        .wrap {
            .contents {
                .contents_inner {
                    ul {
                        li {
                            a {
                                &:hover {
                                    opacity:1;
                                    background-color:var(--color_main);
                                    color:#FFFFFF;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
}

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

}

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

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

    section {
        &:not(:last-child) {
            .wrap {
                padding-bottom:30px;
            }
        }
        &:not(#search) {
            .wrap {
                .contents {
                    h2 {
                        font-size:1.8rem;
                    }
                }
            }
        }
        .wrap {
            .contents {
                table {
                    th,td {
                        font-size:min(3.1vw,1.4rem);
                        padding:.5em;
                    }
                    tbody {
                        th {
                            background-color:#DAE5F6;
                            width:5em;
                        }
                    }
                }
            }
        }
    }
    
    #search {
        .wrap {
            .contents {
                .contents_inner {
                    padding:20px 10px 20px;
                    h3 {
                        font-size:2.0rem;
                    }
                    ul {
                        grid-gap:5px;
                        li {
                            a {
                                font-size:1.4rem;
                            }
                        }
                    }
                }
            }
        }
    }
    
}