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

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

/* 見出しのデザインリセット */
/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}

/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}

/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}


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

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

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

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
/*使い方（例）各見出しに「追加CSSクラス」で

/*H2（茶色帯）：hd-base c-brown

/*H3（ネイビーライン）：hd-base c-navy

/*H4（黒ライン）：hd-base c-black

/*H5（グレー枠）：hd-base c-gray

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

/* ==================================================
   見出し H2〜H5 完全版（Cocoon）
   ・H2〜H4：白文字＋濃色
   ・H5：薄色背景のみ（帯なし）
================================================== */

/* 1. 完全リセット */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5{
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  font-weight: normal;
}

/* 2. 共通ベース */
.entry-content h2.hd-base,
.entry-content h3.hd-base,
.entry-content h4.hd-base,
.entry-content h5.hd-base{
  border-radius: 10px;
}

/* ---------- H2（帯・白文字） ---------- */
.entry-content h2.hd-base{
  padding: 0.65em 1.0em;
  margin: 2em 0 1.2em;
  letter-spacing: 0.08em;
　padding-top: 0.8em;
  padding-bottom: 0.8em;
  color: #ffffff;  /* ★白文字 */ 
}

/* ---------- H3（左帯・白文字） ---------- */
.entry-content h3.hd-base{
  padding: 0.45em 0.6em 0.45em 0.9em;
  margin: 1.6em 0 1.0em;
  border-left: 6px solid;
  color: #ffffff; /* ★白文字 */
}

/* ---------- H4（細帯・白文字） ---------- */
.entry-content h4.hd-base{
  padding: 0.35em 0.5em 0.35em 0.8em;
  margin: 1.3em 0 0.8em;
  border-left: 4px solid;
  color: #ffffff; /* ★白文字 */
}

/* ---------- H5（薄色背景・帯なし） ---------- */
.entry-content h5.hd-base{
  font-size: 1.0rem;
  padding: 20px 12px;
  margin: 1.2em 0;
  border-left: none;   !important;                /* ★帯なし */
  box-shadow: 0 0 4px rgba(0,0,0,0.23); !important;
  color: #333333;                     /* 読みやすい文字色 */
}

/* ==================================================
   色 × 背景色 セット
================================================== */

/* ■ レッド（注意） */
.entry-content h2.c-red,
.entry-content h3.c-red,
.entry-content h4.c-red{
  background-color: #e60033;
}
.entry-content h3.c-red,
.entry-content h4.c-red{
  border-color: #e60033;
}
.entry-content h5.c-red{
  background-color: #fef4f4;
}

/* ■ 濃ブラウン（メイン・高級） */
.entry-content h2.c-brown,
.entry-content h3.c-brown,
.entry-content h4.c-brown{
  background-color: #4A342E;
}
.entry-content h3.c-brown,
.entry-content h4.c-brown{
  border-color: #4A342E;
}
.entry-content h5.c-brown{
  background-color: #F7EFEA;
}

/* ■ ブラック（説明） */
.entry-content h2.c-black,
.entry-content h3.c-black,
.entry-content h4.c-black{
  background-color: #333333;
}
.entry-content h3.c-black,
.entry-content h4.c-black{
  border-color: #333333;
}
.entry-content h5.c-black{
  background-color: #F5F5F5;
}

/* ■ ネイビー（医療・安心） */
.entry-content h2.c-navy,
.entry-content h3.c-navy,
.entry-content h4.c-navy{
  background-color: #1F2A44;
}
.entry-content h3.c-navy,
.entry-content h4.c-navy{
  border-color: #1F2A44;
}
.entry-content h5.c-navy{
  background-color: #EEF2FA;
}

/* ■ グレー（補足） */
.entry-content h2.c-gray,
.entry-content h3.c-gray,
.entry-content h4.c-gray{
  background-color: #6B6B6B;
}
.entry-content h3.c-gray,
.entry-content h4.c-gray{
  border-color: #6B6B6B;
}
.entry-content h5.c-gray{
  background-color: #FAFAFA;
}

/* =====================================
   見出しの角丸を完全にゼロにする
   （本体・帯・疑似要素・子要素すべて）
===================================== */

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content h1 *,
.entry-content h2 *,
.entry-content h3 *,
.entry-content h4 *,
.entry-content h5 *,
.entry-content h6 *,
.entry-content h1::before,
.entry-content h2::before,
.entry-content h3::before,
.entry-content h4::before,
.entry-content h5::before,
.entry-content h6::before,
.entry-content h1::after,
.entry-content h2::after,
.entry-content h3::after,
.entry-content h4::after,
.entry-content h5::after,
.entry-content h6::after{
  border-radius: 0 !important;
}

/* =========================
   H5だけ角丸を戻す
========================= */
.entry-content h5,
.entry-content h5 *{
 border-radius: 8px !important;
}

/* H2（hd-base）の左帯をなくす */
.entry-content h2.hd-base{
  border-left: none;
}

/* H5（hd-base）の左帯をなくす */
.entry-content h5.hd-base{
  border-left: none;
}



.entry-content h5::before,
.entry-content h5::after{
  content: none;
}

/* ===== H1 スマホ最適化 ===== */
@media (max-width: 768px){
  .entry-content h1{
    font-size: 1.35rem !important;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 1.2em;
  }
}

/* ==================================================
   見出し H2〜H5 スマホ最適化（Cocoon）
================================================== */

@media (max-width: 768px){

  /* 共通 */
  .entry-content h2.hd-base,
  .entry-content h3.hd-base,
  .entry-content h4.hd-base,
  .entry-content h5.hd-base{
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
  }

  /* ---------- H2 ---------- */
  .entry-content h2.hd-base{
    font-size: 1.15rem !important;
    padding: 0.55em 0.8em !important;
  }

  /* ---------- H3 ---------- */
  .entry-content h3.hd-base{
    font-size: 1.05rem !important;
    padding: 0.4em 0.6em 0.4em 0.8em !important;
    border-left-width: 4px;
  }

  /* ---------- H4 ---------- */
  .entry-content h4.hd-base{
    font-size: 0.98rem !important;
    padding: 0.35em 0.5em 0.35em 0.7em !important;
    border-left-width: 3px;
  }

  /* ---------- H5 ---------- */
  .entry-content h5.hd-base{
    font-size: 0.95rem !important;
    padding: 14px 10px !important;
    box-shadow: 0 0 3px rgba(0,0,0,0.18);
  }
}


/* ===== H1(記事タイトル) & 本文見出し スマホ調整（class不要） ===== */

/* 記事タイトル（テーマ側のH1） */
@media (max-width: 768px){
  .entry-title{
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    line-height: 1.35;
  }
}

/* 本文のH1（本文にH1を置いている場合） */
@media (max-width: 768px){
  .entry-content h1{
    font-size: 1.30rem !important;
    font-weight: 700 !important;
    line-height: 1.4;
  }
}

/* 本文のH2〜H5（classなしでも効く） */
@media (max-width: 768px){
  .entry-content h2{
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.35;
  }
  .entry-content h3{
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.4;
  }
  .entry-content h4{
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    line-height: 1.45;
  }
  .entry-content h5{
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.5;
  }
}

@media (max-width: 768px){
  .entry-content h6{
    border-left: 3px solid #ccc;
    padding-left: 0.6em;
    color: #555;
  }
}


/* ==================================================
   見出し H2〜H6 最終バランス版（Cocoon / SP）
   ・雰囲気維持
   ・太すぎない
   ・医療サイト向け
================================================== */

@media (max-width: 768px){

  .entry-content h2{
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.35;
    margin: 1.9em 0 1.0em;
  }

  .entry-content h3{
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.4;
    margin: 1.6em 0 0.9em;
  }

  .entry-content h4{
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    line-height: 1.45;
    margin: 1.3em 0 0.8em;
  }

  .entry-content h5{
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.5;
    margin: 1.1em 0 0.7em;
  }

  .entry-content h6{
    font-size: 0.90rem !important;
    font-weight: 600 !important;
    line-height: 1.55;
    margin: 0.9em 0 0.5em;
    color: #333;
  }
}