.view{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.view.active{
  opacity: 1;
  transform: translateY(0);
}
.fadeview{
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.fadeview.active{
  opacity: 1;
}
.view[data-delay],
.fadeview[data-delay] {
  transition-delay: var(--delay, 0s);
}

/*トップページ*/

h2 .type-char,
h3 .type-char {
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

h2 .type-char.show,
h3 .type-char.show {
  opacity: 1;
  visibility: visible;
}

.type-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: .25em;
  vertical-align: -0.15em;
  animation: caret-blink .7s steps(1, end) infinite;
}

@keyframes caret-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .type-char { opacity: 1 !important; }
  .type-caret { display: none !important; }
}

#top #news .left dl dt,
#top #news .left dl dd,
#top #news .left ul li{
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.8s ease;
}
#top #news.active .left dl dt,
#top #news.active .left dl dd,
#top #news.active .left ul li{
  opacity:1;
  transform: translateY(0);
}
#top #news .right ul{
  opacity: 0;
  transition: all 0.8s ease;
}
#top #news.active .right ul{
  opacity:1;
}
#top #news .right ul li{
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.8s ease;
}
#top #news.active .right ul li{
  opacity:1;
  transform: translateY(0);
}


#top .concept .marquee{
  opacity: 0;
  transition: all 0.8s ease;
}
#top .concept.active .marquee{
  opacity:1;
}

#top .concept .textbox h2,
#top .concept .textbox h3,
#top .concept .textbox p{
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.8s ease;
}
#top .concept.active .textbox h2,
#top .concept.active .textbox h3,
#top .concept.active .textbox p{
  opacity:1;
  transform: translateY(0);
}

#top .between figure{
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}
#top .between.active figure{
  opacity:1;
  transform: translateY(0);
}

#top .strengths h2,
#top .strengths h3,
#top .strengths h4,
#top .strengths p,
#top .strengths btn{
  opacity: 0;
  transition: all 0.8s ease;
  transform: translateY(10px);
}
#top .strengths.active h2,
#top .strengths.active h3,
#top .strengths.active h4,
#top .strengths.active p,
#top .strengths.active btn{
  opacity:1;
  transform: translateY(0);
}

#top .strengths figure{
  opacity: 0;
  transition: all 0.8s ease;
}
#top .strengths.active figure{
  opacity:1;
}

#top .our_services .title dl dt,
#top .our_services .title dl dd,
#top .our_services .title p,
#top .our_services ul li{
  opacity: 0;
  transition: all 0.8s ease;
  transform: translateY(10px);
}
#top .our_services.active .title dl dt,
#top .our_services.active .title dl dd,
#top .our_services.active .title p,
#top .our_services.active ul li{
  opacity:1;
  transform: translateY(0);
}





/*下層ページ共通*/

html body .common_title.fadeview h1,
html body .common_title.fadeview h2{
  opacity: 0;
  transition: opacity 0 ease;
}

html.wf-active body .common_title.fadeview h1,
html.wf-active body .common_title.fadeview h2{
  opacity: 1;
}

html body .common_title.fadeview .title_box h1,
html body .common_title.fadeview .title_box h2,
html body .common_title.fadeview .pan{
  opacity: 0;
  transition: all 1s ease;
  transform: translateY(10px);
}
html.wf-active body .common_title.fadeview.active .title_box h1,
html.wf-active body .common_title.fadeview.active .title_box h2,
html.wf-active body .common_title.fadeview.active .pan{
  opacity: 1;
  transform: translateY(0);
}

.common_title.fadeview .title_box h1{
  transition-delay: 0.1s !important;
}
.common_title.fadeview .title_box h2{
  transition-delay: 0.2s !important;
}
.common_title.fadeview .pan{
  transition-delay: 0.3s !important;
}


html body#strengths .mv h2{
  opacity: 0;
  transition: all 1s ease;
  transform: translateY(10px);
}

html.wf-active body#strengths .mv h2{
  opacity: 1;
  transform: translateY(0);
}