/* ********************************************** */
.des1 {
 background-color:#fefefe;
 background-image:radial-gradient(var(--des_fc) 2px, transparent 2px);
 background-size: var(--size) var(--size);
}
.des2 {
 background-color:#fefefe;
 background-image:linear-gradient(var(--des_fc) 1px, transparent 1px), linear-gradient(to right, var(--des_fc) 1px, transparent 1px);
 background-size: var(--size) var(--size);
}
.des3 {
 background-color:#fefefe;
 background-image:linear-gradient(135deg, var(--des_fc) calc(var(--size) * 0.65), transparent calc(var(--size) * 0.65));
 background-size: var(--size) var(--size);
}
.des4 {
 background-color:#fefefe;
 background-image:linear-gradient(var(--des_fc) 2px, transparent 2px), linear-gradient(90deg, var(--des_fc) 2px, transparent 2px), linear-gradient(var(--des_fc) 1px, transparent 1px), linear-gradient(90deg, var(--des_fc) 1px, transparent 1px);
 background-size: calc(var(--size)*2) calc(var(--size)*2), calc(var(--size)*2) calc(var(--size)*2), calc(var(--size)*0.5) calc(var(--size)*0.5), calc(var(--size)*0.5) calc(var(--size)*0.5);
 background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.des5 {
 background-color:#fefefe;
 background-image:linear-gradient(var(--des_fc) 50%, transparent 50% 100%);
 background-size: var(--size) var(--size);
}
.des6 {
 background-color:#fefefe;
 background-image:linear-gradient(var(--des_fc) 1px, 1px, transparent 100%), radial-gradient(at 0px var(--size), var(--des_fc) 2px, transparent 2px), radial-gradient(at var(--size) var(--size), var(--des_fc) 2px, transparent 2px);
 background-size: var(--size) var(--size);
}
.des7 {
 background-color:#fefefe;
 background-image:radial-gradient(at 0px 0px, var(--des_fc) 2px, transparent 2px), radial-gradient(at var(--size) 0px, var(--des_fc) 2px, transparent 2px), radial-gradient(at 0px var(--size), var(--des_fc) 2px, transparent 2px), radial-gradient(at var(--size) var(--size), var(--des_fc) 2px, transparent 2px);
 background-size: var(--size) var(--size);
}
.des8 {
 background-color:#fefefe;
}
.des9 {
 background-color:transparent;
 background:radial-gradient(circle, transparent 20%, #fefefe 20%, #fefefe 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #fefefe 20%, #fefefe 30%, transparent 30%, transparent) calc(var(--size)*0.5) calc(var(--size)*0.5), linear-gradient(var(--des_fc) 1px, transparent 1px) 0 -0.5px, linear-gradient(90deg, var(--des_fc) 1px, #fefefe 1px) -0.5px 0;
 background-size:var(--size) var(--size), var(--size) var(--size);
}


/* ********************************************** */
.chip        {position:absolute; box-sizing:border-box; margin:auto;}
.chip-task   {position:absolute; box-sizing:border-box; margin:auto; top:0; bottom:0; left:0; right:0;}
.chip-hull   {position:absolute; box-sizing:border-box; width:var(--size); height:var(--size); filter:drop-shadow(0 0 1px rgba(0, 0, 0, 1));}
.chip-border {filter:drop-shadow(0 0 1px rgba(0, 0, 0, 1));}

.chip_mwall        {width: calc(var(--size) * 0.9); border:1px solid #a0a0a0; box-shadow:0px 2px 3px 0px rgba(0,0,0,0.3); border-radius:calc(var(--size) * 0.15); margin:0 calc(var(--size) * 0.05);
                    height:calc(var(--size) * 0.9); background:rgba(120,120,120,0.8);
                   }
.chip_null         {width:      var(--size);        
                    height:     var(--size);        background:#ffffff;
                   }
.chip_wall         {width:      var(--size);        border:1px solid #606060; box-shadow:0px 3px 4px 0px rgba(0,0,0,0.5);
                    height:     var(--size);        background:#404040;
                   }
.chip_broken       {width:      var(--size);        clip-path: polygon(0 17%, 47% 40%, 63% 0%, 56% 33%, 100% 14%, 63% 49%, 100% 100%, 56% 58%, 49% 98%, 44% 56%, 9% 68%, 39% 46%);
                    height:     var(--size);        background:radial-gradient(#000000 0%, #c0c0c0 30%, #808080 100%);
                   }
.chip_piller       {width: calc(var(--size) * 0.5); margin-left:calc(var(--size) * 0.25);
                    height:     var(--size);        background:linear-gradient(to right, #e0e0e0 0% 10%, rgba(230, 230, 230, 0.6) 10% 25%, #e0e0e0 25% 35%, rgba(250, 250, 250, 0.6) 35% 65%, #e0e0e0 65% 75%, rgba(230, 230, 230, 0.6) 75% 90%, #e0e0e0 90% 100%);
                   }
.chip_ice          {width: calc(var(--size) + 1px); border:1px solid #a0a0a0; margin:-1px 0 0 0; box-shadow:0px 2px 3px 0px rgba(0,0,0,0.3);
                    height:calc(var(--size) + 1px); background:linear-gradient(150deg, #c0c0c0 0% 5%, rgba(255,255,255, 0.2) 25%, #b0b0b0 25%, rgba(255,255,255, 0.1) 55% 65%, rgba(192,192,192,0.8) 65%, rgba(255,255,255, 0.1) 85% 100%);
                   }
.chip_ice2         {width:      var(--size);        clip-path:polygon(0 90%, 0 10%, 10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 10% 90%, 90% 90%, 90% 10%, 25% 85%, 20% 80%, 60% 35%, 64% 40%, 90% 10%, 70% 10%, 25% 60%, 20% 55%, 60% 10%, 10% 10%, 10% 100%);
                    height:     var(--size);        background:#808080;
                   }
.chip_spike        {width:      var(--size);        clip-path:polygon(0% 100%, 0% 90%, 10% 45%, 20% 90%, 30% 45%, 40% 90%, 50% 45%, 60% 90%, 70% 45%, 80% 90%, 90% 45%, 100% 90%, 100% 100%);
                    height:     var(--size);        background:linear-gradient(#000000 60%, #c0c0c0 100%);
                   }
.chip_shelf        {width:calc( var(--size) * 0.9); clip-path:polygon(0 0, 100% 0, 100% 20%, 90% 20%, 90% 15%, 85% 10%, 15% 10%, 10% 15%, 10% 20%, 0 20%,0 20%, 100% 20%, 100% 40%, 90% 40%, 90% 35%, 85% 30%, 15% 30%, 10% 35%, 10% 40%, 0 40%); margin-left:calc(var(--size) * 0.05);
                    height:     var(--size);        background:linear-gradient(#808080 10%, transparent 50%);
                   }
/* --------------------------- */
.chip_key          {width:      var(--size);        clip-path:polygon(50% 0, 76% 13%, 76% 40%, 56% 53%, 60% 100%, 40% 100%, 42% 85%, 25% 90%, 25% 65%, 42% 70%, 44% 53%, 26% 40%, 26% 13%);
                    height:     var(--size);        background:#f0d040;
                   }
.chip_seal_key     {width:      var(--size);        clip-path:polygon(50% 0, 76% 13%, 76% 12%, 22% 44%, 73% 20%, 75% 40%, 16% 8%, 76% 46%, 56% 53%, 60% 100%, 40% 100%, 42% 85%, 25% 90%, 25% 65%, 42% 70%, 44% 53%, 26% 40%, 26% 13%);
                    height:     var(--size);        background:#f0d040; 
                   }
.chip_hammer       {width:      var(--size);        clip-path:polygon(5% 5%, 40% 5%, 40% 0, 60% 0, 60% 5%, 95% 5%, 95% 40%, 60% 40%, 60% 100%, 40% 100%, 40% 40%, 5% 40%); transform:rotate(30deg);
                    height:     var(--size);        background:#f0d040; 
                   }
.chip_gem          {width:      var(--size);        clip-path:polygon(50% 0, 75% 15%, 90% 75%, 50% 100%, 10% 75%, 25% 15%);
                    height:     var(--size);        background:radial-gradient(at 50% 55%, #ffffff 20%, #f0d040 70%, #fad030 95%); 
                   }
.chip_gem_off      {width:      var(--size);        clip-path:polygon(50% 0, 75% 15%, 90% 75%, 50% 100%, 10% 75%, 25% 15%);
                    height:     var(--size);        background:radial-gradient(at 50% 55%, #404040 30%, #c0c0c0 100%); 
                   }
.chip_gem_frame_on {width:      var(--size);        clip-path:polygon(0 0, 12% 30%, 50% 15%, 88% 30%, 100% 0, 70% 12%, 85% 50%, 70% 88%, 100% 100%, 88% 70%, 50% 85%, 12% 70%, 0 100%, 30% 88%, 15% 50%, 30% 12%);
                    height:     var(--size);        background:radial-gradient(#fff8f0 1%, #f0d040 25% 28%, #c09838 38%, #808080 40% 45%, #c0c0c0 45%);
                   }
.chip_gem_frame    {width:      var(--size);        clip-path:polygon(0 0, 12% 30%, 50% 15%, 88% 30%, 100% 0, 70% 12%, 85% 50%, 70% 88%, 100% 100%, 88% 70%, 50% 85%, 12% 70%, 0 100%, 30% 88%, 15% 50%, 30% 12%);
                    height:     var(--size);        background:radial-gradient(#606060 40%, #c0c0c0 40%);
                   }
.chip_power        {width:      var(--size);        clip-path:polygon(50% 5%, 65% 25%, 23% 94%, 0 92%, 10% 70%, 90% 70%, 100% 92%, 77% 95%, 35% 25%);
                    height:     var(--size);        background:radial-gradient(at 50% 65%, #ffffff 25%, #50f8e0 55%, #30fad0 95%);
                   }
.chip_power_off    {width:      var(--size);        clip-path:polygon(50% 39%, 37% 61%, 63% 61%);
                    height:     var(--size);        background:#a0a0a0;
                   }
.chip_door         {width:      var(--size);        border-radius:calc(var(--size) * 0.5) calc(var(--size) * 0.5) 0 0;
                    height:     var(--size);        background:#f0d040;
                   }
.chip_door_open    {width:      var(--size);        border-radius:calc(var(--size) * 0.5) calc(var(--size) * 0.5) 0 0; border:solid #f0d040; border-width:3px 3px 0 3px;
                    height:     var(--size);        background:radial-gradient(at 50% 100%, #000000, #686868);
                   }
.chip_door_magic   {width:      var(--size);        border-radius:calc(var(--size) * 0.5) calc(var(--size) * 0.5) 0 0; border:solid #f0d040; border-width:3px 3px 0 3px;
                    height:     var(--size);        background:radial-gradient(at 50% 80%, #f0fff8 25%, #40f0d0 90%, #30fad0 95%);
                   }
.chip_door_frame   {width:      var(--size);        border-radius:calc(var(--size) * 0.5) calc(var(--size) * 0.5) 0 0; border:solid #a0a0a0; border-width:3px 3px 0 3px;
                    height:     var(--size);        background:radial-gradient(at 50% 100%, #ffffff, #b0b0b0);
                   }
.chip_gem_orb      {width: calc(var(--size) * 0.5); border-radius:50%; filter:drop-shadow(0 5px 2px rgba(255, 230, 210, 0.4));
                    height:calc(var(--size) * 0.5); background:radial-gradient(#fff8f0 2%, #f0d040 55%, #b06006 85%);
                   }

.icon          {position:relative; width:var(--size); height:var(--size); background-color:#f0f0f0; display:inline-block; margin-right:calc(var(--size) * 0.5); vertical-align:middle;}
.icon_arrow_re {clip-path:polygon(0 0, 85% 0, 100% 15%, 100% 85%, 85% 100%, 0 100%, 0 80%, 76% 80%, 80% 76%, 80% 24%, 76% 20%, 50% 20%, 50% 40%);}
.icon_a2       {clip-path:polygon(90% 0, 30% 0, 0 75%, 60% 75%, 76% 35%, 85% 35%, 62% 90%, 14% 90%, 10% 100%, 70% 100%, 100% 25%, 81% 25%);}
.icon_a3       {clip-path:polygon(0% 100%, 6% 87%, 13% 94%, 34% 84%, 26% 81%, 25% 73%, 15% 73%, 14% 65%, 71% 4%, 84% 3%, 96% 13%, 95% 23%, 35% 83%);}
.icon_a4       {clip-path:polygon(15% 80%, 7% 88%, 5% 75%, 14% 64%, 26% 66%, 62% 31%, 61% 16%, 70% 5%, 89% 4%, 75% 19%, 81% 25%, 90% 15%, 93% 27%, 87% 36%, 71% 39%, 35% 75%, 37% 85%, 26% 97%, 7% 98%, 21% 86%);}
.icon_a5       {clip-path:polygon(33% 30%, 36% 40%, 30% 50%, 20% 39%, 19% 23%, 38% 6%, 62% 5%, 78% 16%, 82% 30%, 81% 45%, 73% 52%, 64% 54%, 56% 60%, 54% 74%, 53% 83%, 61% 87%, 61% 96%, 52% 100%, 42% 95%, 42% 87%, 54% 81%, 54% 78%, 44% 70%, 44% 57%, 49% 46%, 63% 40%, 64% 28%, 54% 20%, 44% 21%);}
.icon_arrow_rt {clip-path:polygon(28% 14%, 100% 0, 16% 100%, 0 87%, 49% 30%);}
.icon_star     {clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);}
.icon_zzz      {clip-path:polygon(0% 0%, 40% 0%, 40% 10%, 10% 50%, 40% 50%,     40% 30%, 70% 30%, 70% 40%, 50% 70%, 70% 70%,     70% 50%, 100% 50%, 100% 60%, 80% 90%, 100% 90%, 100% 100%, 70% 100%, 70% 90%, 90% 60%, 70% 60%,     70% 80%, 40% 80%, 40% 70%, 60% 40%, 40% 40%,     40% 60%, 0% 60%, 0% 50%, 30% 10%, 0% 10%);}

.icon_ach_wall {width:calc(var(--size) * 0.35); height:calc(var(--size) * 0.35); background-color:#909090;
                transform:rotate(-15deg);
}
.icon_ach_move {width:calc(var(--size) * 0.45); height:calc(var(--size) * 0.35); background-color:#909090;
                clip-path:polygon(40% 0, 100% 0, 100% 100%, 0 100%, 0 80%, 40% 50%);
                transform:rotate(-15deg);
}

/* ********************************************** */
#pchar {
 position:absolute; box-sizing:border-box; width:var(--size); height:var(--size); border:1px solid; border-color:#68d868 #68d868 #60a060 #68d868;
 background:linear-gradient(#60b060, rgba(104,255,104,0.5), #ddffdd);
 animation-iteration-count:1; animation-fill-mode:forwards; animation-timing-function:ease;
}
#pchar.ref {-webkit-box-reflect: below -2px -webkit-gradient(linear, left bottom, left top, from(#FFF), to(transparent));}
#pchar.c {border-radius:40% 40% 0 0;}
#pchar.l {border-radius: 0  75% 0 0; border-color:#68d868 #60a060 #60a060 #68d868;}
#pchar.r {border-radius:75%  0  0 0; border-color:#68d868 #68d868 #60a060 #60a060;}

@keyframes stageIn {
  0%     {transform: scale(16.0, 16.0); opacity:0;  border-color:#68d868; border-radius:10%;}
 50%     {transform: scale( 0.9,  0.9); opacity:1;}
 60%, 61%{transform: scale( 1.8,  1.8); opacity:0.8; border-radius:20%;}
 to      {transform: scale( 1.0,  1,0); opacity:1;   border-color:#68d868; border-radius: 40% 40% 0 0;}
}

@keyframes stageOut0 { /* パラパラダンス-右 */
  6%     {transform: translate(  0%,  30%) scale(1.2, 0.50);               border-radius:40% 40%  0  0 ;}
 16%, 18%{transform: translate( 25%, -15%) scale(1.0, 1.25) skewX(-40deg); border-radius:50% 15%  0 12%;}
 28%, 32%{transform: translate( 35%,  30%) scale(1.2, 0.50);               border-radius:40% 40%  0  0 ;}
 42%, 44%{transform: translate(-25%, -15%) scale(1.0, 1.25) skewX( 40deg); border-radius:15% 50% 12% 0 ;}
 54%, 58%{transform: translate(-35%,  30%) scale(1.2, 0.50);               border-radius:40% 40%  0  0 ;}
 68%, 70%{transform: translate( 25%, -15%) scale(1.0, 1.25) skewX(-40deg); border-radius:50% 15%  0 12%;}
 74%, 78%{transform: translate(  0%,  30%) scale(1.2, 0.50);               border-radius:40% 40%  0  0 ;}
 88%, 90%{transform: translate(  0%, -90%); opacity:1;}
  to     {transform: scale(30, 30); opacity:0; border-radius:20%;}
}
@keyframes stageOut5 { /* パラパラダンス-左 */
  6%     {transform: translate(  0%,  30%) scale(1.2, 0.50);               border-radius:40% 40%  0  0 ;}
 16%, 18%{transform: translate(-25%, -15%) scale(1.0, 1.25) skewX( 40deg); border-radius:15% 50% 12% 0 ;}
 28%, 32%{transform: translate(-35%,  30%) scale(1.2, 0.50);               border-radius:40% 40%  0  0 ;}
 42%, 44%{transform: translate( 25%, -15%) scale(1.0, 1.25) skewX(-40deg); border-radius:50% 15%  0 12%;}
 54%, 58%{transform: translate( 35%,  30%) scale(1.2, 0.50);               border-radius:40% 40%  0  0 ;}
 68%, 70%{transform: translate(-25%, -15%) scale(1.0, 1.25) skewX( 40deg); border-radius:15% 50% 12% 0 ;}
 74%, 78%{transform: translate(  0%,  30%) scale(1.2, 0.50);               border-radius:40% 40%  0  0 ;}
 88%, 90%{transform: translate(  0%, -90%); opacity:1;}
  to     {transform: scale(30, 30); opacity:0; border-radius:20%;}
}
@keyframes stageOut1 { /* ぴょんぴょん-左 */
  6%     {transform: translate(  0%,  30%) scale(1.20, 0.50) skewX( 12deg); border-radius:40% 40%  0 15%;}
 16%, 18%{transform: translate(-15%, -80%) scale(0.75, 1.25);               border-radius:50%  0   0  0 ;}
 28%, 30%{transform: translate(-30%,  30%) scale(1.20, 0.50) skewX(-12deg); border-radius:40% 40% 15% 0 ;}
 40%, 42%{transform: translate(  0%, -90%) scale(0.75, 1.25);               border-radius: 0  50%  0  0 ;}
 52%, 54%{transform: translate( 30%,  30%) scale(1.20, 0.50) skewX( 12deg); border-radius:40% 40%  0 15%;}
 64%, 66%{transform: translate( 15%, -80%) scale(0.75, 1.25);               border-radius:40% 40%  0  0 ;}
 76%, 78%{transform: translate(  0%,  30%) scale(1.20, 0.50);               border-radius:20%;}
 88%, 90%{transform: translate(  0%, -90%); opacity:1;}
  to     {transform: scale(30, 30); opacity:0; border-radius:20%;}
}
@keyframes stageOut6 { /* ぴょんぴょん-右 */
  6%     {transform: translate(  0%,  30%) scale(1.20, 0.50) skewX(-12deg); border-radius:40% 40% 15% 0 ;}
 16%, 18%{transform: translate( 15%, -80%) scale(0.75, 1.25);               border-radius: 0  50%  0  0 ;}
 28%, 30%{transform: translate( 30%,  30%) scale(1.20, 0.50) skewX( 12deg); border-radius:40% 40%  0 15%;}
 40%, 42%{transform: translate(  0%, -90%) scale(0.75, 1.25);               border-radius:50%  0   0  0 ;}
 52%, 54%{transform: translate(-30%,  30%) scale(1.20, 0.50) skewX(-12deg); border-radius:40% 40% 15% 0 ;}
 64%, 66%{transform: translate(-15%, -80%) scale(0.75, 1.25);               border-radius:40% 40%  0  0 ;}
 76%, 78%{transform: translate(  0%,  30%) scale(1.20, 0.50);               border-radius:20%;}
 88%, 90%{transform: translate(  0%, -90%); opacity:1;}
  to     {transform: scale(30, 30); opacity:0; border-radius:20%;}
}
@keyframes stageOut2 { /* くるりん */
  6%     {transform: translate(  0%,  30%) scale(1.20, 0.50); border-radius:40% 40% 0 0;}
 14%     {transform: translate(-30%, -40%); border-radius:40% 40% 10% 10%;}
 18%     {transform: translate(-40%,-120%); border-radius:40% 40% 20% 20%;}
 21%     {transform: translate(  0%,-180%); border-radius:40% 40% 40% 40%;}
 25%     {transform: translate( 40%,-120%); border-radius:40% 40% 20% 20%;}
 29%     {transform: translate( 30%, -60%); border-radius:40% 40% 10% 10%;}
 37%     {transform: translate(  0%,   0%); border-radius:40% 40%  5%  5%;}
 48%     {transform: translate(  0%, -80%) scale(0.75, 1.25); border-radius:40% 40% 0 0;}
 58%, 78%{transform: translate(  0%,  30%) scale(1.2,  0.50); border-radius:20%;}
 88%, 90%{transform: translate(  0%, -90%); opacity:1;}
  to     {transform: scale(30, 30); opacity:0; border-radius:20%;}
}
@keyframes stageOut3 { /* 右往左往 */
  6%     {transform: translate(  0%,  30%) scale(1.4, 0.50);               border-radius:40% 40% 0 0;}
 16%     {transform: translate( 50%, -15%) scale(0.6, 1.30);               border-radius:40% 10% 0 0;}
      18%{transform: translate( 50%, -15%) scale(0.6, 1.30) skewX( 45deg); border-radius:40% 10% 0 0;}
 28%, 32%{transform: translate(  0%,  30%) scale(1.2, 0.50);               border-radius:40% 40% 0 0;}
 42%     {transform: translate(-50%, -15%) scale(0.6, 1.30);               border-radius:10% 40% 0 0;}
      44%{transform: translate(-50%, -15%) scale(0.6, 1.30) skewX(-45deg); border-radius:10% 40% 0 0;}
 54%, 58%{transform: translate(  0%,  30%) scale(1.2, 0.50);               border-radius:40% 40% 0 0;}
 68%     {transform: translate( 50%, -15%) scale(0.6, 1.30);               border-radius:40% 10% 0 0;}
      70%{transform: translate( 50%, -15%) scale(0.6, 1.30) skewX( 45deg); border-radius:40% 10% 0 0;}
 74%, 78%{transform: translate(  0%,  30%) scale(1.2, 0.50);               border-radius:40% 40% 0 0;}
 88%, 90%{transform: translate(  0%, -90%); opacity:1;}
  to     {transform: scale(30, 30); opacity:0; border-radius:20%;}
}
@keyframes stageOut4 { /* 膨張 */
  6%, 10%{transform: translate(0%,   5%) scale(0.8, 0.8); border-radius:40% 40% 0 0;}
 16%     {transform: translate(0%, -20%) scale(1.4, 1.4);}
 18%     {transform: translate(0%, -10%) scale(1.2, 1.2);}
 20%     {transform: translate(0%, -15%) scale(1.3, 1.3);}
 26%, 30%{transform: translate(0%, -10%) scale(1.2, 1.2); opacity:1.0;}
 36%     {transform: translate(0%, -40%) scale(1.9, 1.9); opacity:0.9;}
 38%     {transform: translate(0%, -30%) scale(1.7, 1.7);}
 40%     {transform: translate(0%, -35%) scale(1.8, 1.8);}
 46%, 50%{transform: translate(0%, -25%) scale(1.6, 1.6); opacity:0.9;}
 56%     {transform: translate(0%, -70%) scale(2.7, 2.7); opacity:0.7;}
 58%     {transform: translate(0%, -55%) scale(2.3, 2.3); opacity:0.8;}
 60%     {transform: translate(0%, -60%) scale(2.5, 2.5); opacity:0.7;}
 66%, 70%{transform: translate(0%, -45%) scale(2.1, 2.1); opacity:0.8;}
 76%     {transform: translate(0%,-105%) scale(3.6, 3.6); opacity:0.5;}
 78%     {transform: translate(0%, -80%) scale(3.0, 3.0); opacity:0.6;}
 80%     {transform: translate(0%,-100%) scale(3.4, 3.4); opacity:0.6;}
 86%, 90%{transform: translate(0%, -70%) scale(2.6, 2.6); opacity:0.7;}
 96%     {transform: translate(0%,-145%) scale(4.6, 4.6); opacity:0.3;}
 98%     {transform: translate(0%,-135%) scale(4.3, 4.3); opacity:0.4;}
  to     {transform: scale(30, 30); opacity:0; border-radius:20%;}
}

@keyframes moveL {
 33%{transform: translate( -33%, 10%) scale(1.1, 0.75);}
 66%{transform: translate( -66%,-10%) scale(0.9, 1.10);}
  to{transform: translate(-100%,  0 );}
}
@keyframes moveR {
 33%{transform: translate( 33%, 10%) scale(1.1, 0.75);}
 66%{transform: translate( 66%,-10%) scale(0.9, 1.10);}
  to{transform: translate(100%,  0 );}
}
@keyframes moveLU {
 25%{transform: translateY( 30%) scale(1.1, 0.5);}
 50%{transform: translate( -25%, -130%);}
 75%{transform: translate( -50%,  -90%) scale(1.1, 0.9);}
 80%{transform: translate( -50%, -100%);}
  to{transform: translate(-100%, -100%);}
}
@keyframes moveRU {
 25%{transform: translateY(30%) scale(1.1, 0.5);}
 50%{transform: translate( 25%, -130%);}
 75%{transform: translate( 50%,  -90%) scale(1.1, 0.9);}
 80%{transform: translate( 50%, -100%);}
  to{transform: translate(100%, -100%);}
}
@keyframes moveLD {
 20%{transform: translate( -30%,  10%) scaleY(0.75);}
 50%{transform: translate( -75%,   0 ) scale(1.2, 1.0); border-radius: 0  75% 15%  0 ;}
 80%{transform: translate( -95%,  50%) scale(0.8, 1.5); border-radius:35% 60% 15% 15%;}
  to{transform: translate(-100%, 100%);}
}
@keyframes moveRD {
 20%{transform: translate(  30%,  10%) scaleY(0.75);}
 50%{transform: translate(  75%,   0 ) scale(1.2, 1.0); border-radius:75%  0   0  15%;}
 80%{transform: translate(  95%,  50%) scale(0.8, 1.5); border-radius:60% 35% 15% 15%;}
  to{transform: translate( 100%, 100%);}
}
@keyframes moveU {
 35%{transform: translateY(  30%) scale(1.1, 0.5);}
 56%{transform: translateY(-120%); border-bottom-left-radius:40%; border-bottom-right-radius:40%;}
 80%{transform: translateY(-115%) scale(0.75, 1.4); border-bottom-left-radius:30%; border-bottom-right-radius:30%;}
  to{transform: translateY(-120%);}
}
@keyframes moveUX {
 20%{transform: translateY(  30%) scale(1.10, 0.50);}
 30%{transform: translateY(  -5%) scale(0.75, 1.25);}
 40%{transform: translateY( -30%) scale(1.20, 0.60);}
 60%{transform: translateY( -30%) scale(1.20, 0.60); border-radius:0 0 30% 30%;}
 80%{transform: translateY(  20%) scale(1.20, 0.60);}
  to{transform: translateY(   0 ) scale(1.00, 1.00);}
}
@keyframes moveD  {
 25%{transform: translateY( 25%) scale(1.2, 0.8);}
 50%{transform: translateY( 50%) scale(1.0, 1.0);}
 75%{transform: translateY( 75%) scale(0.8, 1.2);}
  to{transform: translateY(100%);}
}
@keyframes moveUSh {
 25%{transform: translateY(  30%) scale(1.10, 0.5);}
 40%{transform: translateY(-120%);}
 80%{transform: translateY(-115%) scale(0.75, 1.4);}
 90%{transform: translateY(-100%) scale(1.20, 0.9);}
  to{transform: translateY(-100%);}
}
@keyframes moveDSh {
 10%{transform: translateY(-25%) scale(0.8,  0.8); border-radius: 40% 40% 40% 40%;}
 20%{transform: translateY( 25%) scale(0.5,  1.2); border-radius: 30% 30% 40% 40%;}
 50%{transform: translateY( 45%) scale(0.3,  1.9); border-radius: 40% 40% 40% 40%;}
 60%{transform: translateY( 80%) scale(0.5,  1.2); border-radius: 40% 40% 30% 30%;}
 90%{transform: translateY(135%) scale(1.25, 0.3); border-radius: 40% 40%  0   0 ;}
  to{transform: translateY(100%);}
}
@keyframes directR {
 75%{border-radius:40% 40% 0 0;}
  to{border-radius:75%  0  0 0;}
}
@keyframes directL {
 75%{border-radius:40% 40% 0 0;}
  to{border-radius: 0  75% 0 0;}
}
@keyframes wallR_NG {
 30%{transform: translate( -10%, -10%) scale(0.9, 1.25);}
 70%{transform: translateX( 20%)       scaleX(0.75);}
}
@keyframes wallL_NG {
 30%{transform: translate(  10%, -10%) scale(0.9, 1.25);}
 70%{transform: translateX(-20%)       scaleX(0.75);}
}
@keyframes wallR {
 30%{transform: translate( -10%, -10%) scale(0.9, 1.25);}
 70%{transform: translateX( 20%)       scaleX(0.75);}
}
@keyframes wallL {
 30%{transform: translate(  10%, -10%) scale(0.9, 1.25);}
 70%{transform: translateX(-20%)       scaleX(0.75);}
}
@keyframes pausing {
 30%{transform: translateY(-10%) scale(0.75, 1.25);}
}
@keyframes dangerL {
 20%{transform:translate( -30%,  10%) scaleY(0.75     ); background:rgba(104,255,104,0.5);}
 40%{transform:translate(  10%, -30%) scale(0.75, 1.25);}
 60%{transform:translate(   5%,  10%) scale(1.20, 0.90); background:rgba(104,220,255,0.5); border-color:08e8f0;}
}
@keyframes dangerR {
 20%{transform:translate(  30%,  10%) scaleY(0.75     ); background:rgba(104,255,104,0.5);}
 40%{transform:translate( -10%, -30%) scale(0.75, 1.25);}
 60%{transform:translate(  -5%,  10%) scale(1.2 , 0.90); background:rgba(104,220,255,0.5); border-color:08e8f0;}
}
@keyframes dangerD {
 10%{transform: translateY(-25%) scale(0.8,  0.8); border-radius:40% 40% 40% 40%;}
 20%{transform: translateY( 25%) scale(0.5,  1.2); border-radius:30% 30% 40% 40%; background:rgba(104,255,104,0.5);}
 50%{transform: translateY( 45%) scale(0.3,  1.9); border-radius:40% 40% 40% 40%;}
 60%{transform: translateY( 25%) scale(0.5,  1.2); border-radius:30% 30% 40% 40%;}
 80%{transform: translateY(-25%) scale(0.8,  0.8); border-radius:40% 40% 40% 40%; background:rgba(104,220,255,0.5); border-color:08e8f0;}
}
@keyframes dangerU {
 20%{transform: translateY( 30%) scale(1.10, 0.50); background:rgba(104,255,104,0.5);}
 30%{transform: translateY(-5%) scale(0.75, 1.25);}
 40%{transform: translateY(-30%) scale(1.20, 0.60);}
 60%{transform: translateY(-30%) scale(1.20, 0.60); border-radius:0 0 30% 30%;}
 80%{transform: translateY( 20%) scale(1.20, 0.60); background:rgba(104,220,255,0.5); border-color:08e8f0;}
  to{transform: translateY(  0%) scale(1.00, 1.00);}
}
@keyframes dangerLU {
 20%{transform: translateY(  30%) scale(1.1, 0.5); background:rgba(104,255,104,0.5);}
 40%{transform: translate(  -25%, -130%);}
 50%{transform: translate(    5%, -110%);}
 60%{transform: translateY(   5%) scale(0.5,  1.2); background:rgba(104,220,255,0.5); border-color:08e8f0;}
 80%{transform: translateY(  25%) scale(1.1,  0.5);}
}
@keyframes dangerRU {
 20%{transform: translateY(  30%) scale(1.1, 0.5); background:rgba(104,255,104,0.5);}
 40%{transform: translate(   25%, -130%);}
 50%{transform: translate(   -5%, -110%);}
 60%{transform: translateY(   5%) scale(0.5,  1.2); background:rgba(104,220,255,0.5); border-color:08e8f0;}
 80%{transform: translateY(  25%) scale(1.1,  0.5);}
}
@keyframes slipL {
 20%{transform: translate( -25%, 5%) scaleY(0.9);}
  to{transform: translate(-100%, 5%) scaleY(0.9);}
}
@keyframes slipR {
 20%{transform: translate(  25%, 5%) scaleY(0.9);}
  to{transform: translate( 100%, 5%) scaleY(0.9);}
}

/* Ending */
.endChar {position:absolute; box-sizing:border-box; width:var(--size); height:var(--size); border:1px solid;}
.endChar.c {border-radius:40% 40% 0 0;}
.endChar.l {border-radius: 0  75% 0 0;}
.endChar.r {border-radius:75%  0  0 0;}
.endChar.no0  {top:0; bottom:0; right:0; left:0; margin:auto; border-color:#68d868 #68d868 #60a060 #68d868; background:linear-gradient(#60b060, rgba(104,255,104,0.5), #ddffdd); animation:Jump      1.00s  2.0s linear infinite;}
.endChar.no1  {top:0; bottom:0; right:0; left:0; margin:auto; border-color:#d86868 #d86868 #a06060 #d86868; background:linear-gradient(#b06060, rgba(255,104,104,0.5), #ffdddd); animation:nyuru     2.40s 10.5s linear infinite; height:calc(var(--size) * 1.15); border-radius:65% 15% 10% 10%;}
.endChar.no2a {top:0; bottom:0; right:0; left:0; margin:auto; border-color:#d8d868 #d8d868 #a0a060 #d8d868; background:linear-gradient(#b0b060, rgba(255,255,104,0.5), #ffffdd); animation:moveRU    0.26s 14.0s linear infinite alternate; height:calc(var(--size) * 1.1);}
.endChar.no2b {top:0; bottom:0; right:0; left:0; margin:auto; border-color:#d8d868 #d8d868 #a0a060 #d8d868; background:linear-gradient(#b0b060, rgba(255,255,104,0.5), #ffffdd); animation:moveRU    0.26s 14.7s linear infinite alternate; width:calc(var(--size) * 0.8); height:calc(var(--size) * 0.8);}
.endChar.no3  {top:0; bottom:0; right:0; left:0; margin:auto; border-color:#6868d8 #6868d8 #6060a0 #6868d8; background:linear-gradient(#6060b0, rgba(104,104,255,0.5), #ddddff); animation:directRR  1.35s 21.0s linear infinite alternate; width:calc(var(--size) * 1.9); height:calc(var(--size) * 1.9);}
.endChar.no4  {top:0; bottom:0; right:0; left:0; margin:auto; border-color:#d868d8 #d868d8 #a060a0 #d868d8; background:linear-gradient(#b060b0, rgba(255,104,255,0.5), #ffddff); animation:korokoro  1.25s 12.0s linear infinite alternate; width:calc(var(--size) * 1.15); border-radius:20% 70% 0 0;}
.endChar.no5  {top:0; bottom:0; right:0; left:0; margin:auto; border-color:#68d8d8 #68d8d8 #60a0a0 #68d8d8; background:linear-gradient(#60b0b0, rgba(104,255,255,0.5), #ddffff); animation:moveJumpR 0.90s  6.0s linear infinite;           border-radius:25% 65% 0 0;}
.endChar.no6  {top:0; bottom:0; right:0; left:0; margin:auto; border-color:#d8d8d8 #d8d8d8 #a0a0a0 #d8d8d8; background:linear-gradient(#b0b0b0, rgba(255,255,255,0.5), #ffffff); animation:rotateR   1.70s  9.0s linear infinite;}

.end_ins {position:absolute; overflow:hidden; opacity:0; width:calc(var(--size) * 4); height:calc(var(--size) * 4);}
#echar0_pack  {animation:ins 0.5s  1.0s linear forwards; bottom:calc(var(--size) * 6.2); left:0; right:0; margin:0 auto;}
#echar1_pack  {animation:ins 0.5s  9.5s linear forwards; bottom:calc(var(--size) * 6.3); left:calc(50% - var(--size) * 6.4); margin:0;} /* あか */
#echar2a_pack {animation:ins 0.5s 13.7s linear forwards; bottom:calc(var(--size) * 4.3); left:calc(50% - var(--size) * 3.5); margin:0;} /* き兄 */
#echar2b_pack {animation:ins 0.5s 14.4s linear forwards; bottom:calc(var(--size) * 4.7); left:calc(50% - var(--size) * 4.7); margin:0;} /* き弟 */
#echar3_pack  {animation:ins 0.5s 19.0s linear forwards; bottom:calc(var(--size) * 8.4); left:calc(50% - var(--size) * 4.7); margin:0;} /* むらさき */
#echar4_pack  {animation:ins 0.5s 11.0s linear forwards; bottom:calc(var(--size) * 6.2); left:calc(50% + var(--size) * 3.3); margin:0;} /* ぴんく */
#echar5_pack  {animation:ins 0.5s  5.0s linear forwards; bottom:calc(var(--size) * 5.7); left:calc(50% + var(--size) * 0.3); margin:0;} /* みず */
#echar6_pack  {animation:ins 0.5s  8.0s linear forwards; bottom:calc(var(--size) * 8.2); left:calc(50% + var(--size) * 0.5); margin:0;} /* しろ */

@keyframes ins {
  0%     {transform:translateY(-100%);}
 80%,90% {opacity:1; transform:translateY(7.5%) scaleY(0.75);}
 to      {opacity:1; transform:translateY(0) scaleY(1.0);}
}


@keyframes Jump {
 0%     {transform: translateY(   0%) scale(1, 1);}
 8%, 20%{transform: translateY(  28%) scale(1.25, 0.7); border-radius:100% 0 0 0;}
 35%{transform: translateY(-120%); border-bottom-left-radius:40%; border-bottom-right-radius:40%;}
 65%{transform: translateY(-115%) scale(0.75, 1.4); border-bottom-left-radius:30%; border-bottom-right-radius:30%;}
 75%{transform: translateY(-120%) scale3d(1.5, 1.5, 1.5);}
 85%{transform: translateY(-115%) scale(0.75, 1.4); border-bottom-left-radius:30%; border-bottom-right-radius:30%;}
 to     {transform: translateY(   0%) scale(1, 1);}
}

@keyframes moveJumpL {
  0%, 15%{transform: translate(   0%,   0%) scale(1.0, 1.0);}
 10%     {transform: translate(   0%,  10%) scale(1.1, 0.9);}
 30%     {transform: translate( -25%, -25%) scale(1.0, 1.0);}
 50%     {transform: translate( -50%, -50%) scale(1.0, 1.0);}
 90%     {transform: translate( -75%, -25%) scale(1.0, 1.0);}
 to      {transform: translate(-100%,  10%) scale(1.1, 0.9);}
}
@keyframes moveJumpR {
  0%     {transform: translate(   0%,   0%) scale(1.0, 1.0);}
  5%, 7% {transform: translate(   0%,  10%) scale(1.3, 0.8) skewX(  5deg);}
 15%     {transform: translate(  25%, -30%) scale(1.0, 1.0);}
 25%     {transform: translate(  50%, -55%) scale(1.0, 1.0);}
 45%     {transform: translate(  90%,  90%) scale(1.1, 1.1);}
 47%,50% {transform: translate( 100%, 100%) scale(1.4, 0.9) skewX(-10deg);}
 55%     {transform: translate(  90%,  90%) scale(1.1, 1.1);}
 75%     {transform: translate(  50%, -55%) scale(1.0, 1.0);}
 85%     {transform: translate(  25%, -30%) scale(1.0, 1.0);}
 to      {transform: translate(   0%,   0%) scale(1.0, 1.0);}
}
@keyframes rotateR {
  0%     {transform: translate(   0%,   0%) scale(1.0, 1.0) rotate(  0deg);}
  3%,5%  {transform: translate(   0%,   5%) scale(1.2, 0.8) rotate(  0deg);}
 10%     {transform: translate(   5%, -60%) scale(1.0, 1.0) rotate(  0deg);}
 25%     {transform: translate(  10%,-120%) scale(1.1, 1.1) rotate(180deg); border-bottom-left-radius:20%; }
 45%     {transform: translate(  15%, -60%) scale(1.0, 1.0) rotate(360deg); border-bottom-left-radius:10%; }
 50%     {transform: translate(  20%,   0%) scale(1.0, 1.0) rotate(360deg);}
 53%,55% {transform: translate(  20%,   5%) scale(1.2, 0.8) rotate(360deg);}
 60%     {transform: translate(  15%, -60%) scale(1.0, 1.0) rotate(360deg);}
 75%     {transform: translate(  10%,-120%) scale(1.1, 1.1) rotate(180deg); border-bottom-right-radius:20%; }
 95%     {transform: translate(   5%, -60%) scale(1.0, 1.0) rotate(  0deg); border-bottom-right-radius:10%; }
 to      {transform: translate(   0%,   0%) scale(1.0, 1.0) rotate(  0deg);}
}
@keyframes nyuru {
  0%, 1%{transform: translate(   0%,  0%) scale(1.00, 1.00);}
 12%    {transform: translate( -65%, 30%) scale(1.25, 0.60);}
 24%,26%{transform: translate(-130%, 50%) scale(0.75, 1.25);}
 37%    {transform: translate( -65%, 30%) scale(1.25, 0.60);}
 49%,51%{transform: translate(   0%,-10%) scale(0.75, 1.25);}
 62%    {transform: translate(  65%,-30%) scale(1.25, 0.60);}
 74%,76%{transform: translate( 130%,-70%) scale(0.75, 1.25);}
 87%    {transform: translate(  65%,-30%) scale(1.25, 0.60);}
 99%, to{transform: translate(   0%,  0%) scale(1.00, 1.00);}

}
@keyframes korokoro {
  0% , to{transform: translate(   0%,   0%) rotate(  0deg);}
 25%     {transform: translate(  20%,  -5%) rotate( 30deg) skewY(-25deg) scale(1.0, 1.2); border-bottom-left-radius:40%; border-bottom-right-radius:20%;}
 50%     {transform: translate( -20%,  -5%) rotate(-30deg) skewX( 25deg); border-bottom-left-radius:20%; border-bottom-right-radius:40%;}
}

@keyframes directRR {
  0%,30% {border-radius:40% 40% 0 0;}
 50%     {border-radius:50% 20% 0 0;}
 80%     {border-radius:75%  0  0 0;}
 to      {border-radius:75% 10% 0 0;}
}