/* 写し元: デモ article_keiri-daiko.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}


/* 2列: 本文856 + サイドバー352 */
.twocol{display:flex;gap:40px;width:1248px;margin:0 0 0 112px}
.art{width:856px;flex:none}
.side{width:352px;flex:none;padding:16px 0 0 16px}
.diag{margin-top:16px;width:320px;border:1px solid #E5E5E5;padding:16px 12px;position:sticky;top:224px}
.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)}

.art h1{font-size:28px;font-weight:700;line-height:42px;color:#333333;margin-top:16px}
.art .date{font-size:12px;line-height:19.2px;color:#666666}
.art p{font-size:16px;line-height:32px;margin-top:24px}
.art .lead{margin-top:24px}
.art h2{font-size:24px;font-weight:700;line-height:36px;background:#F6F5FC;padding:4px 8px;margin:52px 0 12px}
.art h2+p{margin-top:0}
.art h3{font-size:20px;font-weight:700;line-height:30px;margin:32px 0 8px}
.art h3:after{content:none}
.art h4{display:flex;gap:8px;font-size:18px;font-weight:700;line-height:27px;margin:24px 0 8px}
.art h4:before{content:"";width:4px;flex:none;background:#8447E1}
.art h3+p{margin-top:0}
.art ul{margin-top:24px;padding-left:24px;font-size:16px;line-height:32px}
.art mark{background:linear-gradient(#fff,#fff 65%,#F9C6DA 65%,#F9C6DA);font-weight:700;color:inherit}
.art .fig{margin-top:24px;width:856px;height:499px;background:#E9EAEE}
.art table{width:856px;border-collapse:collapse;margin-top:24px;font-size:14px;line-height:22.4px}
.art th,.art td{border:1px solid #E5E5E5;padding:12px 16px;text-align:left;vertical-align:top}
.art th{background:#F6F5FC;font-weight:700}
.toc{margin-top:24px;border:1px solid #E5E5E5;border-radius:8px;padding:24px 24px 36px;background:#fff}
.toc b{display:block;font-size:20px;font-weight:700;line-height:30px}
.toc ol{list-style:none;margin-top:12px}
.toc li{font-size:14px;line-height:18.2px;padding:5px 0}
.toc li.c{padding-left:36px}
.toc a{color:#8447E1}
.toc .all{margin-top:32px;font-size:16px;line-height:24px}
.cbox{margin-top:24px;width:856px;background:#F6F5FC;border-radius:16px;padding:24px 40px 32px;text-align:center}
.cbox .il .ph{width:120px;height:60px;background:#E9EAEE;margin:0 auto;border-radius:4px}
.cbox .ct{font-size:16px;line-height:24px;padding-top:8px;font-weight:700}
.cbox .in{margin-top:16px;background:#fff;border-radius:8px;padding:16px 32px 24px}
.cbox .q{font-size:14px;font-weight:700;line-height:22px}
.cbox .yn{display:flex;justify-content:center;gap:24px;margin-top:16px}
.cbox .yn a{width:270px;height:69px;border:4px solid #8447E1;border-radius:8px;background:#fff;font-size:16px;line-height:61px;box-shadow:0 1px 2px rgba(6,16,26,.3),0 1px 3px 1px rgba(6,16,26,.15)}
/* 09-25 記事の箱＝発注8工程型（Codex画像・汎用）。地は画像側で塗ってあるので padding 0。角丸16はそのまま。※ .fig は写真の仮置き（灰色・高さ499px）なので使わない */
.cbox.ctaimg{display:block;padding:0;overflow:hidden}
.cbox.ctaimg img{display:block;width:100%;height:auto}
.svc{margin-top:24px;border:1px solid #E5E5E5;border-radius:8px;padding:24px;background:#fff}
.svc .st{display:flex;gap:20px;align-items:flex-start}
.svc .lg{width:100px;height:100px;border:1px solid #E5E5E5;border-radius:4px;background:#E9EAEE;color:#999999;font-size:12px;line-height:98px;text-align:center;flex:none}
.svc .nm{font-size:20px;font-weight:700;line-height:30px;margin-top:8px}
.svc .co{font-size:14px;line-height:22px}
.svc .src{font-size:12px;line-height:15px;color:#666666;margin-top:4px}
.svc .lb{font-size:12px;line-height:15px;color:#666666;margin-top:16px}
.svc .pr{display:flex;align-items:flex-end;gap:4px;margin-top:2px}
.svc .pr svg{width:20px;height:20px;margin-bottom:6px}
.svc .pr b{font-size:14px;font-weight:700;line-height:21px;padding-bottom:5px}
.svc .pr em{font-style:normal;font-size:24px;font-weight:700;line-height:36px}
.svc .pr span{font-size:14px;line-height:21px;padding-bottom:5px;margin-left:6px}
.svc .bd{display:flex;gap:6px;margin-top:8px}
.svc .bd span{height:22px;border-radius:9999px;padding:0 6.4px;font-size:12px;line-height:22px}
.svc .b1{background:#8447E1;color:#fff;font-weight:700}
.svc .b2{background:#F6F5FC}
.svc p{font-size:14px;line-height:22.4px;margin-top:12px}
.svc .ft{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;margin-top:4px}
.svc .ft div{font-size:12px;line-height:18px;padding:8px 0;border-bottom:1px solid #E5E5E5}
.svc .bt{display:flex;gap:24px;margin-top:24px}
.svc .bt a{width:367px;height:57px;border-radius:8px;font-size:16px;font-weight:700;line-height:53px;text-align:center;border:2px solid #8447E1}
.svc .bt .f{background:#8447E1;color:#fff}
.art .cond{margin-top:52px}
.art .cond h3{font-size:24px;line-height:36px;margin:0}
.art .cond .g{margin-top:16px}
.art .cond .g b{display:block;font-size:16px;font-weight:700;line-height:24px}
.art .cond .g a{font-size:14px;line-height:22px;color:#8447E1}
.art .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%)}

/* 記事の下の著者BOX: マイベストの記事の著者枠（my-best.com/1632 のガイド枠）の写し。帯の「ガイド」を「編集長」に、線の色だけジツゾウの配色 */
.aubox{margin-top:44px;border:1px solid #E5E5E5;border-radius:8px;padding:24px 28px 26px;background:#F6F5FC}
.aubox .ah{font-size:16px;font-weight:700;line-height:24px;color:#333333;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid #E5E5E5}
.aubox .row{display:flex;gap:22px}
.aubox figure{width:120px;flex:none;margin:0}
.aubox .ph{width:120px;height:120px;border-radius:9999px;display:block}
.aubox .cap{position:relative;bottom:12px;display:flex;flex-direction:column}
.aubox .cap span{display:flex;align-items:center;justify-content:center;height:20px;background:#333333;color:#fff;font-size:12px;font-weight:700;line-height:20px}
.aubox .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;position:relative;max-height:150px;overflow:hidden}
.aubox dt{font-size:12px;font-weight:700;line-height:20px;color:#666666}
.aubox dd{margin:0;display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700;line-height:33px}
.aubox .bd p{margin:0;font-size:14px;line-height:23px;color:#333333}
.aubox .more{position:absolute;right:0;top:127px;background:#F6F5FC;padding-left:2px;font-size:12px;line-height:18px;color:#999999;border:0;cursor:pointer;font-family:inherit}
.aubox .pl{display:inline-flex;align-items:center;gap:4px;margin-top:16px;font-size:12px;line-height:20px;color:#8447E1;text-decoration:none;font-weight:700}
/* 記事の中のCTA（2026-09-22 木村さん指示。相談の節と掲載企業の節を箱1つにまとめた） */
.artcta{margin-top:44px;background:#F6F5FC;border-radius:16px;padding:24px 28px 26px;text-align:center}
.artcta .t{font-size:20px;font-weight:700;line-height:1.45;color:#333333}
.artcta .s{margin-top:8px;font-size:14px;line-height:1.7;color:#333333}
.artcta .b{display:inline-flex;align-items:center;justify-content:center;margin-top:16px;min-width:300px;height:48px;padding:0 28px;background:linear-gradient(90deg,#CD1CFA 0%,#1E82BE 100%);color:#fff;font-size:16px;font-weight:700;border-radius:8px}
.aubox .row{display:flex;gap:12px}
.aubox figure{width:80px;flex:none;margin:0}
.aubox .ph{width:80px;height:80px;border-radius:9999px;display:block}
.aubox .cap{position:relative;bottom:10px;display:flex;flex-direction:column}
.aubox .cap span{display:flex;align-items:center;justify-content:center;height:18px;background:#333333;color:#fff;font-size:12px;font-weight:700;line-height:18px}
.aubox .cap i{display:block;height:2px;background:#8447E1}
.aubox .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;position:relative;max-height:100px;overflow:hidden}
.aubox.open .tx{max-height:none}
.aubox dl{margin:0}
.aubox dt{font-size:12px;font-weight:700;line-height:18px}
.aubox dd{margin:0;display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;line-height:24px}
.aubox dd a{color:#999999;font-size:20px;line-height:20px;text-decoration:none}
.aubox .bd p{margin:0;font-size:12px;line-height:18px}
.aubox .more{position:absolute;right:0;top:82px;background:#fff;padding-left:2px;font-size:12px;line-height:18px;color:#999999;border:0;cursor:pointer;font-family:inherit}
.aubox.open .more{display:none}
.aubox .pl{display:inline-flex;align-items:center;gap:4px;margin-top:16px;font-size:12px;line-height:18px;color:#999999;text-decoration:none}

.kimura-ph{background:#E9EAEE url(../img/editor/kimura.webp) 75.5% 37.5%/190% auto no-repeat}


/* 記事本文の流し込み（build_article_page.py）で足した分。本文の要素に型の見た目を当てるだけ */
.art .tw{margin-top:24px;overflow-x:auto}
.art .tw table{margin-top:0}
.art .tw th:last-child,.art .tw td:last-child{white-space:nowrap}
.art ul li{margin-top:4px}
/* 型のCSSに .art ol が無く、番号リストだけ余白も行間も外れていた（09-16）。.art ul と同じ値に揃える */
.art ol{margin-top:24px;padding-left:24px;font-size:16px;line-height:32px}
.art ol li{margin-top:8px}
.art ol li::marker{color:#8447E1;font-weight:700}
.art blockquote{margin-top:24px;border-left:4px solid #8447E1;background:#F6F5FC;padding:16px 24px;border-radius:0 8px 8px 0}
.art blockquote p{margin-top:12px;font-size:15px;line-height:28px}
.art blockquote p:first-child{margin-top:0}
.art blockquote footer{margin-top:12px;border-top:0;font-size:12px;line-height:19px;color:#666666}
.art blockquote a,.art p a,.art li a,.art td a{color:#8447E1;text-decoration:underline}
.svc h3{margin-top:0}
.svc table{width:100%;table-layout:fixed}
.svc th{width:150px}
.svc .tw th:last-child,.svc .tw td:last-child{white-space:normal;word-break:break-word}
.svc .shot{margin:12px 0 4px}
.svc .shot img{width:100%;height:auto;border:1px solid #E5E5E5;border-radius:4px}
.svc .shot figcaption{font-size:12px;line-height:19px;color:#666666;margin-top:6px}
.svc .shot figcaption a{color:#666666;text-decoration:underline}
.svc p{font-size:15px;line-height:28px}
/* 09-24 C型（とは記事）に足した2部品。写し元=HELP YOU「オンライン秘書のメリット・デメリット」（見出し帯＋中身の枠／H2直下の横長画像1枚）。色だけジツゾウの配色 */
.art .ptbox{margin-top:24px;border:2px solid #8447E1;border-radius:8px;overflow:hidden;background:#FFFFFF}
.art .ptbox .pt{background:#8447E1;color:#FFFFFF;font-weight:700;font-size:18px;line-height:28px;padding:12px 24px}
.art .ptbox .pb{padding:8px 24px 20px}
.art .ptbox.nt .pb{padding:12px 24px 20px}  /* 見出しなしで囲うだけの枠（09-24 木村さん） */
.art .ptbox .pb ul,.art .ptbox .pb ol{margin-top:8px}
.art .ptbox .pb li b{color:#8447E1;font-weight:700}
.art .ptbox .pb li{margin-top:10px}
.art .h2img{margin:24px 0 0}
.art .h2img img,.art .h2img .ph{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#E5E5E5}
/* 09-24 木村さん: 記事のサイドにCTAバナー2つ（写し元=company.html の .sbnr。画像は img/cta/side-*.png） */
.side .sbnr{position:sticky;top:136px;display:flex;flex-direction:column;gap:16px}
.side .sbnr a{display:block;border-radius:8px;overflow:hidden}
.side .sbnr img{display:block;width:100%;height:auto}
.art .case-photo{margin:12px 0 20px}
.art .case-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 30%;border-radius:4px}
.art .case-photo.fit img{object-fit:contain;background:#F6F5FC}
.art .case-photo figcaption{font-size:12px;line-height:19px;color:#666666;margin-top:6px}
.art .case-photo figcaption a{color:#666666;text-decoration:underline}
.art .ck{margin-top:24px;background:#FFFFFF;border:2px solid #8447E1;border-radius:8px;padding:20px 24px}  /* 09-24 木村さん決定A: 枠を紫2pxにして紫枠（.ptbox）とそろえる。中身の形は今のまま（デザイン部品表 5） */
.art .wk{margin-top:32px;border:1px solid #E5E5E5;border-radius:8px;overflow:hidden}   /* 2026-09-25 木村さん: 紫一色を抑える。帯グラデ・紫の太枠・下線をやめ、薄い面＋灰の枠線1種に */
.art .wk-t{margin:0;padding:4px 20px;background:#F6F5FC;color:#333;font-size:16px;line-height:32px;font-weight:700;border-bottom:1px solid #E5E5E5}
.art .wk-b{padding:20px}
.art .wk-b ul{margin:0;padding-left:0;list-style:none;font-size:16px;line-height:32px}
.art .wk-b li{margin-top:0;text-indent:-1em;padding-left:1em}
.art .wk-b li:before{content:"・"}
.art .wk-b a{color:#8447E1;text-decoration:none}
.art .wk-b a:hover{text-decoration:underline}
.art .wk + .lead{margin-top:32px}
.art .ck-t{margin:0;font-size:16px;line-height:28px;font-weight:700}
.art .ck ul{margin-top:12px;padding-left:22px}
.art .ck li{font-size:15px;line-height:28px;margin-top:6px}
.art .ck li:first-child{margin-top:0}
.art .ck li a{color:#8447E1;text-decoration:underline}
.art .eyecatch{margin-top:64px}
.art .eyecatch img{display:block;width:100%;height:auto}
.art .eyecatch + .lead{margin-top:48px}
.art .article-meta{font-size:12px;line-height:20px;color:#666666;margin-top:40px}