/**************************************************************
* アニメーション
**************************************************************/

.js-fadein {
  transform: translateY(50px);
  transition: 1s;
  opacity: 0;
}
.js-fadein.animated {
  transform: translateZ(0);
  opacity: 1;
}

.message__heading-block h2 span {
  transform: translateY(-50px);
  transition: 1.5s;
  opacity: 0;
}

.message__heading-block h2 span:last-child {
  transform: translateY(-50px);
  transition: 1.5s;
  opacity: 0;
  transition-delay: 400ms;
}

.message__heading-block.animated h2 span {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.message__heading-block.animated h2 span:last-child {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.message__contents.js-fadein {
  transform: translate3d(0, 0, 0);
  transition: 1s;
  opacity: 1;
}

.message__contents p {
  transform: translate3d(0, 50px, 0);
  transition: 1s;
  opacity: 0;
}

.message__contents p:first-child  { transition-delay: 200ms;  }
.message__contents p:nth-child(2) { transition-delay: 400ms;  }
.message__contents p:nth-child(3) { transition-delay: 600ms;  }
.message__contents p:nth-child(4) { transition-delay: 800ms;  }
.message__contents p:nth-child(5) { transition-delay: 1000ms; }
.message__contents p:nth-child(6) { transition-delay: 1200ms; }

.message__contents figure {
  transform: translate3d(0, 50px, 0);
  transition: 1s;
  opacity: 0;
  transition-delay: 800ms;
}

.message__contents.animated p {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.message__contents.animated figure {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.about__body tr:nth-child(odd) td:first-child {
  transform: translate3d(50px, 0, 0);
  transition: 1s;
  opacity: 0;
}

.about__body tr:nth-child(odd) td:last-child {
  transform: translate3d(-50px, 0, 0);
  transition: 1s;
  opacity: 0;
}

.about__body tr:nth-child(even) td:first-child {
  transform: translate3d(-50px, 0, 0);
  transition: 1s;
  opacity: 0;
}

.about__body tr:nth-child(even) td:last-child {
  transform: translate3d(50px, 0, 0);
  transition: 1s;
  opacity: 0;
}

.about__body tr.animated:nth-child(odd) td:first-child {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.about__body tr.animated:nth-child(odd) td:last-child {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.about__body tr.animated:nth-child(even) td:first-child {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.about__body tr.animated:nth-child(even) td:last-child {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.work-visual[class*="--2"] {
  transition-delay: 200ms;
}

.work-visual[class*="--3"] {
  transition-delay: 400ms;
}

.job-bottom-visual[class*="--2"] {
  transition-delay: 200ms;
}

.job-bottom-visual[class*="--3"] {
  transition-delay: 400ms;
}

/* ABOUT PAGE */
.js-fadein.greeting__visual {
  transform: translateZ(0) translateY(400px);
}

.js-fadein.greeting__visual.animated {
  transform: translateZ(0) translateY(-20px);
}


@media all and (min-width: 1024px) {
  .js-fadein.greeting__visual.animated {
    transform: translateZ(0) translateY(200px);
  }

  .office-entry:nth-child(2) {
      transition-delay: 200ms;
  }

  .office-entry:nth-child(3) {
      transition-delay: 400ms;
  }
}

/* 背景が伸びて表示 */
.bgextend {
  animation-name:bg-extend-anime-base;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden; /* はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bg-extend-anime-base{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bg-appear {
  animation-name:bg-extend-anime-second;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bg-extend-anime-second{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*左から右*/
.bg-lr-extend::before {
  animation-name:bg-lr-extend-anime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--wp--preset--color--primary); /* 伸びる背景色の設定 */
}
@keyframes bg-lr-extend-anime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/* work */
@media (min-width: 768px) and (max-width: 1023px) {
  .work {
    padding-top: 5%;
    padding-bottom: 35%;
  }
}

@media (max-width: 1023px) {
  .work__contents {
    padding-bottom: 15%
  }
}

@media (min-width: 1024px) {
  .work {
    padding-top: 20%!important;
    padding-bottom: 20%!important;
  }
}

@media (min-width: 1024px) and (max-width: 1499px) {
  .work .horizontal-ticker:nth-child(1) span {
    top: 2rem;
  }
}

@media (min-width: 1500px) {
  .work .horizontal-ticker:nth-child(1) span {
    top: -1rem;
  }
}