@charset "utf-8";
/* head */
#header .head {padding: 70px 0 0; width: 100%;}
#header .head .box .breadcrumb ul {list-style: none; display: flex; flex-wrap: wrap; padding: .5em; border-top: 1px solid #bfe3e9; font-size: 15px;}
#header .head .box .breadcrumb ul li:first-child a::before {content: url(../img/home.svg); padding-right: 0.5em; pointer-events: none;}
#header .head .box .breadcrumb ul li::after {padding: 0 0.5em; content: ">";}
#header .head .box .breadcrumb ul li:last-child::after {padding: 0; content: "";}
#header .head .box .breadcrumb ul li a {text-decoration: none; color: #909090; transition: .5s;}
#header .head .box .breadcrumb ul li a:hover {opacity: .7;}
#header .head .box .content .hill {background: #bfe3e9; position: relative; height: 100vh;}
#header .head .box .content .hill::before {content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 50vh; background: radial-gradient(50% 100% at 50% 100%, #86DB8C 99.9%, transparent 100%);}
#header .head .box .content .hill .catch {position: absolute; font-size: 60px; font-weight: bold; width: 100%; top: 35%; left: 50%; transform: translate(-50%,0); text-align: center;}
#header .head .box .content .hill .illust {position: absolute; top:100%;}
#header .head .box .content .hill .illust.cloud1 {width: 30%; top: 10%; left: 5%;}
#header .head .box .content .hill .illust.cloud2 {width: 30%; top: 10%; right: 5%;}
#header .head .box .content .hill .illust.tree {width: 10%; top: 60%; left: 20%;}
#header .head .box .content .hill .illust.robot {width: 10%; top: 60%; right: 20%;}
#header .head .box .content .hill .illust.car1 {width: 15%; top: 75%; left: 35%;}
#header .head .box .content .hill .illust.bike {width: 15%; top: 90%; left: 10%; z-index: 2;}
#header .head .box .content .hill .illust.car2 {width: 15%; top: 90%; right: 10%; z-index: 2;}
#header .head .box .content .separator {background: #86DB8C; position: relative;}
#header .head .box .content .separator .illust {position: absolute; top:100%;}
#header .head .box .content .separator .text {max-width: 790px; margin: 0 auto; padding: 0 20px; font-weight: bold;}
#header .head .box .content .separator .mask{width: 100%; height: 100%; aspect-ratio: 20 / 3; background: url('../img/recruit/separator.svg') no-repeat center;}
@media screen and (max-width:1200px) {
  #header .head .box .content .hill .illust.cloud1 {width: 35%; top: 10%; left: 5%;}
  #header .head .box .content .hill .illust.cloud2 {width: 35%; top: 10%; right: 5%;}
  #header .head .box .content .hill .illust.tree {width: 15%; top: 60%; left: 20%;}
  #header .head .box .content .hill .illust.robot {width: 15%; top: 60%; right: 20%;}
  #header .head .box .content .hill .illust.car1 {width: 20%; top: 75%; left: 35%;}
  #header .head .box .content .hill .illust.bike {width: 20%; top: 90%; left: 10%;}
  #header .head .box .content .hill .illust.car2 {width: 20%; top: 90%; right: 10%;}
  #header .head .box .content .separator .comment {padding: 50px 20px;}
}
@media screen and (max-width:768px) {
  #header .head {padding: 50px 0 0;}
  #header .head .box .content .hill {height: 70vh;}
  #header .head .box .content .hill::before {height: 40vh;}
  #header .head .box .content .hill .catch {font-size: 50px;}
}
@media screen and (max-width:590px) {
  #header .head .box .content .hill {height: 55vh;}
  #header .head .box .content .hill::before {height: 25vh;}
  #header .head .box .content .hill .catch {font-size: 30px;}
}
/* common */
#header .head .box .content h1,
.wrap h2 {font-size: 28px; position: relative; letter-spacing: 2px; margin-bottom: 30px; text-align: center;}
#header .head .box .content h1::before,
.wrap h2::before {background-color: #231815; bottom: -3px; content: ""; height: 3px; left: 50%; position: absolute; transform: translateX(-50%); width: 40px;}
#header .head .box .content .comment {max-width: 790px; margin: 50px auto; padding: 0 20px;}
.wrap .comment {max-width: 750px; margin: 50px auto;}
@media screen and (max-width:768px) {
  #header .head .box .content h1,
  .wrap h2 {font-size: 24px; margin-bottom: 26px;}
}
/* message */
#message .mask{width: 100%; height: 100%; aspect-ratio: 20 / 3.01; background-image: url('../img/recruit/separator.svg'); background-repeat: no-repeat; background-position: center;}
#message .wrap {margin: 0 auto 150px; max-width: 1320px; padding: 0 20px;}
#message .wrap .president {margin: 100px auto 0; display: flex;}
#message .wrap .president .img {width: 45%; padding-right: 80px;}
#message .wrap .president .img .image {position: relative;}
#message .wrap .president .img img {width: 100%; display: block; border-radius: 20px;}
#message .wrap .president .img .image::before {content: ""; width: 100%; aspect-ratio: 9 / 10; border-radius: 20px; background: #BFE3E9; position: absolute; top: 5%; left: 5%; z-index: -1;}
#message .wrap .president .text {width: 55%;}
#message .wrap .president .text p {margin-bottom: 1rem;}
#message .wrap .president .text .right {text-align: right;}
@media screen and (max-width:1000px) {
  #message .wrap .president {display: block;}
  #message .wrap .president .img {width: 100%; padding-right: 5%;}
  #message .wrap .president .img .image {max-width: 450px; margin: 0 auto 100px;}
  #message .wrap .president .text {width: 100%;}
}
@media screen and (max-width:768px) {
  #message .wrap {margin: 100px auto;}
}
/* jobtype */
#jobtype {background-color: #F1F1F1;}
#jobtype .wrap {margin: 0 auto; max-width: 1320px; padding: 100px 20px;}
#jobtype .wrap .type .content {display: flex; margin-top: 100px;}
#jobtype .wrap .type .content .img {width: 50%; padding-right: 40px;}
#jobtype .wrap .type .content .img img {width: 100%; display: block; border-radius: 20px;}
#jobtype .wrap .type .content .text {width: 50%; padding-left: 40px;}
#jobtype .wrap .type .content .text h3 {font-size: 24px; border-bottom: 1px solid #858585; position: relative; margin-bottom: 2rem;}
#jobtype .wrap .type .content .text h3::after {position: absolute; right: 0; top: 50%; transform: translate(0,-50%); color: #858585;}
#jobtype .wrap .type .content .text .sales span {color: #EA4D07;}
#jobtype .wrap .type .content .text .sales::after {content: "Car Life Adviser";}
#jobtype .wrap .type .content .text .service span {color: #8B0B84;}
#jobtype .wrap .type .content .text .service::after {content: "Service Mechanic";}
#jobtype .wrap .type .content .text .box .catch {font-size: 22px; font-weight: bold;}
#jobtype .wrap .type .content .text .box p {margin-bottom: 1rem;}
#jobtype .wrap .type .content .text .box .link {text-align: center; margin-top: 50px;}
#jobtype .wrap .type .content .text .box .link a {position:relative; text-decoration: none; background: #264a9e; border-radius: 999px; color: #fff; font-weight: bold; padding: 0 30px 0 50px; line-height: 3.5; display: inline-block; letter-spacing: 2px; transition: .2s; box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45);}
#jobtype .wrap .type .content .text .box .link a::before{position:absolute; content:""; background: #ffffff; height: calc(15px / 2 * tan(60deg)); width: 10px; clip-path: polygon(0 0, 100% 50%, 0 100%); top:50%; left:30px; transform: translate(0,-40%);}
#jobtype .wrap .type .content .text .box .link a:hover {box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.45); transform: translateY(2px); background-color: #1f3d77;}
#jobtype .wrap .type .content:nth-child(even) {flex-direction: row-reverse;}
#jobtype .wrap .type .content:nth-child(even) .img {padding-left: 40px;}
#jobtype .wrap .type .content:nth-child(even) .text {padding-right: 40px;}
@media screen and (max-width:1000px) {
  #jobtype .wrap .type .content {display: block;}
  #jobtype .wrap .type .content .img {width: 100%; padding: 0; margin: 0 auto; max-width: 600px;}
  #jobtype .wrap .type .content .text {width: 100%; padding: 0; margin-top: 50px;}
  #jobtype .wrap .type .content:nth-child(even) .img,
  #jobtype .wrap .type .content:nth-child(even) .text {padding: 0;}
}
@media screen and (max-width:768px) {
  #jobtype .wrap .type .content .text h3 {font-size: 20px;}
  #jobtype .wrap .type .content .text .box .catch {font-size: 18px;}
}
/* workplace */
#workplace .wrap {padding: 100px 0;}
#workplace .wrap .comment {max-width: 790px; padding: 0 20px;}
#workplace .wrap .swiper .swiper-wrapper {transition-timing-function: linear; list-style: none;}
#workplace .wrap .swiper .swiper-wrapper .swiper-slide .item img {display: block; width: 100%; border-radius: 20px;}
#workplace .wrap .swiper .swiper-wrapper .swiper-slide .item p {font-size: 14px;}
/* interview */
#interview {background-color: #F1F1F1;}
#interview.transparent {background-color: transparent;}
#interview .wrap {margin: 0 auto; max-width: 1320px; padding: 100px 20px;}
#interview .wrap .type .content {display: flex; margin-top: 100px;}
#interview .wrap .type .content .img {width: 50%; padding-right: 40px;}
#interview .wrap .type .content .img img {width: 100%; display: block; border-radius: 20px;}
#interview .wrap .type .content .text {width: 50%; padding-left: 40px;}
#interview .wrap .type .content .text h3 {font-size: 24px; border-bottom: 1px solid #858585; position: relative; margin-bottom: 2rem;}
#interview .wrap .type .content .text h3::after {position: absolute; right: 0; top: 50%; transform: translate(0,-50%); color: #858585;}
#interview .wrap .type .content .text .sales span {color: #EA4D07;}
#interview .wrap .type .content .text .sales::after {content: "Car Life Adviser";}
#interview .wrap .type .content .text .mechanic span {color: #8B0B84;}
#interview .wrap .type .content .text .mechanic::after {content: "Service Mechanic";}
#interview .wrap .type .content .text .box .catch {font-size: 22px; font-weight: bold;}
#interview .wrap .type .content .text .box p {margin-bottom: 1rem;}
#interview .wrap .type .content .text .box .link {text-align: center; margin-top: 50px;}
#interview .wrap .type .content .text .box .link a {position:relative; text-decoration: none; background: #264a9e; border-radius: 999px; color: #fff; font-weight: bold; padding: 0 30px 0 50px; line-height: 3.5; display: inline-block; letter-spacing: 2px; transition: .2s; box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45);}
#interview .wrap .type .content .text .box .link a::before{position:absolute; content:""; background: #ffffff; height: calc(15px / 2 * tan(60deg)); width: 10px; clip-path: polygon(0 0, 100% 50%, 0 100%); top:50%; left:30px; transform: translate(0,-40%);}
#interview .wrap .type .content .text .box .link a:hover {box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.45); transform: translateY(2px); background-color: #1f3d77;}
#interview .wrap .type .content:nth-child(even) {flex-direction: row-reverse;}
#interview .wrap .type .content:nth-child(even) .img {padding-left: 40px;}
#interview .wrap .type .content:nth-child(even) .text {padding-right: 40px;}
#interview .wrap>.link {text-align: center; margin-top: 100px;}
#interview .wrap>.link a {position:relative; min-width: 250px; text-decoration: none; background: #264a9e; border-radius: 999px; color: #fff; font-weight: bold; padding: 0 30px 0 50px; line-height: 3.5; display: inline-block; letter-spacing: 2px; transition: .2s; box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45);}
#interview .wrap>.link a::before{position:absolute; content:""; background: #ffffff; height: calc(15px / 2 * tan(60deg)); width: 10px; clip-path: polygon(0 0, 100% 50%, 0 100%); top:50%; left:30px; transform: translate(0,-40%);}
#interview .wrap>.link a:hover {box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.45); transform: translateY(2px); background-color: #1f3d77;}
@media screen and (max-width:1000px) {
  #interview .wrap .type .content {display: block;}
  #interview .wrap .type .content .img {width: 100%; padding: 0; margin: 0 auto; max-width: 600px;}
  #interview .wrap .type .content .text {width: 100%; padding: 0; margin-top: 50px;}
  #interview .wrap .type .content:nth-child(even) .img,
  #interview .wrap .type .content:nth-child(even) .text {padding: 0;}
}
@media screen and (max-width:768px) {
  #interview .wrap h2 {font-size: 24px; margin-bottom: 26px;}
  #interview .wrap .type .content .text h3 {font-size: 20px;}
  #interview .wrap .type .content .text .box .catch {font-size: 18px;}
}
/* cta */
#cta .wrap {padding: 100px 0; background: #BFE3E9;}
#cta .wrap .comment {max-width: 790px; padding: 0 20px;}
#cta .wrap .swiper .swiper-wrapper {transition-timing-function: linear; list-style: none;}
#cta .wrap .swiper .swiper-wrapper .swiper-slide .item img {display: block; width: 100%; border-radius: 20px;}
#cta .wrap .cta {display: flex; justify-content: center; align-items: center; margin-top: 100px;}
#cta .wrap .cta .link {text-align: center; margin-right: 100px;}
#cta .wrap .cta .link a {position:relative; min-width: 300px; text-decoration: none; background: #264a9e; border-radius: 999px; color: #fff; font-weight: bold; padding: 0 30px 0 50px; line-height: 3.5; display: inline-block; letter-spacing: 2px; transition: .2s; box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45);}
#cta .wrap .cta .link a::before{position:absolute; content:""; background: #ffffff; height: calc(15px / 2 * tan(60deg)); width: 10px; clip-path: polygon(0 0, 100% 50%, 0 100%); top:50%; left:30px; transform: translate(0,-40%);}
#cta .wrap .cta .link a:hover {box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.45); transform: translateY(2px); background-color: #1f3d77;}
#cta .wrap .cta .link:last-child {margin-right: 0;}
#cta .wrap .cta .link.form a {background: #C52828;}
@media screen and (max-width:768px) {
  #cta .wrap h2 {font-size: 20px;}
  #cta .wrap .cta {display: block; margin-top: 100px;}
  #cta .wrap .cta .link {margin: 75px auto 0;}
}
/* sales mechanic */
/* details */
#details {background-color: #BFE3E9;}
#details .wrap {margin: 100px auto 0; max-width: 1320px; padding: 100px 20px;}
#details .wrap .content {margin: 100px auto 0; display: flex;}
#details .wrap .content:nth-child(odd) {flex-direction: row-reverse;}
#details .wrap .content .img {width: 50%; padding: 0 40px 0 0;}
#details .wrap .content:nth-child(odd) .img {padding: 0 0 0 40px;}
#details .wrap .content .img img {width: 100%; border-radius: 20px;}
#details .wrap .content .text {width: 50%; padding: 0 0 0 40px;}
#details .wrap .content:nth-child(odd) .text {padding: 0 40px 0 0;}
#details .wrap .content .text .box {margin-bottom: 50px;}
#details .wrap .content .text .box h3 {font-size: 24px; border-bottom: 1px solid #231815;}
#details .wrap .content .text .box p {margin-top: 1rem;}
@media screen and (max-width:1200px) {
  #details .wrap .content .img {padding: 0 20px 0 0;}
  #details .wrap .content:nth-child(odd) .img {padding: 0 0 0 20px;}
  #details .wrap .content .text {padding: 0 0 0 20px;}
  #details .wrap .content:nth-child(odd) .text {padding: 0 20px 0 0;}
  #details .wrap .content .text .box h3 {font-size: 22px;}
}
@media screen and (max-width:1000px) {
  #details .wrap .content {display: block;}
  #details .wrap .content .img {width: 100%; padding: 0; max-width: 600px; margin: 0 auto 50px;}
  #details .wrap .content:nth-child(odd) .img {padding: 0;}
  #details .wrap .content .text {width: 100%; padding: 0;}
  #details .wrap .content:nth-child(odd) .text {padding: 0;}
}
@media screen and (max-width:768px) {
  #details .wrap .content .text .box h3 {font-size: 20px;}
}
/* schedule */
#schedule .wrap {margin: 100px auto; max-width: 1320px; padding: 0 20px;}
#schedule .wrap .content {display: flex; margin-top: 100px;}
#schedule .wrap .content .timeline {width: 50%;}
#schedule .wrap .content .timeline .item {display: flex; align-items: stretch; margin-bottom: 25px;}
#schedule .wrap .content .timeline .item .time {width: 100px; display: flex; align-items: center; padding-left: 10px; color: #264A9E; font-weight: bold; position: relative;}
#schedule .wrap .content .timeline .item .time::before {position: absolute; content: "";  top: 0; bottom: 0; left: 33px; width: 2px; background: #264A9E; height: calc(100% + 25px);}
#schedule .wrap .content .timeline .item.first .time::before {top: 50%; height: calc(50% + 25px);}
#schedule .wrap .content .timeline .item.return .time::before,
#schedule .wrap .content .timeline .item.last .time::before {height: 100%;}
#schedule .wrap .content .timeline .item .time time {background-color: #fff; z-index: 2;}
#schedule .wrap .content .timeline .item .event {width: calc(100% - 100px); background-color: #F1F1F1; padding: 25px 20px; position: relative;}
#schedule .wrap .content .timeline .item .event::before {position: absolute; content: ""; width: 26px; height: 30px; background-color: #F1F1F1; clip-path: polygon(100% 0, 0 50%, 100% 100%); top: 50%; left: 0; transform: translate(-100%,-50%); z-index: 3;}
#schedule .wrap .content .timeline .item .event h3 {font-size: 20px; border-bottom: 1px solid #231815;}
#schedule .wrap .content .timeline .item .event p {margin-top: 1rem;}
#schedule .wrap .content .timeline .item .event img {margin-top: 1rem; width: 100%; border-radius: 20px;}
@media screen and (max-width:1000px) {
  #schedule .wrap .content {display: block;}
  #schedule .wrap .content .timeline {width: 100%;}
  #schedule .wrap .content .timeline .item .time { padding-left: 0;}
  #schedule .wrap .content .timeline .item.return .time::before {height: calc(100% + 25px);}
  #schedule .wrap .content .timeline .item .event img {max-width: 500px; margin: 1rem auto 0;}
}
@media screen and (max-width:590px) {
  #schedule .wrap .content .timeline .item .time {width: 70px;}
  #schedule .wrap .content .timeline .item .event {width: calc(100% - 70px);}
  #schedule .wrap .content .timeline .item .time::before {left: 21px;}
  #schedule .wrap .content .timeline .item .event h3 {font-size: 16px;}
}
/* step */
#step {background-color: #F1F1F1;}
#step .wrap {margin: 100px auto 0; max-width: 1320px; padding: 100px 20px;}
#step .wrap .active ul {list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative;}
#step .wrap .active ul li {width: 40%;}
#step .wrap .active ul li:nth-child(1) {margin-bottom: 7vw;}
#step .wrap .active ul li:nth-child(3) {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#step .wrap .active ul li div {background: url(../img/company/cloud4.svg) no-repeat center /contain; padding: 9vw 4vw;}
#step .wrap .active ul li div h4 {font-size: 22px; text-align: center;}
#step .wrap .active ul li div p {margin-top: 1rem;}
#step .wrap h3 {font-size: 28px; letter-spacing: 2px; margin-bottom: 30px; text-align: center;}
#step .wrap .career ul {list-style: none; max-width: 750px; margin: 0 auto;}
#step .wrap .career ul li {padding: 30px 20px 50px; margin-bottom: 86px; background-color: #E3F2FD; border-radius: 20px; position: relative;}
#step .wrap .career ul li::before {position: absolute; content: ""; width: 30px; height: 26px; background-color: #B0B0B0; clip-path: polygon(0 0, 100% 0%, 50% 100%); bottom: -56px; left: 50%; transform: translate(-50%,0);}
#step .wrap .career ul li:nth-child(2) {background-color: #90CAF9;}
#step .wrap .career ul li:nth-child(3) {background-color: #42A5F5;}
#step .wrap .career ul li:last-child {background-color: #1565C0; color: #fff; margin-bottom: 0;}
#step .wrap .career ul li:last-child::before {content: none;}
#step .wrap .career ul li h4 {font-size: 28px; line-height: 2.75; border-bottom: 1px solid #231815;}
#step .wrap .career ul li:last-child h4 {border-bottom: 1px solid #fff;}
#step .wrap .career ul li h4 span {font-size: 24px; margin-left: 50px;}
#step .wrap .career ul li p {margin-top: 1rem;}
@media screen and (max-width:1280px) {
  #step .wrap .active ul li {width: 60%;}
  #step .wrap .active ul li:nth-child(1) {margin-bottom: 0;}
  #step .wrap .active ul li:nth-child(3) {position: static; transform: none;}
  #step .wrap .active ul li:nth-child(even) {margin: -5% 0 -5% auto;}
  #step .wrap .active ul li div {padding: 13vw 6vw;}
}
@media screen and (max-width:1000px) {
  #step .wrap .active ul li:nth-child(even) {margin: -8% 0 -8% auto;}
  #step .wrap .active ul li div {padding: 10vw 6vw;}
  #step .wrap .active ul li div h4 {font-size: 20px;}
}
@media screen and (max-width:768px) {
  #step .wrap .active ul li {width: 100%;}
  #step .wrap .active ul li:nth-child(even) {margin: 0 auto;}
  #step .wrap .active ul li div {background: url(../img/recruit/cloud5.svg) no-repeat center /contain; padding: 6vw 7vw 12vw;}
  #step .wrap .active ul li div h4 {font-size: 18px;}
  #step .wrap h3 {font-size: 24px; margin-bottom: 26px;}
  #step .wrap .career ul li h4 {font-size: 24px;}
  #step .wrap .career ul li h4 span {font-size: 22px; margin-left: 30px;}
}
@media screen and (max-width:590px) {
  #step .wrap .active ul li,
  #step .wrap .active ul li:nth-child(1),
  #step .wrap .active ul li:nth-child(even) {margin-bottom: 25px;}
  #step .wrap .active ul li div {background-size: cover; padding: 50px 10px;}
  #step .wrap .career ul li h4 {font-size: 20px;}
  #step .wrap .career ul li h4 span {font-size: 20px; margin-left: 20px;}
}
/* single */
/* basic */
#basic .wrap {margin: 100px auto 0; max-width: 1320px; padding: 0 20px;}
#basic .wrap .content {display: flex;}
#basic .wrap .content .img {width: 50%; padding: 0 40px 0 0;}
#basic .wrap .content .img img {width: 100%; border-radius: 20px;}
#basic .wrap .content .text {width: 50%; padding: 0 0 0 40px;}
#basic .wrap .content .text h3 {font-size: 24px; border-bottom: 1px solid #858585; position: relative; margin-bottom: 2rem;}
#basic .wrap .content .text h3::after {position: absolute; right: 0; top: 50%; transform: translate(0,-50%); color: #858585;}
#basic .wrap .content .text .sales span {color: #EA4D07;}
#basic .wrap .content .text .sales::after {content: "Car Life Adviser";}
#basic .wrap .content .text .mechanic span {color: #8B0B84;}
#basic .wrap .content .text .mechanic::after {content: "Service Mechanic";}
#basic .wrap .content .text .catch {font-size: 22px; font-weight: bold; margin-bottom: 2rem;}
#basic .wrap .content .text table {border-collapse: collapse; width: 100%;}
#basic .wrap .content .text table tbody tr th {width: 150px; border-bottom: 1px solid #858585; text-align: left; line-height: 2.75;}
#basic .wrap .content .text table tbody tr td {width: calc(100% - 150px); border-bottom: 1px solid #858585;}
@media screen and (max-width:1000px) {
  #basic .wrap .content {display: block;}
  #basic .wrap .content .img {width: 100%; padding: 0; max-width: 600px; margin: 0 auto;}
  #basic .wrap .content .text {width: 100%; padding: 0; margin-top: 50px;}
}
@media screen and (max-width:768px) {
  #basic .wrap .content .text h3 {font-size: 20px;}
  #basic .wrap .content .text .catch {font-size: 18px;}
}
/* qanda */
#qanda .wrap {margin: 100px auto; max-width: 790px; padding: 0 20px;}
#qanda .wrap .content {margin: 100px auto 150px;}
#qanda .wrap .content .ttl {text-align: center;}
#qanda .wrap .content .ttl h3 {font-size: 22px; line-height: 2.75; border-bottom: 1px solid #EA4D07; margin-bottom: 50px; display: inline-block;}
#qanda .wrap .content p {margin-bottom: 100px;}
@media screen and (max-width:768px) {
  #qanda .wrap .content .ttl h3 {font-size: 18px;}
}
/* images */
#images .wrap .swiper .swiper-wrapper {transition-timing-function: linear; list-style: none;}
#images .wrap .swiper .swiper-wrapper .swiper-slide .item img {display: block; width: 100%; border-radius: 20px;}
#images .wrap .swiper .swiper-wrapper .swiper-slide .item p {font-size: 14px;}
/* jobtype */
#jobtype .wrap.single {margin: 100px auto 0;}
/* application */
/* guidelines */
#guidelines {background-color: #BFE3E9;}
#guidelines .wrap {margin: 100px auto 0; max-width: 990px; padding: 100px 20px;}
#guidelines .wrap .content h3 {margin: 100px auto 0; font-size: 22px;}
#guidelines .wrap .content table {border-collapse: collapse; width: 100%; margin: 20px auto 0;}
#guidelines .wrap .content table tbody tr th {width: 30%; border: 1px solid #707070; background-color: #fff; text-align: left; padding: 10px 20px;}
#guidelines .wrap .content table tbody tr td {width: 70%; border: 1px solid #707070; background-color: #fff; padding: 10px 20px;}
#guidelines .wrap .content .link {text-align: center; margin: 100px auto 0;}
#guidelines .wrap .content .link a {position:relative; min-width: 300px; text-decoration: none; background: #264a9e; border-radius: 999px; color: #fff; font-weight: bold; padding: 0 30px 0 50px; line-height: 3.5; display: inline-block; letter-spacing: 2px; transition: .2s; box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45);}
#guidelines .wrap .content .link a::before{position:absolute; content:""; background: #ffffff; height: calc(15px / 2 * tan(60deg)); width: 10px; clip-path: polygon(0 0, 100% 50%, 0 100%); top:50%; left:30px; transform: translate(0,-40%);}
#guidelines .wrap .content .link a:hover {box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.45); transform: translateY(2px); background-color: #1f3d77;}
@media screen and (max-width:768px) {
  #guidelines .wrap .content h3 {font-size: 18px;}
}
@media screen and (max-width:590px) {
  #guidelines .wrap .content table tbody tr {display: block;}
  #guidelines .wrap .content table tbody tr th,
  #guidelines .wrap .content table tbody tr td {display: block; width: 100%; border-bottom: none;}
  #guidelines .wrap .content table tbody tr:last-child td {border-bottom: 1px solid #707070;}
}
/* form */
#form .wrap {padding: 100px 0 0;}
#form .wrap .content {max-width: 1320px; padding: 0 20px; margin: 0 auto 50px;}
#form .wrap .content .form .formtable {margin: 0 auto 50px;}
#form .wrap .content .form .formtable table {width: 100%;}
#form .wrap .content .form .formtable table tr th {width: 300px; text-align: right; font-weight: normal; padding: 15px 50px 15px 0;}
#form .wrap .content .form .formtable table tr td:first-of-type {width: 115px; padding: 15px 50px 15px 0;}
#form .wrap .content .form .formtable table tr td div {display: inline-block; width: 100%; text-align: center; line-height: 1.5; background: #e60012; color: #fff;}
#form .wrap .content .form .formtable table tr td:last-child {width: calc(100% - 365px);}
#form .wrap .content .form .formtable table tr td textarea,
#form .wrap .content .form .formtable table tr td input {border: 1px solid #231815; border-radius: 5px; padding: 5px;}
#form .wrap .content .form .formtable table tr td textarea,
#form .wrap .content .form .formtable table tr td input[name="name"],
#form .wrap .content .form .formtable table tr td input[name="furigana"],
#form .wrap .content .form .formtable table tr td input[name="age"],
#form .wrap .content .form .formtable table tr td input[name="mail"] {width: 100%;}
#form .wrap .content .form .btn .config {text-align: center;}
#form .wrap .content .form .btn .config button {background: #264a9e; color: #fff; font-size: 14px; line-height: 3; border-radius: 99px; width: 100%; max-width: 250px; transition: .2s; box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45);}
#form .wrap .content .form .btn .return {text-align: center; margin-top: 10px;}
#form .wrap .content .form .btn .return button {background: #999999; color: #fff; font-size: 14px; line-height: 3; border-radius: 99px; width: 100%; max-width: 250px; transition: .2s; box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.45);}
#form .wrap .content .form .btn .config button:hover,
#form .wrap .content .form .btn .return button:hover {box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.45); transform: translateY(2px);}
#form .wrap .content .form .caution {margin: 50px auto; text-align: center;}
#form .wrap .content .form .caution h2 {font-size: 22px;}
#form .wrap .content .form .recaptcha {text-align: center; font-size: 12px;}
#form .wrap .content .form .recaptcha a {color: #231815; text-decoration: none;}
#form .wrap .content .privacy {padding: 50px 100px; margin-bottom: 50px; background-color: #DCDCDC; border-radius: 10px; text-align: center;}
#form .wrap .content .privacy>p {text-align: center;}
#form .wrap .content .policy_box {background-color: #fff; text-align: left; margin-top: 50px; border-radius: 10px;}
#form .wrap .content .policy_ttl {position: relative; font-weight: normal; padding: 10px 10px 10px 30px; cursor: pointer;}
#form .wrap .content .policy_ttl::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;}
#form .wrap .content .policy_ttl.is-active::after {transform: translate(0,-50%) rotate(180deg);}
#form .wrap .content .policy_cont {padding: 0 25px; font-size: 14px; height: 0; overflow: hidden; opacity: 0; transition-duration: 0.3s;}
#form .wrap .content .policy_cont.is-open {padding: 25px; height: auto; opacity: 1;}
#form .wrap .content .policy_cont h4 {font-size: 14px; font-weight: normal; padding-top: 1em;}
#form .wrap .content .policy_cont ul {padding-left: 1em;}
#form .wrap .content .agree {display: inline-block; padding: 15px 50px; margin: 30px auto 0; background-color: #fff; border-radius: 10px;}
@media screen and (max-width:1000px) {
    #form .wrap .content .form .formtable table tr {display: flex; flex-wrap: wrap;}
    #form .wrap .content .form .formtable table tr th {display: block; width: auto; text-align: left; padding: 10px 30px 10px 0;}
    #form .wrap .content .form .formtable table tr td:first-of-type {display: block; width: 80px; padding: 10px 0 10px 0;}
    #form .wrap .content .form .formtable table tr td div {display: inline-block; width: 100%; text-align: center; line-height: 1.5; background: #e60012; color: #fff;}
    #form .wrap .content .form .formtable table tr td:last-child {display: block; width: 100%;}
    #form .wrap .content .privacy {padding: 50px 3%;}
}