@charset "UTF-8";

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    padding: 0;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック"
}

body main {
    padding: 0 10px
}

a {
    text-decoration: none
}

ul {
    list-style: none;
    padding: 0
}

p {
    margin: 0
}

.page_top {
    margin: 0;
    width: 100%;
    height: 5px;
    background-color: #0098db
}

header {
    max-width: 1000px;
    margin: 0 auto;
    height: auto
}

header .top_h1 {
    margin: 0;
    height: 20px;
    font-weight: 400;
    font-size: .7rem;
    color: gray
}

header .header_top {
    height: 80px;
    display: flex;
    position: relative
}

header .header_top .logo {
    width: 50%;
    display: flex;
    align-items: center
}

header .header_top .logo a {
    display: inline-block;
    width: 50%;
    height: 100%
}

header .header_top .logo a h1 {
    height: 50px;
    margin: 15px 0;
    width: 100%;
    color: gray;
    text-align: center;
    font-size: 1.5rem
}

header .header_top .logo .access {
    width: 50%;
    font-size: .8rem;
    color: gray
}

header .header_top .logo .access div {
    width: 100%;
    margin: 10px 0
}

header .header_top .logo .access div .address_1 {
    background-color: rgb(128 128 128 / .4392156863);
    padding: 3px
}

header .header_top .notice {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around
}

header .header_top .notice p {
    margin: 0;
    border: 1px solid #0098db;
    text-align: center;
    width: 100px;
    color: #0098db;
    font-weight: 700
}

header .header_top .inquiry {
    position: absolute;
    top: -20px;
    right: 0;
    width: 30%;
    height: 100px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #0098db;
    color: #fff
}

header .header_top .inquiry p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

header .header_top .inquiry p:nth-child(1) {
    height: 30%
}

header .header_top .inquiry p:nth-child(1) span {
    background-color: #fff;
    color: #000;
    padding: 5px;
    margin-left: 5px;
    font-size: .8rem
}

header .header_top .inquiry p:nth-child(2) {
    height: 20%;
    font-size: .9rem
}

header .header_top .inquiry p:nth-child(3) {
    height: 50%;
    font-size: 1.8rem
}

header .header_top .inquiry p:nth-child(3) a {
    color: #fff
}

header .header_top .inquiry p:nth-child(3) a svg {
    height: 100%;
    margin: 0 5px
}

header .top {
    display: none
}

@media screen and (max-width:1000px) {
    header {
        margin: 0 30px
    }

    header .header_top .logo {
        flex-direction: column;
        width: 35%
    }

    header .header_top .logo a {
        width: 100%;
        height: 50%
    }

    header .header_top .logo a h1 {
        font-size: 1.5rem;
        margin: 0;
        height: 100%
    }

    header .header_top .logo .access {
        width: auto;
        text-align: left;
        font-size: .6rem
    }

    header .header_top .logo .access div {
        margin: 5px 0
    }

    header .header_top .inquiry {
        width: 45%
    }
}

@media screen and (max-width:700px) {
    header {
        margin: 0;
        width: 100%;
        margin-top: 70px;
    }

    header .top_h1 {
        text-align: center
    }

    header .header_top {
        flex-wrap: wrap
    }

    header .header_top .logo {
        width: 100%;
        flex-direction: row;
        align-items: flex-start
    }

    header .header_top .logo a {
        width: 50%;
        height: 100%
    }

    header .header_top .logo .access {
        width: 50%
    }

    header .header_top .notice {
        flex-direction: row;
        width: 100%;
        margin: 0 auto;
        justify-content: space-around;
        background-color: #0098db
    }

    header .header_top .notice p {
        background-color: #fff
    }

    header .header_top .inquiry {
        display: none
    }
}