/*
===== common ===========================*/
/* canvas animation
--------------------*/
.fig_canvas {
  position: absolute;
  /*border: 1px solid green;*/
}

/* slide up animation
--------------------*/
.slideup {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 480ms cubic-bezier(0.455, 0.03, 0.515, 0.955), transform 480ms cubic-bezier(0.13, 0.45, 0.45, 0.94);
}

.slideup.show {
  opacity: 1;
  transform: translateY(0);
}

.fadein {
  opacity: 0;
  transition: opacity 680ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.fadein.show {
  opacity: 1;
}


/* delay animation
--------------------*/
.delay-section h2, .delay-section .view_more, .delay-section p,
.delay-item h1, .delay-item h2, .delay-item h3, .delay-item h4,
.delay-item p, .delay-item figcaption,
.delay-item ul, .delay-item dt, .delay-item dd, .delay-item tr {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 480ms 480ms cubic-bezier(0.455, 0.03, 0.515, 0.955), transform 480ms 480ms cubic-bezier(0.13, 0.45, 0.45, 0.94);
}

.delay-section.show h2, .delay-section.show .view_more, .delay-section.show p,
.delay-item.show h1, .delay-item.show h2, .delay-item.show h3, .delay-item.show h4,
.delay-item.show p, .delay-item.show figcaption,
.delay-item.show ul, .delay-item.show dt, .delay-item.show dd, .delay-item.show tr {
  opacity: 1;
  transform: translateY(0);
}

.delay-section p,
.delay-item p, .delay-item figcaption,
.delay-item ul, .delay-item dt, .delay-item dd {
  transition-delay: 640ms;
}

.delay-item dt:nth-child(1) { transition-delay: 640ms; }
.delay-item dt:nth-child(2) { transition-delay: 720ms; }
.delay-item dt:nth-child(3) { transition-delay: 800ms; }
.delay-item dt:nth-child(4) { transition-delay: 880ms; }
.delay-item dt:nth-child(5) { transition-delay: 960ms; }
.delay-item dt:nth-child(6) { transition-delay: 1040ms; }
.delay-item dt:nth-child(7) { transition-delay: 1120ms; }
.delay-item dt:nth-child(8) { transition-delay: 1200ms; }
.delay-item dt:nth-child(9) { transition-delay: 1280ms; }
.delay-item dt:nth-child(10) { transition-delay: 1360ms; }
.delay-item dt:nth-child(11) { transition-delay: 1440ms; }
.delay-item dt:nth-child(12) { transition-delay: 1520ms; }
.delay-item dt:nth-child(13) { transition-delay: 1600ms; }
.delay-item dt:nth-child(14) { transition-delay: 1680ms; }
.delay-item dt:nth-child(15) { transition-delay: 1760ms; }

.delay-item dd:nth-child(1), .delay-item tr:nth-child(1) { transition-delay: 720ms; }
.delay-item dd:nth-child(2), .delay-item tr:nth-child(2) { transition-delay: 800ms; }
.delay-item dd:nth-child(3), .delay-item tr:nth-child(3) { transition-delay: 880ms; }
.delay-item dd:nth-child(4), .delay-item tr:nth-child(4) { transition-delay: 960ms; }
.delay-item dd:nth-child(5), .delay-item tr:nth-child(5) { transition-delay: 1040ms; }
.delay-item dd:nth-child(6), .delay-item tr:nth-child(6) { transition-delay: 1120ms; }
.delay-item dd:nth-child(7), .delay-item tr:nth-child(7) { transition-delay: 1200ms; }
.delay-item dd:nth-child(8), .delay-item tr:nth-child(8) { transition-delay: 1280ms; }
.delay-item dd:nth-child(9), .delay-item tr:nth-child(9) { transition-delay: 1360ms; }
.delay-item dd:nth-child(10), .delay-item tr:nth-child(10) { transition-delay: 1440ms; }
.delay-item dd:nth-child(11), .delay-item tr:nth-child(11) { transition-delay: 1520ms; }
.delay-item dd:nth-child(12), .delay-item tr:nth-child(12) { transition-delay: 1600ms; }
.delay-item dd:nth-child(13), .delay-item tr:nth-child(13) { transition-delay: 1680ms; }
.delay-item dd:nth-child(14), .delay-item tr:nth-child(14) { transition-delay: 1760ms; }
.delay-item dd:nth-child(15), .delay-item tr:nth-child(15) { transition-delay: 1840ms; }

.delay-section .pic, .delay-section .fig_canvas,
.delay-item .pic, .delay-item .thumb, .delay-item img,
.delay-item .line, .delay-item hr, .delay-item nav {
  opacity: 0;
  transform: translateY(0);
  transition: opacity 680ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.delay-section.show .pic, .delay-section.show .fig_canvas,
.delay-item.show .pic, .delay-item.show .thumb, .delay-item.show img,
.delay-item.show .line, .delay-item.show hr, .delay-item.show nav {
  opacity: 1;
}
.delay-item img.lazyload {
  opacity: 0;
}

.delay-item nav {
  transition-delay: 480ms;
}

.anim-delay {
  transition-delay: 480ms !important;
}
.anim-delay2 {
  transition-delay: 680ms !important;
}
/*
===== index (top page) ===========================*/

/* section bg
--------------------*/
#index .sec_about .fig_canvas {
  top: 50px;
  left: -120px;
  width: 440px;
  height: 440px;
}
#index .sec_projects .fig_canvas {
  top: -90px;
  right: -120px;
  width: 500px;
  height: 500px;
}
#index .sec_prime_media_line .fig_canvas {
  top: 10px;
  right: -120px;
  width: 500px;
  height: 500px;
}
#index .sec_news .fig_canvas {
  top: -150px;
  right: -110px;
  width: 380px;
  height: 380px;
}

.ani {
    display: none;
}


/* main visual animation
--------------------*/
#index .sec_main header,
#index .sec_main h1 img,
#index .sec_main .nav_main,
#index .sec_main .nav_main_sp,
#index .sec_main .scroll_down {
  opacity: 0;
  transition: 1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

#index .sec_main.show header,
#index .sec_main.show h1 img,
#index .sec_main.show .nav_main,
#index .sec_main.show .nav_main_sp,
#index .sec_main.show .scroll_down {
  opacity: 1;
}

#index .sec_main.show h1 img:nth-child(even) {
  transition-delay: 480ms;
}

#index .sec_main.show header,
#index .sec_main.show .nav_main,
#index .sec_main.show .nav_main_sp,
#index .sec_main.show .scroll_down {
  transition-delay: 680ms;
}

#index .sec_main.show.about h1,
#index .sec_main.show.projects h1,
#index .sec_main.show.prime_media_line h1 {
  opacity: 0;
  transition: 480ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

#index .sec_main .sec_over {
  display: block;
}

#index .sec_main .sec_over img {
  display: block;
  margin: 0 auto;
}

#index .sec_main .sec_over .fig_canvas {
  opacity: 0;
  transform: scale(0.8, 0.8);
  transition: 480ms cubic-bezier(0.13, 0.45, 0.45, 0.94);
  top: -26%;
  left: 26.78575%;
  width: 46.4285%;
  height: 200%;
}
#index .sec_main .sec_over.projects .fig_canvas,
#index .sec_main .sec_over.prime_media_line .fig_canvas {
    left: 22%;
    width: 56%;
}

#index .sec_main .sec_over img,
#index .sec_main .sec_over .view_more {
  position: relative;
  opacity: 0;
  transition: 480ms cubic-bezier(0.13, 0.45, 0.45, 0.94);
}

#index .sec_main.show.about .sec_over.about .fig_canvas,
#index .sec_main.show.projects .sec_over.projects .fig_canvas,
#index .sec_main.show.prime_media_line .sec_over.prime_media_line .fig_canvas {
  opacity: 1;
  transform: scale(1, 1);
  transition-duration: 1s;
}

#index .sec_main.show.about .sec_over.about img,
#index .sec_main.show.projects .sec_over.projects img,
#index .sec_main.show.prime_media_line .sec_over.prime_media_line img,
#index .sec_main.show.about .sec_over.about .view_more,
#index .sec_main.show.projects .sec_over.projects .view_more,
#index .sec_main.show.prime_media_line .sec_over.prime_media_line .view_more {
  opacity: 1;
  transition-duration: 1s;
  transition-delay: 680ms;
}

#index .sec_main.show.about .sec_over.about img:nth-child(even),
#index .sec_main.show.projects .sec_over.projects img:nth-child(even),
#index .sec_main.show.prime_media_line .sec_over.prime_media_line img:nth-child(even) {
  transition-delay: 240ms;
}

/* scroll bar animation
--------------------*/
#index .scroll_down .bar,
#index .view_more .bar {
  animation: barAnim 3s infinite cubic-bezier(0.79, 0.17, 0.15, 0.96) !important;
}

@keyframes barAnim {
  0%   {transform:scaleX(1);transform-origin:100% 0}
  11.25%  {transform:scaleX(0);transform-origin:100% 0}
  37.5%  {transform:scaleX(0);transform-origin:0 0}
  52.5%  {transform:scaleX(1);transform-origin:0 0}
  75% {transform:scaleX(1);transform-origin:100% 0}
  100% {transform:scaleX(1);transform-origin:100% 0}
}
@keyframes barAnimY {
  0%   {transform:scaleY(1);transform-origin:0 100%}
  15%  {transform:scaleY(0);transform-origin:0 100%}
  50%  {transform:scaleY(0);transform-origin:0 0}
  70%  {transform:scaleY(1);transform-origin:0 0}
  100% {transform:scaleY(1);transform-origin:0 100%}
}


@media screen and (max-width:768px) {
  #index .sec_main .nav_main_sp ul li .bar {
    transition: .5s;
  }
  #index .sec_main .nav_main_sp ul li.current .bar,
  #index .sec_main.show.about .nav_main_sp ul li.nav_about .bar,
  #index .sec_main.show.projects .nav_main_sp ul li.nav_projects .bar,
  #index .sec_main.show.prime_media_line .nav_main_sp ul li.nav_prime_media_line .bar {
    width: 40px;
  }

  #index .scroll_down .bar {
    animation: barAnimY 3s infinite cubic-bezier(0.79, 0.17, 0.15, 0.96) !important;
  }
  #index .view_more .bar {
    animation: none !important;
  }

  #index .sec_about .fig_canvas {
    top: 20px;
    left: -15px;
    width: 300px;
    height: 300px;
  }
  #index .sec_projects .fig_canvas {
    top: 10px;
    left: 60px;
    right: auto;
    width: 250px;
    height: 250px;
  }
  #index .sec_prime_media_line .fig_canvas {
    top: 20px;
    right: 10px;
    width: 250px;
    height: 250px;
  }
  #index .sec_news .fig_canvas {
    top: -70px;
    right: -40px;
    width: 280px;
    height: 280px;
  }

  #index .sec_main .sec_over .fig_canvas,
  #index .sec_main .sec_over img,
  #index .sec_main .sec_over .view_more {
    transition: 1s;
  }

  #index .sec_main h1 {
    z-index: 2;
    height: 60%;
  }
  #index .sec_main .sec_over {
    z-index: 1;
  }
  #index .sec_main.show.about .sec_over.about,
  #index .sec_main.show.projects .sec_over.projects ,
  #index .sec_main.show.prime_media_line .sec_over.prime_media_line {
    z-index: 3;
  }

  #index .sec_main .sec_over .fig_canvas,
  #index .sec_main .sec_over.projects .fig_canvas,
  #index .sec_main .sec_over.prime_media_line .fig_canvas {
    top: -14vw;
    left: 0;
    width: 100vw;
    height: 100vw;
  }
}

/*
===== about_index ===========================*/

#about_index .fig_canvas.fig_canvas_01 {
  top: 0;
  left: -15%;
  width: 130%;
  height: 140%;
  opacity: 0;
  transform: scale(0.8, 0.8);
  transition: 1s cubic-bezier(0.13, 0.45, 0.45, 0.94);
}
#about_index .fig_canvas.fig_canvas_01.show {
  opacity: 1;
  transform: scale(1, 1);
}

#about_index .fig_canvas.fig_canvas_02 {
  top: 0;
  left: 100px;
  width: 600px;
  height: 250px;
}

#about_index .sec_02 .content {
  opacity: 0;
  transition: opacity 480ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#about_index .sec_02 .content.show {
  opacity: 1;
}

@media screen and (max-width:768px) {
  #about_index .fig_canvas.fig_canvas_01 {
    height: 100%;
  }
  #about_index .fig_canvas.fig_canvas_02 {
    top: 0px;
    left: 3%;
    width: 103%;
    height: 90%;
  }
  #about_index .sec_01 .ms_06 .pic {
    height: 200px;
  }
}
/*
===== news_index ===========================*/

#news_index .fig_canvas.fig_canvas_01 {
  top: 0;
  left: -100px;
  width: 450px;
  height: 450px;
  opacity: 0;
  transform: scale(0.8, 0.8);
  transition: 1s cubic-bezier(0.13, 0.45, 0.45, 0.94);
}
#news_index .fig_canvas.fig_canvas_01.show {
  opacity: 1;
  transform: scale(1, 1);
}
#news_index .nav_more .fig_canvas {
  top: -20px;
  left: calc(50% - 50px);;
  width: 100px;
  height: 100px;
}
@media screen and (max-width:768px) {
  #news_index .fig_canvas.fig_canvas_01 {
    top: -30px;
    left: auto;
    right: 0;
    width: 260px;
    height: 260px;
  }
  #news_index .nav_more .fig_canvas {
    top: -15px;
    left: calc(50% - 35px);;
    width: 70px;
    height: 70px;
  }
}

/*
===== news_detail ===========================*/

#news_detail .nav_back .fig_canvas {
  top: -25px;
  left: calc(50% - 95px);;
  width: 190px;
  height: 190px;
}

@media screen and (max-width:768px) {
  #news_detail .nav_back .fig_canvas {
    top: -20px;
    left: calc(50% - 70px);;
    width: 140px;
    height: 140px;
  }
}

/*
===== projects_index ===========================*/

#projects_index .fig_canvas.fig_canvas_01 {
  top: -30px;
  right: 100px;
  width: 500px;
  height: 500px;
  opacity: 0;
  transform: scale(0.8, 0.8);
  transition: 1s cubic-bezier(0.13, 0.45, 0.45, 0.94);
}
#projects_index .fig_canvas.fig_canvas_01.show {
  opacity: 1;
  transform: scale(1, 1);
}
#projects_index .nav_more .fig_canvas {
  top: -20px;
  left: calc(50% - 50px);;
  width: 100px;
  height: 100px;
}
@media screen and (max-width:768px) {
  #projects_index .fig_canvas {
    top: -70px;
    right: 0;
    width: 260px;
    height: 260px;
  }
  #projects_index .nav_more .fig_canvas {
    top: -15px;
    left: calc(50% - 35px);;
    width: 70px;
    height: 70px;
  }
}

/*
===== projects_detail ===========================*/

#projects_detail .sec_slide {
  opacity: 0;
  height: 744px;
}
#projects_detail .sec_slide.fadein.show {
  opacity: 1;
}
#projects_detail .sec_desc {
  opacity: 0;
}
#projects_detail .sec_desc.delay-item.show {
  opacity: 1;
}

#projects_detail .nav_back .fig_canvas {
  top: -25px;
  left: calc(50% - 95px);;
  width: 190px;
  height: 190px;
}

@media screen and (max-width:768px) {
  #projects_detail .sec_slide {
    height: 1000px;
  }
  #projects_detail .sec_slide.fadein.show {
    height: auto;
  }
  #projects_detail .nav_back .fig_canvas {
    top: -20px;
    left: calc(50% - 70px);;
    width: 140px;
    height: 140px;
  }
}

/*
===== prime_media_line_index ===========================*/

#prime_media_line_index .fig_canvas {
  top: 30px;
  right: 450px;
  width: 300px;
  height: 300px;
  opacity: 0;
  transform: scale(0.8, 0.8);
  transition: 1s cubic-bezier(0.13, 0.45, 0.45, 0.94);
}
#prime_media_line_index .fig_canvas.show {
  opacity: 0.3;
  transform: scale(1, 1);
}
@media screen and (max-width:768px) {
  #prime_media_line_index .fig_canvas {
    top: -40px;
    right: -50px;
    width: 300px;
    height: 300px;
  }
}

/*
===== prime_media_line_second ===========================*/

.prime_media_line_second .nav_back .fig_canvas {
  top: -25px;
  left: calc(50% - 95px);;
  width: 190px;
  height: 190px;
}

@media screen and (max-width:768px) {
  .prime_media_line_second .nav_back .fig_canvas {
    top: -20px;
    left: calc(50% - 70px);;
    width: 140px;
    height: 140px;
  }
}