@charset "UTF-8";
/* ==========================================================
 section
========================================================== */
/* sec-careerpath-01
---------------------------------------------------------- */
/* ==========================================================
 box
========================================================== */
/* box-careerpath-01
---------------------------------------------------------- */
.box-careerpath-01 .box-accordion-head {
  cursor: pointer;
}

.box-careerpath-01 .box-accordion-head .box-image {
  width: 100%;
  position: relative;
}

@media screen and (min-width: 769px) {
  .box-careerpath-01 .box-accordion-head .box-image {
    max-width: 50%;
  }
}

.box-careerpath-01 .box-accordion-head .box-image img {
  width: 100%;
}

.box-careerpath-01 .box-accordion-head .box-image .img-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.box-careerpath-01 .box-accordion-head .box-detail {
  color: #003894;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 54.16%;
  max-height: 302px;
  height: 100%;
  margin: -27% 0 0 auto;
  border: 8px solid #003894;
  border-image-source: linear-gradient(135deg, #469ace, #003894 53.1%);
  border-image-slice: 8;
  -webkit-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  transition: color 0.2s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media screen and (max-width: 768px) {
  .box-careerpath-01 .box-accordion-head .box-detail {
    border: 6px solid #003894;
    border-image-source: linear-gradient(135deg, #469ace, #003894 53.1%);
    border-image-slice: 6;
    margin: -18px auto 0;
    max-width: 82.21%;
    min-width: 282px;
    min-height: 170px;
  }
}

.box-careerpath-01 .box-accordion-head .box-detail::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #003894;
  background: -webkit-linear-gradient(315deg, #469ace, #003894 53.1%);
  background: -o-linear-gradient(315deg, #469ace, #003894 53.1%);
  background: linear-gradient(135deg, #469ace, #003894 53.1%);
  opacity: 0;
  -webkit-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  content: '';
}

.box-careerpath-01 .box-accordion-head .box-detail .box-detail-in {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  padding: 14.16% 18.88%;
}

.box-careerpath-01 .box-accordion-head .box-detail .type02 {
  padding: 12% 18.88%;
}

@media screen and (max-width: 768px) {
  .box-careerpath-01 .box-accordion-head .box-detail .box-detail-in, .box-careerpath-01 .box-accordion-head .box-detail .type02 {
    padding: 34px 25px 24px;
  }
}

.box-careerpath-01 .box-accordion-head .box-detail .box-detail-in::before {
  position: absolute;
  content: '';
  right: 20px;
  bottom: 27px;
  width: 18px;
  height: 4px;
  background-color: #003894;
}

@media screen and (max-width: 768px) {
  .box-careerpath-01 .box-accordion-head .box-detail .box-detail-in::before {
    right: 10px;
    bottom: 15px;
    width: 12px;
    height: 2px;
  }
}

.box-careerpath-01 .box-accordion-head .box-detail .box-detail-in::after {
  position: absolute;
  content: '';
  right: 27px;
  bottom: 20px;
  width: 4px;
  height: 18px;
  background-color: #003894;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  -o-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

@media screen and (max-width: 768px) {
  .box-careerpath-01 .box-accordion-head .box-detail .box-detail-in::after {
    right: 15px;
    bottom: 10px;
    width: 2px;
    height: 12px;
  }
}

.box-careerpath-01 .box-accordion-head .box-detail .position {
  font-size: 18px;
  font-family: "UD Shin Go DemiBold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  /* will be removed later */
  line-height: 1.6;
  margin-bottom: 5px;
}

@media screen and (max-width: 768px) {
  .box-careerpath-01 .box-accordion-head .box-detail .position {
    font-size: 14px;
  }
}

.box-careerpath-01 .box-accordion-head .box-detail .name {
  font-size: 34px;
  font-family: "UD Shin Go DemiBold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  /* will be removed later */
}

@media screen and (max-width: 768px) {
  .box-careerpath-01 .box-accordion-head .box-detail .name {
    font-size: 20px;
  }
}

.box-careerpath-01 .box-accordion-head .box-detail .joined {
  color: #333;
}

.box-careerpath-01 .box-accordion-head.is-open .box-detail-in::after {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.box-careerpath-01 .box-accordion-detail {
  display: none;
  margin-top: 40px;
}

@media screen and (min-width: 769px) {
  .box-careerpath-01 .box-accordion-detail {
    padding: 0 95px;
  }
}

@media screen and (max-width: 768px) {
  .box-careerpath-01 .box-accordion-detail {
    margin-top: 25px;
  }
}

.box-careerpath-01 .box-accordion-detail .text-detail {
  font-size: 16px;
  line-height: 2.25;
}

@media screen and (max-width: 768px) {
  .box-careerpath-01 .box-accordion-detail .text-detail {
    line-height: 1.9;
  }
}

.box-careerpath-01 .box-accordion-detail .btn-close-accordion {
  color: #003894;
  cursor: pointer;
  border: 1px solid #003894;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  font-size: 16px;
  width: 154px;
  margin: 30px auto 0;
  padding: 7px;
  overflow: hidden;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .box-careerpath-01 .box-accordion-detail .btn-close-accordion {
    font-size: 15px;
    width: 147px;
    margin-top: 20px;
    padding: 5px;
  }
}

.box-careerpath-01 .box-accordion-detail .btn-close-accordion:hover {
  color: #fff;
  background-color: #003894;
}

@media screen and (min-width: 769px) {
  .box-careerpath-01 .box-accordion-head:hover {
    text-decoration: none;
  }
  .box-careerpath-01 .box-accordion-head:hover .img-hover {
    opacity: 1;
  }
  .box-careerpath-01 .box-accordion-head:hover .box-detail {
    color: #fff;
  }
  .box-careerpath-01 .box-accordion-head:hover .box-detail::before {
    opacity: 1;
  }
  .box-careerpath-01 .box-accordion-head:hover .box-detail::after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 16px 16px;
    border-color: transparent transparent #fff transparent;
  }
  .box-careerpath-01 .box-accordion-head:hover .box-detail .joined {
    color: #fff;
  }
  .box-careerpath-01 .box-accordion-head:hover .box-detail .box-detail-in::before, .box-careerpath-01 .box-accordion-head:hover .box-detail .box-detail-in::after {
    background-color: #fff;
  }
}

/* ==========================================================
 list
========================================================== */
/* list-careerpath-01
---------------------------------------------------------- */
.list-careerpath-01 {
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .list-careerpath-01 {
    margin-bottom: 30px;
  }
}

.list-careerpath-01 .list-careerpath-item:not(:last-child) {
  margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
  .list-careerpath-01 .list-careerpath-item:not(:last-child) {
    margin-bottom: 40px;
  }
}