@charset "UTF-8";

:root {
    --font1: Avenir;
    --font2: Lato;
    --font3: Roboto;
    --font4: 'Noto Sans JP';
    --font5: 'M PLUS 1';
    --font6: 'M PLUS 1 Code';
    --font7: Murecho;
    --font8: Domine;
    --font9: 'Shadows Into Light Two';
    --font10: grandam;
}

@font-face {
    font-family: grandam;
    font-style: normal;
    font-weight: 400;
    src: url(https://storage.googleapis.com/studio-front/fonts/grandam.ttf) format("truetype")
}

@font-face {
    font-family: Material Icons;
    font-style: normal;
    font-weight: 400;
    src: url(https://storage.googleapis.com/production-os-assets/assets/material-icons/1629704621943/MaterialIcons-Regular.eot);
    src: local("Material Icons"), local("MaterialIcons-Regular"), url(https://storage.googleapis.com/production-os-assets/assets/material-icons/1629704621943/MaterialIcons-Regular.woff2) format("woff2"), url(https://storage.googleapis.com/production-os-assets/assets/material-icons/1629704621943/MaterialIcons-Regular.woff) format("woff"), url(https://storage.googleapis.com/production-os-assets/assets/material-icons/1629704621943/MaterialIcons-Regular.ttf) format("truetype")
}

/* 屏幕自适应调整时，元素动画显示 */
a, abbr, address, article, aside, audio, b, blockquote, body, button, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, input, ins, kbd, label, legend, li, main, mark, menu, nav, object, ol, p, pre, q, samp, section, select, small, span, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video {
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: .3s cubic-bezier(.4, .4, 0, 1);
    word-spacing: 1px;
    text-decoration: none;
    color: #333;
}

header {
    padding: 0px 30px 1px 30px;
    min-height: 70px;
    background: #F5F7FA;
}

header .navbar-icon img {
    width: 200px;
}

header .navbar-right {
    display: flex;
}

header .navbar-right .navbar-inquiry {
    margin-bottom: 5px;
    text-align: right;
}

header .navbar-right .navbar-inquiry span {
    font-family: var(--font1);
    color: #434A54;
}

header .navbar-right .navbar-company {
    margin-left: 10px;
}

header .navbar-right .navbar-company a {
    border: 1px white;
    background: white;
    padding: 10px;
    border-radius: 5px;
}

.container {
    max-width: 1289px !important;
}

.com-container {
    padding: 30px;
    text-align: center;
}

.com-container-back1 {
    background: #FFFFFF;
}

.com-container-back2 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1140px !important;
}

.com-container-back3 {
    padding: 20px 60px;
    background: #434A54;
}

.container h3{
    position: relative;
    padding-left: 7.5rem;
    margin-bottom: 2rem;
    text-align: left;
    font-size: 2rem;
}

.container h3::before{
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 5.5rem;
    height: 2.5rem;
    background: #4E95D9;
}

.container table td,
.container table th {
    padding: .8rem .6rem;
    text-align: left;
}

.footer-info {
    text-align: left;
}

.footer-info span {
    font-family: var(--font2);
    color: #FFFFFF;
}

.footer-info span.footer-info-company {
    display: block;
    margin-bottom: 1px;
}

.footer-info div.footer-info-address {
    font-size: 13px;
}

.footer-info div.footer-info-address p{
    margin: 0;
    color: #FFFFFF;
}

.footer-info span.footer-info-copyright {
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    header {
        padding: 0px 0px 0px 0px;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        min-height: 52px;
        width: 100%;
        max-width: 100%;
    }

    header.navbar .container {
        padding: 0;
    }

    header .navbar-icon img {
        height: auto;
        margin: 0px 0px 0px 0px;
        width: 160px;
        max-width: 100%;
    }

    header .navbar-right {
        flex-direction: column;
    }

    header .navbar-right .navbar-inquiry,
    header .navbar-right .navbar-company {
        font-size: 10px;
        width: 194px;
        max-width: 100%;
        height: 100%;
    }

    header .navbar-right .navbar-company {
        margin-left: 0;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .com-container-back1 {
        padding: 50px 10px;
    }

    .com-container-back2 {
        padding: 0 !important;
        max-width: unset !important;
    }

    .container h3 {
        padding-left: 4rem;
        font-size: 1.2rem;
    }

    .container h3::before{
        width: 3.4rem;
        height: 1.7rem;
    }

    .container table th{
        width: 95px;
    }

    .container table td,
    .container table th {
        padding: .8rem .2rem;
    }
}

@media screen and (max-width: 360px) {
    header {
        padding-top: 5px;
    }

    header.navbar .container {
        justify-content: center;
    }

    .com-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    footer .com-footer {
        justify-content: flex-start !important;
    }
}