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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* トップページ（.home）に限り、日付情報を非表示にする */
.home .date-tags,
.home .post-date,
.home .post-update {
    display: none !important;
}
.home #navi {
    display: none !important;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
}

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

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

/*================================
 * PC表示 (1024px以上)
 * いただいたHTML構造に合わせた専用コード
 *================================*/
@media screen and (min-width: 1024px) {
    
/* 1. 通常時の見た目（黒背景に白枠） */
.sns-follow-buttons .follow-button {
	width: 70px !important;       /* 横幅 */
    height: 70px !important;      /* 高さ */
	font-size: 70px !important; /* ★ここをいじるとロゴの大きさが変わる */
    background-color: transparent !important; /* 背景を透明に */
    border: 2px solid #ffffff !important;     /* 枠線を白くクッキリと */
    color: #1F1488 !important;                /* アイコンの色を白に */
    box-shadow: none !important;              /* 影を消してフラットに */
	display: flex !important;           /* フレックスボックス化 */
    justify-content: center !important; /* 横方向の真ん中 */
    align-items: center !important;     /* 縦方向の真ん中 */
    padding: 0 !important;              /* 余計な隙間を消す */
}

/* 2. マウスを乗せた時（ホバー時）の見た目 */
.sns-follow-buttons .follow-button:hover {
    background-color: #1F1488 !important; /* チェルシーブルーで塗りつぶし */
    border-color: #1F1488 !important;     /* 枠線も青に */
    color: #ffffff !important;            /* アイコンは白のまま */
    transition: 0.3s;                     /* ふわっと色が変わるアニメーション */
}

    /* 2. 中のアイコン（spanやbefore）の文字サイズを強制拡大 */
    .sns-follow-buttons .follow-button span,
    .sns-follow-buttons .follow-button span::before,
    .sns-follow-buttons .follow-button i,
    .sns-follow-buttons .follow-button i::before {
        font-size: 70px !important;   /* ★ここでロゴの大きさを決める */
        line-height: 1 !important;    /* 行間を詰める（ズレ防止） */
		display: block !important;
        width: auto !important;       /* 幅制限を解除 */
        height: auto !important;      /* 高さ制限を解除 */
    }


}