/*header*/
    header{
        height: 60px;
        background-color: white;
    }

    .header-container{
        width: 95%;
        margin: auto;
    }

    .navbar{
    border-radius: 0;
    border: none;
    background-color: #ffffff;
    }

    .navbar-default .navbar-toggle {
        border-color: #ffffff;
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: #252d40;
    }

    .navbar-default .navbar-nav>li>a {
        color: #252d40;
    }

    #logo-img{
        height: 30px;
    }

    .submenu-title {
        font-size: 8px;
        padding: 0px;
        margin: 0;
        line-height: 60px;
        vertical-align: middle;
        color: #04c97d;
    }

    .header-list{
        float: right;
        display: inline;
        width: 475px;
        margin: auto;
        text-align: right;
    }

    .header-list ul{
        padding-left: 0px;
        margin-bottom: 0px;
    }

    .header-list li{
        display: inline-block;
        list-style: none;
        line-height: 60px;
        vertical-align: middle;
        margin-left: 1.5%;
    }

    .to-entry{
        padding: 0.5em 1em;
        background: linear-gradient(to right, #04ccd4, #04c97d);
        color: #FFF;
        padding-right: 20px;
        padding-left: 20px;
    }

    .header-item{
        color: black;
        padding-left: 5px;
        padding-right: 5px;

    }

    .header-item:hover{
        color: #02c97d;
        text-decoration: none;
        cursor: pointer;
    }

/*headerの881px以下での表示*/
@media(max-width: 881px){
    .header-list{
        float: right;
        height: 60px;
        margin: auto;
        text-align: right;
        font-size: 12px;
    }
}

/*headerの778px以下での表示*/
@media(max-width: 778px){
    .header-list{
        float: right;
        height: 60px;
        margin: auto;
        text-align: right;
        font-size: 10px;
    }
}

/*top-wrapper*/

    .top-wrapper{
        height: 360px;
        background-image: url("../image/bg_recruit_pc.png");
        background-size: cover;
        background-position: center;
    }

    .tw-titles{
        width: 80%;
        margin: auto;
        padding: 75px 0px;
        text-align: center;
        color: white;
    }

    .tw-title{
        width: 80%;
        max-width: 350px;
        margin: auto;
        padding-top: 20px;
        font-family: "Arial Black";
        font-size: 36px;
        border-bottom: 1px solid white;
    }

    .tw-subtitle{
        padding-top: 5px;
        padding-bottom: 30px;
    }

    .text{
        width: 90%;
        text-align: right;
        padding-bottom: 30px;
        margin: auto;
    }

    .text a:hover{
        text-decoration: none;
    }

    .top{
        color: #02c97d;
    }

    .slash{
        color: black;
    }

    .recruitment{
        color: black;
    }

    .recruitment:hover{
        color: black;
    }
/*occupations*/

    .occupation{
        width: 90%;
        max-width: 900px;
        margin: auto;
        padding: 30px;
    }

    .occupation-title{
        height: 60px;
        color: white;
        background-color: black;
    }

    .oc-name{
        float: left;
        padding-top: 20px;
        padding-left: 40px;
        font-size: 16px;
        font-weight: 600;
    }

@media(max-width: 799px){
    .oc-name{
        float: left;
        padding-top: 20px;
        padding-left: 20px;
        font-size: 16px;
        font-weight: 600;
    }
}

    .labels{
        padding-top: 15px;
        padding-right: 40px;
    }

@media(max-width: 799px){
    .labels{
        padding-top: 15px;
        padding-right: 20px;
    }
}


    .labels ul{
        float: right;
        list-style: none;
    }

    .labels li{
        float: left;
        border-radius: 7px;
        padding: 0.5em 1em;
        margin: 0 5px;
        background-color: white;
        color: black;
        font-size: 13px;
    }

    .grey{
        padding: 30px 60px;
        background-color: #F4F3F3;
    }
    .occupation-text{
    }

    .requirement{
        padding-top: 30px;
        width: 100%;
    }

    .requirement-left{
        float: left;
        width: 25%;
    }

    .requirement-right{
        float: right;
        width: 75%;
    }

    .clear{
        clear: both;
    }

/*work styles*/

    .work-styles{
        padding-bottom: 30px;
    }
    .title{
        width: 90%;
        max-width: 1000px;
        margin: auto;
        text-align: center;
        font-size: 24px;
        font-weight: 600;
        border-bottom: 1px solid black;
        padding-bottom: 10px;
        margin-bottom: 50px;
    }

    .name{
        height: 60px;
        width: 90%;
        max-width: 1000px;
        margin: auto;
        margin-bottom: 30px;
        font-size: 16px;
        font-weight: 600;
        background-color: #E4E3E3;
    }

    .width{
        width: 33%;
        padding: 18px;
        text-align: center;
    }

    tr{
        height: 40px;
        width: 80%;
        max-width: 800px;
    }

    th,td {
        vertical-align: top;
        padding: 10px 30px;
    }

    th{
        text-align: right;
    }

    td{
        text-align: left;
    }
/*footer*/

    footer{
        height: 300px;
        background-color: #333333;
        padding-top: 30px;
    }

    .entry-btn{
        width: 600px;
        margin: auto;
        font-size: 22px;
        text-align: center;
        margin-top: 40px;
    }

    .entry-btn a{
        text-decoration: none;
    }

    .square_btn{
        margin: auto;
        text-decoration: none;
        background: linear-gradient(to right, #04ccd4, #04c97d);
        font-weight: bold;
        font-size: 30px;
        padding: 25px;
        color: white;
    }

    .square_btn:hover{
        text-decoration: none;
        color: black;
    }

    .square_btn span{
        color: white;
        font-weight: 600;
        text-decoration: none;
    }

    .square_btn span:hover{
        color: black;
        font-weight: 600;
        text-decoration: none;
    }

    .footer-container{
        width: 95%;
        margin: auto;
        padding-top: 100px;
    }

    .footer-left{
        float: left;
    }

    .footer-left p{
        color: white;
        float: left;
    }

    .footer-right{
        float: right;
    }

    .footer-right ul{
        list-style: none;
        width: 100%;
        margin: auto;
    }

    .footer-right li{
        float: left;
    }

    .footer-item{
        color: white;
        padding-left: 10px;
        padding-right: 10px;
    }

    .footer-item:hover{
        color: #02c97d;
        cursor: pointer;
        text-decoration: none;
    }

/*footerの881px以下での表示*/
@media(max-width: 881px){
    .footer-left p{
        color: white;
        float: left;
        font-size: 12px;
    }

    .footer-right li{
        display: inline-block;
        list-style: none;
        float: left;
        vertical-align: middle;
        font-size: 12px;
    }
}

/*footerの778px以下での表示*/
@media(max-width: 778px){
    .footer-left p{
        color: white;
        float: left;
        font-size: 10px;
    }

    .footer-right li{
        display: inline-block;
        list-style: none;
        float: left;
        vertical-align: middle;
        font-size: 10px;
    }
}