@charset "UTF-8";

.tran01Area{
}
  .tran01Area span,
  .tran02Area span,
  .tran03Area span,
  .tran04Area span,
  .tran05Area span,
  .tran06Area span,
  .tran07Area span,
  .tran08Area span,
  .tran09Area span,
  .tran10Area span,
  .tran11Area span,
  .tran12Area span,
  .tran13Area span,
  .tran14Area span,
  .tran15Area span
  {
    display: inline-block;
    width: 300px;
    background-color: #0067A3;
    color:#FFF;
    padding: 6px;
  }

  .tran01Area span:hover,
  .tran02Area span:hover,
  .tran03Area span:hover,
  .tran04Area span:hover,
  .tran13Area span:hover,
  .tran14Area span:hover,
  .tran15Area span:hover
  {
    width: 500px;
    padding:10px;
  }

  .tran05Area span:hover,
  .tran06Area span:hover,
  .tran07Area span:hover,
  .tran08Area span:hover,
  .tran09Area span:hover,
  .tran10Area span:hover,
  .tran11Area span:hover,
  .tran12Area span:hover,
  {
    width: 500px;
  }



  .tran01Area span
  {
    transition-property: width;
    transition-duration:1s;
    transition-timing-function:ease-out;
    transition-delay:0.5s;
  }

  .tran02Area span
  {
    transition-property: width,padding;
    transition-duration:1s;
    transition-timing-function:ease-out;
    transition-delay:0.5s;
  }


  .tran03Area span
  {
   transition-property: width,padding;
   transition-duration:3s;
   transition-timing-function:ease-out;
   transition-delay:0.5s;
  }



  .tran05Area span
  {
   transition-property: width;
   transition-duration:1s;
   transition-timing-function:ease;
   transition-delay:0s;
  }

  .tran06Area span
  {
   transition-property: width;
   transition-duration:1s;
   transition-timing-function:linear;
   transition-delay:0s;
  }

  .tran07Area span
  {
   transition-property: width;
   transition-duration:1s;
   transition-timing-function:ease-in;
   transition-delay:0s;
  }

  .tran08Area span
  {
   transition-property: width;
   transition-duration:1s;
   transition-timing-function:ease-out;
   transition-delay:0s;
  }

  .tran09Area span
  {
   transition-property: width;
   transition-duration:1s;
   transition-timing-function:ease-in-out;
   transition-delay:0s;
  }

  .tran10Area span
  {
   transition-property: width;
   transition-duration:1s;
   transition-timing-function:cubic-bezier(0,1,.99,0);
   transition-delay:0s;
  }

  .tran11Area span
  {
   transition-property: width;
   transition-duration:1s;
   transition-timing-function:ease-in;
   transition-delay:3s;
  }

  .tran12Area span
  {
    transition:width 1s ease-in 3s;
  }

  .tran13Area span
  {
    transition:width 2s ease-in 1s;
  }
  .tran14Area span
  {
    transition: width 1s ease 3s;
  }

  .tran15Area span
  {
    transition: width 3s ease 1s,padding 3s ease 2s;
  }

  
  .tran16Area{
    display: block;
    width: 40px;
    border:1px #ddd solid;
    padding: 5px;
  }
    .tran16Area span
    {
      border-top: 3px #000 solid;
      display: block;
      width: 30px;
      margin-top: 5px;
      transition: transform 0.5s ease 0s,opacity 0.5s ease 0s;
    }
    .tran16Area span:nth-of-type(1)
    {
      transform:rotate(0deg) translate(0px,0px);
      transform-origin: 0% 0%;
    }
    .tran16Area span:nth-of-type(2)
    {
      opacity: 1;
    }
    .tran16Area span:nth-of-type(3)
    {
      transform:rotate(0deg) translate(0px,0px);
      transform-origin: 0% 0%;
    }

    .tran16Area span:first-child
    {
      margin-top: 0px;
    }

    .tran16Area.open span
    {
      transition: transform 0.5s ease 0s,opacity 0.5s ease 0s;
    }
      .tran16Area.open span:nth-of-type(1)
      {
        transform:rotate(35deg) translate(2px, -2px);
      }
      .tran16Area.open span:nth-of-type(2)
      {
        opacity: 0;
      }
      .tran16Area.open span:nth-of-type(3)
      {
        transform:rotate(-35deg) translate(0px, 2px);
      }


  .tran17Area{
    display: block;
    width: 40px;
    border:1px #ddd solid;
    padding: 5px;
  }
    .tran17Area span
    {
      border-top: 3px #000 solid;
      display: block;
      width: 30px;
      margin-top: 5px;
      transition: transform 0.5s ease 0s,opacity 0.5s ease 0s;
    }

    .tran17Area span:first-child
    {
      margin-top: 0px;
    }    
    .tran17Area span:nth-of-type(1)
    {
      transform:rotate(0deg) translate(0px,0px);
      transform-origin: 0% 0%;
    }
    .tran17Area span:nth-of-type(2)
    {
      opacity: 1;
    }
    .tran17Area span:nth-of-type(3)
    {
      transform:rotate(0deg) translate(0px,0px);
      transform-origin: 0% 0%;
    }
    .tran17Area:hover
    {
      transition: transform 1s ease 0s;
      transform:rotateX(360deg);
      transform:rotateY(360deg);
    }

.animateDefault{
  width:300px;
  height:100px;
  background-color: #ddd;
  color: #333;
  padding: 10px;
  box-sizing:border-box;
}

.ani1Area:hover{
  -moz-animation: ani1Animation 5s ease 0s infinite normal;
  -webkit-animation: ani1Animation 5s ease 0s infinite normal;
  -o-animation: ani1Animation 5s ease 0s infinite normal;
  -ms-animation: ani1Animation 5s ease 0s infinite normal;
}
.ani2Area:hover{
  -moz-animation: ani1Animation 5s ease 0s infinite alternate;
  -webkit-animation: ani1Animation 5s ease 0s infinite alternate;
  -o-animation: ani1Animation 5s ease 0s infinite alternate;
  -ms-animation: ani1Animation 5s ease 0s infinite alternate;
}

@-moz-keyframes ani1Animation{
  0%{ width:310px; }
  10%{ width:400px; }
  40%{ height:50px; }
  70%{ width:200px; }
  100%{ width:600px; }
}
@-webkit-keyframes ani1Animation{
  0%{ width:310px; }
  10%{ width:400px; }
  40%{ height:50px; }
  70%{ width:200px; }
  100%{ width:600px; }
}
@-o-keyframes ani1Animation{
  0%{ width:310px; }
  10%{ width:400px; }
  40%{ height:50px; }
  70%{ width:200px; }
  100%{ width:600px; }
}
@-ms-keyframes ani1Animation{
  0%{ width:310px; }
  10%{ width:400px; }
  40%{ height:50px; }
  70%{ width:200px; }
  100%{ width:600px; }
}