/* ============================================
   日本語AIラボ デザインシステム
   紺(#1e3a56)×白×警告色は赤のみ。編集・出版系の文法。
   ============================================ */
:root{
  --ink:#2b2b28;        /* 本文: わずかに暖かい黒 */
  --navy:#1e3a56;       /* ブランド色: 濃紺 */
  --navy-deep:#152a40;
  --red:#c2371f;        /* 価格・1位・CTAのみに使う */
  --silver:#5c6b7a;     /* 2位 */
  --bronze:#8a6d3b;     /* 3位 */
  --muted:#716e67;
  --line:#d9d6cf;       /* 暖色系の罫線 */
  --line-light:#e8e6e0;
  --ground:#f4f3ef;     /* ページ地: 生成り */
  --paper:#ffffff;
  --paper-warm:#faf9f6; /* 結論ボックス等 */
  --ok:#2c7a4b; --bad:#c2371f;
  --serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","BIZ UDMincho",serif;
  --gothic:"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic","Yu Gothic Medium",Meiryo,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--gothic);color:var(--ink);background:var(--ground);line-height:1.9;font-size:15.5px}
.container{max-width:1040px;margin:0 auto;padding:0 20px}
a{color:var(--navy);text-decoration:underline;text-decoration-color:#b9c4cf;text-underline-offset:3px}
a:hover{color:var(--red);text-decoration-color:var(--red)}

/* ---- 天面ストライプ・アイコン・挿絵 ---- */
.selvage{height:5px;background:repeating-linear-gradient(90deg,var(--navy) 0 34px,var(--red) 34px 42px)}
.cat-icon svg,.cat-icon-svg{display:block}
.card .cat-icon svg{width:36px;height:36px;margin-bottom:2px}
.cat-head{display:flex;align-items:center;gap:14px;margin:6px 0 14px}
.cat-head .cat-icon svg{width:50px;height:50px;flex:0 0 auto}
.cat-head h1{margin:0}
.h2-icon svg{width:20px;height:20px;display:inline-block;vertical-align:-3px;margin-right:8px}
.hero-art{flex:0 0 300px}
.hero-art svg{width:100%;height:auto;display:block}
.hero-text{flex:1;min-width:0}

/* ---- ヘッダー ---- */
.site-header{background:var(--paper);border-bottom:3px double var(--line)}
.header-inner{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;padding:14px 20px 10px;gap:6px}
.logo{font-family:var(--serif);font-weight:600;font-size:1.35rem;letter-spacing:.06em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center}
.logo::before{content:"";width:.62em;height:.62em;background:var(--red);display:inline-block;margin-right:.45em;transform:translateY(-1px)}
.logo:hover{color:var(--navy)}
.nav{display:flex;flex-wrap:wrap;align-items:center}
.nav a{font-size:.8rem;color:var(--ink);text-decoration:none;padding:2px 10px;border-left:1px solid var(--line);line-height:1.3}
.nav a:first-child{border-left:none}
.nav a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}

/* ---- 本文共通 ---- */
main{padding:30px 20px 64px}
h1{font-family:var(--serif);font-weight:600;font-size:1.65rem;line-height:1.5;letter-spacing:.02em;margin:6px 0 14px}
h2{font-family:var(--serif);font-weight:600;font-size:1.28rem;letter-spacing:.03em;margin:44px 0 16px;padding-bottom:8px;border-bottom:2px solid var(--navy);position:relative}
h2::after{content:"";position:absolute;left:0;bottom:-2px;width:5rem;height:2px;background:var(--red)}
h3{font-size:1.02rem;font-weight:700;margin:26px 0 10px}
p{margin:10px 0}
.breadcrumb{font-size:.78rem;color:var(--muted);margin-bottom:8px}
.breadcrumb a{color:var(--muted)}
.updated-badge{display:block;font-size:.78rem;color:var(--muted);margin-bottom:4px}
.updated-badge::before{content:"更新日";background:var(--navy);color:#fff;font-size:.68rem;padding:1px 6px;margin-right:8px;letter-spacing:.08em}

/* ---- 順位バッジ(絵文字の代替) ---- */
.rank-badge{display:inline-block;min-width:2.9em;text-align:center;font-size:.74rem;font-weight:700;color:#fff;background:var(--silver);padding:2px 7px;letter-spacing:.05em;vertical-align:1px;margin-right:6px}
.rank-badge.r1{background:var(--red)}
.rank-badge.r2{background:var(--silver)}
.rank-badge.r3{background:var(--bronze)}

/* ---- トップの導入部(旧hero) ---- */
.hero{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--navy);padding:30px 30px 22px;margin-bottom:10px;display:flex;align-items:center;gap:30px}
.hero h1{font-size:1.75rem;margin-top:0}
.hero p{color:#4b4a45;max-width:44em}
.stats{display:flex;gap:0;flex-wrap:wrap;margin-top:14px;font-size:.82rem;color:var(--muted)}
.stats span{padding:0 14px;border-left:1px solid var(--line)}
.stats span:first-child{padding-left:0;border-left:none}

/* ---- 結論ボックス ---- */
.answer-box{background:var(--paper-warm);border:1px solid var(--line);padding:18px 22px;margin:18px 0;position:relative}
.answer-box .label{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;color:#fff;background:var(--navy);padding:2px 10px;margin-bottom:8px}
.answer-box p{margin:4px 0}

.notice{background:#fdf3f1;border:1px solid #e5b8ae;color:#8c2a18;padding:12px 18px;margin:16px 0;font-size:.9rem}

/* ---- カード ---- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:20px 0}
.card{background:var(--paper);border:1px solid var(--line);padding:16px 18px;display:flex;flex-direction:column;gap:5px;text-decoration:none}
.card:hover{border-color:var(--navy);color:inherit}
.card h3{margin:0;font-size:1rem;color:var(--navy)}
.card .tagline{font-size:.82rem;color:#4b4a45}
.card .meta{font-size:.78rem;color:var(--red);margin-top:2px}
.badge{display:inline-block;font-size:.7rem;padding:1px 7px;background:var(--paper-warm);border:1px solid var(--line);color:var(--muted);margin-right:4px}
.badge.dead{background:#fdf3f1;border-color:#e5b8ae;color:var(--bad)}

/* ---- 表 ---- */
.table-wrap{overflow-x:auto;background:var(--paper);border:1px solid var(--line);margin:16px 0}
table{border-collapse:collapse;width:100%;font-size:.86rem;min-width:640px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line-light);text-align:left;vertical-align:top;line-height:1.7}
td+td,th+th{border-left:1px solid var(--line-light)}
thead th{background:#eef0f3;color:var(--navy);font-size:.78rem;letter-spacing:.04em;white-space:nowrap;cursor:pointer;user-select:none;border-bottom:2px solid var(--navy)}
thead th:hover{background:#e3e7ec}
tbody tr:nth-child(even){background:#fbfaf8}
td.num{white-space:nowrap;color:var(--red);font-weight:700;font-variant-numeric:tabular-nums}
.mark-ok{color:var(--ok);font-weight:700}
.mark-mid{color:var(--bronze);font-weight:700}
.mark-low{color:var(--muted)}

/* ---- メリット/デメリット ---- */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.pros,.cons{background:var(--paper);border:1px solid var(--line);padding:14px 18px}
.pros h3,.cons h3{margin:0 0 10px;font-size:.9rem;padding-bottom:6px;border-bottom:1px solid var(--line-light)}
.pros h3{color:var(--ok)}
.cons h3{color:var(--bad)}
.pros ul,.cons ul{list-style:none;font-size:.88rem}
.pros li,.cons li{margin:6px 0;padding-left:1.2em;position:relative}
.pros li::before{content:"○";color:var(--ok);position:absolute;left:0;font-weight:700}
.cons li::before{content:"×";color:var(--bad);position:absolute;left:0;font-weight:700}

/* ---- CTA(公式サイトボタン) ---- */
.cta{display:inline-block;background:var(--red);color:#fff;font-weight:700;font-size:1.02rem;padding:13px 40px;border-radius:4px;text-decoration:none;box-shadow:0 3px 0 #8c2712;letter-spacing:.04em}
.cta:hover{background:#a92e18;color:#fff;transform:translateY(1px);box-shadow:0 2px 0 #8c2712}
.cta.sub{background:var(--paper);color:var(--navy);border:1px solid var(--navy);box-shadow:0 3px 0 var(--navy)}
.cta-note{font-size:.76rem;color:var(--muted)}

/* ---- FAQ ---- */
.faq{margin:16px 0;background:var(--paper);border:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-light)}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;font-weight:600;padding:13px 16px 13px 44px;font-size:.92rem;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:14px;top:13px;font-family:var(--serif);font-weight:700;color:#fff;background:var(--navy);width:20px;height:20px;line-height:20px;text-align:center;font-size:.72rem}
.faq details p{padding:0 16px 14px 44px;font-size:.88rem;color:#4b4a45}

/* ---- スペック表(定義リスト) ---- */
.spec-list{list-style:none;padding:0;font-size:.9rem;background:var(--paper);border:1px solid var(--line)}
.spec-list li{display:flex;gap:14px;padding:9px 14px;border-bottom:1px solid var(--line-light)}
.spec-list li:last-child{border-bottom:none}
.spec-list li:nth-child(even){background:#fbfaf8}
.spec-list .k{flex:0 0 128px;color:var(--navy);font-size:.8rem;font-weight:600;padding-top:2px}

/* ---- ランキングカード ---- */
.rank-card{background:var(--paper);border:1px solid var(--line);padding:20px 24px;margin:14px 0}
.rank-card.first{border:2px solid var(--red)}
.rank-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:8px}
.medal{flex:0 0 auto;font-family:var(--serif);font-weight:700;font-size:.95rem;color:#fff;background:var(--silver);width:52px;height:52px;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.medal.m1{background:var(--red)}
.medal.m2{background:var(--silver)}
.medal.m3{background:var(--bronze)}
.rank-title{margin:0;padding:0;border:none;font-family:var(--gothic);font-weight:700;font-size:1.15rem}
.rank-title::after{display:none}
.rank-sub{font-size:.8rem;color:var(--muted);margin:3px 0 0}

/* ---- まとめ枠・リンク群 ---- */
.vs-verdict{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--navy);padding:16px 22px;margin:16px 0}
.vs-verdict h3{margin-top:0}
.tag-links{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.tag-links a{font-size:.8rem;background:var(--paper);border:1px solid var(--line);padding:4px 12px;color:var(--ink);text-decoration:none}
.tag-links a:hover{border-color:var(--red);color:var(--red)}

/* ---- フッター ---- */
.site-footer{background:var(--navy-deep);color:#a8b4c0;font-size:.78rem;padding:30px 0;margin-top:48px;line-height:1.9}
.site-footer p{margin:6px 0}
.site-footer a{color:#d5dde4}
.footer-links{margin-bottom:14px}
.static-page h2{margin-top:30px}
.static-page ul{padding-left:1.4em;margin:8px 0}

@media(max-width:760px){
  .hero{flex-direction:column-reverse;align-items:stretch}
  .hero-art{flex:none;max-width:280px;margin:0 auto}
}
@media(max-width:640px){
  body{font-size:15px}
  .pros-cons{grid-template-columns:1fr}
  h1{font-size:1.3rem}
  .hero{padding:22px 18px}
  .hero h1{font-size:1.35rem}
  .spec-list .k{flex-basis:100px}
  .medal{width:44px;height:44px;font-size:.85rem}
  .cat-head .cat-icon svg{width:38px;height:38px}
}

/* ---- 用途別ガイド ---- */
.step-list{counter-reset:st;list-style:none;padding:0;margin:16px 0}
.step-list li{position:relative;background:var(--paper);border:1px solid var(--line);padding:16px 20px 16px 62px;margin:10px 0;font-size:.92rem;line-height:1.85}
.step-list li::before{counter-increment:st;content:counter(st);position:absolute;left:18px;top:16px;width:28px;height:28px;background:var(--navy);color:#fff;font-family:var(--serif);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.step-list li strong{font-size:1rem}
.offer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:14px 0}
.offer{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--bronze);padding:16px 18px}
.offer h3{margin:0 0 6px;font-size:1rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.offer p{font-size:.88rem;margin:6px 0}
.pr-tag{font-size:.66rem;font-weight:700;letter-spacing:.1em;background:var(--bronze);color:#fff;padding:1px 7px}
.rank-card .medal{font-size:.78rem;line-height:1.3;text-align:center;padding:4px}
@media(max-width:640px){.step-list li{padding-left:54px}}

.byline{font-size:.76rem;color:#8b98a5;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #2a3f57}
.byline a{color:#c3cedb}

/* ---- 職種別ページ(AI×キャリア) ---- */
.impact-table td:first-child{font-weight:600;color:var(--ink)}
.lv{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:2px 8px;white-space:nowrap;color:#fff;background:var(--silver)}
.lv.lv-replace{background:var(--red)}
.lv.lv-boost{background:var(--navy)}
.lv.lv-human{background:var(--ok)}
.lv.lv-new{background:var(--bronze)}
.path-list{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.path-list li{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--navy);padding:14px 18px}
.path-list .pname{display:block;font-weight:700;font-size:.96rem;color:var(--navy);margin-bottom:5px}
.path-list .pnote{font-size:.86rem;color:#4b4a45;line-height:1.8}
.job-lead{font-size:.95rem}
.career-note{background:var(--paper-warm);border-left:4px solid var(--navy);padding:14px 18px;margin:18px 0;font-size:.88rem;color:#4b4a45}

/* ---- 検証記事(一次情報) ---- */
.draft-banner{background:#fdf3f1;border:2px solid var(--red);padding:16px 20px;margin:0 0 18px;font-size:.9rem}
.draft-banner strong{display:block;font-size:1rem;color:var(--red);margin-bottom:6px}
.draft-banner ol{margin:8px 0 0 1.3em;font-size:.86rem;line-height:1.9}
.fill{background:#fff3d6;border-bottom:2px solid #d8a52a;padding:0 3px;color:#7a5a10;font-size:.92em}
.verify-box{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--navy);padding:4px 0;margin:16px 0}
.verify-box h3{margin:12px 20px 8px;font-size:.86rem;letter-spacing:.08em;color:var(--navy);border:none;padding:0}
.verify-box h3::after{display:none}
.verify-box .spec-list{border:none;margin:0}
.shot{margin:18px 0;background:var(--paper);border:1px solid var(--line);padding:12px}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line-light)}
.shot .placeholder{display:flex;align-items:center;justify-content:center;text-align:center;min-height:170px;background:repeating-linear-gradient(45deg,#f6f5f1 0 12px,#efeee9 12px 24px);border:1px dashed var(--line);color:var(--muted);font-size:.84rem;padding:20px;line-height:1.8}
.shot figcaption{font-size:.82rem;color:var(--muted);margin-top:8px;line-height:1.8}
.measure-table td:nth-child(2){font-weight:700;white-space:nowrap}
.review-meta{font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:18px 0}

/* ---- ページ見出しの挿絵 ---- */
.page-head{display:flex;align-items:center;gap:24px;margin:4px 0 20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.page-head-text{flex:1;min-width:0}
.page-head-text h1{margin:0}
.page-head-art{flex:0 0 288px}
.page-head-art svg,.art-svg{width:100%;height:auto;display:block}
.page-head .cat-icon{display:none}
.section-art{margin:18px 0;max-width:300px}
.section-art svg{width:100%;height:auto;display:block}
.art-row{display:flex;align-items:center;gap:26px;margin:18px 0}
.art-row .art-body{flex:1;min-width:0}
.art-row .art-fig{flex:0 0 260px}
.art-row .art-fig svg{width:100%;height:auto;display:block}
.card .art-thumb{margin:-2px 0 6px}
.card .art-thumb svg{width:100%;height:auto;display:block;border:1px solid var(--line-light)}
@media(max-width:860px){
  .page-head{flex-direction:column;align-items:stretch;gap:14px}
  .page-head-art{flex:none;max-width:300px;margin:0 auto}
  .art-row{flex-direction:column;align-items:stretch}
  .art-row .art-fig{flex:none;max-width:300px;margin:0 auto}
}