@charset "utf-8";

/* -----------------------------------------------------------------
 背景ラインアニメーション
----------------------------------------------------------------- */
.cms_deco {
  position: absolute;
  z-index: 0;
}

/* 発火時 */
.cms_deco.is_active #deco_mask01{
  animation: deco01_draw_line .6s reverse forwards;
}
#deco_item10.is_active .mask_line01 {
  animation: deco03_draw_line01 6.3s linear infinite alternate;
}
#deco_item10.is_active .mask_line02 {
  animation: deco03_draw_line02 6.3s linear infinite alternate;
}
.cms_deco.is_active #deco_mask26{
  animation: deco01_draw_line .6s reverse forwards;
}
.cms_deco.is_active #deco_mask02,
.cms_deco.is_active #deco_mask03,
.cms_deco.is_active #deco_mask04,
.cms_deco.is_active #deco_mask05,
.cms_deco.is_active #deco_mask06,
.cms_deco.is_active #deco_mask07,
.cms_deco.is_active #deco_mask08,
.cms_deco.is_active #deco_mask09,
.cms_deco.is_active #deco_mask10,
.cms_deco.is_active #deco_mask11,
.cms_deco.is_active #deco_mask12,
.cms_deco.is_active #deco_mask13,
.cms_deco.is_active #deco_mask14,
.cms_deco.is_active #deco_mask15,
.cms_deco.is_active #deco_mask16,
.cms_deco.is_active #deco_mask17,
.cms_deco.is_active #deco_mask18,
.cms_deco.is_active #deco_mask19,
.cms_deco.is_active #deco_mask20,
.cms_deco.is_active #deco_mask21,
.cms_deco.is_active #deco_mask22,
.cms_deco.is_active #deco_mask23,
.cms_deco.is_active #deco_mask24,
.cms_deco.is_active #deco_mask25,
.cms_deco.is_active #deco_mask27,
.cms_deco.is_active #deco_mask28,
.cms_deco.is_active #deco_mask29,
.cms_deco.is_active #deco_mask30 {
  animation: deco02_draw_line 1.5s reverse forwards;
}
@keyframes deco01_draw_line {
  0% { stroke-dashoffset:0; }
  100% { stroke-dashoffset:900; }
}
@keyframes deco02_draw_line {
  0% { stroke-dashoffset:0; }
  100% { stroke-dashoffset:2500; }
}
@keyframes deco03_draw_line01 {
  20% { stroke-dashoffset: 2500; }
  30% { stroke-dashoffset: 0; }
  60% { stroke-dashoffset: 2500; }
  70% { stroke-dashoffset: 2500; }
  100% { stroke-dashoffset: 2500;}
}
@keyframes deco03_draw_line02 {
  20% { stroke-dashoffset:2500; }
  30% { stroke-dashoffset: 2500; }
  60% { stroke-dashoffset: 0;}
  70% { stroke-dashoffset: 2500; }
  100% { stroke-dashoffset: 2500;}
}