div.div_3d_area{
    display: flex; //justify-content: space-around; flex-wrap: wrap;
    margin-top: 20px; margin-bottom: 20px;
    max-width: 1150px; min-height: 150px;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff; overflow-x: hidden;
}

div.div_line{display: block;
      margin-right: auto; margin-bottom: 20px;
      margin-left: auto; width: 660px;
}

#input_range{
    margin-right: auto; margin-left: auto; 
    display: block; cursor: pointer; margin-bottom: 30px; width: 300px;height: 30px;
}

label.label_btn {
      background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
      text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
      box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
      border-bottom: solid 2px #b5b5b5;
      color: white;
      text-align: center;
      margin: 0.5em 1em;
      cursor: pointer; font-size: 2.2rem;
      margin-right: auto;
      margin-left: auto; display: block; width: 200px; padding: 10px;display: inline-block;
}

label.label_btn:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  border-bottom: none;
}

input.input_btn {
      display: none;
}
    
canvas{
    background:url(../image/music/canvas.JPG) repeat; background-size: cover;
    width: 90%; height: 150px;
    display: block;
    margin-top: 0px; padding-top: 10px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    position: relative;
}

li.box {
  width: 100px; height: 100px; text-align: center;
  right: 0; left: 0; margin: auto; font-size: 3rem;
}

div.div_box {
    position: relative; display: inline-block;
    margin-top: 40px; margin-bottom: 40px;margin-left: 40px;margin-right: 40px; padding: 0; list-style: none;
    //animation: anime3_music1 8s linear 0s infinite normal;
}


@keyframes anime3_music1 { 
  0%   { margin-left: 50px;} 
  100%  { margin-left: 0px;} 
}


div.cube_wrap {
    height: 100px; padding: 0;
    width: 100px;
    position: relative;
    margin:0 auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: 2s;
    transition: 2s;
    cursor: pointer;
}

div.cube_wrap:hover {
        -webkit-transform: translate3d(0,0,200px) rotateY(360deg) rotateZ(360deg) ;
        transform: translate3d(0,0,200px) rotateY(360deg) rotateZ(360deg);
}

div.cube_wrap div
{
    position: absolute;
    height: 100px;
    width: 100px;

    display: flex;
    justify-content: center;
    align-items: center;
}

div.cube_top {
 color: #FF0000;
 background: hsla(257,55%,91%,0.60);
 top: -50px;
 left: 0px;
 -webkit-transform: rotateX(90deg);
 transform: rotateX(90deg);
}

div.cube_bottom {
 color: #0000FF;
 background: hsla(257,55%,91%,0.60);
 bottom: -50px;
 left: 0px;
 -webkit-transform: rotateX(-90deg);
 transform: rotateX(-90deg);
}

div.cube_front {
 color: #FFFFFF;
 background: hsla(217,72%,71%,0.60);
 top: 0px;
 left: 0px;
 -webkit-transform: translateZ(50px);
 transform: translateZ(50px);
}

div.cube_back {
 color: #FFFF00;
 background: hsla(217,72%,71%,0.60);
 top: 0px;
 left: 0px;
 -webkit-transform: translateZ(-50px);
 transform: translateZ(-50px);
}

div.cube_right {
 color: #00FF00;
 background: hsla(217,72%,71%,0.60);
 top: 0px;
 right: -50px;
 -webkit-transform: rotateY(90deg);
 transform: rotateY(90deg);
}

div.cube_left {
 color: #FF00FF;
 background: hsla(217,72%,71%,0.60);
 top: 0px;
 left: -50px;
 -webkit-transform: rotateY(-90deg);
 transform: rotateY(-90deg);
}

div.cube_title {
 font-size: 1.6rem; transition-duration:4s; display: inline-block;
}
div.cube_title:hover {
        transform: rotateY(360deg);
}


li.li_anime1 {
animation: anime1_music 5s linear 0s infinite normal;
}

@keyframes anime1_music {
0% {transform: translate3d(0,0,0px) rotateY(0deg) rotateZ(0deg);-webkit-transform: translate3d(0,0,0px) rotateY(0deg) rotateZ(0deg);}
100% {transform: translate3d(0,0,200px) rotateY(360deg) rotateZ(360deg);-webkit-transform: translate3d(0,0,200px) rotateY(360deg) rotateZ(360deg);}
}

li.li_anime2 {
animation: anime2_music 5s linear 0s infinite normal;
}

@keyframes anime2_music {
0% {transform: translate3d(0,0,200px) rotateY(360deg) rotateZ(360deg);-webkit-transform: translate3d(0,0,200px) rotateY(360deg) rotateZ(360deg);}
100% {transform: translate3d(0,0,0px) rotateY(0deg) rotateZ(0deg);-webkit-transform: translate3d(0,0,0px) rotateY(0deg) rotateZ(0deg);}
}