@charset "UTF-8";
aside.jsOpenMenu.absolute i, aside.jsOpenMenu.absolute b {
  border-bottom-color: #000;
}
h1 {
  font-size: 6.41vw;
  padding: 15.44vw 13.05vw 16.41vw;
  font-weight: 500;
  line-height: 11.97vw;
}

h1 span {
  font-family: "Oswald", "Bebas Neue", "Bebas", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-size: 12.82vw;
  line-height: 18vw;
  font-weight: 100;
  padding: 0;
}

#jobListWrap h2 {
  padding-left: 13.05vw;
}

#headline,
#headline2 {
  display: flex;
  padding-left: 11.05vw;
  margin-bottom: 12.31vw;
}


.verticalhead {
  writing-mode: vertical-rl;
  background-image: url(/jp/recruitment/assets/img/aboutJob/h2Arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  padding-right: 9.8vw;
  margin-right: 6.2vw;
  font-size: 6.7vw;
  /* font-weight: 300; */
  height: 53.04vw;
  font-family: "Oswald", "Bebas Neue", "Bebas", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

.description {
  width: 54vw;
  font-size: 3.7vw;
  line-height: 6vw;
  /* font-weight: 300; */
  margin-top: -1vw;
}

#headline2 {
  padding-right: 12.82vw;
}


#headline2 .verticalhead {
  height: 88.89vw;
  background-image: url(/jp/recruitment/assets/img/aboutJob/h2Arrow02.svg);
  padding-right: 11.8vw;
  margin-right: 12.2vw;
}

#headline2 div p {
  font-size: 3.59vw;
  line-height: 4.87vw;
}

#headline2 div p#headline2Ttl {
  font-size: 5.9vw;
  line-height: 8.97vw;
  padding: 0 0 10.1vw;
  font-weight: bold;
}

#headline2 div p {
  font-size: 3.59vw;

  line-height: 6.87vw
}

#jobList {
  margin: 0 0 12.82vw;
}

#jobList li {
  width: 60.26vw;
  height: 86.67vw;
  margin: 15.13vw 0 5vw 13.59vw;
  display: flex;
  flex-direction: column;
}

#jobList li p {
  padding: 9.38vw 0 0;
  font-size: 4.1vw;
  line-height: 5.9vw;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}

#jobList li:first-child {
  margin-left: 13.59vw;
}

#jobList li:last-child {
  margin-right: 21.59vw;
}

#jobList li a {
  display: block;
  font-size: 3.85vw;
  font-weight: 600;
  color: #000;
  border-bottom: 2px solid #000;
  margin-top: auto;
  /* padding-top: 6.46vw; */
  padding-bottom: 3.62vw;
  width: 100%;
  background-image: url(/jp/recruitment/assets/img/aboutJob/jobListArrow.svg);
  background-repeat: no-repeat;
  background-position: right 1vw bottom 6vw;
  background-size: 3.95vw auto;
}

#jobList li img {
  display: block;
}

.occupation {
  position: absolute;
  top: -4vw;
  left: -6vw;
  background: #000;
  color: #fff;
  border-radius: 50%;
  font-size: 4.62vw;
  line-height: 5.64vw;
  height: 21.54vw;
  width: 21.54vw;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.occupation.smaller{
  font-size: 3.9vw;
  line-height: 5vw;
  padding-top: 2vw;
}


#jobList .controllScrollButtonWrap {
  position: absolute;
  width: 24.37vw;
  top: -9vw;
  right: 13vw;
  margin: 0;
  color: #fff;
}

#jobList .controllScrollButtonWrap button {
  border: 1px solid #000;
  width: 10.47vw;
  height: 10.47vw;
  border-radius: 50%;
}



/* チャート部分 */
#flowChart {
  background: #E9EDF0;
  padding: 15.38vw 12.82vw;
  display: flex;
  flex-wrap: wrap;

}

#flowChart p {
  font-size: 3.59vw;
  line-height: 5.87vw;
}

.flowChartflexWrap {
  display: flex;
  height: auto;
  width: 100%;
}

#flowChartWhiteBox {
  background: #fff;
  border-radius: 10px;
  padding: 9.74vw 5.13vw 10.26vw 4.62vw;
  width: 100%;
  height: 208.21vw;
  margin: 0 0 8.21vw;
  display: flex;
}

#investigation {
  width: 100%;
}

#investigation p {
  padding: 0 0 10.26vw;
}

#flowChart .vertical {
  writing-mode: vertical-rl;
  display: flex;
  justify-content: center;
  height: 100%;
}

#informationSystem.vertical {
  background: url(/jp/recruitment/assets/img/aboutJob/verticalArrowTop.svg), url(/jp/recruitment/assets/img/aboutJob/verticalArrowBottom.svg);
  background-repeat: no-repeat, no-repeat;
  background-size: 9.07vw 47.16vw, 9.07vw 47.16vw;
  background-position: right 0, right 100%;
  width: 13.69vw;
  height: 100%;
  align-items: stretch;
  justify-content: start;
  padding: 53vw 0 0;
}

#designWrap {
  background-image: url(/jp/recruitment/assets/img/aboutJob/blueForUnderArrow.svg);
  background-position: left 2.8vw top;
  background-repeat: no-repeat;
  background-size: auto 100%;
  padding-left: 10vw;
}

#flowChart #designWrap button {
  text-indent: -13vw;
  text-align: center;
}

#flowChart #designWrap button.textSmall {
  font-size: 3.59vw;
  text-indent: -11vw;
}

.arrowNext {
  padding-bottom: 20.05vw;
  background: url(/jp/recruitment/assets/img/aboutJob/blueForUnderArrowShort.svg) no-repeat center bottom;
  background-size: 5.14vw 14.27vw;
  background-position: bottom 4.1vw center;
}

#flowChart button {
  font-size: 4.62vw;
  text-indent: -7vw;
  width: 100%;
  border-radius: 9999px;
  height: 11.54vw;
  background-color: #384C5D;
  background-image: url(/jp/recruitment/assets/img/aboutJob/buttonBg.svg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  margin-bottom: 4.87vw;
  color: #fff;
  /* background:  */
}

#flowChart .vertical button {
  width: 11.54vw;
  height: 40.51vw;
  padding: 0;
  text-indent: -11vw;
  letter-spacing: 0.6vw;
  margin: 0 auto 6vw;
  background-position: center 100%;
  background-image: url(/jp/recruitment/assets/img/aboutJob/buttonBgTate.svg);
}

#flowChart .vertical p {
  display: flex;
  align-items: center;
}

/* #flowChart>div,
#flowChartWhiteBox>div,
#design>div {
  margin-bottom: 5vw;
} */

/* 
#flowChart>div {
  width: 60vw;
} */

.black {
  text-align: center;
  border-radius: 9999px;
  height: 11.54vw;
  font-size: 4.1vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #fff;
}

#pcRightLeft {
  background: url(/jp/recruitment/assets/img/aboutJob/pcRightLeftblueArrow.svg) no-repeat 0 10vw;
  background-size: 5.14vw 62.28vw;
  background-position: left 14vw top 19vw;
}

#pcRightLeft .black {
  margin: 0 0 7.18vw;
}
#pcRightLeft .black:last-of-type{
  margin: 0 0 14.18vw;
}

.sales {
  width: 40.51vw;
  margin-left: 27.18vw;
  background-size: 10vw 100%;
}

.sales p {
  padding: 0 0 8.97vw;
}

#flowChart .sales button {
  text-indent: -10vw;
}

#pcRightRight {
  background: #fff;
  border-radius: 10px;
  padding: 9.74vw 5.13vw 6.26vw 6.15vw;
  margin-top: 17.69vw;
  width: 100%;
}

#pcRightRight p:first-of-type {
  padding: 0 0 9.23vw;
}

#pcRightRight button {
  text-indent: -12vw;
}

#bottonlistWrap .controllScrollButtonWrap {
  display: none;
}

/* popup */
.popup i.closeTabId.spOnly {
  display: none;
}

.popup {
  display: none;
}

.popupWrap.active {
  display: block;
}


.popup.active {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  position: fixed;
  background: rgb(0, 0, 0, .7);
}

.popupInner {
  position: relative;
  width: 60.51vw;
  height: 78.72vw;
  padding: 0;
  background: #fff;
  z-index: 2;
}

.popup i.closeTabId {
  position: absolute;
  background: #000;
  border-radius: 50%;
  top: -4.2vw;
  right: -4.2vw;
  width: 10vw;
  height: 10vw;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
  font-size: 5vw;
  background: url(/jp/recruitment/assets/img/aboutJob/closeTab.svg) no-repeat center;
  background-size: contain;
}

.popup i.closeTabId i,
.popup i.closeTabId b {
  fill: #fff;
  display: none;
}

.close {
  position: absolute;
  display: block;
  width: 5.13vw;
  height: 5.13vw;
  z-index: 5;
  opacity: 1;
  right: 2vw;
  top: 7vw;
}

.close i,
.close b {
  width: 6.36vw;
  position: absolute;
  height: 1px;
  background: #FFF;
  display: inline-block;
  transform: rotate(0);
  transition: all .4s;
}

.close i {
  right: calc(1.75vw + .5px);
  transform: rotate(45deg);
  top: calc(4.8vw + .5px);
  background: #fff;
}

.close b {
  transform: rotate(-45deg);
  top: calc(4.8vw + .5px);
  background: #fff;
  left: 2vw;
}

.popupTtl {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 4.62vw;
  font-size: 4.62vw;
  line-height: 5.62vw;
  height: 8.46vw;
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
  color: #fff;
  width: auto;

}

.popupInner div {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.popup img {
  width: 100%;
  height: 38.46vw;
}

.popup .popupCaption {
  font-size: 4.1vw;
  line-height: 5.9vw;
  padding: 5.13vw;
  font-weight: 500;
}

.popup a {
  padding: 5.13vw 0 5.13vw 5.13vw;
  margin-top: auto;
  color: #000;
  font-weight: 600;
  width: 100%;
  background-image: url(/jp/recruitment/assets/img/aboutJob/jobListArrow.svg);
  background-size: 3.95vw 4.49vw;
  background-repeat: no-repeat;
  background-position: right 6vw center;
}
#popJob01 a,
#popJob08 a{
  font-size: 3.25vw;
}
#popJob09 a,
#popJob11 a{
  font-size: 3.5vw;
}