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

/* ============================
   Corporate Headings (H2/H3)
   - 清潔感あるブルーグレー系
   - 見出し前後の余白を統一
   - 日本語Webフォント系を想定
   ============================ */
:root{
  --hd-font: "Noto Sans JP","Hiragino Sans","ヒラギノ角ゴ ProN","Yu Gothic","メイリオ",system-ui,sans-serif;
  --hd-accent: #0f172a;   /* ネイビー寄りの濃色 */
  --hd-muted:  #475569;   /* サブテキスト用 */
  --hd-rule:   #e5e7eb;   /* 下線/罫線 */
  --hd-chip:   #e6efff;   /* ラベル用の淡色 */
}

/* Gutenberg/本文領域を対象に */
.entry-content h2,
.entry-content h3,
.wp-block-heading h2,
.wp-block-heading h3 {
  font-family: var(--hd-font);
  letter-spacing: .02em;
  line-height: 1.25;
  color: var(--hd-accent);
  scroll-margin-top: 96px; /* 固定ヘッダー用のずれ補正 */
}

/* H2：セクション見出し（堂々・強め） */
.entry-content h2,
.wp-block-heading h2{
  /* 可変サイズ：モバイル〜デスクトップで滑らか */
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  margin: clamp(28px, 4vw, 48px) 0 clamp(14px, 1.6vw, 20px);
  position: relative;
  padding-left: 14px;
}
.entry-content h2::before,
.wp-block-heading h2::before{
  content: "";
  position: absolute;
  left: 0; top: .2em;
  width: 6px; height: 1.1em;
  border-radius: 3px;
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%); /* 青グラデの縦バー */
}
/* H2下にうっすら罫線（企業っぽい締まり） */
.entry-content h2::after,
.wp-block-heading h2::after{
  content: "";
  display: block;
  margin-top: .45em;
  height: 1px;
  background: linear-gradient(90deg, var(--hd-rule), transparent 60%);
}

/* H3：ブロック見出し（端正・抑えめ） */
.entry-content h3,
.wp-block-heading h3{
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 22px);
  margin: clamp(22px, 3.2vw, 36px) 0 clamp(8px, 1.2vw, 14px);
  color: var(--hd-accent);
  padding-left: 10px;
  border-left: 4px solid #93c5fd; /* 淡いブルーの左罫線 */
}

/* H3の補助ラベル（任意：先頭に[ポイント]等の短いラベルを置くとチップ風に） */
.entry-content h3 > em:first-child{
  font-style: normal;
  font-weight: 700;
  color: #1e40af;
  background: var(--hd-chip);
  border: 1px solid #c7ddff;
  border-radius: 6px;
  padding: .1em .5em;
  margin-right: .4em;
  letter-spacing: .03em;
}

/* 見出し直下の段落の行間を整える（読みやすさ） */
.entry-content h2 + p,
.entry-content h3 + p{
  color: var(--hd-muted);
  line-height: 1.8;
}

/* 目次（プラグイン等）を簡易で企業っぽく */
.entry-content .toc_container,
.entry-content .ez-toc-container{
  border: 1px solid var(--hd-rule);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
}
.entry-content .toc_container .toc_title{
  font-family: var(--hd-font);
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 8px;
  color: var(--hd-accent);
}
.entry-content .toc_container a{
  color: #0f172a;
  text-decoration: none;
}
.entry-content .toc_container a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ダークモード配慮（端末設定に追従） */
@media (prefers-color-scheme: dark){
  :root{
    --hd-accent:#e5e7eb;
    --hd-muted:#cbd5e1;
    --hd-rule:#334155;
    --hd-chip:#172554;
  }
  .entry-content h2::after,
  .wp-block-heading h2::after{
    background: linear-gradient(90deg, var(--hd-rule), transparent 60%);
  }
  .entry-content .toc_container,
  .entry-content .ez-toc-container{
    background: #0b1220;
    border-color: var(--hd-rule);
  }
  .entry-content .toc_container a{ color: #e5e7eb; }
}

/* ===== Sharp H2 (Minimal & Corporate) ===== */
.entry-content h2,
.wp-block-heading h2{
  /* ベース */
  font-weight: 750;                 /* しっかり太め（700でもOK） */
  font-size: clamp(22px, 2.0vw, 28px);
  letter-spacing: .01em;
  line-height: 1.22;
  color: #0f172a;
  margin: clamp(26px, 3.6vw, 42px) 0 clamp(10px, 1.2vw, 14px);
  padding: 0 0 8px 0;               /* 下にだけ余白 */
  border-bottom: 2px solid #0f172a; /* 直線の強い下線 */
  position: relative;
}

/* 以前の装飾（縦バー/擬似要素）を無効化 */
.entry-content h2::before,
.wp-block-heading h2::before,
.entry-content h2::after,
.wp-block-heading h2::after{ content:none !important; }

/* 補助：見出し直下の段落は少し詰めて、緊張感を維持 */
.entry-content h2 + p{ 
  margin-top: .35rem;
  color: #475569;
}

/* ダークモード時の色味を調整（濁りを抑えたコントラスト） */
@media (prefers-color-scheme: dark){
  .entry-content h2,
  .wp-block-heading h2{
    color: #e5e7eb;
    border-bottom-color: #e5e7eb;
  }
  .entry-content h2 + p{ color: #cbd5e1; }
}

/* 任意：小文字でもシャープに見せたい場合の微トラッキング */
@supports (font-variation-settings: normal){
  .entry-content h2,
  .wp-block-heading h2{ font-variation-settings: "wdth" 100, "wght" 750; }
}