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

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/************************************
** AI活用ラボ カスタムデザイン v2
************************************/
:root {
  --lab-navy: #042c53;
  --lab-blue: #1766c2;
  --lab-cyan: #2f9be4;
  --lab-sky: #e8f1fb;
  --lab-ink: #1c2733;
  --lab-line: #e3e9f0;
  --lab-radius: 16px;
  --lab-shadow: 0 2px 8px rgba(10,42,74,.06);
  --lab-shadow-hover: 0 16px 32px rgba(10,42,74,.16);
}
body { background: #f4f7fb; color: var(--lab-ink); font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif; letter-spacing: .02em; }
::selection { background: var(--lab-blue); color: #fff; }
.header-container { background: #fff; border-bottom: 1px solid var(--lab-line); }
.site-name-text { font-weight: 900; color: var(--lab-navy); letter-spacing: .06em; }
.tagline { color: #6b7c8f; font-size: 12px; letter-spacing: .14em; }
.appeal {
  border: none; position: relative; overflow: hidden;
  background:
    radial-gradient(600px 300px at 85% 15%, rgba(47,155,228,.4), transparent 60%),
    radial-gradient(520px 280px at 8% 90%, rgba(23,102,194,.55), transparent 62%),
    linear-gradient(135deg, #031f3c 0%, #042c53 45%, #0a4a8a 100%);
}
.appeal::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.appeal::after {
  content: "AI TOOLS LAB"; position: absolute; right: -12px; bottom: -26px;
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: 110px;
  letter-spacing: .05em; color: rgba(255,255,255,.05);
  pointer-events: none; white-space: nowrap;
}
.appeal-content { background: transparent; box-shadow: none; position: relative; z-index: 1; }
.appeal-title { color: #f2f8ff; font-size: clamp(24px, 4.2vw, 38px); font-weight: 900; line-height: 1.5; }
.appeal-title::before {
  content: "HANDS-ON AI REVIEWS"; display: block;
  font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .38em; color: #7fc0f0; margin-bottom: 14px;
}
.appeal-message { color: #b9d4f2; font-size: 15px; line-height: 2; }
.appeal-button {
  background: linear-gradient(90deg, #2f8de4, #31b3e0);
  border: none; border-radius: 999px; padding: 1em 2.6em; font-weight: 700;
  box-shadow: 0 10px 24px rgba(6,60,110,.45);
  transition: transform .25s, box-shadow .25s;
}
.appeal-button:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 34px rgba(6,60,110,.55); }
.ect-vertical-card .a-wrap {
  background: #fff; border: 1px solid var(--lab-line); border-radius: var(--lab-radius);
  overflow: hidden; box-shadow: var(--lab-shadow);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
}
.ect-vertical-card .a-wrap:hover { transform: translateY(-6px); box-shadow: var(--lab-shadow-hover); border-color: #bcd7f2; background: #fff; }
.entry-card-thumb { position: relative; }
.entry-card-thumb:has(.no-image) { background: linear-gradient(135deg, #0a4a8a, #2f9be4); }
.entry-card-thumb img.no-image { opacity: 0; }
.entry-card-thumb:has(.no-image)::before {
  content: "AI LAB"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: 32px;
  letter-spacing: .2em; color: rgba(255,255,255,.9);
  text-shadow: 0 2px 14px rgba(0,20,40,.35);
}
[class*="category-review"] .entry-card-thumb:has(.no-image) { background: linear-gradient(135deg, #042c53, #1766c2); }
[class*="category-review"] .entry-card-thumb:has(.no-image)::before { content: "A vs B"; }
[class*="category-guide"] .entry-card-thumb:has(.no-image) { background: linear-gradient(135deg, #0f6e56, #1d9e75); }
[class*="category-guide"] .entry-card-thumb:has(.no-image)::before { content: "GUIDE"; }
[class*="category-work-hack"] .entry-card-thumb:has(.no-image) { background: linear-gradient(135deg, #712b13, #d85a30); }
[class*="category-work-hack"] .entry-card-thumb:has(.no-image)::before { content: "HACK"; }
[class*="category-ai-news"] .entry-card-thumb:has(.no-image) { background: linear-gradient(135deg, #3c3489, #7f77dd); }
[class*="category-ai-news"] .entry-card-thumb:has(.no-image)::before { content: "NEWS"; }
.cat-label {
  position: absolute; top: 10px; left: 10px; bottom: auto;
  background: rgba(255,255,255,.94); color: var(--lab-navy);
  border: none; border-radius: 999px; font-size: 11px; font-weight: 700;
  padding: 3px 12px; box-shadow: 0 2px 6px rgba(0,20,40,.18);
}
.entry-card-content { padding: 1.1em 1.3em 1.2em; }
.entry-card-title { font-weight: 700; line-height: 1.6; }
.entry-card-snippet { color: #5f7183; font-size: 12.5px; line-height: 1.9; }
.entry-card-meta, .post-date { color: #8fa1b3; }
.article { line-height: 2; }
.article h2 {
  background: linear-gradient(90deg, var(--lab-sky), rgba(232,241,251,.2));
  color: var(--lab-navy); border-left: 6px solid var(--lab-blue);
  border-radius: 0 10px 10px 0; padding: .75em 1em; font-weight: 700;
}
.article h3 { border-left: 4px solid var(--lab-cyan); border-bottom: 2px solid var(--lab-sky); padding: .45em .8em; }
.article a { color: var(--lab-blue); }
.article ul li::marker, .article ol li::marker { color: var(--lab-blue); font-weight: 700; }
.article blockquote {
  background: #f8fafd; border: 1.5px dashed #9dc3e8; border-radius: 12px;
  padding: 1.7em 1.4em 1.2em; position: relative; margin: 2em 0; color: #243447;
}
.article blockquote::before {
  content: "PROMPT / 例文"; position: absolute; top: -12px; left: 16px;
  background: var(--lab-blue); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; border-radius: 999px; padding: 2px 14px;
}
.lab-conclusion {
  background: linear-gradient(135deg, #eaf3fd, #f7fbff);
  border: 1px solid #bcd7f2; border-left: 6px solid var(--lab-blue);
  border-radius: 12px; padding: 1.3em 1.5em; margin: 1.8em 0;
  box-shadow: var(--lab-shadow);
}
.lab-conclusion .lab-label {
  display: inline-block; background: linear-gradient(90deg, var(--lab-blue), var(--lab-cyan));
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  border-radius: 999px; padding: 3px 16px; margin-bottom: .7em;
}
.lab-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.8em 0; }
.lab-vs > div { border: 1px solid var(--lab-line); border-radius: 12px; padding: 1.1em 1.3em; background: #fff; box-shadow: var(--lab-shadow); }
.lab-vs .side-a { border-top: 4px solid var(--lab-blue); }
.lab-vs .side-b { border-top: 4px solid #d85a30; }
.lab-badge { display: inline-block; background: var(--lab-navy); color: #fff; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 2px 10px; margin-right: 8px; vertical-align: middle; }
.toc { background: #fff; border: 1px solid var(--lab-line); border-radius: 12px; box-shadow: var(--lab-shadow); }
.toc-title { color: var(--lab-navy); font-weight: 700; }
.sidebar h3 { background: var(--lab-navy); color: #fff; border-radius: 10px; padding: .65em 1em; border: none; letter-spacing: .06em; }
.footer { background: linear-gradient(135deg, #031f3c, #0a4a8a); }
.footer, .footer a, .copyright { color: #b9d4f2; }
.go-to-top-button { background: var(--lab-blue); border-radius: 50%; }
@media (max-width: 640px) {
  .lab-vs { grid-template-columns: 1fr; }
  .appeal::after { font-size: 56px; bottom: -12px; }
}