@charset "UTF-8";
/* ==========================================================================
   記事ページ ─ 骨格と見出し
   --------------------------------------------------------------------------
   本文中のパーツ（強調・ボックス・リスト・表・ボタンなど）は blocks.css。

   見出しのセレクタは h*.wp-block-heading（ブロックエディターが付けるクラス）。
   .entry-content で絞っていないのは、編集画面でも同じ見た目にするため。
   読み込み順が common.css より後なので !important は不要。

   見出しの強さは「面 → 線 → 点」で段階的に落とす。色は増やさず面積で階層を作る。
     H2 … 薄紫のベタ塗り ＋ 左に紫バー   （面）
     H3 … 左に紫バー ＋ 細い実線の下線     （線）
     H4 … 小さな紫の四角 ＋ 太字          （点）
     H5 … 太字のみ                        （装飾なし）
   ========================================================================== */

/* --------------------------------------------------------------------------
   パンくず
   functions.php で「メインカラムトップ」＝記事の先頭に移している。
   Cocoon は div の入れ子で出力する（ol/li ではない）。
   -------------------------------------------------------------------------- */
#breadcrumb.breadcrumb{
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         6px;
  margin:      0 0 16px;
  padding:     0;
  font-size:   12px;
  line-height: 1.6;
  color:       var(--c-ink-3);
}
#breadcrumb.breadcrumb .breadcrumb-home,
#breadcrumb.breadcrumb .breadcrumb-item{
  display:     flex;
  align-items: center;
  gap:         6px;
  margin:      0;
  padding:     0;
  font-size:   inherit;
}
/* 素のままだと当たり判定が高さ19pxしかないので、上下に余白を足して
   24px 以上を確保する（WCAG 2.5.8 の目安）。
   親が inline-flex で並んでいるため、行の高さは変わらない。 */
#breadcrumb.breadcrumb a{
  display: inline-block;
  padding: 3px 0;
  color:   var(--c-ink-3);
}
#breadcrumb.breadcrumb a:hover{ color: var(--c-brand-dark); text-decoration: none; }

/* 区切りは「／」に統一。Cocoon の ＞ アイコンとフォルダ／タグのアイコンは使わない */
#breadcrumb.breadcrumb .breadcrumb-item .sp{ display: none; }
#breadcrumb.breadcrumb .breadcrumb-item::before{
  content: "／";
  color:   var(--c-line-strong);
}
#breadcrumb.breadcrumb .fa{ display: none; }

/* --------------------------------------------------------------------------
   記事ヘッダー

   Cocoon（tmp/content.php）が出力する順序は
     タイトル → アイキャッチ → 日付 → カテゴリ・タグ

   デザイン案は
     カテゴリ → タイトル → 更新日・公開日・読了目安 → アイキャッチ → タグ

   テンプレートを書き換えず、flex の order で並び替える。
   .entry-categories-tags を display:contents にすると、その中の
   カテゴリとタグを別々の order で扱える（カテゴリは上、タグは最後）。
   -------------------------------------------------------------------------- */
.article-header{
  display:        flex;
  flex-direction: column;
  margin:         0 0 28px;
}
.article-header .entry-categories-tags{ display: contents; }

.article-header .entry-categories{ order: 1; }
.article-header .entry-title     { order: 2; }
.article-header .date-tags       { order: 3; }
.article-header .eye-catch-wrap  { order: 4; }
.article-header .entry-tags      { order: 5; }

/* --- カテゴリ（チップ） --------------------------------------------------- */
.article-header .entry-categories{
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  margin:    0;
}
.article-header .entry-categories .cat-link{
  display:     inline-flex;
  align-items: center;
  height:      24px;
  padding:     0 10px;
  border:      0;
  border-radius: 4px;
  background:  var(--c-brand);
  color:       var(--c-on-dark);
  font-size:   12px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
}
.article-header .entry-categories .cat-link:hover{
  background:      var(--c-brand-dark);
  text-decoration: none;
}
.article-header .entry-categories .tax-icon{ display: none; }

/* --- 記事タイトル --------------------------------------------------------- */
.entry-title{
  font-size:   32px;          /* 現状 28px */
  line-height: 1.45;
}
.article-header .entry-title{ margin: 12px 0 16px; }

/* --- メタ情報（更新日・公開日・読了目安） --------------------------------- */
.article-header .date-tags{
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         8px 18px;
  margin:      0;
  padding:     0 0 16px;
  border-bottom: 1px solid var(--c-line);
  font-size:   13px;
  color:       var(--c-ink-3);
}
.article-header .date-tags > span{
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  margin:      0;
  font-size:   inherit;
  color:       inherit;
}
.article-header .date-tags .fa{ flex: none; color: var(--c-ink-4); }

/* 更新日はいちばん知りたい情報なので他より強くする */
.article-header .date-tags .post-update{
  color:       var(--c-brand-deep);
  font-weight: 700;
}
.article-header .date-tags .post-update .fa{ color: inherit; }

/* --- アイキャッチ --------------------------------------------------------- */
.article-header .eye-catch-wrap{ margin: 20px 0 0; }
.article-header .eye-catch{
  margin:        0;
  border:        1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.article-header .eye-catch img{
  display:      block;
  width:        100%;
  aspect-ratio: 16 / 9;
  object-fit:   cover;
}
/* カテゴリはヘッダー上部のチップで出しているので、画像の上のラベルは重複 */
.article-header .eye-catch .cat-label{ display: none; }

/* --- タグ ----------------------------------------------------------------- */
.article-header .entry-tags{
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  margin:    16px 0 0;
}
.article-header .entry-tags .tag-link{
  display:     inline-flex;
  align-items: center;
  height:      28px;
  padding:     0 12px;
  border:      1px solid var(--c-line);
  border-radius: 999px;
  background:  var(--c-bg);
  color:       var(--c-ink-2);
  font-size:   12px;
  line-height: 1;
}
.article-header .entry-tags .tag-link::before{
  content:      "#";
  margin-right: 3px;
  color:        var(--c-ink-3);
}
.article-header .entry-tags .tag-link:hover{
  border-color:    var(--c-brand);
  color:           var(--c-brand-dark);
  background:      var(--c-brand-pale);
  text-decoration: none;
}
.article-header .entry-tags .tax-icon{ display: none; }

/* --------------------------------------------------------------------------
   本文の行長
   768px（全角約48字）→ 720px（約42字）。サイドバー幅は変えない。

   段落だけに掛けると、見出し・画像・目次が 768px のまま残って
   右端が 48px ずれる。デザイン案は本文ブロック全体を 720px に収める仕様なので、
   .entry-content の直下要素すべてに掛ける。
   （.entry-content 自体に max-width を掛けると左右 16px の padding のぶん
     内側が 688px になってしまうため、直下要素側で受ける）
   -------------------------------------------------------------------------- */
.entry-content > *{
  max-width: var(--w-read);
}

/* 意図的に幅を広げるブロックは対象外にする */
.entry-content > .alignwide,
.entry-content > .alignfull{
  max-width: none;
}

/* --------------------------------------------------------------------------
   見出し共通
   Cocoon 本体は .article h2 に margin:4em -20px 2em（左右にはみ出す）を
   当てているので、マージンは全レベルで明示的に打ち消す。
   -------------------------------------------------------------------------- */
.wp-block-heading{
  position:       relative;
  letter-spacing: .02em;      /* 現状 .05em */
  color:          var(--c-ink);
}
.wp-block-heading:first-child{ margin-top: 0; }

/* --- H2：面 --------------------------------------------------------------- */
h2.wp-block-heading{
  margin:        64px 0 22px;  /* 現状 60px 0 20px（H3と同値だった） */
  padding:       14px 18px 14px 22px;
  border:        0;
  border-radius: 6px;
  background:    var(--c-brand-pale);
  font-size:     24px;
  line-height:   1.55;
  font-weight:   700;
  /* Cocoon本体の .article h2 は「濃い地に白文字」なので、色はここで明示する。
     .wp-block-heading（0,1,0）では .article h2（0,1,1）に負ける。 */
  color:         var(--c-ink);
}
h2.wp-block-heading span{ color: inherit; }
h2.wp-block-heading::before{
  content:  "";
  position: absolute;
  left:     0;
  top:      10px;
  bottom:   10px;
  width:    4px;
  height:   auto;              /* 現状は 20px 固定・左に -5px はみ出していた */
  transform: none;
  border-radius: 0 3px 3px 0;
  background: var(--c-brand);
}

/* --- H3：線 --------------------------------------------------------------- */
h3.wp-block-heading{
  margin:      44px 0 16px;    /* 現状 60px */
  padding:     0 0 10px 14px;
  border:      0;
  border-bottom: 1px solid var(--c-line);   /* 現状 4px の紫点線 */
  font-size:   20px;
  line-height: 1.6;
  font-weight: 700;
}
h3.wp-block-heading::before{
  content:  "";
  position: absolute;
  left:     0;
  top:      .32em;
  width:    4px;
  height:   1.05em;
  border-radius: 2px;
  background: var(--c-brand);
}

/* --- H4：点 --------------------------------------------------------------- */
h4.wp-block-heading{
  margin:       32px 0 12px;
  padding:      0 0 0 16px;
  border:       0;
  background:   none;
  font-size:    17px;          /* 現状 20px（H3と同値だった） */
  line-height:  1.7;
  font-weight:  700;
  color:        var(--c-ink-2);
}
h4.wp-block-heading::before{
  content:  "";
  position: absolute;
  left:     0;
  top:      .62em;
  width:    8px;
  height:   8px;
  border-radius: 2px;
  background: var(--c-brand);
  opacity:  .55;
}
/* 現状の 40px の紫バーは使わない */
h4.wp-block-heading::after{ content: none; }

/* --- H5：装飾なし --------------------------------------------------------- */
h5.wp-block-heading{
  margin:      28px 0 10px;
  padding:     0;
  border:      0;
  font-size:   16px;
  line-height: 1.7;
  font-weight: 700;
  color:       var(--c-ink-2);
}

/* --- H1・H6（記事本文ではほぼ使わないが、崩れないようにしておく） ----------- */
h1.wp-block-heading{
  margin:      64px 0 24px;
  padding:     0 0 14px;
  border:      0;
  border-bottom: 2px solid var(--c-brand);
  font-size:   28px;
  line-height: 1.45;
  font-weight: 700;
}
h1.wp-block-heading::before,
h1.wp-block-heading::after{ content: none; }

h6.wp-block-heading{
  margin:      24px 0 8px;
  padding:     0;
  border:      0;
  display:     block;
  font-size:   15px;
  line-height: 1.7;
  font-weight: 700;
  color:       var(--c-ink-3);
}
h6.wp-block-heading::before{ content: none; }

/* --------------------------------------------------------------------------
   SP（834px以下）
   本文だけ縮めるとボックスや手順リストが PC サイズのまま残って不揃いに見えるので、
   見出しも一段ずつ下げる。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 834px){
  .entry-title{
    font-size:   24px;        /* 現状 16px ── 本文とほぼ同サイズで見出しに見えなかった */
    line-height: 1.5;
  }

  h1.wp-block-heading{ font-size: 22px; margin-top: 48px; }

  h2.wp-block-heading{
    margin:    48px 0 18px;
    padding:   12px 14px 12px 18px;
    font-size: 20px;          /* 現状 18px */
  }

  h3.wp-block-heading{
    margin:    36px 0 14px;
    padding:   0 0 8px 12px;
    font-size: 18px;
  }

  h4.wp-block-heading{
    margin:    28px 0 10px;
    font-size: 16px;
  }

  h5.wp-block-heading{ margin: 24px 0 8px; font-size: 15px; }
  h6.wp-block-heading{ margin: 20px 0 8px; font-size: 14px; }
}