@charset "UTF-8";
/* /popup */
@media screen and (min-width: 768px) {

  h1 {
    font-size: 2.5vw;
    padding: 6.4vw 8.39vw 0vw;
    line-height: initial;
    font-weight: 600;
  }

  h1 span {
    font-size: 4.69vw;
    line-height: 7vw;
  }

  #jobListWrap h2 {
    font-size: 1.67vw;
    padding: 7.84vw 0 1.86vw;
  }

  #aboutJobContent {
    display: flex;
    margin: 0 0 12.24vw;
  }

  .occupation,
  .occupation.smaller {
    font-size: 1.09vw;
    line-height: 1.35vw;
    height: 5.38vw;
    width: 5.38vw;
    top: -.8vw;
    left: -1.46vw;
    letter-spacing: -.02vw;
  }

  .occupation.smaller {
    padding-top: .5vw;
    font-size: 1vw;
  }

  #headline,
  #headline2 {
    display: block;
    width: 12.24vw;
    margin: 8.07vw 8.33vw 0;
    padding: 0;
  }

  #headline2 div p {
    width: auto;
    font-size: 0.99vw;
    line-height: 2.08vw;
  }

  .verticalhead {
    font-weight: 400;
    letter-spacing: .06vw;
    height: auto;
    width: 12.24vw;
    font-size: 1.7vw;
    writing-mode: initial;
    padding: 0 0 2.5vw 0;
    margin: 0 0 3vw;
    border-right: none;
    background-image: url(/jp/recruitment/assets/img/aboutJob/h2ArrowPc.svg);
    background-position: bottom;
  }

  .description {
    width: auto;
    font-size: 0.99vw;
    line-height: 2.08vw;
  }

  #jobList {
    width: 100%;
    margin: 0;
    position: relative;
  }

  #jobListWrap,
  #flowChartWrap.controllScrollOver {
    width: calc(100% - 28.912vw);
  }

  #jobList li {
    width: 15.06vw;
    height: 21.67vw;
    margin: 0.89vw 0 0 3.33vw;

  }

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

  #jobList li p {
    font-size: .78vw;
    line-height: 1.41vw;
    padding: 2.35vw 0 0;
    font-size: 0.99vw;
    line-height: 1.41vw;
    height: 3rem;
  }

  #jobList li a {
    font-size: 0.94vw;
    padding-bottom: 0.99vw;
    background-position: right .68vw bottom 1.6vw;
    background-size: 0.99vw auto;
  }

  #jobList li img {
    width: 100%;
    height: auto;
  }

  #jobList .controllScrollButtonWrap {
    display: flex;
    width: 30vw;
    right: initial;
    top: 1.5vw;
    margin: 8vw 0 0vw -1vw;
    position: absolute;
    z-index: 2;
    pointer-events: none;
  }

  #jobList .controllScrollButtonWrap button {
    background: #fff;
    border: none;
    width: 2.41vw;
    height: 2.41vw;
    pointer-events: initial;
  }

  #headline2 {
    margin: 0 8.33vw;
  }

  #headline2 .verticalhead {
    height: auto;
    width: 12.24vw;
    font-size: 1.67vw;
    writing-mode: initial;
    padding: 0 0 2vw 0;
    margin: 0 0 1vw;
    border-right: none;
    background-image: url(/jp/recruitment/assets/img/aboutJob/h2ArrowPc.svg);
    background-position: bottom;
  }


  #headline2 div p#headline2Ttl {
    font-size: 1.25vw;
    line-height: 1.93vw;
    padding: 0 0 2vw;
  }

  #bottonlistWrap {
    width: 100%;
    display: flex;
  }

  #bottonlistWrap .controllScrollButtonWrap {
    display: flex;
  }

  .black {
    height: auto;
    padding: .5vw 0;
    margin-bottom: 3vw;
    font-size: 1.67vw;
  }

  #flowChartWrap.controllScrollOver {
    height: 34.43vw;
  }

  #flowChartWrap .controllScrollButtonWrap {
    position: absolute;
    top: 15vw;
  }

  #flowChartWrap .controllScrollButtonWrap svg,
  #flowChartWrap .controllScrollButtonWrap img {
    height: 0.7vw;
  }

  #flowChartWrap .controllScrollButtonWrap .controllScrollButtonNext {
    background: #fff;
    border-radius: 50%;
    width: 2vw;
    height: 2vw;
    position: relative;
    margin: 0 0 10vw -1vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flowChartflexWrap {
    display: flex;
    flex-direction: column;
    height: 19.58vw;
    width: 62.74vw;
    margin: 0 2.6vw 0 0;
  }

  #flowChart {
    width: 146.35vw;
    width: auto;
    height: 100%;
    padding: 7.5vw 4.79vw 0 6.25vw;
    padding: 7.5vw .5vw 0 3vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
  }


  #flowChart>div#theStudy {
    display: flex;
    width: 122.64vw;
    padding: 0;
    height: 100%;
    order: 2;
  }

  #flowChart .vertical {
    writing-mode: initial;
    display: flex;
    background-image: url(/jp/recruitment/assets/img/aboutJob/verticalArrowTopPc.svg),
      url(/jp/recruitment/assets/img/aboutJob/verticalArrowBottomPc.svg);
    align-items: center;
    justify-content: center;

  }

  #flowChart button {
    width: 100%;
    height: 2.71vw;
    /* min-width: 10rem; */
    font-size: 1.04vw;
    background-size: 3vw 3vw;
    text-indent: -2vw;
    padding: .5vw 0;
    margin-bottom: 1vw;
  }

  #flowChart #designWrap button {
    text-indent: 0;
    text-align: left;
    font-size: 1.04vw;
    width: auto;
    min-width: 9.53vw;
    height: 2.76vw;
    padding: 0 2.71vw 0 1.27vw;
    margin: 0 1.46vw 1vw 0;
  }

  #flowChart #designWrap button.textSmall {
    font-size: 0.83vw;
    margin: 0;
    text-indent: -.75vw;
  }

  #flowChart p {
    font-size: 0.73vw;
    line-height: 1.39vw;
    padding: 0;
  }

  #investigation p {
    padding: 0 0 1.9vw;
    line-height: 1.19vw;
  }

  #flowChart>div#investigation {
    width: 9.84vw;
    padding: 1.15vw 0 0;
    margin: 0 2.81vw 0 0;
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: start;
  }

  .popupInner {
    width: 12.29vw;
    height: 15vw;
    height: auto;
    width: auto;
    padding: 0;
    left: 0;
    top: 0;
  }

  .popup i.closeTabId {
    top: -1vw;
    right: -1vw;
    width: 2.03vw;
    height: 2.03vw;
  }

  .close i,
  .close b {
    width: 1.36vw;
    height: 1px;
  }

  .close i {
    right: calc(.265vw + .5px);
    top: calc(.953vw + .5px);
  }

  .close b {
    left: calc(.325vw + .5px);
    top: calc(.96vw + .5px);
  }

  .popupTtl {
    height: 1.72vw;
  }

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

  .popup .popupCaption {
    font-size: 0.83vw;
    line-height: 1.2vw;
    padding: 0.99vw;
  }

  .popup a {
    padding: 0 0 1.14vw 0.99vw;
    font-size: 0.68vw;
    background-size: 0.8vw 0.23vw;
    background-position: right 1.3vw bottom 1.6vw;
  }

  .popup p {
    padding: 0 0.52vw;
    font-size: 0.94vw;
    line-height: 1.15vw;
  }

  .popup .moreHoverPc,
  .popup .moreHoverPc .popupCaption,
  .popup .moreHoverPc a {
    transition: all .3s;
    position: relative;
  }

  .popup .moreHoverPc:hover {
    background-color: rgba(0, 0, 0, .4);
  }

  .popup .moreHoverPc:hover .popupCaption,
  .popup .moreHoverPc:hover a {
    color: #FFF;
  }

  .popup .moreHoverPc:hover a {
    background-image: url(/jp/recruitment/assets/img/aboutJob/jobListArrowWhite.svg);
  }

  .popup .moreHoverPc a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    width: 0;
    height: 1px;
    background: #FFF;
    margin: 0 1vw 1vw;
    transition: all 1.5s ease;
  }

  .popup .moreHoverPc:hover a::after {
    width: calc(100% - 2vw);
  }

  #popJob01 a,
  #popJob08 a {
    font-size: 0.94vw;
    line-height: 1.15vw;
  }

  #popJob09 a,
  #popJob11 a {
    font-size: 0.94vw;
    line-height: 1.15vw;
  }

  #theStudy {
    width: 12vw;
    padding-right: 2vw;
  }

  #designWrap {
    display: flex;
  }

  #flowChart .vertical button {
    padding: .5vw 0;
    width: auto;
    background-position: right center;
  }

  #theStudy {
    display: flex;
    flex-wrap: wrap;
  }

  #flowChartWhiteBox {
    width: 100%;
    height: 19.58vw;
    display: flex;
    flex-direction: column;
    padding: 1.2vw 1.6vw 0 2.6vw;
    margin: 0;
  }



  #informationSystem.vertical {
    background-position: left 0vw bottom -.2vw, right 0vw bottom -.2vw;
    width: 100%;
    height: 3.42vw;
    position: relative;
    order: 1;
    margin: 0;
    background-size: 19.52vw 2.13vw, 19.52vw 2.13vw;
    padding: 0;

  }

  #informationSystem.vertical button {
    letter-spacing: 0;
    width: 9.52vw;
    height: 2.71vw;
    text-indent: -3vw;
    margin: 0 1vw 0 1.5vw;
    background-image: url(/jp/recruitment/assets/img/aboutJob/buttonBg.svg);
  }

  .arrowNext {
    padding: 0;
    background: none;
  }

  #designWrap {
    height: 10.84vw;
    order: 2;
    padding-top: 4vw;
    background-image: url(/jp/recruitment/assets/img/aboutJob/blueForUnderArrowPc.svg);
    background-repeat: no-repeat;
    background-position: 0 .5vw;
    background-size: 100% 2vw;
    padding-left: 0;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  #flowChart>div,
  #flowChartWhiteBox>div,
  #design>div {
    margin-bottom: 0;

  }

  #designWrap>div {
    width: auto;
    height: 100%;
    max-width: 14.34vw;
    background-image: url(/jp/recruitment/assets/img/aboutJob/blueForUnderArrowShortPc.svg);
    background-repeat: no-repeat;
    background-position: right 0vw top .7vw;
    background-size: 3.35vw auto;
    padding: 0;
    padding-right: 3vw;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
  }

  #designWrap>div:nth-of-type(3) {
    height: auto;
  }

  #designWrap>div:nth-of-type(3) div {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  #BC{
    margin: 0 1.46vw 1vw 0;
  }

  #flowChart #designWrap>div:nth-of-type(3) div button {
    width: 9.55vw;
  }

  #designWrap>div#technology {
    width: 10.26vw;
    background: none;
    padding: 0;
  }

  #quality.vertical {
    background-position: 0 0, 30vw 0vw;
  }

  #pcRight {
    width: 57.28vw;
    width: auto;
    height: 19.58vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    background-image: url(/jp/recruitment/assets/img/aboutJob/pcRightBlueArrowPc.svg);
    background-repeat: no-repeat;
    background-size: auto 1.21vw;
    background-position: center left 11vw;
  }

  #pcRightLeft {
    height: 17.36vw;
    width: 9.53vw;
    height: 100%;
    margin: 1vw 8.57vw 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;

  }

  #pcRightLeft .black {
    margin: 0 0;
    width: 9.56vw;
    font-size: 0.99vw;
    margin: 0 0 1.59vw;
  }

  #pcRightRight {
    width: 19.58vw;
    width: 18vw;
    padding: 3vw 3.55vw 0;
    padding: 3vw 2vw 0;
    margin: 0 0 0 1.94vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
  }


  #pcRight>.black {
    width: 17.47vw;
    height: 2.71vw;
    font-size: 0.99vw;
    margin: 0 0 1vw;
  }

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

  #pcRightRight button {
    /* height: 2.34vw; */
    width: 12.6vw;
  }

  #Advertisement {
    display: flex;
    flex-direction: column;
  }

  .sales {
    width: 9.56vw;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-direction: column;
  }

  #flowChart .sales p {
    padding-bottom: .9vw;
  }

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

}