@charset "utf-8";
/* ============================================================
   bizon 生成AI比較（ピラー）記事 専用スタイル
   https://www.ntt.com/etc/designs/nttcom/hq/jp/bizon/ai-compare/css/style.css
   ------------------------------------------------------------
   ChatGPT・Gemini・Claude・Copilot 比較記事（compare.html）の
   図版・ウィジェット・表組みなど、記事固有コンポーネントを集約。
   見出し(title-c2 等)・パンくず・ヘッダー/フッターは bizon 共通CSS に従う。
   クラス接頭辞：cmp-（汎用） で名前空間を分離。
   配色：navy #001F4E / red #CC0033 / gray #3C4043（共通トーン）。
   ※会社方針：4AIの優劣を断定する「◎○△の星取表」は掲示しない。
     使い分けは「得意領域の傾向」＋読者入力に応える診断ツールで提示する。
   ============================================================ */
.cmp-scope{font-family:"Meiryo","メイリオ",sans-serif;color:#222;}
.cmp-scope *{box-sizing:border-box;}

/* === 図タイトル（cmp-fig-title / wrap） ===================== */
.cmp-figwrap{margin:1.8em 0 !important;font-family:"Meiryo","メイリオ",sans-serif;}
.cmp-fig-title{font-weight:700 !important;color:#3C4043 !important;font-size:17px !important;text-align:center !important;margin:0 0 .3em !important;line-height:1.5 !important;}
.cmp-fig-sub{color:#666 !important;font-size:12.5px !important;text-align:center !important;margin:.2em 0 1em !important;line-height:1.7 !important;}
.cmp-note{font-size:12px !important;color:#666 !important;line-height:1.7 !important;margin:.6em 0 1.2em !important;}

/* === アーキタイプ図解（cmp-arch） ========================== */
.cmp-arch{margin:0 !important;}
.cmp-arch-grid{display:flex !important;gap:12px !important;flex-wrap:wrap !important;}
.cmp-arch-card{flex:1 1 calc(25% - 9px) !important;min-width:160px !important;background:#fff !important;border:1px solid #dce3f0 !important;border-radius:13px !important;overflow:hidden !important;box-shadow:0 2px 8px rgba(0,31,78,.06) !important;}
.cmp-arch-head{height:104px !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:9px !important;}
.cmp-arch-ico{width:46px !important;height:46px !important;}
.cmp-arch-tag{font-size:11px !important;font-weight:700 !important;letter-spacing:.05em !important;border-radius:10px !important;padding:2px 14px !important;}
.cmp-arch-body{padding:14px 14px 15px !important;}
.cmp-arch-name{text-align:center !important;font-size:15px !important;font-weight:700 !important;color:#001F4E !important;line-height:1.5 !important;margin:0 0 9px !important;}
.cmp-arch-hr{border:none !important;border-top:1px solid #e6eaf2 !important;margin:0 0 9px !important;}
.cmp-arch-chips{display:flex !important;flex-wrap:wrap !important;gap:5px !important;justify-content:center !important;margin:0 0 9px !important;padding:0 !important;list-style:none !important;}
.cmp-arch-chips li{font-size:11px !important;font-weight:700 !important;border-radius:9px !important;padding:3px 9px !important;margin:0 !important;line-height:1.4 !important;}
.cmp-arch-foot{font-size:11px !important;color:#5A6573 !important;text-align:center !important;line-height:1.5 !important;margin:0 !important;}
/* カラー：ChatGPT=青 / Claude=紫 / Gemini=緑 / Copilot=紺 */
.cmp-c-gpt .cmp-arch-head{background:#2F6356 !important;}
.cmp-c-gpt .cmp-arch-tag{background:rgba(255,255,255,.16) !important;color:#dcf1ea !important;}
.cmp-c-gpt .cmp-arch-chips li{background:#E3F0EC !important;color:#2E7D6B !important;}
.cmp-c-claude .cmp-arch-head{background:#7A3D29 !important;}
.cmp-c-claude .cmp-arch-tag{background:rgba(255,255,255,.16) !important;color:#f4ddcf !important;}
.cmp-c-claude .cmp-arch-chips li{background:#F6E5DD !important;color:#A8542F !important;}
.cmp-c-gem .cmp-arch-head{background:#234F9E !important;}
.cmp-c-gem .cmp-arch-tag{background:rgba(255,255,255,.16) !important;color:#dbe6fb !important;}
.cmp-c-gem .cmp-arch-chips li{background:#E6EEFC !important;color:#285FC7 !important;}
.cmp-c-cop .cmp-arch-head{background:#41358F !important;}
.cmp-c-cop .cmp-arch-tag{background:rgba(255,255,255,.16) !important;color:#e3defb !important;}
.cmp-c-cop .cmp-arch-chips li{background:#ECE9FB !important;color:#4E40A8 !important;}
/* 2類型ゾーン */
.cmp-arch-zones{display:flex !important;gap:12px !important;margin:14px 0 0 !important;flex-wrap:wrap !important;}
.cmp-arch-zone{flex:1 1 240px !important;border:1px dashed #b6c0d4 !important;border-radius:10px !important;padding:9px 14px !important;}
.cmp-arch-zone .cmp-zl{font-size:11.5px !important;color:#5A6573 !important;margin:0 0 4px !important;font-weight:700 !important;}
.cmp-arch-zone .cmp-zi{font-size:13px !important;font-weight:700 !important;margin:0 !important;}
@media(max-width:768px){.cmp-arch-card{flex:1 1 calc(50% - 6px) !important;min-width:calc(50% - 6px) !important;}.cmp-arch-head{height:96px !important;}}
@media(max-width:430px){.cmp-arch-card{flex:1 1 100% !important;min-width:100% !important;}}

/* === 比較表（cmp-table）言葉ベース＝星取表ではない ========= */
.cmp-table-wrap{overflow-x:auto !important;-webkit-overflow-scrolling:touch !important;border:1px solid #d7dbe6 !important;border-radius:10px !important;margin:1.2em 0 !important;}
.cmp-table{border-collapse:collapse !important;width:100% !important;min-width:620px !important;background:#fff !important;font-size:13.5px !important;line-height:1.7 !important;color:#333 !important;font-family:"Meiryo","メイリオ",sans-serif;}
.cmp-table th,.cmp-table td{border:1px solid #e1e6ef !important;padding:11px 13px !important;text-align:left !important;vertical-align:top !important;}
.cmp-table thead th{background:#3C4043 !important;color:#fff !important;font-weight:700 !important;text-align:center !important;font-size:13px !important;}
.cmp-table tbody th{background:#eef2f8 !important;color:#1a2b4a !important;font-weight:700 !important;white-space:nowrap !important;}
.cmp-table tbody tr:nth-child(even) td{background:#fafbfd !important;}
.cmp-table strong{color:#001F4E !important;}
.cmp-table-svc tbody th{text-align:center !important;}
.cmp-table-svc tbody td:first-of-type{text-align:center !important;}
.cmp-table-svc tbody th.cmp-svc-gpt{color:#2E7D6B !important;}
.cmp-table-svc tbody th.cmp-svc-claude{color:#A8542F !important;}
.cmp-table-svc tbody th.cmp-svc-gem{color:#285FC7 !important;}
.cmp-table-svc tbody th.cmp-svc-cop{color:#4E40A8 !important;}
.cmp-svc-cell{display:flex !important;flex-direction:column !important;align-items:center !important;gap:6px !important;}
.cmp-svc-ico{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:32px !important;height:29px !important;border-radius:7px !important;flex:0 0 auto !important;}
.cmp-svc-ico svg{width:26px !important;height:23px !important;display:block !important;}
.cmp-table-svc tbody th.cmp-svc-gpt .cmp-svc-ico{background:#2F6356 !important;}
.cmp-table-svc tbody th.cmp-svc-claude .cmp-svc-ico{background:#7A3D29 !important;}
.cmp-table-svc tbody th.cmp-svc-gem .cmp-svc-ico{background:#234F9E !important;}
.cmp-table-svc tbody th.cmp-svc-cop .cmp-svc-ico{background:#41358F !important;}
.cmp-table.cmp-table-svc tbody tr th,.cmp-table.cmp-table-svc tbody tr td:first-of-type{vertical-align:middle !important;}
.cmp-table-note{font-size:11.5px !important;color:#666 !important;line-height:1.7 !important;margin:.5em 0 1.2em !important;}
.article-contents .table-t1-list{margin:1em 0 !important;padding:0 !important;list-style:none !important;}
.article-contents .table-t1-list li{font-size:12px !important;color:#666 !important;line-height:1.8 !important;margin:0 !important;}
@media(max-width:600px){.cmp-table{font-size:12.5px !important;}.cmp-table th,.cmp-table td{padding:9px 10px !important;}}

/* === 診断ツール（cmp-sim）Geminiデザイン踏襲 ============== */
.cmp-sim{font-family:"Meiryo","メイリオ",sans-serif !important;margin:1.8em 0 !important;border-radius:16px !important;overflow:hidden !important;background:#eef1f6 !important;color:#1b2a4a !important;border:1px solid #dde3ee !important;box-shadow:0 2px 16px rgba(20,33,61,.06) !important;}
.cmp-sim-hero{padding:24px 24px 4px !important;text-align:center !important;}
.cmp-sim-pill{display:inline-block !important;background:#fcf0f3 !important;color:#CC0033 !important;font-weight:800 !important;font-size:11px !important;padding:4px 13px !important;border-radius:999px !important;margin-bottom:12px !important;border:1px solid #f3c8d3 !important;}
.cmp-sim-title{font-size:22px !important;font-weight:800 !important;margin:0 0 8px !important;color:#001F4E !important;line-height:1.4 !important;text-align:center !important;}
.cmp-sim-sub{font-size:13px !important;color:#5f6b7a !important;margin:0 !important;line-height:1.75 !important;text-align:center !important;}
.cmp-sim-card{padding:6px 24px 24px !important;}
.cmp-sim-q{padding:18px 0 !important;border-top:1px solid #d4dbe8 !important;margin:0 !important;}
.cmp-sim-q:first-child{border-top:none !important;}
.cmp-sim-qt{display:flex !important;align-items:center !important;gap:10px !important;font-size:15px !important;font-weight:700 !important;margin:0 0 12px !important;line-height:1.5 !important;color:#1b2a4a !important;}
.cmp-sim-badge{flex:0 0 auto !important;width:28px !important;height:28px !important;border-radius:50% !important;background:#CC0033 !important;color:#fff !important;font-size:12px !important;font-weight:800 !important;display:flex !important;align-items:center !important;justify-content:center !important;}
.cmp-sim-opts{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:9px !important;padding:0 !important;margin:0 !important;list-style:none !important;}
.cmp-sim-opts.two{grid-template-columns:repeat(2,1fr) !important;}
.cmp-sim-opt{background:#fff !important;color:#1b2a4a !important;border:1.5px solid #d7dded !important;border-radius:10px !important;padding:12px 10px !important;font-size:13.5px !important;font-weight:700 !important;cursor:pointer !important;font-family:inherit !important;transition:background .15s,border-color .15s,box-shadow .15s !important;line-height:1.5 !important;text-align:center !important;}
.cmp-sim-opt small{display:block !important;font-size:11px !important;font-weight:400 !important;color:#7a8496 !important;margin-top:3px !important;}
.cmp-sim-opt:hover{background:#f5f7fb !important;border-color:#b9c4dc !important;}
.cmp-sim-opt.cmp-on{border-color:#CC0033 !important;background:#fff0f3 !important;color:#001F4E !important;box-shadow:0 0 0 3px rgba(204,0,51,.12) !important;}
.cmp-sim-opt.cmp-on small{color:#a14a5e !important;}
.cmp-sim-cta-wrap{text-align:center !important;margin-top:22px !important;}
.cmp-sim-cta{background:#CC0033 !important;color:#fff !important;border:none !important;border-radius:999px !important;padding:14px 42px !important;font-size:16px !important;font-weight:800 !important;cursor:pointer !important;font-family:inherit !important;transition:background .15s,transform .1s !important;box-shadow:0 6px 16px rgba(204,0,51,.22) !important;}
.cmp-sim-cta:disabled{background:#e3e6ee !important;color:#9aa3b5 !important;cursor:not-allowed !important;box-shadow:none !important;}
.cmp-sim-cta:not(:disabled):hover{background:#e21b46 !important;}
.cmp-sim-cta:not(:disabled):active{transform:scale(.97) !important;}
.cmp-sim-result{margin-top:24px !important;}
.cmp-sim-result.cmp-hide{display:none !important;}
.cmp-sim-rcard{position:relative !important;background:#fff !important;color:#002a5c !important;border-radius:16px !important;padding:22px !important;border:1px solid #dbe2ee !important;box-shadow:0 4px 18px rgba(20,33,61,.08) !important;overflow:hidden !important;}
.cmp-sim-rtask{display:inline-block !important;background:#001F4E !important;color:#fff !important;font-size:12px !important;font-weight:700 !important;border-radius:999px !important;padding:3px 13px !important;margin:0 0 11px !important;}
.cmp-sim-rmain{font-size:15px !important;font-weight:700 !important;color:#001F4E !important;line-height:1.7 !important;margin:0 0 4px !important;}
.cmp-sim-rmain b{color:#CC0033 !important;}
.cmp-sim-renv{font-size:13px !important;font-weight:400 !important;color:#444 !important;line-height:1.7 !important;margin:0 0 12px !important;}
.cmp-sim-rbranch{list-style:none !important;padding:0 !important;margin:0 0 16px !important;}
.cmp-sim-rbranch li{position:relative !important;font-size:13.5px !important;line-height:1.75 !important;color:#333 !important;padding:0 0 0 1.4em !important;margin:0 0 .3em !important;}
.cmp-sim-rbranch li::before{content:"\25B8" !important;position:absolute !important;left:0 !important;color:#CC0033 !important;font-weight:700 !important;}
.cmp-sim-rbranch a{color:#0a59b0 !important;text-decoration:underline !important;}
.cmp-sim-rlinks{display:flex !important;flex-wrap:wrap !important;gap:9px !important;}
.cmp-sim-rlink{display:inline-block !important;background:#001F4E !important;color:#fff !important;text-decoration:none !important;font-weight:700 !important;font-size:13px !important;padding:10px 18px !important;border-radius:999px !important;transition:background .15s !important;}
.cmp-sim-rlink:hover{background:#0a3a7a !important;color:#fff !important;}
.cmp-sim-note{font-size:11.5px !important;color:#8a93a6 !important;text-align:center !important;margin:16px 0 0 !important;line-height:1.6 !important;}
@media(max-width:600px){.cmp-sim-opts{grid-template-columns:repeat(2,1fr) !important;}.cmp-sim-title{font-size:19px !important;}}

/* === 個人版 vs 法人版（cmp-table 流用のため省略） ========== */

/* === 料金 3類型（cmp-price） ============================== */
.cmp-price{display:flex !important;gap:12px !important;flex-wrap:wrap !important;margin:1.4em 0 !important;font-family:"Meiryo","メイリオ",sans-serif;}
.cmp-price-card{flex:1 1 200px !important;background:#fff !important;border:1px solid #dce3f0 !important;border-radius:12px !important;padding:16px !important;box-shadow:0 2px 8px rgba(0,31,78,.05) !important;}
.cmp-price-tag{font-size:11px !important;font-weight:700 !important;color:#001F4E !important;background:#eef2f8 !important;border-radius:999px !important;padding:3px 11px !important;display:inline-block !important;margin:0 0 9px !important;}
.cmp-price-name{font-size:14.5px !important;font-weight:700 !important;color:#001F4E !important;margin:0 0 7px !important;line-height:1.5 !important;}
.cmp-price-desc{font-size:13px !important;line-height:1.75 !important;color:#444 !important;margin:0 !important;}
.cmp-price-eg{font-size:11.5px !important;color:#666 !important;margin:8px 0 0 !important;line-height:1.6 !important;}

/* === FAQ（cmp-faq）2行ピーク＋フェード ======================== */
.cmp-faq{margin:1.4em 0 !important;font-family:"Meiryo","メイリオ",sans-serif;color:#333 !important;}
.cmp-faq-item{border:1px solid #e1e6ef !important;border-radius:10px !important;background:#fff !important;overflow:hidden !important;margin:0 0 14px !important;}
.cmp-faq-head{display:flex !important;align-items:center !important;gap:12px !important;background:#eaf0f8 !important;padding:12px 15px !important;}
.cmp-faq-badge{flex:0 0 28px !important;width:28px !important;height:28px !important;border-radius:50% !important;background:#001F4E !important;color:#fff !important;font-weight:700 !important;font-size:14px !important;display:flex !important;align-items:center !important;justify-content:center !important;}
.cmp-faq-q{flex:1 1 auto !important;color:#001F4E !important;font-weight:700 !important;font-size:15px !important;line-height:1.55 !important;}
.cmp-faq-body{padding:14px 16px 0 !important;}
.cmp-faq-peek{position:relative !important;overflow:hidden !important;max-height:56px;transition:max-height .35s ease !important;}
.cmp-faq-atext{font-size:14.5px !important;color:#333 !important;line-height:1.95 !important;margin:0 !important;}
.cmp-faq-atext b{color:#001F4E !important;}
.cmp-faq-atext a{color:#0a59b0 !important;text-decoration:underline !important;}
.cmp-faq-fade{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;height:34px !important;background:linear-gradient(rgba(255,255,255,0),#fff) !important;transition:opacity .25s !important;pointer-events:none !important;}
.cmp-faq-item.cmp-open .cmp-faq-fade{opacity:0 !important;}
.cmp-faq-more{text-align:right !important;padding:6px 16px 13px !important;}
.cmp-faq-more-btn{background:none !important;border:none !important;color:#586a8f !important;font-size:13.5px !important;cursor:pointer !important;font-family:inherit !important;padding:4px 2px !important;}
.cmp-faq-more-btn::after{content:"▼" !important;font-size:9px !important;margin-left:6px !important;}
.cmp-faq-item.cmp-open .cmp-faq-more-btn::after{content:"▲" !important;}
.cmp-faq-more-btn:hover{text-decoration:underline !important;}

/* === 参考リンク（cmp-ref-box） ============================ */
.cmp-ref-box{background:#f7f8fa !important;border:1px solid #e4e7ee !important;border-radius:8px !important;padding:14px 22px !important;margin:1.4em 0 !important;font-family:"Meiryo","メイリオ",sans-serif;}
.cmp-ref-box p{margin:0 0 .35em !important;font-size:14px !important;font-weight:700 !important;color:#1a2b4a !important;line-height:1.6 !important;}
.cmp-ref-box ul{margin:0 !important;padding-left:0 !important;list-style:none !important;}
.cmp-ref-box li{position:relative !important;font-size:14px !important;line-height:1.7 !important;margin:0 !important;padding:0 0 0 1.1em !important;list-style:none !important;}
.cmp-ref-box li::before{content:"•" !important;position:absolute !important;left:0 !important;color:#1a2b4a !important;}
.cmp-ref-box a{color:#0a59b0 !important;text-decoration:underline !important;}