@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: 31.0vh;
    bottom: initial;
    top: 35vh;
  }

  #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;
    line-height: 2;
    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: 21.09vw;
    min-width: 380px;
    padding: 0;
    margin: 0 8.39vw 0;
    font-size: 1.88vw;
    font-size: 3.4vh;
    line-height: 1.94;
    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: -38.2vw 0 1vw 0;
    height: 30.8vw;
}

  #productSection #gear01 {
    height: 21.9vw;
    width: 150vw;
    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 .productImg img {
    display: block;
    width: 19.11vw;
    margin: 3.65vw auto 0;
  }

  #productSection .productImg figcaption {
    text-align: center;
    font-size: 0.73vw;
    padding: 1.56vw 0 4.17vw;
  }

  #productSection img.spOnly {
    display: none;
  }

  #productSection img.pcOnly {
    display: block;
  }
  .productImgList.spOnly{
    display: none;
    height: 0;
  }

  #sliderInSec2 .controllScrollWrap{
    width: 31.25vw;
    margin: 3.8vw auto 4.17vw;
  }
  
  #sliderInSec2 .controllScrollWrap.scroll .controllScrollItemWrap{
    gap: 1.56vw;
  }

  #sliderInSec2 .controllScrollWrap .controllScrollItemWrap .controllScrollItem{
    width: 16.82vw;
  }

  #sliderInSec2 .controllScrollOver{
    position: relative;
  }

  #sliderInSec2 .controllScrollButtonWrap{
    position: absolute;
    top: 4.905vw;
    left: 33.375vw;
    right: 33.375vw;
    width: 33.24vw;
    height: 2vw;
    z-index: 10;
  }

  #sliderInSec2 .controllScrollButtonPrev,
  #sliderInSec2 .controllScrollButtonNext{
    width: 2vw;
    height: 2vw;
    background: #000;
    border-radius: 50%;
    position: relative;
    border: none;
    z-index: 1;
  }

  #sliderInSec2 .controllScrollButtonPrev::before,
  #sliderInSec2 .controllScrollButtonNext::before{
    content: "";
    position: absolute;
    top: calc(50% - 0.24vw);
    left: calc(50% - 0.24vw);
    z-index: 2;
    display: inline-block;
    width: 0.53vw;
    height: 0.53vw;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }

  #sliderInSec2 .controllScrollButtonPrev::before{
    transform: rotate(45deg);
  }

  #sliderInSec2 .controllScrollButtonNext::before{
    transform: rotate(-135deg);
  }

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

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

  #gear02 > img{
    width: 31.25vw;
    display: block;
    margin: 0 auto;
  }

  #gear02 div img:last-child {
    width: 39.17vw;
    z-index: 1;
  }
  #productSection #gear02 div{
    position: absolute;
    top: -7.8vw;
    left: 10.36vw;
    width: 100vw;
    height: 39.17vw;
    left: 0;
  }
  /* #productSection #gear02 img:first-child, */
  #productSection #gear02 div #imgCover{
    position: absolute;
    width: 27.86vw;
    height: auto;
    top: 5vw;
    left: 16.4vw;
    z-index: 2;
    margin: 0;
    transition: all .4s ease;
    opacity: 0;
  }
  #productSection #gear02 div:hover #imgCover{
    opacity: 1;
  }
  #productSection #gear02 div:hover #imgHoverOff{
    opacity: 0;
  }
  #productSection #gear02 div #imgHoverOff{
    position: absolute;
    width: 25.78vw;
    height: auto;
    top: 13vw;
    left: 16.3vw;
    z-index: 2;
    margin: 0;
    transition: all .4s ease;
    opacity: 1;
  }

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

  #gear03{
    width: 100%;
    margin: 0 auto;
    height: 35.83vw;
    position: relative;
  }

  #gear03 div{
    width: 100%;
    height: 100%;
  }

  #gear03 div #imgHoverOff2{
    position: absolute;
    top: 6.25vw;
    left: 34.375vw;
    right: 34.375vw;
    width: 31.25vw;
    display: block;
    transition: all .4s ease;
    opacity: 1;
  }
  #gear03 div:hover #imgHoverOff2{
    opacity: 0;
  }
  #gear03 div #imgCover2{
    opacity: 0;
    width: 22.29vw;
    position: absolute;
    top: 3.75vw;
    left: 38.855vw;
    right: 38.855vw;
    transition: all .4s ease;
  }

  #gear03 div:hover #imgCover2{
    opacity: 1;
  }

  #featuresFoot {
    padding: 4.4vw 0 50.4vw;
    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;
  }
  .productImgList{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0 34.38vw 0;
  }
  .productImgListItem{
    width: 47.17%;
  }
  .productImgListItem figcaption{
    font-size: 0.73vw;
    padding-top: 0.47vw;
  }

  .productImgList.is-1stSec{
    margin-top: 4.17vw;
    margin-bottom: 4.17vw;
    gap: 1.77vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.77vw;
  }
  .productImgList.is-1stSec .productImgListItem{
    margin: 0;
    width: 100%;
    display: grid;
    align-items: flex-start;
  }

  .img2nd{
    width: 31.25vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4.17vw;
  }
}