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

#pageHead {width: 100%;padding: 10% 0;position: relative;background: url("../img/recruit/header.png") no-repeat center / cover;}
#pageHead h2 {position: absolute;top: 55%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%);text-align: center;color: #fff;font-size: 35px;font-weight: bold;letter-spacing: 0.1em;line-height: 1.3;}
#pageHead h2 small {margin: 10px auto 0;display: block;font-size: 12px;font-weight: normal;letter-spacing: 0;}
@media screen and (max-width: 767px) {
#pageHead {padding: 25% 0;background: url("../img/recruit/header_sp.png") no-repeat center / cover;}
#pageHead h2 {font-size: 25px;}
#pageHead h2 small {margin: 0 auto;}
}

#breadcrumb {max-width: 1280px;margin: 0 auto;padding: 20px 0;}
#breadcrumb a {padding: 0 30px 0 0;position: relative;display: inline-block;text-decoration: none;}
#breadcrumb a::after {content: "";width: 8px;height: 1px;position: absolute;right: 10px;top: 5px;display: block;background: #888;}
#breadcrumb a:last-child::after {width: 0;height: 0;display: none;}
#breadcrumb + p {margin: 30px auto 50px;text-align: center;font-weight: bold;line-height: 2;}
@media screen and (max-width: 767px) {
#breadcrumb {max-width: 95%;padding: 10px 0;font-size: 12px;}
#breadcrumb + p {margin: 30px auto 20px;font-size: 13px;}
}

.txtC {margin: 30px auto 50px;text-align: center;font-weight: bold;line-height: 2;}
@media screen and (max-width: 767px) {
.txtC {margin: 30px auto 20px;font-size: 13px;}
}

.tabs {margin: 50px 0 30px;overflow:hidden;}
.tabs .tabNav {width: 100%;border-bottom: 1px solid #009787;}
.tabs .tabNav ul {max-width: 1280px;margin: 0 auto;overflow:hidden;display: flex;justify-content: space-between;flex-wrap: wrap;}
.tabs .tabNav li {width: calc(49% - 20px);box-sizing: border-box;border-top: 1px solid #009787;border-left: 1px solid #009787;border-right: 1px solid #009787;color: #009787;cursor: pointer;text-align: center;}
.tabs .tabNav li a {width: 100%;padding: 20px 0 15px;display: block;color: #009787;text-decoration: none;font-size: 20px;font-weight: bold;}
.tabs .tabNav li a.active {background: linear-gradient(to right, #007e6a 0%, #00b0a4 100%);color: #fff;}
.tabs .panel {max-width: 100%;margin: auto;padding: 100px 0 80px;display:none;overflow: hidden;}
.recruitinner {max-width: 900px;margin: auto;}
.recruitinner .flex{ justify-content: center;}
.recruitinner .flex figure{margin: 10px 0;}
h3 {margin: 0 auto 70px;position: relative;text-align: center;font-size: 38px;font-weight: bold;letter-spacing: 0.1em;}
h3::before {content: "";width: 50px;height: 1px;position: absolute;top: -30px;left: 50%;margin-right: -50%;transform: translate(-50%, -50%);display: block;background: #007e6a;}
h3 small {margin: 10px auto 0;display: block;color: #007e6a;font-size: 15px;letter-spacing: 0;}
@media screen and (max-width: 767px) {
.tabs .tabNav ul {max-width: 95%;}
.tabs .tabNav li {width: 48%;}
.tabs .tabNav li a {padding: 10px 0 5px;font-size: 13px;}
.tabs .panel {max-width: 95%;padding: 50px 0 40px;}
.recruitinner {max-width: 95%;}
.recruitinner .flex{ display: block; justify-content: center;}
.recruitinner .flex figure{margin: 20px 0;}
h3 {margin: 0 auto 50px;font-size: 20px;}
h3::before {width: 50px;top: -20px;}
h3 small {margin: 0 auto;font-size: 12px;}
}

#panel1 figure {text-align: center;}
#panel1 ul {display: flex;justify-content: center;flex-wrap: wrap;align-items: center;}
#panel1 ul li {margin: 0 10px;box-sizing: border-box;}
#panel1 h4 {margin: 50px auto 20px;padding: 10px 0 10px 20px;border-left: 3px solid #007e6a;color: #009989;font-size: 20px;font-weight: bold;}
#panel1 dl {margin: 0 auto 65px;padding: 40px 70px 20px;position: relative;border: 1px solid #007e6a;}
#panel1 dl::before {content: "";width: 90px;height: 90px;position: absolute;top: 0;left: 0;display: block;}
#panel1 dl::after {content: "";width: 20px;height: 19px;position: absolute;bottom: -50px;left: 50%;margin-right: -50%;transform: translate(-50%, -50%);display: block;background: url(../img/first/flow_arrow.png) no-repeat 0 0;}
#panel1 dl:nth-of-type(1)::before {background: url(../img/recruit/flow-01.png) no-repeat 0 0 / cover;}
#panel1 dl:nth-of-type(2)::before {background: url(../img/recruit/flow-02.png) no-repeat 0 0 / cover;}
#panel1 dl:nth-of-type(3)::before {background: url(../img/recruit/flow-03.png) no-repeat 0 0 / cover;}
#panel1 dl:nth-of-type(4)::before {background: url(../img/recruit/flow-04.png) no-repeat 0 0 / cover;}
#panel1 dl:nth-of-type(5)::before {background: url(../img/recruit/flow-05.png) no-repeat 0 0 / cover;}
#panel1 dl:nth-of-type(5)::after {width: 0;height: 0;display: none;}
#panel1 dl dt {margin: 0 0 15px;padding: 0 0 10px;border-bottom: 1px solid #009989;color: #009989;font-size: 20px;font-weight: bold;}
#panel1 dl dt p {margin: 0 0 0 auto;font-weight: bold;}
#panel1 dl + p {margin: 30px auto;text-align: center;color: #009989;font-size: 16px;font-weight: bold;line-height: 2;}
@media screen and (max-width: 767px) {
#panel1 h4 {margin: 40px 0 20px;padding: 5px 0 5px 10px;font-size: 16px;}
#panel1 dl {margin: 0 auto 55px;padding: 20px 30px 10px;}
#panel1 dl::before {width: 50px;height: 50px;}
#panel1 dl dt {margin: 0 0 5px;padding: 0 0 5px;font-size: 14px;}
#panel1 dl dd {padding: 10px 0 5px;font-size: 12px;line-height: 1.6;}
#panel1 dl + p {margin: 30px auto 10px;font-size: 11px;}
}

#panel2 figure {text-align: center;}
#panel2 .btn {margin: 10px 0 0;padding: 10px 50px 10px 40px;position: relative;display: table;background: linear-gradient(to right, #007e6a 0%, #00b0a4 100%);box-shadow: 0 0 8px #ccc;color: #fff;text-decoration: none;font-size: 14px;}
#panel2 .btn::after {content: "";width: 0;height: 0;position: absolute;right: 10px;top: 12px;border-left: 6px solid #fff;border-top: 4px solid transparent;border-bottom: 4px solid transparent;}
#panel2 h4 {margin: 30px auto 20px;padding: 10px 0 10px 20px;border-left: 3px solid #007e6a;color: #009989;font-size: 20px;font-weight: bold;}
#panel2 h4 + p {margin: 0 0 50px;}
@media screen and (max-width: 767px) {
#panel2 h4 {margin: 40px 0 20px;padding: 5px 0 5px 10px;font-size: 16px;}
#panel2 h4 + p {font-size: 13px;line-height: 1.6;}
}

.contactBox {margin: auto;padding: 20px;display: block;background: #e3efee;text-align: center;}
.contactBox h5 {margin: 0 0 10px;padding: 0 0 10px;border-bottom: 1px solid #009989;color: #009989;font-size: 20px;font-weight: bold;}
.contactBox h5 + p {margin: 0 0 10px;font-size: 16px;font-weight: bold;}
.contactBox figure {}
@media screen and (max-width: 767px) {
.contactBox h5 {font-size: 16px;}
.contactBox h5 + p {font-size: 12px;}
}