@charset "UTF-8";
@media screen and (min-width: 768px) {
  .forScrollWrap .mustTop {
    background: #fff;
  }

  .forScrollWrap .mustTop::before {
    background: #fff;
  }

  .forScrollWrap .mustTop a {
    color: #fff;
  }
  #hero{
    position: relative;
    display: flex;
    flex-direction: column;
  }
  #hero::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(-90deg, rgba(4, 75, 82, 0) 40%, rgba(4, 75, 82, .67) 100%);
    mix-blend-mode: color-burn;
    position: absolute;
    z-index: 15;
  }
  body.safari #hero::after {
    background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .67) 100%);
    mix-blend-mode: initial;
  }

  /* #heroTop{
    top: 19vh;
  } */
  #heroInner {
    display: flex;
    flex-direction: column;
    bottom: 22.1vh;
  }

  #hero h1 {
    font-size: 2.8vw;
    font-size: 5vh;
    padding: 0 8.39vw 0;
    writing-mode: initial;
    letter-spacing: .2vw;
    order: 2;
  }

  main p.ruby {
    padding: 13vh 8.39vw 0;
    font-size: 1.41vw;
    font-size: 2.7vh;
    line-height: 3.07vw;
    order: 1;
  }

  main p#mainTxt {
    padding: 20vh 8.39vw 0;
    font-size: 3.13vw;
    font-size: 1.82vw;
    font-size: 5.5vh;
    line-height: 4.43vw;
    line-height: 7.7vh;
    font-weight: 400;
    letter-spacing: .2vw;
    order: 3;
  }

  #hero p.text {
    width: 22.92vw;
    padding: 0;
    margin: 7.2vh 8.39vw 0;
    font-size: 1.3vw;
    font-size: 2.325vh;
    line-height: 2.86vw;
    line-height: 5.25vh;
    order: 4;
  }

  #projectMember.bgWhite {
    height: 54.43vw;
  }

  #projectMember {
    padding: 10.94vw 0 0;
  }

  #projectMember h2 {
    width: 28.07vw;
    height: 23.8vw;
    margin-right: 3.1vw;
    margin-bottom: 12.82vw;
    padding: 0 0 0 21.46vw;
    font-size: 1.82vw;
    line-height: 2.92vw;
    background: url(/jp/recruitment/assets/img/features/xtr/arrow.svg) no-repeat right top;
    background-size: contain;
  }

  #profile .controllScrollItemWrap {
    width: auto;
  }

  #profile {
    width: 66.1vw;
    margin: 0;
  }

  #profile .controllScrollWrap .controllScrollItemWrap li {
    width: 10.05vw;
    font-size: 0.83vw;
    line-height: 1.3vw;
    margin-right: 2.55vw;
  }

  #profile .controllScrollWrap .controllScrollItemWrap li:first-child {
    margin-left: 0;
  }

  #profile .controllScrollWrap .controllScrollItemWrap li img {
    margin-bottom: 1vw;
  }

  .name {
    padding: 0 0 1.27vw;
  }

  .name span {
    font-size: 1.3vw;
  }

  #productSection {
    padding: 20.99vw 0 0;
  }
  #gear01Scroll {
    margin: -47.2vw 0 1vw 0;
    height: 38.8vw;
}

  #productSection #gear01 {
    height: 38.8vw;
    width: 73.39vw;
    margin: 0 0 0 51vw;
    transition: all .6s ease;
  }

  /* #productSection #gear01:hover {
    margin: 0 0 1vw 13vw;
  } */

  main h1 {
    font-size: 1.82vw;
    padding: 0 0 0 21.46vw;
  }

  main h2 {
    padding: 0 0 0 21vw;
    font-size: 1.8vw;
    line-height: 3.4vw;
  }
  main h3 {
    padding: 8.85vw 34.38vw 3.65vw;
    font-size: 2.08vw;
    line-height: 3.4vw;
}

  main p {
    font-size: 0.99vw;
    line-height: 2.08vw;
  }

  #productSection p {
    line-height: 2.08vw;
    padding: 0 34.38vw 0vw;
  }

  #productSection img {
    display: block;
    width: 31.25vw;
    margin: 3.65vw auto 0;
  }

  #productSection img.spOnly {
    display: none;
  }

  #productSection img.pcOnly {
    display: block;
  }

  #productSection .pdIMg {
    width: 31.25vw;
    margin: 0 auto 3.65vw;
  }

  #productSection #gear02 {
    margin: 5vw 0 0;
    position: relative;
  }

  #gear02 div img:last-child {
    width: 39.17vw;
    z-index: 1;
  }
  #productSection #gear02 div{
    position: absolute;
    top: -7.8vw;
    left: 10.36vw;
    width: 100%;
    height: 39.17vw;
    left: 0;
  }
  #productSection #gear02 img:first-child,
  #productSection #gear02 div #imgCover{
    position: absolute;
    width: 39.17vw;
    height: 39.17vw;
    top: 0;
    left: 10.36vw;
    z-index: 2;
    margin: 0;
    transition: all .4s ease;
  }
  #productSection #gear02 div:hover #imgCover{
  
    opacity: 0;
  }

  #productSection #gear02:hover::after {
    mix-blend-mode: normal;
  }

  #productSection #gear03Wrap{
    padding-bottom: 10.25vw;
  }
  #productSection #gear03 {
    width: 59.53vw;
    margin: 4vw 0 0vw 20.25vw;
    transition: all .6s ease;
  }
  #productSection #gear03Wrap:hover #gear03{
    transform: rotate(-21deg);
  }

  #featuresFoot {
    padding: 5.4vw 0 34.6vw;
    position: relative;
  }
  #featuresFoot h2 {
    width: 31.25vw;
    margin: 0 auto 2vw;
    padding: 0;
    writing-mode: initial;
    font-size: 2.08vw;
    position: relative;
    z-index: 2;
}

  #featuresFoot p {
    width: 31.25vw;
    padding: 0;
    margin: 1vw auto 0;
    position: relative;
    z-index: 2;
  }

  #featuresFootBtnWrap {
    width: 31.25vw;
    display: flex;
    justify-content: space-between;
    margin: 3.65vw auto 0;
    position: relative;
    z-index: 2;
  }
  #featuresFoot img {
    z-index: 2;
}
  #featuresFoot a {
    padding: 0 1.56vw;
    width: 14.51vw;
    height: 3.44vw;
    margin: 0;
    font-size: 0.89vw;
    line-height: 1.3vw;
  }

  #featuresFoot a::after {
    width: 0.96vw;
    height: 0.28vw;
    margin: 0 0 0 3vw;
  }
  #featuresFoot a:hover::after {
    background-image: url(/jp/recruitment/assets/img/common/moreArrow.svg);
  }

  #featuresFoot a#pStory {
    margin: 0 0 0vw;
    transition: all .6s ease;

  }

  #featuresFoot a#pStory:hover {
    border: 1px solid #000;
  }

  #featuresFoot a#nStory {
    margin: 0;
    transition: all .6s ease;
  }

  #featuresFoot a#nStory:hover {
    background-color: #fff;
    color: #000;
  }
  img#featuresFootPcBg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}