@charset "UTF-8";
header {
  z-index: 2;
}

.recruit-header {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.entry-btn {
  position: relative;
  display: block;
  padding: 5px 30px 7px;
  color: #223160;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.2rem;
  border: solid 2.2px #223160;
  overflow: hidden;
  transition: 0.4s;
  z-index: 1;
  background: transparent;
}
.entry-btn:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: #223160;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.4s;
}
.entry-btn:hover {
  color: #fff;
}
.entry-btn:hover:before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

/*
button span {
  position: relative;
  z-index: 1;
  transition: .3s;
}
*/
/* 疑似要素 */
button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: 0.3s;
}

/* 疑似要素(hover) */
button:hover:before {
  transform: translate3d(0, 0, 0);
}

/*======================================
中途採用サイト
======================================*/
#recruit-site p {
  line-height: 1.8;
}
#recruit-site h1 {
  font-size: 35px;
}
#recruit-site .recruit h3 {
  color: #223160;
  margin-bottom: 15px;
}
#recruit-site .recruit h2 {
  font-weight: 400;
  margin-bottom: 10px;
}
#recruit-site .recruit .lead {
  text-align: left;
}
#recruit-site .pc-container {
  margin: 100px auto 120px;
}
#recruit-site .sp-container {
  display: none;
  margin: 100px auto 120px;
}
#recruit-site .recruit-menu {
  margin: 0 auto 30px;
  display: flex;
  gap: 2%;
  justify-content: center;
}
#recruit-site .recruit-menu li {
  width: 20%;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background-color: #223160;
  display: flex;
  align-items: center;
  justify-content: center;
}
#recruit-site .recruit-menu li .anchor_arrow {
  font-size: 15px;
  text-align: center;
  display: block;
  padding: 15px 0 30px;
  color: #fff;
  font-weight: 400;
  position: relative;
}
#recruit-site .recruit-menu li .anchor_arrow::after {
  content: "";
  border: 0;
  border-top: solid 2px #8b9dd4;
  border-right: solid 2px #8b9dd4;
  display: inline-block;
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 15px;
  left: calc(50% - 4px);
  transform: rotate(135deg);
}
#recruit-site .recruit-cm {
  margin-top: 100px;
}
#recruit-site .recruit-cm .cm-inner {
  width: 900px;
  margin: 110px auto 0;
}
#recruit-site .recruit-cm .cm-inner .cm-cap {
  text-align: right;
}
#recruit-site .recruit-cm .cm-inner .re-blue {
  font-size: 20px;
  font-weight: bold;
  color: #223160;
  line-height: 1.8;
  margin: 20px auto 0;
}
#recruit-site .recruitsite-content3 {
  padding: 0;
  width: 95%;
  margin: 0 auto;
}
#recruit-site .recruitsite-content3 .re-inner {
  margin: 30px 0 80px auto;
  width: 67.5%;
}
#recruit-site #sec1 {
  background-color: #F8F8F8;
}
#recruit-site #sec1 .re-inner {
  padding: 200px auto;
}
#recruit-site #works .inner .works-inner {
  padding: 0 60px;
}
#recruit-site #works .inner .works-inner .works-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
#recruit-site #works .inner .works-box {
  padding: 20px;
  position: relative;
  width: calc(33.3333333333% - 30px);
  color: #223160;
  border: solid #223160 1px;
  box-sizing: border-box;
}
#recruit-site #works .inner .works-box:hover {
  color: #fff;
  border: solid #ffffff 1px;
  background-color: #223160;
}
#recruit-site #works .inner .works-box .works-title {
  font-size: 19px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 0;
}
#recruit-site #works .inner .works-box .works-sub {
  display: none;
  top: 97px;
  left: 0;
  position: absolute;
  color: #fff;
  background-color: #223160;
  border: solid #223160 1px;
  z-index: 100;
  padding: 0 20px 20px;
  width: 100%;
}
#recruit-site #works .inner .works-box2 {
  margin-top: 45px;
  position: relative;
  width: 100%;
}
#recruit-site #works .inner .works-box2 .works-sub2 {
  top: 68px;
}
#recruit-site #identity .inner .identity-box {
  margin-bottom: 60px;
}
#recruit-site #identity .inner .identity-box .identity-wrap p {
  cursor: pointer;
}
#recruit-site #identity .inner .identity-box .identity-wrap.active .identity-more {
  display: none;
}
#recruit-site #identity .inner .identity-box .identity-more {
  color: #223160;
}
#recruit-site #identity .inner .identity-box .identity-toggle {
  display: none;
}
#recruit-site #identity .identity-box2 {
  margin-top: 60px;
  width: 50%;
  margin: 60px auto 0;
}
#recruit-site #identity .identity-box2 img {
  width: 100%;
}
#recruit-site #identity .identity-box2 .small-font {
  font-size: 12px;
  margin-bottom: 20px;
  text-align: right;
}
#recruit-site #ces .inner .ces-wrap {
  margin: 50px auto;
}
#recruit-site #ces .inner .ces-wrap .ces-box h3 {
  text-align: center;
  margin-bottom: 8px;
}
#recruit-site #ces .inner .ces-wrap .ces-box p {
  text-align: center;
  margin-bottom: 30px;
}
#recruit-site #ces .inner .ces-wrap2 {
  display: flex;
  justify-content: center;
  gap: 50px;
}
#recruit-site #ces .inner .ces-wrap2 .ces-box {
  padding: 20px;
  background-color: rgba(202, 214, 251, 0.4823529412);
}
#recruit-site #ces .inner .ces-wrap2 .ces-box h3 {
  text-align: center;
}
#recruit-site #ces .inner .ces-wrap2 .ces-box p {
  line-height: 2.1;
}
#recruit-site #ces .inner .ces-wrap2 .ces-box .ces-bold {
  font-weight: bold;
  margin-right: 15px;
}
#recruit-site #ces .inner .ces-wrap2 .ces-box .ces-small {
  font-size: 0.8rem;
}
#recruit-site #system .inner {
  width: 100%;
}
#recruit-site #system .inner .system-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 70px 6.5%;
}
#recruit-site #system .inner .system-wrap .system-box {
  width: 29%;
  align-items: stretch;
}
#recruit-site #system .inner .system-wrap .system-box h3 {
  margin-bottom: 5px;
  text-align: center;
}
#recruit-site #system .inner .system-wrap .system-box img {
  width: 100px;
  display: block;
  margin: 25px auto;
}
#recruit-site #system .inner .system-wrap .system-box ul li {
  text-indent: -1rem;
  padding-left: 1rem;
  margin-bottom: 10px;
}
#recruit-site #system .inner .system-wrap .system-box .small-img {
  width: 90px;
  margin-bottom: 35px;
}
#recruit-site #system .inner .system-wrap .system-box .small-font {
  font-size: 0.85rem;
}
#recruit-site #system .inner .system-wrap .system-box .ces-br {
  display: block;
  margin-bottom: 18px;
}
#recruit-site #recruit-site .recruitsite-content2 {
  padding: 60px 0;
}
#recruit-site #sec2 {
  margin-bottom: 100px;
  max-height: 350px;
  overflow: hidden;
}
#recruit-site #fas .inner h3 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 25px;
}
#recruit-site #fas .inner .fas-wrap {
  display: flex;
  gap: 50px;
  margin-top: 60px;
  justify-content: center;
}
#recruit-site #fas .inner .fas-wrap .fas-box {
  padding: 30px;
  background-color: #E6ECFD;
  position: relative;
  z-index: 1;
  width: calc((100% - 50px) / 2);
  margin-bottom: 60px;
  height: 190px;
}
#recruit-site #fas .inner .fas-wrap .fas-box h3 {
  margin-bottom: 15px;
}
#recruit-site #fas .inner .fas-wrap .fas-box .sub-head {
  font-weight: bold;
  position: relative;
  text-align: center;
}
#recruit-site #fas .inner .fas-wrap .fas-box .detail {
  font-size: 14px;
  position: absolute;
  left: 0;
  top: 190px;
  width: 100%;
  height: auto;
  padding: 30px;
  color: #ffffff;
  background-color: #384878;
  display: none;
  color: #333;
  background-color: #E6ECFD;
}
#recruit-site #fas .inner .fas-wrap .pc-fas-box .detail::before {
  content: "";
  width: 110px;
  height: 1px;
  display: inline-block;
  background-color: #444;
  position: absolute;
  top: 0;
  left: calc(50% - 55px);
}
#recruit-site #fas .inner .sp-fas-wrap {
  display: none;
}
#recruit-site #fas .inner .fas-img {
  display: flex;
  gap: 50px;
  margin-top: 60px;
}
#recruit-site #fas .inner .fas-img img {
  display: block;
  width: 50%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto;
}
#recruit-site .event-wrapper {
  border: 30px solid #E6ECFD;
  padding: 60px;
}
#recruit-site .event-wrapper .recruit-title_h4 {
  font-size: 20px;
  text-align: center;
}
#recruit-site .event-wrapper .recruit-title_h4 span {
  font-weight: bold;
}
#recruit-site .event-wrapper .recruit-title_h4 .br-960 {
  display: none;
}
#recruit-site .event-wrapper .recruit-title_h4 .br-800 {
  display: none;
}
#recruit-site .event-wrapper .recruit-title_h4 .br-480 {
  display: none;
}
#recruit-site .event-wrapper .event-detail h5 {
  font-size: 1rem;
  margin-top: 25px;
}
#recruit-site .event-wrapper .event-detail span {
  font-size: 14px;
}
#recruit-site .event-wrapper .event-detail ul li {
  font-size: 1rem;
  text-indent: -1rem;
  padding-left: 1rem;
}
#recruit-site .event-wrapper .button {
  margin-top: 60px;
}
#recruit-site .recruit-content-wrapper .newjob-wrapper {
  display: flex;
  gap: 50px;
}
#recruit-site .recruit-content-wrapper .newjob-wrapper div {
  max-width: 234px;
}
#recruit-site .recruit-content-wrapper .newjob-wrapper div img {
  margin: 15px 0 40px;
}

@media screen and (max-width: 1500px) {
  #recruit-site .recruit-menu li .anchor_arrow {
    padding: 12px 0 25px;
  }
  #recruit-site .recruit-menu li .anchor_arrow:after {
    bottom: 4px;
    width: 7px;
    height: 7px;
  }
}
@media screen and (max-width: 1000px) {
  #recruit-site .recruit-cm .cm-inner {
    width: 100%;
  }
  #recruit-site #system .inner .system-wrap {
    gap: 50px 10%;
  }
  #recruit-site #system .inner .system-wrap .system-box {
    width: 45%;
  }
  #recruit-site #works .inner .works-inner {
    padding: 0;
  }
  #recruit-site #works .inner .works-box {
    width: calc(33.3333333333% - 13px);
  }
  #recruit-site #works .inner .works-box .works-sub {
    top: 88px;
  }
  #recruit-site #works .inner .works-box2 {
    width: 100%;
    margin-top: 15px;
  }
  #recruit-site #works .inner .works-box2 .works-sub2 {
    top: 64px;
  }
  #recruit-site #works .inner .works-box .works-title {
    font-size: 16px;
  }
  #recruit-site .pc-container {
    display: none;
  }
  #recruit-site .sp-container {
    display: block;
  }
}
@media screen and (max-width: 960px) {
  #recruit-site .event-wrapper .recruit-title_h4 .br-960 {
    display: block;
  }
  #recruit-site #fas .inner .sp-fas-wrap {
    display: block;
  }
  #recruit-site #fas .inner .sp-fas-wrap .fas-box {
    height: auto;
  }
  #recruit-site #fas .inner .sp-fas-wrap .fas-box .detail {
    position: static;
    box-sizing: content-box;
    margin-left: -30px;
    padding: 30px 30px 0;
    color: #333;
    background-color: #E6ECFD;
  }
  #recruit-site #fas .inner .pc-fas-wrap {
    display: none;
  }
  #recruit-site #fas .inner .fas-wrap {
    flex-direction: column;
    gap: 30px;
  }
  #recruit-site #fas .inner .fas-wrap .fas-box {
    width: 100%;
    position: relative;
  }
  #recruit-site #fas .inner .fas-wrap .fas-box .fas-more {
    display: block;
    position: absolute;
    bottom: 10px;
    right: 17px;
  }
  #recruit-site #fas .inner .fas-wrap .fas-box .fas-more:hover {
    cursor: pointer;
  }
  #recruit-site #fas .inner .fas-wrap .fas-box.active .sub-head::after {
    content: "";
    width: 110px;
    height: 1px;
    display: inline-block;
    background-color: #444;
    position: absolute;
    bottom: -15px;
    left: calc(50% - 55px);
  }
  #recruit-site #fas .inner .fas-wrap .fas-box.active .fas-more {
    display: none;
  }
  #recruit-site #fas .inner .fas-img img {
    width: 100%;
  }
  #recruit-site #identity .identity-box2 {
    width: 100%;
  }
}
@media screen and (max-width: 800px) {
  #recruit-site .recruit-menu {
    row-gap: 30px;
  }
  #recruit-site .recruit-menu li {
    width: 100px;
    height: 100px;
  }
  #recruit-site .recruit-menu li .anchor_arrow {
    padding: 15px 0 16px;
    font-size: 10px;
  }
  #recruit-site .recruit-menu li .anchor_arrow:after {
    bottom: 0px;
  }
  #recruit-site .event-wrapper .recruit-title_h4 .br-800 {
    display: block;
  }
  #recruit-site .recruit-content-wrapper .newjob-wrapper {
    flex-direction: column;
    gap: 0px;
  }
  #recruit-site #works .inner .works-box .works-sub p {
    font-size: 14px;
  }
  #recruit-site #system .inner .system-wrap .system-box {
    width: 100%;
  }
  #recruit-site #system .inner .system-wrap .system-box .small-img {
    margin-bottom: 25px;
  }
}
@media screen and (max-width: 580px) {
  #recruit-site .recruit-content-wrapper .newjob-wrapper {
    flex-direction: column;
    gap: 0px;
  }
}
@media screen and (max-width: 580px) and (min-width: 481px) {
  .works_sp {
    display: none;
  }
  .recruit-sticky {
    display: none;
  }
}
@media screen and (max-width: 580px) and (max-width: 480px) {
  #recruit-site {
    /*　SPver 募集中の職種の追従　*/
    /*　上に上がる動き　*/
    /*　下に下がる動き　*/
  }
  #recruit-site #sp-rebanner {
    /*リンクを右下に固定*/
    position: fixed;
    right: 10px;
    z-index: 0;
    /*はじめは非表示*/
    opacity: 0;
    transform: translateY(100px);
  }
  #recruit-site #sp-rebanner a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #223160;
    border-radius: 50px;
    width: 80px;
    height: 80px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 0.8rem;
    line-height: 1.2;
    transition: all 0.3s;
    box-shadow: 0 0 8px gray;
  }
  #recruit-site #sp-rebanner a:hover {
    background: #777;
  }
  #recruit-site #sp-rebanner.UpMove {
    -webkit-animation: UpAnime 0.5s forwards;
            animation: UpAnime 0.5s forwards;
  }
  @-webkit-keyframes UpAnime {
    from {
      opacity: 0;
      transform: translateY(100px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes UpAnime {
    from {
      opacity: 0;
      transform: translateY(100px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  #recruit-site #sp-rebanner.DownMove {
    -webkit-animation: DownAnime 0.5s forwards;
            animation: DownAnime 0.5s forwards;
  }
  @-webkit-keyframes DownAnime {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 1;
      transform: translateY(100px);
    }
  }
  @keyframes DownAnime {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 1;
      transform: translateY(100px);
    }
  }
  #recruit-site #sp-rebanner.None {
    display: none;
  }
  #recruit-site h1 {
    font-size: 20px;
  }
  #recruit-site .recruit h3 {
    font-size: 16px;
  }
  #recruit-site .recruit p {
    line-height: 1.6;
    font-size: 14px;
  }
  #recruit-site .recruit .cm-inner .cm-cap {
    font-size: 10px;
  }
  #recruit-site .recruit .cm-inner div {
    margin-top: 30px;
  }
  #recruit-site .recruit .cm-inner .re-blue {
    font-size: 16px;
    line-height: 1.6;
  }
  #recruit-site .recruit .works_sp .slider {
    margin: 0 auto;
    width: auto;
  }
  #recruit-site .recruit .works_sp .slider .works-box_sp {
    width: 100%;
    height: 250px;
    padding: 15px;
    border: solid #223160 1px;
    margin-top: 20px;
  }
  #recruit-site .recruit .works_sp .slider .works-box_sp h3 {
    font-size: 16px;
    text-align: center;
    margin-bottom: 7px;
  }
  #recruit-site .recruit .works_sp .slider .works-box_sp p {
    font-size: 14px;
    line-height: 1.5;
  }
  #recruit-site .recruit .works_sp .slider .works-box_sp2 {
    padding: 58px 15px;
  }
  #recruit-site .recruit .works_sp .slider .works-box_sp2 h3 {
    margin-bottom: 20px;
  }
  #recruit-site .recruit .event-wrapper {
    border: 15px solid #E6ECFD;
    padding: 6%;
  }
  #recruit-site .recruit .event-wrapper .recruit-title_h4 {
    font-size: 14px;
  }
  #recruit-site .recruit .event-wrapper .recruit-title_h4 span {
    font-size: 20px;
    display: block;
    margin-bottom: -15px;
  }
  #recruit-site .recruit .event-wrapper .recruit-title_h4 .br-480 {
    display: block;
  }
  #recruit-site .recruit .event-wrapper .event-detail h5 {
    font-size: 14px;
    margin-top: 3.41796875vw;
  }
  #recruit-site .recruit .event-wrapper .event-detail span {
    font-size: 12px;
  }
  #recruit-site .recruit .event-wrapper .event-detail ul li {
    font-size: 14px;
    text-indent: -14px;
    padding-left: 14px;
  }
  #recruit-site .recruit .event-wrapper .button {
    margin-top: 4.8828125vw;
    width: 80%;
    max-width: 230px;
  }
  #recruit-site .recruit .recruit-content-wrapper .job-title p {
    font-size: 16px;
  }
  #recruit-site .recruit .recruit-content-wrapper .job-toggle .recruit-job tbody td {
    font-size: 14px;
  }
  #recruit-site .recruit .newjob-wrapper {
    margin-bottom: 0;
  }
  #recruit-site .recruit .newjob-wrapper .newjob-title {
    font-size: 16px;
  }
  #recruit-site .recruit .newjob-wrapper img {
    width: 100%;
  }
  #recruit-site #ces .inner .ces-wrap2 {
    flex-direction: column;
    gap: 30px;
  }
  #recruit-site #fas .inner h3 {
    text-align: center;
    font-size: 16px;
    margin-bottom: 25px;
  }
  #recruit-site #fas .inner .fas-wrap .fas-box {
    padding: 30px 15px;
  }
  #recruit-site #fas .inner .fas-wrap .fas-box .detail {
    margin-left: -15px;
    padding: 30px 15px 0;
  }
  #recruit-site #identity .identity-box2 .small-font {
    font-size: 10px;
  }
  #recruit-site .works_pc {
    display: none;
  }
}/*# sourceMappingURL=recruit.css.map */


/***** 2025/09/01追記 *****/
/***** コンテンツ *****/
.container {
  margin-bottom: 10vw;
}

.container h2 {
  font-weight: 400;
}

.container .inner {
  padding: 4em;
}

article .button {
  border: 1px solid #223360;
  border-radius: 30px;
  display: inline-block;
  line-height: 1;
  margin: 1.5em auto 0;
  padding: 1em 2em 1.2em !important;
  width: auto;
}

/*** メインイメージ ***/
#top .top-box {
  background: rgba(255,255,255,.9);
  top: 25vh;
}

#top .top-box h1 {
  color: #444;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.8;
  margin: 0;
  word-break: keep-all;
}

#top .top-box h1 + span {
  color: #223360;
  display: block;
  font-size: 14px;
  line-height: 1.8;
  margin-top: 2em;
}

/*** ドット付き ***/
p.dot {
  padding-left: 1em;
  text-indent: -1em;
}

p.dot::before {
  content: "・";
}

/*** ※付き ***/
p.kome::before {
  content: "※";
}

/*** 募集中の職種 ***/
/* タブ */
.tab-area input[name="job"] {
  display: none;
}

.tab-area .tabs {
  display: flex;
  justify-content: space-between;
}

.tab-area .tabs label {
  background: #ddd;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
  color: #999;
  font-size: 22px;
  padding: .8em 0;
  text-align: center;
  width: 49%;
}

/* タブ内コンテンツ */
.tab-area div[class^="content-"] {
  border: 2px solid #223360;
  border-radius: 0 0 10px 10px;
  display: none;
  padding: 2.5em 2em 3em;
}

.tab-area .title {
  background: #333;
  border-radius: 4px;
  color: #fff;
  font-size: 22px;
  padding: .25em 1em .4em;
}

.tab-area .tabs label:hover,
.tab-area #job1:checked ~ .tabs label[for="job1"],
.tab-area #job2:checked ~ .tabs label[for="job2"] {
  background: #223360;
  color: #fff;
}

.tab-area #job1:checked ~ .content-job1 {
  display: block;
}

.tab-area #job2:checked ~ .content-job2 {
  display: block;
}

.tab-area article {
  border: 2px solid #ddd;
  border-radius: 10px;
  margin-top: 4em;
  padding: 1.5em 2em 2em;
}

.tab-area article:first-of-type {
  margin-top: 2.5em;
}

.tab-area article h3 {
  border-bottom: 1px solid #aaa;
  font-size: 20px;
  padding-bottom: 1em;
}

.tab-area article h3 + div {
  line-height: 2;
  margin-top: 1.5em;
  text-align: center;
}

.tab-area article table {
  border-collapse: collapse;
  margin-top: 2em;
  width: 100%;
}

.tab-area article th {
  background: #eee;
  font-weight: normal;
  text-align: left;
  vertical-align: top;
  width: 11em;
}

.tab-area article th,
.tab-area article td {
  border: 1px solid #ccc;
  font-size: 15px;
  line-height: 1.8;
  padding: .8em 1em;
}

.tab-area article td p {
  font-size: 15px;
}

.tab-area article td .box {
  border-top: 1px dashed #666;
  margin-top: 1em;
  padding-top: .5em;
}

#story,
#schedule {
  margin-top: 5em;
}

#story .inner,
#schedule .inner {
  margin-top: 2em;
  padding: 0;
}

/*** 若手ストーリー ***/
#story h3 {
  color: #223360;
  line-height: 2;
}

#story h3 span {
  background:linear-gradient(transparent 60%, #eee 40%);
  font-size: 30px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 0 .2em;
}

#story .faq > section {
  border-top: 4px dotted #ccc;
  display: flex;
  justify-content: space-between;
  margin-top: 3em;
  padding-top: 3em;
}

#story .faq .text {
  width: 50%;
}

#story .faq picture {
  width: 45%;
}

#story .faq h4 {
  font-size: 22px !important;
}

#story .faq h4 + p {
  margin-top: 1.5em;
}

#story .faq p {
  letter-spacing: .05em;
  line-height: 2.2;
}

#story .faq p + p {
  margin-top: 1em;
}

#story .faq img {
  border-radius: 10px;
}

/*** キャリアパス事例 ***/
#career article {
  border: 2px solid #999;
  border-radius: 10px;
  padding: 2em;
}

#career article + article {
  margin-top: 3em;
}

#career h3 {
  font-size: 20px;
  line-height: 1.8;
}

#career dl {
  border-bottom: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1.5em 0 0;
}

#career dt,
#career dd {
  font-size: 15px;
  border-top: 1px solid #ccc;
  line-height: 1.8;
}

#career dt {
  background: #eee;
  font-weight: 600;
  padding: 1.2em 0 0 1em;
  width: 10em;
}

#career dd {
  width: calc(100% - 10em);
}

#career dd p + p {
  border-top: 1px dashed #999;
}

#career dd p {
  display: flex;
  padding: 1.2em 1em 1.2em 1em;
}

#career dd p span:first-child {
 word-break: keep-all;
}

#career dd p span:last-child {
  padding-left: 1.5em;
}

/*** 仕事内容（１日の流れ） ***/
#schedule h3 {
  font-size: 22px;
}

#schedule dl {
  display: flex;
  flex-wrap: wrap;
  margin: 2em auto 0;
  position: relative;
}

#schedule dl::after {
  border-left: 4px solid #eee;
  content: "";
  display: block;
  left: calc((4.5em - 2px) / 2);
  height: 100%;
  position: absolute;
  top: 0;
}

#schedule dt,
#schedule dd {
  margin-top: 1.5em;
}

#schedule dl dt:first-of-type,
#schedule dl dd:first-of-type {
  margin-top: 0;
}

#schedule dt {
  width: 4.5em;
}

#schedule dt span {
  align-items: center;
  aspect-ratio: 1/1;
  background: #eee;
  border-radius: 50px;
  display: flex;
  font-size: 14px;
  justify-content: center;
  position: relative;
  width: 100%;
  z-index: 1;
}

#schedule dd {
  align-items: center;
  background: #eee;
  border-radius: 10px;
  display: flex;
  margin-left: 1em;
  padding: .5em 1.5em;
  position: relative;
  width: calc(100% - 5.5em);
}

#schedule dd::before {
  color: #eee;
  content: "▼";
  display: block;
  left: 0;
  position: absolute;
  top: calc(50% - 15px);
  left: -11px;
  transform: rotate(90deg);
}

#schedule dd p {
  font-size: 15px;
}

#schedule dt:first-of-type span,
#schedule dd:first-of-type {
  background: #ddd;
}

#schedule dd:first-of-type::before {
  color: #ddd;
}

#schedule dt:last-of-type span,
#schedule dd:last-of-type {
  background: #ddd;
}

#schedule dt:last-of-type {
  background: #fff;
  z-index: 1;
}

#schedule dd:last-of-type::before {
  color: #ddd;
}

/*** 数字で見るＥストアー ***/
.graph {
  display: flex;
  flex-wrap: wrap;
}

.graph > * {
  border: 3px solid #ddd;
  border-radius: 10px;
  margin: 0 0 0 2em;
  padding: 0 1.5em 1.5em;
  position: relative;
  text-align: center;
  width: calc((100% - 4em) / 3);
}

.graph > *:nth-child(3n + 1) {
  margin-left: 0;
}

.graph > *:nth-child(n + 4) {
  margin-top: 2em;
}

.graph .title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .1em;
  padding: 1em 0;
  text-align: center;
}

.graph .age > div {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.graph .age {
  background: url(../img/recruit_graph05.png) no-repeat center center;
  background-size: 70%;
}

.graph .age div p {
  color: #223160;
  font-size: 60px;
  font-weight: 600;
}

.graph .age div span {
  font-size: 24px;
  margin-left: .5em;
  vertical-align: .2em;
}

.graph .work {
  background: url(../img/recruit_graph06.png) no-repeat center center;
  background-size: 55%;
  position: relative;
}

.graph .work div p:first-child {
  align-items: center;
  color: #223160;
  display: flex;
  font-size: 48px;
  font-weight: 600;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.graph .work div .kome {
  bottom: 1.3em;
  font-size: 13px;
  left: 0;
  line-height: 1.6;
  padding: 0 1em 0 1.8em;
  position: absolute;
  text-indent: -1em;
  width: 100%;
}

/*** 選考フロー＆ＦＡＱ ***/
#flow h3 {
  border-bottom: 1px solid #999;
  font-size: 22px;
  font-weight: 500;
  padding-bottom: 1.5em;
  text-align: center;
}

#flow h3 + * {
  margin-top: 2em;
}

#flow .flow p {
  line-height: 2;
}

#flow .flow dl {
  display: flex;
  flex-wrap: wrap;
}

#flow .flow dt,
#flow .flow dd {
  margin-top: 3em;
  padding: 1em;
}

#flow .flow dt {
  background: #223160;
  border-radius: 8px 0 0 8px;
  color: #fff;
  text-align: center;
  width: 8em;
}

#flow .flow dd {
  background: #efefef;
  border-radius: 0 8px 8px 0;
  color: #333;
  position: relative;
  text-align: center;
  text-indent: -8em;
  width: calc(100% - 8em);
}

#flow .flow dd::before {
  background: #ddd;
  clip-path: polygon(0 75%, 50% 75%, 50% 0, 50% 0, 50% 75%, 100% 75%, 50% 100%);
  content: "";
  display: block;
  height: 75px;
  left: calc(50% - 6.5em);
  position: absolute;
  bottom: -35px;
  width: 73.5px;
}

#flow .flow dd:last-of-type::before {
  content: none;
}

#flow .flow .kome {
  font-size: 14px;
  margin-top: 1em;
  text-align: center;
}

#flow .faq {
  margin-top: 5em;
}

#flow .faq > section + section {
  margin-top: 4em;
}

#flow .faq h4 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .1em;
  padding-bottom: 2.5em;
  position: relative;
  text-align: center;
}

#flow .faq h4::after {
  background: #999;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  top: 2.2em;
  transform: translateX(-50%);
  position: absolute;
  width: 1.8em;
}

#flow .faq dl {
  border-bottom: 1px solid #ccc;
}

#flow .faq dt,
#flow .faq dd {
  line-height: 1.6;
  position: relative;
}

#flow .faq dt {
  background: #efefef;
  border-top: 1px solid #ddd;
  font-weight: 600;
  padding: 1em 1em 1em 3em;
}

#flow .faq dd {
  border-top: 1px dashed #ccc;
  padding: 1.5em 1em 2em 3em;
  line-height: 2;
}

#flow .faq dt::before {
  content: "Ｑ.";
}

#flow .faq dd::before {
  content: "Ａ.";
}

#flow .faq dt::before,
#flow .faq dd::before {
  display: block;
  left: 1em;
  position: absolute;
  top: 1em;
}

#flow .faq dd::before {
  top: 1.5em;
}

/*** 説明会 ***/
#event article {
  text-align: center;
}

#event p {
  font-size: 18px;
  line-height: 2.4;
  text-align: center;
}

#event .sp {
  display: none;
}

#event .button {
  margin: 2em auto 0;
}

@media screen and (max-width: 1100px) {
  .container .inner {
    padding: 2em;
  }

  .graph > * {
    aspect-ratio: 1/1;
    margin-left: 2em !important;
    width: calc((100% - 2em) / 2);
  }

  .graph > *:nth-child(n + 3) {
    margin-top: 2em !important;
  }

  .graph > *:nth-child(2n + 1) {
    margin-left: 0 !important;
  }
}

@media screen and (max-width: 960px) {
  p {
    text-align: initial;
  }

  .tab-area article {
    margin-top: 2em;
  }
}

@media screen and (max-width: 800px) {
  .tab-area div[class^="content-"] p {
    font-size: 15px;
  }

  .tab-area .tabs label {
    font-size: 17px;
  }

  .tab-area article h3 {
    font-size: 16px;
  }

  .tab-area article h3 + div {
    margin-top: 1em;
  }

  .tab-area article table {
    border-bottom: 1px solid #ccc;
    margin-top: 1.5em;
  }

  .tab-area article tr {
    display: flex;
    flex-direction: column;
  }

  .tab-area article th,
  .tab-area article td {
    border-bottom: none;
    font-size: 14px;
    padding: .4em .8em .5em;
    width: 100%;
  }

  .tab-area article td p {
    font-size: 14px !important;
  }

  #story h3 span {
    font-size: 20px;
  }

  #story .faq > section {
    flex-direction: column;
    margin-top: 2em;
    padding-top: 1.5em;
  }

  #story .faq .text,
  #story .faq picture {
    width: 100%;
  }

  #story .faq picture {
    margin-top: 1.5em;
  }

  #story .faq h4 {
    font-size: 16px !important;
  }

  #story .faq h4 + p {
    margin-top: 1em;
  }

  #story .faq p + p {
    margin-top: .5em;
  }

  #career h3 {
    font-size: 16px;
    line-height: 1;
  }

  #career dt {
    width: 8.5em;
  }

  #career dd {
    width: calc(100% - 8.5em);
  }

  #career dt,
  #career dd p {
    padding-top: .5em;
  }

  #career dt,
  #career dd,
  #career dd p,
  #career dd span {
    font-size: 14px;
  }

  #career dd p {
    flex-direction: column;
  }

  #career dd p span {
    padding: 0 !important;
  }

  #schedule h3 {
    font-size: 16px;
  }

  #schedule dd p {
    font-size: 14px;
  }

  .graph .title {
    font-size: 16px;
  }

  #flow h3 {
    font-size: 18px;
  }

  #flow .flow p {
    font-size: 15px;
  }

  #flow .flow dt,
  #flow .flow dd {
    font-size: 14px;
  }

  #flow .faq,
  #flow .faq > section + section {
    margin-top: 3em;
  }

  #flow .faq h4 {
    font-size: 15px;
  }

  #flow .faq dt,
  #flow .faq dd {
    font-size: 15px;
  }

  #event p {
    font-size: 16px;
  }
}

@media screen and (max-width: 680px) {
  #top .top-box {
    padding: 2em;
    right: calc(50% - 230px);
    width: 460px;
  }

  #top .top-box h1 {
    font-size: 26px;
  }

  .tab-area div[class^="content-"] {
    border-width: 0;
    border-top-width: 2px;
    padding: 1em 0 0;
  }

  .tab-area .title + article {
    margin-top: 1em;
  }

  #story,
  #schedule {
    margin-top: 4em;
  }

  #story .inner,
  #schedule .inner {
    margin-top: 1em;
  }

  #schedule .inner article {
    margin-top: 1em;
  }

  .graph > * {
    margin: 2em 0 0 !important;
    width: 100%;
  }

  .graph > *:first-child {
    margin-top: 0 !important;
  }
}

@media screen and (max-width: 480px) {
  .container {
    margin-top: 2em !important;
  }

  #top .top-box {
    padding: 1.5em;
    right: calc(50% - 50%);
    width: 100%;
  }

  #top .top-box h1 {
    font-size: 20px;
  }

  #top .top-box h1 + span {
    font-size: 13px;
  }

  #top .top-box h1 + span br {
    display: none;
  }

  .container .inner {
    padding: 1em;
  }

  .tab-area .tabs label {
    font-size: 15px;
    padding: .6em 0;
  }

  .tab-area .title {
    font-size: 16px !important;
    text-align: center;
  }

    .tab-area article {
    border: none;
    border-radius: 0;
    padding: 0;
  }

  .tab-area article + article {
    margin-top: 3em;
  }

  .tab-area div[class^="content-"] p {
    font-size: 14px;
  }

  article .button {
    padding: ;
  }

  #story h3 span {
    font-size: 18px;
  }

  #story .faq .text p {
    font-size: 14px;
  }

  #career article {
    border: none;
    padding: 0;
  }

  #career h3 {
    font-size: 15px;
  }

  #career dt,
  #career dd,
  #career dd p {
    font-size: 13px;
  }

  #career dt {
    width: 8em;
  }

  #career dd {
    width: calc(100% - 8em);
  }

  #flow .faq dt {
    font-size: 14px;
  }

  #flow .flow dd {
    font-size: 14px;
    text-align: left;
    text-indent: 1em;
  }

  #flow .flow dd::before {
    bottom: -30px;
  }

  #event p {
    font-size: 15px;
  }

  #event .sp {
    display: block;
  }
}