@charset "utf-8";
/*== ボタン共通設定 */
.btn_under_02 {
  /*アニメーションの起点とするためrelativeを指定*/
/*  max-width: 400px;;*/
  position: relative;
  overflow: hidden;
  /*ボタンの形状*/
  text-decoration: none;
/*  display: inline-block;*/
/*  border: 1px solid #555;  ボーダーの色と太さ */
/*  padding: 20px 30px;*/
  text-align: center;
  outline: none;
  /*アニメーションの指定*/
  transition: ease .2s;
}
/*ボタン内spanの形状*/
.btn_under_02 span{
   position: absolute;
   z-index: 9999; /*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color: #fff;
  left: 20px;

}
.btn_under_02:hover span {
  color: #fff;
  
}
/*== 背景が流れる（斜め） */
.btn_under_02::before {
  content: '';
  /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: -130%;
  /*色や形状*/
  
  background: #45454B;
  width: 120%;
  height: 100%;
/*  opacity: 0.7;*/
  transform: skewX(-25deg);
}
/*hoverした時のアニメーション*/
.btn_under_02:hover::before {
  animation: skewanime .5s forwards; /*アニメーションの名前と速度を定義*/
}
@keyframes skewanime {
  100% {
    left: -10%; /*画面の見えていない左から右へ移動する終了地点*/
  }
}
/*========= レイアウトのためのCSS ===============*/
body {
  vertical-align: middle;
  text-align: center;
}
p {
/*  margin: 0 0 10px 0;*/
}