/* 写し元: デモ companies.html の style タグをそのまま（scripts/sync_theme_css.py が書く。手で直さない） */
/* AI最強ナビ カテゴリページの写し（サイト構築/research/写し元_AI最強ナビ/構成_カテゴリ_20260914.md の数値どおり）。言葉だけジツゾウ。色だけITreview（トップと同じ置換表）。ヘッダー・フッターはトップと同じ */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Schibsted Grotesk","Noto Sans JP","Hiragino Sans",sans-serif;color:#333333;background:#fff;font-size:16px;line-height:1.5;min-width:1440px}
a{color:inherit;text-decoration:none}
img{display:block}
.wrap{width:1280px;margin:0 auto}
/* 0 ヘッダー: 15:16版（ITreviewのヘッダー写し。高さ64・地は白・検索窓・ナビ・ボタン） */
.head{height:64px;display:flex;align-items:center}
.logo{display:flex;flex-direction:column;justify-content:center;min-width:142px;height:40px;white-space:nowrap}
.logo b{font-size:24px;line-height:28px;letter-spacing:.02em;color:#8447E1}
.logo small{font-size:12px;line-height:12px;color:#333333}
.logo{flex:none}
.logo img{display:block;height:28px;width:auto}
.f1 .logo{height:auto}
.f1 .logo img{height:64px}
.search{margin-left:24px;width:312px;flex:none;height:48px;background:#F6F5FC;border-radius:9999px;display:flex;align-items:center;justify-content:space-between}
.search span{padding-left:15px;font-size:14px;font-weight:500;color:#333333;opacity:.6;white-space:nowrap}
.search i{width:50px;height:50px;display:flex;align-items:center;justify-content:center}
.search svg{width:20px;height:20px}
.search input{flex:1;min-width:0;height:100%;border:0;background:transparent;padding-left:15px;font:inherit;font-size:14px;font-weight:500;color:#333333;outline:none}
.search input::placeholder{color:#333333;opacity:.6}
.search button{width:50px;height:50px;border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.nav{margin-left:32px;margin-right:16px;display:flex;gap:20px}
.nav a{font-size:14px;font-weight:700;color:#333333;line-height:18px;white-space:nowrap}
.btn{margin-left:8px;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 14px;background:#8447E1;color:#fff;font-size:14px;font-weight:700;border-radius:8px;white-space:nowrap}
.btn.btn2{margin-left:auto;background:#fff;color:#8447E1;border:1.5px solid #8447E1}   /* 2026-09-22 木村さん: 検索窓を外し、ナビ2つ＋CTA2つ（掲載希望＝白、相談＝紫） */


/* 2 カテゴリ名の帯とタブ */
.catbar{padding:0 48px}
.catbar .cn{font-size:20px;font-weight:700;line-height:30px;padding:12px 32px;height:54px}
.tabs{display:flex;padding:4px 32px;border-bottom:1px solid #E5E5E5}
.tabs a{width:140px;height:44px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;font-weight:700;line-height:18.2px;border-radius:4px;padding:0 24px;color:#666666}
.tabs a.on{background:#F6F5FC;color:#333333}

/* 3 パンくず */
.crumb{padding:12px 0 20px;font-size:12px;line-height:15.6px}
.crumb a{color:#8447E1}
.crumb span{margin:0 6px;color:#666666}

/* 4+5 2列 */
.twocol{display:flex;gap:40px;width:1216px;margin:0 auto}
.side{width:320px;flex:none;padding-bottom:80px}
.main{width:856px;flex:none}
/* サイドバー */
.side .sh{font-size:18px;font-weight:700;line-height:27px;padding:16px}
.grp{border-top:1px solid #E5E5E5}
.grp .gh{display:flex;justify-content:space-between;align-items:center;height:48px;padding:12px 16px;font-size:16px;font-weight:700}
.grp .gh:after{content:"∧";font-size:12px;color:#8447E1}
.grp label{display:flex;align-items:center;gap:8px;height:32px;padding:0 16px;font-size:14px}
.grp label i{width:18px;height:18px;border:1.5px solid #666666;border-radius:4px;flex:none}
.grp label i.r{border-radius:50%}
.grp label i.on{border-color:#8447E1;background:radial-gradient(#8447E1 45%,#fff 50%)}
.grp label .n{margin-left:auto;font-size:12px;color:#666666}
.side .sbtn{display:block;width:320px;height:57px;border:1px solid #E5E5E5;border-radius:8px;font-size:18px;font-weight:700;line-height:53px;text-align:center;background:#fff;margin-top:12px}
.toc{margin-top:80px;padding-left:16px;display:flex;flex-direction:column;gap:16px}
.toc b{font-size:20px;font-weight:700;line-height:30px}
.toc a{font-size:14px;line-height:18px;display:block}
.diag{margin-top:16px;width:320px;border:1px solid #E5E5E5;padding:16px 12px}
.diag .dt{font-size:16px;font-weight:700;line-height:24px;text-align:center}
.diag .in{margin-top:12px;border:1px solid #E5E5E5;border-radius:8px;padding:16px 10px;text-align:center}
.diag .in b{display:block;font-size:20px;font-weight:700;line-height:26px}
.diag .in small{display:block;font-size:12px;line-height:16px;margin-top:2px}
.diag .in a{display:block;width:272px;height:74px;margin:12px auto 0;border:4px solid #8447E1;border-radius:8px;font-size:20px;font-weight:700;line-height:66px;box-shadow:0 1px 2px rgba(6,16,26,.3),0 1px 3px 1px rgba(6,16,26,.15)}
/* 本体 */
.main .mt{font-size:28px;font-weight:700;line-height:42px;margin-top:16px}
.main h1{font-size:14px;font-weight:700;line-height:20px;color:#666666}
.main .desc{font-size:14px;line-height:22.4px;margin-top:4px}
.acc{margin-top:12px}
.acc details{border-top:1px solid #E5E5E5}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;height:38px;padding:8px;font-size:14px;font-weight:700;line-height:22.4px}
.acc summary:after{content:"∨";font-size:12px;color:#8447E1}
.acc details p{font-size:14px;line-height:22.4px;padding:0 8px 12px}
.h2s{font-size:20px;font-weight:700;line-height:30px;margin:20px 0 8px}
.h2s.l{margin:24px 0 0}
.h2b{font-size:28px;font-weight:700;line-height:42px;margin-top:52px}
.tscroll{overflow-x:auto}
.cmp{border-collapse:collapse;width:100%;table-layout:fixed}
.cmp th,.cmp td{border:1px solid #E5E5E5;padding:1px;text-align:left;font-size:14px;line-height:22px;vertical-align:top;width:196px}
.cmp th{height:210px;text-align:center;padding:16px 12px;font-weight:700;font-size:16px;line-height:24px}
.cmp .tlg{width:96px;height:60px;margin:0 auto;background:#E9EAEE;color:#999999;font-size:12px;font-weight:400;line-height:60px}
.cmp .tnm{margin-top:10px}
.cmp .tbtn{display:inline-block;margin-top:10px;width:150px;height:28px;background:#8447E1;color:#fff;font-size:12px;font-weight:700;line-height:28px;border-radius:4px}
.cmp .tp td{height:75px;padding:12px 16px}
.cmp .tp b{font-size:14px;font-weight:700}
.cmp .tp em{font-style:normal;font-size:18px;font-weight:700;margin:0 4px}
.cmp .tp span{font-size:14px;margin-left:8px}
.cmp .tf td{height:68px;padding:8px 16px}
.cmp .tr2 td{height:87px;padding:12px}
.cmp .tr2 small{display:block;font-size:12px;color:#666666}
.cmp .tr2 b{font-size:14px;font-weight:700}
.cmp .ti td{height:98px;padding:8px 12px}
.cmp .ti .ph{width:172px;height:80px;background:#E9EAEE}
.cmp .tc td{height:123px;padding:8px 16px}
.cmp .tc a{color:#8447E1;display:block;margin-top:2px}
.cbtn{display:inline-block;min-width:300px;padding:0 24px;position:relative;left:50%;transform:translateX(-50%);height:48px;margin:20px auto 0;background:#8447E1;color:#fff;font-size:16px;font-weight:700;line-height:48px;text-align:center;border-radius:4px}
.cnt{font-size:14px;line-height:22.4px;color:#666666;height:36px;padding-top:6px}
.cnt span{margin-right:8px}
.tg{display:flex;flex-wrap:wrap;gap:8px}
.tg a{font-size:12px;line-height:15.6px;background:#F6F5FC;border:1px solid #E5E5E5;border-radius:16px;padding:6px 12px}
/* 2026-10-09 取材記事の一覧カード。写し元: YOUTRUST Studio「抜擢」一覧（youtrust.jp/studio/features/batteki）を1440pxで実測。
   実測: カード244×272・枠1px #EAF0EF・角丸8・画像242×127（cover）・本文padding8・部品の間隔8・種別の行14px・タイトル14px/700/21px・3行で切る・下段14px rgba(0,0,0,.6)・並びはflex-wrap 列間16・行間32・カード全体がリンク
   ジツゾウでは本文幅856pxに2列で置くので、箱だけ420px（×1.72）に拡大。画像は手持ちのアイキャッチの比率（1672/941）。文字は拡大せず社名14・タイトル18（元のキャッチ .hl と同じ）。色は枠 #E5E5E5・薄い字 #666666 */
#coList{display:flex;flex-wrap:wrap;gap:32px 16px;margin-top:16px}
.card{display:block;width:420px;border:1px solid #E5E5E5;border-radius:8px;overflow:hidden;background:#fff;color:#333333}
.card .ph{width:100%;aspect-ratio:1672/941;background:#E9EAEE}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.card .cb{display:flex;flex-direction:column;gap:14px;padding:14px}
.card .kd{font-size:14px;line-height:20px;font-weight:700}
.card .kd span{font-weight:400;color:#666666;margin-left:8px}
.card .tt{font-size:18px;font-weight:700;line-height:1.55;min-height:84px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .ft{display:flex;align-items:center;gap:6.4px;font-size:14px;line-height:22px;color:#666666}
.card .b1{height:22px;border-radius:9999px;padding:0 6.4px;font-size:12px;line-height:22px;background:#8447E1;color:#fff;font-weight:700}
.pager{display:flex;justify-content:center;gap:12px;margin-top:24px;font-size:14px}
.pager .on{color:#8447E1;font-weight:700}
.know h3{font-size:20px;font-weight:700;line-height:30px;margin-top:24px}
.know h3:after{content:none}
.know p{font-size:14px;line-height:22.4px;margin-top:12px}
.cond .g{margin-top:16px}
.cond .g b{display:block;font-size:16px;font-weight:700;line-height:24px}
.cond .g a{font-size:14px;line-height:22px;color:#8447E1}
.cond .g i{font-style:normal;margin:0 6px;color:#666666}

/* 7 フッター */
footer{margin-top:80px;border-top:1px solid #333333}
.f1{display:flex;justify-content:space-between;padding:24px 0}
.f1 .cols{display:flex;gap:80px}
.f1 h4{font-size:16px;font-weight:700;line-height:24px;margin-bottom:12px}
.f1 .two{display:grid;grid-template-columns:181px 181px;column-gap:8px;row-gap:8px}
.f1 a{font-size:14px;line-height:22px;display:block}
.f1 .one a{margin-bottom:8px}
.f2{height:102px}
.f3{height:102px;text-align:center;padding-top:24px}
.f3 a{font-size:14px;margin:0 12px}
.f3 .cp{font-size:12px;margin-top:12px}

/* === 色だけPIVOT（pivot.inc 実測 2026-09-15）。構造・文言・寸法は触らない === */
/* 白地 #FFF／薄い面 #F6F5FC／文字 #333／ブランド面 #8447E1（ロゴ帯の中間色）／主役ボタンとロゴはロゴ帯そのもの #CD1CFA→#1E82BE */
.logo b{background:linear-gradient(90deg,#CD1CFA 0%,#1E82BE 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn,.fv .cta,.band .yn a,.cbtn,.card .cta,.cmp .tbtn,.news .badge,.card .b1{background:linear-gradient(90deg,#CD1CFA 0%,#1E82BE 100%);color:#fff}
.h2::before{content:"";width:20px;height:20px;flex:none;background:url(../img/logo/heading-mark-black.svg) center/20px 20px no-repeat;border-radius:0}
.fv .story span:after{background:linear-gradient(90deg,#CD1CFA 0%,#1E82BE 100%)}

[hidden]{display:none!important}
/* デモ確認用の表示切り替え（本番にはない） */
.demobar{background:#333333;color:#fff;font-size:12px;line-height:32px;text-align:center}
.demobar a{color:#fff;margin:0 6px;padding:2px 10px;border:1px solid #666666;border-radius:9999px}
.demobar a.on{background:#fff;color:#333333;border-color:#fff}
/* 絞り込みの動き */
.grp label{cursor:pointer;user-select:none}
.grp label.on i{background:#8447E1;border-color:#8447E1;box-shadow:inset 0 0 0 3px #fff}
.tg a.on{background:#8447E1;border-color:#8447E1;color:#fff}
.empty{margin-top:16px;border:1px solid #E5E5E5;border-radius:8px;padding:24px;font-size:14px;line-height:22.4px}
.empty .cbtn{margin-top:16px}

/* ノウハウ記事の枠（トップ「ノウハウ記事を見つける」のおすすめ記事の部品。カテゴリーの本文幅856に3枚並ぶ幅） */
.reco{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}
.reco a{width:274px}
.reco .ph{width:274px;height:182px;background:#E9EAEE;border-radius:8px}
.reco .t{margin-top:8px;font-size:14px;font-weight:700;line-height:21px}
.reco .c{margin-top:4px;font-size:12px;line-height:19px}

/* 一覧ページ（記事一覧・取材企業一覧・検索結果）。カテゴリーページの型をカテゴリー指定なしで使う */
.main h1.mt{font-size:28px;font-weight:700;line-height:42px;color:#333333;margin-top:16px}
.artl{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
.artl a{display:flex;gap:16px;min-height:70px}
.artl .ph{width:105px;height:70px;background:#E9EAEE;border-radius:4px;flex:none}
.artl .t{font-size:14px;font-weight:700;line-height:22px}
.artl .d{font-size:12px;color:#666666;line-height:19px;margin-top:3px}
.corow{display:flex;gap:16px;border:1px solid #E5E5E5;border-radius:8px;padding:16px;margin-top:16px}
.corow .lg{width:80px;height:80px;border:1px solid #E5E5E5;border-radius:4px;background:#E9EAEE;color:#999999;font-size:12px;line-height:78px;text-align:center;flex:none}
.corow .nm{font-size:18px;font-weight:700;line-height:27px}
.corow .co{font-size:12px;color:#666666;line-height:20px}
.corow .sm{font-size:14px;line-height:22.4px;margin-top:4px}
#catHits{margin-top:8px}
.nohit{margin-top:16px;font-size:14px;line-height:22.4px}
/* ===== 一覧の型（プロベルの絞り込み一覧の写し。2026-09-22 木村さん指示。左のカテゴリーにチェックで出す/出さないを切り替える） ===== */
.side .sbox{border:1px solid #E5E5E5;border-radius:8px;background:#fff;padding:18px 0 6px}
.side .sbox .sh{font-size:16px;font-weight:700;line-height:24px;text-align:center;padding:0 16px 14px}
.side .sbox .grp{border-top:0}
.side .sbox label{display:flex;align-items:center;gap:10px;min-height:46px;height:auto;padding:11px 20px;border-top:1px solid #E5E5E5;font-size:14px;line-height:1.5;cursor:pointer}
.side .sbox label i{width:18px;height:18px;border:1.5px solid #999999;border-radius:4px;flex:none;position:relative;background:#fff;box-shadow:none}
.side .sbox label.on i{border-color:#8447E1;background:#8447E1;box-shadow:none}
.side .sbox label.on i:after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.side .sbox label.on .l{color:#8447E1;font-weight:700}
.side .sbox label .n{margin-left:auto;font-size:12px;color:#999999}
.side .sbox label.off{color:#CCCCCC;cursor:default}
.side .sbox label.off i{border-color:#E5E5E5;background:#F6F5FC}
.side .sbox label.off .n{color:#CCCCCC}
.side .sclear{display:block;width:100%;margin-top:12px;height:42px;border:1px solid #E5E5E5;border-radius:8px;background:#fff;font:inherit;font-size:12px;color:#666666;cursor:pointer}
.artl{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px;margin-top:20px}
.artl a{display:block;min-height:0}
.artl .ph{width:100%;height:143px;background:#E9EAEE;border-radius:8px;overflow:hidden;flex:none}
.artl .ph img{width:100%;height:100%;object-fit:cover;display:block}
.artl .t{margin-top:10px;font-size:14px;font-weight:700;line-height:1.55}
.artl .m{margin-top:6px;font-size:12px;color:#666666;line-height:1.5}
.ldesc{margin-top:6px;font-size:14px;line-height:1.6;color:#666666}
.cnt{height:auto;padding-top:0;margin-top:6px;font-size:14px;color:#666666}

/* サイドのCTA枠（2026-09-23 木村さん。プロベルのサイドバナー2枚の写し。中身は後で入れる。スクロールしても付いてくる） */
.sbnr{position:sticky;top:80px;display:flex;flex-direction:column;gap:16px;margin-top:24px}
.sbnr a{display:flex;align-items:center;justify-content:center;background:#E9EAEE;border-radius:8px;font-size:12px;color:#666666;text-align:center}
.sbnr a{background:none;border-radius:0}
.sbnr img{display:block;width:100%;height:auto}