@charset "UTF-8";
@media screen and (min-width: 768px) {
  main{
    margin-bottom: 5.26vw;
  }
  h1 {
    font-size: 2.45vw;
    font-weight: 500;
    text-align: left;
    padding: 6.55vw 8.39vw 7.8vw;
  }
  h1 div {
    font-size: 4.69vw;
    font-family: "Oswald", "Bebas Neue", "Bebas", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight: 200;
    padding: .25vw 0;
  }
  h3 {
    writing-mode: initial;
    width: 20vw;
    height: auto;
    margin-right: 0;
    margin-bottom: 2vw;
    font-size: 2.41vw;
    line-height: 3vw;
    font-weight: 100;
    background: url(/jp/recruitment/assets/img/aboutStaffDetail/profileArrow.svg) no-repeat right top;
    background-size: contain;
  }
  .careerPathText h2 {
    writing-mode: initial;
    width: auto;
    height: auto;
    margin: 0;
    font-size: 1.67vw;
    line-height: 1.67vw;
    padding: 1.65vw;
    order: 3;
    background: none;
  }
  .careerPathText {
    flex-direction: column;
    text-align: center;
  }
  .careerPathText>div {
    width: 31.61vw;
    margin: 0 auto 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .careerPathText p {
    text-align: left;
    font-size: 0.99vw;
    line-height: 2.08vw;
  }
  .careerPathText p:first-of-type {
    font-size: 1.65vw;
    line-height: 2.92vw;
    padding: 0 0 1vw;
    text-align: center;
  }
  #careerPathImg {
    margin: 0 0 5vw;
    padding: 0;
    border-radius: 0;
    height: auto;
    width: 100%;
  }
  #careerPathImg p {
    font-size: 1.46vw;
    line-height: 2.92vw;
    padding: 2.33vw 0 0;
  }
  #careerPathImg #yourCareer {
    font-size: 1.67vw;
    line-height: 2.92vw;
    padding: 3.5vw 0 .5vw;
  }
  #careerPathImg p#if {
    padding: 0 0 2.6vw;
    font-size: 1.09vw;
    line-height: 1.25vw;
  }
  #careerPathImg ul {
    width: 51.61vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  #careerPathImg ul li {
    height: 4.01vw;
    width: 15.63vw;
    margin: 0;
    font-size: 1.04vw;
    line-height: 1.35vw;
  }
  #careerPathImg ul li a {
    border-radius: 10px;
    padding: 0 0.99vw 0;
  }
  #careerPathImg ul li a svg,
  #careerPathImg ul li a img {
    width: calc(1.36vw - .5px);
    height: calc(1.36vw - .5px);
    height: auto;
  }
  #careerPathImg #sampleMsg {
    font-size: 0.96vw;
    line-height: 1.75vw;
    padding: 1.5vw 0 4vw;
  }
  
  #mainContent {
    width: 100%;
    padding: 0 33.02vw 0 33.02vw;
    margin: 0 auto;
  }

  #mainContent h2 {
    width: 34.01vw;
    height: 3.11vw;
    font-size: 1.09vw;
    line-height: 1.46vw;
    margin: 0 0 2.6vw;
  }

  #mainContent h3 {
    width: 20.21vw;
    height: 3.94vw;
    font-size: 1.09vw;
    line-height: 1.09vw;
    margin: 0 auto 2.03vw;
  }
  p.characteristic {
    padding: 0 0 3.34vw;
    font-size: 0.99vw;
    text-align: center;
  }
  #greenBorder .careerPathList,
  #blueBorder .careerPathList {
    display: flex;
    justify-content: space-between;
    border-left: none;
    border-top: 3px solid;
    border-image: linear-gradient(to right
      , transparent 5%, #224F6F 0 89%, transparent 89%
      , transparent 89.25%, #224F6F 89.25%, #224F6F 90%, transparent 90%
      , transparent 90.25%, #224F6F 90.25%, #224F6F 91%, transparent 91%
      , transparent 91.25%, #224F6F 91.25%, #224F6F 92%, transparent 92%
      , transparent 92.25%, #224F6F 92.25%, #224F6F 93%, transparent 93%
      , transparent 93.25%, #224F6F 93.25%, #224F6F 94%, transparent 94%
      , transparent 94.25%, #224F6F 94.25%, #224F6F 95%, transparent 95%
      , transparent 95.25%, #224F6F 95.25%, #224F6F 96%, transparent 96%
      , transparent 96.25%, #224F6F 96.25%, #224F6F 97%, transparent 97%
    );
    border-image-slice: 2;
    width: 100%;
    padding-right: 1.5vw;
  }
  #greenBorder .careerPathList li svg {
    left: 44%;
  }
  .careerPathList {
    margin: 0 0 7.18vw;
  }
  /* #mainContent .careerPathList li:first-of-type svg {
    left: 18%;
  } */
  .careerPathList li,
  .controllScrollWrap .controllScrollItemWrap .careerPathList li {
    padding: 2.08vw 1vw 0 0;
    text-align: center;
    width: auto;
    padding: 0;
    margin-top: -1.1vw;
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  .controllScrollWrap .controllScrollItemWrap .careerPathList li:last-child {
    padding: 0;
  }
  .careerPathList li svg {
    width: calc(2.1vw + .5px);
    height: calc(2.1vw + .5px);
    position: initial;
    /* top: -1.1vw; */
    /* left: 35%; */
  }
  .careerPathList li p.timeSeries {
    font-size: 0.94vw;
    line-height: 1;
    padding: .4vw 0 .5vw;
    width: 100%;
  }

  .careerPathList li p {
    font-size: 1.09vw;
    line-height: 2.08vw;
  }

  .careerPathList li p span {
    font-size: 1.09vw;
    line-height: 2.08vw;
  }

  #career_path_03 li:first-child {
    margin-left: -1.5vw;
    /* text-indent: -2vw; */
  }

  /* #career_path_03 li:nth-child(2) {
    margin-left: -3vw;
    text-indent: 1vw;
  } */

  #career_path_03 li:last-child {
        margin-right: -2vw;
        text-indent: 0vw;
  }

  #mainContent .khakiTxtBorder {
    height: 3.94vw;
    padding: 0;
    justify-content: center;
    font-size: 1.09vw;
    line-height: 1.09vw;
    cursor: initial;
  }

  .khakiTxtBorder div {
    display: none;
  }

  #khakiBorder .careerPathList.active {
    display: flex;
  }

  #khakiBorder .controllScrollOver {
    width: 100vw;
    margin: 0 0 0 -33.02vw;
    /* padding-left: 33.02vw; */
    margin-right: 8.54vw;
  }

  #khakiBorder .controllScrollWrap .controllScrollItemWrap {
    flex-direction: initial;
    width: fit-content;
    padding-left: 33vw;
    margin-right: 34.01vw;
  }

  #khakiBorder .controllScrollWrap .controllScrollItemWrap>li {
    width: 35vw;
    margin: 0 6.77vw 0 0;
  }

  #khakiBorder .careerPathList {
    display: flex;
    justify-content: space-between;
    border-left: none;
    border-top: 3px solid;
    border-image: linear-gradient(to right
      , transparent 5%, #6C674A 0 89%, transparent 89%
      , transparent 89.25%, #6C674A 89.25%, #6C674A 90%, transparent 90%
      , transparent 90.25%, #6C674A 90.25%, #6C674A 91%, transparent 91%
      , transparent 91.25%, #6C674A 91.25%, #6C674A 92%, transparent 92%
      , transparent 92.25%, #6C674A 92.25%, #6C674A 93%, transparent 93%
      , transparent 93.25%, #6C674A 93.25%, #6C674A 94%, transparent 94%
      , transparent 94.25%, #6C674A 94.25%, #6C674A 95%, transparent 95%
      , transparent 95.25%, #6C674A 95.25%, #6C674A 96%, transparent 96%
      , transparent 96.25%, #6C674A 96.25%, #6C674A 97%, transparent 97%
      /* , transparent 97.25%, #6C674A 97.25%, #6C674A 98%, transparent 98% */
      /* , transparent 98.25%, #6C674A 98.25%, #6C674A 99%, transparent 99% */
      /* , transparent 99.25%, #6C674A 99.25%, #6C674A 100%, transparent 100% */
    );
    border-image-slice: 2;
    padding-right: 2vw;
  }

  /* #blueBorder .careerPathList {
    display: flex;
    justify-content: space-between;
    border-left: none;
    border-top: 3px solid;
    border-image: linear-gradient(to right, transparent 5%, #224F6F 0 94%, transparent 94%);
    border-image-slice: 2;
    margin: 0;
  } */

  #blueBorder,
  #khakiBorder {
    margin: 0;
  }


}