/*
Theme Name: JUST JIMNY
Theme URI: https://jimny.lovelife.style/
Description: ジムニーとオーナーのための総合メディア「JUST JIMNY」専用テーマ。カスタムのスタイル別表示、イベント、スポット、道具データベースに対応した独立テーマ（親テーマ不要）。
Author: Noriko
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jc
*/

/* =========================================================
   0. 設計方針
   - 配色はすべて CSS 変数。スタイル別のアクセントは body.jc-style-XXX で上書き
   - コンポーネント接頭辞は .jc-
   - ダークモードは prefers-color-scheme と html[data-theme] の両対応
   - 親テーマなしで動く独立テーマ。他テーマのスタイルと干渉しない
   ========================================================= */

:root {
  --jc-accent: #a8760a;
  --jc-accent-weak: rgba(201, 147, 15, 0.13);
  --jc-accent-line: rgba(201, 147, 15, 0.38);
  --jc-green: #35452f;
  --jc-ink: #171a15;
  --jc-ink-2: #4b5346;
  --jc-ink-3: #7c8474;
  --jc-bg: #ffffff;
  --jc-bg-2: #eff1ec;
  --jc-bg-3: #e2e5dd;
  --jc-ground: #e7e9e3;
  --jc-line: #ccd2c5;
  --jc-radius: 10px;
  --jc-radius-sm: 6px;
  --jc-shadow: 0 1px 2px rgba(16, 20, 24, .06), 0 8px 24px rgba(16, 20, 24, .06);
  --jc-maxw: 1100px;
  --jc-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --jc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* スタイル別アクセント（body クラスまたは任意の親要素に付与） */
.jc-style-lift-offroad { --jc-accent: #c8622a; --jc-accent-weak: rgba(200,98,42,.12); --jc-accent-line: rgba(200,98,42,.35); }
.jc-style-overland     { --jc-accent: #4c7a4a; --jc-accent-weak: rgba(76,122,74,.12);  --jc-accent-line: rgba(76,122,74,.35); }
.jc-style-retro        { --jc-accent: #9c7b3c; --jc-accent-weak: rgba(156,123,60,.12); --jc-accent-line: rgba(156,123,60,.35); }
.jc-style-military     { --jc-accent: #5f6b4a; --jc-accent-weak: rgba(95,107,74,.12);  --jc-accent-line: rgba(95,107,74,.35); }
.jc-style-street       { --jc-accent: #3b6ea5; --jc-accent-weak: rgba(59,110,165,.12); --jc-accent-line: rgba(59,110,165,.35); }
.jc-style-wide-body    { --jc-accent: #7a4a86; --jc-accent-weak: rgba(122,74,134,.12); --jc-accent-line: rgba(122,74,134,.35); }
.jc-style-face-swap    { --jc-accent: #b03a4a; --jc-accent-weak: rgba(176,58,74,.12);  --jc-accent-line: rgba(176,58,74,.35); }
.jc-style-work-tough   { --jc-accent: #4a5b6b; --jc-accent-weak: rgba(74,91,107,.12);  --jc-accent-line: rgba(74,91,107,.35); }
/* アクティビティ別（アウトドア側） */
.jc-act-camp    { --jc-accent: #4c7a4a; }
.jc-act-fishing { --jc-accent: #2f6f8f; }
.jc-act-rindo   { --jc-accent: #8a5a2b; }
.jc-act-snow    { --jc-accent: #5b7f9c; }
.jc-act-touring { --jc-accent: #7a6a9c; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jc-accent: #e9b93c;
    --jc-accent-weak: rgba(233, 185, 60, .14);
    --jc-accent-line: rgba(233, 185, 60, .38);
    --jc-green: #9dbb8c;
    --jc-ink: #e7eae0; --jc-ink-2: #aeb6a5; --jc-ink-3: #8b9382;
    --jc-bg: #171b14; --jc-bg-2: #1e2319; --jc-bg-3: #262c20;
    --jc-ground: #12150f;
    --jc-line: #333a2c;
    --jc-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
  :root:not([data-theme="light"]) .jc-style-lift-offroad { --jc-accent: #e07f45; }
  :root:not([data-theme="light"]) .jc-style-overland     { --jc-accent: #6ea36a; }
  :root:not([data-theme="light"]) .jc-style-retro        { --jc-accent: #c6a05a; }
  :root:not([data-theme="light"]) .jc-style-military     { --jc-accent: #8b9a70; }
  :root:not([data-theme="light"]) .jc-style-street       { --jc-accent: #6b9dd4; }
  :root:not([data-theme="light"]) .jc-style-wide-body    { --jc-accent: #a879b4; }
  :root:not([data-theme="light"]) .jc-style-face-swap    { --jc-accent: #d4707c; }
  :root:not([data-theme="light"]) .jc-style-work-tough   { --jc-accent: #7a90a4; }
}
:root[data-theme="dark"] {
  --jc-accent: #e9b93c;
  --jc-accent-weak: rgba(233, 185, 60, .14);
  --jc-accent-line: rgba(233, 185, 60, .38);
  --jc-green: #9dbb8c;
  --jc-ink: #e7eae0; --jc-ink-2: #aeb6a5; --jc-ink-3: #8b9382;
  --jc-bg: #171b14; --jc-bg-2: #1e2319; --jc-bg-3: #262c20;
  --jc-ground: #12150f;
  --jc-line: #333a2c;
}

/* =========================================================
   1. ベース
   ========================================================= */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--jc-font);
  font-size: 16px;
  line-height: 1.9;
  color: var(--jc-ink);
  background-color: var(--jc-ground);
  background-image:
    linear-gradient(rgba(124, 132, 116, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 132, 116, .10) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-font-smoothing: antialiased;
}

img, video, iframe { max-width: 100%; height: auto; }
a { color: var(--jc-accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--jc-accent); outline-offset: 2px;
}

.jc-container { max-width: var(--jc-maxw); margin: 0 auto; padding: 0 20px; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--jc-accent); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 0; }

.jc-scope, .entry-content {
  font-family: var(--jc-font);
  color: var(--jc-ink);
  line-height: 1.9;
  letter-spacing: .01em;
}
.entry-content h2 {
  font-size: 1.4rem; line-height: 1.5; margin: 2.6em 0 .9em;
  padding: .5em 0 .5em .8em; border-left: 5px solid var(--jc-accent);
  background: var(--jc-accent-weak); border-radius: 0 var(--jc-radius-sm) var(--jc-radius-sm) 0;
}
.entry-content h3 {
  font-size: 1.15rem; margin: 2em 0 .7em; padding-bottom: .35em;
  border-bottom: 2px solid var(--jc-accent-line);
}
.entry-content a { color: var(--jc-accent); text-underline-offset: .18em; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--jc-radius-sm); }

/* =========================================================
   2. スタイル別カード一覧（[jc_style_cards]）
   ========================================================= */
.jc-cards {
  display: grid; gap: 16px; margin: 1.8em 0;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.jc-card {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: var(--jc-bg); border: 1px solid var(--jc-line);
  border-radius: var(--jc-radius); box-shadow: var(--jc-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.jc-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16,20,24,.08), 0 14px 32px rgba(16,20,24,.10); }
.jc-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 4px; background: var(--jc-accent); }
.jc-card__thumb { aspect-ratio: 16 / 10; background: var(--jc-bg-3); overflow: hidden; }
.jc-card__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.jc-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.jc-card__eyebrow { font-size: .72rem; letter-spacing: .08em; color: var(--jc-accent); font-weight: 700; }
.jc-card__title { font-size: 1.02rem; font-weight: 700; line-height: 1.45; margin: 0; }
.jc-card__title a { color: var(--jc-ink); text-decoration: none; }
.jc-card__title a:hover { color: var(--jc-accent); }
.jc-card__desc { font-size: .86rem; color: var(--jc-ink-2); margin: 0; }
.jc-card__meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .76rem; color: var(--jc-ink-3); }

/* =========================================================
   3. バッジ・タグ
   ========================================================= */
.jc-badge {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .22em .6em; border-radius: 999px; font-size: .74rem; font-weight: 700;
  background: var(--jc-accent-weak); color: var(--jc-accent); border: 1px solid var(--jc-accent-line);
  line-height: 1.6; white-space: nowrap;
}
.jc-badge--plain { background: var(--jc-bg-2); color: var(--jc-ink-2); border-color: var(--jc-line); }
.jc-badge--alert { background: rgba(196,64,64,.10); color: #c44040; border-color: rgba(196,64,64,.32); }
.jc-taglist { display: flex; flex-wrap: wrap; gap: 6px; margin: 1em 0; padding: 0; list-style: none; }

/* 難易度メーター */
.jc-level { display: inline-flex; gap: 3px; vertical-align: middle; }
.jc-level i { width: 8px; height: 8px; border-radius: 2px; background: var(--jc-bg-3); display: inline-block; }
.jc-level i.is-on { background: var(--jc-accent); }

/* =========================================================
   4. 比較表・スペック表（横スクロール安全）
   ========================================================= */
.jc-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.6em 0; border-radius: var(--jc-radius); border: 1px solid var(--jc-line); }
.jc-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9rem; background: var(--jc-bg); }
.jc-table th, .jc-table td { padding: 11px 13px; border-bottom: 1px solid var(--jc-line); text-align: left; vertical-align: top; }
.jc-table thead th { background: var(--jc-accent-weak); color: var(--jc-ink); font-weight: 700; white-space: nowrap; position: sticky; top: 0; }
.jc-table tbody tr:nth-child(even) { background: var(--jc-bg-2); }
.jc-table tbody tr:last-child td { border-bottom: none; }
.jc-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--jc-mono); white-space: nowrap; }
.jc-table .is-best { color: var(--jc-accent); font-weight: 700; }

/* 予算表 */
.jc-budget { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 1.6em 0; }
.jc-budget__item { border: 1px solid var(--jc-line); border-radius: var(--jc-radius); padding: 14px 16px; background: var(--jc-bg); }
.jc-budget__label { font-size: .78rem; color: var(--jc-ink-3); }
.jc-budget__price { font-size: 1.32rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--jc-accent); }
.jc-budget__note { font-size: .8rem; color: var(--jc-ink-2); margin-top: .3em; }

/* パーツチェックリスト */
.jc-checklist { list-style: none; padding: 0; margin: 1.4em 0; display: grid; gap: 8px; }
.jc-checklist li { position: relative; padding: 9px 12px 9px 34px; background: var(--jc-bg-2); border-radius: var(--jc-radius-sm); font-size: .9rem; }
.jc-checklist li::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 12px; height: 7px; margin-top: -5px;
  border-left: 2px solid var(--jc-accent); border-bottom: 2px solid var(--jc-accent); transform: rotate(-45deg);
}

/* =========================================================
   5. 注意書き・車検メモ
   ========================================================= */
.jc-note {
  border: 1px solid var(--jc-accent-line); border-left-width: 4px;
  background: var(--jc-accent-weak); border-radius: var(--jc-radius-sm);
  padding: 14px 16px; margin: 1.6em 0; font-size: .9rem;
}
.jc-note__title { font-weight: 700; margin: 0 0 .35em; color: var(--jc-accent); font-size: .88rem; }
.jc-note--legal { --jc-accent: #b06a1f; --jc-accent-weak: rgba(176,106,31,.10); --jc-accent-line: rgba(176,106,31,.35); }

/* =========================================================
   6. 目次
   ========================================================= */
.jc-toc { background: var(--jc-bg-2); border: 1px solid var(--jc-line); border-radius: var(--jc-radius); padding: 16px 18px; margin: 1.8em 0; font-size: .9rem; }
.jc-toc__title { font-weight: 700; margin: 0 0 .6em; }
.jc-toc ol { margin: 0; padding-left: 1.2em; }
.jc-toc li { margin: .3em 0; }
.jc-toc a { color: var(--jc-ink-2); text-decoration: none; }
.jc-toc a:hover { color: var(--jc-accent); text-decoration: underline; }

/* =========================================================
   7. FAQ
   ========================================================= */
.jc-faq { margin: 1.8em 0; border: 1px solid var(--jc-line); border-radius: var(--jc-radius); overflow: hidden; }
.jc-faq details { border-bottom: 1px solid var(--jc-line); background: var(--jc-bg); }
.jc-faq details:last-child { border-bottom: none; }
.jc-faq summary { cursor: pointer; padding: 13px 16px 13px 42px; position: relative; font-weight: 700; font-size: .93rem; list-style: none; }
.jc-faq summary::-webkit-details-marker { display: none; }
.jc-faq summary::before { content: "Q"; position: absolute; left: 16px; color: var(--jc-accent); font-family: var(--jc-mono); }
.jc-faq .jc-faq__a { padding: 0 16px 15px 42px; font-size: .9rem; color: var(--jc-ink-2); position: relative; }
.jc-faq .jc-faq__a::before { content: "A"; position: absolute; left: 16px; color: var(--jc-ink-3); font-family: var(--jc-mono); }

/* =========================================================
   8. イベント（CPT: jc_event）
   ========================================================= */
.jc-events { display: grid; gap: 10px; margin: 1.8em 0; }
.jc-event {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center;
  background: var(--jc-bg); border: 1px solid var(--jc-line); border-radius: var(--jc-radius); padding: 12px 14px;
}
.jc-event__date {
  text-align: center; border-radius: var(--jc-radius-sm); background: var(--jc-accent-weak);
  border: 1px solid var(--jc-accent-line); padding: 6px 4px; line-height: 1.25;
}
.jc-event__month { display: block; font-size: .7rem; color: var(--jc-accent); font-weight: 700; }
.jc-event__day { display: block; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--jc-ink); }
.jc-event__title { font-size: .98rem; font-weight: 700; margin: 0 0 .25em; }
.jc-event__title a { color: var(--jc-ink); text-decoration: none; }
.jc-event__title a:hover { color: var(--jc-accent); }
.jc-event__meta { font-size: .8rem; color: var(--jc-ink-3); display: flex; flex-wrap: wrap; gap: 10px; }
.jc-event__cta { font-size: .8rem; white-space: nowrap; }
.jc-event.is-past { opacity: .55; }
.jc-event.is-soon { border-color: var(--jc-accent-line); box-shadow: inset 3px 0 0 var(--jc-accent); }
@media (max-width: 600px) {
  .jc-event { grid-template-columns: 62px 1fr; }
  .jc-event__cta { grid-column: 1 / -1; text-align: right; }
}

/* =========================================================
   9. アウトドアスポット（CPT: jc_spot）
   ========================================================= */
.jc-spots { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 1.8em 0; }
.jc-spot { border: 1px solid var(--jc-line); border-radius: var(--jc-radius); overflow: hidden; background: var(--jc-bg); }
.jc-spot__thumb { aspect-ratio: 4 / 3; background: var(--jc-bg-3); }
.jc-spot__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.jc-spot__body { padding: 12px 14px 14px; }
.jc-spot__title { font-size: .98rem; font-weight: 700; margin: 0 0 .3em; }
.jc-spot__title a { color: var(--jc-ink); text-decoration: none; }
.jc-spot__facts { list-style: none; margin: .6em 0 0; padding: 0; font-size: .82rem; color: var(--jc-ink-2); display: grid; gap: 4px; }
.jc-spot__facts span { color: var(--jc-ink-3); display: inline-block; min-width: 5.2em; }

/* =========================================================
   10. CTA（物販・査定・LINE）
   ========================================================= */
.jc-cta {
  border: 1px solid var(--jc-accent-line); background: var(--jc-bg-2);
  border-radius: var(--jc-radius); padding: 18px; margin: 2em 0; display: grid; gap: 10px;
}
.jc-cta__title { font-weight: 700; font-size: 1rem; margin: 0; }
.jc-cta__desc { font-size: .88rem; color: var(--jc-ink-2); margin: 0; }
.jc-cta__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.jc-btn {
  display: inline-block; padding: .62em 1.15em; border-radius: var(--jc-radius-sm);
  background: var(--jc-accent); color: #fff !important; text-decoration: none; font-weight: 700; font-size: .88rem;
  border: 1px solid transparent;
}
.jc-btn:hover { filter: brightness(1.06); }
.jc-btn--ghost { background: transparent; color: var(--jc-accent) !important; border-color: var(--jc-accent-line); }
.jc-cta__pr { font-size: .72rem; color: var(--jc-ink-3); }

/* =========================================================
   11. パンくず・関連・フィルタバー
   ========================================================= */
.jc-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 1.2em 0 1.6em; padding: 0; list-style: none; }
.jc-filter a {
  display: inline-block; padding: .35em .85em; border-radius: 999px; font-size: .82rem; text-decoration: none;
  color: var(--jc-ink-2); background: var(--jc-bg-2); border: 1px solid var(--jc-line);
}
.jc-filter a:hover, .jc-filter .is-current a { background: var(--jc-accent); color: #fff; border-color: var(--jc-accent); }

.jc-related { margin: 2.4em 0 0; }
.jc-related__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .8em; padding-left: .6em; border-left: 4px solid var(--jc-accent); }

/* アーカイブ見出し（スタイル別トップ） */
.jc-archive-hero { padding: 22px 24px; border-radius: var(--jc-radius); background: var(--jc-accent-weak); border: 1px solid var(--jc-accent-line); margin: 0 0 1.6em; }
.jc-archive-hero h1 { margin: 0 0 .4em; font-size: 1.5rem; }
.jc-archive-hero p { margin: 0; font-size: .92rem; color: var(--jc-ink-2); }

/* =========================================================
   12. ブランド（署名・注記・PR表記）
   ========================================================= */
.jc-signature {
  margin: 2.6em 0 0; padding: 16px 18px; border-top: 2px solid var(--jc-accent);
  background: var(--jc-bg-2); border-radius: 0 0 var(--jc-radius) var(--jc-radius);
}
.jc-signature__name {
  font-weight: 700; letter-spacing: .12em; font-size: .9rem; margin: 0 0 .2em;
}
.jc-signature__tag { font-size: .82rem; color: var(--jc-ink-2); margin: 0; }

.jc-disclaimer {
  font-size: .76rem; line-height: 1.9; color: var(--jc-ink-3);
  border-top: 1px solid var(--jc-line); padding: 16px 0 24px; margin-top: 24px;
}
.jc-disclaimer p { margin: 0; }

.jc-pr {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  padding: .25em .7em; border-radius: var(--jc-radius-sm); margin: 0 0 1.2em;
  background: var(--jc-bg-3); color: var(--jc-ink-2); border: 1px solid var(--jc-line);
}

/* =========================================================
   13. 印刷・低速回線配慮
   ========================================================= */
@media print {
  .jc-cta, .jc-filter, .jc-related { display: none; }
  .jc-card, .jc-table { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jc-card { transition: none; }
}

/* =========================================================
   14. サイト骨格（ヘッダー・本文・サイドバー・フッター）
   ========================================================= */
.jc-site-header {
  background: var(--jc-bg);
  border-bottom: 3px solid var(--jc-ink);
  position: relative;
}
.jc-header-inner {
  max-width: var(--jc-maxw); margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.jc-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; margin-right: auto; }
.jc-brand__name {
  font-size: 1.35rem; font-weight: 900; letter-spacing: .14em;
  color: var(--jc-ink); line-height: 1.1;
}
.jc-brand__copy { font-size: .74rem; color: var(--jc-ink-3); letter-spacing: .04em; }
.jc-brand img { max-height: 44px; width: auto; }

.jc-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.jc-nav a {
  display: inline-block; padding: 7px 12px; font-size: .87rem; font-weight: 700;
  color: var(--jc-ink-2); text-decoration: none; border-radius: var(--jc-radius-sm);
}
.jc-nav a:hover, .jc-nav .current-menu-item > a { color: var(--jc-accent); background: var(--jc-accent-weak); }
.jc-nav .sub-menu { display: none; }

.jc-nav-toggle {
  display: none; background: none; border: 1px solid var(--jc-line); border-radius: var(--jc-radius-sm);
  padding: 7px 12px; font-size: .85rem; font-weight: 700; color: var(--jc-ink); cursor: pointer;
}
.jc-search-toggle { display: inline-flex; }

@media (max-width: 860px) {
  .jc-nav-toggle { display: inline-block; }
  .jc-nav { flex-basis: 100%; display: none; }
  .jc-nav.is-open { display: block; }
  .jc-nav ul { flex-direction: column; gap: 0; }
  .jc-nav a { display: block; padding: 11px 4px; border-bottom: 1px solid var(--jc-line); border-radius: 0; }
}

/* 検索フォーム */
.jc-searchform { display: flex; gap: 6px; }
.jc-searchform input[type="search"] {
  flex: 1; padding: 8px 11px; font-size: .9rem; color: var(--jc-ink);
  background: var(--jc-bg); border: 1px solid var(--jc-line); border-radius: var(--jc-radius-sm);
}
.jc-searchform button {
  padding: 8px 14px; font-size: .85rem; font-weight: 700; cursor: pointer;
  background: var(--jc-accent); color: #fff; border: none; border-radius: var(--jc-radius-sm);
}

/* 本文レイアウト */
.jc-main { padding: 28px 0 56px; }
.jc-layout {
  max-width: var(--jc-maxw); margin: 0 auto; padding: 0 20px;
  display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) 300px; align-items: start;
}
.jc-layout--full { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .jc-layout { grid-template-columns: minmax(0, 1fr); } }

.jc-article, .jc-archive-body {
  background: var(--jc-bg); border: 1px solid var(--jc-line);
  border-radius: var(--jc-radius); padding: 26px 28px 32px; box-shadow: var(--jc-shadow);
}
@media (max-width: 600px) { .jc-article, .jc-archive-body { padding: 20px 16px 26px; } }

.jc-entry-title { font-size: 1.72rem; line-height: 1.4; margin: .1em 0 .5em; text-wrap: balance; }
.jc-entry-meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: .78rem; color: var(--jc-ink-3); margin-bottom: 18px;
}
.jc-entry-meta time { font-variant-numeric: tabular-nums; }
.jc-thumb { margin: 0 0 22px; }
.jc-thumb img { width: 100%; border-radius: var(--jc-radius-sm); }

/* パンくず */
.jc-breadcrumb {
  max-width: var(--jc-maxw); margin: 0 auto; padding: 12px 20px 0;
  font-size: .76rem; color: var(--jc-ink-3);
}
.jc-breadcrumb a { color: var(--jc-ink-2); text-decoration: none; }
.jc-breadcrumb a:hover { color: var(--jc-accent); }
.jc-breadcrumb span + span::before { content: "›"; margin: 0 .5em; color: var(--jc-ink-3); }

/* アーカイブ一覧 */
.jc-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.jc-listitem {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--jc-line);
}
.jc-listitem:last-child { border-bottom: none; }
.jc-listitem__thumb { aspect-ratio: 16 / 10; background: var(--jc-bg-3); border-radius: var(--jc-radius-sm); overflow: hidden; }
.jc-listitem__thumb img { width: 100%; height: 100%; object-fit: cover; }
.jc-listitem__title { font-size: 1.02rem; font-weight: 700; line-height: 1.5; margin: 0 0 .3em; }
.jc-listitem__title a { color: var(--jc-ink); text-decoration: none; }
.jc-listitem__title a:hover { color: var(--jc-accent); }
.jc-listitem__excerpt { font-size: .85rem; color: var(--jc-ink-2); margin: 0 0 .4em; }
.jc-listitem__meta { font-size: .75rem; color: var(--jc-ink-3); display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .jc-listitem { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
  .jc-listitem__excerpt { display: none; }
}

/* ページネーション */
.jc-pagination { margin-top: 26px; }
.jc-pagination .page-numbers {
  display: inline-block; min-width: 38px; text-align: center; padding: 7px 10px; margin: 0 3px 6px 0;
  font-size: .85rem; text-decoration: none; color: var(--jc-ink-2);
  background: var(--jc-bg-2); border: 1px solid var(--jc-line); border-radius: var(--jc-radius-sm);
}
.jc-pagination .page-numbers.current,
.jc-pagination .page-numbers:hover { background: var(--jc-accent); color: #fff; border-color: var(--jc-accent); }

/* サイドバー */
.jc-sidebar { display: grid; gap: 18px; }
.jc-widget {
  background: var(--jc-bg); border: 1px solid var(--jc-line);
  border-radius: var(--jc-radius); padding: 16px 18px;
}
.jc-widget__title {
  font-size: .92rem; font-weight: 700; margin: 0 0 .7em;
  padding-left: .6em; border-left: 4px solid var(--jc-accent);
}
.jc-widget ul { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.jc-widget li { padding: 6px 0; border-bottom: 1px dashed var(--jc-line); }
.jc-widget li:last-child { border-bottom: none; }
.jc-widget a { color: var(--jc-ink-2); text-decoration: none; }
.jc-widget a:hover { color: var(--jc-accent); }
.jc-sidebar-sticky { position: sticky; top: 20px; }

/* フッター */
.jc-site-footer { background: var(--jc-bg); border-top: 3px solid var(--jc-ink); margin-top: 40px; }
.jc-footer-inner { max-width: var(--jc-maxw); margin: 0 auto; padding: 28px 20px 20px; }
.jc-footer-cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.jc-footer-title { font-size: .84rem; font-weight: 700; margin: 0 0 .6em; letter-spacing: .08em; }
.jc-footer-cols ul { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.jc-footer-cols li { padding: 4px 0; }
.jc-footer-cols a { color: var(--jc-ink-2); text-decoration: none; }
.jc-footer-cols a:hover { color: var(--jc-accent); }
.jc-copyright { font-size: .76rem; color: var(--jc-ink-3); margin: 20px 0 0; }
.jc-sns { display: flex; gap: 10px; font-size: .84rem; margin: 6px 0 0; padding: 0; list-style: none; }

/* 404・検索なし */
.jc-empty { text-align: center; padding: 40px 10px; color: var(--jc-ink-2); }
.jc-empty h1 { font-size: 1.5rem; margin-bottom: .4em; }

/* WordPress 標準クラス */
.alignleft { float: left; margin: 0 1.2em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.2em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { margin-left: 0; margin-right: 0; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-block-image figcaption { font-size: .78rem; color: var(--jc-ink-3); text-align: center; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content blockquote {
  margin: 1.6em 0; padding: 12px 18px; border-left: 4px solid var(--jc-line);
  background: var(--jc-bg-2); color: var(--jc-ink-2); border-radius: 0 var(--jc-radius-sm) var(--jc-radius-sm) 0;
}
.entry-content code {
  font-family: var(--jc-mono); font-size: .88em; padding: .1em .35em;
  background: var(--jc-bg-3); border-radius: 3px;
}
.entry-content pre { overflow-x: auto; padding: 14px; background: var(--jc-bg-3); border-radius: var(--jc-radius-sm); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.entry-content th, .entry-content td { border: 1px solid var(--jc-line); padding: 9px 12px; }

/* 記事下ウィジェット枠 */
.jc-after-content { display: grid; gap: 14px; margin: 2.2em 0 0; }
.jc-after-content .jc-widget { background: var(--jc-bg-2); }

/* =========================================================
   15. ヒーロー（トップの導入）
   ========================================================= */
.jc-hero {
  position: relative; overflow: hidden;
  background-color: #12150f;
  background-image:
    repeating-radial-gradient(circle at 18% 24%, transparent 0 38px, rgba(233,185,60,.07) 38px 40px),
    repeating-radial-gradient(circle at 82% 72%, transparent 0 46px, rgba(255,255,255,.05) 46px 48px),
    linear-gradient(160deg, #1b2016 0%, #12150f 55%, #0d100b 100%);
  color: #f2f4ee;
  border-bottom: 4px solid var(--jc-accent);
}
.jc-hero__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .42; filter: grayscale(.25) contrast(1.05);
}
.jc-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,15,10,.25) 0%, rgba(12,15,10,.72) 78%, rgba(12,15,10,.92) 100%);
}
.jc-hero__inner {
  position: relative; z-index: 2;
  max-width: var(--jc-maxw); margin: 0 auto; padding: 84px 20px 32px;
}
.jc-hero__eyebrow {
  font-family: var(--jc-mono); font-size: .72rem; letter-spacing: .32em;
  color: var(--jc-accent); margin: 0 0 18px;
}
.jc-hero__title {
  font-size: clamp(2.6rem, 9vw, 5.6rem); font-weight: 900; line-height: .96;
  letter-spacing: .06em; margin: 0 0 18px; color: #fff;
}
.jc-hero__copy {
  font-size: clamp(1rem, 2.4vw, 1.32rem); font-weight: 700; margin: 0 0 10px; color: #fff;
}
.jc-hero__lede {
  font-size: .94rem; line-height: 1.9; color: rgba(242,244,238,.78);
  max-width: 34em; margin: 0 0 26px;
}
.jc-hero__rule { width: 84px; height: 5px; background: var(--jc-accent); margin: 0 0 22px; }
.jc-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.jc-hero .jc-btn { padding: .8em 1.5em; font-size: .92rem; }
.jc-hero .jc-btn--ghost { color: #fff !important; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.jc-hero__index {
  display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid rgba(255,255,255,.18);
}
.jc-hero__index a {
  display: block; padding: 16px 4px 18px; text-decoration: none; color: rgba(242,244,238,.9);
  border-right: 1px solid rgba(255,255,255,.12);
}
.jc-hero__index a:last-child { border-right: none; }
.jc-hero__index a:hover { background: rgba(255,255,255,.06); }
.jc-hero__index b { display: block; font-size: .95rem; font-weight: 700; }
.jc-hero__index span {
  display: block; font-family: var(--jc-mono); font-size: .66rem;
  letter-spacing: .2em; color: var(--jc-accent); margin-bottom: 4px;
}

/* =========================================================
   16. セクション見出し
   ========================================================= */
.jc-sec { margin: 0 0 46px; }
.jc-sec__head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; }
.jc-sec__en {
  font-family: var(--jc-mono); font-size: .7rem; letter-spacing: .26em;
  color: var(--jc-accent); white-space: nowrap;
}
.jc-sec__title { font-size: 1.32rem; font-weight: 900; margin: 0; letter-spacing: .02em; }
.jc-sec__line { flex: 1; height: 1px; background: var(--jc-line); }
.jc-sec__lede { font-size: .88rem; color: var(--jc-ink-2); margin: -8px 0 18px; }

/* =========================================================
   17. スタイルタイル（写真ありきの主役コンポーネント）
   ========================================================= */
.jc-tiles {
  display: grid; gap: 14px; margin: 0 0 8px;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.jc-tile { position: relative; }
.jc-tile__link {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--jc-radius); text-decoration: none; color: #fff;
  background: #12150f; box-shadow: var(--jc-shadow);
}
.jc-tile__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform .5s ease;
}
.jc-tile__img--none {
  background-image:
    repeating-radial-gradient(circle at 30% 20%, transparent 0 26px, rgba(255,255,255,.06) 26px 28px),
    linear-gradient(155deg, var(--jc-accent) -40%, #171a15 62%);
  opacity: .95;
}
.jc-tile__link:hover .jc-tile__img { transform: scale(1.06); }
.jc-tile__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,8,.15) 0%, rgba(10,12,8,.35) 45%, rgba(10,12,8,.88) 100%);
}
.jc-tile__head { position: absolute; top: 0; left: 0; right: 0; padding: 16px 16px 0; }
.jc-tile__en {
  display: inline-block; font-family: var(--jc-mono); font-size: .66rem; letter-spacing: .22em;
  padding: 3px 8px; border: 1px solid var(--jc-accent); color: var(--jc-accent);
  background: rgba(10,12,8,.45); border-radius: 3px;
}
.jc-tile__name {
  font-size: 1.24rem; font-weight: 900; line-height: 1.35; margin: 10px 0 0;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.jc-tile__foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 16px 16px; }
.jc-tile__desc { font-size: .8rem; line-height: 1.7; color: rgba(255,255,255,.82); margin: 0 0 10px; }
.jc-tile__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jc-tile__budget {
  font-family: var(--jc-mono); font-size: .84rem; font-weight: 700; color: var(--jc-accent);
  font-variant-numeric: tabular-nums;
}
.jc-tile__count { font-size: .72rem; color: rgba(255,255,255,.6); }
.jc-tile .jc-level i { background: rgba(255,255,255,.25); }
.jc-tile .jc-level i.is-on { background: var(--jc-accent); }
@media (prefers-reduced-motion: reduce) {
  .jc-tile__img { transition: none; }
}

/* 帯（次のアクションへの導線） */
.jc-strip {
  background: var(--jc-ink); color: #f2f4ee; border-radius: var(--jc-radius);
  padding: 22px 24px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  margin: 0 0 46px;
}
.jc-strip h2 { font-size: 1.08rem; margin: 0; color: #fff; }
.jc-strip p { font-size: .86rem; margin: 0; color: rgba(242,244,238,.75); flex: 1; min-width: 220px; }

/* ヘッダーのナビは折り返さず横スクロールさせる */
@media (min-width: 861px) {
  .jc-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .jc-nav ul::-webkit-scrollbar { display: none; }
  .jc-nav a { white-space: nowrap; }
}

/* 写真が入るまでの代替表示 */
.jc-tile__link { aspect-ratio: 4 / 5; }
.jc-tile__img--none { display: flex; align-items: center; justify-content: center; }
.jc-tile__ghost {
  font-family: var(--jc-mono); font-size: clamp(1.3rem, 3.4vw, 2rem); font-weight: 700;
  letter-spacing: .18em; color: rgba(255,255,255,.14); white-space: nowrap;
  transform: rotate(-4deg);
}