/*
Theme Name: Erabazu Child
Template: twentytwentyfive
Version: 0.2.0
Description: エラバズ工房の子テーマ。職種軸とワークモード軸の二軸回遊UIを提供。
*/

:root{
  --ink:#1d1d1f;
  --muted:#6b6b70;
  --line:#e6e6e9;
  --bg:#fbfbfc;
  --accent:#2b6cb0;
  /* ワークモード3色（拡張時はここに足す） */
  --wm-math:#2b6cb0;
  --wm-tacit:#b7791f;
  --wm-creative:#9b2c8c;
  --wm-relational:#2f855a;
  --wm-coordination:#4a5568;
  --wm-normative:#9b2c2c;
}

.erabazu-wrap{max-width:1040px;margin:0 auto;padding:32px 20px 80px;}

.erabazu-breadcrumb{font-size:.82rem;color:var(--muted);display:flex;gap:8px;align-items:center;margin-bottom:20px;flex-wrap:wrap;}
.erabazu-breadcrumb a{color:var(--muted);text-decoration:none;}
.erabazu-breadcrumb a:hover{color:var(--accent);}

.eyebrow{font-size:.78rem;letter-spacing:.08em;color:var(--muted);margin:0 0 4px;}
h1{font-size:1.9rem;margin:0 0 10px;letter-spacing:-.01em;}
.occupation-desc,.workmode-desc{color:var(--muted);font-size:1rem;}
.workmode-note{font-size:.86rem;color:var(--muted);margin-top:6px;}

/* ---- ワークモード フィルタ チップ ---- */
.mode-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:24px 0 8px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;}
.mode-filter-label{font-size:.85rem;color:var(--muted);margin-right:4px;}
.chip{display:inline-block;font-size:.84rem;padding:5px 13px;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none;background:#fff;transition:.15s;}
.chip:hover{border-color:var(--accent);}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ---- アプリカードグリッド ---- */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:18px;}
.app-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:.18s;}
.app-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06);}
.app-card a{display:block;padding:0 0 16px;color:inherit;text-decoration:none;}
.app-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.app-card h3{font-size:1.05rem;margin:14px 16px 6px;}
.app-card p{font-size:.86rem;color:var(--muted);margin:0 16px;line-height:1.5;}
.app-card .card-occ{font-size:.78rem;color:var(--accent);margin:2px 16px 6px;}
.badge-free{display:inline-block;font-size:.72rem;background:#e6f4ea;color:#2f855a;padding:2px 8px;border-radius:6px;margin:8px 16px 0;}

/* ---- ワークモードタグ ---- */
.workmode-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:10px 16px 0;padding:0;}
.workmode-tags li a{font-size:.72rem;padding:2px 9px;border-radius:999px;text-decoration:none;color:#fff;display:inline-block;}
.wm-math a,.wm-math{background:var(--wm-math);}
.wm-tacit a,.wm-tacit{background:var(--wm-tacit);}
.wm-creative a,.wm-creative{background:var(--wm-creative);}
.wm-relational a{background:var(--wm-relational);}
.wm-coordination a{background:var(--wm-coordination);}
.wm-normative a{background:var(--wm-normative);}
/* フィルタチップ上のワークモード色アクセント */
.chip.wm-math{border-color:var(--wm-math);}
.chip.wm-tacit{border-color:var(--wm-tacit);}
.chip.wm-creative{border-color:var(--wm-creative);}

/* ---- ブログリスト ---- */
.blog-list{list-style:none;padding:0;margin:18px 0 0;}
.blog-list li{padding:14px 0;border-bottom:1px solid var(--line);}
.blog-list li a{display:flex;justify-content:space-between;gap:12px;text-decoration:none;color:inherit;align-items:baseline;}
.blog-title{font-weight:600;}
.blog-meta{font-size:.8rem;color:var(--muted);white-space:nowrap;}

section h2{font-size:1.25rem;margin:40px 0 4px;padding-bottom:8px;border-bottom:2px solid var(--ink);display:inline-block;}
.empty{color:var(--muted);font-size:.9rem;margin-top:16px;}

/* ---- 相互関係チップ（職種⇔ワークモード） ---- */
.related-modes,.related-occs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0 4px;}
.related-label{font-size:.85rem;color:var(--muted);margin-right:4px;}
.rel-chip{display:inline-block;font-size:.84rem;padding:5px 13px;border-radius:999px;text-decoration:none;border:1px solid var(--line);color:var(--ink);background:#fff;transition:.15s;}
.rel-chip:hover{transform:translateY(-1px);}
.rel-chip.is-core{font-weight:700;}
/* ワークモード色を枠線に */
.rel-chip.wm-math{border-color:var(--wm-math);color:var(--wm-math);}
.rel-chip.wm-tacit{border-color:var(--wm-tacit);color:var(--wm-tacit);}
.rel-chip.wm-creative{border-color:var(--wm-creative);color:var(--wm-creative);}
.rel-chip.wm-relational{border-color:var(--wm-relational);color:var(--wm-relational);}
.rel-chip.wm-coordination{border-color:var(--wm-coordination);color:var(--wm-coordination);}
.rel-chip.wm-normative{border-color:var(--wm-normative);color:var(--wm-normative);}
.rel-chip.occ{border-color:var(--accent);color:var(--accent);}
.rel-chip.is-core.wm-math{background:var(--wm-math);color:#fff;}
.rel-chip.is-core.wm-tacit{background:var(--wm-tacit);color:#fff;}
.rel-chip.is-core.wm-creative{background:var(--wm-creative);color:#fff;}
.rel-chip.is-core.occ{background:var(--accent);color:#fff;}

/* =========================================================
 * コンテンツ分類パネル（職種定義ベース）
 *   会計士  ◎数理的なはたらき ○規範・判断
 *   税理士  ◎数理的なはたらき
 * =======================================================*/
.cls-panel{margin:14px 0 6px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;}
.cls-occs{display:flex;flex-direction:column;gap:10px;}
.cls-occ-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.cls-occ-name{font-weight:700;font-size:.95rem;color:var(--ink);text-decoration:none;padding:3px 12px;background:#eef2f8;border-radius:8px;min-width:84px;text-align:center;}
.cls-occ-name:hover{background:#e2e9f3;}
.cls-wm-list{display:flex;flex-wrap:wrap;gap:6px;}
.cls-wm{font-size:.82rem;padding:3px 12px;border-radius:999px;text-decoration:none;border:1.5px solid;display:inline-block;}
.cls-wm.wm-math{border-color:var(--wm-math);color:var(--wm-math);}
.cls-wm.wm-tacit{border-color:var(--wm-tacit);color:var(--wm-tacit);}
.cls-wm.wm-creative{border-color:var(--wm-creative);color:var(--wm-creative);}
.cls-wm.wm-relational{border-color:var(--wm-relational);color:var(--wm-relational);}
.cls-wm.wm-coordination{border-color:var(--wm-coordination);color:var(--wm-coordination);}
.cls-wm.wm-normative{border-color:var(--wm-normative);color:var(--wm-normative);}
/* ◎中核=塗りつぶし / ○関連=枠線のまま */
.cls-wm.is-core.wm-math{background:var(--wm-math);color:#fff;}
.cls-wm.is-core.wm-tacit{background:var(--wm-tacit);color:#fff;}
.cls-wm.is-core.wm-creative{background:var(--wm-creative);color:#fff;}
.cls-wm.is-core.wm-relational{background:var(--wm-relational);color:#fff;}
.cls-wm.is-core.wm-coordination{background:var(--wm-coordination);color:#fff;}
.cls-wm.is-core.wm-normative{background:var(--wm-normative);color:#fff;}
.cls-none{font-size:.78rem;color:var(--muted);}

/* カード内のコンパクト版 */
.app-card .cls-panel{margin:8px 16px 0;padding:8px 10px;}
.app-card .cls-occ-name{font-size:.82rem;padding:2px 9px;min-width:0;}
.app-card .cls-wm{font-size:.74rem;padding:2px 9px;}

/* ---- アプリ詳細 ---- */
.app-embed{margin:24px 0;}
.app-custom-cta{margin-top:48px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:16px;text-align:center;}
.app-custom-cta .price{font-weight:700;font-size:1.1rem;margin:10px 0 18px;}
.btn-primary{display:inline-block;background:var(--accent);color:#fff;padding:12px 28px;border-radius:10px;text-decoration:none;font-weight:600;}
.btn-primary:hover{filter:brightness(1.08);}

/* =========================================================
 * TOPページ: 二軸対等併置
 * =======================================================*/
.erabazu-home .hero{text-align:center;padding:48px 20px 28px;}
.erabazu-home .hero h1{font-size:2.3rem;}
.erabazu-home .hero p{color:var(--muted);max-width:560px;margin:8px auto 0;}

.two-axis{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1040px;margin:32px auto;padding:0 20px;}
@media(max-width:760px){.two-axis{grid-template-columns:1fr;}}
.axis-col{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;}
.axis-col h2{font-size:1.3rem;margin:0 0 4px;border:0;}
.axis-col .axis-sub{font-size:.85rem;color:var(--muted);margin:0 0 16px;}
.axis-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.axis-list a{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:inherit;transition:.15s;}
.axis-list a:hover{border-color:var(--accent);background:#fafcff;}
.axis-list .count{font-size:.78rem;color:var(--muted);}
/* ワークモード列は色の点で識別 */
.axis-mode .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:8px;}