/* AIコーディングのハブ /ai-coding/（aic）2026-11-02
   器は /ai-kumiawase（kumiawase.css）と /ai-tools（aitools.css）の値をそのまま写した。色・角丸・影・光・タイトルの動きは片方だけ変えない。
   クラスとIDは全部 aicod- で始める（ほかのチャットの部品とぶつけない）。消せばページは本文だけに戻る。 */
:root{
  --aicod-sky:#1AC2F1; --aicod-sky-d:#0E9BC4; --aicod-ink:#0D1B2A; --aicod-ink2:#1C3549;
  --aicod-bg:#f5f7f9; --aicod-card:#fff; --aicod-txt:#12212e; --aicod-sub:#61707d; --aicod-line:#e6ebef;
  --aicod-soft:#eef3f7; --aicod-r:10px; --aicod-rp:999px;
  --aicod-sh:0 1px 2px rgba(13,27,42,.05),0 6px 16px rgba(13,27,42,.06);
  --aicod-sh-h:0 3px 8px rgba(13,27,42,.08),0 16px 36px rgba(13,27,42,.12);
  --aicod-font:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
body.ai-aicod{margin:0;background:var(--aicod-bg);color:var(--aicod-txt);
 font-family:var(--aicod-font);font-size:15px;line-height:1.75;letter-spacing:.01em;-webkit-font-smoothing:antialiased}
.aicod *{box-sizing:border-box}
.aicod a{color:var(--aicod-sky-d);text-decoration:none}
.aicod a:hover{text-decoration:underline}
.aicod img{max-width:100%}
.aicod .aicod-wrap{max-width:1200px;margin:0 auto;padding:0 18px}

/* ===== ヘッダー（kumiawase の .k-hd と同じ値） ===== */
.aicod .aicod-hd{background:#fff;color:var(--aicod-txt);padding:24px 0 18px;position:relative;overflow:hidden}
.aicod .aicod-hd .aicod-wrap{position:relative;z-index:2}
.aicod .aicod-hdtop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 36px;flex-wrap:wrap}
.aicod .aicod-hdl{min-width:0}
.aicod .aicod-hdfx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.aicod .aicod-hdfx span{position:absolute;border-radius:50%;filter:blur(58px)}
.aicod .aicod-hdfx span:nth-child(1){width:420px;height:420px;left:-90px;top:-230px;background:#7aa8ff;opacity:.20;animation:aicodw1 19s ease-in-out infinite alternate}
.aicod .aicod-hdfx span:nth-child(2){width:360px;height:360px;right:2%;top:-200px;background:#2fd0f0;opacity:.20;animation:aicodw2 23s ease-in-out infinite alternate}
.aicod .aicod-hdfx span:nth-child(3){width:260px;height:260px;left:52%;bottom:-190px;background:#b78cff;opacity:.14;animation:aicodw1 27s ease-in-out infinite alternate-reverse}
@keyframes aicodw1{to{transform:translate(64px,30px) scale(1.14)}}
@keyframes aicodw2{to{transform:translate(-54px,22px) scale(1.1)}}
.aicod .aicod-ttl{font-size:46px;line-height:1.14;letter-spacing:-.01em;font-weight:900;margin:0 0 10px}
.aicod .aicod-ttl .aicod-tw{display:inline-block;transform:skewX(-9deg);transform-origin:left bottom;padding-right:.14em;
 background:linear-gradient(100deg,#2f5fe0 0%,#12c2e9 22%,#8b5be0 44%,#12c2e9 66%,#2f5fe0 88%,#12c2e9 100%);
 background-size:320% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:aicodflow 14s linear infinite}
@keyframes aicodflow{from{background-position:0 0}to{background-position:-320% 0}}
.aicod .aicod-lead{margin:0 0 6px;font-size:14px;color:var(--aicod-sub);max-width:800px;line-height:1.8}
.aicod .aicod-src{margin:0;font-size:12px;color:var(--aicod-sub)}
.aicod .aicod-kpi{display:flex;gap:12px;flex:none;padding-bottom:3px}
.aicod .aicod-kp{background:#fff;border:1px solid var(--aicod-line);border-radius:12px;padding:13px 18px;box-shadow:var(--aicod-sh);text-align:center;min-width:120px}
.aicod .aicod-kp .aicod-n{display:block;font-size:30px;font-weight:900;line-height:1.1;color:var(--aicod-sky-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.aicod .aicod-kp .aicod-n em{font-style:normal;font-size:13px;margin-left:2px}
.aicod .aicod-kp small{display:block;font-size:11px;color:var(--aicod-sub);margin-top:3px;line-height:1.5}

/* ===== 帯（kumiawase の .k-quick と同じ） ===== */
.aicod .aicod-quick{background:#fff;box-shadow:0 1px 0 var(--aicod-line);position:sticky;top:0;z-index:40}
.aicod .aicod-quick .aicod-wrap{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px;position:relative}
.aicod .aicod-quick .aicod-wrap::after{content:"";position:absolute;right:18px;top:0;bottom:0;width:40px;pointer-events:none;background:linear-gradient(90deg,transparent,#fff)}
.aicod .aicod-ql{font-size:12px;color:var(--aicod-sub);white-space:nowrap;font-weight:700;flex:none}
.aicod .aicod-qs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:1px 40px 1px 0;min-height:37px}
.aicod .aicod-qs::-webkit-scrollbar{display:none}
.aicod .aicod-qp{background:var(--aicod-soft);color:#33475a;font-size:13px;padding:7px 14px;border-radius:var(--aicod-rp);white-space:nowrap;font-weight:500;transition:background .15s;flex:none;line-height:1.75}
.aicod .aicod-qp:hover{background:#e0e9f0;text-decoration:none}
.aicod .aicod-qp.aicod-on{background:linear-gradient(96deg,#12b9e8,#3f8ae0);color:#fff;font-weight:700}

/* ===== 本体 ===== */
.aicod .aicod-body{padding:22px 18px 70px}
.aicod [id^="aicod-"]{scroll-margin-top:70px}
.aicod .aicod-upd{background:var(--aicod-card);border:1px solid var(--aicod-line);border-radius:var(--aicod-r);padding:12px 16px;margin:0 0 16px;box-shadow:var(--aicod-sh)}
.aicod .aicod-updt{display:block;font-size:12px;font-weight:700;color:var(--aicod-sub);margin-bottom:2px}
.aicod .aicod-upd ul,.aicod .aicod-log ul{margin:0;padding:0;list-style:none}
.aicod .aicod-upd li,.aicod .aicod-log li{font-size:13px;line-height:1.75;display:flex;gap:10px}
.aicod .aicod-upd time,.aicod .aicod-log time{flex:none;font-weight:700;color:var(--aicod-sky-d);font-variant-numeric:tabular-nums}
.aicod .aicod-answer{margin:0 0 6px;padding:12px 15px;background:#f2f7fa;border-left:3px solid var(--aicod-sky);font-size:14.5px;line-height:1.9;color:#2b3f50}
.aicod .aicod-h2{margin:34px 0 14px;font-size:24px;font-weight:900;line-height:1.4;letter-spacing:-.01em;color:var(--aicod-txt);padding:0;border:0;background:none}
.aicod .aicod-h2::before,.aicod .aicod-h2::after,.aicod .aicod-h3::before,.aicod .aicod-h3::after{display:none}
.aicod .aicod-h3{margin:26px 0 12px;font-size:18px;font-weight:800;line-height:1.5;color:var(--aicod-txt);padding:0;border:0;background:none}
.aicod .aicod-note{margin:0 0 10px;font-size:12px;color:var(--aicod-sub);line-height:1.7}

/* 結論のカード（kumiawase の .k-tc の帯・立ち上がり・浮き） */
.aicod .aicod-kets{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.aicod .aicod-ket,.aicod .aicod-tc,.aicod .aicod-kid{position:relative;display:block;background:var(--aicod-card);border-radius:12px;box-shadow:var(--aicod-sh);overflow:hidden;color:var(--aicod-txt);
 transition:box-shadow .16s,transform .16s;opacity:0;transform:translateY(10px);animation:aicodup .36s forwards;animation-delay:calc(var(--i,0)*26ms)}
.aicod .aicod-ket{padding:19px 16px 15px}
.aicod .aicod-ket:before,.aicod .aicod-tc:before,.aicod .aicod-kid:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:12px 12px 0 0;background:var(--pc,#12b9e8)}
.aicod .aicod-ket:nth-child(2){--pc:#2f47b8}.aicod .aicod-ket:nth-child(3){--pc:#0f7a52}.aicod .aicod-ket:nth-child(4){--pc:#8b5be0}
.aicod .aicod-ket:hover,.aicod .aicod-kid:hover{box-shadow:0 0 0 1px rgba(26,194,241,.4),0 12px 34px rgba(26,150,220,.2);transform:translateY(-4px);text-decoration:none}
@keyframes aicodup{to{opacity:1;transform:none}}
.aicod .aicod-ketn{display:inline-block;font-size:11.5px;font-weight:700;color:#0a6c8a;background:#e3f4fb;padding:3px 9px;border-radius:4px;margin-bottom:10px}
.aicod .aicod-keth{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.aicod .aicod-keth img{width:30px;height:30px;border-radius:6px;object-fit:contain;background:#fff;flex:none}
.aicod .aicod-keth b{font-size:22px;font-weight:900;line-height:1.25;letter-spacing:-.01em}
.aicod .aicod-ketw{display:block;font-size:12.5px;line-height:1.7;color:#2b3f50}

/* 検証のポイント */
.aicod .aicod-pts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--aicod-line);border:1px solid var(--aicod-line);border-radius:var(--aicod-r);overflow:hidden;margin:0 0 12px}
.aicod .aicod-pt{background:var(--aicod-card);padding:16px 16px 14px;position:relative}
.aicod .aicod-pt b{display:block;font-size:20px;font-weight:900;line-height:1.3}
.aicod .aicod-ptw{position:absolute;right:14px;top:14px;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(96deg,#12b9e8,#3f8ae0);padding:2px 9px;border-radius:4px}
.aicod .aicod-pt em{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--aicod-sky-d);margin:3px 0 6px}
.aicod .aicod-pt p{margin:0;font-size:12px;line-height:1.7;color:var(--aicod-sub)}
.aicod .aicod-tasks{background:var(--aicod-card);border:1px solid var(--aicod-line);border-radius:var(--aicod-r);padding:12px 16px;font-size:13px;line-height:1.8}
.aicod .aicod-taskp{margin:0 0 4px}
.aicod .aicod-taskp q{font-weight:700}
.aicod .aicod-tasks ol{margin:0;padding-left:1.4em}
.aicod .aicod-tasks li{margin:2px 0}

/* 表 */
.aicod .aicod-tblscr,.aicod .aicod-gridscr{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--aicod-card);border:1px solid var(--aicod-line);border-radius:var(--aicod-r);box-shadow:var(--aicod-sh);margin:0 0 10px}
.aicod .aicod-tbl{width:100%;border-collapse:collapse;font-size:13px;line-height:1.55;min-width:880px;margin:0;border:0}
.aicod .aicod-tbl-s{min-width:0}
.aicod .aicod-tbl th,.aicod .aicod-tbl td{padding:11px 12px;border:0;border-bottom:1px solid var(--aicod-line);text-align:left;vertical-align:middle;word-break:normal;overflow-wrap:anywhere;background:none;color:var(--aicod-txt)}
.aicod .aicod-tbl thead th{background:var(--aicod-soft);font-size:12px;font-weight:700;color:#3f5768;white-space:nowrap}
.aicod .aicod-tbl tbody tr:first-child th,.aicod .aicod-tbl tbody th{background:none!important;color:var(--aicod-txt)!important;font-weight:400}
.aicod .aicod-tbl tbody tr:last-child th,.aicod .aicod-tbl tbody tr:last-child td{border-bottom:0}
.aicod .aicod-tbl tbody th{min-width:190px}
.aicod .aicod-tbl td{white-space:nowrap}
.aicod .aicod-tbl td.aicod-us{white-space:normal;min-width:170px}
.aicod .aicod-rk{font-size:18px;font-weight:900;color:var(--aicod-ink);text-align:center!important;width:46px}
.aicod .aicod-tn{display:flex;align-items:center;gap:8px;color:var(--aicod-txt)!important}
.aicod .aicod-tn img{width:24px;height:24px;border-radius:5px;object-fit:contain;flex:none;background:#fff}
.aicod .aicod-tn b{font-size:14.5px;font-weight:800}
.aicod .aicod-tbl th small,.aicod .aicod-pr small{display:block;font-size:11px;color:var(--aicod-sub);margin-top:2px}
.aicod .aicod-sc b{display:block;font-size:22px;font-weight:900;color:var(--aicod-sky-d);line-height:1.1;font-variant-numeric:tabular-nums}
.aicod .aicod-bar{display:block;width:80px;height:5px;border-radius:3px;background:var(--aicod-soft);margin-top:5px;overflow:hidden}
.aicod .aicod-bar i{display:block;height:100%;background:linear-gradient(96deg,#12b9e8,#3f8ae0);border-radius:3px}
.aicod .aicod-ok{display:inline-block;color:#0f7a52;font-weight:900;margin-right:4px}
.aicod .aicod-us{font-size:12px;color:#3c5468;max-width:190px}
.aicod .aicod-pr b{font-size:14px;font-weight:800;white-space:nowrap}
.aicod .aicod-tbl tbody tr.aicod-na td,.aicod .aicod-tbl tbody tr.aicod-na th{color:var(--aicod-sub)!important;background:#fafbfc!important}
.aicod .aicod-tbl-s{max-width:760px}

/* 同じ課題で見比べる格子 */
.aicod .aicod-grid{display:grid;grid-template-columns:150px repeat(var(--cols),minmax(150px,1fr));min-width:790px}
.aicod .aicod-gh,.aicod .aicod-gr,.aicod .aicod-gc{padding:10px 12px;border-bottom:1px solid var(--aicod-line);border-left:1px solid var(--aicod-line)}
.aicod .aicod-gh:first-child,.aicod .aicod-gr{border-left:0}
.aicod .aicod-gh{background:var(--aicod-soft);font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:7px}
.aicod .aicod-gh img{width:22px;height:22px;border-radius:5px;object-fit:contain;background:#fff}
.aicod .aicod-gr b{display:block;font-size:13px;font-weight:800;line-height:1.4}
.aicod .aicod-gr small{font-size:11px;color:var(--aicod-sub)}
.aicod .aicod-gc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12.5px}
.aicod .aicod-gok{font-size:17px;font-weight:900;color:var(--aicod-txt);font-variant-numeric:tabular-nums}
.aicod .aicod-full .aicod-gok{color:#0f7a52}
.aicod .aicod-gs{font-weight:700;color:#2b3f50}
.aicod .aicod-ga{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;background:#e6f4ee;color:#0f7a52}
.aicod .aicod-ga-on{background:#fbeae7;color:#b03a28}
.aicod .aicod-gq q{font-size:11.5px;line-height:1.6;color:#3c5468;font-family:"SFMono-Regular",Consolas,"Hiragino Sans",Meiryo,monospace;quotes:none}
.aicod .aicod-gq,.aicod .aicod-grid>.aicod-gr:nth-last-child(-n+5){border-bottom:0}

/* 測れなかったもの */
.aicod .aicod-unm{margin:16px 0 0;background:#fdfaf3;border:1px solid #efe2bf;border-left:4px solid #e6c46a;border-radius:var(--aicod-r);padding:14px 16px;font-size:13.5px;line-height:1.85}
.aicod .aicod-unmt{display:block;font-size:15px;font-weight:800;color:#6b5a3f;margin-bottom:4px}
.aicod .aicod-unm p{margin:0 0 6px}
.aicod .aicod-unm blockquote{margin:6px 0 8px;padding:8px 12px;background:#fff;border-left:3px solid #e6d5a8;font-size:12.5px}
.aicod .aicod-unm blockquote p{margin:0 0 4px;font-family:"SFMono-Regular",Consolas,Meiryo,monospace;font-size:12px}
.aicod .aicod-unm cite{font-style:normal;font-size:11.5px;color:var(--aicod-sub)}

/* ツールの札 */
.aicod .aicod-tcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.aicod .aicod-tc{padding:19px 18px 16px}
.aicod .aicod-tc:nth-child(2){--pc:#2f47b8}.aicod .aicod-tc:nth-child(3){--pc:#0f7a52}.aicod .aicod-tc:nth-child(4){--pc:#8b5be0}
.aicod .aicod-tc:hover{box-shadow:0 0 0 1px rgba(26,194,241,.4),0 12px 34px rgba(26,150,220,.2);transform:translateY(-4px)}
.aicod .aicod-tch{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.aicod .aicod-lg{width:40px;height:40px;flex:none;border-radius:8px;object-fit:contain;background:#fff}
.aicod .aicod-tcn{min-width:0;flex:1}
.aicod .aicod-tcn h3{margin:0;padding:0;border:0;background:none;font-size:20px;font-weight:900;line-height:1.3;color:var(--aicod-txt)}
.aicod .aicod-tcn h3::before,.aicod .aicod-tcn h3::after{display:none}
.aicod .aicod-tcn span{display:block;font-size:11px;color:var(--aicod-sub);margin-top:1px}
.aicod .aicod-rkb{flex:none;text-align:center;background:#eef6fb;color:#1f5975;font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;line-height:1.3}
.aicod .aicod-rkb b{display:block;font-size:17px;font-weight:900;color:var(--aicod-sky-d)}
.aicod .aicod-tcp{padding:11px 13px;background:#f3f7fa;border-radius:8px;margin-bottom:10px}
.aicod .aicod-tcp b{display:block;font-size:24px;font-weight:900;letter-spacing:-.02em;line-height:1.25;color:var(--aicod-txt);font-variant-numeric:tabular-nums}
.aicod .aicod-tcp span{display:block;font-size:11.5px;color:var(--aicod-sub);margin-top:3px;line-height:1.6}
.aicod .aicod-tcd{margin:0}
.aicod .aicod-tcd dt{font-size:11px;font-weight:700;color:#3f5768;margin:8px 0 2px}
.aicod .aicod-tcd dd{margin:0;font-size:13px;line-height:1.8;color:#2b3f50}
.aicod .aicod-cans{display:flex;flex-wrap:wrap;gap:4px}
.aicod .aicod-cans span{background:#e3f4fb;color:#0a6c8a;font-size:11px;font-weight:700;padding:4px 9px;border-radius:4px;line-height:1.5}
.aicod .aicod-cond{font-size:11.5px!important;color:var(--aicod-sub)!important;line-height:1.7!important}
.aicod .aicod-tcl{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--aicod-line)}
.aicod .aicod-tcl span{width:100%;font-size:11px;font-weight:700;color:#3f5768}
.aicod .aicod-tcl a{font-size:12.5px;font-weight:700}
.aicod .aicod-tcl a::after{content:"→";margin-left:2px;font-size:11px}

/* 用語 */
.aicod .aicod-terms{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0}
.aicod .aicod-term{background:var(--aicod-card);border:1px solid var(--aicod-line);border-radius:var(--aicod-r);padding:13px 15px}
.aicod .aicod-term dt{font-size:15px;font-weight:800;margin:0 0 4px}
.aicod .aicod-term dd{margin:0;font-size:13px;line-height:1.8;color:#2b3f50}

/* 実測記事の一覧 */
.aicod .aicod-kidl{display:grid;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));gap:12px}
.aicod .aicod-kid{padding:17px 16px 14px}
.aicod .aicod-kidt{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#3f5768;margin-bottom:5px}
.aicod .aicod-kidt img{width:20px;height:20px;border-radius:4px;object-fit:contain;background:#fff}
.aicod .aicod-kid b{display:block;font-size:14px;font-weight:700;line-height:1.55;margin-bottom:5px}
.aicod .aicod-kid small{display:block;font-size:11.5px;color:var(--aicod-sub);line-height:1.6}

/* 作り方・よくある質問・更新の記録 */
.aicod .aicod-howto p{margin:0 0 10px;font-size:14px;line-height:1.9}
.aicod .aicod-faq{margin:0;background:var(--aicod-card);border:1px solid var(--aicod-line);border-radius:var(--aicod-r);padding:4px 18px}
.aicod .aicod-fq{padding:13px 0;border-bottom:1px solid var(--aicod-line)}
.aicod .aicod-fq:last-child{border-bottom:0}
.aicod .aicod-fq dt{font-size:14.5px;font-weight:800;margin:0 0 4px}
.aicod .aicod-fq dt::before{content:"Q ";color:var(--aicod-sky-d)}
.aicod .aicod-fq dd{margin:0;font-size:13.5px;line-height:1.85;color:#2b3f50}
.aicod .aicod-log{margin:28px 0 0;font-size:13px}
.aicod .aicod-log b{display:block;font-size:13px;font-weight:700;color:var(--aicod-sub);margin-bottom:4px}

@media(prefers-reduced-motion:reduce){
  .aicod .aicod-ket,.aicod .aicod-tc,.aicod .aicod-kid{opacity:1;transform:none;animation:none}
  .aicod .aicod-hdfx span,.aicod .aicod-ttl .aicod-tw{animation:none}
}
@media(max-width:1000px){
  .aicod .aicod-pts{grid-template-columns:1fr}
}
@media(max-width:600px){
  .aicod .aicod-hd{padding:20px 0 16px}
  .aicod .aicod-ttl{font-size:33px}
  .aicod .aicod-kpi{width:100%;padding-bottom:0}
  .aicod .aicod-kp{flex:1;min-width:0;padding:11px 10px}
  .aicod .aicod-kp .aicod-n{font-size:24px}
  .aicod .aicod-lead{font-size:13.5px}
  .aicod .aicod-h2{font-size:20px}
  .aicod .aicod-tcs,.aicod .aicod-kidl,.aicod .aicod-terms{grid-template-columns:1fr}
  .aicod .aicod-tcs{gap:12px}
  .aicod .aicod-answer{font-size:14px}
  .aicod .aicod-upd li,.aicod .aicod-log li{flex-direction:column;gap:0}
}