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

/* ============================================================
   CSS変数
   ============================================================ */
:root {
  /* ── ライトベース（コンテンツエリア） ── */
  --color-bg:        #f7f6f3;
  --color-bg-white:  #ffffff;
  --color-bg-sub:    #f2f0ec;
  --color-bg-card:   #ffffff;

  /* ── ゴールドブランド ── */
  --color-gold:       #c4a96a;
  --color-gold-dark:  #a07840;
  --color-gold-light: #f5ecd6;
  --color-gold-pale:  #fdf8f0;
  --color-gold-glow:  rgba(196, 169, 106, 0.3);

  /* ── グラデーション ── */
  --grad-gold:   linear-gradient(135deg, #e8d5a3 0%, #c4a96a 50%, #9a7840 100%);
  --grad-header: linear-gradient(160deg, #0f0e0b 0%, #1a1710 50%, #0c0d14 100%);
  --grad-hero:   linear-gradient(135deg, rgba(196,169,106,0.15) 0%, transparent 60%);

  /* ── テキスト ── */
  --color-text:       #1a1814;
  --color-text-sub:   #5a5650;
  --color-text-muted: #9a9490;

  /* ── ボーダー ── */
  --color-border:       #e8e4de;
  --color-border-gold:  rgba(196, 169, 106, 0.35);

  /* ── カテゴリカラー ── */
  --cat-efficiency: #0d9e7a;
  --cat-marketing:  #b0409a;
  --cat-hr:         #2c6cb0;
  --cat-dx:         #a07840;
  --cat-data:       #4a8c20;
  --cat-strategy:   #b05040;
  --cat-sales:      #6040b0;
  --cat-legal:      #1a8c8c;

  /* ── フォント ── */
  --font-heading: 'DM Serif Display', 'Noto Serif JP', Georgia, serif;
  --font-body:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ── タイポグラフィ ── */
  --font-size-base:      16px;
  --line-height-body:    1.95;
  --line-height-heading: 1.35;

  /* ── 形状 ── */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  /* ── トランジション ── */
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition: 0.26s var(--ease);
}


/* ============================================================
   ベース
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

/* Cocoon の main エリア背景を明示上書き */
.main,
.article,
#contents,
.contents-in,
.site-body {
  background-color: transparent !important;
  color: var(--color-text) !important;
}

/* スクロール進捗バー */
#reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad-gold);
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(196,169,106,0.6);
}

a {
  color: var(--color-gold-dark);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--color-gold);
  text-decoration: underline;
}

img { max-width: 100%; height: auto; }

::selection {
  background: rgba(196, 169, 106, 0.25);
  color: var(--color-text);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-sub); }
::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border-radius: 3px;
}


/* ============================================================
   ヘッダー — ダークヘッダー × ゴールドライン
   ============================================================ */

#header-container {
  position: static !important;
}

#header {
  background:
    linear-gradient(rgba(8,7,5,0.70), rgba(10,9,6,0.82)),
    url(images/header-bg.jpg) center 40% / cover no-repeat !important;
  border-bottom: none;
  min-height: 200px;
}

#header-in {
  min-height: 200px;
  display: flex !important;
  align-items: center !important;
}

/* ゴールドのアクセントライン（ヘッダー上端） */
#header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-gold);
}

/* ヘッダー内テキストを白系に */
#header .site-name-text,
#header .site-name-text a {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--color-gold) !important;
}

#header .site-description {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 0.14em;
  margin-top: 0.3em;
}

.header-logo-image img { max-height: 56px; width: auto; }


/* ============================================================
   ナビゲーション（ヘッダー内 = ダーク背景）
   ============================================================ */
#navi,
#navi .navi-in {
  background: transparent !important;
}

#navi .navi-in > ul > li > a {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7) !important;
  letter-spacing: 0.05em;
  padding: 0.4em 0.2em;
  position: relative;
  transition: color var(--transition);
}
#navi .navi-in > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
#navi .navi-in > ul > li > a:hover {
  color: var(--color-gold) !important;
  text-decoration: none;
}
#navi .navi-in > ul > li > a:hover::after,
#navi .navi-in > ul > li.current-menu-item > a::after {
  transform: scaleX(1);
}
#navi .navi-in > ul > li.current-menu-item > a {
  color: var(--color-gold) !important;
}

/* ドロップダウン */
#navi .navi-in > ul > li > ul {
  background: #1a1a1e !important;
  border: 1px solid rgba(196,169,106,0.2);
  border-top: 2px solid var(--color-gold);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
#navi .navi-in > ul > li > ul > li > a {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65) !important;
}
#navi .navi-in > ul > li > ul > li > a:hover {
  background: rgba(196,169,106,0.12) !important;
  color: var(--color-gold) !important;
}


/* ============================================================
   パンくず
   ============================================================ */
.breadcrumb {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  padding: 0.7em 0;
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-gold); }


/* ============================================================
   記事カード — モダンカード × ホバーリフト
   ============================================================ */
.a-wrap {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.a-wrap:hover {
  transform: translateY(-5px);
  border-color: var(--color-border-gold) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.12),
    0 4px 12px var(--color-gold-glow) !important;
  text-decoration: none;
}

/* サムネイルズーム */
.a-wrap .a-thumb { overflow: hidden; }
.a-wrap .a-thumb img {
  transition: transform 0.5s var(--ease);
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.a-wrap:hover .a-thumb img { transform: scale(1.05); }

/* カードテキスト */
.a-wrap .entry-title {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  color: var(--color-text) !important;
}
.a-wrap .a-text {
  font-size: 0.82rem !important;
  color: var(--color-text-sub) !important;
  line-height: 1.75 !important;
}
.a-wrap .a-date,
.a-wrap .a-date-created {
  font-size: 0.72rem !important;
  color: var(--color-text-muted) !important;
}

/* カテゴリバッジ */
.a-wrap .cat-label,
.cat-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  padding: 0.22em 0.75em !important;
  border-radius: 100px !important;
  display: inline-block;
  color: #fff !important;
  background: var(--color-gold) !important;
}

/* カテゴリ別カラー（クラス名ベース） */
.term-業務効率化 .cat-label  { background: var(--cat-efficiency) !important; }
.term-マーケティング .cat-label { background: var(--cat-marketing) !important; }
.term-採用・人事 .cat-label  { background: var(--cat-hr) !important; }
.term-dx推進 .cat-label     { background: var(--cat-dx) !important; color: #fff !important; }
.term-データ活用 .cat-label  { background: var(--cat-data) !important; }
.term-戦略・経営 .cat-label  { background: var(--cat-strategy) !important; }
.term-営業・販売 .cat-label  { background: var(--cat-sales) !important; }
.term-法務・リスク管理 .cat-label { background: var(--cat-legal) !important; }


/* ============================================================
   記事タイトル（単一記事ページ）
   ============================================================ */
.entry-title {
  font-family: var(--font-heading) !important;
  font-size: 1.9rem !important;
  line-height: var(--line-height-heading) !important;
  color: var(--color-text) !important;
  margin-bottom: 0.6em;
  letter-spacing: -0.01em;
}

.article-header .post-date,
.article-header .post-update {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* アイキャッチ */
.eye-catch {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2em;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.eye-catch img { border-radius: var(--radius); width: 100%; }


/* ============================================================
   記事本文（prose）— 最重要：確実な可読性
   ============================================================ */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content td,
.entry-content th,
.entry-content blockquote {
  color: var(--color-text) !important;
}

.entry-content p {
  margin-bottom: 1.6em;
  font-size: 1rem;
  line-height: var(--line-height-body);
}

/* h2 */
.entry-content h2 {
  font-family: var(--font-heading) !important;
  font-size: 1.45rem;
  line-height: var(--line-height-heading);
  color: var(--color-text) !important;
  background: linear-gradient(135deg, var(--color-gold-pale) 0%, var(--color-bg) 80%);
  border-left: 3px solid var(--color-gold);
  border-bottom: 1px solid var(--color-border);
  padding: 0.65em 1em;
  margin: 3em 0 1.2em;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* h3 */
.entry-content h3 {
  font-family: var(--font-heading) !important;
  font-size: 1.15rem;
  line-height: var(--line-height-heading);
  color: var(--color-text) !important;
  border-left: 2px solid var(--color-gold);
  padding-left: 0.85em;
  margin: 2.5em 0 0.9em;
}

/* h4 */
.entry-content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text) !important;
  margin: 2em 0 0.7em;
  padding-bottom: 0.3em;
  border-bottom: 1px dashed var(--color-border);
}

/* リスト */
.entry-content ul,
.entry-content ol {
  padding-left: 1.6em;
  margin-bottom: 1.6em;
  color: var(--color-text) !important;
}
.entry-content li { margin-bottom: 0.5em; color: var(--color-text) !important; }
.entry-content ul li::marker { color: var(--color-gold); }
.entry-content ol li::marker { color: var(--color-gold); font-weight: 700; }

/* 引用 */
.entry-content blockquote {
  border-left: 3px solid var(--color-gold);
  background: var(--color-gold-pale);
  padding: 1.1em 1.4em;
  margin: 2em 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-text-sub) !important;
  font-style: italic;
  font-size: 0.95em;
}
.entry-content blockquote cite {
  display: block;
  font-size: 0.78rem;
  margin-top: 0.6em;
  color: var(--color-text-muted) !important;
  font-style: normal;
}

/* テーブル */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2em;
  font-size: 0.9rem;
  background: var(--color-bg-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid var(--color-border);
}
.entry-content th {
  background: var(--color-gold-pale) !important;
  color: var(--color-text) !important;
  font-weight: 700;
  padding: 0.75em 1em;
  border: 1px solid var(--color-border);
  text-align: left;
  font-size: 0.85rem;
}
.entry-content td {
  padding: 0.7em 1em;
  border: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-text) !important;
  background: var(--color-bg-white) !important;
}
.entry-content tr:nth-child(even) td {
  background: var(--color-bg-sub) !important;
}

/* インラインコード */
.entry-content code {
  background: var(--color-gold-pale);
  color: #7a4a20;
  padding: 0.12em 0.5em;
  border-radius: 4px;
  font-size: 0.84em;
  font-family: var(--font-mono);
  border: 1px solid var(--color-border-gold);
}

/* コードブロック — ダーク維持（読みやすい） */
.entry-content pre {
  background: #13120e;
  color: #e8d5a3;
  border: 1px solid rgba(196,169,106,0.2);
  border-radius: var(--radius);
  padding: 1.4em 1.6em;
  overflow-x: auto;
  margin-bottom: 2em;
  font-size: 0.84rem;
  line-height: 1.8;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  position: relative;
}
.entry-content pre::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-gold);
  opacity: 0.7;
  border-radius: var(--radius) var(--radius) 0 0;
}
.entry-content pre code {
  background: none !important;
  color: #e8d5a3 !important;
  padding: 0 !important;
  font-size: inherit !important;
  border: none !important;
}

/* 画像 */
.entry-content img {
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.entry-content figure { margin: 2em 0; }
.entry-content figcaption {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 0.5em;
}

/* マーカー */
.entry-content .marker,
.entry-content .marker-under {
  background: linear-gradient(transparent 55%, rgba(196,169,106,0.4) 55%);
}

/* strong */
.entry-content strong {
  font-weight: 700;
  color: var(--color-text) !important;
}

/* hr */
.entry-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2.5em 0;
}


/* ============================================================
   Cocoon ボックス
   ============================================================ */
.memo-box,
.alert-box,
.check-box,
.info-box,
.question-box,
.caution-box,
.point-box {
  border-radius: var(--radius);
  margin: 2em 0;
  padding: 1.1em 1.3em;
  font-size: 0.93rem;
  line-height: 1.85;
  color: var(--color-text) !important;
}
.memo-box {
  border: 1px solid rgba(196,169,106,0.5) !important;
  background: var(--color-gold-pale) !important;
}
.memo-box .box-label { color: var(--color-gold-dark) !important; }

.check-box {
  border: 1px solid rgba(13,158,122,0.4) !important;
  background: rgba(13,158,122,0.06) !important;
}
.check-box .box-label { color: var(--cat-efficiency) !important; }

.info-box {
  border: 1px solid rgba(44,108,176,0.4) !important;
  background: rgba(44,108,176,0.06) !important;
}

.caution-box {
  border: 1px solid rgba(200,150,50,0.4) !important;
  background: rgba(200,150,50,0.06) !important;
}

.alert-box {
  border: 1px solid rgba(176,80,64,0.4) !important;
  background: rgba(176,80,64,0.06) !important;
}
.alert-box .box-label { color: var(--cat-strategy) !important; }

.point-box {
  border: 2px solid var(--color-border-gold) !important;
  background: var(--color-bg-white) !important;
}


/* ============================================================
   目次
   ============================================================ */
.toc-box {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--radius);
  padding: 1.4em 1.6em;
  margin: 2.5em 0;
}
.toc-title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.8em;
}
.toc-list { font-size: 0.875rem; line-height: 1.75; }
.toc-list a { color: var(--color-text-sub); }
.toc-list a:hover { color: var(--color-gold); text-decoration: none; }
.toc-list li { margin-bottom: 0.35em; color: var(--color-text-sub); }


/* ============================================================
   SNSシェア
   ============================================================ */
.sns-share-wrap { margin: 2.5em 0; }
.sns-share-buttons { display: flex; flex-wrap: wrap; gap: 0.5em; }
.sns-share-button {
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  transition: opacity var(--transition), transform var(--transition);
}
.sns-share-button:hover { opacity: 0.85; transform: translateY(-2px); }


/* ============================================================
   著者情報
   ============================================================ */
.author-widget-wrap,
.author-box {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--radius-lg);
  padding: 1.8em 2em;
  margin: 3em 0;
}
.author-widget-name,
.author-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text) !important;
  margin-bottom: 0.4em;
}
.author-widget-description,
.author-description {
  font-size: 0.875rem;
  color: var(--color-text-sub) !important;
  line-height: 1.85;
}
.author-widget-image img,
.author-image img {
  border-radius: 50%;
  border: 2px solid var(--color-gold);
}


/* ============================================================
   関連記事
   ============================================================ */
.related-entry-heading {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  border-left: 3px solid var(--color-gold);
  padding-left: 0.8em;
  margin-bottom: 1.2em;
}


/* ============================================================
   ページネーション
   ============================================================ */
.pagination-wrap {
  display: flex;
  justify-content: center;
  margin: 3em 0;
  gap: 0.3em;
}
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  height: 2.4em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--color-text-sub);
  background: var(--color-bg-white);
  transition: all var(--transition);
}
.page-numbers:hover {
  background: var(--color-gold-pale);
  border-color: var(--color-gold);
  color: var(--color-gold-dark);
  transform: translateY(-2px);
  text-decoration: none;
}
.page-numbers.current {
  background: var(--grad-gold);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px var(--color-gold-glow);
}


/* ============================================================
   コメント
   ============================================================ */
.comment-list .comment-body {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1.2em;
  margin-bottom: 1.2em;
  color: var(--color-text);
}
#respond .comment-form-comment textarea,
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"] {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6em 0.8em;
  font-family: var(--font-body);
  font-size: 0.9rem;
  width: 100%;
  background: var(--color-bg-white);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
#respond input:focus,
#respond textarea:focus {
  border-color: var(--color-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(196,169,106,0.2);
}
#respond .submit {
  background: var(--grad-gold);
  color: #fff;
  border: none;
  padding: 0.7em 1.8em;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}
#respond .submit:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}


/* ============================================================
   サイドバー
   ============================================================ */
#sidebar { background: transparent !important; }

.widget {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.4em 1.6em;
  margin-bottom: 1.8em;
  color: var(--color-text) !important;
}

.widget-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-dark) !important;
  border-bottom: 2px solid var(--color-gold-light);
  padding-bottom: 0.6em;
  margin-bottom: 1em;
}

#sidebar ul li {
  border-bottom: 1px solid var(--color-bg-sub);
  padding: 0.45em 0;
  font-size: 0.85rem;
  color: var(--color-text);
}
#sidebar ul li a { color: var(--color-text-sub); display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
#sidebar ul li a:hover { color: var(--color-gold-dark); text-decoration: none; }

/* カテゴリ記事数バッジ */
#sidebar .post-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.35em;
  background: var(--color-gold-light);
  color: var(--color-gold-dark);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  line-height: 1;
}


/* ============================================================
   広告エリア
   ============================================================ */
.ad-area {
  background: var(--color-bg-sub);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 1em;
  margin: 2em 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.ad-area::before {
  content: "PR";
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.4em;
}
.ad-label {
  font-size: 0.62rem;
  color: var(--color-text-muted);
  text-align: center;
  display: block;
  letter-spacing: 0.1em;
}


/* ============================================================
   フッター — ダーク
   ============================================================ */
#footer {
  background: #0f0e0b !important;
  border-top: none;
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.8rem;
  margin-top: 4em;
}
#footer::before {
  content: '';
  display: block;
  height: 2px;
  background: var(--grad-gold);
  opacity: 0.5;
}
#footer a { color: rgba(255,255,255,0.4) !important; }
#footer a:hover { color: var(--color-gold) !important; text-decoration: none; }

.footer-widgets .widget {
  background: transparent !important;
  border: none;
  padding: 0;
  color: rgba(255,255,255,0.5) !important;
}
.footer-widgets .widget-title {
  color: var(--color-gold) !important;
  border-bottom-color: rgba(196,169,106,0.25) !important;
}
.footer-widgets ul li {
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
.footer-widgets ul li a { color: rgba(255,255,255,0.45) !important; }

.copyright {
  text-align: center;
  padding: 1.2em 0;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3) !important;
  letter-spacing: 0.06em;
}


/* ============================================================
   検索フォーム
   ============================================================ */
.search-form input[type="search"] {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 0.6em 0.9em;
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--color-bg-white);
  color: var(--color-text);
}
.search-form input[type="submit"] {
  background: var(--grad-gold);
  color: #fff;
  border: none;
  padding: 0.6em 1.2em;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  font-weight: 700;
  transition: opacity var(--transition);
}
.search-form input[type="submit"]:hover { opacity: 0.85; }


/* ============================================================
   固定ページ
   ============================================================ */
.page-template .entry-title {
  font-size: 1.6rem !important;
  border-bottom: 2px solid var(--color-gold-light);
  padding-bottom: 0.5em;
  margin-bottom: 1.2em;
  color: var(--color-text) !important;
}


/* ============================================================
   プロフィールページ
   ============================================================ */
.profile-hero {
  background: linear-gradient(135deg, var(--color-gold-pale) 0%, var(--color-bg-white) 60%);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  padding: 2.5em 2.2em;
  margin-bottom: 2.5em;
  display: flex;
  align-items: center;
  gap: 2em;
  border-top: 3px solid var(--color-gold);
}
.profile-hero__avatar {
  flex-shrink: 0;
  width: 110px; height: 110px;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  object-fit: cover;
  box-shadow: 0 0 0 6px rgba(196,169,106,0.15);
}
.profile-hero__name {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  color: var(--color-text) !important;
  margin-bottom: 0.2em;
}
.profile-hero__role {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-section { margin-bottom: 2.5em; }
.profile-section h2 {
  font-size: 1.1rem !important;
  border-left: 3px solid var(--color-gold) !important;
  padding: 0 0 0 0.7em !important;
  background: none !important;
  border-bottom: none !important;
  color: var(--color-text) !important;
}

.profile-skills { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.8em; }
.profile-skill-tag {
  background: var(--color-gold-pale);
  border: 1px solid var(--color-border-gold);
  color: var(--color-gold-dark);
  padding: 0.25em 0.85em;
  border-radius: 100px;
  font-size: 0.78rem;
}

.profile-cta {
  background: var(--color-gold-pale);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  padding: 1.8em 2em;
  text-align: center;
  margin-top: 2.5em;
}
.profile-cta a {
  display: inline-block;
  background: var(--grad-gold);
  color: #fff !important;
  padding: 0.8em 2.4em;
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: all var(--transition);
  text-decoration: none;
}
.profile-cta a:hover {
  opacity: 0.87;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--color-gold-glow);
  text-decoration: none;
}


/* ============================================================
   お問い合わせページ（CF7）
   ============================================================ */
.contact-intro {
  background: var(--color-gold-pale);
  border-left: 3px solid var(--color-gold);
  padding: 1.2em 1.5em;
  margin-bottom: 2em;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--color-text-sub);
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.9em;
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--color-bg-white);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: var(--color-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(196,169,106,0.2);
}
.wpcf7 textarea { min-height: 160px; resize: vertical; }
.wpcf7 input[type="submit"] {
  background: var(--grad-gold);
  color: #fff;
  border: none;
  padding: 0.8em 2.5em;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  width: 100%;
  margin-top: 0.5em;
}
.wpcf7 input[type="submit"]:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}
.contact-label {
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--color-text-sub);
  display: block;
  margin-top: 1.2em;
  margin-bottom: 0.3em;
}
.contact-label .required { color: #b04040; font-size: 0.72rem; margin-left: 0.4em; }
.contact-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 1.5em;
  padding-top: 1em;
  border-top: 1px solid var(--color-border);
}


/* ============================================================
   モバイルメニュー
   ============================================================ */
.mobile-header-menu-buttons {
  background: rgba(15,14,11,0.98) !important;
  border-top: 1px solid rgba(196,169,106,0.2);
}
.navi-menu-content {
  background: #0f0e0b !important;
  color: rgba(255,255,255,0.8) !important;
}
.navi-menu-content a { color: rgba(255,255,255,0.7) !important; }

/* ハンバーガーアイコン */
.menu-open-button span,
.menu-close-button span {
  background-color: rgba(255,255,255,0.85) !important;
}


/* ============================================================
   記事一覧 — グリッドレイアウト（トップ・アーカイブ・検索）
   ============================================================ */

/* グリッドコンテナ — Cocoon では #list が記事ラッパー */
.home #list,
.blog #list,
.archive #list,
.search-results #list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  padding: 28px 0 !important;
  align-items: start !important;
  background: transparent !important;
}

/* カードを縦積みに（Cocoon デフォルトの横並びを上書き） */
.home .a-wrap,
.blog .a-wrap,
.archive .a-wrap,
.search-results .a-wrap {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-width: 0 !important;
}

.home .entry-card,
.blog .entry-card,
.archive .entry-card,
.search-results .entry-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  height: 100% !important;
}

/* サムネイルを全幅・16:9 固定比率 */
.home .entry-card-thumb,
.blog .entry-card-thumb,
.archive .entry-card-thumb,
.search-results .entry-card-thumb {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  flex-shrink: 0 !important;
  overflow: hidden;
}

.home .entry-card-thumb img,
.blog .entry-card-thumb img,
.archive .entry-card-thumb img,
.search-results .entry-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.5s var(--ease) !important;
}

.home .a-wrap:hover .entry-card-thumb img,
.blog .a-wrap:hover .entry-card-thumb img,
.archive .a-wrap:hover .entry-card-thumb img {
  transform: scale(1.06) !important;
}

/* サムネイル内のカテゴリラベルは非表示（JS でコンテンツエリアに再配置） */
.home .entry-card-thumb .cat-label,
.blog .entry-card-thumb .cat-label,
.archive .entry-card-thumb .cat-label,
.search-results .entry-card-thumb .cat-label {
  display: none !important;
}

/* コンテンツエリア内に JS が生成する .card-cat-badge のスタイル */
.card-cat-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  padding: 0.2em 0.7em !important;
  border-radius: 100px !important;
  color: #fff !important;
  background: var(--color-gold) !important;
  margin-bottom: 4px;
  width: fit-content;
}

/* コンテンツエリア — Cocoon 水平レイアウト由来の margin-left:330px を完全リセット */
.home .entry-card-content,
.blog .entry-card-content,
.archive .entry-card-content,
.search-results .entry-card-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* タイトル（3行でclamp） */
.home .entry-card-title,
.blog .entry-card-title,
.archive .entry-card-title,
.search-results .entry-card-title {
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  margin-bottom: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* スニペット（2行でclamp） */
.home .entry-card-snippet,
.blog .entry-card-snippet,
.archive .entry-card-snippet,
.search-results .entry-card-snippet {
  font-size: 0.76rem !important;
  color: var(--color-text-sub) !important;
  line-height: 1.65 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-top: auto !important;
}

/* 日付 */
.home .a-date,
.blog .a-date,
.archive .a-date {
  font-size: 0.7rem !important;
  color: var(--color-text-muted) !important;
  margin-top: auto !important;
}


/* ============================================================
   カテゴリフィルターバー
   ============================================================ */
.category-filter-bar {
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 90;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.category-filter-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.cat-filter-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  margin-right: 4px;
  white-space: nowrap;
}

.cat-filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 100px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-sub);
  font-size: 0.76rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  line-height: 1.2;
}

.cat-filter-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-dark);
  background: var(--color-gold-pale);
}

.cat-filter-btn.is-active {
  background: var(--color-gold);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px var(--color-gold-glow);
}

.cat-filter-btn[data-cat="all"].is-active {
  background: var(--color-text);
  border-color: transparent;
  box-shadow: none;
}

/* フィルター非表示カード */
.a-wrap.is-filtered-out {
  display: none !important;
}


/* ============================================================
   アーカイブページ見出し帯
   ============================================================ */
.archive-hero {
  background: linear-gradient(135deg, #13120e 0%, #1e1b14 100%);
  border-bottom: 1px solid rgba(196,169,106,0.2);
  padding: 28px 24px;
  text-align: center;
}

.archive-hero__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.archive-hero__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.archive-hero__count {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  margin-top: 6px;
}


/* ============================================================
   フェードインアニメーション（JS連携）
   ============================================================ */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   レスポンシブ
   ============================================================ */
@media screen and (max-width: 1023px) {
  :root { --font-size-base: 15px; }

  .home #list,
  .blog #list,
  .archive #list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media screen and (max-width: 834px) {
  :root { --font-size-base: 15px; }

  .entry-title { font-size: 1.45rem !important; }
  .entry-content h2 { font-size: 1.2rem; padding: 0.6em 0.8em; }
  .entry-content h3 { font-size: 1.05rem; }

  .profile-hero {
    flex-direction: column;
    text-align: center;
    gap: 1.2em;
    padding: 1.6em 1.4em;
  }
  .profile-hero__avatar { width: 88px; height: 88px; }
  .profile-hero__name { font-size: 1.3rem !important; }

  .widget { padding: 1.1em 1.2em; }
}

@media screen and (max-width: 599px) {
  .home #list,
  .blog #list,
  .archive #list {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .category-filter-bar { top: 52px; }
  .category-filter-inner { gap: 5px; }
  .cat-filter-btn { font-size: 0.7rem; padding: 4px 10px; }
}

@media screen and (max-width: 480px) {
  :root { --font-size-base: 14px; }

  .entry-title { font-size: 1.25rem !important; }
  .entry-content h2 { font-size: 1.1rem; }
  .entry-content h3 { font-size: 1rem; }
  .entry-content table { font-size: 0.8rem; }
  .entry-content th,
  .entry-content td { padding: 0.5em 0.6em; }

  .profile-cta { padding: 1.3em; }
  .wpcf7 input[type="submit"] { font-size: 0.9rem; }

  .pagination-wrap { gap: 0.2em; }
  .page-numbers { width: 2em; height: 2em; font-size: 0.8rem; }
}