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

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

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

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

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

/* ===== jisalab 全ジャンル共通フッター（[jisalab_global_footer]） ===== */
.jisalab-global-footer{
  text-align:center;
  line-height:1.9;
  font-size:14px;
  padding:8px 0;
}
.jisalab-global-footer nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  justify-content:center;
  align-items:center;
  margin:6px 0;
}
.jisalab-global-footer .jgf-label{
  font-weight:700;
  opacity:.7;
  font-size:12px;
}
.jisalab-global-footer .jgf-genres a{
  font-weight:700;
}
.jisalab-global-footer a{
  text-decoration:none;
}
.jisalab-global-footer a:hover{
  text-decoration:underline;
}
.jisalab-global-footer .jgf-operator{
  font-size:12px;
  opacity:.75;
  margin:8px 0 0;
}

/* ===== jisalab ヘッダーロゴ（インラインSVG／currentColor） ===== */
.jisalab-logo-link{ display:inline-flex; align-items:center; text-decoration:none; }
.jisalab-logo{ display:inline-flex; line-height:0; color:inherit; }
.jisalab-logo svg{ height:32px; width:auto; display:block; }
/* ジャンル文字色は inline style の --jisalab-genre-color で決まる（SVG側で参照） */
@media screen and (max-width:768px){
  .jisalab-logo svg{ height:28px; }
}
@media screen and (max-width:480px){
  .jisalab-logo svg{ height:24px; max-width:72vw; }
}

/* ===== jisalab 記事フォーマット（Part2【D】の独自パーツ） ===== */
/* パーツ2: PR表記の冒頭バナー */
.pr-banner{
  margin:0 0 1.2em;
  padding:8px 14px;
  font-size:13px;
  line-height:1.6;
  background:#f3f4f6;
  border-left:4px solid #9ca3af;
  border-radius:4px;
  color:#4b5563;
}
.pr-banner strong{
  display:inline-block;
  margin-right:6px;
  padding:1px 6px;
  font-size:11px;
  background:#6b7280;
  color:#fff;
  border-radius:3px;
  letter-spacing:.05em;
}
/* パーツ3: 円換算料金表（横スクロール＋キャプション） */
.price-table{
  margin:1em 0;
  overflow-x:auto;
}
.price-table table{ width:100%; }
.price-table caption{
  caption-side:top;
  text-align:left;
  font-size:12px;
  color:#6b7280;
  padding:0 0 6px;
}
/* パーツ4: 検証スクリーンショット枠 */
.verify-shot{
  margin:1.2em 0;
  padding:8px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fafafa;
}
.verify-shot img{
  display:block;
  width:100%;
  height:auto;
  border-radius:4px;
}
.verify-shot figcaption{
  margin-top:8px;
  font-size:12px;
  color:#6b7280;
  line-height:1.6;
}
/* 補足小テキスト（換算日・免責など） */
.micro-note{
  font-size:12px;
  color:#6b7280;
  line-height:1.6;
}
/* パーツ7: あわせて読みたい（文脈付き1〜2本・interlink追記対象） */
.also-read{ margin:.4em 0 0; padding:10px 14px; background:#f6f7f9; border-radius:8px; }
.also-read p{ margin:.3em 0; font-size:14px; line-height:1.7; }
.dark-mode .also-read{ background:#20242b; }

/* ダークスキン対応（Cocoonの暗背景時） */
.dark-mode .pr-banner{ background:#2b2f36; border-left-color:#6b7280; color:#c9ced6; }
.dark-mode .verify-shot{ background:#20242b; border-color:#333a44; }
.dark-mode .pr-banner strong{ background:#8a919c; }

/* ============================================================
** jisalab 記事の読みやすさ基準（全記事共通・2026-07-31）
** 本文の段落・見出し・リスト・表に余白リズムと視認性を与え、
** 「テキストが流し込まれただけ」の状態を防ぐ。
** .entry-content = Cocoonの本文ラッパ。アクセントはジャンル色
** （--jisalab-genre-color、無ければAI青 #2563eb）にフォールバック。
** ============================================================ */
.entry-content{
  font-size:16px;
  line-height:1.95;
  color:#2b2f36;
  overflow-wrap:break-word;
}
/* 段落: 行間と段落間マージンで“文の塊”を作る */
.entry-content p{ margin:0 0 1.5em; }
/* リード文（導入の最初の段落）は少し大きく */
.entry-content > p:first-of-type{ font-size:17px; }

/* 見出しH2: 上に大きな余白＋下線＋ジャンル色のアクセントバー */
.entry-content h2{
  font-size:1.5em;
  font-weight:700;
  line-height:1.5;
  margin:2.4em 0 .9em;
  padding:0 0 .45em .7em;
  border-bottom:2px solid #e6e8eb;
  position:relative;
}
.entry-content h2::before{
  content:"";
  position:absolute;
  left:0; top:.15em; bottom:.5em;
  width:5px; border-radius:3px;
  background:var(--jisalab-genre-color,#2563eb);
}
/* 見出しH3: 左のアクセントバー */
.entry-content h3{
  font-size:1.18em;
  font-weight:700;
  line-height:1.55;
  margin:1.9em 0 .6em;
  padding-left:.6em;
  border-left:4px solid var(--jisalab-genre-color,#2563eb);
}

/* リスト: インデント・行間・項目間の余白、マーカー色 */
.entry-content ul,
.entry-content ol{ margin:1.2em 0; padding-left:1.5em; }
.entry-content li{ margin:0 0 .55em; line-height:1.85; }
.entry-content ul > li::marker{ color:var(--jisalab-genre-color,#2563eb); }
.entry-content ol > li::marker{ color:var(--jisalab-genre-color,#2563eb); font-weight:700; }
.entry-content li > ul,
.entry-content li > ol{ margin:.5em 0; }

/* 強調・リンクの視認性 */
.entry-content a{ text-decoration:underline; text-underline-offset:2px; }

/* 表: 罫線・ヘッダ背景・余白で“読める表”に（price-table内の表にも適用） */
.entry-content table{
  border-collapse:collapse;
  width:100%;
  margin:1em 0;
  font-size:15px;
  line-height:1.7;
}
.entry-content th,
.entry-content td{
  border:1px solid #e5e7eb;
  padding:8px 12px;
  text-align:left;
  vertical-align:top;
}
.entry-content thead th{ background:#f3f4f6; font-weight:700; }

/* 図・枠まわりの縦リズム */
.entry-content figure{ margin:1.4em 0; }
.entry-content .blank-box{ margin:1.4em 0; }

/* モバイル */
@media screen and (max-width:480px){
  .entry-content{ font-size:15.5px; line-height:1.9; }
  .entry-content h2{ font-size:1.3em; margin:2em 0 .7em; }
  .entry-content h3{ font-size:1.1em; }
  .entry-content table{ font-size:14px; }
  .entry-content th, .entry-content td{ padding:6px 9px; }
}

/* ダークスキン */
.dark-mode .entry-content{ color:#d4d9e0; }
.dark-mode .entry-content h2{ border-bottom-color:#333a44; }
.dark-mode .entry-content th,
.dark-mode .entry-content td{ border-color:#333a44; }
.dark-mode .entry-content thead th{ background:#20242b; }