@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* snsフォローボタン */
.author-follows .instagram-button.instagram-follow-button-sq {
background: linear-gradient(30deg,#FFDD83, #F26939 30%, #CF2E92 60%, #4C64D3);
}
.author-follows .feedly-button.feedly-follow-button-sq {
background-color: #2bb24c !important;
}
.author-follows .rss-button.rss-follow-button-sq {
background-color: #f26522 !important;
}

/* リンクアイコンのデザインを変更する */
.author-box .sns-follow .sns-follow-buttons a.follow-button {
  font-size: 28px;
}

/* リンクアイコンのデザインを丸くする */
.author-box .sns-follow .sns-follow-buttons a.follow-button {
  font-size: 40px;
  width: 49px;
  height: 49px;
  margin-bottom: 10px;
  margin-right: 12px;
  color: #fff;
  border: none;
  border-radius: 55%;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.1),0 3px 5px 0 rgba(0,0,0,.2);
}

/* アイコンをセンタリングする */
.author-box .sns-follow-buttons a.follow-button span::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}

/*SNSボタンをアイコンのみにする*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*ボタンを一列にする*/
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}

/*ボタンを丸くする*/
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 8px; /*ボタン同士の間隔*/
}

/*ボタンの形を整える*/
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/* オンマウスでリンク色が変わる */
a:hover {
text-decoration:none;
color:#78d022;
}

.insta_btn2{/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 50px;/*高さ*/
  width: 190px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 25px;/*文字のサイズ*/
  line-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;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.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: 35px;/*アイコンサイズ*/
  position: relative;
  top: 4px;/*アイコン位置の微調整*/
}

.insta_btn2 span {/*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s
}

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

/************************************
** フォローボタン（記事下）のみ色を変更する
************************************/
.bc-brand-color.sns-follow.sf-bottom a[class*="follow-button instagram-button instagram-follow-button-sq"] {
	background: linear-gradient(30deg,#FFDD83, #F26939 30%, #CF2E92 60%, #4C64D3); /*背景の色*/
	color: #fff; /*アイコンの色*/
}