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

.main {background: url("/common/images/main/mainBg.png") center bottom no-repeat;}
.main .container {flex-wrap: nowrap; -webkit-align-items: flex-end; align-items: flex-end; -webkit-justify-content: center; justify-content: center; height: 420px;}
.main .left {margin-left: 5%;}
.main .right {display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin: 0 auto 4%;}
.main .right img {margin-bottom: 3%}
.main big {display: block; line-height: 1;}
.main .bg_ylw {width: auto !important; font-weight: 400; display: inline-block; border-radius: 50%; }
.main .right p,section.apply p {width: 100%; text-align: center; margin: 3% auto 1%;}
.main .right a,section.apply a {width: 430px; text-align: center; font-size: 20px; border-radius: 10px; color: #fff; padding: .6em 0; letter-spacing: 0.05em;}
.main .right a span,section.apply a span {display: block; font-size: 14px; line-height: 1.3;}
.main .right a:hover {margin: 1px -1px -1px 1px;}
.newList {background: #f7f7f7;}
.newList .sectionTitle {letter-spacing: 0.1em;}
.dataTable {width: 920px; margin: 0 auto 5%;}
.tap {display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-around; justify-content: space-around; width: 100%;}
.tap span {font-size: 14px; display: none;}
.tap li {width: 15%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; padding: 1em 0; box-sizing: border-box; border-radius: 30px 30px 0 0; cursor: pointer; color: #bbb;}
.tap .bg_grn {width: 40%; color: #fff;}
.tap li:not(.bg_grn):hover {background: #ecf3ed; color: #6c9f2f;}
.tap li:after {content: "エリア";}
.bg_grn span {display: inline-block; margin-left: 1em;}
.dataBlock ul {background: #fff; border-radius: 0 0 30px 30px; overflow: hidden; margin-bottom: 3%; padding: 20px; box-sizing: border-box; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between;}
.dataBlock ul li {width: 100%; padding: 2% 25px; border-bottom: 1px dotted transparent; box-sizing: border-box;}
.dataBlock ul li a {display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content:  flex-start; width: 100%; box-sizing: border-box;}
.dataBlock ul li a:hover {margin: 1px -1px -1px 1px; color: #2F349F;}
.dataBlock ul li>div {display: inline-block;}
.nothing {text-align: center;}
.areaList {display: none;}
.areaList:first-of-type {display: block;}
.jobno {width: 100px;}
.iconArray {width: 120px; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin: 0 5px;}
.iconArray span {font-size: 12px; width: 20px; height: 20px; text-align: center; border-radius: 5px; display: inline-block; background: #6c9f2f; color: #fff; margin: 1.5px;}
.jobTitle {width: 580px; margin-left: 25px;}
.dataBlock .bg_grn {color: #fff; border-radius: 5px; width: 400px; max-width: 100%; padding: 1em 0; box-sizing: border-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-around; justify-content: space-around; text-align: center; margin: 0 auto;}
.dataBlock .bg_grn:hover {background: #d82432;}
.dataBlock .bg_grn:after {content: "＞";}
span.ha {background: #ffabab;}
span.ha:after {content: "派";}
span.sei {background: #ffa42a;}
span.sei:after {content: "正";}
span.kei {background: #ad7219;}
span.kei:after {content: "契";}
span.pa {background: #d2691e;}
span.pa:after {content: "パ";}
span.a {background: #b2cc94;}
span.a:after {content: "ア";}
span.mi {background: #f1535f;}
span.mi:after {content: "未";}
span.kk {background: #4f74e0;}
span.kk:after {content: "経";}
span.tan {background: #adc2ff;}
span.tan:after {content: "短";}
span.cho {background: #a2d824;}
span.cho:after {content: "長";}
span.si {background: #32b0b1;}
span.si:after {content: "シ";}
span.off {background: #eee !important;}

@media screen and (max-width: 896px) {
    .main {background: url("/common/images/main/mainBg_sp.jpg") center bottom no-repeat; background-size: 100% auto;}
    .main .container {height: auto;}
    .main .right {display: none;}
    .main p.sp {position: absolute; top: 3%; left: 3%;}
    .main img.sp {width: 100%;}
    .dataTable {width: 100%;}
    .tap li {font-size: 2vw; width: 18%;}
    .tap .bg_grn {width: 30%;}
    .dataBlock ul li a {flex-wrap: wrap;}
    .jobTitle {width: 100%; margin: 1% auto;}
    .iconArray {width: auto; flex-wrap: nowrap;}
    .dataBlock ul {padding: 2% 4%;}
    .dataBlock ul li {border-color: #adadad; padding: 0;}
    .dataBlock ul li a {padding: 3% 2% 2%;}
    .dataBlock ul li:last-child {border-bottom: 0;}
    section.apply {width: 100%;}
    section.apply a {display: block; margin: 0 auto 3%; width: 100%;}
    .glh04 {margin-top: 0;}
}
@media screen and (max-width: 480px) {
    .main .container {padding-top: 5vw;}
    .main p.sp {font-size: 3vw;}
    .jobTitle {margin: 2% auto;}
    .tap li {font-size: 3.5vw;border-radius: 20px 20px 0 0; padding: .7em 0;}
    .tap li:after {display: none;}
    .tap .bg_grn {width: 25%;}
    .jobno {width: auto;}
    .iconArray {margin: 0 auto;}
}
@media screen and (max-width: 380px) {
    .jobno {font-size: 3vw;}
    .iconArray span {font-size: 3vw; width: 5vw; height: 5vw; font-weight: 400; border-radius: 3px; letter-spacing: .1em;}
    .jobTitle {font-weight: normal; font-size: 4vw}
    .jobTitle p:before {content: "▶"; font-size: .5em; margin-right: .5em; color: #6c9f2f;}
}