@charset "UTF-8";
@import url(/css/low.css);

body{
    background: #B2C9DD;
    background: linear-gradient(180deg, rgba(178, 201, 221, 0.5) 0%, rgba(255, 255, 255, 1) 18%);
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;

    &:after{
        content: "";
        background-image: url(/images/location/bg.png);
        background-size: 100%;
        background-position: top center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
}

section {
    .inner{
        .officeset{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 0 auto 5%;

            .box{
                background: var(--colorW);
                width: 48%;
                padding: 20px 30px;

                h2{
                    border-bottom: 2px solid var(--colorB);
                    width: 100%;
                    margin: 0 0 2%;
                    padding: 0 0 10px;
                }
                dl{
                    display: flex;
                    flex-wrap: wrap;
                    margin: 0 0 5%;

                    dt{
                        width: 20%;
                        padding: 5px 10px;
                    }
                    dd{
                        width: 80%;
                        padding: 5px 10px;
                    }
                }
            }

            iframe{
                width: 48%;
            }
        }
    }
}

@media all and (max-width:768px){
    body{
        background: linear-gradient(180deg, rgba(178, 201, 221, 0.2) 0%, rgba(255, 255, 255, 1) 12%);

        &:after{
            background-size: 800px;
            background-position: top 60px center;
        }
    }

    main{
        padding: 0 0 0;
        .mainWrap{
            padding: 30px 0 40px;

            .inner{
                max-width: 320px;
                width: 80%;
                padding: 48px 0;
                
                h2{
                    &:after{
                        width: 200%;
                        left: -50%;
                    }
                }
            }

            &:after{
                width: 270px;
                height: 160px;
            }
        }
    }

    section {
        margin: -10px auto 15%;
        .inner{
            .officeset{
                margin: 0 auto;

                .box{
                    width: 95%;
                    margin: 0 auto 5%;
                    padding: 20px 10px;

                    dl{
                        dt{
                            width: 20%;
                        }
                        dd{
                            width:80%;
                        }
                    }
                }
                
                iframe{
                    width: 90%;
                    height: 270px;
                    margin: 0 auto;
                }
            }
        }
    }
}