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

/* ===============================================
   記事本文 見出しスタイル（案1a）
   Cocoon 追加CSS（外観 > カスタマイズ > 追加CSS）
   色：紫 #6D4E9C / 黒 #1C1720 の2色のみ
   =============================================== */

/* --- H2：章の区切り（紫ベタ × 白文字） --- */
.entry-content h2 {
  font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.55;
  letter-spacing: .02em;
  color: #fff;
  background: #6D4E9C;
  padding: 14px 16px;
  margin: 56px 0 22px;
  border: none;
  border-radius: 0;
}
.entry-content h2:first-child { margin-top: 0; }

/* --- H3：通常タイプ（淡い紫の帯 + 左ライン） --- */
.entry-content h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: #1C1720;
  background: #EFE7F8;
  border: none;
  border-left: 3px solid #6D4E9C;
  padding: 9px 12px;
  margin: 36px 0 12px;
  border-radius: 0;
}

/* --- H3：番号付きタイプ（連番20個でも軽い。帯なし・番号のみ紫） --- */
.entry-content h3.num {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.65;
  color: #1C1720;
  background: none;
  border: none;
  padding: 0;
  margin: 28px 0 10px;
}
.entry-content h3.num > span {   /* 番号部分 */
  flex: none;
  font-size: 14px;
  font-weight: 700;
  color: #6D4E9C;
  letter-spacing: .02em;
}

/* --- H4：補足レベル（ほぼ本文の重み） --- */
.entry-content h4 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  color: #6D4E9C;
  background: none;
  border: none;
  padding: 0;
  margin: 26px 0 8px;
}
.entry-content h4::before { content: "— "; }

/* --- 本文の強調（紫マーカー） --- */
.entry-content strong {
  font-weight: 700;
  background: linear-gradient(transparent 60%, #DDCBF4 60%);
}

/* --- スマホ（375px想定）微調整 --- */
@media screen and (max-width: 480px) {
  .entry-content h2 { font-size: 20px; padding: 13px 14px; margin: 48px 0 20px; }
  .entry-content h3 { font-size: 16.5px; margin: 32px 0 12px; }
  .entry-content h3.num { font-size: 16px; margin: 26px 0 10px; }
}

/* ===============================================
   記述例（エディターのHTMLブロック / カスタムHTML）

   <h2>既婚男性が妻以外の女性に心を奪われる理由</h2>
   <h3>家庭では得られない癒やしを求めている</h3>
   <h3 class="num"><span>1．</span>彼の弱さやネガティブな感情を否定しない</h3>
   <h3 class="num"><span>13．</span>尽くしすぎず対等な関係を作る</h3>
   <h4>話を否定せずに聞く</h4>

   ※ ブロックエディターでH3を選択 →「高度な設定」>「追加CSSクラス」に num を入力し、
      番号部分だけを選んでインライン<span>で囲めば同じ表示になります。
   =============================================== */

/* ===============================================
   記事本文 テーブルスタイル（案2a／表のまま整える）
   Cocoon子テーマ style.css 用
   ・見出しCSSとセレクタが競合しないよう .tbl-num で限定
   ・色は見出しと共通：紫 #6D4E9C / 黒 #1C1720 / 淡紫 #EFE7F8
   =============================================== */

/* ===== 表 ===== */
/* 外枠：横スクロールを起こさせない */
.entry-content .tbl-num {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 15px;
  margin: 28px 0;
  display: table;          /* Cocoonのレスポンシブ表設定を無効化 */
  overflow: visible;
  white-space: normal;
}
.entry-content .tbl-num th,
.entry-content .tbl-num td {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 見出し行（紫ベタ × 白文字） */
.entry-content .tbl-num thead th {
  background: #6D4E9C;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  padding: 10px 12px;
  border: none;
}
.entry-content .tbl-num thead th:first-child {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  padding: 10px 6px;
}
.entry-content .tbl-num thead th:last-child { text-align: left; }

/* 番号列：最小幅・折り返さない */
.entry-content .tbl-num tbody td:first-child {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  vertical-align: top;
  color: #6D4E9C;
  font-weight: 700;
  padding: 12px 8px;
}

/* 項目名列：折り返して読ませる */
.entry-content .tbl-num tbody td:last-child {
  color: #1C1720;
  line-height: 1.65;
  padding: 12px;
}

/* 行の地色と罫線（横罫のみ） */
.entry-content .tbl-num tbody td {
  background: #fff;
  border: none;
  border-bottom: 1px solid #E3D8F1;
}
.entry-content .tbl-num tbody tr:nth-child(even) td { background: #F5F0FB; }

/* スマホ（375px想定） */
@media screen and (max-width: 480px) {
  .entry-content .tbl-num { font-size: 14.5px; margin: 24px 0; }
  .entry-content .tbl-num tbody td:first-child { padding: 11px 6px; }
  .entry-content .tbl-num tbody td:last-child { padding: 11px 10px; }
}

/* ===============================================
   記述例（カスタムHTMLブロック）

   <table class="tbl-num">
     <thead>
       <tr><th>番号</th><th>既婚男性の心を奪う方法20選</th></tr>
     </thead>
     <tbody>
       <tr><td>1</td><td>彼の弱さやネガティブな感情を否定しない</td></tr>
       <tr><td>2</td><td>一緒にいる時間は明るい表情を意識する</td></tr>
       <tr><td>20</td><td>彼の言葉ではなく行動を見極める</td></tr>
     </tbody>
   </table>

   ※ ブロックエディターのテーブルブロックを使う場合は、
      「高度な設定」>「追加CSSクラス」に tbl-num を入力してください。
      （Cocoonの「スクロール可能」設定はオフのままで構いません）
   =============================================== */

/* ===== 目次 ===== */
/* ===============================================
   記事目次スタイル（案3a／コンパクトに詰める）
   Cocoon子テーマ style.css 用
   ・Cocoon出力の .toc を前提
   ・色は既存CSSと共通：紫 #6D4E9C / 黒 #1C1720 / 淡紫 #EFE7F8
   =============================================== */

/* --- 外枠：Cocoon標準の枠線・背景を消す --- */
.entry-content .toc,
.article .toc {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 28px 0 36px;
  font-size: 14px;
}

/* --- タイトル「目次」 --- */

/* Cocoonは <label class="toc-title" for="toc-checkbox-1">目次</label> を出力し、
   [閉じる]/[開く] は ::after の生成文字。文字色を紫に、開閉リンクは非表示にする。 */
.entry-content .toc .toc-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #6D4E9C;
  letter-spacing: .08em;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 2px solid #6D4E9C;
  padding: 0 0 8px;
  margin: 0 0 6px;
  cursor: default;          /* 開閉させない場合 */
}
/* 開閉リンク（[閉じる]／[開く]）を消す。
   ※ 開閉を残したい場合は、この2ブロックを削除してください。 */
.entry-content .toc .toc-title::after,
.entry-content .toc .toc-title::before { content: none !important; }
.entry-content .toc .toc-checkbox { display: none; }
/* 閉じた状態で出力されても常に開いて見せる */
.entry-content .toc .toc-content,
.entry-content .toc .toc-checkbox:checked ~ .toc-content {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  padding: 0;
  margin: 0;
}

/* --- リスト本体（番号はCSSカウンターで描画） --- */
.entry-content .toc .toc-list {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
}
.entry-content .toc .toc-list > li {
  counter-increment: toc;
  display: flex;
  gap: 8px;
  align-items: baseline;
  line-height: 1.5;
  padding: 7px 0;
  margin: 0;
  border-bottom: 1px solid #EDE5F7;
}
.entry-content .toc .toc-list > li:last-child { border-bottom: none; }
.entry-content .toc .toc-list > li::before {
  content: counter(toc);
  flex: none;
  width: 18px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: #6D4E9C;
}
.entry-content .toc .toc-list a {
  color: #1C1720;
  text-decoration: none;
  flex: 1 1 auto;           /* 2行に折り返しても番号とずれない */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.entry-content .toc .toc-list a:hover { color: #6D4E9C; }

/* --- H3が出力された場合（入れ子の ol） --- */
.entry-content .toc .toc-list ol {
  list-style: none;
  counter-reset: none;
  width: 100%;
  margin: 4px 0 0;
  padding: 0 0 0 2px;
  border-top: 1px dotted #E3D8F1;
}
.entry-content .toc .toc-list ol > li {
  counter-increment: none;
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.5;
  color: #4A4353;
  padding: 5px 0;
  border: none;
}
.entry-content .toc .toc-list ol > li::before {
  content: "―";
  flex: none;
  width: 12px;
  font-size: 11px;
  font-weight: 400;
  color: #A98FD0;
  text-align: left;
}
.entry-content .toc .toc-list ol a { color: #4A4353; }
/* 入れ子を持つ親li：横並びを崩さず子リストを下に落とす */
.entry-content .toc .toc-list > li { flex-wrap: wrap; }

/* --- スマホ（375px想定） --- */
@media screen and (max-width: 480px) {
  .entry-content .toc { margin: 24px 0 32px; }
  .entry-content .toc .toc-list > li { padding: 7px 0; }
}

/* ===============================================
   ■ ご質問への回答

   1.「目次 [閉じる]」の扱い
      Cocoonは label.toc-title（テキスト「目次」）＋ ::after の
      [閉じる]/[開く]＋ input.toc-checkbox で開閉しています。
      上記CSSでは ::after と checkbox を消し、toc-content を
      常時表示にして「開いたまま」に固定しています。
      ・タイトル文言を「もくじ」にしたい場合は
        Cocoon設定 > 目次 > 「目次タイトル」を「もくじ」に変更（CSSでは変えられません）。
      ・開閉を残したい場合は、::after と .toc-checkbox の
        2ブロックを削除すれば標準動作に戻ります。

   2.「全11項目」の数字
      自動では入りません。項目数はCSSでは取得できないため、
      デザインからは外し、タイトルは「もくじ」のみとしています。
      （どうしても出す場合はPHPフィルタかJSが必要です）

   3. H3が出力された場合
      入れ子の <ol> は番号なし・13px・「―」印・薄い文字色にして、
      H2の行より明確に軽く見えるようにしています。
      H2のみに絞る設定にすればこの部分は使われません。
   =============================================== */

/* ===== 本文段落・リスト ===== */
/* ===============================================
   本文段落・リストスタイル（案4a／標準）
   Cocoon子テーマ style.css 用
   色：紫 #6D4E9C / 黒 #1C1720 / 淡紫 #EFE7F8
   =============================================== */

/* --- 段落 --- */
.entry-content p {
  font-size: 17px;              /* PC */
  line-height: 1.9;
  letter-spacing: .02em;
  color: #1C1720;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.entry-content p:last-child { margin-bottom: 0; }

@media screen and (max-width: 480px) {
  .entry-content p {
    font-size: 16px;            /* スマホ：375px幅で1行 約21文字 */
    margin-bottom: 22px;
  }
}

/* --- 見出しとの間隔調整（下記「回答1」参照） ---
   隣接する margin は相殺されるため、段落22px と H3の36px では
   実際の差が 36px ÷ 22px＝1.6倍しかなく、切れ目が弱い。
   見出し側の上余白だけを少し広げて差を作る。 */
.entry-content h2 { margin: 64px 0 22px; }   /* 56px → 64px */
.entry-content h3 { margin: 42px 0 12px; }   /* 36px → 42px */
.entry-content h3.num { margin: 30px 0 10px; } /* 28px → 30px */
.entry-content h4 { margin: 28px 0 8px; }

@media screen and (max-width: 480px) {
  .entry-content h2 { margin: 56px 0 20px; }
  .entry-content h3 { margin: 38px 0 12px; }
  .entry-content h3.num { margin: 28px 0 10px; }
  .entry-content h4 { margin: 26px 0 8px; }
}

/* --- リスト（ul / ol）共通 --- */
.entry-content ul,
.entry-content ol {
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .02em;
  color: #1C1720;
  margin: 22px 0 26px;
  padding: 0;
  list-style: none;
}
.entry-content li {
  margin: 0 0 10px;
  padding: 0;
}
.entry-content li:last-child { margin-bottom: 0; }
/* 入れ子リスト */
.entry-content li > ul,
.entry-content li > ol {
  margin: 10px 0 0;
  font-size: 16px;
}

/* --- ul：紫の小さな四角 --- */
.entry-content ul > li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.entry-content ul > li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: #6D4E9C;
  transform: translateY(-2px);
}

/* --- ol：紫の連番（折り返しても番号とテキストがずれない） --- */
.entry-content ol { counter-reset: li-num; }
.entry-content ol > li {
  counter-increment: li-num;
  display: flex;
  gap: 9px;
  align-items: baseline;
}
.entry-content ol > li::before {
  content: counter(li-num) ".";
  flex: none;
  min-width: 18px;
  font-size: 14px;
  font-weight: 700;
  color: #6D4E9C;
}

@media screen and (max-width: 480px) {
  .entry-content ul,
  .entry-content ol { font-size: 16px; margin: 20px 0 24px; }
  .entry-content li { margin-bottom: 9px; }
}

/* ===============================================
   ■ ご質問への回答

   1. 見出しとの間隔について
      隣接する要素の margin は相殺されるため、
      「段落の下22px ＋ H3の上36px」は合計58pxではなく
      大きい方の 36px になります。
      段落間22px に対して36pxは1.6倍で、スクロール中は
      段落の切れ目と見出しの切れ目が見分けづらくなります。

      そこで見出し側の上余白だけを広げ、下の関係にしました。
        段落間     22px
        H4 の上    28px（1.3倍）
        番号付きH3 30px（1.4倍）
        H3 の上    42px（1.9倍）
        H2 の上    64px（2.9倍）
      下余白（22 / 12 / 10）は既存のまま変更していません。
      H3の帯（淡紫の背景）自体が切れ目として働くので、
      42pxでも間延びしません。

   2. リストについて
      段落と同じ 17px / 16px・行間1.9・字間.02em を継承し、
      行間との差が出るよう項目間は10pxに設定。
      ul は紫の6px角、ol は紫の連番を ::before で描画しているので、
      2行に折り返しても行頭がそろいます。
      リスト全体の余白は上22px・下26px（次の段落と重ならない量）。
   =============================================== */

/* ===== ファーストビュー ===== */
/* ===============================================
   記事ファーストビュー（案5c／画像にタイトル情報を重ねる）
   Cocoon子テーマ style.css 用
   色：紫 #6D4E9C / 黒 #1C1720 / 淡紫 #EFE7F8
   ※Cocoonのクラス名はバージョンで差があるため、
     効かない箇所があれば実際の出力HTMLを見せてください。
   =============================================== */

/* --- 1. サイトヘッダー：紫の星空・高さ52px --- */
.tagline { display: none; }                   /* キャッチコピーを非表示 */

.header,
.header-container,
.header-container-in {
  background: none;
  min-height: 0;
  padding: 0;
}
.header-container {
  background:
    radial-gradient(1.6px 1.6px at 18px 14px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 52px 32px, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 90px 10px, rgba(255,255,255,.6), transparent),
    radial-gradient(1.4px 1.4px at 128px 36px, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 165px 18px, rgba(255,255,255,.55), transparent),
    radial-gradient(1.6px 1.6px at 205px 41px, #fff, transparent),
    radial-gradient(1.1px 1.1px at 240px 12px, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 278px 31px, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 312px 16px, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 348px 38px, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 68px 44px, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 188px 7px, rgba(255,255,255,.5), transparent),
    linear-gradient(160deg, #2A1B4A 0%, #4B2F7C 55%, #6D4E9C 100%);
}
.header-container-in {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 16px;
}
.logo-header,
.logo-header .site-name,
.logo-header .site-name-text {
  margin: 0;
  padding: 0;
}
.site-name-text {
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #fff;
}
.site-name-text-link,
.site-name-text-link:hover { color: #fff; }

/* --- 2. 記事ヘッダー：画像を先に、タイトルを下に --- */
.article .article-header,
.entry-header {
  display: flex;
  flex-direction: column;
  margin: 0 0 18px;
}
.article .eye-catch-wrap { order: 1; }
.article .date-tags      { order: 2; }
.article .entry-title    { order: 3; }
.article .entry-categories-tags { order: 4; }

/* アイキャッチ：16:9で固定し、下側に黒のグラデーションを重ねる */
.article .eye-catch-wrap {
  position: relative;
  width: 100%;
  margin: 0;
  line-height: 0;
}
.article .eye-catch-wrap .eye-catch {
  width: 100%;
  margin: 0;
}
.article .eye-catch-wrap img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.article .eye-catch-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(28,23,32,.86) 0%,
    rgba(28,23,32,.55) 48%,
    rgba(28,23,32,.10) 100%);
}
/* 画像の左上に乗るカテゴリー表示は使わない */
.article .eye-catch-wrap .cat-label { display: none; }

/* 日付：画像の下端に重ねる（公開／更新） */
.article .date-tags {
  position: relative;
  z-index: 1;
  margin: -34px 0 0;
  padding: 0 16px 12px;
  font-size: 11px;
  letter-spacing: .04em;
  line-height: 1.6;
  color: #D8C8EE;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.article .date-tags .post-date,
.article .date-tags .post-update {
  color: #D8C8EE;
  margin: 0;
}
.article .date-tags .post-update { color: #EDE2FA; }
.article .date-tags .fa,
.article .date-tags svg { display: none; }   /* アイコンは使わない */

/* タイトル：画像の下・紫の縦線 */
.article .entry-title {
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
  color: #1C1720;
  border-left: 4px solid #6D4E9C;
  padding: 0 0 0 12px;
  margin: 16px 16px 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 本文の始まり（導入文）を近づける */
.article .entry-content { margin-top: 18px; }

/* --- 3. PC（769px以上）--- */
@media screen and (min-width: 769px) {
  .header-container-in { min-height: 60px; padding: 0 24px; }
  .site-name-text { font-size: 18px; }
  .article .entry-title { font-size: 27px; margin: 20px 0 0; }
  .article .date-tags { margin-top: -40px; padding: 0 20px 14px; font-size: 12px; }
}

/* ===============================================
   ■ 補足

   ・タイトルより先にアイキャッチを出すため、
     .article-header を flex にして order で並べ替えています
     （PHPの改変なしで順序を入れ替えられます）。
   ・日付は画像の下端に重ねる形なので、
     .date-tags の margin-top（-34px / PC -40px）で位置を調整してください。
   ・Cocoon設定 > 投稿 で「投稿日を表示」「更新日を表示」をオンにすると
     公開／更新の2つが並びます。更新日がない記事は自動的に1つだけになります。
   ・カテゴリーは非表示にしています。記事上部に出したい場合は
     .article .entry-categories-tags { display:block; order:0; } から
     ラベルの装飾を足してください。
   =============================================== */

/* ===== ファーストビュー調整：黒グラデーションを外す ===== */
.article .eye-catch-wrap::after {
  display: none !important;
  background: none !important;
}

.article .date-tags {
  margin: 12px 0 0;
  padding: 0 16px;
  color: #7A7186;
}
.article .date-tags .post-date,
.article .date-tags .post-update {
  color: #7A7186;
}

@media screen and (min-width: 769px) {
  .article .date-tags {
    margin-top: 14px;
    padding: 0;
  }
}

/* ===== 記事下カテゴリー・タグ ===== */
/* ===============================================
   記事下 カテゴリー／タグ（案6a／枠線のチップ）
   Cocoon子テーマ style.css 用
   色：紫 #6D4E9C / 黒 #1C1720 / 淡紫 #EFE7F8
   =============================================== */

/* ▼重要：既存の以下のCSSは削除してください
     .article .entry-categories-tags,
     .article .entry-category { display: none; }
   .entry-categories-tags はCocoonが1回だけ出力する要素で、
   記事下のカテゴリー表示もこれを使います。非表示のままだと
   下部にも出ません。画像左上のラベルは別要素（.cat-label）なので、
   そちらだけを下記で非表示にします。 */

/* --- 1. 記事上部（アイキャッチ左上）のラベルだけ消す --- */
.article .eye-catch-wrap .cat-label,
.article .eye-catch .cat-label,
.entry-card-content .cat-label { display: none; }

/* --- 2. 記事下のカテゴリー／タグ枠 --- */
.article .entry-categories-tags {
  display: block;
  border-top: 1px solid #E3D8F1;
  padding: 16px 0 0;
  margin: 36px 0 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

/* ラベル（Cocoonは「カテゴリー」の文字を出力しないのでCSSで足す） */
.article .entry-categories::before,
.article .entry-tags::before {
  content: "カテゴリー";
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #6D4E9C;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.article .entry-tags::before {
  content: "タグ";
  color: #8A79A6;
}

/* カテゴリーとタグの並び（両方出た場合は縦に16px空ける） */
.article .entry-categories,
.article .entry-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.article .entry-categories::before,
.article .entry-tags::before { flex: 0 0 100%; }
.article .entry-tags { margin-top: 16px; }

/* カテゴリー：紫の枠チップ */
.article .entry-categories a,
.article .entry-categories .cat-link {
  display: inline-block;
  font-size: 13px;
  line-height: 1.5;
  color: #6D4E9C;
  background: none;
  border: 1px solid #6D4E9C;
  border-radius: 0;
  padding: 5px 12px;
  margin: 0;
  text-decoration: none;
  max-width: 100%;
  word-break: break-word;
}
.article .entry-categories a:hover {
  color: #fff;
  background: #6D4E9C;
}

/* タグ：＃付き・下線のみで一段軽く */
.article .entry-tags a,
.article .entry-tags .tag-link {
  display: inline-block;
  font-size: 12.5px;
  line-height: 1.5;
  color: #5D566B;
  background: none;
  border: none;
  border-bottom: 1px solid #DFD1F0;
  border-radius: 0;
  padding: 0 0 2px;
  margin: 0 6px 0 0;
  text-decoration: none;
}
.article .entry-tags a::before { content: "＃"; color: #8A79A6; }
.article .entry-tags a:hover {
  color: #6D4E9C;
  border-bottom-color: #6D4E9C;
}

/* アイコンフォント（フォルダ・タグ）は使わない */
.article .entry-categories-tags .fa,
.article .entry-categories-tags .fas,
.article .entry-categories-tags .far,
.article .entry-categories-tags svg { display: none; }

@media screen and (max-width: 480px) {
  .article .entry-categories-tags { margin-top: 32px; }
}

/* ===============================================
   ■ 確認事項

   1. 想定しているCocoonのHTML構造
      <div class="entry-categories-tags">
        <div class="entry-categories">
          <a href="..." class="cat-link cat-link-12">不倫</a>
        </div>
        <div class="entry-tags">
          <a href="..." class="tag-link tag-link-5">冷却期間</a>
          <a href="..." class="tag-link tag-link-8">連絡</a>
        </div>
      </div>
      ・アイキャッチ左上のラベルは別要素で、
        .eye-catch-wrap 内の <span class="cat-label cat-label-12">不倫</span> です。

   2. 効かなかった場合に確認すべき箇所
      ・記事下にカテゴリーが出ているか（出ていなければCSSではなく設定側／下記3）。
      ・出力の親クラスが .entry-categories-tags か
        （バージョンにより .entry-categories-tags-wrap / .categories-tags などの場合あり）。
        → 実際のHTMLの親クラス名に、本CSSの .entry-categories-tags を置換。
      ・子要素が div.entry-categories ではなく ul > li で出力される場合、
        list-style: none; padding: 0; を追加し、
        セレクタを .entry-categories li a に読み替え。
      ・「カテゴリー」「タグ」のラベル文字が二重に出る場合は、
        テーマ側が既にラベルを出力しています。
        ::before の2ブロックを削除してください。
      ・リンクに Cocoon既定の背景色や角丸が残る場合は、
        .cat-link / .tag-link に対して
        background:none; border-radius:0; を !important 付きで指定。

   3. Cocoon設定側で必要な設定
      ・Cocoon設定 > 投稿
        「カテゴリーの表示」：オン
        「タグの表示」：オン（将来タグを使うとき）
        表示位置の選択がある場合は「本文下」を選択。
      ・Cocoon設定 > 画像
        「アイキャッチのカテゴリーラベル表示」：オフにできる場合はオフ推奨
        （オフにできない版はCSSの .cat-label 非表示で対応済み）。
      ・記事下のカテゴリー表示がそもそも出ない版では、
        投稿ページのカテゴリー表示自体がオフになっていないか確認。
   =============================================== */

/* ===== ヘッダーのサイト名を記事の左端に揃える ===== */
.header-container-in {
  display: flex !important;
  justify-content: flex-start !important;
  max-width: 1026px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.logo-header,
.header-container-in .logo-header {
  margin: 0 !important;
  text-align: left !important;
  width: auto !important;
}
.logo-header .site-name,
.logo-header .site-name-text {
  text-align: left !important;
  margin: 0 !important;
}

/* ===== スマホのヘッダー左余白 ===== */
@media screen and (max-width: 834px) {
  .header-container-in,
  .header-in,
  .header .wrap,
  .logo-header {
    padding-left: 16px !important;
  }
}