/* 一覧ページ（2026-11-02 コラムから）。ヘッダー・フッターは vivid/chrome.css、ここは冒頭・パンくず・一覧・検索・サイドバー・ページ送りの見た目。
   機能と中身（表示件数・検索・絞り込み・サイドバーの項目・リンク先）はテーマのテンプレートのまま。見た目だけを下層ページの部品にそろえる
   （墨の2pxの線・ずらした影・Unboundedの英字・ピンクとオレンジの◆）。テーマの archive-column.css より後に読み、#main.column-index で詳細度をそろえて上書きする。 */
body.coletlab-vivid-list{
  --ink:#13202B;--paper:#F6F9FB;--sky:#EAF3FB;--muted:#4A5A66;
  --teal:#067B7B;--teal2:#0FA3A8;--aqua:#3ED6DC;--pink:#D23E66;--pink2:#F0587E;--orange:#F7894A;--lemon:#F5CF6B;
  --jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  /* 英字の飾りの書体。テーマ側にも --display があり、そちらが優先されて Inter になっていたので、一覧ページ専用の名前にする（2026-11-02） */
  --vl-display:"Unbounded","Inter","Noto Sans JP",sans-serif;
  background:var(--paper)
}
/* 冒頭の無いページ（記事・404・プライバシー・検索など）は地を白に。淡い地のままだと、ヘッダーとパンくずの後ろだけ色の帯に見えた（2026-11-02 ユーザー「パンくずヘッダーに背景色が設定されているので他のページ同様設定しないで」） */
body.coletlab-vivid-list:not(.vl-has-hero){background:#fff!important}
/* 同じく、パンくずの下のページ見出しの淡い水色の面も外す（2026-11-02 ユーザー「淡い水色を取りましょう」。プライバシー・AIの現状チェック・活用例の記事と、その下の他の活用例の面） */
body.coletlab-vivid-list:not(.vl-has-hero) :is(main#main,.privacy-hero,.solution-hero,.solution-others,.search-hero,.utility-page,.ai-check-page){background:transparent!important}
/* テーマの色の印。冒頭の帯・切り替えの印・記事カードの影で同じ色を使う */
body.coletlab-vivid-list .vl-c--ai-system{--c:#0FA3A8}
body.coletlab-vivid-list .vl-c--geo{--c:#3ED6DC}
body.coletlab-vivid-list .vl-c--seo{--c:#F5CF6B}
body.coletlab-vivid-list .vl-c--meo{--c:#F7894A}
body.coletlab-vivid-list .vl-c--sns{--c:#F0587E}
body.coletlab-vivid-list .vl-c--line{--c:#067B7B}
body.coletlab-vivid-list .vl-c--ad{--c:#D23E66}
body.coletlab-vivid-list .vl-c--web{--c:#1D3A4A}

/* パンくず：下層ページと同じく、冒頭の上に重ねる。◆の色の印で区切り、今いるページは太字の墨 */
body.coletlab-vivid-list.vl-has-hero .breadcrumb{position:absolute;top:96px;left:3vw;right:3vw;z-index:5;max-width:none;margin:0;padding:0;background:none}
body.coletlab-vivid-list .breadcrumb::before{content:none}
@media(max-width:1023px){body.coletlab-vivid-list.vl-has-hero .breadcrumb{top:80px;left:16px;right:16px}}
body.coletlab-vivid-list .breadcrumb__list{gap:0 12px;font:700 12px/1.6 var(--jp);letter-spacing:.06em;color:var(--ink)}
body.coletlab-vivid-list .breadcrumb__list a{color:var(--muted);font-weight:700;padding-block:2px}
body.coletlab-vivid-list .breadcrumb__list a::after{height:2px;background:var(--teal2)}
body.coletlab-vivid-list .breadcrumb__list a:hover{color:var(--ink)}
body.coletlab-vivid-list .breadcrumb__list li:first-child a::before{content:none}
body.coletlab-vivid-list .breadcrumb__sep{width:7px;height:7px;opacity:1;color:inherit}
body.coletlab-vivid-list .breadcrumb__sep::before{-webkit-mask:none;mask:none;border-radius:2px;rotate:45deg;background:linear-gradient(135deg,var(--pink2),var(--orange))}
body.coletlab-vivid-list .breadcrumb__list [aria-current="page"]{color:var(--ink);font-weight:800}
body.coletlab-vivid-list .site-main,body.coletlab-vivid-list #main{padding-top:0;margin-top:0}

/* 1 冒頭：左に見出しと説明、右に記事数の札（記事数・最終更新・テーマ別の帯） */
.vl-hero{position:relative;overflow:clip;padding:calc(78px + 96px) 6% clamp(56px,6vw,88px);color:var(--ink);font-feature-settings:"palt";
  background:radial-gradient(45% 55% at 100% 0%,rgba(240,88,126,.16),transparent 70%),radial-gradient(45% 55% at 0% 100%,rgba(62,214,220,.2),transparent 70%),linear-gradient(180deg,var(--sky),var(--paper))}
.vl-hero *,.vl-band *{box-sizing:border-box}
.vl-hero__inner{display:grid;gap:clamp(40px,5vw,72px);max-width:1240px;margin:0 auto}
/* 見出し（2026-11-02 ユーザー「ページ見出しのデザインがダサい」で作り直し。太い下線をやめ、英字の吹き出し・太い見出し・背景の大きな英字の輪郭に）
   英字の吹き出しはフィールドの節の見出しと同じ形。カテゴリー名の部分だけを色のグラデーションにする */
.vl-hero__kicker{position:relative;display:inline-block;margin:0;padding:9px 18px;border-radius:16px;background:var(--orange);color:#fff;font:800 12px/1.2 var(--vl-display);letter-spacing:.18em}
.vl-hero__kicker::after{content:"";position:absolute;left:20px;bottom:-9px;border:9px solid transparent;border-bottom:0;border-top-color:var(--orange)}
/* 大きな英字の COLUMN（2026-11-02 ユーザー指定）。グラデーションがゆっくり流れる（常に動くもの） */
/* 文字の大きさは左の列の幅に合わせる（列の幅を超えて切れ、スマホでは列が広がって右の札が画面外へ出た。2026-11-02 目視）。英字6文字は約5.6文字分の幅 */
.vl-hero__text{min-width:0;container-type:inline-size}
.vl-count{min-width:0}
.vl-hero__display{margin:22px 0 0;font:800 min(176px,100cqw / 5.7)/.95 var(--vl-display);letter-spacing:-.05em;color:transparent;background:linear-gradient(100deg,var(--teal2),var(--aqua) 22%,var(--pink2) 48%,var(--orange) 70%,var(--lemon) 86%,var(--teal2));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:vl-flow 9s ease-in-out infinite alternate;padding-bottom:.06em}
@keyframes vl-flow{to{background-position:100% 0}}
/* ページの見出し（日本語）。大きな英字の下に、墨の太字で */
.vl-hero__title{margin:clamp(16px,2vw,24px) 0 0;padding:0;border:0;background:none;font:900 clamp(24px,2.6vw,34px)/1.4 var(--jp);letter-spacing:.02em;color:var(--ink);word-break:auto-phrase;text-wrap-style:balance}
.vl-hero__title::before,.vl-hero__title::after{content:none}
.vl-hero__inner{position:relative;z-index:1}
.vl-hero__lead{margin-top:clamp(24px,3vw,36px)}
.vl-hero__lead p{margin:0;font:500 17px/1.95 var(--jp);color:var(--ink)}
.vl-count{align-self:end;padding:clamp(24px,3vw,36px);border:2px solid var(--ink);border-radius:28px;background:#fff;box-shadow:10px 10px 0 var(--teal2)}
.vl-count__num{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0}
.vl-count__value{font:800 clamp(56px,7vw,88px)/1 var(--vl-display);letter-spacing:-.04em;color:transparent;background:linear-gradient(110deg,var(--teal2),var(--pink2) 70%,var(--orange));-webkit-background-clip:text;background-clip:text}
.vl-count__unit{font:900 18px/1.4 var(--jp)}
.vl-count__date{margin:10px 0 0;font:700 13px/1.6 var(--jp);color:var(--muted)}
.vl-count__date time{font-family:var(--vl-display);font-weight:700;letter-spacing:.04em;color:var(--ink)}
.vl-count__label{margin:22px 0 0;font:800 13px/1.5 var(--jp);color:var(--ink)}
/* テーマ別の帯：幅は記事数に比例。触れたテーマは持ち上がる。札の名前は帯の下に並べる */
.vl-bar{display:flex;gap:3px;margin:10px 0 0;padding:0;list-style:none}
.vl-bar__seg{min-width:0;flex-basis:0}
.vl-bar__seg a{display:block;color:var(--ink);text-decoration:none}
.vl-bar__seg a::before{content:"";display:block;height:22px;border:2px solid var(--ink);border-radius:6px;background:var(--c);transition:translate .25s cubic-bezier(.16,1,.3,1)}
.vl-bar__seg a:hover::before,.vl-bar__seg a:focus-visible::before{translate:0 -5px}
.vl-bar__seg a:focus-visible{outline:3px solid var(--aqua);outline-offset:4px;border-radius:6px}
.vl-bar__name,.vl-bar__n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vl-bar__seg.is-current a::before{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.vl-hero .vl-bar:has(.is-current) .vl-bar__seg:not(.is-current) a::before{opacity:.35}
/* 常に動くもの：帯の上を光がゆっくり往復する */
.vl-bar{position:relative}
.vl-bar::after{content:"";position:absolute;top:0;left:0;width:18%;height:22px;border-radius:6px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:vl-shine 5.5s cubic-bezier(.65,0,.35,1) infinite;pointer-events:none}
@keyframes vl-shine{0%{translate:-20% 0}50%{translate:470% 0}100%{translate:-20% 0}}
@media(min-width:1024px){.vl-hero__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:clamp(48px,6vw,96px)}}

/* 流れる帯（テーマ名）。冒頭と一覧の区切り */
.vl-band{overflow:hidden;padding:14px 0;border-block:2px solid var(--ink);background:var(--ink)}
.vl-band__track{display:flex;align-items:center;gap:28px;width:max-content;animation:vl-marquee 38s linear infinite}
.vl-band__track span{font:800 clamp(18px,2vw,24px)/1.2 var(--jp);color:#fff;white-space:nowrap}
.vl-band__track i{flex:none;width:10px;height:10px;border-radius:2px;rotate:45deg;background:linear-gradient(135deg,var(--pink2),var(--orange))}
@keyframes vl-marquee{to{translate:-50% 0}}
/* フッターの上の会社名の帯（下層ページは GSAP で流す。一覧ページは CSS で同じ速さに） */
body.coletlab-vivid-list .vv-footer__marquee .vv-marquee__track{animation:vl-marquee 30s linear infinite}

/* 2 一覧の土台 */
body.coletlab-vivid-list #main.column-index,body.coletlab-vivid-list #main.column-index .column-archive{background:var(--paper)}
body.coletlab-vivid-list #main.column-index .column-archive{padding:clamp(56px,6vw,96px) 0 clamp(64px,7vw,112px)}
body.coletlab-vivid-list #main.column-index .column-archive__container{gap:clamp(40px,4vw,64px)}

/* 検索欄 */
body.coletlab-vivid-list #main.column-index .column-search{padding:0 0 28px;border-bottom:2px solid rgba(19,32,43,.12)}
body.coletlab-vivid-list #main.column-index .column-search label{font:800 15px/1.5 var(--jp);color:var(--ink)}
body.coletlab-vivid-list #main.column-index .column-search__fields{gap:10px;width:min(100%,440px)}
body.coletlab-vivid-list #main.column-index .column-search input[type=search]{min-height:52px;padding:12px 16px;border:2px solid var(--ink);border-radius:14px;background:#fff;font:500 16px/1.5 var(--jp)}
body.coletlab-vivid-list #main.column-index .column-search input[type=search]:focus{outline:3px solid var(--aqua);outline-offset:2px}
body.coletlab-vivid-list #main.column-index .column-search button{min-height:52px;padding:12px 24px;border:2px solid var(--ink);border-radius:14px;background:var(--ink);color:#fff;font:800 15px/1.4 var(--jp);box-shadow:4px 4px 0 var(--pink2);cursor:pointer;transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-list #main.column-index .column-search button:hover{translate:2px 2px;box-shadow:2px 2px 0 var(--pink2)}

/* カテゴリーの切り替え：白い札に色の◆。今いるテーマは墨の面 */
body.coletlab-vivid-list #main.column-index .column-archive__category-pills{gap:10px;margin:28px 0 24px}
body.coletlab-vivid-list #main.column-index .column-archive__category-pill{gap:8px;min-height:44px;padding:8px 16px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:800 14px/1.4 var(--jp);text-decoration:none;transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-list #main.column-index .column-archive__category-pill[class*="vl-c--"]::before{content:"";flex:none;width:9px;height:9px;border-radius:2px;rotate:45deg;background:var(--c)}
body.coletlab-vivid-list #main.column-index .column-archive__category-pill:hover{translate:0 -2px;box-shadow:0 4px 0 var(--ink)}
body.coletlab-vivid-list #main.column-index .column-archive__category-pill[aria-current=page]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--c,var(--pink2))}
body.coletlab-vivid-list #main.column-index .column-archive__summary{margin:0 0 28px;font:700 13px/1.6 var(--jp);color:var(--muted)}
body.coletlab-vivid-list #main.column-index .column-archive__summary strong:first-child{font:800 18px/1 var(--vl-display);color:var(--ink)}

/* 記事カード：白い面に墨の線、テーマの色でずらした影 */
body.coletlab-vivid-list #main.column-index .column-grid{gap:32px 28px}
body.coletlab-vivid-list #main.column-index .column-card{overflow:hidden;border:2px solid var(--ink);border-radius:22px;background:#fff;box-shadow:6px 6px 0 var(--c,var(--teal2));color:var(--ink);transition:translate .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1)}
body.coletlab-vivid-list #main.column-index .column-card:hover{translate:-2px -3px;box-shadow:9px 10px 0 var(--c,var(--teal2))}
body.coletlab-vivid-list #main.column-index .column-card__thumb{border-bottom:2px solid var(--ink)}
body.coletlab-vivid-list #main.column-index .column-card__category,body.coletlab-vivid-list #main.column-index .column-card__text-category{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:800 11px/1.5 var(--jp)}
body.coletlab-vivid-list #main.column-index .column-card__category::before,body.coletlab-vivid-list #main.column-index .column-card__text-category::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;rotate:45deg;background:var(--c,var(--pink2))}
body.coletlab-vivid-list #main.column-index .column-card__text-category{align-self:flex-start;margin-bottom:12px}
body.coletlab-vivid-list #main.column-index .column-card__body{padding:22px 24px 24px}
body.coletlab-vivid-list #main.column-index .column-card__meta{font:600 12px/1.8 var(--jp);color:var(--muted)}
body.coletlab-vivid-list #main.column-index .column-card__title{font:800 18px/1.7 var(--jp);color:var(--ink)}
body.coletlab-vivid-list #main.column-index .column-card__excerpt{font:500 14px/1.9 var(--jp);color:var(--muted)}

/* ページ送り */
body.coletlab-vivid-list #main.column-index .column-pagination{gap:10px;margin-top:56px}
body.coletlab-vivid-list #main.column-index .column-pagination__item{min-width:48px;min-height:48px;padding:0 12px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:800 15px/1 var(--vl-display);text-decoration:none;transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-list #main.column-index a.column-pagination__item:hover{translate:0 -2px;box-shadow:0 4px 0 var(--ink)}
body.coletlab-vivid-list #main.column-index .column-pagination__item.is-current{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--pink2)}

/* サイドバー（コラム・お知らせ共通）：各まとまりを白い面に墨の線とずらした影。見出しは色の◆と太字 */
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-block{padding:24px!important;border:2px solid var(--ink)!important;border-radius:22px!important;background:#fff!important;box-shadow:6px 6px 0 var(--sky)}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-block:nth-child(3n+1){box-shadow:6px 6px 0 var(--aqua)!important}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-block:nth-child(3n+2){box-shadow:6px 6px 0 var(--lemon)!important}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-block:nth-child(3n){box-shadow:6px 6px 0 var(--pink2)!important}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-block + .sidebar-block{margin-top:28px}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-block__title{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:0;border:0;background:none;font:900 16px/1.5 var(--jp);color:var(--ink)}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-block__title::before{content:"";flex:none;width:9px;height:9px;border-radius:2px;rotate:45deg;background:linear-gradient(135deg,var(--pink2),var(--orange))}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-block__title::after{content:none}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) a{color:var(--ink)}
/* サイドバーの小さな部品：分類の札は記事カードと同じ白い札、カテゴリーは切り替えの札と同じ形、関連ページは墨の線の面 */
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) :is(.sidebar-ranking__cat,.sidebar-recent__cat){display:inline-block;margin-left:6px;padding:1px 9px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:800 10.5px/1.6 var(--jp);vertical-align:2px}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-recent__date{font:700 12px/1.6 "Unbounded","Inter",sans-serif;letter-spacing:.02em;color:var(--muted)}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-cats{gap:8px}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-cats a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border:2px solid var(--ink);border-radius:999px;background:#fff;font:800 13px/1.4 var(--jp);transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-cats a:hover{translate:0 -2px;box-shadow:0 3px 0 var(--ink);color:var(--ink)}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-cats__count{font:700 11px/1 "Unbounded","Inter",sans-serif;color:var(--pink)}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-link{border:2px solid var(--ink);border-radius:14px;background:#fff;box-shadow:none;transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-link:hover{translate:0 -2px;box-shadow:0 4px 0 var(--ink);background:#fff}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-link__title{font:800 14px/1.5 var(--jp);color:var(--ink)}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) a:hover{color:var(--pink)}

/* 関連ページへのリンク：下層ページのボタンと同じ形 */
body.coletlab-vivid-list #main.column-index .column-related{background:none;gap:16px;padding:40px 0 clamp(64px,7vw,104px);border-top:2px solid rgba(19,32,43,.12)}
body.coletlab-vivid-list #main.column-index .column-related a{gap:12px;min-height:52px;padding:12px 22px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:800 15px/1.4 var(--jp);box-shadow:4px 4px 0 var(--teal2);transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-list #main.column-index .column-related a:hover{translate:2px 2px;box-shadow:2px 2px 0 var(--teal2)}
body.coletlab-vivid-list #main.column-index :is(a,input,button):focus-visible{outline:3px solid var(--aqua);outline-offset:4px}

@media(max-width:767px){
  .vl-hero{padding:calc(64px + 80px) 20px 48px}
  .vl-hero__title{font-size:22px}
  .vl-hero__lead p{font-size:16px}
  .vl-count{box-shadow:7px 7px 0 var(--teal2)}
  body.coletlab-vivid-list #main.column-index .column-card{border-radius:18px;box-shadow:5px 5px 0 var(--c,var(--teal2))}
  body.coletlab-vivid-list #main.column-index .column-card__thumb{border-bottom:0}
  body.coletlab-vivid-list #main.column-index .column-card__thumb img{border:2px solid var(--ink);border-radius:8px}
  body.coletlab-vivid-list #main.column-index .column-card__title{font-size:16px;line-height:1.65}
  /* スマホは画像と題名を横に並べる。本文の内側の余白（パソコン用）を外し、カードの内側の余白だけにする（題名の列が細く5〜6行に割れた。2026-11-02 目視） */
  body.coletlab-vivid-list #main.column-index .column-card{grid-template-columns:104px minmax(0,1fr);gap:14px;padding:16px}
  body.coletlab-vivid-list #main.column-index .column-card__body{padding:0}
  /* 写真の下の狭い列ではカテゴリーの札が「Web広告運/用」のように折れたので、札だけカードの一番上の行に出す（文字だけのカードと同じ位置。2026-11-02 目視） */
  body.coletlab-vivid-list #main.column-index .column-card:has(.column-card__thumb){grid-template-areas:"cat cat" "thumb body";row-gap:12px}
  body.coletlab-vivid-list #main.column-index .column-card__thumb{display:contents}
  body.coletlab-vivid-list #main.column-index .column-card__thumb img{grid-area:thumb;align-self:start}
  body.coletlab-vivid-list #main.column-index .column-card__category{grid-area:cat;position:static!important;inset:auto!important;transform:none!important;justify-self:start;margin:0!important;padding:3px 10px!important;font-size:11px!important;white-space:nowrap!important}
  body.coletlab-vivid-list #main.column-index .column-card__body{grid-area:body}
  body.coletlab-vivid-list #main.column-index .column-card__text-category{justify-self:start;width:auto;margin-bottom:0}
  body.coletlab-vivid-list #main.column-index .column-archive__category-pill{padding:7px 13px;font-size:13px}
  body.coletlab-vivid-list #main.column-index .column-related a{width:100%;justify-content:space-between}
}

/* お知らせ（2026-11-02）。大きな英字は4文字なので、列の幅に対する大きさを変える */
.vl-hero__display--short{font-size:min(190px,100cqw / 3.9)}
/* 右の札：最新のお知らせ1件と件数 */
.vl-latest__label{display:flex;align-items:center;gap:10px;margin:0;font:800 13px/1.5 var(--jp);color:var(--ink)}
.vl-latest__new{display:inline-block;padding:3px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--pink2);color:#fff;font:800 12px/1.4 var(--jp)}
.vl-latest__link{display:grid;gap:8px;margin-top:18px;padding:18px 20px;border:2px solid var(--ink);border-radius:18px;background:var(--sky);color:var(--ink);text-decoration:none;transition:translate .2s,box-shadow .2s}
.vl-latest__link:hover{translate:0 -3px;box-shadow:0 5px 0 var(--ink)}
.vl-latest__link:focus-visible{outline:3px solid var(--aqua);outline-offset:4px}
.vl-latest__date{font:700 14px/1.4 var(--vl-display);letter-spacing:.04em;color:var(--teal)}
.vl-latest__title{font:800 17px/1.7 var(--jp);word-break:auto-phrase}
.vl-latest__more{justify-self:end;font:800 13px/1.4 var(--jp);color:var(--pink)}
.vl-latest__total{display:flex;align-items:baseline;gap:6px;margin:18px 0 0;font:800 14px/1.4 var(--jp);color:var(--muted)}
.vl-latest__n{font:800 34px/1 var(--vl-display);letter-spacing:-.03em;color:transparent;background:linear-gradient(110deg,var(--teal2),var(--pink2) 70%,var(--orange));-webkit-background-clip:text;background-clip:text}

/* お知らせの一覧：白い面に墨の線、年の見出しは英字の太字と◆、行は触れると淡い面と矢印 */
body.coletlab-vivid-list #main.info-index,body.coletlab-vivid-list #main.info-index .info-archive{background:var(--paper)}
body.coletlab-vivid-list #main.info-index .info-archive{padding:clamp(56px,6vw,96px) 0 clamp(64px,7vw,112px)}
body.coletlab-vivid-list #main.info-index .ar-count{margin:0 0 24px;font:700 13px/1.6 var(--jp);color:var(--muted)}
body.coletlab-vivid-list #main.info-index .ar-count strong{font:800 18px/1 var(--vl-display);color:var(--ink)}
body.coletlab-vivid-list #main.info-index .ar-lines{padding:8px clamp(20px,3vw,36px) 16px;border:2px solid var(--ink);border-radius:24px;background:#fff;box-shadow:8px 8px 0 var(--pink2)}
body.coletlab-vivid-list #main.info-index .ar-year{display:flex;align-items:center;gap:14px;margin:28px 0 6px;font:800 clamp(22px,2.4vw,30px)/1 var(--vl-display);letter-spacing:-.02em;color:var(--ink)}
body.coletlab-vivid-list #main.info-index .ar-year:first-child{margin-top:20px}
body.coletlab-vivid-list #main.info-index .ar-year::before{content:"";flex:none;order:-1;width:11px;height:11px;border-radius:2px;rotate:45deg;background:linear-gradient(135deg,var(--pink2),var(--orange))}
body.coletlab-vivid-list #main.info-index .ar-year::after{height:2px;background:rgba(19,32,43,.12)}
body.coletlab-vivid-list #main.info-index .ar-line{border-bottom:1px solid rgba(19,32,43,.12)}
body.coletlab-vivid-list #main.info-index .ar-line:last-child{border-bottom:0}
body.coletlab-vivid-list #main.info-index .ar-line__link{position:relative;padding:18px 44px 18px 10px;border-radius:12px;transition:background-color .2s}
body.coletlab-vivid-list #main.info-index .ar-line__link::after{content:"→";position:absolute;right:12px;top:50%;translate:0 -50%;font:800 16px/1 var(--jp);color:var(--pink);opacity:.35;transition:opacity .2s,translate .2s}
body.coletlab-vivid-list #main.info-index .ar-line__link:hover{background:var(--sky)}
body.coletlab-vivid-list #main.info-index .ar-line__link:hover::after{opacity:1;translate:4px -50%}
body.coletlab-vivid-list #main.info-index .ar-line__date{font:700 13px/1.4 var(--vl-display);letter-spacing:.04em;color:var(--teal)}
body.coletlab-vivid-list #main.info-index .ar-line__new{padding:2px 10px;border:2px solid var(--ink);background:var(--pink2);font:800 11px/1.4 var(--jp)}
body.coletlab-vivid-list #main.info-index .ar-line__name{font:700 16px/1.75 var(--jp);color:var(--ink)}
body.coletlab-vivid-list #main.info-index .ar-line__link:hover .ar-line__name{text-decoration:none;color:var(--pink)}
body.coletlab-vivid-list #main.info-index .ar-line--lead{border-bottom-color:rgba(19,32,43,.12)}
body.coletlab-vivid-list #main.info-index .ar-line--lead .ar-line__name{font-size:18px;font-weight:800}
body.coletlab-vivid-list #main.info-index .info-pagination{gap:10px;margin-top:48px}
body.coletlab-vivid-list #main.info-index .info-pagination__item{display:inline-grid;place-items:center;min-width:48px;min-height:48px;padding:0 12px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:800 15px/1 var(--vl-display);text-decoration:none;transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-list #main.info-index a.info-pagination__item:hover{translate:0 -2px;box-shadow:0 4px 0 var(--ink)}
body.coletlab-vivid-list #main.info-index .info-pagination__item.is-current{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--pink2)}
body.coletlab-vivid-list #main.info-index .utility-links{display:flex;flex-wrap:wrap;gap:16px;margin-inline:auto;padding:40px 0 clamp(64px,7vw,104px);border-top:2px solid rgba(19,32,43,.12);background:none}
body.coletlab-vivid-list #main.info-index .utility-links a{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 22px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:800 15px/1.4 var(--jp);text-decoration:none;box-shadow:4px 4px 0 var(--teal2);transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-list #main.info-index .utility-links a:hover{translate:2px 2px;box-shadow:2px 2px 0 var(--teal2)}
/* 「新着」の札が日付の列で縦に折れた（2026-11-02 目視）。日付の列を広げ、札は折り返さない */
body.coletlab-vivid-list #main.info-index .ar-line__new{white-space:nowrap;color:#fff}
@media(min-width:768px){body.coletlab-vivid-list #main.info-index .ar-line__link{grid-template-columns:220px minmax(0,1fr);align-items:center}}
/* サイドバーの検索欄（お知らせの一覧だけに出る）：コラムの検索欄と同じ形 */
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-search{display:flex;gap:8px}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-search__input{flex:1;min-width:0;min-height:48px;padding:10px 14px;border:2px solid var(--ink);border-radius:14px;background:#fff;font:500 15px/1.5 var(--jp)}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-search__input:focus{outline:3px solid var(--aqua);outline-offset:2px}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-search__btn{flex:none;min-width:48px;min-height:48px;border:2px solid var(--ink);border-radius:14px;background:var(--ink);color:#fff;box-shadow:3px 3px 0 var(--pink2)}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-search__hint{margin-top:10px;font:600 12px/1.6 var(--jp);color:var(--muted)}
@media(max-width:767px){
  body.coletlab-vivid-list #main.info-index .ar-lines{padding:4px 16px 10px;border-radius:20px;box-shadow:6px 6px 0 var(--pink2)}
  body.coletlab-vivid-list #main.info-index .ar-line__link{padding:16px 34px 16px 4px}
  body.coletlab-vivid-list #main.info-index .ar-line__link::after{right:6px}
  body.coletlab-vivid-list #main.info-index .utility-links a{width:100%}
}

/* 一覧の冒頭の共通部品（template-parts/vivid-archive-hero.php。ラボノート・ラボの棚・業種別のAI活用例）
   大きな英字は文字数（--vl-chars）に合わせて左の列に収める。右の札には補足の節と関連ページへのリンク */
.vl-hero__display--fit{font-size:min(176px,100cqw / (var(--vl-chars) * .95))}
.vl-side__title{margin:0;font:900 17px/1.5 var(--jp);color:var(--ink)}
.vl-side__text{margin:10px 0 0;font:500 15px/1.9 var(--jp);color:var(--ink)}
.vl-side__links{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}
.vl-side__title + .vl-side__text + .vl-side__links{margin-top:22px}
.vl-side__links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 20px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:800 15px/1.4 var(--jp);text-decoration:none;box-shadow:4px 4px 0 var(--teal2);transition:translate .2s,box-shadow .2s}
.vl-side__links a:hover{translate:2px 2px;box-shadow:2px 2px 0 var(--teal2)}
.vl-side__links a:focus-visible{outline:3px solid var(--aqua);outline-offset:4px}
.vl-count.vl-side{align-self:center}

/* ═══ 残りのページ（2026-11-02 ユーザー「全てのページを終わらせて。掲載文章はほぼ触らず、デザイン変更の要素が残るページ」） ═══
   掲載文・構成は変えず、見た目だけを下層ページの部品（墨の2pxの線・ずらした影・英字の吹き出し・色の◆）にそろえる。
   記事の個別ページは 2026-09-20 のユーザー指示どおり、本文・記事幅・題名と画像の順・見出しの飾り・行間は変えない（サイドバー・CTA・シェア・関連記事・著者欄だけ） */
body.coletlab-vivid-list{color:var(--ink)}
/* 冒頭の無いページ（記事・404・プライバシーなど）は、パンくずが固定ヘッダーの裏に隠れないよう、ヘッダーの高さ分だけ下げる（2026-11-02 実測で top 0 だった） */
body.coletlab-vivid-list:not(.vl-has-hero) .breadcrumb{padding-top:100px!important;background:none}
@media(max-width:1023px){body.coletlab-vivid-list:not(.vl-has-hero) .breadcrumb{padding-top:84px!important}}
body.coletlab-vivid-list:not(.vl-has-hero) .breadcrumb::before{content:none}

/* 小さな英字・ラベル：オレンジの吹き出し（一覧の冒頭のラベルと同じ形） */
body.coletlab-vivid-list :is(.utility-label,.privacy-hero__overline,.ac-hero__eyebrow,.search-hero__label,.search-hero__overline,.search-hero .section-label){position:relative;display:inline-block;margin-bottom:20px;padding:8px 16px;border-radius:14px;background:var(--orange);color:#fff;font:800 11px/1.3 var(--vl-display);letter-spacing:.16em;text-transform:uppercase}
body.coletlab-vivid-list :is(.utility-label,.privacy-hero__overline,.ac-hero__eyebrow,.search-hero__label,.search-hero__overline)::after{content:"";position:absolute;left:18px;bottom:-8px;border:8px solid transparent;border-bottom:0;border-top-color:var(--orange)}
/* ページの見出し */
body.coletlab-vivid-list :is(.utility-heading,.privacy-hero__title,.search-hero h1){font-weight:900;color:var(--ink);letter-spacing:-.01em}
/* 冒頭の面：一覧の冒頭と同じ淡い色の広がり */
body.coletlab-vivid-list :is(.utility-page,.privacy-hero,.search-hero,.ai-check-page){background:radial-gradient(40% 50% at 100% 0%,rgba(240,88,126,.12),transparent 70%),radial-gradient(40% 50% at 0% 30%,rgba(62,214,220,.14),transparent 70%),var(--paper)}
body.coletlab-vivid-list .privacy-hero__bg-typo{font-family:var(--vl-display);color:transparent;-webkit-text-stroke:1.5px rgba(19,32,43,.08)}

/* 枠：白い面に墨の線とずらした影 */
body.coletlab-vivid-list :is(.utility-reply,.privacy-toc,.ac-card,.single-post__inline-cta,.single-post__cta-card,.single-post__author--footer){border:2px solid var(--ink)!important;border-radius:22px!important;background:#fff!important;box-shadow:7px 7px 0 var(--teal2)!important}
body.coletlab-vivid-list .privacy-toc{box-shadow:7px 7px 0 var(--lemon)!important}
body.coletlab-vivid-list .single-post__inline-cta{box-shadow:7px 7px 0 var(--pink2)!important}
body.coletlab-vivid-list :is(.privacy-section__num){font-family:var(--vl-display);color:var(--pink)}

/* 入力欄とボタン */
body.coletlab-vivid-list #main :is(.utility-search input[type=search],.utility-search input[type=text],.search-hero__form-input){min-height:52px;padding:12px 16px;border:2px solid var(--ink);border-radius:14px;background:#fff;font:500 16px/1.5 var(--jp)}
body.coletlab-vivid-list #main :is(.utility-search button,.search-hero__form-submit){min-height:52px;padding:12px 24px;border:2px solid var(--ink);border-radius:14px;background:var(--ink);color:#fff;font:800 15px/1.4 var(--jp);box-shadow:4px 4px 0 var(--pink2);cursor:pointer}
body.coletlab-vivid-list #main .ac-btn{border:2px solid var(--ink);border-radius:999px;box-shadow:5px 5px 0 var(--ink);transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-list #main .ac-btn:hover{translate:2px 2px;box-shadow:3px 3px 0 var(--ink)}
/* 記事のCTAのボタン（色は2026-09-23に決めたピンクのまま。墨の線とずらした影を足す） */
body.coletlab-vivid-list #main :is(.single-post__inline-cta__btn,.solution-inline-cta__btn,.final-cta__primary){border:2px solid var(--ink)!important;border-radius:999px!important;box-shadow:4px 4px 0 var(--ink)!important;transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-list #main :is(.single-post__inline-cta__btn,.solution-inline-cta__btn,.final-cta__primary):hover{translate:2px 2px;box-shadow:2px 2px 0 var(--ink)!important}

/* 移動先のリンク（404・thanks）：白い札とずらした影 */
body.coletlab-vivid-list #main .utility-destinations a{border:2px solid var(--ink);border-radius:18px;background:#fff;padding:16px 18px;box-shadow:5px 5px 0 var(--teal2);transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-list #main .utility-destinations a:hover{translate:2px 2px;box-shadow:3px 3px 0 var(--teal2)}
body.coletlab-vivid-list #main .utility-links a{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 20px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:800 14px/1.4 var(--jp);text-decoration:none;box-shadow:4px 4px 0 var(--teal2)}
body.coletlab-vivid-list #main .utility-services a{display:inline-flex;margin:0 6px 8px 0;padding:6px 14px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:700 13px/1.4 var(--jp);text-decoration:none}
body.coletlab-vivid-list #main .utility-phone{font-family:var(--vl-display);color:var(--ink)}

/* 一覧のカード（ラボノート・ラボの棚・業種別のAI活用例・検索結果・関連記事）：白い面に墨の線と色の影 */
body.coletlab-vivid-list #main :is(.ailab-card,.resource-item,.solution-card,.search-result,.single-post__related-card){overflow:hidden;border:2px solid var(--ink)!important;border-radius:22px!important;background:#fff!important;box-shadow:6px 6px 0 var(--teal2)!important;transition:translate .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1)}
body.coletlab-vivid-list #main :is(.ailab-card,.resource-item,.solution-card,.search-result,.single-post__related-card):nth-child(3n+2){box-shadow:6px 6px 0 var(--pink2)!important}
body.coletlab-vivid-list #main :is(.ailab-card,.resource-item,.solution-card,.search-result,.single-post__related-card):nth-child(3n){box-shadow:6px 6px 0 var(--lemon)!important}
body.coletlab-vivid-list #main :is(.ailab-card,.solution-card,.single-post__related-card):hover{translate:-2px -3px}
body.coletlab-vivid-list #main :is(.ailab-card__tag,.resource-tags a,.resource-tags span,.search-result__type,.single-post__related-card-cat,.sidebar-tags a){display:inline-flex;align-items:center;padding:2px 10px;border:1.5px solid var(--ink)!important;border-radius:999px!important;background:#fff!important;color:var(--ink)!important;font:800 11px/1.6 var(--jp)}
body.coletlab-vivid-list #main :is(.ailab-card__date,.search-result__date){font-family:var(--vl-display);font-weight:700;letter-spacing:.02em;color:var(--teal)}
body.coletlab-vivid-list #main :is(.ailab-archive-list__title,.single-post__related-title){display:flex;align-items:center;gap:12px;font-weight:900;color:var(--ink)}
body.coletlab-vivid-list #main :is(.ailab-archive-list__title,.single-post__related-title)::before{content:"";flex:none;width:11px;height:11px;border-radius:2px;rotate:45deg;background:linear-gradient(135deg,var(--pink2),var(--orange))}
/* 絞り込み（ラボの棚のタグ・検索結果の種類） */
body.coletlab-vivid-list #main :is(.resource-filters__links a,.search-tabs__item){display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border:2px solid var(--ink)!important;border-radius:999px!important;background:#fff!important;color:var(--ink)!important;font:800 13px/1.4 var(--jp);text-decoration:none}
body.coletlab-vivid-list #main :is(.resource-filters__links a[aria-current],.search-tabs__item[aria-current],.search-tabs__item.is-active){background:var(--ink)!important;color:#fff!important;box-shadow:4px 4px 0 var(--pink2)}
body.coletlab-vivid-list #main .resource-filters__label{font:800 14px/1.5 var(--jp);color:var(--ink)}

/* 記事のシェア */
body.coletlab-vivid-list #main .single-post__share-btn{border:2px solid var(--ink)!important;border-radius:999px!important;background:#fff!important;color:var(--ink)!important;font-weight:800;box-shadow:3px 3px 0 var(--aqua)}
body.coletlab-vivid-list #main .single-post__share-title{font-family:var(--vl-display);font-weight:700;letter-spacing:.14em;color:var(--orange)}


/* 英字の飾りの書体を必ず Unbounded にする（2026-11-02 ユーザー「NEWS変わってない気がする。他にも変わってない箇所ありそう」）。
   テーマ側の段落（p）などの書体の指定のほうが強く、お知らせの NEWS・ラベルなどが Inter のままだった。書体の指定だけを優先する */
.vl-hero__kicker,
.vl-hero__display,
.vl-count__value,
.vl-count__date time,
body.coletlab-vivid-list #main.column-index .column-archive__summary strong:first-child,
body.coletlab-vivid-list #main.column-index .column-pagination__item,
.vl-latest__date,
.vl-latest__n,
body.coletlab-vivid-list #main.info-index .ar-count strong,
body.coletlab-vivid-list #main.info-index .ar-year,
body.coletlab-vivid-list #main.info-index .ar-line__date,
body.coletlab-vivid-list #main.info-index .info-pagination__item,
body.coletlab-vivid-list :is(.utility-label,
.privacy-hero__overline,
.ac-hero__eyebrow,
.search-hero__label,
.search-hero .section-label),
body.coletlab-vivid-list .privacy-hero__bg-typo,
body.coletlab-vivid-list :is(.privacy-section__num),
body.coletlab-vivid-list #main .utility-phone,
body.coletlab-vivid-list #main :is(.ailab-card__date,
.search-result__date),
body.coletlab-vivid-list #main .single-post__share-title{font-family:var(--vl-display)!important}

/* 流れる帯・分類の札・カテゴリーの切り替えの英字も Unbounded に（2026-11-02 全ページの洗い出しで、英字が Inter／Noto Sans JP のまま残っていた）。
   書体の並びの先頭を Unbounded にして、英字だけ Unbounded、日本語は Noto Sans JP で表示する。本文の中の英単語は対象外 */
body.coletlab-vivid-list :is(.vl-band__track span,.column-archive__category-pill,.column-card__category,.column-card__text-category,.sidebar-ranking__cat,.sidebar-recent__cat,.sidebar-cats a,.ailab-card__tag,.search-result__type,.single-post__related-card-cat,.search-tabs__item,.resource-filters__links a){font-family:"Unbounded","Noto Sans JP","Hiragino Sans",sans-serif!important}

/* 追従サイドバー（2026-11-02 ユーザー「追従サイドバーも」「あわせて検討したいサービスはデザインが変。テキストも枠のギリギリ」）
   この記事に関連するサービス：白い面に墨の線とピンクの影、ラベルはオレンジの吹き出し、絵は丸い写真、詳しく見るは墨の札
   あわせて検討したいサービス：各サービスを内側に余白のある白い札に。名前・説明・矢印 */
body.coletlab-vivid-list #main .sidebar-training{display:grid;gap:10px;padding:26px 24px!important;border:2px solid var(--ink)!important;border-top-width:2px!important;border-radius:24px!important;background:#fff!important;box-shadow:7px 7px 0 var(--pink2)!important;color:var(--ink)!important;text-decoration:none;transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-list #main .sidebar-training:hover{translate:-2px -2px;box-shadow:9px 9px 0 var(--pink2)!important}
body.coletlab-vivid-list #main .sidebar-training__visual{display:block;justify-self:center;width:132px;height:132px;margin-bottom:6px;border:3px solid #fff;border-radius:50%;overflow:hidden;background:var(--sky);box-shadow:0 10px 24px -12px rgba(19,32,43,.45)}
body.coletlab-vivid-list #main .sidebar-training__visual img{display:block;width:100%;height:100%;object-fit:cover}
body.coletlab-vivid-list #main .sidebar-training__label{justify-self:start;padding:5px 12px;border-radius:12px;background:var(--orange);color:#fff;font:800 11px/1.4 var(--jp);letter-spacing:.04em}
body.coletlab-vivid-list #main .sidebar-training__title{font:900 20px/1.4 var(--jp);color:var(--ink)}
body.coletlab-vivid-list #main .sidebar-training__desc{font:600 14px/1.8 var(--jp);color:var(--muted);word-break:auto-phrase}
body.coletlab-vivid-list #main .sidebar-training__cta{justify-self:start;display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:9px 18px;border-radius:999px;background:var(--ink);color:#fff;font:800 13px/1.4 var(--jp);box-shadow:3px 3px 0 var(--pink2)}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-links{display:grid;gap:12px}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-link{position:relative;display:block;padding:14px 44px 14px 16px!important;border:2px solid var(--ink)!important;border-radius:16px!important;background:#fff!important}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-link::after{content:"→";position:absolute;right:16px;top:50%;translate:0 -50%;font:800 15px/1 var(--jp);color:var(--pink)}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-link__body{display:grid;gap:4px}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-link__desc{font:600 12.5px/1.7 var(--jp);color:var(--muted)}
body.coletlab-vivid-list #main :is(.archive-sidebar,.single-post__sidebar) .sidebar-link__title{font:800 15px/1.55 var(--jp);color:var(--ink);word-break:auto-phrase}

/* 記事内の「この記事に関連するサービス」（2026-11-02）：白い面に墨の線と色の影。写真は丸く、名前はオレンジの吹き出し、ボタンは墨の丸い札 */
body.coletlab-vivid-list #main.column-article .single-post__next-lp{padding:28px!important;border:2px solid var(--ink)!important;border-radius:26px!important;background:#fff!important;box-shadow:8px 8px 0 var(--aqua)!important;align-items:center}
body.coletlab-vivid-list #main.column-article .single-post__next-lp__visual{overflow:hidden!important}
body.coletlab-vivid-list #main.column-article .single-post__next-lp__label{justify-self:start;display:inline-block;margin:0 0 12px!important;padding:5px 12px;border-radius:12px;background:var(--orange);color:#fff!important;font:800 11.5px/1.4 var(--jp)!important;letter-spacing:.04em}
body.coletlab-vivid-list #main.column-article .single-post__next-lp__title{font:900 20px/1.5 var(--jp)!important;color:var(--ink)!important;word-break:auto-phrase}
body.coletlab-vivid-list #main.column-article .single-post__next-lp__desc{color:var(--muted)!important}
body.coletlab-vivid-list #main.column-article .single-post__next-lp__btn{border:2px solid var(--ink)!important;border-radius:999px!important;background:var(--ink)!important;color:#fff!important;box-shadow:4px 4px 0 var(--pink2)!important}

/* お知らせ記事のサイドバーと「最近のお知らせ」（2026-11-02）：コラムのサイドバーと同じ白い札・墨の線・色の影。文字が枠に付かないよう内側に余白 */
body.coletlab-vivid-list #main .info-sidebar{display:grid;gap:28px;align-content:start}
body.coletlab-vivid-list #main .info-sidebar__section{padding:24px!important;border:2px solid var(--ink)!important;border-radius:22px!important;background:#fff!important;box-shadow:6px 6px 0 var(--aqua)}
body.coletlab-vivid-list #main .info-sidebar__section:nth-child(2){box-shadow:6px 6px 0 var(--lemon)}
body.coletlab-vivid-list #main .info-sidebar__section:nth-child(3){box-shadow:6px 6px 0 var(--pink2)}
body.coletlab-vivid-list #main .info-sidebar__heading{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:0;border:0;font:900 16px/1.5 var(--jp)!important;color:var(--ink)}
body.coletlab-vivid-list #main .info-sidebar__heading::before{content:"";flex:none;width:9px;height:9px;border-radius:2px;rotate:45deg;background:linear-gradient(135deg,var(--pink2),var(--orange))}
body.coletlab-vivid-list #main .info-sidebar__heading::after{content:none}
body.coletlab-vivid-list #main .info-sidebar__search{display:flex;gap:8px}
body.coletlab-vivid-list #main .info-sidebar__search input{flex:1;min-width:0;min-height:48px;padding:10px 14px;border:2px solid var(--ink)!important;border-radius:14px!important;background:#fff;font:500 15px/1.5 var(--jp)}
body.coletlab-vivid-list #main .info-sidebar__search button{flex:none;display:grid;place-items:center;min-width:48px;min-height:48px;border:2px solid var(--ink)!important;border-radius:14px!important;background:var(--ink)!important;color:#fff;box-shadow:3px 3px 0 var(--pink2)}
body.coletlab-vivid-list #main .info-sidebar__search button svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.4}
body.coletlab-vivid-list #main .info-sidebar__hint{margin-top:10px;font:600 12px/1.6 var(--jp);color:var(--muted)}
body.coletlab-vivid-list #main .info-sidebar__recent a,body.coletlab-vivid-list #main .info-sidebar__nav a{color:var(--ink)}
body.coletlab-vivid-list #main .info-sidebar__recent{display:grid;gap:0;margin:0;padding:0;list-style:none}
body.coletlab-vivid-list #main .info-sidebar__recent li{padding:12px 0;border-bottom:1px dashed rgba(19,32,43,.22)}
body.coletlab-vivid-list #main .info-sidebar__recent li:first-child{padding-top:0}
body.coletlab-vivid-list #main .info-sidebar__recent a{display:grid;gap:4px;text-decoration:none}
body.coletlab-vivid-list #main .info-sidebar__recent time{font:700 11.5px/1.5 "Unbounded","Noto Sans JP",sans-serif;color:var(--teal2);letter-spacing:.04em}
body.coletlab-vivid-list #main .info-sidebar__recent span{font:700 14px/1.6 var(--jp)}
body.coletlab-vivid-list #main .info-sidebar__recent a:hover span{color:var(--pink)}
body.coletlab-vivid-list #main .info-sidebar__all{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 16px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink)!important;font:800 13px/1.4 var(--jp);box-shadow:3px 3px 0 var(--aqua)}
body.coletlab-vivid-list #main .single-post__related-title{flex-direction:row!important;padding-bottom:0!important}
body.coletlab-vivid-list #main .single-post__related-title::before{position:static!important;height:11px!important;width:11px!important}
body.coletlab-vivid-list #main .single-post__related-grid{gap:18px!important}
body.coletlab-vivid-list #main .info-sidebar__nav{display:grid;padding:24px;border:2px solid var(--ink);border-radius:22px;background:#fff;box-shadow:6px 6px 0 var(--pink2)}
body.coletlab-vivid-list #main .info-sidebar__nav a{display:flex;justify-content:space-between;align-items:center;padding:12px 2px;border-bottom:1px dashed rgba(19,32,43,.22);font:700 14px/1.5 var(--jp);text-decoration:none}
body.coletlab-vivid-list #main .info-sidebar__nav a:last-child{border-bottom:0}
body.coletlab-vivid-list #main .info-sidebar__nav a span{color:var(--pink)}
body.coletlab-vivid-list #main .single-post__related-card{display:block;padding:16px 20px!important;background:#fff}
body.coletlab-vivid-list #main .single-post__related-card-body{display:grid;gap:4px;padding:0!important}
body.coletlab-vivid-list #main .single-post__related-card-meta{font:700 12px/1.5 "Unbounded","Noto Sans JP",sans-serif;color:var(--teal2);letter-spacing:.04em}
body.coletlab-vivid-list #main .single-post__related-card-title{font:800 15px/1.6 var(--jp)!important;color:var(--ink)}

/* 業種別のAI活用例（一覧・個別）の最後は、ほかの一覧ページと同じ関連ページのリンク（2026-11-02 相談の帯 GET IN TOUCH をやめた） */
body.coletlab-vivid-list #main .solutions-related{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 18px;max-width:1240px;margin:72px auto 96px;padding:36px 20px 0;border-top:2px dashed rgba(19,32,43,.14)}
body.coletlab-vivid-list #main .solutions-related a{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:10px 22px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink)!important;font:800 14px/1.4 var(--jp);text-decoration:none!important;box-shadow:4px 4px 0 var(--aqua);transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-list #main .solutions-related a:last-child{background:var(--ink);color:#fff!important;box-shadow:4px 4px 0 var(--pink2)}
body.coletlab-vivid-list #main .solutions-related a:hover{translate:2px 2px;box-shadow:2px 2px 0 var(--aqua)}
body.coletlab-vivid-list #main :is(.solutions-list,.solutions-filter),body.coletlab-vivid-list main#main.solutions-archive{background:none!important}
body.coletlab-vivid-list #main .solution-others__all{display:none!important}
@media(max-width:767px){body.coletlab-vivid-list #main .solutions-list{padding-bottom:16px!important}body.coletlab-vivid-list #main .solutions-related{flex-direction:column;align-items:stretch;margin:32px 20px 72px;padding:28px 0 0}body.coletlab-vivid-list #main .solutions-related a{justify-content:space-between}}

/* 記事の下の相談カード（2026-11-02）：青緑の四角い帯のボタンをやめ、墨の丸い札に。カードの影は2枚目をピンクに */
body.coletlab-vivid-list #main .single-post__cta-card:nth-child(2){box-shadow:7px 7px 0 var(--pink2)!important}
body.coletlab-vivid-list #main .single-post__cta-card-title{font-weight:900!important;color:var(--ink)!important}
body.coletlab-vivid-list #main .single-post__cta-card-arrow{display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;min-height:44px;padding:8px 22px!important;border:2px solid var(--ink)!important;border-radius:999px!important;background:var(--ink)!important;color:#fff!important;box-shadow:3px 3px 0 var(--pink2)!important;font-weight:800}
body.coletlab-vivid-list #main .vl-side__links a{word-break:auto-phrase}
/* 左に浮かぶ共有ボタンは本文の左端に重なるため出さない（記事の下の共有ボタンを使う。コラム記事と同じ） */
body.coletlab-vivid-list .single-post__share-floating{display:none!important}

/* 記事本文の部品（2026-11-02 ユーザー「変える」）。コラム・お知らせ・ラボノート・業種別のAI活用例の記事に効く。
   変えるのは箱・見出しの飾り・表・目次・よくある質問の見た目だけ。本文の文字の大きさ・行間・幅・見出しの書体と文章は変えない。
   箱は墨の2pxの線とずらした影（左の太い線＋塗りの箱は使わない）、ラベルは色の吹き出し、印は◆ */
/* 見出し2：上の章番号（H.01）はオレンジの吹き出し、下は3色の短い帯 */
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) h2::before{display:table!important;margin-bottom:14px!important;padding:5px 11px;border-radius:10px;background:var(--orange);color:#fff!important;font:800 11px/1.3 "Unbounded","Noto Sans JP",sans-serif!important;letter-spacing:.06em!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) h2::after{width:72px!important;height:5px!important;margin-top:16px!important;border-radius:3px;background:linear-gradient(90deg,var(--teal2),var(--lemon),var(--pink2))!important;background-size:auto!important}
/* 見出し3：番号は墨の丸にピンクの影、下は点線 */
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) h3:not(.coletlab-faq__q)::before{border-radius:50%!important;background:var(--ink)!important;color:#fff!important;box-shadow:2px 2px 0 var(--pink2)!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) h3:not(.coletlab-faq__q){border-bottom:2px dashed rgba(19,32,43,.16)!important}
/* この記事の要点：白い面・墨の線・レモンの影。ラベルはオレンジの吹き出し */
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .coletlab-tldr{padding:26px 26px 22px!important;border:2px solid var(--ink)!important;border-radius:22px!important;background:#fff!important;box-shadow:7px 7px 0 var(--lemon)!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .coletlab-tldr__label{display:inline-block;margin-bottom:14px!important;padding:5px 12px;border-radius:12px;background:var(--orange);color:#fff!important;font:800 12px/1.4 var(--jp)!important;letter-spacing:.04em}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .coletlab-tldr li::marker{color:var(--pink2)}
/* 目次：白い面・墨の線・水色の影。英字の CONTENTS は Unbounded、番号は青緑 */
body.coletlab-vivid-list #main .single-post__toc{border:2px solid var(--ink)!important;border-radius:20px!important;background:#fff!important;box-shadow:6px 6px 0 var(--aqua)!important;overflow:hidden}
body.coletlab-vivid-list #main .single-post__toc-title{font-family:"Unbounded","Noto Sans JP",sans-serif!important;font-weight:800!important;color:var(--ink)!important;letter-spacing:.04em}
body.coletlab-vivid-list #main .single-post__toc-title::before{width:10px!important;height:10px!important;border-radius:2px;rotate:45deg;background:linear-gradient(135deg,var(--pink2),var(--orange))!important}
body.coletlab-vivid-list #main .single-post__toc-list>li>a::before{font-family:"Unbounded",sans-serif!important;font-weight:800!important;color:var(--teal2)!important}
/* 目次の直後の案内：白い面・墨の線・ピンクの影、ボタンは墨の丸い札 */
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .single-post__after-toc-cta{padding:16px 18px!important;border:2px solid var(--ink)!important;border-radius:18px!important;background:#fff!important;box-shadow:6px 6px 0 var(--pink2)!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) a.single-post__after-toc-cta__button{border:2px solid var(--ink)!important;border-radius:999px!important;background:var(--ink)!important;color:#fff!important;box-shadow:3px 3px 0 var(--aqua)!important}
/* ポイント・注意の箱：白い面・墨の線。影の色で見分ける（ポイント＝水色、注意＝レモン）。アイコンは線つきの丸 */
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .coletlab-callout{border:2px solid var(--ink)!important;border-radius:18px!important;background:#fff!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .coletlab-callout--point{box-shadow:6px 6px 0 var(--aqua)!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .coletlab-callout--caution{box-shadow:6px 6px 0 var(--lemon)!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .coletlab-callout::before{border:2px solid var(--ink);background-color:var(--sky)!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .coletlab-callout--caution::before{background-color:#FDF3D3!important}
/* 引用：箱にせず、上下の墨の線と大きな引用符 */
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) blockquote{position:relative;padding:22px 24px 22px 64px!important;border:0!important;border-block:2px solid var(--ink)!important;border-radius:0!important;background:none!important;box-shadow:none!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) blockquote::before{content:"\201C";position:absolute;left:14px;top:10px;font:800 44px/1 "Unbounded",sans-serif;color:var(--pink2)}
/* 表：墨の線で囲み、見出しの行は墨の面に白い文字。行の区切りは点線 */
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) :is(.wp-block-table,.column-table-scroll){border:2px solid var(--ink)!important;border-radius:16px!important;background:#fff!important;box-shadow:6px 6px 0 var(--sky)}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) :is(.wp-block-table,.column-table-scroll) table{border:0!important;border-collapse:collapse}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) :is(.wp-block-table thead th,.wp-block-table tbody tr:first-child>th,.ai-lab-table th){background:var(--ink)!important;color:#fff!important;border-color:transparent!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) :is(.wp-block-table tbody tr,.ai-lab-table tbody tr){background:#fff!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) :is(.wp-block-table td,.ai-lab-table td){border:0!important;border-bottom:1px dashed rgba(19,32,43,.18)!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) :is(.wp-block-table tbody tr:last-child td){border-bottom:0!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .column-table-controls button{border:2px solid var(--ink)!important;border-radius:50%!important;background:#fff!important;color:var(--ink)!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .column-table-hint{color:var(--muted)!important}
/* よくある質問：1問ずつ白い札。Q は墨の丸 */
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .coletlab-faq{gap:12px!important;border:0!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .coletlab-faq__item{border:2px solid var(--ink)!important;border-radius:16px!important;background:#fff!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .coletlab-faq__item.is-open{box-shadow:5px 5px 0 var(--pink2)}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .coletlab-faq__q::before{border-radius:50%!important;background:var(--pink2)!important;color:#fff!important;font-family:"Unbounded",sans-serif!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .coletlab-faq__q::after{color:var(--ink)!important}
/* 画像と説明：角を丸め、墨の細い線 */
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) figure.wp-block-image img{border-radius:14px}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) figcaption{color:var(--muted)!important}
/* 業種別のAI活用例の記事：冒頭の業種の札と、本文中の案内の箱 */
body.coletlab-vivid-list #main .solution-body__inner h2::after{content:"";display:block}
body.coletlab-vivid-list #main .solution-body__inner h2{border-bottom:0!important}
body.coletlab-vivid-list #main .solution-body__inner h3:not(.coletlab-faq__q){display:flex;align-items:center;gap:12px;padding-left:0!important;border-left:0!important}
body.coletlab-vivid-list #main .solution-body__inner h3:not(.coletlab-faq__q)::before{content:""!important;flex:none;width:11px!important;height:11px!important;border-radius:2px!important;rotate:45deg;background:linear-gradient(135deg,var(--pink2),var(--orange))!important;box-shadow:none!important}
body.coletlab-vivid-list #main .solution-hero__industry{display:flex!important;flex-wrap:wrap;gap:8px;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
body.coletlab-vivid-list #main .solution-hero__industry span{display:inline-flex;padding:5px 14px!important;border:2px solid var(--ink)!important;border-radius:999px!important;background:#fff!important;color:var(--ink)!important;font-weight:800;box-shadow:3px 3px 0 var(--pink2)}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .solution-inline-cta{border:2px solid var(--ink)!important;border-radius:22px!important;background:#fff!important;box-shadow:7px 7px 0 var(--aqua)!important}
body.coletlab-vivid-list #main :is(.single-post__body,.solution-body__inner) .solution-inline-cta__label{display:inline-block;padding:5px 12px;border-radius:12px;background:var(--orange);color:#fff!important;font:800 12px/1.4 var(--jp)!important}
/* 記事の冒頭：カテゴリーの札と読む時間 */
/* 記事の冒頭のカテゴリーの札：外側の並び（__categories）には枠を付けず、札1つずつを墨の線の札に。テーマの色の◆を添える */
body.coletlab-vivid-list #main .single-post__categories{display:flex;flex-wrap:wrap;gap:8px;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
body.coletlab-vivid-list #main .single-post__category{display:inline-flex!important;align-items:center;gap:7px;width:auto!important;padding:5px 13px!important;border:2px solid var(--ink)!important;border-radius:999px!important;background:#fff!important;color:var(--ink)!important;font:800 12.5px/1.4 var(--jp)!important;text-decoration:none!important;box-shadow:3px 3px 0 var(--pink2)}
body.coletlab-vivid-list #main .single-post__category::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;rotate:45deg;background:linear-gradient(135deg,var(--pink2),var(--orange))}
body.coletlab-vivid-list #main .single-post__meta-item{border-color:var(--ink)!important}
/* 目次：枠の内側に余白。題名の行は左に◆、右に開閉の印 */
body.coletlab-vivid-list #main .single-post__toc{padding:22px 26px!important}
body.coletlab-vivid-list #main .single-post__toc-title{display:flex!important;align-items:center;gap:10px;padding:0!important;cursor:pointer}
body.coletlab-vivid-list #main .single-post__toc-title::before{position:static!important;flex:none}
body.coletlab-vivid-list #main .single-post__toc-list{margin-top:16px!important;padding:16px 0 0!important;border-top:2px dashed rgba(19,32,43,.14)}
body.coletlab-vivid-list #main .single-post__toc-list>li>a{gap:12px!important}
@media(max-width:767px){body.coletlab-vivid-list #main .single-post__toc{padding:18px 18px!important}}
/* 関連記事のカードの札は文字の幅に */
body.coletlab-vivid-list #main .single-post__related-card-cat,body.coletlab-vivid-list #main .single-post__next-card-cat{justify-self:start!important;align-self:start!important;width:auto!important;max-width:100%}

/* ラボの棚の一覧（2026-11-02 ユーザー「ラボの棚のアーカイブのデザイン終わってる」）。
   資料1つを1枚の大きな札に。左は抜粋の画像を淡い面に置き、右に番号の吹き出し（SHELF 01）・題名・タグ・内容・受け取り。
   札の中は内側に余白を取り、文字やボタンが枠に付かないようにする。札と札の間は広く空ける。文章とリンク先は変えない */
body.coletlab-vivid-list #main .resource-list{display:grid!important;gap:56px!important;counter-reset:shelf}
body.coletlab-vivid-list #main .resource-item{counter-increment:shelf;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)!important;gap:44px!important;align-items:start;margin:0!important;padding:40px!important;border-radius:30px!important;background:#fff!important;overflow:visible!important;box-shadow:9px 9px 0 var(--aqua)!important}
body.coletlab-vivid-list #main .resource-item:nth-child(3n+2){box-shadow:9px 9px 0 var(--pink2)!important}
body.coletlab-vivid-list #main .resource-item:nth-child(3n){box-shadow:9px 9px 0 var(--lemon)!important}
body.coletlab-vivid-list #main .resource-preview{margin:0!important;padding:20px!important;border-radius:22px;background:var(--sky)!important;border:0!important}
body.coletlab-vivid-list #main .resource-preview a{display:block;border-radius:12px;overflow:hidden;box-shadow:0 14px 30px -18px rgba(19,32,43,.55);transition:translate .2s}
body.coletlab-vivid-list #main .resource-preview a:hover{translate:0 -3px}
body.coletlab-vivid-list #main .resource-preview img{display:block;width:100%;height:auto;border:0!important;border-radius:0!important}
body.coletlab-vivid-list #main .resource-preview figcaption{margin-top:14px!important;padding:0!important;text-align:center;font:700 12.5px/1.6 var(--jp)!important;color:var(--muted)!important}
body.coletlab-vivid-list #main .resource-info{display:grid;gap:18px;min-width:0;padding:0!important}
body.coletlab-vivid-list #main .resource-info::before{content:"SHELF " counter(shelf,decimal-leading-zero);justify-self:start;padding:6px 14px;border-radius:12px;background:var(--orange);color:#fff;font:800 12px/1.3 "Unbounded",sans-serif;letter-spacing:.06em}
body.coletlab-vivid-list #main .resource-info>*{margin:0!important}
body.coletlab-vivid-list #main .resource-date{font:700 13px/1.5 var(--jp)!important;color:var(--muted)!important}
body.coletlab-vivid-list #main .resource-date time{font-family:"Unbounded","Noto Sans JP",sans-serif;font-weight:700;color:var(--teal2)}
body.coletlab-vivid-list #main .resource-info h2{font:900 clamp(22px,2.2vw,28px)/1.45 var(--jp)!important;color:var(--ink)!important;word-break:auto-phrase}
body.coletlab-vivid-list #main .resource-info h2 span{background:none!important;padding:0!important;box-shadow:none!important;color:var(--ink)!important}
body.coletlab-vivid-list #main .resource-tags{display:flex;flex-wrap:wrap;gap:8px;padding:0!important;list-style:none}
body.coletlab-vivid-list #main .resource-description{padding:20px 0!important;border-block:2px dashed rgba(19,32,43,.16)!important}
body.coletlab-vivid-list #main .resource-description p{margin:0 0 10px!important}
body.coletlab-vivid-list #main .resource-description ul{display:grid;gap:8px;margin:0!important;padding:0!important;list-style:none}
body.coletlab-vivid-list #main .resource-description li{position:relative;padding-left:20px!important;border:0!important}
body.coletlab-vivid-list #main .resource-description li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;rotate:45deg;background:linear-gradient(135deg,var(--pink2),var(--orange))}
body.coletlab-vivid-list #main .resource-guide{font:600 13.5px/1.7 var(--jp)!important;color:var(--muted)!important}
body.coletlab-vivid-list #main a.resource-button{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:58px;padding:12px 20px!important;border:2px solid var(--ink)!important;border-radius:999px!important;background:#06C755!important;color:#fff!important;font:800 15px/1.4 var(--jp)!important;box-shadow:4px 4px 0 var(--ink)!important;text-decoration:none!important;transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-list #main a.resource-button:hover{translate:2px 2px;box-shadow:2px 2px 0 var(--ink)!important}
body.coletlab-vivid-list #main a.resource-article{justify-self:start;display:inline-flex;align-items:center;gap:8px;font:800 14px/1.5 var(--jp)!important;color:var(--ink)!important;text-decoration:underline;text-decoration-color:var(--pink2);text-decoration-thickness:2px;text-underline-offset:5px}
body.coletlab-vivid-list #main a.resource-article::after{content:"→";color:var(--pink2);text-decoration:none}
body.coletlab-vivid-list #main .resource-count{font:700 13px/1.5 var(--jp)!important;color:var(--muted)!important;margin:28px 0 22px!important}
body.coletlab-vivid-list #main .resource-back{margin-top:64px!important;padding:0!important;border:0!important;text-align:center}
body.coletlab-vivid-list #main .resource-back a{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:10px 26px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink)!important;font:800 14px/1.4 var(--jp);text-decoration:none!important;box-shadow:4px 4px 0 var(--pink2)}
body.coletlab-vivid-list #main .resource-back a::after{content:"→"}
@media(max-width:1023px){
  body.coletlab-vivid-list #main .resource-item{grid-template-columns:minmax(0,1fr)!important;gap:28px!important;padding:24px!important;border-radius:24px!important;box-shadow:7px 7px 0 var(--aqua)!important}
  body.coletlab-vivid-list #main .resource-item:nth-child(3n+2){box-shadow:7px 7px 0 var(--pink2)!important}
  body.coletlab-vivid-list #main .resource-item:nth-child(3n){box-shadow:7px 7px 0 var(--lemon)!important}
  body.coletlab-vivid-list #main .resource-list{gap:40px!important}
  body.coletlab-vivid-list #main .resource-preview{padding:14px!important}
}

/* 業種別のAI活用例の一覧のカード（2026-11-02 目視で直す）。一覧の幅を冒頭（1240px）にそろえ、写真の下に墨の線、
   業種は墨の線の札、番号は Unbounded、「活用例を見る」は墨の丸い札。文章とリンク先は変えない */
body.coletlab-vivid-list #main .solutions-list .container{max-width:1280px!important;padding-inline:20px!important}
body.coletlab-vivid-list #main .solutions-grid{gap:36px!important}
body.coletlab-vivid-list #main .solution-card__thumb{border-bottom:2px solid var(--ink)!important}
body.coletlab-vivid-list #main .solution-card__body{padding:22px 24px 26px!important}
body.coletlab-vivid-list #main .solution-card__num{font:800 15px/1 "Unbounded",sans-serif!important;color:var(--teal2)!important;opacity:1!important}
body.coletlab-vivid-list #main .solution-card__industry{display:inline-flex!important;align-items:center;gap:6px;padding:4px 11px!important;border:2px solid var(--ink)!important;border-radius:999px!important;background:#fff!important;color:var(--ink)!important;font:800 12px/1.4 var(--jp)!important}
body.coletlab-vivid-list #main .solution-card__industry::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;rotate:45deg;background:linear-gradient(135deg,var(--pink2),var(--orange))}
body.coletlab-vivid-list #main .solution-card__title{color:var(--ink)!important;font-weight:900!important}
body.coletlab-vivid-list #main .solution-card__more{display:inline-flex!important;align-items:center;gap:8px;margin-top:6px;padding:7px 16px!important;border:2px solid var(--ink)!important;border-radius:999px!important;background:var(--ink)!important;color:#fff!important;font:800 13px/1.4 var(--jp)!important;box-shadow:3px 3px 0 var(--pink2)}
body.coletlab-vivid-list #main .solution-card__more::after{content:"→"!important;width:auto!important;height:auto!important;background:none!important;border:0!important;position:static!important}
body.coletlab-vivid-list #main .solution-card__more::before{content:none!important}

/* 検索結果の見出し：検索語はピンクの文字だけ（下の線は付けない）。英字の Search Result はオレンジの吹き出し */
body.coletlab-vivid-list #main .search-hero__title em{font-style:normal;color:var(--pink)!important;background:none!important;border:0!important;text-decoration:none!important;box-shadow:none!important}
body.coletlab-vivid-list #main .search-hero__title em::after{content:none!important}
body.coletlab-vivid-list #main .search-hero__overline{display:inline-block!important;padding:6px 14px!important;border-radius:12px!important;background:var(--orange)!important;color:#fff!important;font:800 12px/1.3 "Unbounded",sans-serif!important;letter-spacing:.06em!important}
body.coletlab-vivid-list #main .search-hero__overline::after{border-top-color:var(--orange)!important}
body.coletlab-vivid-list #main :is(.search-hero,.search-hero__inner)::before,body.coletlab-vivid-list #main :is(.search-hero,.search-hero__inner)::after{background:none!important;content:none!important}
body.coletlab-vivid-list #main .search-hero__inner{background:none!important}
body.coletlab-vivid-list main.search-index::before{content:none!important;background:none!important}
body.coletlab-vivid-list #main .search-result{align-items:stretch;padding:0!important}
body.coletlab-vivid-list #main .search-result__thumb{width:auto!important;min-width:0!important;max-width:100%!important;overflow:hidden;border-right:2px solid var(--ink)}
body.coletlab-vivid-list #main .search-result__thumb img{width:100%!important;height:100%!important;object-fit:cover}
body.coletlab-vivid-list #main .search-result__thumb{align-self:stretch!important;height:auto!important;aspect-ratio:auto!important;max-height:none!important;margin:0!important;display:flex;align-items:center;justify-content:center;background:var(--sky)!important;border-radius:0!important}
body.coletlab-vivid-list #main .search-result__thumb--ogp img{object-fit:contain!important;padding:16px;height:auto!important}
body.coletlab-vivid-list #main .search-result__thumb:not(.search-result__thumb--ogp){align-items:stretch!important;padding:0!important}
body.coletlab-vivid-list #main .search-result__thumb:not(.search-result__thumb--ogp) img{align-self:stretch;height:100%!important;min-height:100%;object-fit:cover!important}
@media(max-width:767px){body.coletlab-vivid-list #main .search-result__thumb{border-right:0;border-bottom:2px solid var(--ink)}}
body.coletlab-vivid-list #main .search-result__body{padding:20px 24px 22px!important}
body.coletlab-vivid-list #main .search-result__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px!important}

/* ラボノート記事の部品（2026-11-02 目視で直す） */
body.coletlab-vivid-list #main .single-post__tags{display:flex;flex-wrap:wrap;gap:8px;padding:0!important;list-style:none}
body.coletlab-vivid-list #main .single-post__tag,body.coletlab-vivid-list #main .single-post__tags a{display:inline-flex!important;align-items:center;padding:4px 12px!important;border:2px solid var(--ink)!important;border-radius:999px!important;background:#fff!important;color:var(--ink)!important;font:800 12.5px/1.4 var(--jp)!important;text-decoration:none!important}
body.coletlab-vivid-list #main .whitepaper-preview{display:grid;gap:14px;padding:28px!important;border:2px solid var(--ink)!important;border-radius:24px!important;background:#fff!important;box-shadow:8px 8px 0 var(--lemon)!important}
body.coletlab-vivid-list #main .whitepaper-preview>*{margin:0!important}
body.coletlab-vivid-list #main .whitepaper-preview__label{justify-self:start;padding:5px 12px!important;border-radius:12px;background:var(--orange)!important;color:#fff!important;font:800 12px/1.4 var(--jp)!important}
body.coletlab-vivid-list #main .whitepaper-preview__title{font-weight:900!important;color:var(--ink)!important}
body.coletlab-vivid-list #main .whitepaper-preview__updated{font:700 12.5px/1.5 var(--jp)!important;color:var(--muted)!important}
body.coletlab-vivid-list #main .whitepaper-preview__picture{padding:14px!important;border-radius:16px;background:var(--sky)!important}
body.coletlab-vivid-list #main .whitepaper-preview__picture img{border-radius:8px;box-shadow:0 12px 26px -16px rgba(19,32,43,.5)}
body.coletlab-vivid-list #main .whitepaper-preview__image-help{text-align:center;font-size:12.5px!important;color:var(--muted)!important}
body.coletlab-vivid-list #main a.whitepaper-preview__button{display:flex!important;align-items:center;justify-content:center;min-height:56px;border:2px solid var(--ink)!important;border-radius:999px!important;background:#06C755!important;color:#fff!important;font:800 15px/1.4 var(--jp)!important;box-shadow:4px 4px 0 var(--ink)!important;text-decoration:none!important}
body.coletlab-vivid-list #main .single-post__author--inline{padding:22px 0!important;border:0!important;border-block:2px dashed rgba(19,32,43,.14)!important;background:none!important}
body.coletlab-vivid-list #main .single-post__next-label{display:inline-block;padding:5px 12px;border-radius:12px;background:var(--orange);color:#fff!important;font:800 11px/1.3 "Unbounded","Noto Sans JP",sans-serif!important;letter-spacing:.06em}
body.coletlab-vivid-list #main .single-post__next-label::before{content:none!important}
body.coletlab-vivid-list #main .single-post__next-card{display:block;margin-top:14px;padding:22px 24px!important;border:2px solid var(--ink)!important;border-radius:20px!important;background:#fff!important;box-shadow:6px 6px 0 var(--aqua)!important;text-decoration:none!important;color:var(--ink)!important}
body.coletlab-vivid-list #main .single-post__next-card-cat{display:inline-flex!important;padding:3px 10px!important;border:2px solid var(--ink)!important;border-radius:999px!important;color:var(--ink)!important;font:800 11.5px/1.4 var(--jp)!important}
body.coletlab-vivid-list #main .single-post__next-card-title{font-weight:900!important;color:var(--ink)!important}
/* 活用例の記事の「OTHER INDUSTRIES」と、本文の箇条書きの印 */
body.coletlab-vivid-list #main .solution-others .editorial-index__en{display:inline-block;padding:6px 14px;border-radius:12px;background:var(--orange);color:#fff!important;font:800 12px/1.3 "Unbounded",sans-serif!important;letter-spacing:.06em}
body.coletlab-vivid-list #main .solution-others .editorial-index::before,body.coletlab-vivid-list #main .solution-others .editorial-index::after{content:none!important}
body.coletlab-vivid-list #main .solution-body__inner ul:not([class*="cta"])>li::marker{content:"◆  ";color:var(--pink2);font-size:.7em}

/* プライバシーポリシーの英字ラベルも吹き出しに。AIの現状チェックは、上の英字の行（CHECK）を線なしの青緑の小さな英字にし、すぐ下の「無料・登録不要」の吹き出しと同じ飾りを重ねない */
body.coletlab-vivid-list #main .privacy-hero__overline{display:inline-block!important;padding:6px 14px!important;border-radius:12px!important;background:var(--orange)!important;color:#fff!important;font:800 12px/1.3 "Unbounded",sans-serif!important;letter-spacing:.06em!important}
body.coletlab-vivid-list #main .privacy-hero__overline::after{border-top-color:var(--orange)!important}
body.coletlab-vivid-list #main .ac-hero__kicker .section-label__line{display:none!important}
body.coletlab-vivid-list #main .ac-hero__kicker .section-label__en{font:800 12px/1.4 "Unbounded","Noto Sans JP",sans-serif!important;color:var(--teal2)!important;letter-spacing:.06em}
body.coletlab-vivid-list #main .ac-hero__accent{color:var(--pink)!important;background:none!important;border:0!important;text-decoration:none!important}
body.coletlab-vivid-list #main .ac-hero__accent::after,body.coletlab-vivid-list #main .ac-hero__accent::before{content:none!important}

/* thanks・404（2026-11-02 目視で直す）：見出しの後ろの薄い曲線と方眼を外す。検索ボタンは1行、案内の札は間を空ける。英字ラベルの文字は太く */
body.coletlab-vivid-list main.utility-page::before,body.coletlab-vivid-list #main .utility-heading::before,body.coletlab-vivid-list #main .utility-heading::after{content:none!important;background:none!important}
body.coletlab-vivid-list #main .utility-label{font-weight:800!important;font-size:12px!important}
body.coletlab-vivid-list #main .utility-heading p:not(.utility-label){font-weight:500!important;color:var(--muted)!important}
body.coletlab-vivid-list #main .utility-search button{flex:none;white-space:nowrap!important;min-width:84px}
body.coletlab-vivid-list #main .utility-destinations{display:grid!important;gap:16px!important}
body.coletlab-vivid-list #main .utility-destinations a{margin:0!important}

/* 記事カードのアイキャッチは枠いっぱい、札は画像から離す（2026-11-02 ユーザー「タグがアイキャッチに引っ付いている。色んなところで同じ」「アイキャッチはボックスの枠一杯に」） */
body.coletlab-vivid-list #main .single-post__related-card{display:flex!important;flex-direction:column;padding:0!important;overflow:hidden}
body.coletlab-vivid-list #main .single-post__related-card-image{margin:0!important;padding:0!important;border-radius:0!important;border-bottom:2px solid var(--ink)!important;aspect-ratio:16/9;overflow:hidden;background:var(--sky)}
body.coletlab-vivid-list #main .single-post__related-card-image img{display:block;width:100%!important;height:100%!important;object-fit:cover;border-radius:0!important;border:0!important;margin:0!important}
body.coletlab-vivid-list #main .single-post__related-card-body{display:grid;gap:10px;padding:18px 20px 20px!important}
body.coletlab-vivid-list #main .single-post__related-card-body>*{margin:0!important}
@media(min-width:768px){
  body.coletlab-vivid-list #main.column-index .column-card:has(.column-card__thumb){display:flex!important;flex-direction:column}
  body.coletlab-vivid-list #main.column-index .column-card__thumb{display:contents!important}
  body.coletlab-vivid-list #main.column-index .column-card__thumb img{order:0;display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:2px solid var(--ink)}
  body.coletlab-vivid-list #main.column-index .column-card__category{order:1;position:static!important;inset:auto!important;transform:none!important;align-self:flex-start;margin:20px 24px 0!important}
  body.coletlab-vivid-list #main.column-index .column-card__body{order:2}
  body.coletlab-vivid-list #main.column-index .column-card:has(.column-card__thumb) .column-card__body{padding-top:12px!important}
}

/* スマホのコラム一覧も、アイキャッチを枠いっぱいに（上の横並びの指定を打ち消す。2026-11-02 ユーザー指示） */
@media(max-width:767px){
  body.coletlab-vivid-list #main.column-index .column-card:has(.column-card__thumb){display:flex!important;flex-direction:column;padding:0!important;gap:0!important}
  body.coletlab-vivid-list #main.column-index .column-card__thumb{display:contents!important}
  body.coletlab-vivid-list #main.column-index .column-card__thumb img{order:0;display:block;width:100%!important;aspect-ratio:16/9;object-fit:cover;border:0!important;border-bottom:2px solid var(--ink)!important;border-radius:0!important}
  body.coletlab-vivid-list #main.column-index .column-card__category{order:1;align-self:flex-start;margin:16px 18px 0!important}
  body.coletlab-vivid-list #main.column-index .column-card:has(.column-card__thumb) .column-card__body{order:2;padding:10px 18px 20px!important}
  body.coletlab-vivid-list #main.column-index .column-card:not(:has(.column-card__thumb)){display:block!important;padding:20px 18px!important}
  body.coletlab-vivid-list #main.column-index .column-card:not(:has(.column-card__thumb)) .column-card__body{padding:0!important}
  body.coletlab-vivid-list #main.column-index .column-card__text-category{margin-bottom:10px!important}
}

/* 記事の列は中身の最小幅で広がらないようにする（320pxで本文の列が309pxに広がり、右に5px はみ出した。2026-11-02 計測） */
@media(max-width:1023px){body.coletlab-vivid-list #main .single-post__container{grid-template-columns:minmax(0,1fr)!important}}

/* 関連記事は、スマホでは1列に（2列だと1枚が約170pxで題名が5行に折れて窮屈だった。2026-11-02 ユーザー「スマホだと窮屈ですよね？」） */
@media(max-width:767px){body.coletlab-vivid-list #main .single-post__related-grid{grid-template-columns:minmax(0,1fr)!important;gap:22px!important}}

/* 記事内のパートナー表記：狭いスマホ（380px以下）ではロゴを上、文を下に重ねる（320pxで文の列が148pxになり「は、」だけの行ができた。2026-11-02 計測） */
@media(max-width:380px){body.coletlab-vivid-list #main .coletlab-partner__inner{grid-template-columns:minmax(0,1fr)!important;justify-items:start;gap:14px!important}body.coletlab-vivid-list #main .coletlab-partner__badge{width:132px!important;height:auto!important}}

/* 動きを止める設定 */
@media(prefers-reduced-motion:reduce){.vl-band__track,.vl-bar::after,.vl-hero__display,.vv-footer__marquee .vv-marquee__track{animation:none}.vl-bar::after{display:none}}
html[data-motion="off"] :is(.vl-band__track,.vl-bar::after,.vl-hero__display,.vv-footer__marquee .vv-marquee__track){animation:none}
html[data-motion="off"] .vl-bar::after{display:none}

/* ラボノート記事の長い題名で、末尾の1文字だけが次の行に残らないようにする（2026-11-02 総合レビューU03。コラム記事は対象外） */
body.coletlab-vivid-list.single-cpt_ailab .single-post__title{text-wrap:pretty}