/* -------------------------------------------------------- */
/*                                                          */
/*      Animation                                           */
/*                                                          */
/* -------------------------------------------------------- */
#mission .msn_redbg:after, .common_top_h2_ttl:after, .top_news_bg:after, .sitemap:after, .top_news_list ul:after, #inquiry > div.wrap > ul:after {
  width: 0;
}

.fadeIn, .slideInUp, .slideInLeft, .sbi_item, .top_special_box_item, .top_member_box_item {
  opacity: 0;
}

.view#mission .msn_redbg:after {
  animation: extend_width 0.3s ease forwards;
}
.view#mission .msn_redbg.msn_delay01:after {
  animation-delay: 0.1s;
}
.view#mission .msn_redbg.msn_delay02:after {
  animation-delay: 0.2s;
}
.view#mission .msn_redbg.msn_delay03:after {
  animation-delay: 0.3s;
}
.view#mission .msn_redbg.msn_delay04:after {
  animation-delay: 0.4s;
}
.view#mission .msn_redbg.msn_delay05:after {
  animation-delay: 0.5s;
}
.view#mission .msn_redbg.msn_delay06:after {
  animation-delay: 0.6s;
}
.view.common_top_h2_ttl:after {
  animation: extend_width 0.2s 0.4s ease forwards;
}
.view.common_top_h2_ttl#news:after {
  animation: extend_width 0.2s 0.7s ease forwards;
}
.view.top_news_list ul:after {
  animation: extend_width 0.2s 1s ease forwards;
}
.view#inquiry > div.wrap > ul:after {
  animation: extend_width 0.2s 0.5s ease forwards;
}
.view.top_news_bg:after, .view.sitemap:after {
  animation: extend_width 0.2s 0s ease forwards;
}
.view.sbi_item {
  animation: fadeIn 0.2s ease forwards;
}
.view.sbi_item:nth-child(1) {
  animation-delay: 0.1s;
}
.view.sbi_item:nth-child(2) {
  animation-delay: 0.2s;
}
.view.sbi_item:nth-child(3) {
  animation-delay: 0.3s;
}
.view.sbi_item:nth-child(4) {
  animation-delay: 0.4s;
}
.view.sbi_item:nth-child(5) {
  animation-delay: 0.5s;
}
.view.sbi_item:nth-child(6) {
  animation-delay: 0.6s;
}
.view.sbi_item:nth-child(7) {
  animation-delay: 0.7s;
}
.view.sbi_item:nth-child(8) {
  animation-delay: 0.8s;
}
.view.fadeIn, .view .fadeIn {
  animation: fadeIn ease forwards;
}
.view.slideInLeft, .view .slideInLeft {
  animation: slideInLeft ease forwards;
}
.view.slideInUp, .view .slideInUp {
  animation: slideInUp ease forwards;
}

@keyframes mission01 {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%, 100% {
    opacity: 1;
  }
}
@keyframes extend_width {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes extend_height {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideInLeft {
  0% {
    transform: translateX(-500px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideInUp {
  0% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes buruburu {
  0% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  31% {
    transform: translate(2px, 2px) rotateZ(1deg);
  }
  32% {
    transform: translate(0px, 2px) rotateZ(0deg);
  }
  33% {
    transform: translate(2px, 0px) rotateZ(-1deg);
  }
  34% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  35% {
    transform: translate(2px, 2px) rotateZ(1deg);
  }
  36% {
    transform: translate(0px, 2px) rotateZ(0deg);
  }
  37% {
    transform: translate(2px, 0px) rotateZ(-1deg);
  }
  38% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  39% {
    transform: translate(2px, 2px) rotateZ(1deg);
  }
  40% {
    transform: translate(0px, 2px) rotateZ(0deg);
  }
  41% {
    transform: translate(2px, 0px) rotateZ(-1deg);
  }
  42% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  43% {
    transform: translate(2px, 2px) rotateZ(1deg);
  }
  44% {
    transform: translate(0px, 2px) rotateZ(0deg);
  }
  45% {
    transform: translate(2px, 0px) rotateZ(-1deg);
  }
  46% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  100% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
}
.delay_5 {
  animation-delay: 0.05s !important;
}

.delay_10 {
  animation-delay: 0.1s !important;
}

.delay_15 {
  animation-delay: 0.15s !important;
}

.delay_20 {
  animation-delay: 0.2s !important;
}

.delay_25 {
  animation-delay: 0.25s !important;
}

.delay_30 {
  animation-delay: 0.3s !important;
}

.delay_35 {
  animation-delay: 0.35s !important;
}

.delay_40 {
  animation-delay: 0.4s !important;
}

.delay_45 {
  animation-delay: 0.45s !important;
}

.delay_50 {
  animation-delay: 0.5s !important;
}

.delay_55 {
  animation-delay: 0.55s !important;
}

.delay_60 {
  animation-delay: 0.6s !important;
}

.delay_65 {
  animation-delay: 0.65s !important;
}

.delay_70 {
  animation-delay: 0.7s !important;
}

.delay_75 {
  animation-delay: 0.75s !important;
}

.delay_80 {
  animation-delay: 0.8s !important;
}

.delay_85 {
  animation-delay: 0.85s !important;
}

.delay_90 {
  animation-delay: 0.9s !important;
}

.delay_95 {
  animation-delay: 0.95s !important;
}

.delay_100 {
  animation-delay: 1s !important;
}

.delay_105 {
  animation-delay: 1.05s !important;
}

.delay_110 {
  animation-delay: 1.1s !important;
}

.delay_115 {
  animation-delay: 1.15s !important;
}

.delay_120 {
  animation-delay: 1.2s !important;
}

.delay_125 {
  animation-delay: 1.25s !important;
}

.delay_130 {
  animation-delay: 1.3s !important;
}

.delay_135 {
  animation-delay: 1.35s !important;
}

.delay_140 {
  animation-delay: 1.4s !important;
}

.delay_145 {
  animation-delay: 1.45s !important;
}

.delay_150 {
  animation-delay: 1.5s !important;
}

.delay_155 {
  animation-delay: 1.55s !important;
}

.delay_160 {
  animation-delay: 1.6s !important;
}

.delay_165 {
  animation-delay: 1.65s !important;
}

.delay_170 {
  animation-delay: 1.7s !important;
}

.delay_175 {
  animation-delay: 1.75s !important;
}

.delay_180 {
  animation-delay: 1.8s !important;
}

.delay_185 {
  animation-delay: 1.85s !important;
}

.delay_190 {
  animation-delay: 1.9s !important;
}

.delay_195 {
  animation-delay: 1.95s !important;
}

.delay_200 {
  animation-delay: 2s !important;
}

.delay_205 {
  animation-delay: 2.05s !important;
}

.delay_210 {
  animation-delay: 2.1s !important;
}

.delay_215 {
  animation-delay: 2.15s !important;
}

.delay_220 {
  animation-delay: 2.2s !important;
}

.delay_225 {
  animation-delay: 2.25s !important;
}

.delay_230 {
  animation-delay: 2.3s !important;
}

.delay_235 {
  animation-delay: 2.35s !important;
}

.delay_240 {
  animation-delay: 2.4s !important;
}

.delay_245 {
  animation-delay: 2.45s !important;
}

.delay_250 {
  animation-delay: 2.5s !important;
}

.duration_10 {
  animation-duration: 0.1s !important;
}

.duration_20 {
  animation-duration: 0.2s !important;
}

.duration_30 {
  animation-duration: 0.3s !important;
}

.duration_40 {
  animation-duration: 0.4s !important;
}

.duration_50 {
  animation-duration: 0.5s !important;
}

.duration_60 {
  animation-duration: 0.6s !important;
}

.duration_70 {
  animation-duration: 0.7s !important;
}

.duration_80 {
  animation-duration: 0.8s !important;
}

.duration_90 {
  animation-duration: 0.9s !important;
}

.duration_100 {
  animation-duration: 1s !important;
}

@media all and (min-width: 601px) {
  /* breakpoint */
  #inquiry > div.wrap > a:first-of-type:after {
    height: 0;
  }

  .top_service_box_item {
    opacity: 0;
  }

  .view#inquiry > div.wrap > a:first-of-type:after {
    animation: extend_height 0.2s 0.8s ease forwards;
  }
  .view.top_service_box_item:nth-child(3n+1) {
    animation: slideInUp 0.7s 0.1s ease forwards;
  }
  .view.top_service_box_item:nth-child(3n+2) {
    animation: slideInUp 0.7s 0.3s ease forwards;
  }
  .view.top_service_box_item:nth-child(3n) {
    animation: slideInUp 0.7s 0.5s ease forwards;
  }
  .view.top_special_box_item.slide01 {
    animation: slideInUp 0.7s 0.1s ease forwards;
  }
  .view.top_special_box_item.slide02 {
    animation: slideInUp 0.7s 0.3s ease forwards;
  }
  .view.top_special_box_item.slide03 {
    animation: slideInUp 0.7s 0.5s ease forwards;
  }
  .view.top_member_box_item:nth-child(5n+1) {
    animation: slideInUp 0.7s 0.1s ease forwards;
  }
  .view.top_member_box_item:nth-child(5n+2) {
    animation: slideInUp 0.7s 0.3s ease forwards;
  }
  .view.top_member_box_item:nth-child(5n+3) {
    animation: slideInUp 0.7s 0.5s ease forwards;
  }
  .view.top_member_box_item:nth-child(5n+4) {
    animation: slideInUp 0.7s 0.7s ease forwards;
  }
  .view.top_member_box_item:nth-child(5n) {
    animation: slideInUp 0.7s 0.9s ease forwards;
  }

  /* breakpoint end */
}
@media screen and (max-width: 600px) {
  /* breakpoint */
  #inquiry > div.wrap > a:first-of-type:after {
    width: 0;
  }

  .view#inquiry > div.wrap > a:first-of-type:after {
    animation: extend_width 0.2s 0.8s ease forwards;
  }
  .view.top_service_box_item:nth-child(1) {
    animation-delay: 0.05s;
  }
  .view.top_service_box_item:nth-child(2) {
    animation-delay: 0.1s;
  }
  .view.top_service_box_item:nth-child(3) {
    animation-delay: 0.15s;
  }
  .view.top_service_box_item:nth-child(4) {
    animation-delay: 0.2s;
  }
  .view.top_service_box_item:nth-child(5) {
    animation-delay: 0.25s;
  }
  .view.top_service_box_item:nth-child(6) {
    animation-delay: 0.3s;
  }
  .view.top_service_box_item:nth-child(7) {
    animation-delay: 0.35s;
  }
  .view.top_service_box_item:nth-child(8) {
    animation-delay: 0.4s;
  }
  .view.top_service_box_item:nth-child(9) {
    animation-delay: 0.45s;
  }
  .view.top_service_box_item:nth-child(10) {
    animation-delay: 0.5s;
  }
  .view.top_service_box_item:nth-child(11) {
    animation-delay: 0.55s;
  }
  .view.top_service_box_item:nth-child(12) {
    animation-delay: 0.6s;
  }
  .view.top_service_box_item:nth-child(13) {
    animation-delay: 0.65s;
  }
  .view.top_service_box_item:nth-child(14) {
    animation-delay: 0.7s;
  }
  .view.top_service_box_item:nth-child(15) {
    animation-delay: 0.75s;
  }
  .view.top_service_box_item:nth-child(16) {
    animation-delay: 0.8s;
  }
  .view.top_service_box_item:nth-child(17) {
    animation-delay: 0.85s;
  }
  .view.top_service_box_item:nth-child(18) {
    animation-delay: 0.9s;
  }
  .view .buruburu {
    display: inline-block;
    animation: buruburu 5s  infinite;
  }

  .top_special_box_item {
    animation: fadeIn 0.5s 0.1s ease forwards;
  }

  .top_member_box_item {
    animation: fadeIn 0.5s 0.1s ease forwards;
  }

  /* breakpoint end */
}