@charset "utf-8";
/*== ボタン共通設定 */
.btn {
  /*アニメーションの起点とするためrelativeを指定*/
  width: 60%;
  margin-bottom: 60px;
  max-width: 500px;
  border-radius: 40px;
  position: relative;
  overflow: hidden;
  /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
  border: 1px solid #FFFFFF; /* ボーダーの色と太さ */
  padding: 20px 30px;
  text-align: center;
  outline: none;
  /*アニメーションの指定*/
  transition: ease .2s;
}
/*ボタン内spanの形状*/
.btn span {
  position: relative;
  z-index: 3; /*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color: #fff;
  font-family: "小塚ゴシック Pr6N R" ,'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;;
;
}
.btn:hover span {
  color: #fff;
}
/*== 背景が流れる（斜め） */
.bgskew::before {
  content: '';
  /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: -130%;
  /*色や形状*/
  background:  #000;
  width: 120%;
  height: 100%;
  transform: skewX(-25deg);
}
/*hoverした時のアニメーション*/
.bgskew: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;
}


@media (min-width:960px) {
  /*== ボタン共通設定 */
  .btn {
    /*アニメーションの起点とするためrelativeを指定*/
    max-height: 470px;
    position: relative;
    overflow: hidden;
    /*ボタンの形状*/
    text-decoration: none;
    display: inline-block;
    border: 1px solid #FFF; /* ボーダーの色と太さ */
    padding: 20px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/
    transition: ease .2s;
  }
  /*ボタン内spanの形状*/
  .btn span {
    font-weight: 500;
    position: relative;
    z-index: 3; /*z-indexの数値をあげて文字を背景よりも手前に表示*/
    color: #fff;
    font-family: "小塚ゴシック Pr6N R";
  }
  .btn:hover span {
    color: #fff;
  }
  /*== 背景が流れる（斜め） */
  .bgskew::before {
    content: '';
    /*絶対配置で位置を指定*/
    position: absolute;
    top: 0;
    left: -130%;
    /*色や形状*/
    background: #111;
    width: 120%;
    height: 100%;
    transform: skewX(-25deg);
  }
  /*hoverした時のアニメーション*/
  .bgskew:hover::before {
    animation: skewanime .5s forwards; /*アニメーションの名前と速度を定義*/
  }
  }