@charset "utf-8";
/* head */
#header .head {background: url(../img/recruit/head.jpg) no-repeat center center/cover;}
/* about */
#about .wrap {display: flex; flex-direction: row-reverse; align-items: center; margin: 150px 0; overflow-x: hidden;}
#about .wrap .content {width: 50%; padding: 0 50px; position: relative;}
#about .wrap .content::before {position: absolute; content: url(../img/logo_v.svg); top: 50%; left: 50%; transform: translate(-50%,-50%); width: 30%; opacity: .1;}
#about .wrap .content h2 {font-size: clamp(38px, 3vw, 50px); position: relative; margin: 0 0 50px; display: inline-block;}
#about .wrap .content h2::before {position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 40%; background: #2497d1; z-index: -1;}
#about .wrap .content .txt {margin: 0 0 50px;}
#about .wrap .content .txt p {margin: 0 0 1rem;}
#about .wrap .img {width: 50%;}
#about .wrap .img img {width: 100%;}
@media screen and (max-width:1200px) {
    #about .wrap {flex-direction: column;}
    #about .wrap .content {display: contents;}
    #about .wrap .content h2 {order: 1;}
    #about .wrap .content .txt {padding: 0 50px; order: 2;}
    #about .wrap .img {width: 100%; margin: 0 0 50px; order: 3;}
}
@media screen and (max-width:1000px) {
    #about .wrap {margin: 100px 0;}
}
@media screen and (max-width:768px) {
    #about .wrap {margin: 80px 0;}
    #about .wrap .content h2 {font-size: clamp(25px, 6vw, 38px); margin: 0 0 30px;}
    #about .wrap .content .txt {padding: 0 20px; margin: 0 0 30px;}
    #about .wrap .img {margin: 0 0 30px;}
}
/* service */
#service .wrap {background: url(../img/recruit/profile.jpg) no-repeat center center/cover;}
#service .wrap .inner {background: rgba(0, 0, 0, .5); padding: 150px 50px; color: #fff; overflow-x: hidden;}
#service .wrap .inner h2 {text-align: center; font-size: clamp(38px, 3vw, 50px); margin: 0 0 50px;}
#service .wrap .inner .list {width: 100%; max-width: 1360px; margin: 0 auto;}
#service .wrap .inner .list ul {display: flex; justify-content: space-around; list-style: none; flex-wrap: wrap;}
#service .wrap .inner .list ul li {width: 30%; padding: 15px 0; margin: 0 0 50px;}
#service .wrap .inner .list ul li h3 {font-size: 22px; text-align: center; border: 1px solid #fff; line-height: 3; white-space: pre-wrap; word-break: keep-all;}
#service .wrap .inner .list ul li p {margin-top: 30px;}
@media screen and (max-width:1000px) {
    #service .wrap .inner {padding: 100px 50px;}
    #service .wrap .inner .list ul li {width: 45%; padding: 10px 0; margin: 0 0 30px;}
}
@media screen and (max-width:768px) {
    #service .wrap .inner {padding: 80px 30px;}
    #service .wrap .inner h2 {font-size: clamp(25px, 6vw, 38px); margin: 0 0 20px;}
    #service .wrap .inner .list ul li {width: 100%; margin: 0 0 30px;}
    #service .wrap .inner .list ul li h3 {font-size: 18px;}
}
/* voice */
#voice .wrap {margin: 150px auto; overflow-x: hidden;}
#voice .wrap h2 {text-align: center; font-size: clamp(38px, 3vw, 50px); margin: 0 0 50px;}
#voice .wrap .swiper-voice .swiper-wrapper {transition-timing-function: linear;}
#voice .wrap .swiper-voice ul {list-style: none;}
#voice .wrap .swiper-voice ul li a {display: flex; flex-direction: column; justify-content: end; width: 100%; height: 100%; aspect-ratio: 6 / 5; text-decoration: none; background-repeat: no-repeat; background-size: cover; background-position: center; transition: .5s;}
#voice .wrap .swiper-voice ul li a:hover {opacity: .7;}
#voice .wrap .swiper-voice ul li a .ttl {text-align: right; color: #fff; background: linear-gradient(0deg, #333 0%, transparent 100%); padding: 25px;}
#voice .wrap .swiper-voice ul li a .ttl h3 {color: #fff; font-size: 25px;}
@media screen and (max-width:1000px) {
    #voice .wrap {margin: 100px auto;}
}
@media screen and (max-width:768px) {
    #voice .wrap {margin: 80px auto;}
    #voice .wrap h2 {font-size: clamp(25px, 6vw, 38px); margin: 0 0 30px;}
    #voice .wrap .swiper-voice ul li a h3 {font-size: 20px;}
}
/* qanda */
#qanda .wrap {margin: 150px auto; overflow-x: hidden;}
#qanda .wrap h2 {text-align: center; font-size: clamp(38px, 3vw, 50px); margin: 0 0 50px;}
#qanda .wrap .qanda-list {max-width: 1240px; padding: 0 20px; margin: 0 auto;}
#qanda .wrap .qanda-list dl div {background: #DCDCDC; padding: 50px; margin-bottom: 30px;}
#qanda .wrap .qanda-list dl div dt {font-size: 25px; margin-bottom: 1rem;}
#qanda .wrap .qanda-list dl div dt span {color: #2497d1; padding-right: 1rem;}
#qanda .wrap .qanda-list dl div dd span {font-size: 25px; color: #C41D1D; padding-right: 1rem;}
@media screen and (max-width:1000px) {
    #qanda .wrap {margin: 100px auto;}
}
@media screen and (max-width:768px) {
    #qanda .wrap {margin: 80px auto;}
    #qanda .wrap h2 {font-size: clamp(25px, 6vw, 38px); margin: 0 0 30px;}
    #qanda .wrap .qanda-list dl div dt,
    #qanda .wrap .qanda-list dl div dd span {font-size: 20px;}
}
/* outline */
#outline .wrap {background: #333; padding: 70px 50px; overflow-x: hidden;}
#outline .wrap h2 {text-align: center; color: #fff; font-size: clamp(38px, 3vw, 50px); margin: 0 0 100px;}
#outline .wrap table {width: 100%; max-width: 1360px; margin: 0 auto; border-spacing: 0 15px;}
#outline .wrap table tr th {width: 20%; background: #fff; text-align: center; line-height: 3;}
#outline .wrap table tr td {width: 80%; color: #fff; padding: 0 0 0 5%; line-height: 3; border-bottom: 1px solid #fff;}
#outline .wrap table tr td ul {list-style: disc;}
#outline .wrap table tr td ul li {list-style-position: inside;}
@media screen and (max-width:1000px) {
    #outline .wrap h2 {margin: 0 0 70px;}
}
@media screen and (max-width:768px) {
    #outline .wrap {padding: 50px 30px;}
    #outline .wrap h2 {margin: 0 0 50px;}
    #outline .wrap table tr {display: block;}
    #outline .wrap table tr th, #outline .wrap table tr td {width: 100%; display: block; border: none;}
    #outline .wrap table tr td {padding: 0;}
}
/* mail */
#mail .wrap {padding: 50px; overflow-x: hidden;}
#mail .wrap .inner {padding: 80px 50px; background: #333; overflow-x: hidden;}
#mail .wrap .inner .content {width: 100%; max-width: 1000px; margin: 0 auto; color: #fff;}
#mail .wrap .inner .content h2 {font-size: clamp(18px, 2vw, 30px); margin: 0 0 70px; text-align: center;}
#mail .wrap .inner .content .error-message {display: none; font-weight: bold; color: #B70000; text-align: center;}
#mail .wrap .inner .content .error {font-weight: bold; color: #B70000;}
#mail .wrap .inner .content .mw_wp_form_error .error-message {display: block;}
#mail .wrap .inner .content .completion {font-weight: bold;}
#mail .wrap .inner .content table {width: 100%; border-collapse: collapse; text-align: left; margin: 0 0 50px;}
#mail .wrap .inner .content table tbody tr th {width: 30%; font-weight: normal;}
#mail .wrap .inner .content table tbody tr th span {color: #B70000;}
#mail .wrap .inner .content table tbody tr td {width: 70%; padding: 25px 0;}
#mail .wrap .inner .content table tbody tr td input, #mail .wrap .inner .content table tbody tr td textarea {border: 1px solid #707070; background: #fff; padding: 10px;}
#mail .wrap .inner .content table tbody tr td .form {width: 100%;}
#mail .wrap .inner .content .caution {margin: 0 0 50px; text-align: center;}
#mail .wrap .inner .content .caution span {color: #B70000;}
#mail .wrap .inner .content .privacy {padding: 50px 100px; margin: 0 0 50px; background: #DCDCDC; color: #333; text-align: center;}
#mail .wrap .inner .content .privacy .box {background: #fff; text-align: left; margin: 50px auto 0;}
#mail .wrap .inner .content .privacy .box h3 {position: relative; font-weight: normal; padding: 10px 10px 10px 30px; cursor: pointer; margin: 0; text-align: left;}
#mail .wrap .inner .content .privacy .box h3::after {position: absolute; right: 10px; top: 50%; transform: translate(0,-50%); content: ""; border-top: 18px solid #DCDCDC; border-right: 9px solid transparent; border-left: 9px solid transparent; transition: .5s;}
#mail .wrap .inner .content .privacy .box h3.is-active::after {transform: translate(0,-50%) rotate(180deg);}
#mail .wrap .inner .content .privacy .box div {padding: 0 25px; font-size: 14px; height: 0; overflow: hidden; opacity: 0; transition-duration: 0.3s;}
#mail .wrap .inner .content .privacy .box div.is-open {padding: 25px; height: auto; opacity: 1;}
#mail .wrap .inner .content .privacy .box div h4 {font-size: 14px; font-weight: normal; padding: 1em 0 0;}
#mail .wrap .inner .content .privacy .box div ul {padding: 0 0 0 1em;}
#mail .wrap .inner .content .privacy .agree {display: inline-block; padding: 15px 50px; margin: 30px auto 0; background-color: #fff;}
#mail .wrap .inner .content .recaptcha {font-size: 12px; text-align: center;}
#mail .wrap .inner .content .recaptcha a {text-decoration: none; color: #fff;}
#mail .wrap .inner .content .btn {display: flex; justify-content: center; margin: 0 0 70px;}
#mail .wrap .inner .content .config button {display: inline-block; text-decoration: none; color: #333; background: #fff; line-height: 3; padding: 0 100px; transition: .5s;}
#mail .wrap .inner .content .config button:hover {background: #167A47; color: #fff;}
#mail .wrap .inner .content .return button {display: inline-block; text-decoration: none; color: #fff; background: #707070; line-height: 3; padding: 0 100px; transition: .5s; margin: 0 30px 0 0;}
#mail .wrap .inner .content .return button:hover {background: #fff; color: #333;}
#mail .wrap .inner .content .mw_wp_form_preview .btn .return span {position: relative;}
#mail .wrap .inner .content .mw_wp_form_preview .btn .return span::after {content: ""; display: inline-block; width: 0.5px; height: 100px; background-color: #707070; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); }
.grecaptcha-badge {visibility: hidden;}
@media screen and (max-width:768px) {
    #mail .wrap {padding: 10px;}
    #mail .wrap .inner {padding: 50px 30px;}
    #mail .wrap .inner .content table tbody tr th, #mail .wrap .inner .content table tbody tr td {display: block; width: 100%;}
    #mail .wrap .inner .content .privacy {padding: 50px 3%;}
    #mail .wrap .inner .content .config button, #mail .wrap .inner .content .return button {padding: 0 80px;}
}
/* singular */
#header .voice {padding: 100px 30px 30px;}
#header .voice h1 {font-size: clamp(28px, 2.5vw, 40px); border-bottom: 1px solid #333;}
@media screen and (max-width:590px) {
    #header .voice {padding: 70px 20px 20px;}
}
#basic .wrap {display: flex; align-items: stretch;}
#basic .wrap .img {width: 50%; display: flex; flex-direction: column; background-repeat: no-repeat; background-position: center; background-size: cover;}
#basic .wrap .text {width: 50%; background-color: #333; padding: 50px;display: flex; flex-direction: column;}
#basic .wrap .text .catch {font-size: 25px; margin-bottom: 30px; color: #fff;}
#basic .wrap .text .info table {width: 100%; border-spacing: 0 15px;}
#basic .wrap .text .info table tr th {width: 20%; background: #fff; text-align: center; line-height: 3;}
#basic .wrap .text .info table tr td {width: 80%; color: #fff; padding: 0 0 0 5%; line-height: 3; border-bottom: 1px solid #fff;}
@media screen and (max-width:1000px) {
    #basic .wrap {display: block;}
    #basic .wrap .img {width: 100%; height: 100%; aspect-ratio: 16 / 9;}
    #basic .wrap .text {width: 100%;}
}
@media screen and (max-width:768px) {
    #basic .wrap .text .info table tr {display: block;}
    #basic .wrap .text .info table tr th, #basic .wrap .text .info table tr td {width: 100%; display: block; border: none;}
    #basic .wrap .text .info table tr td {padding: 0;}
}
@media screen and (max-width:590px) {
    #basic .wrap .text {padding: 50px 20px;}
}
#survey .wrap {max-width: 790px; padding: 0 20px; margin: 0 auto;}
#survey .wrap .content {margin: 150px auto;}
#survey .wrap .content .ttl {margin: 100px auto 30px; text-align: center;}
#survey .wrap .content .ttl h3 {display: inline-block; margin: 0 auto; font-size: 22px; border-bottom: 1px solid #076435; line-height: 3;}
@media screen and (max-width:768px) {
    #survey .wrap .content .ttl {margin: 70px auto 20px;}
    #survey .wrap .content .ttl h3 {font-size: 18px;}
}
#survey .wrap .link {text-align: center;}
#survey .wrap .link a {display: inline-block; text-decoration: none; color: #fff; border: 1px solid #333; background: #333; line-height: 3; padding: 0 100px; transition: .5s;}
#survey .wrap .link a:hover {background: #fff; color: #333;}