.job-area { padding: 40px 0 190px; }
@media screen and (max-width: 750px) { .job-area { padding: 9.3333333333% 0 20%; } }
.job-area .job-area-txt { margin-bottom: 20px; text-align: center; }
.job-area .job-area-box { border: 1px solid #c0c5ce; border-radius: 1em; }
.job-area .job-area-box .job-area-ttl { padding: 20px 40px; background: url("../img/common/ico_toggle_o.svg") no-repeat right 30px center; background-size: 25px auto; font-size: 1.8rem; font-weight: 700; color: #0d3078; cursor: pointer; }
.job-area .job-area-box .job-area-ttl.active { background-image: url("../img/common/ico_toggle_c.svg"); }
.job-area .job-area-box .job-area-item { display: none; padding: 0 40px 30px; }
@media screen and (max-width: 750px) { .job-area .job-area-box .job-area-item { padding-left: 20px; padding-right: 20px; } }
.job-area .job-area-box .job-area-item .job-area-subttl { margin-bottom: 30px; font-size: 3.0rem; font-weight: 700; color: #0d3078; }
@media screen and (max-width: 750px) { .job-area .job-area-box .job-area-item .job-area-subttl { text-align: center; } }
.job-area .job-area-box .job-area-item .job-area-subttl span { border-bottom: 1px solid #c0c5ce; }
.job-area .job-area-box .job-area-item .job-area-lead { font-size: 1.4rem; }
.job-area .job-area-box .job-area-item figure { width: 100%; max-width: 689px; margin: -55px auto 30px; text-align: center; }
@media screen and (max-width: 750px) { .job-area .job-area-box .job-area-item figure { width: 139.4666666667%; margin: 0 auto 30px; } }
.job-area .job-area-box .job-area-item .job-close { cursor: pointer; width: 100%; max-width: 170px; margin: 0 auto; padding: 10px; border: 1px solid #0d3078; background-color: #fff; font-size: 1.8rem; font-weight: 700; text-align: center; color: #0d3078; border-radius: 2em; }
.job-area .job-area-box .job-area-item .job-close .ico { margin-left: 1em; }

.job-occupation { position: relative; z-index: 10; padding: 60px 0 100px; background-color: #f4f8fc; }
@media screen and (max-width: 750px) { .job-occupation { padding: 18.6666666667% 0 20%; } }
.job-occupation .job-fig { position: absolute; top: 0; left: 50%; margin-top: -125px; margin-left: -175px; }
@media screen and (max-width: 750px) { .job-occupation .job-fig { width: 46.6666666667%; margin-top: -13.3333333333%; margin-left: -23.3333333333%; } }
.job-occupation .occupation-top { margin-bottom: 60px; }
@media screen and (max-width: 750px) { .job-occupation .occupation-top { margin-bottom: 17.6470588235%; } }
.job-occupation .occupation-top .occupation-ttl { margin-bottom: 40px; padding: 0 50px; font-size: 3.0rem; font-weight: 700; color: #0d3078; }
@media screen and (max-width: 750px) { .job-occupation .occupation-top .occupation-ttl { text-align: center; } }
.job-occupation .occupation-top .occupation-ttl span { border-bottom: 1px solid #c0c5ce; }
.job-occupation .occupation-top .occupation-nav ul { display: flex; flex-wrap: wrap; }
@media screen and (max-width: 750px) { .job-occupation .occupation-top .occupation-nav ul { display: block; } }
.job-occupation .occupation-top .occupation-nav ul li { width: 31.2%; margin-right: 3.2%; margin-bottom: 2%; }
@media screen and (max-width: 750px) { .job-occupation .occupation-top .occupation-nav ul li { width: 90.2941176471%; margin: 0 auto 4.4117647059%; }
  .job-occupation .occupation-top .occupation-nav ul li:nth-child(3n) { margin: 0 auto 4.4117647059% !important; }
  .job-occupation .occupation-top .occupation-nav ul li:last-child { margin: 0 auto; } }
.job-occupation .occupation-top .occupation-nav ul li:nth-child(3n) { margin-right: 0; }
.job-occupation .occupation-top .occupation-nav ul li a { position: relative; overflow: hidden; outline: none; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 25px 20px; background: #fff url("../img/common/ico_arrow_b.svg") no-repeat left 25px center; background-size: 14px auto; font-size: 1.8rem; font-weight: 700; text-align: center; border-radius: 2em; line-height: 1; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); transition: ease .2s; }
.job-occupation .occupation-top .occupation-nav ul li a::before { content: ''; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background: #0d3078 url("../img/common/ico_arrow_w_b.svg") no-repeat left 25px center; background-size: 14px auto; transition: all .5s; opacity: 0; }
.job-occupation .occupation-top .occupation-nav ul li a span { position: relative; z-index: 3; color: #0d3078; transform: rotate(0.05deg); }
.job-occupation .occupation-top .occupation-nav ul li a:hover::before { opacity: 1; }
.job-occupation .occupation-top .occupation-nav ul li a:hover span { color: #fff; }
.job-occupation .occupation-floating { position: fixed; top: 50%; right: 0; z-index: 100; margin: 0 30px; transform: translateY(-50%); visibility: hidden; opacity: 0; transition: all .5s; }
@media screen and (max-width: 750px) { .job-occupation .occupation-floating { display: none; } }
.job-occupation .occupation-floating._show { visibility: visible; opacity: 1; }
.job-occupation .occupation-floating dl { width: 1em; }
.job-occupation .occupation-floating dl dt { margin-bottom: 15px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -o-writing-mode: vertical-rl; writing-mode: vertical-rl; color: #0d3078; }
.job-occupation .occupation-floating dl dd { position: relative; }
.job-occupation .occupation-floating dl dd::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1.5px; background-color: #0d3078; }
.job-occupation .occupation-floating dl dd p { margin-bottom: 20px; }
.job-occupation .occupation-floating dl dd p:last-child { margin-bottom: 0; }
.job-occupation .occupation-floating dl dd p a { position: relative; display: block; width: 7px; height: 7px; }
.job-occupation .occupation-floating dl dd p a::before { content: ''; position: absolute; top: 0; left: 50%; width: 7px; height: 7px; margin-left: 0.9px; background-color: #0d3078; border-radius: 1em; }
.job-occupation .occupation-floating dl dd p a.active { width: 19px; height: 19px; }
.job-occupation .occupation-floating dl dd p a.active::before { width: 19px; height: 19px; margin-left: -12px; }
.job-occupation .occupation-con .occupation-box { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; padding: 30px; background-color: #fff; border-radius: 1em; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); }
@media screen and (max-width: 750px) { .job-occupation .occupation-con .occupation-box { display: block; margin-bottom: 11.7647058824%; padding: 8.8235294118% 5.8823529412% 16.1764705882%; } }
.job-occupation .occupation-con .occupation-box .box-l { flex: 1; }
.job-occupation .occupation-con .occupation-box .box-l .box-ttl { margin-bottom: 20px; padding: 5px 0 5px 30px; border-left: 1px solid #0d3078; font-size: 2.6rem; font-weight: 700; color: #0d3078; }
.job-occupation .occupation-con .occupation-box .box-l .box-dl dl { display: flex; align-items: center; margin-bottom: 25px; }
.job-occupation .occupation-con .occupation-box .box-l .box-dl dl:last-child { margin-bottom: 0; }
.job-occupation .occupation-con .occupation-box .box-l .box-dl dl dt { width: 8em; margin-right: 1em; padding: 5px; background-color: #0d3078; font-size: 1.3rem; color: #fff; text-align: center; border-radius: 2em; }
.job-occupation .occupation-con .occupation-box .box-l .box-dl dl dd { flex: 1; font-size: 1.5rem; }
.job-occupation .occupation-con .occupation-box .box-r { width: 44.6808510638%; }
@media screen and (max-width: 750px) { .job-occupation .occupation-con .occupation-box .box-r { width: 100%; margin-top: 40px; } }
.job-occupation .occupation-con .occupation-box .box-r .occupation-swiper { position: relative; overflow: hidden; }
.job-occupation .occupation-con .occupation-box .box-r .swiper-pagination-bullets { position: static; margin-top: 15px; }
.job-occupation .occupation-con .occupation-box .box-r .swiper-pagination-bullet { width: 10px !important; height: 10px !important; margin: 0 8px !important; background: #cee0f0; opacity: 1; }
.job-occupation .occupation-con .occupation-box .box-r .swiper-pagination-bullet-active { background: #0d3078; }
.job-occupation .occupation-con .occupation-box .c-btn { width: 100%; max-width: 310px; margin-top: 80px; font-size: 1.4rem; border-radius: 4em; }
@media screen and (max-width: 750px) { .job-occupation .occupation-con .occupation-box .c-btn { margin: 40px auto 0; } }

.job-fig { margin-bottom: 135px; }

/*# sourceMappingURL=job.css.map */