@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: 16.1vh;
  }

  #hero h1 {
    font-size: 2.8vw;
    font-size: 5vh;
    padding: 0 8.39vw 0;
    writing-mode: initial;
    letter-spacing: .2vw;
    letter-spacing: .26vh;
    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: 0 8.39vw;
    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: 27.4vw;
    min-width: 400px;
    padding: 0;
    margin: 5.2vh 8.39vw 0;
    font-size: 1.3vw;
    font-size: 3.2vh;
    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: 0 3.1vw 12.82vw 6vw;
    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: 40vw;
    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;
  }

  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;
  }

  #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;
  }
  #gear01{
    position: relative;
    width: 100%;
    margin-bottom: -7vw;
  }
  #gear01 div{
    width: 100%;
    right: 0;
    left: 0;
    top: -50vw;
  }
  #gear01 div img{
    position: absolute;
    transition: all .4s ease;
    margin-right: auto;
  }
  #gear01 div #imgHoverOff{
    width: 39vw;
    margin-left: 28vw;
  }
  #gear01 div:hover #imgHoverOff{
    opacity: 0;
  }
  #gear01 div #imgCover{
    width: 41vw;
    opacity: 0;
    margin-left: 27vw;
  }
  #gear01 div:hover #imgCover{
    opacity: 1;
  }
  .stellaSwCompare{
    padding: 0 34.38vw 0vw;
    margin-top: 5.21vw;
    width: 100%;
    border-top: none;
  }
  .stellaSwCompare figcaption{
    font-size: 0.99vw;
  }
  .stellaSwCompare .stellaSwCompareImg1 figcaption{
    text-align: left;
    padding-bottom: 4.69vw;
  }
  .stellaSwCompare .stellaSwCompareImg2 figcaption{
    text-align: right;
    padding-bottom: 1.3vw;
  }
  .stellaSwCompare .stellaSwCompareImg1 img{
    margin-top: 0 !important;
  }
  .stellaSwCompare .stellaSwCompareImg2 img{
    margin-top: 0 !important;
  }
  #gear02{
    width: 100%;
    height: 29.5vw;
  }
  #gear02 div{
    width: 100%;
    height: 27.97vw;
    left: 3.75vw;
    top: 4.85vw;
  }
  #gear02 div img{
    position: absolute;
    transition: all .4s ease;
    margin-right: auto;
    margin-top: 0;
  }
  #gear02 div #imgHoverOff2{
    width: 27.97vw;
    margin-left: 11vw;
    z-index: 2;
  }
  #gear02:hover div #imgHoverOff2{
    opacity: 0;
  }
  #gear02 div #imgCover2{
    width: 27.97vw;
    opacity: 1;
    margin-left: 11vw;
    z-index: 1;
  }
  #gear03{
    position: relative;
    width: 100%;
  }
  #gear03 div{
    width: 100%;
    height: 33.96vw;
    right: 0;
    left: 0;
    top: 0;
    padding: 0;
    margin: 3.13vw auto 3.65vw;
  }
  #gear03 div img{
    position: absolute;
    transition: all .4s ease;
    right: auto;
    width: 59.69vw;
  }
  #gear03 div #imgHoverOff3{
    margin-left: 20.155vw;
    z-index: 2;
  }
  #gear03 div:hover #imgHoverOff3{
    opacity: 0;
  }
  #gear03 div #imgCover3{
    opacity: 1;
    margin-left: 20.155vw;
    z-index: 1;
  }
  #productSection .has-paddingBottom{
    padding-bottom: 7.5vw;
  }
}