@charset "utf-8";

.instagram-color-logo {
	position: relative;
	display: inline-block;
	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: 0.1em;
	color: white;

	/** テキストでくり抜いて背景を表示 */
	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
}

.instagram-color {
	height: 1em;
	width: 1em;
	position: relative;
	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: 0.1em;
	color: white;
}
.instagram-color .insta:before{
	content: '';
	position: absolute;
	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%);
}

.facebook-color {
	height: 1em;
	width: 1em;
	color: #315096;
	background-color: white;
}

.fa-twitter {
	color: #55acee;
	background-color: white;
}

.fa-facebook {
	color: #315096;
	background-color: white;
}

.insta_btn {
	display: inline-block;
	text-align: center;
	color: #2e6ca5;
	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;
  vertical-align: middle;
  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: 2;
  font-size: 35px;
  line-height: 50px;
}

.insta_btn2 {
  color: #FFF;
  border-radius: 0.3em;
  position: relative;
  display: inline-block;
  text-align: center;

  width: 260px;
  height: 52px;
  line-height: 52px;
  font-size: 28px;
  
  vertical-align: middle;
  text-decoration: none;
  
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  
  overflow: hidden;
}

.insta_btn2:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "alpha( opacity=100 )";
    color: white;
}

.insta_btn2: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_btn2 .fa-instagram{
  font-size: 42px;
  position: relative;
  top: 4px;
}

.insta_btn2 span {
	display:inline-block;
	position: relative;
	transition: .5s;

	font-family: initial;
}

.insta_btn2:hover span{
	/* ホバーで一周回転 */
	-webkit-transform: rotateX(360deg);
	-ms-transform: rotateX(360deg);
	transform: rotateX(360deg);
}

.line_btn {
	position: relative;
	display: inline-block;

	width: 260px;
	height: 52px;
	color: #00B900;
  
	vertical-align: middle;
	text-decoration: none;

    text-align: left;
	
	background-image: url(../img/line_stamp.png);
	background-repeat: no-repeat;
    background-position: right;
}

.line_btn i {
	color: #00B900;
}

.line_btn span {
	display:inline-block;
	position: relative;
	color: #00B900;
	font-size: 20px;
	transition: .5s;
	font-family: initial;
}

//.line_btn:hover span{
//	/* ホバーで一周回転 */
//	-webkit-transform: rotateX(360deg);
//	-ms-transform: rotateX(360deg);
//	transform: rotateX(360deg);
//}
