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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.header-menu-box{
    padding: 0.5em 1em;
    margin: 0.5em 0.3em;
    color: #000000;
    background: #d3d3d3;
    border-bottom: solid 3px #c0c0c0;
    border-radius: 9px;
}

.header-menu-box p {
    margin: 0; 
    padding: 0;
}

/* 次のサイトのコードを参照・色を変更しました：Cocoon｜SNS（シェア・フォロー）ボタンの色を自由に変更するカスタマイズ – Cocoon便利帳 - https://www.satokobo.net/cocoon/1768 */
/************************************
** フォローボタン（プロフィール）のみ色を変更する
************************************/

/*ボタンカラーが「ブランドカラー」の場合*/
.bc-brand-color.sns-follow.sf-profile a[class*="-button"] {
	background-color: #f5f5f5; /*背景の色*/
	color: #fff; /*アイコン・キャプション等の色 ※「#fff」は「#ffffff」の省略形*/
}

/*ボタンカラーが「ブランドカラー（白抜き）」の場合*/
.bc-brand-color-white.sns-follow.sf-profile a[class*="-button"] {
	border-color: #f5f5f5;/*線の色*/
	color: #fff; /*アイコン・キャプション等の色 ※「#fff」は「#ffffff」の省略形*/
}

/*ボタンカラーが「モノクロ」の場合*/
.bc-monochrome.sns-follow.sf-profile a[class*="-button"] {
	background-color: #f5f5f5; /*背景の色*/
	color: #fff; /*アイコン・キャプション等の色 ※「#fff」は「#ffffff」の省略形*/
}

/* 自作。以下の記事で紹介しました。WordPress Cocoon プロフィールの SNS ボタンの色を変更 Compota-Soft-Press : https://compota-soft.work/archives/16508
/**************************************************************
 ** SNS フォローボタン（プロフィール）の内側の Span の色の変更
 **************************************************************/
/* サイト */ 
span.icon-home-logo {
	background-color:#002561;
	color:#FFFFFF;
}
/* Twitter(X) */ 
span.icon-x-corp-logo {
	background-color:#000000;
	color:#FFFFFF;
}
/* Youtube */ 
span.icon-youtube-logo {
	background-color:#CD201F;
	color:#FFFFFF;
}
/* TikTok */ 
span.icon-tiktok-logo {
	background-color:#000000;
	color:#FFFFFF;
}
/* SoundCloud */ 
span.icon-soundcloud-logo {
	background-color:#FF8800;
	color:#FFFFFF;
}
/* Github */ 
span.icon-github-logo {
	background-color:#4078C0;
	color:#FFFFFF;
}
/* Feedly */ 
span.icon-feedly-logo {
	background-color:#2BB24C;
	color:#FFFFFF;
}
/* RSS */ 
span.icon-rss-logo {
	background-color:#F26522;
	color:#FFFFFF;
}

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

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

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