@charset "UTF-8";
/*
// css for animation.js
*/

.Js-Animation{
  opacity:0;
}

*[data-anim-unit]{
  opacity:0;
}

.fadeIn{
  animation: fadeIn .5s;
  animation-fill-mode: forwards;
}
    
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeInUp{
  animation: fadeInUp .5s ease-out;
  animation-fill-mode: forwards;
}
    
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(2rem);
  }
  
100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.blink{
  animation: blink 1s;
  animation-iteration-count: 3;
  animation-fill-mode: forwards;
}

@keyframes blink {
  0% {
    opacity: 0;
  }

75% {
    opacity: 1;
  }
  
100% {
    opacity: 1;
  }
}

.expand{
  animation: expand 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
  animation-fill-mode: forwards;
  opacity: 1;
}

@keyframes expand {
  0% {
    transform: scale(1);
  }
  
  25% {
    transform: scale(.5);
  }

65% {
    transform: scale(1.1);
  }
  
100% {
    transform: scale(1);
  }
}

.zoomIn.active{
  animation: zoomIn .3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(.5);
  }
  
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.fadeInLeft.active{
  animation: fadeInLeft .3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10%)
  }
  
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

.slideInUp{
  animation: slideInUp .5s ease-out;
  animation-fill-mode: forwards;
}

@keyframes slideInUp {
  0% {
    opacity: 1;
    transform: translateY(5rem);
  }
  
100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.flipImage{
  animation: flipImage 1s ease-in-out 1;
  animation-fill-mode: forwards;
  opacity: 1;
}

@keyframes flipImage {
  0% {
    transform: scaleX(0%);
  }
  
  33% {
    transform: scaleX(-100%);
  }
  
  66% {
    transform: scaleX(0%);
  }
  
  100% {
    transform: scaleX(100%);
  }
}

.zoomImage{
  animation: zoomImage .5s ease-in-out .5s;
  animation-fill-mode: forwards;
  opacity: 1;
}

@keyframes zoomImage {
  0% {
    height: 0%;
    width:0%;
  }
  
  100% {
    height: 100%;
    width:100%;
  }
}

.flipIn{
  animation: flipIn .2s ease-in .5s;
  animation-fill-mode: forwards;
  opacity: 1;
}

@keyframes flipIn {
  0% {
    transform: scaleX(0);
  }
  
  100% {
    transform: scaleX(1);
  }
}

.textMarker{
  animation: textMarker 0.5s ease-in-out;
  animation-fill-mode: forwards;
}
    
@keyframes textMarker {
  from {
    background-size: 0% 40%;
  }

  to {
    background-size: 100% 40%;
  }
}

.textMarker--thin{
  animation: textMarker--thin 1s ease-in-out 2s;
  animation-fill-mode: forwards;
}
    
@keyframes textMarker--thin {
  from {
    background-size: 0% 20%;
  }

  to {
    background-size: 100% 20%;
  }
}


.titleBottomYellowAndBlackUnderline{
  overflow-x: hidden;
  opacity:1;
}

.titleBottomYellowAndBlackUnderline.active:before{
  animation: titleBottomYellowAndBlackUnderline 0.4s ease-in-out;
  animation-fill-mode: forwards;
  animation-delay:.4s;
}

.titleBottomYellowAndBlackUnderline.active:after{
  animation: titleBottomYellowAndBlackUnderline .4s ease-in-out;
  animation-fill-mode: forwards;
  animation-delay:.9s;
}

@keyframes titleBottomYellowAndBlackUnderline{
  0% {
    left:-100%;
  }

  100% {
    left:0;
  }
}




/*
// jobs index / career index / about index / .personality index
*/

.jobsIndexMvWrap.active,
.careerIndexMvWrap.active,
.aboutIndexMvWrap.active,
.personalityIndexMvWrap.active{
   opacity: 1;
}

.jobsIndexMvWrap.active:before,
.careerIndexMvWrap.active:before,
.aboutIndexMvWrap.active:before,
.personalityIndexMvWrap:before{
  animation: jobsIndexMvWrap .3s ease-out;
  animation-fill-mode: forwards;
  animation-delay: .5s;
  opacity: 1;
}

@keyframes jobsIndexMvWrap{
  0% {
    left:-100%;
  }

  100% {
     left:0;
  }
}


.jobsIndexMvImageWrap.active,
.careerIndexMvImageWrap.active,
.aboutIndexMvImageWrap.active,
.personalityIndexMvImageWrap.active{
  animation: jobsIndexMvImageWrap--pc .3s ease-out;
  animation-fill-mode: forwards;
  opacity: 1;
}

@media screen and (max-width:767px){
  .jobsIndexMvImageWrap.active,
  .careerIndexMvImageWrap.active,
  .aboutIndexMvImageWrap.active,
  .personalityIndexMvImageWrap.active{
    animation: jobsIndexMvImageWrap--sp .3s ease-out;
    animation-fill-mode: forwards;
  }
}

@keyframes jobsIndexMvImageWrap--pc{
  0% {
    width:0rem;
  }

  100% {
    width: 110.4rem;
  }
}

@keyframes jobsIndexMvImageWrap--sp{
  0% {
    width:0%;
  }

  100% {
    width: 100%;
  }
}


.jobsListBgslideInleft.active,
.careerFormationListBgslideInleft.active,
.aboutListBgslideInleft.active{
  opacity: 1;
}

.jobsListBgslideInleft.active:before,
.careerFormationListBgslideInleft.active:before,
.aboutListBgslideInleft.active:before{
  animation: jobsListBgslideInleft .2s ease-out;
  animation-fill-mode: forwards;
  opacity: 1;
}

@keyframes jobsListBgslideInleft {
  0% {
    transform: translateX(-100%);
  }
  
100% {
    transform: translateX(0%);
  }
}


.jobsListImageSlideInleftWithMask.active{
  animation: jobsListImageSlideInleftWithMask--pc .3s ease-in-out;
  animation-fill-mode: forwards;
  opacity: 1;
}

@media screen and (max-width:767px){
  .jobsListImageSlideInleftWithMask.active{
    animation: jobsListImageSlideInleftWithMask--sp .3s ease-in-out;
    animation-fill-mode: forwards;
  }
}



@keyframes jobsListImageSlideInleftWithMask--pc{
  0% {
    width:0rem;
  }
  
  100% {
    width:96.1rem;
  }
}

@keyframes jobsListImageSlideInleftWithMask--sp{
  0% {
    width:0%;
  }
  
  100% {
    width:100%;
  }
}



.missionValueDetailImageSlideInleftWithMask.active{
  animation: missionValueDetailImageSlideInleftWithMask--pc .3s ease-in-out;
  animation-fill-mode: forwards;
  opacity: 1;
}

@media screen and (max-width:767px){
  .missionValueDetailImageSlideInleftWithMask.active{
    animation: missionValueDetailImageSlideInleftWithMask--sp .3s ease-in-out;
    animation-fill-mode: forwards;
  }
}

@keyframes missionValueDetailImageSlideInleftWithMask--pc{
  0% {
    width:0rem;
  }
  
  100% {
    width:95.9rem;
  }
}

@keyframes missionValueDetailImageSlideInleftWithMask--sp{
  0% {
    width:0%;
  }
  
  100% {
    width:100%;
  }
}



.careerIndexMessageDescriptionWrap{
  animation: careerIndexMessageDescriptionWrap .5s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes careerIndexMessageDescriptionWrap {
  0% {
    box-shadow: 0 0 2rem rgba(0,0,0,0);
    opacity: 0;
    transform: scale(0.9);
  }
  
  50% {
    box-shadow: 0 0 2rem rgba(0,0,0,0.05);
    opacity: 1;
    transform: scale(1.015);
  }
  
  100% {
    box-shadow: 0 0 2rem rgba(0,0,0,0);
    opacity: 1;
    transform: scale(1);
  }
}

.careerFormationListFigure{
  animation: careerFormationListFigure--pc .5s ease-in-out;
  animation-fill-mode: forwards;
}

@media screen and (max-width:767px){
  .careerFormationListFigure{
    animation: careerFormationListFigure--sp .5s ease-in-out;
    animation-fill-mode: forwards;
  }
}

@keyframes careerFormationListFigure--pc{
  0% {
    box-shadow: 0 0 2rem rgba(0,0,0,0);
    opacity: 0;
    transform: scale(0.9) translateX(-5rem);
  }
  
  50% {
    box-shadow: 0 0 2rem rgba(0,0,0,0.05);
    opacity: 1;
    transform: scale(1.02) translateX(0);
  }
  
  100% {
    box-shadow: 0 0 2rem rgba(0,0,0,0);
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

@keyframes careerFormationListFigure--sp{
  0% {
    opacity: 0;
    transform: scale(0.9) translateX(-5rem);
  }
  
  50% {
    opacity: 1;
    transform: scale(1.02) translateX(0);
  }
  
  100% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}


/* jobs detail*/

.jobsDetailBottomYellowAndBlackUnderline{
  opacity:1;
}

.jobsDetailBottomYellowAndBlackUnderline.active:before{
  animation: jobsDetailBottomYellowAndBlackUnderline--pc 2s infinite ease-in-out;
  animation-delay:2s;
}

@media screen and (max-width:767px){
  .jobsDetailBottomYellowAndBlackUnderline.active:before{
    animation: jobsDetailBottomYellowAndBlackUnderline--sp 2s infinite ease-in-out;
    animation-delay:2s;
  }
}

@keyframes jobsDetailBottomYellowAndBlackUnderline--pc{
  0% {
    left:-4.8rem;
  }
  
  25% {
    left:15rem;
  }

  100% {
    left:19.8rem;
  }
}

@keyframes jobsDetailBottomYellowAndBlackUnderline--sp{
  0% {
    left:-4.8rem;
  }
  
  25% {
    left:20rem;
  }

  100% {
    left:24.8rem;
  }
}


/*
// pages
*/

.privacyMvHeadingIconWrap.active{
  animation: privacyMvHeadingIconWrap--pc .5s ease-out;
  animation-fill-mode: forwards;
  animation-delay:.5s;
  opacity: 1;
  transform-origin: bottom;
}

@media screen and (max-width:767px){
  .privacyMvHeadingIconWrap.active{
    animation: privacyMvHeadingIconWrap--sp .5s ease-out;
    animation-fill-mode: forwards;
    animation-delay:.5s;
    opacity: 1;
    transform-origin: bottom;
  }
}

@keyframes privacyMvHeadingIconWrap--pc{
  0% {
    height: 0rem;
  }

  100% {
    height: 29.64955rem;
  }
  /*
  0% {
    transform:scale(0) rotateY(0) skew(70deg,70deg);
    opacity: 0.8;
  }
  
  50% {
    transform:scale(0.4) rotateY(360deg) skew(50deg,50deg);
    opacity: 0.4;
  }

  100% {
    transform:scale(1) rotateY(720deg) skew(0deg,0deg);
    opacity: 1;
  }*/
}

@keyframes privacyMvHeadingIconWrap--sp{
  0% {
    height: 0rem;
  }

  100% {
    height: 25.97059rem;
  }
}


/*
// career data
*/

.barChart.active{
  opacity: 1;
}

.barChart.active:before{
  animation: barChart .5s ease-out;
  animation-fill-mode: forwards;
}

@keyframes barChart {
  0% {
    height: 0%;
  }
  
  100% {
    height: 100%;
  }
}


.staffList05ElmImageParts.active{
  animation: staffList05ElmImageParts--pc 1s ease-out;
  animation-fill-mode: forwards;
}

@media screen and (max-width:767px){
  .staffList05ElmImageParts.active{
    animation: staffList05ElmImageParts--sp .3s ease-out;
    animation-fill-mode: forwards;
  }
}

@keyframes staffList05ElmImageParts--pc {
  0% {
    top: 28.6rem;
    opacity: 0;
  }
  
  100% {
    top: 22.4rem;
    opacity: 1;
  }
}

@keyframes staffList05ElmImageParts--sp {
  0% {
    top: 34.1rem;
    opacity: 0;
  }
  
  100% {
    top: 30.2rem;
    opacity: 1;
  }
}

.personalityList09ElmChart.active{
  opacity: 1;
}

.personalityList09ElmChart.active:before{
  animation: personalityList09ElmChart--pc .5s ease-out;
  animation-fill-mode: forwards;
}

@media screen and (max-width:767px){
  .personalityList09ElmChart.active:before{
    animation: personalityList09ElmChart--sp .5s ease-out;
    animation-fill-mode: forwards;
  }
}

@keyframes personalityList09ElmChart--pc {
  0% {
    height: 0%;
  }
  
  100% {
    height: 100%;
  }
}

@keyframes personalityList09ElmChart--sp {
  0% {
    width: 0%;
  }
  
  100% {
    width: 100%;
  }
}



/*
// common
*/

.footerSNS{
  animation: footerSNS .5s ease-in-out;
  opacity:1;
  transform-origin: bottom center;
}
    
@keyframes footerSNS{
  0% {
    transform: scale(1);
  }
  
  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}