
aside.jsOpenMenu.absolute i, aside.jsOpenMenu.absolute b, 
aside i,
aside b{
  border-bottom-color: #3B4043;
}
section{
  width: 100%;
  overflow-x: hidden;
}
h1 {
  font-size: 6.41vw;
  padding: 15.44vw 11.82vw 11.05vw;
  text-align: left;
  font-weight: 500;
}

h1 div {
  padding: 3vw 0 0;
  font-size: 15.64vw;
  font-weight: 300;
  font-family: "Oswald", "Bebas Neue", "Bebas", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;

}

.careerPathText h2 {
  writing-mode: vertical-lr;
  width: 3.4vw;
  height: 78.58vw;
  /* margin-right: 5.64vw; */
  margin-bottom: 12.82vw;
  /* font-size: 6.41vw; */
  /* line-height: 7vw; */
  font-family: "Oswald", "Bebas Neue", "Bebas", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 400;
  background: url(/jp/recruitment/assets/img/career_up/profileArrow.svg) no-repeat right top;
  background-size: contain;
}

.careerPathText {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 12.82vw;
}

.careerPathText>div {
  width: 65.77vw;
  margin: -2vw 0 0;
}

.careerPathText p {
  font-size: 3.59vw;
  line-height: 5.87vw;
}

.careerPathText p:first-of-type {
  font-size: 6.41vw;
  line-height: 8.97vw;
  font-weight: 600;
  padding: 0 0 8.72vw;
}

#careerPathImg {
  background-color: #549CBC;
  border-radius: 50%;
  height: 151.28vw;
  width: 151.28vw;
  margin: 0 0 20.77vw -25.64vw;
  text-align: center;
  color: #fff;
  padding: 15.15vw 12.82vw 0;
}

#careerPathImg p {
  font-family: "Oswald", "Bebas Neue", "Bebas", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-size: 5.13vw;
  line-height: 8.21vw;
}

#careerPathImg ul li {
  height: 16.67vw;
  width: 74.36vw;
  color: #000;
  background: #fff;
  border-radius: 10px;
  text-align: left;
  margin: 0 auto 5.13vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
}
#careerPathImg ul li a{
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 3.08vw 0 4.36vw;
}
#careerPathImg ul li i{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
  width: 100%;
  font-style: normal;
}
#careerPathImg ul li a svg,
#careerPathImg ul li a .svgAnime{
  width: 5.64vw;
  height: 5.64vw;
}

#careerPathImg ul li:first-of-type circle {
  fill: #2B6264;
}

#careerPathImg ul li:nth-child(2) {
  fill: #6C674A;
}

#careerPathImg ul li:nth-child(3) {
  fill: #224F6F;
}

#careerPathImg ul li path {
  fill: #fff;
}

#careerPathImg #yourCareer {
  font-size: 5.64vw;
  line-height: 7.69vw;
  font-weight: 500;
  padding: 3.9vw 0 8.26vw;
}

#careerPathImg #if {
  padding: 8.26vw 0 0;
  font-size: 4.62vw;
}
#careerPathImg #sampleMsg{
  font-size: 3.6vw;
  line-height: 7vw;
}
.greenBg {
  background: #2B6264;
}

.khakiBg {
  background: #6C674A;
}

.blueBg {
  background: #224F6F;
}

.greenTxtBorder {
  border: 2px solid #2B6264;
  color: #2B6264;
}

#mainContent .khakiTxtBorder {
  border: 2px solid #6C674A;
  color: #6C674A;
  text-align: left;
  display: flex;
  height: 14.62vw;
  font-weight: 500;
  justify-content: space-between;
  padding:0 5.9vw 0 6vw ;
  font-size: 4.3vw;
  line-height: 4.3vw;
}
.khakiTxtBorder div{
  width: 4.87vw;
  height: 4.87vw;
  position: relative;
  margin:  -4.8vw -2.4vw 0;
}
.khakiTxtBorder b,
.khakiTxtBorder i,
.khakiTxtBorder.active i{
  display: block;
  position: absolute;
  border-bottom: 2px solid #6C674A;
  width: 4.87vw;
  height: 1px;
  right: calc(2.4vw - .5px);
  bottom: 0;
  transform: rotate(0);
  transition: transform .3s ease;
}
.khakiTxtBorder i{
  transform: rotate(90deg);
}
#khakiBorder{
  margin: 6vw 0 0;
}

#khakiBorder .careerPathList{
  display: none;
}
#khakiBorder .careerPathList.active{
  display: block;
}
#khakiBorder .controllScrollOver{
  width: 100%;
}
#khakiBorder .controllScrollWrap .controllScrollItemWrap{
  flex-direction: column;
  width: 100%;
}

.blueTxtBorder {
  border: 2px solid #224F6F;
  color: #224F6F;
}

#mainContent {
  padding: 0 12.82vw 0;
}

#mainContent h2 {
  font-weight: 400;
  display: flex;
  align-items: center;
  color: #fff;
  height: 11.54vw;
  font-size: 4.62vw;
  line-height: 4.62vw;
  border-radius: 10px;
  justify-content: center;
  margin: 0 0 9.23vw;
}

#mainContent h3 {
  width: 100%;
  border: 2px solid;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14.62vw;
  font-size: 4.36vw;
  font-weight: 400;
  line-height: 4.36vw;
  margin: 0 0 6.67vw;
  background: none;
  font-weight: 500;
}

p.characteristic {
  padding: 0 0 6.92vw;
  font-size: 3.59vw;
  line-height: 1.7;
}
p.characteristic span{
  font-weight: 600;
}
.careerPathList {
  position: relative;
  border-left: 4px solid;
  margin: 0 0 5vw 4vw;
}

.careerPathList li,
.controllScrollWrap .controllScrollItemWrap .careerPathList  li {
  position: relative;
  padding: 0 0 13.33vw 6.41vw;
}
.controllScrollWrap .controllScrollItemWrap .careerPathList  li:last-child{
  padding: 0 0 9.33vw 6.41vw;
}


.careerPathList li p {
  font-size: 5.13vw;
  line-height: 5.64vw;
}

.careerPathList li p.timeSeries {
  font-size: 4.1vw;
  line-height: 5.64vw;
  font-weight: 500;
  padding: 0 0 2.82vw;
}

.careerPathList li p span {
  font-size: 3.59vw;
}

.careerPathList li svg {
  width: 7.77vw;
  height: 7.77vw;
  position: absolute;
  top: -.5vw;
  left: -4.2vw;
}

#greenBorder .careerPathList li svg path {
  fill: #2B6264;
}

#greenBorder .careerPathList,
#blueBorder .careerPathList {
  border-left: 3px solid;
  border-image: linear-gradient(to bottom,
    transparent 0%, #224F6F 0 75%, transparent 75%
    , transparent 75.5%, #224F6F 75.5%, #224F6F 76.5%, transparent 76.5%
    , transparent 77%, #224F6F 77%, #224F6F 78%, transparent 78%
    , transparent 78.5%, #224F6F 78.5%, #224F6F 79.5%, transparent 79.5%
    , transparent 80%, #224F6F 80%, #224F6F 81%, transparent 81%
    , transparent 81.5%, #224F6F 81.5%, #224F6F 82.5%, transparent 82.5%
    , transparent 83%, #224F6F 83%, #224F6F 84%, transparent 84%
    , transparent 84.5%, #224F6F 84.5%, #224F6F 85.5%, transparent 85.5%
    , transparent 86%, #224F6F 86%, #224F6F 87%, transparent 87%
    , transparent 87.5%, #224F6F 87.5%, #224F6F 88.5%, transparent 88.5%
    , transparent 89%, #224F6F 89%, #224F6F 90%, transparent 90%
    , transparent 90.5%, #224F6F 90.5%, #224F6F 91.5%, transparent 91.5%
  );
  border-image-slice: 2;
}

#khakiBorder .careerPathList li svg path {
  fill: #6C674A;

}

#khakiBorder .careerPathList {
  border-left: 3px solid;
  border-image: linear-gradient(to bottom
    , transparent 0%, #6C674A 0 79%, transparent 79%
    , transparent 79.5%, #6C674A 79.5%, #6C674A 80.5%, transparent 80.5%
    , transparent 81%, #6C674A 81%, #6C674A 82%, transparent 82%
    , transparent 82.5%, #6C674A 82.5%, #6C674A 83.5%, transparent 83.5%
    , transparent 84%, #6C674A 84%, #6C674A 85%, transparent 85%
    , transparent 85.5%, #6C674A 85.5%, #6C674A 86.5%, transparent 86.5%
    , transparent 87%, #6C674A 87%, #6C674A 88%, transparent 88%
    , transparent 88.5%, #6C674A 88.5%, #6C674A 89.5%, transparent 89.5%
    , transparent 90%, #6C674A 90%, #6C674A 91%, transparent 91%
    , transparent 91.5%, #6C674A 91.5%, #6C674A 92.5%, transparent 92.5%
    , transparent 93%, #6C674A 93%, #6C674A 94%, transparent 94%
    , transparent 94.5%, #6C674A 94.5%, #6C674A 95.5%, transparent 95.5%
    , transparent 96%, #6C674A 96%, #6C674A 97%, transparent 97%
    , transparent 97.5%, #6C674A 97.5%, #6C674A 98.5%, transparent 98.5%
    /* , transparent 99%, #6C674A 99%, #6C674A 100%, transparent 100% */
  );
  border-image-slice: 2;
}

#blueBorder .careerPathList li svg path {
  fill: #224F6F;

}

#blueBorder{
  margin: 6vw 0 0;
}