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

/* ========================================
   AIツールラボ — CSS v4
   ────────────────────────────────────────
   設計原則:
   1. 色は3つだけ — 墨(テキスト)、灰(境界)、橙(CTA)
   2. 装飾でなく余白で区切る
   3. CTAは「次のステップ」提案であり広告ではない
   4. 視線: 結論 → 比較 → 行動
   ======================================== */

:root {
  /* テキスト */
  --ink: #1e293b;
  --ink-sub: #64748b;

  /* 境界・背景 */
  --line: #e2e8f0;
  --bg: #fff;
  --bg-sub: #f8fafc;

  /* アクション — CTA専用暖色 */
  --action: #c2410c;
  --action-hover: #9a3412;

  /* サブカラー — ボックス装飾用 */
  --merit-bg: #f0fdf4;
  --merit-border: #22c55e;
  --demerit-bg: #fef2f2;
  --demerit-border: #ef4444;
  --conclusion-bg: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
  --caution-bg: #fffbeb;

  /* フォント */
  --font: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;

  /* 間隔 */
  --space-s: 12px;
  --space-m: 24px;
  --space-l: 48px;
  --space-xl: 72px;
}

/* ========================================
   PR表記（ステマ規制対応）
   ======================================== */
.pr-label {
  display: inline-block;
  font-size: 12px;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: var(--space-m);
}

/* ========================================
   ベース
   ======================================== */
body,
.entry-content,
.article {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;
}

/* Cocoonカウンター無効化 */
body,
.entry-content {
  counter-reset: none !important;
}

/* ========================================
   記事タイトル — ページの主役
   ======================================== */
.entry-title,
.article-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: var(--space-m);
  letter-spacing: -0.01em;
}

/* ========================================
   段落・インライン
   ======================================== */
.entry-content p {
  margin-bottom: 1.5em;
  line-height: 1.9;
}

.entry-content a {
  color: var(--action);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.entry-content a:hover {
  border-bottom-color: var(--action);
}

.entry-content strong {
  font-weight: 700;
  color: var(--ink);
}

/* リスト */
.entry-content ul,
.entry-content ol {
  padding-left: 1.4em;
  margin-bottom: 1.5em;
}

.entry-content ul li,
.entry-content ol li {
  margin-bottom: 0.4em;
  line-height: 1.8;
}

/* ========================================
   見出し — 余白で区切る。装飾は最小限。
   ======================================== */
.article h2,
.entry-content h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  background: none;
  padding: 0 0 10px;
  margin: var(--space-xl) 0 var(--space-m);
  border: none;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  line-height: 1.5;
}

.article h2::before,
.article h2::after,
.entry-content h2::before,
.entry-content h2::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
  counter-increment: none !important;
}

.article h3,
.entry-content h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  padding: 0;
  margin: 40px 0 16px;
  border: none;
  background: none;
  line-height: 1.5;
}

.article h3::before,
.article h3::after,
.entry-content h3::before,
.entry-content h3::after {
  display: none !important;
  content: none !important;
}

.article h4,
.entry-content h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  padding: 0;
  margin: 28px 0 12px;
  border: none;
}

/* ========================================
   テーブル — 罫線を減らし、余白で読ませる
   ======================================== */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-m) 0;
  font-size: 14px;
}

.entry-content table thead th {
  background: var(--bg-sub);
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 12px;
  text-align: center;
  border-bottom: 2px solid var(--ink);
  border-top: none;
  border-left: none;
  border-right: none;
  letter-spacing: 0.03em;
}

.entry-content table td {
  padding: 12px;
  border: none;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}

.entry-content table tbody tr:last-child td {
  border-bottom: 2px solid var(--ink);
}

.entry-content table tbody tr:hover {
  background: var(--bg-sub);
}

/* 1列目 — 項目名 */
.entry-content table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
}

/* inline style上書き */
.entry-content table tr[style] {
  background: transparent !important;
}

/* テーブル内CTA — テキストリンクに */
.entry-content table .affiliate-box {
  margin: 0;
  padding: 0;
  background: none;
}

.entry-content table .affiliate-box .affiliate-cta {
  display: inline;
  max-width: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--action);
  background: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--action);
  white-space: nowrap;
  letter-spacing: 0;
}

.entry-content table .affiliate-box .affiliate-cta::after {
  content: " →";
  font-size: 12px;
}

.entry-content table .affiliate-box .affiliate-cta:hover {
  background: none;
  transform: none;
  box-shadow: none;
  opacity: 0.7;
}

/* テーブル最終列 */
.entry-content table td:last-child {
  white-space: nowrap;
}

/* ========================================
   装飾ボックス共通 — 枠を消し、左線+余白だけ
   ======================================== */
.point-box,
.merit-box,
.demerit-box,
.caution-box,
.summary-box {
  border-radius: 0;
  border: none;
  padding: 0;
  margin: var(--space-m) 0;
  overflow: visible;
}

/* タイトル共通 */
.point-box .box-title,
.merit-box .box-title,
.demerit-box .box-title,
.caution-box .box-title,
.summary-box .box-title {
  font-weight: 700;
  font-size: 14px;
  padding: 0 0 6px;
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ========================================
   ポイントBOX — 控えめな左線
   ======================================== */
.point-box {
  background: none;
  border-left: 3px solid var(--ink);
  padding-left: 20px;
}

.point-box .box-title {
  background: none;
  color: var(--ink);
}

.point-box > p:not(.box-title),
.point-box > ul {
  padding: 0;
  margin: 8px 0 0;
}

.point-box > ul {
  padding-left: 1.2em;
}

.point-box li {
  margin-bottom: 4px;
  font-size: 15px;
}

/* ========================================
   メリットBOX — 緑背景 + 左線
   ======================================== */
.merit-box {
  background: var(--merit-bg);
  border-left: 4px solid var(--merit-border);
  padding: 16px 20px;
  border-radius: 6px;
}

.merit-box .box-title {
  background: none;
  color: var(--merit-border);
  font-weight: 800;
}

.merit-box .box-title::before {
  content: "✅ ";
  font-size: 14px;
}

.merit-box > ul {
  padding: 0 0 0 1.2em;
  margin: 8px 0 0;
}

.merit-box li {
  margin-bottom: 4px;
  font-size: 15px;
}

/* ========================================
   デメリットBOX — 赤背景 + 左線
   ======================================== */
.demerit-box {
  background: var(--demerit-bg);
  border-left: 4px solid var(--demerit-border);
  padding: 16px 20px;
  border-radius: 6px;
}

.demerit-box .box-title {
  background: none;
  color: var(--demerit-border);
  font-weight: 800;
}

.demerit-box .box-title::before {
  content: "⚠️ ";
  font-size: 14px;
}

.demerit-box > ul {
  padding: 0 0 0 1.2em;
  margin: 8px 0 0;
}

.demerit-box li {
  margin-bottom: 4px;
  font-size: 15px;
}

/* ========================================
   注意BOX — 左線のみ
   ======================================== */
.caution-box {
  background: none;
  border-left: 3px solid var(--action);
  padding-left: 20px;
}

.caution-box .box-title {
  background: none;
  color: var(--action);
}

.caution-box .box-title::before {
  content: "※ ";
  font-weight: 400;
}

.caution-box > p:not(.box-title) {
  padding: 0;
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 15px;
}

/* ========================================
   まとめBOX — 上線のみ
   ======================================== */
.summary-box {
  background: none;
  border-top: 2px solid var(--ink);
  padding-top: 16px;
  margin-top: var(--space-l);
}

.summary-box .box-title {
  background: none;
  color: var(--ink);
  font-size: 15px;
  padding: 0 0 8px;
}

.summary-box > ul {
  padding: 0 0 0 1.2em;
  margin: 0;
}

.summary-box li {
  margin-bottom: 6px;
  line-height: 1.8;
  font-size: 15px;
}

/* ========================================
   CTAボタン — 大きく明確、ホバーアニメーション付き
   ======================================== */
.affiliate-box {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  margin: var(--space-l) auto;
  padding: 0;
  clear: both;
  float: none !important;
}

.affiliate-box .affiliate-cta {
  display: inline-block;
  max-width: 520px;
  width: auto;
  margin: 0 auto;
  background: var(--action);
  color: #fff !important;
  font-size: 16px;
  font-weight: 800;
  padding: 18px 48px;
  border: none;
  border-radius: 8px;
  text-decoration: none !important;
  text-align: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(194, 65, 12, 0.3);
  letter-spacing: 0.03em;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
}

.affiliate-box .affiliate-cta:hover {
  background: var(--action-hover);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(194, 65, 12, 0.4);
}

.affiliate-box .affiliate-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(194, 65, 12, 0.3);
}

/* CTA矢印（アニメーション） */
.affiliate-box .affiliate-cta::after {
  content: " →";
  font-size: 15px;
  font-weight: 400;
  display: inline-block;
  transition: transform 0.25s ease;
}

.affiliate-box .affiliate-cta:hover::after {
  transform: translateX(4px);
}

/* 連続CTA間隔 */
.affiliate-box + .affiliate-box {
  margin-top: 10px;
}

/* 装飾ボックス内のCTA */
.point-box .affiliate-box,
.merit-box .affiliate-box,
.demerit-box .affiliate-box,
.caution-box .affiliate-box,
.summary-box .affiliate-box,
.faq-item .affiliate-box,
.faq-answer .affiliate-box {
  display: block !important;
  width: 100% !important;
  margin: 16px auto;
}

/* ========================================
   結論ファーストBOX — 記事の最重要「答え」
   背景グラデーション + アイコンで目立たせる
   ======================================== */
.conclusion-box {
  background: var(--conclusion-bg);
  border: 1px solid #dbeafe;
  border-left: 5px solid #3b82f6;
  border-radius: 10px;
  padding: var(--space-m) var(--space-m);
  margin: var(--space-m) 0 var(--space-l);
  overflow: visible;
  position: relative;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.08);
}

.conclusion-box::before {
  display: none;
}

.conclusion-box .box-title {
  font-weight: 800;
  font-size: 14px;
  color: #2563eb;
  padding: 0;
  margin: 0 0 12px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.conclusion-box .box-title::before {
  content: "💡 ";
}

.conclusion-box > p:not(.box-title):not(.micro-copy) {
  padding: 0;
  margin: 0 0 16px;
  line-height: 1.9;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
}

.conclusion-box .affiliate-box {
  margin: 16px 0 0;
}

.conclusion-box .affiliate-box .affiliate-cta {
  padding: 14px 32px;
}

/* ========================================
   マイクロコピー — 静かなガイド
   ======================================== */
.micro-copy {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-sub) !important;
  margin: 0 0 6px !important;
  padding: 0;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* ========================================
   FAQ — 余白ベースのシンプル構造
   ======================================== */
.faq-item {
  display: block !important;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
  padding: var(--space-m) 0;
  overflow: visible;
}

.faq-item .faq-question,
.faq-item .faq-answer {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  display: block !important;
}

.faq-item .faq-question {
  font-weight: 700;
  font-size: 15px;
  padding: 0 0 0 32px;
  margin: 0 0 8px;
  background: none;
  border: none;
  position: relative;
  color: var(--ink);
  line-height: 1.6;
}

.faq-item .faq-question::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 0;
  background: none;
  color: var(--ink);
  width: auto;
  height: auto;
  border-radius: 0;
  display: inline;
  font-weight: 800;
  font-size: 16px;
}

.faq-item .faq-answer {
  padding: 0 0 0 32px;
  margin: 0;
  line-height: 1.9;
  color: var(--ink-sub);
  position: relative;
  font-size: 15px;
}

.faq-item .faq-answer::before {
  content: "A";
  position: absolute;
  left: 0;
  top: 0;
  background: none;
  color: var(--ink-sub);
  width: auto;
  height: auto;
  border-radius: 0;
  display: inline;
  font-weight: 800;
  font-size: 16px;
}

/* ========================================
   内部リンク
   ======================================== */
.internal-link {
  padding: 0;
  margin: var(--space-m) 0;
  background: none;
  border: none;
  font-size: 15px;
}

.internal-link a {
  color: var(--action);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--action);
}

.internal-link a:hover {
  opacity: 0.7;
}

/* ========================================
   目次（Cocoon TOC）
   ======================================== */
.toc {
  background: none;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-m);
  margin: var(--space-m) 0;
}

.toc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  margin-bottom: var(--space-s);
  letter-spacing: 0.05em;
}

/* ========================================
   Cocoonテーマ上書き
   ======================================== */
.main {
  background: var(--bg);
}

.sidebar {
  background: var(--bg);
}

/* サイドバー見出し */
.sidebar h3,
.widget_block h2,
.widget h2 {
  background: none !important;
  color: var(--ink) !important;
  padding: 0 0 6px !important;
  font-size: 13px;
  font-weight: 700;
  border-radius: 0;
  border: none !important;
  border-bottom: 1px solid var(--ink) !important;
  margin-bottom: var(--space-s);
  letter-spacing: 0.05em;
}

/* ヘッダー */
.header,
.header-container {
  background: var(--bg);
}

.site-name-text,
.header .site-name-text {
  letter-spacing: 0 !important;
  font-size: 18px;
  color: var(--ink);
  font-weight: 800;
}

/* ナビゲーション */
.navi {
  background: var(--ink);
}

.navi a {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.03em;
}

.navi a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* パンくず */
.breadcrumb {
  font-size: 12px;
  color: var(--ink-sub);
}

/* ========================================
   記事一覧
   ======================================== */
.entry-card-snippet .eye-catch-wrap + .card-meta,
.entry-card .card-post-count {
  display: none;
}

.cat-label {
  background: var(--ink) !important;
  color: #fff !important;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 0;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ========================================
   Cocoonキーカラー完全上書き
   — テーマ設定の赤/コーラルを中立色に
   ======================================== */

/* サイドバー見出し（Cocoonウィジェット全般） */
.sidebar .widget-title,
.sidebar .wp-block-heading,
.sidebar h2,
.sidebar h3,
#sidebar .widget-title,
#sidebar h2,
#sidebar h3,
aside h2,
aside h3,
.widget_recent_entries h2,
.widget_categories h2,
.widget_archive h2,
.widget_recent_comments h2,
.widget_block h2 {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: none !important;
  border-bottom: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: 0 0 6px !important;
  margin-bottom: var(--space-s) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
}

/* Cocoonのキーカラーが適用される要素を全て上書き */
.header .header-container-in,
.header-container,
.appeal,
.navi-in > ul > .menu-item-has-children > a::after {
  color: var(--ink);
}

/* ヘッダー上部の赤いライン */
.header-top,
.header .header-container {
  border-top: none !important;
  border-bottom: none !important;
}

/* SNSシェアボタンの配色はそのまま */

/* Cocoon テーマカラー帯 */
.header-container,
.go-to-top-button,
.pagination .current,
.page-numbers.current {
  background-color: var(--ink) !important;
  color: #fff !important;
}

/* ページネーション */
.pagination a:hover {
  background: var(--bg-sub) !important;
  color: var(--ink) !important;
}

/* ========================================
   レスポンシブ
   ======================================== */
@media screen and (max-width: 1023px) {
  .entry-content table {
    font-size: 13px;
  }

  .entry-content table th,
  .entry-content table td {
    padding: 10px 8px;
  }
}

/* 比較表 モバイル横スクロール */
@media screen and (max-width: 767px) {
  .entry-content .scrollable-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--space-m) -16px;
    padding: 0 16px;
  }

  .entry-content table {
    min-width: 560px;
  }

  .entry-content .scrollable-table::after {
    content: "← スクロールできます →";
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--ink-sub);
    padding: 6px 0 0;
  }
}

@media screen and (max-width: 834px) {
  .article h2,
  .entry-content h2 {
    font-size: 19px;
  }

  .entry-title {
    font-size: 23px;
  }
}

@media screen and (max-width: 480px) {
  body,
  .entry-content,
  .article {
    font-size: 15px;
  }

  .article h2,
  .entry-content h2 {
    font-size: 18px;
    margin: 48px 0 20px;
  }

  .article h3,
  .entry-content h3 {
    font-size: 16px;
  }

  .entry-title {
    font-size: 21px;
  }

  .affiliate-box .affiliate-cta {
    display: block;
    max-width: 100%;
    padding: 14px 20px;
    font-size: 14px;
  }

  .entry-content table {
    font-size: 12px;
  }

  .entry-content table th,
  .entry-content table td {
    padding: 8px 6px;
  }

  .faq-item .faq-question,
  .faq-item .faq-answer {
    padding-left: 28px;
    font-size: 14px;
  }

  .point-box,
  .merit-box,
  .demerit-box,
  .caution-box {
    padding-left: 14px;
  }

  .conclusion-box {
    padding: 20px 0;
  }
}

/* ========================================
   フロントページ — 不要要素を非表示
   ======================================== */
.home.page .entry-title,
.home.page .date-tags,
.home.page .toc,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .breadcrumb,
.home.page .post-date,
.home.page .post-update,
.home.page .author-info {
  display: none !important;
}

/* ホームページのカテゴリカード ホバー */
.home.page .entry-content a[href*="/category/"] {
  transition: all 0.2s ease;
}

.home.page .entry-content a[href*="/category/"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1 !important;
}

/* サイドバー — 不要ウィジェット非表示 */
.home.page .widget_recent_comments,
.home.page .widget_archive,
.home.page .widget_categories {
  display: none !important;
}

/* 記事ページ — 著者リンクをサイト名に統一 */
.author-info .author-name a {
  font-size: 0;
}
.author-info .author-name a::after {
  content: "AIツールラボ編集部";
  font-size: 14px;
}

/* セクション画像スタイル */
.section-image {
  width: 100%;
  max-width: 720px;
  margin: 16px auto 24px;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}