@charset "UTF-8";

#maintitle { background-image: url( "../img/recruit/mainimg@2x.jpg"); background-size: cover; height: 400px;}

#maintitle .en { text-transform: uppercase;}
.inner { max-width: 1120px;}
@media only screen and (min-width: 782px) {
#maintitle nav ul { width: 80%; margin: 0 auto;}
}
@media only screen and (max-width: 782px) {
    #maintitle {
        height: 180px;
        background-image: url(../img/recruit/mainimg_sp.jpg);
    }
    #maintitle .inner { height: 100%; width: calc(100% - 50px); margin-left: auto; margin-right: auto;}
    .inner { width: calc(100% - 50px);}
    
    #maintitle nav {
        position: absolute;
        width: 100%;
        margin: 0;
    }
    h1.mainimg { height: 100%;}
    
}
body.confirm #maincolumn { padding-bottom: 5em;}

p.p01 {
    font-size: 171%;
    font-weight: bold;
    text-align: center;
    margin: 2em 0;
    line-height: 1.9;
    letter-spacing: 2px;
}
@media only screen and (max-width: 782px) {
    p.p01 { line-height: 1.5;}
}
.freearea h1,
.freearea h2,
.freearea h3,
h3.h301 {
    color: #0095ee;
    font-weight: bold;
    font-size: 171%;
    margin-top: 2em;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.4;
}
.freearea h4 { font-weight: bold; text-align: center; margin-top: 2em; font-size: 141%; line-height: 1.4;}
.freearea { margin-top: 2em;}

table.yoko {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0 5em 0;
    table-layout: fixed;
}
table.yoko th,
table.yoko td {
    font-size: 114%;
    box-sizing: border-box;
}
table.yoko th { text-align: center; font-weight: normal; width: 150px; }
table.yoko td { padding-left: 50px;}
table.yoko th .td,
table.yoko td .td {
    border-top: #e4e8e8 1px solid;
    padding: 1em 0;
    position: relative;
}
table.yoko th .td { width: 150px;}
table.yoko td .td { padding: 1em 1.5em;}
table.yoko tr:last-child th { border-bottom: #e4e8e8 1px solid;}
table.yoko tr:last-child td .td::after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    bottom:-1px;
    border-bottom: #e4e8e8 1px solid;
}
@media only screen and (max-width: 782px) {
    table.yoko {
    }
    table.yoko th,
    table.yoko td {
    }
    table.yoko th { width: 100px; }
    table.yoko td { padding-left: 20px;}
    table.yoko th .td,
    table.yoko td .td {
        border-top: #e4e8e8 1px solid;
        padding: 1em 0;
        position: relative;
    }
    table.yoko th .td { width: 100px;}
    table.yoko td .td { padding: 1em 1.5em;}
}
.bg_gray {
    background: #f9f9f9;
    margin-top: 5em;
    padding: 4em 0;
}
.bg_gray h3.h301 { margin-top: 3em;}
.telentry { text-align: center;}
.telentry a.tel {
    font-size: 80px;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #424242;
    display: inline-block;
}
@media only screen and (max-width: 782px) {
    .telentry a.tel { font-size: 40px;}
}
p.p02 { text-align: center;}

tr.must th::after,
span.must {
    background: #ff0000;
    color: #fff;
    font-size: 86%;
    display: inline-block;
    padding: 4px 6px;
    line-height: 1;
    margin: 0 2px;
}
tr.must th::after {
    content: "必須";
    font-weight: normal;
    margin-left: 5px;
    position: absolute;
    right: 0;
    top:2em;
}

.tb01 { width: 100%; margin: 2em auto 0; border-collapse: collapse;border-bottom: #bfbfbf 1px solid;}
.tb01 th,
.tb01 td {
    font-weight: normal;
    padding: 1.5em 2em;
    border-top: #bfbfbf 1px solid;
    text-align: left;
    vertical-align: top;
}
.tb01 th { width: 240px;
white-space: nowrap; position: relative;}

@media only screen and (max-width: 782px) {
    .tb01 { display: block;width: 100%; margin: 2em auto 0; border-collapse: collapse;border-bottom: #bfbfbf 1px solid;}
    .tb01 tbody,
    .tb01 tr,
    .tb01 th,
    .tb01 td {
        display: block;
    }
    .tb01 tr {  border-top: #bfbfbf 1px solid;}
    .tb01 th,
    .tb01 td {
        padding: 1.5em 2em;
        border-top:none;
    }
    .tb01 th {
        width: auto;
        padding: 1.2em 0.5em 0;
        font-weight: bold;
    }
    .tb01 td {
        padding: 0.3em 0.5em 1.2em;
    }
    tr.must th::after  {
        position: relative;
        right: auto;
        top:auto;
    }
}

.tb01 input[type='text'],
.tb01 input[type='email'] {
    width: 240px;
}
.tb01 .flex-input {
    width: 240px;
    display: inline-flex;
    align-items: center;
}
.tb01 .flex-input.short { width: auto;}
.tb01 .flex-input.short input[type='text'] { width: 140px;}
.tb01 .flex-input input { margin-left: 3px;}

@media only screen and (max-width: 782px) {
    .tb01 input[type='text'],
    .tb01 input[type='email'] {
        width: 100%;
    }
    .tb01 .flex-input {
        width: auto;
        display: flex;
    }
}
.tb01 .note { margin-left: 2em;}
.tb01 .note.pc { display: inline-block; margin-left: 2em;}

.tb01 input[name='address_must'] {
    width: 100%;
    margin-top: 0.5em;
}
.tb01 + p {
    margin-top: 3em;
    text-align: center;
}
.tb01 + p input[type="checkbox"] { margin-right: 5px;}
#maincolumn .btn {
    display: flex;
    justify-content: center;
    margin-top: 3em;
    font-size: 114%;
    letter-spacing: 0.1em;
}
@media only screen and (max-width: 782px) {
    .tb01 + p.btn {
        margin-top: 2em;
    }
    .tb01 .note { margin-left: 1em;}
    .tb01 .note.pc { display: none;}
    .tb01 .note.sp {
        display: inline-block;
        position: absolute;
        font-weight: normal;
    }
    .tb01 .must .note.sp { margin-left: 4em;}
}

.tb01 input[type='text'],
.tb01 input[type='email'],
.tb01 textarea { background: #fff;}


#maincolumn input[type='button'] {
    background: #888;
}
#maincolumn input[type='submit'] {
    min-width: 250px;
}
#maincolumn .btn > *:nth-of-type(2) {
    margin-left: 20px;
}
@media only screen and (max-width: 782px) {
    #maincolumn input[type='submit'] {
        min-width: 180px;
    }
    #maincolumn .btn > *:nth-of-type(2) {
        margin-left: 10px;
    }
}

.mr30 { margin-right: 3em;}

#maincolumn .btn.go2top a {
    display: inline-block;
    background: #313131;
    border: 0;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.046875em;
    box-shadow: none;
    border-radius: 0px;
    padding: 1em 4em;
    box-sizing: border-box;
}

.dontentry { padding-bottom: 5em;}