@charset "utf-8";
/* ============================================================
   bizon Gemini Notebook（旧NotebookLM）記事 専用スタイル
   https://www.ntt.com/etc/designs/nttcom/hq/jp/bizon/notebooklm/css/style.css
   ------------------------------------------------------------
   notebooklm.html の図版・表組み・FAQなど、記事固有コンポーネントを集約。
   見出し(title-c2 等)・パンくず・ヘッダー/フッターは bizon 共通CSS に従う。
   クラス接頭辞：gn-（Gemini Notebook）で名前空間を分離。
   配色：navy #001F4E / red #CC0033 / gray #3C4043（共通トーン）。
   ※生成AI比較記事（ai-compare）の設計言語に準拠。
   ============================================================ */
.gn-scope{font-family:"Meiryo","メイリオ",sans-serif;color:#222;}
.gn-scope *{box-sizing:border-box;}

/* === 図タイトル（gn-fig-title / wrap） ====================== */
.gn-figwrap{margin:1.8em 0 !important;font-family:"Meiryo","メイリオ",sans-serif;}
.gn-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;}
.gn-fig-sub{color:#666 !important;font-size:12.5px !important;text-align:center !important;margin:.2em 0 1em !important;line-height:1.7 !important;}
.gn-note{font-size:12px !important;color:#666 !important;line-height:1.7 !important;margin:.6em 0 1.2em !important;}

/* === 名称変更のお知らせ（gn-notice） ======================== */
.gn-notice{margin:1.4em 0 1.8em !important;background:#fff !important;border:1px solid #f3c8d3 !important;border-radius:10px !important;padding:16px 20px !important;font-family:"Meiryo","メイリオ",sans-serif;box-shadow:0 2px 8px rgba(204,0,51,.05) !important;}
.gn-notice-label{display:inline-block !important;background:#fcf0f3 !important;color:#CC0033 !important;font-weight:800 !important;font-size:11px !important;letter-spacing:.05em !important;padding:4px 13px !important;border-radius:999px !important;border:1px solid #f3c8d3 !important;margin:0 0 10px !important;}
.gn-notice-text{font-size:14px !important;line-height:1.9 !important;color:#333 !important;margin:0 !important;}
.gn-notice-text strong{color:#CC0033 !important;}

/* === 表（gn-table）========================================= */
.gn-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;}
.gn-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;}
.gn-table th,.gn-table td{border:1px solid #e1e6ef !important;padding:11px 13px !important;text-align:left !important;vertical-align:top !important;}
.gn-table thead th{background:#3C4043 !important;color:#fff !important;font-weight:700 !important;text-align:center !important;font-size:13px !important;}
.gn-table tbody th{background:#eef2f8 !important;color:#1a2b4a !important;font-weight:700 !important;white-space:nowrap !important;}
.gn-table tbody tr:nth-child(even) td{background:#fafbfd !important;}
.gn-table tbody tr.gn-row-hl td,
.gn-table tbody tr.gn-row-hl th{background:#FDF3F6 !important;}
.gn-table tbody tr.gn-row-hl th{color:#CC0033 !important;}
.gn-table strong{color:#001F4E !important;}
.gn-table a{color:#0a59b0 !important;text-decoration:underline !important;}
.gn-table-note{font-size:11.5px !important;color:#666 !important;line-height:1.7 !important;margin:.5em 0 1.2em !important;}

/* 上限表（列が多いパターン）：本文を中央寄せ */
.gn-table-limit{min-width:760px !important;}
.gn-table-limit th,.gn-table-limit td{padding:10px 11px !important;font-size:13px !important;}
.gn-table-limit tbody td{text-align:center !important;}
.gn-table-limit tbody th{vertical-align:middle !important;}

/* セル内の補足・強調 */
.gn-sub{display:inline-block !important;font-size:11.5px !important;color:#777 !important;font-weight:400 !important;line-height:1.6 !important;}
.gn-table thead .gn-sub{color:#fff !important;}
.gn-em{color:#CC0033 !important;font-weight:700 !important;}
.gn-ok{color:#1E7A3C !important;font-weight:700 !important;}

/* ラベル（タグ） */
.gn-tag{display:inline-block !important;font-size:11px !important;font-weight:700 !important;border-radius:10px !important;padding:3px 11px !important;line-height:1.5 !important;white-space:nowrap !important;}
.gn-tag.old{background:#eef2f8 !important;color:#5A6573 !important;}
.gn-tag.new{background:#fcf0f3 !important;color:#CC0033 !important;}
.gn-tag.gemini{background:#E6EEFC !important;color:#285FC7 !important;}
.gn-tag.plain{background:#fff !important;color:#3C4043 !important;padding:6px 12px !important;white-space:normal !important;display:inline-block !important;}
.gn-table .gn-th-new{color:#CC0033 !important;font-weight:700 !important;}
.gn-table .gn-th-gemini{color:#285FC7 !important;font-weight:700 !important;}

@media(max-width:600px){.gn-table{font-size:12.5px !important;}.gn-table th,.gn-table td{padding:9px 10px !important;}}

/* === 機能一覧（gn-feat） =================================== */
.gn-feat{margin:0 !important;}
.gn-feat-grid{display:flex !important;gap:12px !important;flex-wrap:wrap !important;}
.gn-feat-card{flex:1 1 calc(33.333% - 8px) !important;min-width:210px !important;background:#fff !important;border:1px solid #dce3f0 !important;border-radius:13px !important;padding:15px 16px 16px !important;box-shadow:0 2px 8px rgba(0,31,78,.06) !important;}

/* アイコン＋分類を一体化したチップ（StudioのUIカラーに準拠したパステル配色） */
.gn-feat-cat{display:inline-flex !important;align-items:center !important;gap:7px !important;font-size:11.5px !important;font-weight:700 !important;letter-spacing:.02em !important;background:#eef2f8 !important;color:#5A6573 !important;border-radius:999px !important;padding:5px 13px 5px 9px !important;margin:0 0 11px !important;line-height:1.5 !important;}
.gn-feat-cat svg{flex:0 0 16px !important;width:16px !important;height:16px !important;display:block !important;}

/* 機能ごとの配色（Gemini Notebook Studio のUIカラーに準拠）
   navy=音声解説/データテーブル, olive=スライド/レポート, magenta=マインドマップ/インフォ,
   green=動画解説, teal=クイズ・検索系, red=フラッシュカード */
.gn-feat-cat.gn-c-navy{background:#E8ECF6 !important;color:#224484 !important;}
.gn-feat-cat.gn-c-olive{background:#F2F0E4 !important;color:#6B5B2B !important;}
.gn-feat-cat.gn-c-magenta{background:#F4E8F1 !important;color:#802272 !important;}
.gn-feat-cat.gn-c-green{background:#E4EEE7 !important;color:#0F5223 !important;}
.gn-feat-cat.gn-c-teal{background:#E3EFF4 !important;color:#056A95 !important;}
.gn-feat-cat.gn-c-red{background:#F6E9E8 !important;color:#8C2E2A !important;}
.gn-feat-cat.gn-c-gray{background:#EDEFF3 !important;color:#4A5568 !important;}

.gn-feat-card h4{font-size:14.5px !important;font-weight:700 !important;color:#001F4E !important;line-height:1.5 !important;margin:0 0 8px !important;}
.gn-feat-card p:last-child{font-size:12.5px !important;line-height:1.75 !important;color:#5A6573 !important;margin:0 !important;}
.gn-feat-card.gn-feat-new{border-color:#f3c8d3 !important;background:#fffafb !important;}
.gn-feat-new .gn-feat-cat{background:#fcf0f3 !important;color:#CC0033 !important;}
.gn-feat-new h4{color:#CC0033 !important;}
.gn-badge{display:inline-block !important;background:#CC0033 !important;color:#fff !important;font-size:10px !important;font-weight:700 !important;padding:2px 9px !important;border-radius:999px !important;margin-left:6px !important;vertical-align:middle !important;white-space:nowrap !important;line-height:1.6 !important;}
@media(max-width:768px){.gn-feat-card{flex:1 1 calc(50% - 6px) !important;min-width:calc(50% - 6px) !important;}}
@media(max-width:430px){.gn-feat-card{flex:1 1 100% !important;min-width:100% !important;}}

/* === 使い方ステップ（gn-flow）実UIキャプチャつき縦フロー ===== */
.gn-flow{margin:1.2em 0 !important;font-family:"Meiryo","メイリオ",sans-serif;}
.gn-flow-item{background:#fff !important;border:1px solid #dce3f0 !important;border-radius:14px !important;padding:18px 20px 16px !important;box-shadow:0 2px 10px rgba(0,31,78,.05) !important;}
.gn-flow-head{display:flex !important;align-items:center !important;gap:11px !important;margin:0 0 9px !important;}
.gn-flow-num{flex:0 0 30px !important;width:30px !important;height:30px !important;border-radius:50% !important;background:#001F4E !important;color:#fff !important;font-size:14px !important;font-weight:800 !important;display:flex !important;align-items:center !important;justify-content:center !important;}
.gn-flow-ttl{font-size:16px !important;font-weight:700 !important;color:#001F4E !important;line-height:1.5 !important;}
.gn-flow-txt{font-size:13.5px !important;line-height:1.85 !important;color:#333 !important;margin:0 0 13px !important;}
.gn-flow-shot{background:#F5F7FA !important;border:1px solid #e6eaf1 !important;border-radius:10px !important;padding:14px !important;text-align:center !important;}
.gn-flow-shot img{max-width:100% !important;height:auto !important;display:inline-block !important;border-radius:6px !important;border:1px solid #e4e8ef !important;background:#fff !important;}
.gn-flow-cap{font-size:11.5px !important;color:#6b7280 !important;line-height:1.7 !important;margin:9px 0 0 !important;text-align:center !important;}
.gn-flow-arrow{text-align:center !important;padding:10px 0 !important;line-height:0 !important;}
.gn-flow-arrow::before{content:"" !important;display:inline-block !important;width:13px !important;height:13px !important;border-right:2.5px solid #b6c2d6 !important;border-bottom:2.5px solid #b6c2d6 !important;transform:rotate(45deg) !important;}
.gn-flow-note{font-size:12px !important;color:#666 !important;line-height:1.8 !important;margin:1em 0 0 !important;}
/* 本文中の注釈（※〜）：共通CSSの広い行間を継承しないよう統一 */
.gn-note{font-size:12px !important;color:#666 !important;line-height:1.8 !important;margin:.2em 0 1.5em !important;}
.gn-note a{color:#0a59b0 !important;text-decoration:underline !important;}

/* === FAQ（gn-faq）2行ピーク＋フェード ====================== */
.gn-faq{margin:1.4em 0 !important;font-family:"Meiryo","メイリオ",sans-serif;color:#333 !important;}
.gn-faq-item{border:1px solid #e1e6ef !important;border-radius:10px !important;background:#fff !important;overflow:hidden !important;margin:0 0 14px !important;}
.gn-faq-head{display:flex !important;align-items:center !important;gap:12px !important;background:#eaf0f8 !important;padding:12px 15px !important;}
.gn-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;}
.gn-faq-q{flex:1 1 auto !important;color:#001F4E !important;font-weight:700 !important;font-size:15px !important;line-height:1.55 !important;}
.gn-faq-body{padding:14px 16px 0 !important;}
.gn-faq-peek{position:relative !important;overflow:hidden !important;max-height:56px;transition:max-height .35s ease !important;}
.gn-faq-atext{font-size:14.5px !important;color:#333 !important;line-height:1.95 !important;margin:0 !important;}
.gn-faq-atext b{color:#001F4E !important;}
.gn-faq-atext a{color:#0a59b0 !important;text-decoration:underline !important;}
.gn-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;}
.gn-faq-item.gn-open .gn-faq-fade{opacity:0 !important;}
.gn-faq-more{text-align:right !important;padding:6px 16px 13px !important;}
.gn-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;}
.gn-faq-more-btn::after{content:"▼" !important;font-size:9px !important;margin-left:6px !important;}
.gn-faq-item.gn-open .gn-faq-more-btn::after{content:"▲" !important;}
.gn-faq-more-btn:hover{text-decoration:underline !important;}

/* === 参考リンク（gn-ref-box） ============================== */
/* 記事末尾の注釈リスト：後続バナーとの間隔を確保 */
.gn-endnote{margin:1.4em 0 2.4em !important;}

.gn-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;}
.gn-ref-box p{margin:0 0 .35em !important;font-size:14px !important;font-weight:700 !important;color:#1a2b4a !important;line-height:1.6 !important;}
.gn-ref-box ul{margin:0 !important;padding-left:0 !important;list-style:none !important;}
.gn-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;}
.gn-ref-box li::before{content:"•" !important;position:absolute !important;left:0 !important;color:#1a2b4a !important;}
.gn-ref-box a{color:#0a59b0 !important;text-decoration:underline !important;}

/* === 仕組み図（gn-mm）※Gemini記事のマルチモーダル図と同一設計 ===== */
.gn-mm{font-family:"Meiryo","メイリオ",sans-serif !important;color:#222 !important;margin:1.4em 0 !important;}
.gn-mm .gn-mm-cap{font-weight:700 !important;color:#3C4043 !important;font-size:17px !important;text-align:center !important;margin:0 0 .6em !important;line-height:1.5 !important;}
.gn-mm .gn-mm-sub{color:#666 !important;font-size:12.5px !important;text-align:left !important;margin:.6em 0 0 !important;line-height:1.7 !important;}
.gn-mm .gn-mm-sub a{color:#0a59b0 !important;text-decoration:underline !important;}
.gn-mm .gn-board{background:#fafbfd !important;border:1px solid #d7dbe6 !important;border-radius:12px !important;padding:18px !important;}
.gn-mm .gn-row{display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;flex-wrap:wrap !important;}
.gn-mm .gn-col{display:flex !important;flex-direction:column !important;gap:8px !important;flex:1 1 190px !important;min-width:180px !important;}
.gn-mm .gn-colh{text-align:center !important;font-weight:700 !important;color:#001F4E !important;font-size:12px !important;letter-spacing:.04em !important;margin-bottom:2px !important;}
.gn-mm .gn-item{display:flex !important;align-items:center !important;gap:9px !important;border-radius:9px !important;padding:9px 11px !important;font-size:13px !important;font-weight:600 !important;line-height:1.4 !important;}
.gn-mm .gn-item small{display:block !important;font-size:11px !important;font-weight:400 !important;opacity:.78 !important;line-height:1.5 !important;margin-top:2px !important;}
.gn-mm .gn-in{background:#eef1f8 !important;border:1px solid #d3dbeb !important;color:#1a2b4a !important;}
.gn-mm .gn-in svg{color:#001F4E !important;}
.gn-mm .gn-out{background:#fdeef1 !important;border:1px solid #f3c4cf !important;color:#5a1020 !important;}
.gn-mm .gn-out svg{color:#CC0033 !important;}
.gn-mm .gn-item svg{width:20px !important;height:20px !important;flex:0 0 auto !important;}
.gn-mm .gn-core{flex:0 0 auto !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;padding:0 6px !important;}
.gn-mm .gn-node{width:118px !important;height:118px !important;border-radius:50% !important;background:#fff !important;border:2.5px solid #001F4E !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;box-shadow:0 8px 22px rgba(0,31,78,.14) !important;}
.gn-mm .gn-node svg{width:34px !important;height:34px !important;color:#001F4E !important;margin-bottom:3px !important;}
.gn-mm .gn-node b{font-size:15px !important;color:#001F4E !important;}
.gn-mm .gn-badge{margin-top:9px !important;font-size:11px !important;font-weight:700 !important;color:#CC0033 !important;background:#fdeef1 !important;border:1px solid #f3c4cf !important;padding:3px 11px !important;border-radius:999px !important;white-space:nowrap !important;}
.gn-mm .gn-coresub{font-size:11px !important;color:#666 !important;text-align:center !important;margin-top:6px !important;line-height:1.5 !important;}
.gn-mm .gn-ar{color:#CC0033 !important;flex:0 0 auto !important;display:flex !important;align-items:center !important;}
.gn-mm .gn-ar svg{width:22px !important;height:22px !important;}
@media(max-width:640px){
  .gn-mm .gn-row{flex-direction:column !important;}
  .gn-mm .gn-col{width:100% !important;flex:none !important;}
  .gn-mm .gn-ar{transform:rotate(90deg) !important;}
}

/* === 記事内アンカーリンクのスクロール位置補正（セーフティネット） ===========
   本補正はJS（scripts.js の gnOnClick）が主担当。JSが preventDefault() する
   限りブラウザ標準のジャンプは発生せず、この scroll-margin-top は使われない。
   JSが実行されない場面（読み込み失敗・ブロック・ページ内リンクへの直接
   アクセス・ブラウザの戻る/進む等）でのみ機能する保険として設定する。
   固定ヘッダーの実測値が変わった場合はJS側の調整のみで足り、こちらは
   実測できないため大きめの値を設定している。
============================================================ */
#ict-sect .article-common .article-contents h2[id],
#ict-sect .article-common .article-contents h3[id]{scroll-margin-top:110px !important;}
@media(max-width:768px){
  #ict-sect .article-common .article-contents h2[id],
  #ict-sect .article-common .article-contents h3[id]{scroll-margin-top:80px !important;}
}