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

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

/* ===============================
   📌 .article内 H2見出し（🍒・グラデ背景・左耳）
   =============================== */
.article h2 {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  padding: 10px 14px;
  margin: 24px 0 16px 0;
  border-left: 5px solid #5c6bc0;
  border-bottom: 2px solid #5c6bc0;
  background: linear-gradient(to right, #5c6bc0, #64b5f6);
  border-radius: 8px;
  line-height: 1.2;
}

.article h2::before {
  content: "🍒 ";
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  margin-right: 4px;
}

/* ===============================
   📘 .article内 H3見出し（実線下線・薄パープル）
   =============================== */
.article h3 {
  font-size: 16px;
  font-weight: bold;
  color: #8e9be3;
  padding: 8px 12px;
  margin: 20px 0 14px 0;
  border-left: 4px solid #5c6bc0;
  border-bottom: 1px solid #aab2f0;
  background-color: #f5f7fb;
  border-radius: 6px;
  padding-bottom: 3px;
  line-height: 1.2;
}

/* ===============================
   📘 .article内 H4見出し（実線下線・耳なし）
   =============================== */
.article h4 {
  font-size: 15px;
  font-weight: bold;
  color: #4a6cb3;
  margin: 18px 0 12px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #5c6bc0;
  line-height: 1.2;
}

/* ===============================
   📘 .article内 H5見出し（実線下線・耳なし）
   =============================== */
.article h5 {
  font-size: 14px;
  font-weight: bold;
  color: #5c6bc0;
  margin: 16px 0 10px 0;
  padding-bottom: 2px;
  border-bottom: 1px solid #aab2f0;
  line-height: 1.2;
}

/* ===============================
   🌙 ダークモード対応（.article内の全見出し）
   =============================== */
@media (prefers-color-scheme: dark) {
  .article h2 {
    color: #fff;
    background: linear-gradient(to right, #3a4a94, #477fa6);
    border-left: 5px solid #879af2;
    border-bottom: 2px solid #879af2;
  }

  .article h3 {
    color: #fff;
    background-color: #2a2a2a;
    border-left: 4px solid #5c6bc0;
    border-bottom: 1px solid #7a89db;
  }

  .article h4,
  .article h5 {
    color: #cfd8ff;
    border-bottom-color: #7a89db;
  }
}

/* ===============================
   🔒 Google reCAPTCHAバッジ非表示
   =============================== */
.grecaptcha-badge {
  visibility: hidden;
}




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

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

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