/* 全ページ共通。ページのCSSの後に読む（デモの link タグの順）。scripts/sync_theme_css.py が書く。手で直さない */
/* ==================== デモ fixed-header.css をそのまま ==================== */
/* ヘッダー固定（2026-09-24 木村さん指示: PCでもスマホでも、スクロールしてもロゴとボタンを出したままにする）
   ヘッダーの箱は幅1280pxなので、白地だけ画面の左右いっぱいに伸ばす（box-shadow＋clip-path。横スクロールは出ない）
   固定の高さ: PC 64px。追従するもの（サイドの箱・フォーム・個社ページの目次）は各ページで64px下げている */
header.wrap{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax)}
html{scroll-padding-top:80px;-webkit-text-size-adjust:100%;text-size-adjust:100%}   /* 10-09 木村さん: iPhoneのSafariが横スクロールの表の中の文字を自動で拡大するのを止める。写し元 AI最強ナビの html と同じ値 */
/* スマホはヘッダーの高さが60px */
@media (max-width: 767px){
  html{scroll-padding-top:72px}
  .jump{top:60px}
}

/* ヘッダーのボタン入れ替え（2026-09-25 木村さん決定: 年内は掲載を主役に。PoC＝記事制作と掲載が売れるかを確かめる期間のため）
   掲載＝紫の帯（主役）／相談＝白地＋紫の枠線。戻すのは来年の正式リリース（プレスリリース）のとき。戻し=_戻し_ヘッダーボタン入替前_20260925/
   スマホは相談ボタン1つだけ。09-29 木村さん: スマホも相談はPCと同じ白地＋紫の枠線にする（紫の帯は掲載だけ。掲載バナーと同じ色のボタンが並ぶとトンマナが合わないため） */
header .btn.hk{margin-left:auto;background:linear-gradient(90deg,#CD1CFA 0%,#1E82BE 100%);color:#fff;border:0}
header .btn.hc{margin-left:8px;background:#fff;color:#8447E1;border:1.5px solid #8447E1}
@media (max-width: 767px){
  header .btn.hc{margin-left:auto}
}

/* ==================== デモ side-cta.css をそのまま ==================== */
/* サイドの相談バナー（2026-09-25 木村さん: リボンとイラストをやめて文字だけに。画像ではなくHTMLで作る）
   掲載バナー（画像）と同じグレー地・角丸8・枠線なし。ボタンは白地＋紫の枠線（ヘッダーの相談と同じ）。紫のグラデは使わない
   戻し=_戻し_相談バナー文字化前_20260925/（画像版は img/cta/side-reader.png） */
.sbnr a.rtxt{display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box;height:280px;background:#F4F4F4;padding:0 24px;color:#333;text-decoration:none;text-align:center}   /* 09-25: 上の掲載バナー（画像・336×280）と同じ高さに固定 */
.rtxt .rt-m,.rtxt .rt-b{align-self:stretch}
/* 09-25 木村さん: 中身を3つに（失敗理由1位の調査／編集部がご紹介／まずはお問い合わせ）。数字を大きく見せてデザインの芯にする */
.rtxt .rt-s{display:inline-block;padding:2px 10px;border-radius:9999px;background:#fff;font-size:12px;line-height:1.6;font-weight:700;color:#8447E1}
.rtxt .rt-h{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;font-size:17px;line-height:1.5;font-weight:700;color:#333;text-align:left}
.rtxt .rt-h em{font-style:normal;font-size:48px;line-height:1;font-weight:700;color:#8447E1;font-family:"Schibsted Grotesk","Noto Sans JP",sans-serif}
.rtxt .rt-h em small{font-size:20px;margin-left:2px}
.rtxt .rt-src{display:block;margin-top:6px;font-size:11px;line-height:1.5;color:#999}
.rtxt .rt-m{display:block;margin-top:10px;padding-top:10px;border-top:1px solid #E5E5E5;line-height:1.5;color:#333}   /* 09-25 木村さん: 答えは「独自AIが、この4つ（解決策→候補→比較→信頼性）を代わりに」案G */
.rtxt .rt-l1{display:block;font-size:14px;font-weight:700;color:#333;white-space:nowrap}
.rtxt .rt-l1 b{color:#8447E1;font-size:16px}
.rtxt .rt-st{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:8px}
.rtxt .rt-st i{font-style:normal;font-size:11px;font-weight:700;color:#333;background:#fff;border:1px solid #E5E5E5;border-radius:4px;padding:3px 5px;white-space:nowrap}
.rtxt .rt-st s{text-decoration:none;color:#8447E1;font-size:11px}
.rtxt .rt-b{display:flex;align-items:center;justify-content:center;margin-top:10px;height:44px;background:#fff;color:#8447E1;border:1.5px solid #8447E1;border-radius:8px;font-size:15px;font-weight:700}
.sbnr a.rtxt:hover .rt-b{background:#F6F5FC}

/* ==================== デモ sp.css をそのまま ==================== */
/* ジツゾウ デモ スマホ表示（2026-09-16）
   写し元: research/写し元_AI最強ナビ/構成_スマホ_20260916.md（375×812でDOM実測）
           ヘッダーと検索窓は ITreview のスマホ（itreview.jp・2026-09-16実測: ヘッダー高さ40・ロゴ＋アイコンのみ・検索窓はヘッダーの外）
   方針: PCの数値は一切触らない。767px以下だけを上書きする。この中身はそのままテーマのCSSに移す。
   未決（この文書では写し元どおりにして、判断は木村さんに残す）
     - サイドバーの相談の箱は、写し元どおりスマホでは出していない。出す場所はCodexの箱ができてから決める
     - ヘッダーのナビは写し元どおり出していない。ハンバーガーはJSが要るのでデモでは作らない
*/

@media (max-width: 767px) {

  /* ---- 全体 ---- */
  body { min-width: 0; }
  .wrap { width: auto; padding: 0 16px; }
  img { max-width: 100%; }

  /* ---- ヘッダー（ITreviewのスマホの写し: ロゴとボタンだけ。検索窓は2026-09-22に廃止） ---- */
  .head { height: auto; flex-wrap: wrap; padding: 10px 0; row-gap: 10px; }
  .head .logo { min-width: 0; }
  .head .logo img { height: 26px; }   /* 写し元のスマホもロゴを縮めている（AI最強ナビ108×32・ITreview114×32） */
  .nav { display: none; }
  .btn { margin-left: auto; height: 38px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
  .btn.btn2 { display: none; }   /* スマホはナビ同様に「掲載希望」を出さない（紫の相談ボタンだけ） */

  /* ---- FV（2026-09-22 Codex写し。スマホは縦積み・AIボタンは2列） ---- */
  .fv { margin-top: 12px; }
  .fv .eyebrow { font-size: 12px; line-height: 20px; letter-spacing: .12em; }
  .fv .h1 { margin-top: 4px; font-size: 36px; line-height: 1.3; }
  .fv .h1 br { display: inline; }
  .fv .photo { width: 100%; height: 150px; margin-top: -2px; }
  .fv .photo img { margin-top: -17px; }   /* 2026-09-23 画像は幅343で高さ約171。上の透明な余白（PCの-34pxの半分）を削り、枠を画像の高さに合わせて下の空白をなくす */
  .fv .lead { margin-top: 12px; font-size: 14px; line-height: 1.8; }
  .fv .lead br { display: none; }
  .fv .aibox { width: auto; margin-top: 18px; padding: 20px 14px 16px; border-radius: 16px; }
  .fv .abt { font-size: 16px; }
  .fv .abs { font-size: 12px; }
  .fv .abtns { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
  .fv .ab { height: 52px; font-size: 12px; gap: 5px; padding: 0 6px; border-radius: 9999px; }
  .fv .ab svg { width: 22px; height: 22px; }
  .fv .ab i { display: none; }   /* スマホは矢印を出さない（2列で折り返すため） */
  .fv .abn { font-size: 12px; margin-top: 10px; }
  .fv .note { margin-top: 16px; font-size: 12px; text-align: left; }

  /* ---- 見出しと間隔 ---- */
  .h2 { font-size: 20px; line-height: 30px; }
  .h3 { font-size: 18px; line-height: 27px; }
  .sec { margin-top: 36px; }

  /* ---- カテゴリーのタイル: 1列 ---- */
  .tiles { grid-template-columns: 1fr; gap: 8px; }
  .tile { height: 48px; }
  .tile .nm { white-space: normal; }

  /* ---- 新着カード5枚: 横スクロール ---- */
  .cards5 { overflow-x: auto; max-width: 100%; padding-bottom: 4px; }
  .card5 { flex: none; width: 290px; }

  /* ---- 新着の取材記事: 横スクロール（2026-10-26 木村さん「縦に並んでいるのを横に並べてスクロールできるように」。
          型は上の「新着カード5枚」と下の「おすすめ記事」の横スクロールと同じ（overflow-x・幅290）。10-23の縦積み（flex-direction:column）は廃止。
          .cards3 .card に限定するのは、下の「取材記事の一覧カード」の .card（幅100%）を変えないため ---- */
  .cards3 { overflow-x: auto; max-width: 100%; padding-bottom: 4px; }
  .cards3 .card { flex: none; width: 290px; }

  /* ---- おすすめ記事: 横スクロール ---- */
  .reco { display: flex; overflow-x: auto; max-width: 100%; padding-bottom: 4px; }
  .reco a { flex: none; width: 290px; }
  .reco .ph { width: 290px; height: 152px; }   /* 09-24: 1200×630 と同じ比率 */

  /* ---- 新着記事: 1列の横並び ---- */
  .newa { grid-template-columns: 1fr; gap: 12px; }
  .newa a { height: auto; min-height: 70px; }   /* 09-29: 高さ70px固定だと、タイトルが3行を超えたとき日付が次の記事に重なる */

  /* ---- トップの掲載バナー（09-29。写し元のトップのバナー枠 343×217 の位置＝カテゴリーの下。画像は記事のサイドと同じ掲載バナー） ---- */
  .topbnr { display: block; }
  .topbnr a { display: block; border-radius: 8px; overflow: hidden; }
  .topbnr img { display: block; width: 100%; height: auto; }

  /* ---- カテゴリーの帯とタブ ---- */
  .catbar { padding: 0 16px; }
  .cn { font-size: 18px; }
  .tabs { flex-wrap: wrap; }
  .tabs a { width: 50%; }

  /* ---- 2列を1列に。サイドバーは出さない（写し元どおり） ---- */
  .twocol { flex-direction: column; width: auto; margin: 0; gap: 0; padding: 0 16px; }   /* .twocol は .wrap の外にあるので、ここで左右16を付ける */
  /* 09-29 木村さん: スマホで掲載への入口がフッターにしか無かったので、サイドのバナー2枚（掲載・相談）を本文の下に出す。絞り込み（.sfilt）は今まで通り出さない */
  .side { display: block; width: auto; padding: 32px 0 0; }
  .twocol > .side { order: 2; }   /* 10-20 木村さん: 一覧（取材記事・ノウハウ記事・カテゴリー）はHTMLでサイドが本文より先にあるので、スマホでは開いてすぐバナーが出ていた。本文（一覧）の下へ回す */
  .side .sfilt { display: none; }
  .side .sbnr { position: static; }
  .artl { grid-template-columns: 1fr; gap: 20px; }
  .artl .ph { height: 190px; }
  .main, .art { width: auto; }

  /* ---- 表は必ず横スクロール（幅343の中で収める。はみ出させない） ---- */
  .tscroll, .art .tw, .cot-wrap { overflow-x: auto; max-width: 100%; }
  .cmp { min-width: 640px; }
  .cmp th, .cmp td { width: 160px; }
  .art table { display: block; overflow-x: auto; width: 100%; min-width: 0; }   /* .tw で包まれていない表も、表そのものを横スクロールにする */
  .art .tw table { display: table; width: auto; min-width: 856px; }   /* 10-09 木村さん: 560 だと最後の列（折り返さない）が幅を取って残りの列が2〜3文字幅に潰れる。写し元と同じくPC幅のまま枠の中で横スクロール */
  .cot { width: 100%; min-width: 0; table-layout: fixed; }   /* 会社情報は2列の縦表なので、横スクロールにせず幅いっぱいで折り返す */
  .cot th { width: 96px; }
  .cot td { word-break: break-word; }

  /* ---- 取材記事の一覧カード（2026-10-09 YOUTRUST型・1列） ---- */
  #coList { gap: 24px; }
  .card { width: 100%; }
  .card .cb { gap: 12px; padding: 12px; }
  .card .tt { font-size: 16px; line-height: 24px; min-height: 0; }

  /* ---- 記事 ---- */
  .art .date { font-size: 12px; }
  .art .lead { font-size: 16px; line-height: 32px; }
  .art .fig, .art .fig img { width: 100%; height: auto; }
  .art h2 { font-size: 20px; line-height: 30px; }
  .art h3 { font-size: 18px; line-height: 27px; }
  .art h4 { font-size: 16px; line-height: 26px; }
  .art p, .art li { font-size: 16px; line-height: 32px; }
  .cbox { width: auto; }
  .cbox .il { flex-direction: column; }
  .cbox .yn { flex-direction: column; gap: 8px; }
  .cbox .yn a { width: 100%; }
  .svc { padding: 16px; }
  .svc .lg { width: 100px; height: 100px; }
  .svc .bt { flex-direction: column; gap: 8px; }
  .svc .bt a { width: 100%; }
  .svc th { width: 120px; }
  .svc .shot img, .art .case-photo img { width: 100%; height: auto; }
  .aubox .row { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* ---- 会社ページ ---- */
  .hp { width: auto; flex-direction: column; gap: 16px; padding: 0 16px; }   /* .hp も .wrap の外 */
  .hp .l, .hp .r, .hp .t, .hp .big { width: auto; }
  .hp .top { gap: 12px; }
  .hp .lg { width: 100px; height: 100px; }
  .hp h1 { font-size: 20px; line-height: 30px; }   /* 写し元のスマホの会社名が20px/700 */
  .hp .t { width: auto; padding-top: 0; }
  .plans { flex-wrap: wrap; gap: 8px; }
  .plans div { width: 100%; }
  .atabs, .upd { width: auto; padding-left: 16px; padding-right: 16px; }
  .atabs { overflow-x: auto; }
  .pbtn { width: 100%; }
  .spec .rows span { width: auto; }
  .pop { margin-top: 48px; padding: 32px 0 48px; }
  .pop .grid { grid-template-columns: 1fr; gap: 16px; }
  .pcards { grid-template-columns: 1fr; gap: 16px; }
  .pc, .pc .h, .pc .v, .pc .d, .pc .row, .pc .nt { width: auto; }
  .pc .h { padding: 10px 12px; }
  .fbox { padding: 16px; }
  .fbox .n b { font-size: 28px; line-height: 36px; }

  /* ---- 編集長ページ ---- */
  /* 編集長ページ: 大見出しと署名はサイバーエージェント、創刊の言葉は LANY のスマホ実測（375幅。見出し20px／タイトル24px）。本文は16px（写し元14px）。写真は WIRED.jp の 200×200 を中央に */
  .ed .phd { padding: 24px 16px 36px; }
  .ed h1 { font-size: 22px; line-height: 32px; }
  .ed .cols { display: block; width: auto; padding-left: 16px; padding-right: 16px; }
  .ed .msg { padding-bottom: 80px; }
  .ed h2 { font-size: 20px; line-height: 30px; letter-spacing: 2px; }
  .ed .ttl { margin-top: 32px; font-size: 24px; line-height: 36px; letter-spacing: 2.4px; }
  .ed .body { margin-top: 36px; }
  .ed .body p { font-size: 16px; line-height: 32px; }
  .ed .body p + p { margin-top: 32px; }
  .ed .body p.credit { font-size: 14px; line-height: 28px; }
  .ed .credit b { font-size: 18px; line-height: 36px; }
  .ed .msg .body br { display: none; }
  .ed .pro { width: auto; padding: 0 16px; }
  .ed .prow { display: block; margin-top: 20px; }
  .ed .prow img { display: block; margin: 0 auto; }
  .ed .prow .body { width: auto; margin-top: 16px; }
  .ed .nm { font-size: 18px; text-align: center; }
  .ed .body p.pf { margin-top: 12px; font-size: 16px; line-height: 32px; }

  /* ---- フッター ---- */
  footer { margin-top: 48px; }
  .f1 { flex-direction: column; gap: 24px; padding: 24px 0; }
  .f1 .cols { flex-direction: column; gap: 24px; }
  .f1 .two { grid-template-columns: 1fr 1fr; }
  .f1 .logo img { height: 48px; }
  .f2 { height: auto; }
  .f3 { height: auto; padding: 24px 0; }
  .f3 a { display: inline-block; margin: 0 8px 8px; }
}

@media (max-width: 767px) {
  /* ---- 文字ページ（規約） ---- */
  .tx { width: auto; padding: 0 16px 48px; }
  .tx table { display: block; overflow-x: auto; }
  .tx th { white-space: normal; }
}

/* ==================== デモ demo.js が足していたもの ==================== */
[hidden]{display:none!important}