/*
Theme Name:twentyseventeen_child
Template:twentyseventeen
Version:3.6
*/

/* ------------ ソーシャルメニュー アイコンの背景色 ------------ */
.social-navigation a[href*="youtube.com"] { background-color: #cd201f; }
.social-navigation a[href*="facebook.com"] { background-color: #3b5998; }
.social-navigation a[href*="twitter.com"] { background-color: #55acee; }
/* インスタはグラデーションに*/
/*.social-navigation a[href*="instagram.com"] { background-color: #CC00CC; } */
.social-navigation a[href*="instagram.com"] { 
  /*position: relative;
  display: inline-block; 
  overflow: hidden; */
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
}
/*.social-navigation a[href*="instagram.com"]: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%);
}*/
.social-navigation a[href*="line.me"] { background-color: #00B900; } 
.social-navigation a[href*="mailto:"] { background-color: #3579C7; }
.social-navigation a[href*="wordpress.org"] { background-color: #464646; }
.social-navigation a[href*="wordpress.com"] { background-color: #21759b; }


/* ------------ ソーシャルメニュー アイコンを四角にし間隔を変更する ------------ */
.social-navigation a {
 -webkit-border-radius: 8px;
 border-radius: 4px;
 color: #fff;
 display: inline-block;
 height: 40px;
 width: 40px;
 margin: 0 0.2em 0.5em 0;
 text-align: center;
}


/* ------------ ソーシャルメニュー アイコンのフォントを大きくする ------------ */
.social-navigation .icon {
 height: 25px;
 top: 8px;
 width: 25px;
 vertical-align: top;
}
/*.social-navigation .icon a[href*="instagram.com"]{
  position: relative;
  z-index: 2;
  top: 8px;
}*/