@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){
  /*必要ならばここにコードを書く*/
}

.article h2,
.article h3 {
  font-weight: bold;
}

/* リサイザー用のスタイル */
.font-resizer {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  align-items: center;
}

.font-resizer button {
  padding: 8px 14px;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
}

/* ライトモード */
@media (prefers-color-scheme: light) {
  .font-resizer button {
    background-color: #e0e0e0;
    color: #333;
    border: 2px solid #bbb;
  }
  .font-resizer button:hover, .font-resizer button:focus {
    background-color: #c0c0c0;
    border-color: #999;
  }
  .font-resizer button.active {
    background-color: #0073aa;
    color: white;
    border-color: #005f8d;
  }
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  .font-resizer button {
    background-color: #444;
    color: white;
    border: 2px solid #666;
  }
  .font-resizer button:hover, .font-resizer button:focus {
    background-color: #666;
    border-color: #888;
  }
  .font-resizer button.active {
    background-color: #0073aa;
    color: white;
    border-color: #005f8d;
  }
}

/* キーボード操作時のフォーカス強調 */
.font-resizer button:focus {
  outline: 3px solid yellow;
}

/* H2見出しの疑似要素をリセット*/
.entry-content h2 > span::before {
    content: none !important;
    counter-increment: none;
}

/* Cocoonの囲み枠の枠線を太くする */
.wp-block-cocoon-blocks-caption-box-1,
.caption-box {
  border-width: 4px !important; /* 枠線の太さ */
  border-style: solid !important; /* 枠線のスタイルを明示 */
  border-color: #e57373 !important; /* 枠線の色（お好みで変更） */
}

/* SNSフォローメッセージを大きくする */
.sns-follow-message {
  font-size: 20px;       /* フォントサイズはお好みで変更してください */
  font-weight: bold;     /* 太字にして目立たせる */
  margin-bottom: 10px;   /* 下余白を少しつける場合 */
}
/* SNSボタンのサイズを大きくする */
.sns-follow .sns-button {
  display: inline-block; /* 念のため指定（上書き） */
  width: 50px;           /* 横幅 */
  height: 50px;          /* 高さ */
  line-height: 50px;     /* アイコンを中央寄せするため、heightと同じに */
  font-size: 24px;       /* アイコンフォントのサイズ */
  /* 必要に応じて padding など追加してもOK */
  text-align: center;    /* アイコンを中央に */
  margin-right: 5px;     /* ボタンの間隔を調整したい場合 */
}