@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese);


.insta_btn {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  /* font-size: 20px;/*文字サイズ*/
   font-size: 20px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}

.insta_btn:hover {/*ホバー時*/
  color:#668ad8;/*文字色*/
  transition: .5s;/*ゆっくり変化*/
}

.insta_btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 13px;/*角丸に*/

}

.insta_btn .insta:before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 60px;/*グラデーションカバーの幅*/
  height: 60px;/*グラデーションカバーの高さ*/
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta_btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 35px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}

.insta_btn .insta{
  box-shadow: 0px 1px 2px rgba(25, 25, 25, 0.50);
  transition: .4s;
}
.insta_btn .insta:hover{
  box-shadow: 0px 2px 3px rgba(25, 25, 25, 0.50);
}

.insta_btn3 {/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 14px;/*角丸に*/
  position: relative;
  display: block;
  /* height: 120px;/*高さ*/
  /* width: 120px;/*幅*/
  height: 100px;/*高さ*/
  width: 100px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  padding-top: 12px;/*上側との余白*/
  box-sizing: border-box;
  /* font-size: 19px;/*文字のサイズ*/
  font-size: 14px;/*文字のサイズ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn3:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn3 div {
  position: relative;
}

.insta_btn3 .fa-instagram {
    font-size: 70px;/*アイコンサイズ*/
    position: relative;
    display:inline-block;
    position: relative;
    transition: .5s
}

.insta_btn3 .fa-instagram:hover {/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}