@charset "utf-8";
/* AI活用事例の個別ページ /ai-jirei/{slug} と、事例ナビへの導線（2026-09-14・③）
   器は tooldetail.css（td-*）。事例のカードは aijirei.css（jr-*）を /ai-jirei と同じ形で使う。
   ここには「個別ページに置いたときの上書き」だけを書く。決まり：面と余白で区切る／モノクロ＋水色1色／横スクロール0 */

/* カードを白いページの中に置く。.jrx の灰色の地と余白は使わない（色とフォントは /ai-jirei と同じ） */
.ai-td .jrx.jr-embed{background:transparent;padding:0;margin:0}
/* 2026-09-14 案A（2列のタイル）に合わせて、細い線で囲む上書きはやめた。カードは /ai-jirei と同じ見た目（aijirei.css） */
.ai-td .jr-embed .jr-list{gap:14px}
.ai-td .jr-embed .jr-name{font-size:16.5px}
.ai-td .jr-embed .jr-scroll{border:1px solid var(--td-line);border-radius:6px}

/* 近い切り口の一覧（tdl-g）は .ai-tdlist の変数を使うので、.ai-td の中でも同じ地の色を渡す */
.ai-td .tdl-g{--td-bg:#F4F7FA;margin:0 0 18px}
.ai-td .tdl-g a{font-size:14.5px}

/* 導入文（事例の中身から書いた文） */
.jp-intro p{margin:0 0 14px;font-size:15.5px;line-height:1.95;color:#1F2A36}
.jp-intro p:last-child{margin-bottom:0}

/* 41件目からの表 */
.jp-rest{margin:16px 0 0}
.jp-rest summary{cursor:pointer;padding:13px 16px;background:var(--td-hd);font-weight:700;font-size:14.5px;list-style:none}
.jp-rest summary::-webkit-details-marker{display:none}
.jp-rest summary span{font-weight:400;color:var(--td-sub);margin-left:6px}
.jp-rest summary::after{content:"＋";float:right;color:#888;font-weight:400}
.jp-rest[open] summary::after{content:"−"}
.jp-rest .jr-embed{margin-top:10px}
.jp-rest .td-note{margin:10px 0 0}
.jp-rest .td-note a{color:var(--td-key)}

/* 表の中のリンク（用途・ツール・職種のページへ） */
.ai-td .td-spec td a{color:var(--td-key);text-decoration:underline;text-underline-offset:2px}
.ai-td .td-spec td a:hover{color:var(--td-ink)}

/* 3ナビ（資格・副業・求人）の下の事例への入口。tdl-price は本来「注記のすぐ下」用で上の余白がマイナスなので戻す */
.jrp-cross .tdl-price{margin-top:14px}

/* 数字の表の「後」 */
.ai-td #td-num td.n b{color:var(--td-ink);font-weight:800}

/* ほかのナビ（4ナビの相互リンク）。個別ページの末尾と /ai-jirei の一覧の下に出る */
.jrp-navs{margin:34px 0 0;padding:18px 0 0;border-top:2px solid #0F1723}
.jrp-navs__t{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.1em;color:#66717D}
.jrp-navs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.jrp-navs li{margin:0;padding:0}
.jrp-navs a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:#F4F7FA;border-radius:8px;text-decoration:none;color:#0D1B2A;line-height:1.5}
.jrp-navs a b{font-size:15px;font-weight:800}
.jrp-navs a span{font-size:12px;font-weight:600;color:#5A6B7B}
.jrp-navs a:hover{background:#0D1B2A;color:#fff}
.jrp-navs a:hover span{color:#1AC2F1}
.ai-tdlist .jrp-navs{margin-top:10px}

/* 記事の下の「関連する活用事例」は既存の .ai-tend と同じ見た目（aitools-cta.css）。ツールDB導線と並ぶときの間だけ */
.jrp-tend{margin-top:22px}

@media(max-width:600px){
  .jp-intro p{font-size:15px}
  .jrp-navs ul{grid-template-columns:1fr}
}