@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');

body {
    font-family        : 'Noto Sans JP', sans-serif;
    background-color   : #f4f5f8;
}

.header {
    position           : fixed;
    top                : 0;
    left               : 50%;
    transform          : translate(-50%);
    max-width          : 1024px;
    width              : 100%;
    height             : 80px;
    z-index            : 1;
}

.main {
    position           : absolute;
    top                : 80px;
    right              : 50%;
    transform          : translate(50%);
    max-width          : 1024px;
    width              : 100%;
}

.main a.anchor {
    display            : block;
    padding-top        : 80px;
    margin-top         : -80px;
}

.main .mt000 {
    margin-top         : 0;
}

.main .mt005 {
    margin-top         : 5px;
}

.main .mt010 {
    margin-top         : 10px;
}

.main .mt015 {
    margin-top         : 15px;
}

.main .mt030 {
    margin-top         : 30px;
}

.main table {
    width              : calc(100% - 15px);
}

.main table th {
    padding            : 10px;
    border             : solid 1px #bbb;
    background-color   : #eee;
    font-weight        : normal;
    text-align         : left;
    vertical-align     : bottom;
    white-space        : nowrap;
}

.main table td {
    padding            : 10px;
    border             : solid 1px #bbb;
    background-color   : #fff;
    vertical-align     : bottom;
}

.main .about {
    position           : relative;
    width              : 100%;
    height             : 100%;
    background-color   : #fff;
}

.main .service {
    position           : relative;
    width              : 100%;
    height             : 100%;
    background-color   : #eef4f8;
}

.main .company {
    position           : relative;
    width              : 100%;
    height             : 100%;
    background-color   : #fff;
}

.main .recruit {
    position           : relative;
    width              : 100%;
    height             : 100%;
    background-color   : #eef4f8;
}

.main .contact {
    position           : relative;
    padding-top        : 30px;
    padding-bottom     : 30px;
    padding-left       : 10px;
    padding-right      : 10px;
    width              : calc(100% - 20px);
    height             : 100%;
    background-color   : #323232;
    text-align         : center;
}

.main .footer {
    position           : relative;
    padding-top        : 10px;
    padding-bottom     : 10px;
    padding-right      : 10px;
    width              : calc(100% - 10px);
    height             : 100%;
    background-color   : #323232;
    text-align         : right;
}

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

    .header .logo {
        position           : absolute;
        top                : 30px;
        left               : 30px;
        padding-left       : 35px;
        font-size          : 24px;
        font-weight        : bold;
        color              : #000;
        letter-spacing     : 5px;
        background-image   : url(images/icon_logo.png);
        background-repeat  : no-repeat;
    }

    .header .menu {
        display            : none;
    }

    .main .tag {
        display            : none;
    }

    .main .content {
        position           : relative;
        top                : 0;
        left               : 0;
        padding-top        : 15px;
        padding-bottom     : 30px;
        padding-left       : 15px;
        width              : calc(100% - 15px);
    }

    .main .h001 {
        font-size          : 28px;
        font-weight        : bold;
        color              : #000;
        letter-spacing     : 5px;
    }

    .main .h002 {
        font-size          : 14px;
        font-weight        : bold;
        color              : #000;
        letter-spacing     : 5px;
    }

    .main .h003 {
        font-size          : 12px;
        font-weight        : bold;
        color              : #000;
        letter-spacing     : 2px;
    }

    .main .h004 {
        font-size          : 28px;
        font-weight        : bold;
        color              : #fff;
        letter-spacing     : 5px;
    }

    .main .c001 {
        font-size          : 12px;
        color              : #393a3d;
        letter-spacing     : 2px;
    }

    .main .c002 {
        font-size          : 10px;
        color              : #393a3d;
        letter-spacing     : 2px;
    }

    .main .c003 {
        font-size          : 12px;
        color              : #fff;
        letter-spacing     : 2px;
    }

    .main .c004 {
        font-size          : 10px;
        color              : #fff;
        letter-spacing     : 2px;
    }

    .main .footer .copyright {
        font-size          : 10px;
        color              : #fff;
        letter-spacing     : 1px;
    }

    .engage-recruit {
        width              : calc(100% - 15px);
    }

}

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

    .header .logo {
        position           : absolute;
        top                : 30px;
        left               : 50px;
        padding-left       : 35px;
        font-size          : 24px;
        font-weight        : bold;
        color              : #000;
        letter-spacing     : 5px;
        background-image   : url(images/icon_logo.png);
        background-repeat  : no-repeat;
    }

    .header .menu {
        position           : absolute;
        top                : 40px;
        right              : 50px;
        font-size          : 12px;
        font-weight        : bold;
        letter-spacing     : 2px;
    }

    .header .menu .link {
        display            : inline-block;
        margin-left        : 25px;
    }

    .header .menu .link a {
        display            : block;
        text-decoration    : none;
        color              : #000;
    }

    .header .menu .link a::after {
        content            : '';
        display            : block;
        padding-bottom     : 8px;
        width              : 0;
        border-bottom      : solid 2px #000;
        transition         : all .3s ease;
    }

    .header .menu .link a:hover::after {
        width              : 100%;
    }

    .main .tag {
        position           : absolute;
        top                : 0;
        left               : 0;
        width              : 100px;
        height             : 100%;
        display            : flex;
        align-items        : center;
        justify-content    : center;
    }

    .main .tag div {
        transform          : rotate(-90deg);
        font-size          : 14px;
        color              : #aaa;
    }

    .main .content {
        position           : relative;
        top                : 0;
        left               : 100px;
        padding-top        : 30px;
        padding-bottom     : 60px;
        width              : calc(100% - 130px);
    }

    .main .h001 {
        font-size          : 30px;
        font-weight        : bold;
        color              : #000;
        letter-spacing     : 5px;
    }

    .main .h002 {
        font-size          : 16px;
        font-weight        : bold;
        color              : #000;
        letter-spacing     : 5px;
    }

    .main .h003 {
        margin-left        : 70px;
        font-size          : 14px;
        font-weight        : bold;
        color              : #000;
        letter-spacing     : 2px;
    }

    .main .h004 {
        font-size          : 30px;
        font-weight        : bold;
        color              : #fff;
        letter-spacing     : 5px;
    }

    .main .c001 {
        margin-left        : 70px;
        font-size          : 14px;
        color              : #393a3d;
        letter-spacing     : 2px;
    }

    .main .c002 {
        margin-left        : 70px;
        font-size          : 12px;
        color              : #393a3d;
        letter-spacing     : 2px;
    }

    .main .c003 {
        font-size          : 14px;
        color              : #fff;
        letter-spacing     : 2px;
    }

    .main .c004 {
        font-size          : 12px;
        color              : #fff;
        letter-spacing     : 2px;
    }

    .main .footer .copyright {
        font-size          : 12px;
        color              : #fff;
        letter-spacing     : 1px;
    }

    .engage-recruit {
        width              : 500px;
    }

}