@charset "UTF-8";
/*
  Skin Name: Aintelligence Clean
  Description: プレミアム信頼スキン(C案「モダン・グラス」)。深ネイビーグラデ+白カード+多層柔影。アフィリエイトブログ向け。
  Skin URI: https://example.com/
  Author: Aintelligence
  Author URI: https://example.com/
  Screenshot URI: http://localhost:8890/wp-content/themes/aintelligence-cocoon-child/skins/aintelligence-clean/screenshot.jpg
  Version: 2.0.0
  Priority: 1000
*/
/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --ai-primary: #12294d;
  --ai-accent: #2e5077;
  --ai-cta: #ff5722;
  --ai-cta-grad: linear-gradient(135deg, #ff7a45, #ff5722);
  --ai-bg: #f4f7fb;
  --ai-ink: #16233b;
  --ai-card-shadow: 0 2px 10px rgba(18, 41, 77, .06);
  --ai-card-shadow-lg: 0 8px 24px rgba(18, 41, 77, .18);
  --ai-radius: 12px;
  --ai-border: #e6ebf2;
}

/* ============================================================
   Base / background
   ============================================================ */
.wrap,
body {
  background-color: var(--ai-bg);
}
.content-in,
#main,
.main {
  background-color: transparent;
}
a {
  transition: color .15s ease, opacity .15s ease;
}
a:hover {
  color: var(--ai-accent);
}

/* ============================================================
   Header (desktop)
   ============================================================ */
#header,
.header {
  background-color: #fff;
  border-bottom: 1px solid var(--ai-border);
  box-shadow: none;
}
.header-in {
  padding-top: 14px;
  padding-bottom: 14px;
}
.site-name-text,
.logo-text {
  color: var(--ai-primary);
  font-weight: 700;
  letter-spacing: .01em;
}
.navi {
  background-color: #fff;
  border: none;
}
.navi ul {
  background-color: #fff;
}
.navi .menu-header a {
  color: var(--ai-primary);
  font-weight: 600;
}
.navi .menu-header a:hover {
  background-color: var(--ai-bg);
  color: var(--ai-accent);
}

/* ============================================================
   Header / global nav (mobile)
   ============================================================ */
@media screen and (max-width: 1023px) {
  #navi-menu-content,
  .navi-menu-content,
  #slide-in-sidebar,
  .menu-drawer {
    background-color: #fff;
    color: var(--ai-primary);
  }
  .menu-drawer li a {
    color: var(--ai-primary);
    border-bottom: 1px solid var(--ai-border);
  }
  .mobile-menu-buttons .menu-button {
    color: var(--ai-primary);
  }
}

/* ============================================================
   Index entry cards
   ============================================================ */
.entry-card-wrap,
.related-entry-card-wrap {
  background-color: #fff;
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius);
  box-shadow: var(--ai-card-shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  transform: translateY(-3px);
  box-shadow: var(--ai-card-shadow-lg);
}
.entry-card-title,
.related-entry-card-title {
  color: var(--ai-primary);
  font-weight: 700;
  line-height: 1.45;
}
.entry-card-snippet {
  color: #555;
}
.entry-card-thumb img,
.related-entry-card-thumb img {
  border-radius: 0;
}
.entry-card-categorys .cat-label,
.entry-card-categorys a {
  background-color: var(--ai-primary);
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
}

/* 新着記事セクション見出し(Cocoon標準のインデックスリスト見出し) */
.list-title,
.category-title,
.archive-title {
  border-left: 4px solid var(--ai-cta);
  padding-left: 12px;
  font-weight: 700;
  color: var(--ai-primary);
}

/* ============================================================
   Front-page hero band
   ============================================================ */
.ai-hero {
  background: linear-gradient(120deg, var(--ai-primary) 30%, var(--ai-accent));
  color: #fff;
  padding: 48px 20px;
  margin: 0 0 32px;
}
.ai-hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.ai-hero-copy {
  flex: 1 1 320px;
}
.ai-hero-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 12px;
  color: #fff;
}
.ai-hero-sub {
  font-size: 15px;
  opacity: .9;
  margin: 0;
  color: #fff;
}
/* 縮退: pickup 0件時はキャッチフレーズのみ中央表示 */
.ai-hero--center .ai-hero-inner {
  justify-content: center;
  text-align: center;
}
.ai-hero-cards {
  flex: 1 1 340px;
  display: flex;
  gap: 16px;
}
.ai-hero-card {
  flex: 1 1 0;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--ai-radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.ai-hero-card:hover {
  background: rgba(255, 255, 255, .20);
  transform: translateY(-3px);
}
.ai-hero-card-thumb img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}
.ai-hero-card-title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .ai-hero {
    padding: 32px 16px;
  }
  .ai-hero-title {
    font-size: 22px;
  }
  .ai-hero-cards {
    flex-direction: column;
  }
}

/* ============================================================
   Single article
   ============================================================ */
/* カテゴリバッジ(タイトル上のカテゴリ表示) */
.entry-categories .cat-link,
.entry-categories a {
  display: inline-block;
  background-color: var(--ai-primary);
  color: #fff;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

/* 日付メタ(投稿日+更新日) */
.date-tags .post-date,
.date-tags .post-update {
  color: #888;
  font-size: 13px;
}

/* 更新日/検証バッジ行(子テーマPHPが the_content 先頭に注入) */
.ai-meta-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 1.2em;
}
.ai-meta-badges .ai-badge {
  display: inline-block;
  border-radius: 4px;
  padding: 3px 9px;
  font-size: .78rem;
  font-weight: 700;
}
.ai-meta-badges .ai-badge-updated {
  background: #e8f0fe;
  color: var(--ai-primary);
}
.ai-meta-badges .ai-badge-verified {
  background: #eef8f0;
  color: #256b3e;
}

/* 目次 */
.toc {
  background-color: #fff;
  border: none;
  border-radius: var(--ai-radius);
  box-shadow: var(--ai-card-shadow);
  padding: 16px 20px;
}
.toc-title {
  color: var(--ai-primary);
  font-weight: 700;
}
.toc-title::before {
  content: "📑 ";
}
.toc-list a {
  color: var(--ai-accent);
}

/* 装飾見出し */
.article h2 {
  background: none;
  color: var(--ai-ink);
  border: none;
  border-left: 4px solid var(--ai-cta);
  border-radius: 0;
  padding: 4px 0 8px 14px;
  font-weight: 800;
  position: relative;
}
.article h2::after {
  content: "";
  display: block;
  margin-top: 6px;
  height: 1px;
  background: linear-gradient(90deg, var(--ai-border), transparent);
}
.article h3 {
  border-left: 4px solid var(--ai-accent);
  border-bottom: none;
  padding: 4px 0 4px 12px;
  color: var(--ai-primary);
  font-weight: 700;
}
.article h4 {
  border-bottom: 2px solid var(--ai-accent);
  padding-bottom: 4px;
  color: var(--ai-primary);
  font-weight: 700;
}

/* blockquote(口コミカード風) */
.article blockquote {
  background-color: #fff;
  border: none;
  border-radius: var(--ai-radius);
  box-shadow: var(--ai-card-shadow);
  padding: 14px 18px;
  color: #445;
}

/* 著者ボックス(Cocoon標準) */
.author-box {
  background-color: #fff;
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius);
  box-shadow: var(--ai-card-shadow);
  padding: 20px;
}
.author-box .author-thumb img,
.author-thumb img {
  border-radius: 50%;
}
.author-box .author-name {
  color: var(--ai-primary);
  font-weight: 700;
}
.author-box .author-description {
  color: #555;
}

/* 執筆・検証ボックス(新規, 子テーマPHPが the_content 末尾に注入) */
.ai-author-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 2em 0;
  background: #fff;
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius);
  padding: 18px 20px;
  box-shadow: var(--ai-card-shadow);
}
.ai-author-box-head {
  display: flex;
  gap: 12px;
  align-items: center;
}
.ai-author-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ai-accent), var(--ai-primary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.ai-author-label {
  font-size: .72rem;
  letter-spacing: .05em;
  color: #98a2b3;
}
.ai-author-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ai-ink);
}
.ai-author-name .ai-author-role {
  font-weight: 400;
  color: #8a94a6;
  font-size: .78rem;
}
.ai-author-desc {
  font-size: .88rem;
  color: #556;
  line-height: 1.8;
}
.ai-author-links {
  font-size: .85rem;
  color: var(--ai-primary);
}
.ai-author-links a {
  color: var(--ai-primary);
  text-decoration: none;
  margin-right: 12px;
}
.ai-author-links a:hover {
  color: var(--ai-accent);
  text-decoration: underline;
}

/* Cocoon標準著者ボックスのプレミアム化
   (Simple Author Boxプラグイン廃止 → Cocoon内蔵 .author-box に統一。
   .ai-author-box と同テイスト: 白カード/角丸12px/薄影/ネイビー・オレンジ) */
.author-box.author-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 2em 0;
  background: #fff;
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius);
  padding: 20px 22px;
  box-shadow: var(--ai-card-shadow);
}
.author-box .author-widget-name {
  font-size: .72rem;
  letter-spacing: .05em;
  color: #98a2b3;
}
.author-box .author-thumb {
  float: none;
  margin: 0 0 8px;
}
.author-box .author-thumb img {
  border-radius: 50%;
  border: 2px solid var(--ai-cta);
  padding: 0;
}
.author-box .author-content {
  margin-left: 0;
}
.author-box .author-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ai-ink);
}
.author-box .author-name a {
  color: var(--ai-ink);
  text-decoration: none;
}
.author-box .author-name a:hover {
  color: var(--ai-cta);
}
.author-box .author-description {
  font-size: .92em;
  color: #556;
  line-height: 1.8;
}
.author-box .profile-follows.author-follows .sns-button {
  background-color: #f3f5f8;
  border-radius: 50%;
  color: var(--ai-primary);
  transition: background-color .2s ease, color .2s ease;
}
.author-box .profile-follows.author-follows .sns-button:hover {
  background-color: var(--ai-primary);
  color: #fff;
}

@media screen and (max-width: 600px) {
  .author-box.author-box {
    padding: 16px 16px;
  }
  .author-box .author-thumb {
    text-align: center;
  }
}

/* 関連記事(カード) — .related-entry-card-wrap は Task 2 の共通指定で
   カード化済み。ここではタイトル色のみ補強 */
.related-entry-card-title {
  color: var(--ai-primary);
}

/* サイドバー ウィジェット */
.sidebar .widget {
  background-color: #fff;
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius);
  box-shadow: var(--ai-card-shadow);
  padding: 16px;
  margin-bottom: 20px;
}
.sidebar .widget-title,
.sidebar .widget-sidebar-title {
  color: var(--ai-primary);
  font-weight: 700;
  border-left: 4px solid var(--ai-primary);
  padding-left: 10px;
}
/* 追従CTA(スクロール追従エリアのカスタムHTML)をCTA色で強調 */
.sidebar-scroll .widget {
  border: 2px solid var(--ai-cta);
}

/* ============================================================
   Footer
   ============================================================ */
#footer,
.footer {
  background-color: var(--ai-primary);
  color: #9fb0c8;
}
.footer a,
#footer a {
  color: #9fb0c8;
}
.footer a:hover,
#footer a:hover {
  color: #fff;
}
.ai-footer-disclosure {
  color: #5f758f;
  font-size: .78rem;
}

/* ============================================================
   In-content CTA box / button (pipeline生成HTML。子テーマから移設)
   ============================================================ */
.entry-content .cta-box {
  background: #fff;
  border: none;
  border-radius: var(--ai-radius);
  padding: 1.75rem 1.5rem;
  margin: 2.5rem 0;
  text-align: center;
  box-shadow: var(--ai-card-shadow);
}
.entry-content .cta-box h3 {
  margin: 0 0 1rem;
  border: none;
  padding: 0;
  background: none;
  color: inherit;
  font-size: 1.15rem;
}
.entry-content .cta-button {
  display: inline-block;
  background: var(--ai-cta-grad);
  color: #ffffff !important;
  font-weight: bold;
  padding: 0.95rem 2.5rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 87, 34, .35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.entry-content .cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 87, 34, .45);
  color: #ffffff !important;
}

/* ============================================================
   Comparison table (pipeline生成の素の<table>。子テーマから移設)
   ============================================================ */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.95rem;
  border-radius: var(--ai-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--ai-card-shadow);
}
.entry-content table th,
.entry-content table td {
  border: 1px solid var(--ai-border);
  padding: 0.7rem 0.9rem;
  text-align: left;
}
.entry-content table th {
  background-color: var(--ai-primary);
  color: #ffffff;
  font-weight: bold;
  border-color: var(--ai-primary);
}
.entry-content table tr:nth-child(even) td {
  background-color: #f7f9fc;
}
/* 本命行ハイライト(rich_cta.add_table_ctaが付与) */
.entry-content table tr.rank-hl td {
  background-color: #fff8f0;
  font-weight: 700;
}
.entry-content table tr.rank-hl td:first-child {
  border-left: 3px solid var(--ai-cta);
}

/* ============================================================
   Responsive
   ============================================================ */
@media screen and (max-width: 1023px) {
  .entry-content .cta-box {
    padding: 1.4rem 1rem;
  }
}
@media screen and (max-width: 600px) {
  .entry-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}
@media screen and (max-width: 480px) {
  .entry-content .cta-button {
    display: block;
    width: 100%;
  }
}

/* ===== 収益化リッチ要素 (プレミアム信頼スキン C案) ===== */

/* リッチCTA強化 */
.cta-box {
  border: none;
  background: #fff;
  text-align: center;
}
.cta-box .cta-button::after,
.rank-card .cta-button::after {
  content: " ▶";
  font-size: .8em;
}
.cta-box .cta-button:hover,
.rank-card .cta-button:hover,
.sticky-cta .cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 87, 34, .35);
}
.cta-box .cta-button {
  animation: ai-cta-pulse 2.5s ease-in-out infinite;
}
.cta-micro {
  margin: 6px 0 0;
  font-size: .78rem;
  color: #8a94a6;
}

/* ランキングカード = 結論カード(ヒーロー) */
.rank-card {
  position: relative;
  margin: 1.5em 0;
  padding: 18px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(120deg, var(--ai-primary), var(--ai-accent));
  box-shadow: var(--ai-card-shadow-lg);
  color: #fff;
  text-align: center;
}
.rank-badge {
  position: absolute;
  top: -14px;
  left: 16px;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--ai-cta-grad);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  box-shadow: 0 4px 12px rgba(255, 87, 34, .35);
}
.rank-name {
  margin: 10px 0 4px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.rank-features {
  margin: 8px auto 14px;
  padding: 0;
  list-style: none;
  display: inline-block;
  text-align: left;
  color: rgba(255, 255, 255, .92);
}
.rank-features li::before {
  content: "✓ ";
  color: #ffb28a;
  font-weight: 700;
}
.rank-card .cta-button {
  display: inline-block;
  background: var(--ai-cta-grad);
  color: #fff !important;
  font-weight: 700;
  padding: 0.85rem 2.2rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(255, 87, 34, .35);
}
.rank-card .cta-micro {
  color: rgba(255, 255, 255, .75);
}
/* 内側の白カード(モック①: ボタン+cta-microを白ボックスで囲う) */
.rank-card .cta-button,
.rank-card .cta-micro {
  position: relative;
  z-index: 1;
}

/* メリデメ2カラム */
.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 1.5em 0;
}
.pros-cons .pros,
.pros-cons .cons {
  border-radius: var(--ai-radius);
  padding: 14px 16px;
  box-shadow: var(--ai-card-shadow);
}
.pros-cons .pros { background: #f2faf4; }
.pros-cons .cons { background: #f6f7f8; }
.pros-cons h4 { margin: 0 0 8px; font-size: 1rem; }
.pros-cons .pros h4 { color: #2f8a4c; }
.pros-cons .cons h4 { color: #667; }
@media (max-width: 760px) {
  .pros-cons { grid-template-columns: 1fr; }
}

/* 表内CTAボタン */
.table-cta {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--ai-cta-grad);
  color: #fff !important;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.table-cta:hover { opacity: .85; }

/* スマホ追従フッターCTA(JSゼロ、checkbox hackで閉じる) */
.sticky-cta { display: none; }
.sticky-cta-check { display: none; }
@media (max-width: 768px) {
  .sticky-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding: 10px 44px 10px 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -2px 10px rgba(18, 41, 77, .12);
  }
  .sticky-cta .cta-button {
    display: block;
    width: 100%;
    max-width: 480px;
    text-align: center;
    margin: 0;
    background: var(--ai-cta-grad);
  }
  .sticky-cta-x {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    background: #eee;
    color: #666;
    cursor: pointer;
  }
  .sticky-cta:has(.sticky-cta-check:checked) { display: none; }
  body:has(.sticky-cta) .article { padding-bottom: 70px; }
}

@keyframes ai-cta-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(255, 87, 34, .35); }
  50% { box-shadow: 0 4px 20px rgba(255, 87, 34, .55); }
}