@charset "utf-8";
/* CSS Document */

.main {background: url("/common/images/job/mainBg.png") center bottom no-repeat; background-size: 100% auto; height: 250px;}
.jobArea .sectionTitle {margin-top: 5%;}
.jobArea .sectionTitle:before, .jobArea .sectionTitle:after {width: 42%;}
.areaBan {display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; width: 940px; margin: 0 auto 10%;}
.areaBan .area {position: relative;}
.areaBan .shutoken {margin-right: 318px; margin-top: 20px;}
.areaBan img {display: block; border: 1px solid #eee; border-radius: 30px;}
.banTxt {position: absolute; bottom: 0; background: rgba(255,255,255,0.8); padding: 10px; box-sizing: border-box; height: 75px; transition: all 0.2s; width: 100%; text-align: center;}
.banTxt h2 {font-size: 20px; /*border-bottom: 1px solid #fff; */padding: 0 0 0 1.7em; margin: 5% auto; background: url("/common/images/logo_mini.png") center left no-repeat; display: inline-block; background-size: auto 80%;}
.banTxt p {font-size: 14px; width: 90%; margin: 0 auto;}
.areaBan a:hover .banTxt {height: 100%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; flex-wrap: wrap;}
.areaBan a:hover .banTxt h2 {text-align: center;}

.jobList {margin-bottom: 4%}
.jobList .sectionTitle {margin: 5% auto 3%;}
.jobList .intro {text-align: center; letter-spacing: 0.03em;}

.jobData {width: 920px; overflow: hidden; margin: 5% auto 2%;}
.jobData .block:not(.nothing):first-of-type {border-top: 8px solid #e6e2e1;}
.jobData .block {padding: 20px; box-sizing: border-box;}
.jobData .block:not(.nothing) {border-bottom: 8px solid #e6e2e1;}
.jobData .nothing {text-align: center; background: #f1f1f1;}
.tagArray {text-align: center;display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; flex-wrap: wrap;}
.tagArray span {font-size: 14px; border: 1px solid; color: #6c9f2f; border-radius: 3px; padding: .2em 1.5em; margin: 1px; display: inline-block; transform: rotate(0.05deg);}
.ha:after {content: "派遣社員";}
.sei:after {content: "正社員前提";}
.kei:after {content: "契約社員";}
.pa:after {content: "パートタイム";}
.a:after {content: "アルバイト";}
.mi:after {content: "未経験OK";}
.kk:after {content: "経験者歓迎";}
.tan:after {content: "短期OK";}
.cho:after {content: "長期OK";}
.si:after {content: "シニア歓迎";}
.niso:after {content: "第二新卒歓迎";}
.outb:after {content: "発信";}
.inb:after {content: "受信";}
.huyo:after {content: "扶養内OK";}
.eki:after {content: "駅近好位置";}
.jobData h2 {font-size: 16px; letter-spacing: 0.05em; width: 95%; margin: 3% auto;}
.jobData table {border-collapse: collapse; font-size: 14px; width: 100%; letter-spacing: 0.02em;}
.jobData th {border-bottom: 1px solid #fff; background: #bbb2af; color: #fff; font-weight: normal; width: 110px;}
.jobData tr:last-child th {border-color: #bbb2af;}
.jobData td {border: 1px solid #bbb2af; width: 330px; padding: 1em; box-sizing: border-box;}
.btnArea {margin: 3% auto; font-size: 18px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content:center; justify-content: center;}
.btnArea a {border-radius: 7px; letter-spacing: 0.05em; margin: 0 5px; color: #fff;}
.btnArea a:not(.bg_blu) {padding: .7em 2em .8em 2.4em;}
.btnArea a.bg_blu {padding: .7em 2.4em .8em 2em;}
.btnArea a:not(.bg_blu):after {content: "▶"; margin-left: 1em;}
.btnArea a.bg_blu:before {content: "◀"; margin-right: 1em;}
.btnArea a:hover {margin: 1px 4px -1px 6px;}

.areaBtn {overflow: hidden;}
.areaBtn .sectionTitle {margin-bottom: 0;}
.areaBtn ul {width: 940px; margin: 3% auto 8%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-around; justify-content: space-around;}
.areaBtn ul li {width: 100%; margin: 0 1% 0 0;}
.areaBtn a {padding: 1em 0; border-radius: 5px; border: 1px solid #6c9f2f; font-size: 18px; display: inline-block; line-height: 1; letter-spacing: 0.05em; text-align: center; box-sizing: border-box; width: 100%;}
.areaBtn a:not(.bg_grn) {color: #6c9f2f; background: #f9f9f9;}
.areaBtn a:not(.bg_grn):hover {background: #ecf3ed; margin: 1px -1px -1px 1px;}
.areaBtn .bg_grn {cursor: default;}

.detail .jobData h2 {font-size: 18px;}
.detail .tagArray {margin-bottom: 3%;}

.bd {border-color: #bbb2af!important;}
.first,.last {display:none}
.pager li {box-sizing: border-box;}
.pager .disabled {cursor: default; opacity: .3; padding: .7em 1em; }
.here {color: #6c9f2f; padding: .7em 1em; border-bottom: 3px solid;}
.pager a {display: block; border-radius: 3px; padding: .7em 1em; }
.pager a:hover {margin: 1px -1px -1px 1px; color: #6c9f2f; background: #f9f8f5;}
pre {width: 100%; display: inline-table; margin: 0 auto; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word;
}
@media screen and (max-width: 896px) {
    .main .right {position: absolute; right: 0;}
    .areaBan {width: 100%; -webkit-justify-content: center; justify-content: center;}
    .areaBan .area,.areaBan .shutoken {margin: 2%;}
    .jobData,.areaBtn ul {width: 100%;}
    .jobData .block {padding: 3vh 0 1vh;}
    .areaBtn a {padding: 1em 0; font-size: 16px;}
    .areaBtn ul {flex-wrap: wrap; webkit-justify-content: center; justify-content: center;}
    .areaBtn ul li {width: 30%; margin: 1%;}
}
@media screen and (max-width: 600px) {
    .main .right {right: -10%;}
    .tagArray span {font-size: 12px; padding: 0.2em 2.5vw;}
    .jobData table {display: block; margin-top: 5%;}
    .jobData th,.jobData td {display: inline-block;}
    .jobData th {border-radius: 3px; border: 0; background: #d82432; padding: .3em 0; margin: 1% auto 0; font-size: .8em;}
    .jobData td {width: 100%; border-style: dashed; border-width: 0 0 1px 0; margin-bottom: 3%;}
    .jobData td:before {content: "▶"; margin-right: .5em; float: left;}
    pre {width: 93%; float: left;}
}
@media screen and (max-width: 480px) {
    .main .right {max-width: none; right: -18%;}
    .areaBan .area {max-width: 46%;}
    .banTxt {height: 15vw;}
    .banTxt h2 {font-size: 4vw;}
    .areaBan img {border-radius: 15px;}
    .btnArea {font-size: 3.1vw;}
    .btnArea a {text-align: center; padding: .7em 0 .8em !important;}
    .btnArea a:not(.bg_blu) {width: 60%;}
    .btnArea a.bg_blu {width: 40%;}
    .areaBtn a {font-size: 3.5vw;}
}
@media screen and (max-width:380px) {
    .jobList .intro {text-align: left;}
    .jobData td {padding: 1em .5em;}
    .areaBtn a {font-size: 3.2vw;}
}