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

/************************************
** 子テーマ用のスタイルを書く
************************************/


h1.entry-title[itemprop="headline"] {
    background-color: transparent !important; /* 背景色をなしに設定 */
    color: #2E4052 !important; /* テキストカラーを白に設定して読みやすく */
	border-bottom: 3px solid ;
	border-image: linear-gradient(to right, #28C443, #01B4ED) 1;
	font-size:20px;
	font-family: "Helvetica" !important;
}

h2 {
    background-color: #01b4ed !important;
    color: #FFFFFF !important; 
    font-size: 20px;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 1.2em !important; /* アイコンとテキストの間のスペースを確保 */
    position: relative;
    line-height: 1.5; /* 見出し全体の行の高さを設定 */
    display: flex; /* アイコンとテキストをフレックスボックスで管理 */
    align-items: center; /* フレックス内の要素を垂直方向に中央揃え */
}

h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5em;
    height: 1.5em;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M10 17l5-5-5-5v10z"/></svg>') no-repeat center;
    background-size: contain;
}

@media screen and (max-width: 768px) {
    h2 {
        padding-left: 1.3em !important; /* スマホ用に余裕を追加 */
    }
    h2::before {
        width: 1.5em !important; /* アイコンのサイズを調整 */
        height: 1.5em !important; /* アイコンのサイズを調整 */
    }
}

.article h3 {
    border: none !important; /* すべての境界線を削除 */
    font-size: 19px;
    padding: 0 !important; /* パディングをリセット */
    padding-left: 1.2em !important; /* アイコンとテキストの間のスペースを確保 */
    position: relative;
    line-height: 1.5; /* 見出し全体の行の高さを設定 */
    display: flex; /* アイコンとテキストをフレックスボックスで管理 */
    align-items: center; /* フレックス内の要素を垂直方向に中央揃え */
    border-top: 1px solid #01b4ed !important; /* 細めの上線を追加 */
    border-bottom: 1px solid #01b4ed !important; /* 細めの下線を追加 */
	padding-top: 5px !important; /* 上線とタイトルの間の余白 */
    padding-bottom: 5px !important; /* タイトルと下線の間の余白 */
}

.article h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5em;
    height: 1.5em;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2301b4ed"><path d="M10 17l5-5-5-5v10z"/></svg>') no-repeat center;
    background-size: contain;
}

@media screen and (max-width: 768px) {
.article h3 {
        padding-left: 1.3em !important; /* スマホ用に余裕を追加 */
    }
.article h3::before {
        width: 1.5em !important; /* アイコンのサイズを調整 */
        height: 1.5em !important; /* アイコンのサイズを調整 */
    }
}

/* =============================================================================
 * Phase 7 追記: コラム固有パーツ（リード/メタ行/タグチップ/結論ボックス/目次/FAQ/著者ボックス）
 * column.css は functions.php の enqueue で「is_single() かつ has_category(16/44)」のときだけ
 * 読み込まれるため、ここに書くスタイルは自動的にコラム限定で効く（試合ページ等には影響なし）。
 * ============================================================================= */

/* ---- Cocoon標準の日付表示を隠す（メタ行 .col-meta に日付を統合するため・コラム限定） ---- */
.entry-date,
.post-date,
.update-date,
.post-update { display: none !important; }

/* ---- 4 リード文 ---- */
.col-lead {
  font-size: 1.05em;
  line-height: 1.9;
  color: #2E4052;
  margin: 0 0 1.2em;
}

/* ---- 5 メタ行（日付＋読了時間） ---- */
.col-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font-size: 0.85em;
  color: #6b7280;
  margin: 0 0 1.4em;
}
.col-meta__date::before { content: "\1F4C5"; margin-right: 5px; }   /* 📅 */
.col-meta__read::before { content: "\23F1"; margin-right: 5px; }    /* ⏱ */

/* ---- 6 タグチップ（角丸ピル・リンクなし・装飾のみ） ---- */
.col-chips {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6em;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.col-chip {
  font-size: 0.8em;
  line-height: 1;
  padding: 7px 13px;
  border-radius: 999px;
  background: #eef7fd;
  color: #0277bd;
  border: 1px solid #cfe8f7;
}
.col-chip::before { content: "#"; opacity: 0.6; margin-right: 2px; }

/* ---- 7 結論ボックス（青ボーダー＋ラベル＋薄青背景） ---- */
.col-conclusion {
  position: relative;
  background: #f5fafd;
  border: 2px solid #01b4ed;
  border-radius: 10px;
  padding: 22px 20px 18px;
  margin: 0 0 2em;
}
.col-conclusion__label {
  position: absolute;
  top: -13px;
  left: 16px;
  background: #01b4ed;
  color: #fff;
  font-size: 0.78em;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 5px;
}
.col-conclusion p { margin: 0; line-height: 1.9; }

/* ---- 8 目次（番号は 01/02 のゼロ埋め2桁。counter で生成） ---- */
.col-toc {
  background: #fafcfe;
  border: 1px solid #dce8f0;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 0 0 2.2em;
}
.col-toc__title {
  font-weight: 700;
  color: #2E4052;
  margin: 0 0 10px;
  font-size: 1.0em;
}
.col-toc__list {
  counter-reset: toc;
  list-style: none;
  margin: 0;
  padding: 0;
}
.col-toc__list > li {
  counter-increment: toc;
  margin: 6px 0;
}
.col-toc__list > li > a::before {
  content: counter(toc, decimal-leading-zero);
  color: #01b4ed;
  font-weight: 700;
  margin-right: 10px;
  font-feature-settings: "tnum";
}
.col-toc a { text-decoration: none; color: #2E4052; }
.col-toc a:hover { color: #01b4ed; text-decoration: underline; }
.col-toc__sub {
  list-style: none;
  margin: 4px 0 8px 34px;
  padding: 0;
}
.col-toc__sub > li { margin: 3px 0; }
.col-toc__sub > li > a::before { content: "└ "; color: #9bbdd0; }

/* ---- 10 FAQ（<details> 装飾） ---- */
.col-faq { margin: 2.4em 0 0; }
.col-faq__item {
  border: 1px solid #dce8f0;
  border-radius: 8px;
  margin: 10px 0;
  padding: 0 16px;
  background: #fff;
}
.col-faq__item > summary {
  cursor: pointer;
  font-weight: 700;
  color: #2E4052;
  padding: 14px 0;
  list-style: none;
  position: relative;
}
.col-faq__item > summary::before { content: "Q. "; color: #01b4ed; font-weight: 700; }
.col-faq__item > summary::after {
  content: "+";
  position: absolute; right: 2px; top: 12px;
  color: #01b4ed; font-size: 1.3em; line-height: 1;
}
.col-faq__item[open] > summary::after { content: "\2212"; }  /* − */
.col-faq__item > p {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #f5fafd;
  border-radius: 6px;
  line-height: 1.9;
}
.col-faq__item > p::before { content: "A. "; color: #f06292; font-weight: 700; }

/* ---- 11 著者ボックス（アバター丸・名前・肩書き・bio） ---- */
.col-author {
  margin: 2.6em 0 0;
  border: 1px solid #dce8f0;
  border-radius: 12px;
  padding: 20px 22px;
  background: #fafcfe;
}
.col-author__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.col-author__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.col-author__meta { display: flex; flex-direction: column; gap: 3px; }
.col-author__label {
  font-size: 0.72em;
  color: #01b4ed;
  font-weight: 700;
  letter-spacing: .04em;
}
.col-author__name { font-size: 1.15em; font-weight: 700; color: #2E4052; }
.col-author__role { font-size: 0.85em; color: #6b7280; }
.col-author__bio {
  margin: 14px 0 0;
  font-size: 0.92em;
  line-height: 1.85;
  color: #2E4052;
}
/* アバター無しでもレイアウトが成立 */
.col-author.no-avatar .col-author__head { gap: 0; }