@charset "utf-8";

#company {
    .wrap {
        .contents {
            h2 {
                margin-bottom:2em;
            }
            table {
                width:100%;
                max-width:calc(100% - 60px);
                margin:0 auto;
                border-collapse:collapse;
                tr {
                    border-bottom:1px solid #e4e4e4;
                    &:first-child {
                        border-top:1px solid #e4e4e4;
                    }
                }
                th,td {
                    font-size:1.6rem;
                    line-height:1.5;
                    padding:1em 2em;
                }
                th {
                    width:25%;
                    text-align:center;
                    background-color:var(--color_bg);
                }
            }
        }
    }
}

#map {
    .wrap {
        .contents {
            h2 {
                margin-bottom:2em;
            }
            iframe {
                display:block;
                width:100%;
                max-width:calc(100% - 60px);
                margin:0 auto;
                aspect-ratio:3;
                margin-bottom:50px;
            }
            dl {
                width:100%;
                max-width:calc(100% - 60px);
                margin:0 auto;
                display:grid;
                font-size:1.6rem;
                grid-template-columns:auto 1fr;
                grid-row-gap:.33em;
                dt,dd {
                    line-height:1.5;
                }
                dd {
                    &::before {
                        content:'：';
                        margin: 0 .33em;
                    }
                    text-indent:-1.2em;
                    padding-left:1.2em;
                }
            }
        }
    }
}

@media screen and (max-width:1200px){
}

@media screen and (max-width:1024px){
}

@media screen and (max-width:768px){

    #company {
        .wrap {
            .contents {
                table {
                    max-width:100%;
                    tr {
                        border-bottom:none;
                        &:first-child {
                            border-top:none;
                        }
                    }
                    th,td {
                        font-size:1.4rem;
                        padding:.66em 1em;
                        display:block;
                        width:100%;
                    }
                    th {
                        width:100%;
                        text-align:left;
                    }
                }
            }
        }
    }
    
    #map {
        .wrap {
            .contents {
                iframe {
                    max-width:100%;
                    aspect-ratio:2;
                    margin-bottom:30px;
                }
                dl {
                    max-width:100%;
                    font-size:1.4rem;
                }
            }
        }
    }
    
}