@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
*/

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

/** https://find-a.jp/seotimes/30-usable-button-designs/ */
.social_button {
  display: inline-block;
  width: 100%;
  max-width: 110px; /* ボタン幅 */
  padding: 1em 2em;
  font-weight: bold; /* 文字の太さ */
  text-decoration: none;
  text-align: center;
  transition: 0.3s;
  font-size: x-small;
  margin: 2px;
}

.social_button.font-large {
  font-size: large;
}

/* ****************************************背景色（ホバー時前景色） */
/* 平常時 */
.social_button.back_white {
  background: #f5f5f5; /* 背景色 */
  border: 1px solid #000; /* 線幅・種類・色 */
}
/* ホバー時 */
.social_button.back_white:hover {
  color: #f5f5f5; /* 文字色 */
}

/* 平常時 */
.social_button.back_black {
  background: #000; /* 背景色 */
  border: 1px solid #000; /* 線幅・種類・色 */
}
/* ホバー時 */
.social_button.back_black:hover {
  color: #000; /* 文字色 */
}

/* 平常時 */
.social_button.back_note_mint {
  background: #42c9b5; /* 背景色 */
  border: 1px solid #42c9b5; /* 線幅・種類・色 */
}
/* ホバー時 */
.social_button.back_note_mint:hover {
  color: #42c9b5; /* 文字色 */
}

/* 平常時 */
.social_button.back_mstdn_blue {
  background: #6364ff; /* 背景色 */
  border: 1px solid #6364ff; /* 線幅・種類・色 */
}
/* ホバー時 */
.social_button.back_mstdn_blue:hover {
  color: #6364ff; /* 文字色 */
}

/* 平常時 */
.social_button.back_red {
  background: #f00; /* 背景色 */
  border: 1px solid #f00; /* 線幅・種類・色 */
}
/* ホバー時 */
.social_button.back_red:hover {
  color: #f00; /* 文字色 */
}

/* 平常時 */
.social_button.back_ikaskey_yellow {
  background: #eaff40; /* 背景色 */
  border: 1px solid #eaff40; /* 線幅・種類・色 */
}
/* ホバー時 */
.social_button.back_ikaskey_yellow:hover {
  color: #eaff40; /* 文字色 */
}

/* 平常時 */
.social_button.back_rss_orange {
  background: #ff6600; /* 背景色 */
  border: 1px solid #ff6600; /* 線幅・種類・色 */
}
/* ホバー時 */
.social_button.back_rss_orange:hover {
  color: #ff6600; /* 文字色 */
}

/* 平常時 */
.social_button.back_feedly_green {
  background: #6cc655; /* 背景色 */
  border: 1px solid #6cc655; /* 線幅・種類・色 */
}
/* ホバー時 */
.social_button.back_feedly_green:hover {
  color: #6cc655; /* 文字色 */
}

/* ****************************************前景色（ホバー時背景色） */
/* 平常時 */
.social_button.front_white {
  color: #fff; /* 文字色 */
}
/* ホバー時 */
.social_button.front_white:hover {
  background: #fff; /* 背景色 */
}

/* 平常時 */
.social_button.front_black {
  color: #000; /* 文字色 */
}
/* ホバー時 */
.social_button.front_black:hover {
  background: #000; /* 背景色 */
}

/* 平常時 */
.social_button.front_ikaskey_purple {
  color: #603be2; /* 文字色 */
}
/* ホバー時 */
.social_button.front_ikaskey_purple:hover {
  background: #603be2; /* 背景色 */
}


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

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

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