/* AIツールデータベース /ai-tools  2026-09-01
   このファイルと aitools.js / aitools-data.js を消せば、ページは本文だけに戻る */
/* AIツールナビ：骨格（色と質感はテーマ側で上書き） */
:root{
  --sky:#1AC2F1; --sky-d:#0E9BC4; --ink:#0D1B2A; --ink2:#1C3549;
  --bg:#f5f7f9; --card:#fff; --txt:#12212e; --sub:#61707d; --line:#e6ebef;
  --r:10px; --rp:999px; --sh:0 1px 2px rgba(13,27,42,.05),0 6px 16px rgba(13,27,42,.06);
  --sh-h:0 3px 8px rgba(13,27,42,.08),0 16px 36px rgba(13,27,42,.12);
  --hd-bg:var(--ink); --hd-txt:#fff; --hd-sub:#b9c6d2;
  --acc:var(--sky); --acc-txt:var(--ink);
  --font:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--font);font-size:15px;line-height:1.75;
 letter-spacing:.01em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;font-family:inherit}
input,select{font-size:16px}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 18px}


/* ヘッダー */
.hd{background:var(--hd-bg);color:var(--hd-txt);padding:24px 0 22px;position:relative;overflow:hidden}
.hdtop{display:flex;align-items:center;gap:14px}
.ttl{font-size:25px;font-weight:900;letter-spacing:.01em;margin:0}
.ttl .lg1{color:var(--sky)}
.lead{margin:5px 0 16px;font-size:13.5px;color:var(--hd-sub);max-width:760px}
.sbox{display:flex;align-items:center;background:#fff;border-radius:var(--rp);max-width:620px;box-shadow:var(--sh);
 padding:0 6px 0 16px;position:relative}
.sbox .si{width:17px;height:17px;flex:none;border:2px solid #97a6b3;border-radius:50%;position:relative;margin-right:10px}
.sbox .si:after{content:"";position:absolute;right:-5px;bottom:-4px;width:8px;height:2px;background:#97a6b3;transform:rotate(45deg)}
.sbox input{flex:1;border:0;outline:none;padding:14px 8px;min-width:0;background:none;color:var(--txt)}

/* 人気の条件 */
.quickbar{background:var(--qb-bg,#fff);box-shadow:var(--qb-sh,0 1px 0 var(--line));position:sticky;top:0;z-index:40}
.quickbar .wrap{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px}
.ql{font-size:12px;color:var(--sub);white-space:nowrap;font-weight:700}
.qs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:1px 0}
/* qs-fade 横に続きがあることを示す */
.quickbar .wrap{position:relative}
.quickbar .wrap::after{content:"";position:absolute;right:18px;top:0;bottom:0;width:40px;pointer-events:none;
 background:linear-gradient(90deg,transparent,var(--qb-bg,#fff))}
.qs::-webkit-scrollbar{display:none}
.qp{background:var(--qp-bg,#eef3f7);color:var(--qp-txt,#33475a);font-size:13px;padding:7px 14px;border-radius:var(--rp);
 white-space:nowrap;font-weight:500;transition:.15s}
.qp:hover{background:var(--qp-h,#e0e9f0)}
.qp.on{background:var(--acc);color:var(--acc-txt);font-weight:700}

/* 本体 */
.body{display:grid;grid-template-columns:250px 1fr;gap:26px;padding:22px 0 70px;align-items:start}
.sidewrap{position:sticky;top:62px;background:var(--card);border-radius:var(--r);box-shadow:var(--sh);
 overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 78px)}
.sidehd{flex:none}
/* 条件が増えても中でスクロールできる。指も止まらない */
#side{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;
 scrollbar-width:thin;scrollbar-color:#c3d1dc transparent}
#side::-webkit-scrollbar{width:9px}
#side::-webkit-scrollbar-thumb{background:#cbd8e2;border-radius:99px;border:2px solid transparent;background-clip:padding-box}
#side::-webkit-scrollbar-thumb:hover{background:#a9bdcd;border:2px solid transparent;background-clip:padding-box}
#side::-webkit-scrollbar-track{background:transparent}
.sidehd{display:flex;align-items:center;padding:13px 15px;font-size:13.5px;font-weight:700;
 background:var(--side-hd,var(--ink2));color:var(--side-hd-txt,#fff)}
.sclose{display:none;margin-left:auto;color:inherit;font-size:13px}
.fg{border-top:1px solid var(--line)}
.fg:first-child{border-top:0}
.fgh{width:100%;display:flex;align-items:center;gap:8px;padding:12px 15px;font-size:13.5px;font-weight:700;text-align:left}
.fgh i{margin-left:auto;width:9px;height:9px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);
 transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.fg.open .fgh i{transform:rotate(-135deg) translate(-3px,-3px)}
.fgn{background:var(--acc);color:var(--acc-txt);font-size:11px;font-weight:800;border-radius:var(--rp);padding:0 7px;min-width:19px;text-align:center}
.fgn:empty{display:none}
.fgb{display:none;padding:0 15px 13px}
.fg.open .fgb{display:block}
.opt{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13.5px;cursor:pointer;user-select:none}
.opt input{width:18px;height:18px;accent-color:var(--sky);margin:0;flex:none}
.opt .n{margin-left:auto;font-size:11.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.opt.zero{opacity:.36}
.opt.on .ol{font-weight:700;color:var(--sky-d)}
.slider{padding:12px 0 2px}
.sl-lab{font-size:12.5px;color:var(--sub)}
.sl-lab b{color:var(--txt);font-size:13.5px}
#sl{width:100%;accent-color:var(--sky);margin-top:5px}

/* 結果の上のバー */
.bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:13px}
.cnt b{font-size:29px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--cnt-c,var(--txt));margin-right:4px}
.cnt span{font-size:13.5px;color:var(--sub)}
.barr{margin-left:auto;display:flex;gap:9px;align-items:center}
.vsw{display:flex;background:var(--card);border-radius:var(--rp);box-shadow:var(--sh);padding:3px}
.vsw button{font-size:12.5px;padding:6px 13px;border-radius:var(--rp);color:var(--sub);font-weight:700}
.vsw button.on{background:var(--acc);color:var(--acc-txt)}
.barr select{background:var(--card);border:0;box-shadow:var(--sh);padding:9px 12px;border-radius:var(--rp);font-size:13.5px}

.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.chips:empty{display:none}
.chip{background:var(--ink);color:#fff;font-size:12.5px;padding:5px 8px 5px 12px;border-radius:var(--rp);display:flex;gap:7px;align-items:center}
.chip i{font-style:normal;opacity:.55}
.chip:hover i{opacity:1;color:var(--sky)}
.chip.clr{background:none;color:var(--sub);text-decoration:underline;padding-left:6px}

/* 一覧 */
.res.v-card{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:16px}
.res.v-row{display:flex;flex-direction:column;gap:12px}
.card,.row{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);position:relative;
 opacity:0;transform:translateY(10px);animation:up .36s forwards;animation-delay:calc(var(--i)*26ms)}
@keyframes up{to{opacity:1;transform:none}}
.card{padding:18px 18px 15px;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--sh-h);transform:translateY(-4px)}
.ch{display:flex;align-items:center;gap:12px}
.lg{width:44px;height:44px;flex:none;border-radius:var(--rl,10px);object-fit:contain;background:var(--lg-bg,#f2f6f9);padding:6px}
.lgt{display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;color:var(--sub);padding:0}
.cn h3{margin:0;font-size:17px;font-weight:700;line-height:1.35}
.cn .vd{font-size:12px;color:var(--sub)}
.cp{margin:14px 0 0;background:var(--cp-bg,#f3f7fa);border-radius:var(--r);padding:10px 12px}
.cp b{font-size:19px;font-weight:900;display:block;line-height:1.3;color:var(--cp-c,var(--txt))}
.cp span{font-size:11.5px;color:var(--sub)}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0}
.res.v-card .tags{min-height:23px}
.tag{font-size:11.5px;background:var(--tag-bg,#eef4f8);color:var(--tag-c,#3c5468);padding:3px 9px;border-radius:var(--rt,4px);
 display:inline-flex;align-items:center;gap:5px}
.tag.b{background:var(--acc);color:var(--acc-txt);font-weight:700}
.tag.jp{background:var(--jp-bg,#e7f5ec);color:var(--jp-c,#1f6b49)}
.cd{margin:11px 0 0;font-size:13px;color:var(--desc,#44555f);line-height:1.68;
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.res.v-row .cd{-webkit-line-clamp:2}
.cm{display:flex;gap:13px;flex-wrap:wrap;margin-top:11px;font-size:12px;color:var(--sub);align-items:center}
.cm .jp{color:var(--jp-c,#1f6b49);font-weight:700}
.dots{display:inline-flex;gap:2px;vertical-align:middle;margin-left:3px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--dot,#d7dee5);display:block}
.dots i.on{background:var(--sky)}
.cf{margin-top:auto;padding-top:14px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.go{background:var(--acc);color:var(--acc-txt);font-weight:700;font-size:13px;padding:9px 16px;border-radius:var(--rp);transition:.16s}
.go:hover{filter:brightness(.94)}
.rd{font-size:12.5px;color:var(--sky-d);font-weight:700}
.rd:hover{text-decoration:underline}

/* リスト表示 */
.row{display:grid;grid-template-columns:56px 1fr 190px;gap:16px;padding:16px 18px;align-items:center;
 transition:box-shadow .2s,transform .2s}
.row:hover{box-shadow:var(--sh-h);transform:translateX(3px)}
.row .lg{width:52px;height:52px}
.row h3{margin:0 0 3px;font-size:17px;font-weight:700}
.row h3 .vd{font-size:12px;color:var(--sub);font-weight:400;margin-left:9px}
.row .cd{margin:0}
.row .tags{margin-top:8px}
.rr{text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.rr .cp{margin:0;background:none;padding:0}
.rr .cp b{font-size:18px}

.empty{grid-column:1/-1;background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:46px 20px;text-align:center}
.empty b{display:block;font-size:18px;margin-bottom:5px}
.empty p{margin:0 0 16px;font-size:13.5px;color:var(--sub)}

/* スマホ */
.mfab,.sheetbtn{display:none}
@media(max-width:920px){
  .body{grid-template-columns:1fr;padding-bottom:92px}
  .sidewrap{position:fixed;inset:0;z-index:70;border-radius:0;transform:translateY(100%);
   transition:transform .26s;display:flex;flex-direction:column;max-height:none}
  body.sheet #side{padding-bottom:86px;overscroll-behavior:contain}
  body.sheet .sidewrap{transform:none}
  body.sheet{overflow:hidden}
  .sidehd{position:sticky;top:0;z-index:2;padding:15px}
  .sclose{display:block}
  .mfab{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--hd-bg);color:var(--hd-txt);
   padding:11px 16px;align-items:center;gap:14px}
  .mfab .mo{background:var(--acc);color:var(--acc-txt);font-weight:700;padding:11px 22px;border-radius:var(--rp);flex:1}
  .mfab .mc b{font-size:19px;font-weight:900}
  body.sheet .mfab{display:none}
  body.sheet .sheetbtn{display:block;position:fixed;left:0;right:0;bottom:0;z-index:80;padding:12px 16px;
   background:var(--card);box-shadow:0 -4px 18px rgba(13,27,42,.14)}
  body.sheet .sheetbtn button{width:100%;background:var(--acc);color:var(--acc-txt);font-weight:700;padding:14px;border-radius:var(--rp);font-size:15px}
  .quickbar{position:static}
  .res.v-row{gap:11px}
  .row{grid-template-columns:44px 1fr;padding:14px}
  .row .lg{width:44px;height:44px}
  .rr{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;text-align:left;
   border-top:1px solid var(--line);padding-top:11px}
  .ttl{font-size:40px}
  .res.v-card{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px}
}

/* スマホはカードを詰める（1件が長くなりすぎないように） */
@media(max-width:560px){
  .res.v-card{grid-template-columns:1fr;gap:11px}
  .card{padding:14px}
  .lg{width:42px;height:42px}
  .cn h3{font-size:16px}
  .cp{margin-top:11px}
  .cp b{font-size:19px}
  .cd{-webkit-line-clamp:2;margin-top:9px}
  .cf{padding-top:11px}
  .go{padding:8px 15px;font-size:12.5px}
  .cm{margin-top:9px;gap:11px;font-size:11.5px}
  .tags{margin-top:9px}
  .bar{gap:9px}
  .cnt{width:100%}
  .barr{margin-left:0;width:100%}
  .barr select{flex:1}
}
/* スマホのヘッダー（テーマ側の指定より後に効かせるため body を付ける） */
@media(max-width:560px){
  body .ttl{font-size:33px;line-height:1.14}
  body .hd{padding:18px 0 18px}
  body .fresh{font-size:14px;gap:0 12px;margin:9px 0 14px}
  body .fdate{font-size:12px}
}

/* --- AI感の共通パーツ --- */
.cnt b{font-family:"Space Grotesk",var(--font)}
.hdfx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hdfx span{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55}
@media(prefers-reduced-motion:reduce){.hdfx span{animation:none!important}}

/* --- 更新のいきさつ（AIは動きが速いので、いつ調べたかを必ず見せる） --- */
.fresh{margin:10px 0 18px;font-size:15.5px;font-weight:700;color:var(--txt);
 display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;line-height:1.5}
.fdate{font-size:12.5px;font-weight:500;color:var(--sub)}

/* 読み上げソフト用のラベル（目には見せない） */
.scr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* AdSenseの自動リンクがリード文に入り込むのを避ける */
.google-anno-sc,.google-anno,[data-google-vignette]{display:none!important}

/* --- 条件パネルの補足（やりたいことの説明・予算の上限） --- */
.pband{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line)}
.pbl{display:block;font-size:11.5px;color:var(--sub);margin-bottom:3px;font-weight:700}

/* --- くわしく見る（プルダウンで開く詳細） --- */
.more{font-size:12.5px;font-weight:700;color:var(--sky-d);display:inline-flex;align-items:center;gap:6px;
 padding:9px 14px;border-radius:var(--rp);background:var(--more-bg,#eef4f9);transition:.16s;line-height:1}
.more:hover{background:var(--more-h,#e2edf5)}
.more i{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
 transform:rotate(45deg) translate(-1px,-2px);transition:transform .2s}
.more.on{background:var(--ink2);color:#fff}
.more.on i{transform:rotate(-135deg) translate(-2px,-1px)}

.det{margin-top:15px;padding-top:15px;border-top:1px solid var(--line);animation:dopen .22s ease}
@keyframes dopen{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.det{animation:none}}
.dsec{margin-bottom:13px}
.dsec h4{margin:0 0 4px;font-size:11.5px;font-weight:700;color:var(--sky-d);letter-spacing:.03em}
.dcare h4{color:var(--care-c,#c2554e)}
.dsec p{margin:0;font-size:13px;line-height:1.72;color:var(--desc,#3d4d59)}
.dl{margin:0 0 13px;font-size:12.5px;display:grid;grid-template-columns:6.2em 1fr}
.dcol>.dl:not(:first-child){border-top:1px solid var(--line)}
.dl dt{padding:7px 12px 7px 0;color:var(--sub);border-bottom:1px solid var(--line);line-height:1.5}
.dl dd{padding:7px 0;margin:0;border-bottom:1px solid var(--line);line-height:1.62}
.dl dd b{font-weight:700}
.dposts{margin:0;padding:0;list-style:none}
.dposts li{padding:7px 0;border-bottom:1px dashed var(--line);font-size:12.5px;display:flex;gap:10px;align-items:baseline}
.dposts li:last-child{border-bottom:0}
.dposts a{color:var(--sky-d);font-weight:700;line-height:1.55}
.dposts a:hover{text-decoration:underline}
.dposts span{margin-left:auto;color:var(--sub);font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dchk{margin:0 0 13px;font-size:11.5px;color:var(--sub);line-height:1.62}
.dgo{display:block;text-align:center}

/* 開いたカードは横いっぱいに広げ、上のひとかたまりは1行にまとめる */
.res.v-card .card.open{grid-column:1/-1;display:grid;align-items:center;gap:11px 22px;
 grid-template-columns:minmax(200px,270px) minmax(170px,1fr) auto;
 grid-template-areas:"head price btn" "tags tags tags" "desc desc desc" "det det det"}
.res.v-card .card.open>.ch{grid-area:head}
.res.v-card .card.open>.cp{grid-area:price;margin:0}
.res.v-card .card.open>.cf{grid-area:btn;margin:0;padding:0}
.res.v-card .card.open>.tags{grid-area:tags;margin:0;min-height:0}
.res.v-card .card.open>.cd{grid-area:desc;margin:0}
.res.v-card .card.open>.det{grid-area:det;margin-top:4px}
.card.open .cd,.row.open .cd{-webkit-line-clamp:unset;display:block}
/* 詳細の表に同じことが出るので、開いたら上の小さい表示は消す */
.card.open .cm{display:none}
.card.open .cf .go,.row.open .rr>.go{display:none}
.det{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;align-items:start}
.det>.dgo{grid-column:1/-1}
.dcol>*:last-child{margin-bottom:0}
.rdet{grid-column:1/-1}
.rdet .det{margin-top:13px;padding-top:13px}
.row.open{align-items:start}
@media(max-width:760px){
  .det{grid-template-columns:1fr;gap:0}
  .dl{grid-template-columns:5.6em 1fr}
  .res.v-card .card.open{grid-template-columns:1fr;
   grid-template-areas:"head" "price" "tags" "desc" "btn" "det"}
  .res.v-card .card.open>.cf{justify-self:start}
}
/* 案1 やさしい白：白い面とロゴで見せる。日本のECに近い形 */
:root{
  --bg:#f7f8fa; --card:#fff; --line:#eaeef2;
  --hd-bg:#fff; --hd-txt:#12212e; --hd-sub:#61707d;
  --acc:#1AC2F1; --acc-txt:#062633;
  --qb-bg:#fff; --qb-sh:0 1px 0 #eaeef2;
  --side-hd:#f2f6f9; --side-hd-txt:#12212e;
  --cnt-c:#0E9BC4; --cp-bg:#f5f8fb; --lg-bg:#fff;
  --r:12px; --rl:12px; --rt:5px;
  --sh:0 1px 2px rgba(13,27,42,.04),0 4px 14px rgba(13,27,42,.05);
}
.hd{border-bottom:1px solid var(--line);padding:20px 0 20px}
.hd .lead{color:#61707d}
.sbox{box-shadow:none;background:#f2f6f9;max-width:560px}
.sbox:focus-within{background:#fff;box-shadow:0 0 0 2px var(--acc)}
.ttl .lg1{color:#0E9BC4}
/* ロゴを白地で大きく見せる（ECのサムネイルと同じ考え方） */
.lg{width:48px;height:48px;padding:5px;box-shadow:0 0 0 1px #eef2f6}
.row .lg{width:56px;height:56px}
.cp{background:none;padding:0;margin-top:13px}
.cp b{font-size:22px;color:#12212e}
.card{padding:16px}
.card:hover{box-shadow:0 4px 10px rgba(13,27,42,.07),0 18px 40px rgba(13,27,42,.1)}
.go{box-shadow:0 2px 8px rgba(26,194,241,.35)}
.cnt b{color:#e0507a}
.cnt b{color:#e0507a}
/* 案B：白のまま、AI感だけ足す（光・グラデ・等幅の数字） */
:root{
  --acc:#1AC2F1; --acc-txt:#04222d;
}
body{background:
 radial-gradient(760px 420px at 6% 0,rgba(90,120,255,.09),transparent 62%),
 radial-gradient(680px 400px at 97% 3%,rgba(26,194,241,.11),transparent 60%),#f7f8fa;
 background-attachment:fixed}
/* ヘッダーは白のまま、うっすら光が動く */
.hd{background:#fff;position:relative;overflow:hidden}
.hdfx span:nth-child(1){width:420px;height:420px;left:-90px;top:-230px;background:#7aa8ff;opacity:.20;
 filter:blur(58px);animation:wf1 19s ease-in-out infinite alternate}
.hdfx span:nth-child(2){width:360px;height:360px;right:2%;top:-200px;background:#2fd0f0;opacity:.20;
 filter:blur(58px);animation:wf2 23s ease-in-out infinite alternate}
.hdfx span:nth-child(3){width:260px;height:260px;left:52%;bottom:-190px;background:#b78cff;opacity:.14;
 filter:blur(58px);animation:wf1 27s ease-in-out infinite alternate-reverse}
@keyframes wf1{to{transform:translate(64px,30px) scale(1.14)}}
@keyframes wf2{to{transform:translate(-54px,22px) scale(1.1)}}
/* タイトルだけ大きく斜めにして、色をゆっくり動かす（このページの見どころ） */
.ttl{font-size:52px;line-height:1.12;letter-spacing:-.01em;margin:2px 0 0}
.ttl>.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:ttlflow 14s linear infinite}
@keyframes ttlflow{from{background-position:0 0}to{background-position:-320% 0}}
@media(prefers-reduced-motion:reduce){.ttl>.tw{animation:none;background-position:14% 0}}
.ttl .lg1{color:inherit}
.sbox{background:#fff;box-shadow:0 2px 8px rgba(20,50,90,.07),0 12px 30px rgba(20,50,90,.09)}
.sbox:focus-within{box-shadow:0 0 0 3px rgba(26,194,241,.28),0 12px 30px rgba(20,50,90,.12)}
/* カードは白のまま、触ると水色の光がにじむ */
.card,.row{box-shadow:0 1px 2px rgba(13,27,42,.04),0 6px 18px rgba(13,27,42,.06)}
.card:hover,.row:hover{box-shadow:0 0 0 1px rgba(26,194,241,.4),0 12px 34px rgba(26,150,220,.2)}
.go{background:linear-gradient(96deg,#12b9e8,#3f8ae0);color:#fff;box-shadow:0 4px 14px rgba(26,150,220,.34)}
.vsw button.on{background:linear-gradient(96deg,#12b9e8,#3f8ae0);color:#fff}
.qp.on,.fgn{background:linear-gradient(96deg,#12b9e8,#3f8ae0);color:#fff}
.chip{background:#12314a}
.cnt b{background:linear-gradient(96deg,#3f6fe0,#12c2e9);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 用途の色を上端に細く（案3で好評だった見分け） */
.card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:12px 12px 0 0;background:var(--uc,#12b9e8)}
.card{padding-top:19px}
.u-chat{--uc:linear-gradient(90deg,#5b7cf0,#8ba6ff)}.u-write{--uc:linear-gradient(90deg,#2f9bd8,#7fd3f5)}
.u-image{--uc:linear-gradient(90deg,#e0568f,#ff9ec4)}.u-video{--uc:linear-gradient(90deg,#f0913a,#ffc27a)}
.u-voice{--uc:linear-gradient(90deg,#12b48a,#6fe3bf)}.u-music{--uc:linear-gradient(90deg,#8b5be0,#c69bff)}
.u-meeting{--uc:linear-gradient(90deg,#3aa0a8,#8adfe4)}.u-slide{--uc:linear-gradient(90deg,#4b7ef5,#95b8ff)}
.u-translate{--uc:linear-gradient(90deg,#2fb0b0,#84e3e3)}.u-code{--uc:linear-gradient(90deg,#5a6577,#9aa5b5)}
.u-agent{--uc:linear-gradient(90deg,#d4703a,#f5a670)}