/* 2026-11-01版トップのヘッダー・フッター。写真版の chrome.css の後に読み、見た目だけを上書きする。メニューの項目は共通部品のまま。 */
body.coletlab-vivid-home{--vv-ink:#13202B;--vv-teal:#067B7B;--vv-aqua:#3ED6DC;--vv-pink:#F0587E;--vv-orange:#F7894A;--vv-lemon:#F5CF6B}

/* ヘッダー。ページ上部は背景なしでロゴとメニューだけ。スクロール後は小さな角丸の帯にまとまる（2026-11-02 から白い帯。末尾の「ヘッダーとメニューを本文の部品にそろえる」を参照）。下へ読む間は隠れる。 */
body.coletlab-vivid-home .vv-header{position:fixed;top:18px;left:3vw;right:3vw;width:auto;height:64px;min-height:0;max-height:none;padding:0;border:0;border-radius:999px;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:translate .45s cubic-bezier(.16,1,.3,1),left .45s cubic-bezier(.16,1,.3,1),right .45s cubic-bezier(.16,1,.3,1),padding .45s cubic-bezier(.16,1,.3,1),background .35s,box-shadow .35s}
body.coletlab-vivid-home .vv-header[data-hidden="true"]{translate:0 -160%}
body.coletlab-vivid-home .vv-header[data-scrolled="true"]{left:max(3vw,calc(50% - 620px));right:max(3vw,calc(50% - 620px));padding:0 10px 0 26px;background:rgba(19,32,43,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 44px -22px rgba(19,32,43,.7)}
/* アクセス直後（ページ上部）はロゴを大きく見せ、スクロール後の帯では小さくまとめる。 */
body.coletlab-vivid-home .vv-header .site-logo{position:relative;width:clamp(210px,22vw,330px);min-width:0;max-width:none;transition:width .45s cubic-bezier(.16,1,.3,1)}
body.coletlab-vivid-home .vv-header[data-scrolled="true"] .site-logo{width:178px}
body.coletlab-vivid-home .vv-header .vv-header__logo{display:block;width:100%;height:auto}
body.coletlab-vivid-home .vv-header .vv-header__logo--white{position:absolute;inset:0;opacity:0;transition:opacity .3s}
body.coletlab-vivid-home .vv-header .vv-header__logo--color{transition:opacity .3s}
body.coletlab-vivid-home .vv-header[data-scrolled="true"] .vv-header__logo--white{opacity:1}
body.coletlab-vivid-home .vv-header[data-scrolled="true"] .vv-header__logo--color{opacity:0}
/* メニューは英字（上）と日本語（下）の2段。英字の横に開閉の矢印。 */
body.coletlab-vivid-home .vv-header .global-nav__list{gap:clamp(20px,2.4vw,38px)}
body.coletlab-vivid-home .vv-header .global-nav__list>li>a{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;color:var(--vv-ink);transition:color .3s}
body.coletlab-vivid-home .vv-header .global-nav__en{font-size:10px;font-weight:700;line-height:1.2;letter-spacing:.12em;color:var(--vv-teal);transition:color .3s}
body.coletlab-vivid-home .vv-header[data-scrolled="true"] .global-nav__en{color:var(--vv-aqua)}
body.coletlab-vivid-home .vv-header .global-nav__chevron{margin-left:3px;font-size:9px;line-height:1;opacity:.8}
body.coletlab-vivid-home .vv-header .global-nav__ja{font-size:14px;font-weight:700;line-height:1.3;letter-spacing:.06em}
body.coletlab-vivid-home .vv-header .global-nav__list>li>a:hover{color:var(--vv-teal)}
body.coletlab-vivid-home .vv-header[data-scrolled="true"] .global-nav__list>li>a{color:#fff}
body.coletlab-vivid-home .vv-header[data-scrolled="true"] .global-nav__list>li>a:hover{color:var(--vv-aqua)}
/* ページ上部では、色の輪がメニューの後ろに来ても読めるよう、メニューの後ろだけに半透明の白い下地を敷く。 */
body.coletlab-vivid-home .vv-header .photo-primary-nav{padding:4px 6px 4px 24px;border-radius:999px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .35s,padding .35s}
body.coletlab-vivid-home .vv-header[data-scrolled="true"] .photo-primary-nav{padding:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
/* 開く一覧（2026-11-01 ユーザー「ヘッダーメニューのホバーメニューのデザインも変更した方がいいよね」）。
   本文のカードと同じ、墨紺の太枠・角丸・色のずれた影。項目に触れると淡い面と矢印が出る。 */
body.coletlab-vivid-home .vv-header .global-nav__dropdown{padding:22px;border:2px solid #13202B;border-radius:24px;background:#fff;box-shadow:8px 8px 0 #0FA3A8}
body.coletlab-vivid-home .vv-header .global-nav__dropdown-label{padding-bottom:10px;border-bottom:2px solid #F5CF6B;font:800 11px/1.4 Unbounded,Inter,sans-serif;letter-spacing:.16em;color:#067B7B}
body.coletlab-vivid-home .vv-header .global-nav__dropdown ul{gap:2px}
body.coletlab-vivid-home .vv-header .global-nav__dropdown ul a{justify-content:space-between;gap:16px;min-height:44px;padding:10px 12px;border-radius:12px;color:#13202B;font:700 14px/1.5 "Noto Sans JP",sans-serif;letter-spacing:.02em;transform:none}
body.coletlab-vivid-home .vv-header .global-nav__dropdown ul a::after{content:"→";font:800 14px/1 Inter,sans-serif;color:#F0587E;opacity:0;translate:-6px 0;transition:opacity .2s,translate .3s cubic-bezier(.16,1,.3,1)}
body.coletlab-vivid-home .vv-header .global-nav__dropdown ul a:is(:hover,:focus-visible){background:#EAF3FB;color:#13202B;transform:none}
body.coletlab-vivid-home .vv-header .global-nav__dropdown ul a:is(:hover,:focus-visible)::after{opacity:1;translate:0 0}
/* 事業領域の大きな一覧は、メニュー全体の右端にそろえて開く（画面上部の状態で右へはみ出していた）。
   メニューの右端は画面の右から約230px内側なので、幅は画面幅−280pxまでにして左へはみ出さない */
body.coletlab-vivid-home .vv-header .global-nav__list{position:relative}
body.coletlab-vivid-home .vv-header .global-nav__list>li.has-dropdown--wide{position:static}
body.coletlab-vivid-home .vv-header .global-nav__list>li.has-dropdown--wide>.global-nav__dropdown{position:absolute;top:calc(100% + 18px);left:auto;right:-8px;width:min(860px,calc(100vw - 280px));padding:22px 10px;transform:translateY(-8px)}
body.coletlab-vivid-home .vv-header .global-nav__list>li.has-dropdown--wide:is(:hover,:focus-within)>.global-nav__dropdown{transform:translateY(0)}
body.coletlab-vivid-home .vv-header .has-dropdown--wide .global-nav__dropdown-group{padding-inline:14px}
/* 項目名は1行で表示する（「マーケティン／グ」のように1文字だけ落ちないように）。列は中身の幅で並べる */
body.coletlab-vivid-home .vv-header .global-nav__dropdown ul a{white-space:nowrap}
body.coletlab-vivid-home .vv-header .global-nav__list>li.has-dropdown--wide>.global-nav__dropdown{grid-template-columns:repeat(3,max-content);justify-content:space-between}
/* お問い合わせは文字のボタン。読み上げ名は元のまま「お問い合わせ」。 */
body.coletlab-vivid-home .vv-header .site-header__cta{margin-left:clamp(18px,2vw,32px)}
body.coletlab-vivid-home .vv-header .site-header__mail{width:auto;height:48px;padding:0 24px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--vv-pink),var(--vv-orange));color:#fff;box-shadow:0 10px 24px -12px rgba(240,88,126,.8);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
body.coletlab-vivid-home .vv-header .site-header__mail svg{display:none}
body.coletlab-vivid-home .vv-header .site-header__mail::after{content:"お問い合わせ";font:700 15px/1 "Noto Sans JP",sans-serif;letter-spacing:.06em;white-space:nowrap}
body.coletlab-vivid-home .vv-header .site-header__mail:hover{transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(240,88,126,.9)}

@media(max-width:1023px){
 body.coletlab-vivid-home .vv-header{top:10px;left:16px;right:16px;height:58px}
 body.coletlab-vivid-home .vv-header[data-scrolled="true"]{left:12px;right:12px;padding:0 7px 0 20px}
 body.coletlab-vivid-home .vv-header .site-logo{width:clamp(176px,54vw,240px);max-width:calc(100% - 64px)}
 body.coletlab-vivid-home .vv-header[data-scrolled="true"] .site-logo{width:148px}
 body.coletlab-vivid-home .vv-header .menu-toggle{width:44px;height:44px;padding:0;border-radius:50%;background:var(--vv-ink);gap:6px;transition:background .3s}
 body.coletlab-vivid-home .vv-header .menu-toggle span{width:18px;background:#fff;transition:transform .2s,background .3s}
 body.coletlab-vivid-home .vv-header[data-scrolled="true"] .menu-toggle{background:#fff}
 body.coletlab-vivid-home .vv-header[data-scrolled="true"] .menu-toggle span{background:var(--vv-ink)}
 body.coletlab-vivid-home.menu-open .vv-header .menu-toggle span:first-child{transform:translateY(4px) rotate(45deg)}
 body.coletlab-vivid-home.menu-open .vv-header .menu-toggle span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
 /* スマホのメニュー（2026-11-01 作り直し）。墨紺の面に大きな英字の項目、開くと上から順に現れる。
    開閉と二段目の開き方は共通のスクリプト（assets/js/mobile-menu.js）のまま。 */
 body.coletlab-vivid-home #mobile-menu{position:fixed;inset:80px 12px auto;max-height:calc(100svh - 96px);padding:10px 22px 26px;overflow-y:auto;overscroll-behavior:contain;border:2px solid #13202B;border-radius:28px;color:#fff;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(60% 40% at 100% 0%,rgba(62,214,220,.28),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(240,88,126,.22),transparent 70%),linear-gradient(160deg,#13202B,#0B2F38);box-shadow:8px 8px 0 #3ED6DC}
 body.coletlab-vivid-home #mobile-menu[aria-hidden="false"]{animation:vv-menu-in .5s cubic-bezier(.16,1,.3,1) both}
 body.coletlab-vivid-home #mobile-menu[aria-hidden="false"] .mobile-menu__item,body.coletlab-vivid-home #mobile-menu[aria-hidden="false"] .mobile-menu__cta{animation:vv-menu-item .6s cubic-bezier(.16,1,.3,1) both}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__item:nth-child(2){animation-delay:.05s}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__item:nth-child(3){animation-delay:.1s}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__item:nth-child(4){animation-delay:.15s}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__item:nth-child(5){animation-delay:.2s}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__item:nth-child(6){animation-delay:.25s}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__cta{animation-delay:.3s}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__item{border-bottom:1px solid rgba(255,255,255,.14)}
 body.coletlab-vivid-home #mobile-menu :is(.mobile-menu__link,.mobile-menu__expand){min-height:64px;align-items:center;gap:14px;color:#fff}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__en{font:800 clamp(22px,7vw,30px)/1.1 Unbounded,Inter,sans-serif;letter-spacing:-.02em;color:transparent;background:linear-gradient(100deg,#3ED6DC,#F5CF6B 55%,#F0587E);-webkit-background-clip:text;background-clip:text}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__ja{font:700 13px/1.4 "Noto Sans JP",sans-serif;letter-spacing:.06em;color:rgba(255,255,255,.8)}
 body.coletlab-vivid-home #mobile-menu :is(.mobile-menu__link,.mobile-menu__expand):is(:hover,:focus-visible) .mobile-menu__ja{color:#fff}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__chevron{display:grid;place-items:center;width:36px;height:36px;border:2px solid rgba(255,255,255,.4);border-radius:50%;color:#fff;font-size:12px}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__expand[aria-expanded="true"] .mobile-menu__chevron{color:#13202B;background:#3ED6DC;border-color:#3ED6DC}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__expand--icon{width:48px}
 /* 二段目は少し明るい面にまとめる */
 body.coletlab-vivid-home #mobile-menu .mobile-menu__item > .mobile-menu__sub{margin:0 0 16px;padding:8px 14px;border-radius:18px;background:rgba(255,255,255,.07)}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__category{border-top:1px solid rgba(255,255,255,.12)}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__category:first-child{border-top:0}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__category-toggle{min-height:52px;color:#fff;font:800 14px/1.5 "Noto Sans JP",sans-serif}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__category-toggle .mobile-menu__chevron{width:28px;height:28px;font-size:10px}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__sub--nested{padding:0 0 10px 4px}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__sub a{justify-content:space-between;gap:12px;min-height:46px;padding:0 6px;border-radius:12px;color:rgba(255,255,255,.88);font:600 14px/1.6 "Noto Sans JP",sans-serif;white-space:normal;overflow-wrap:anywhere;word-break:auto-phrase;text-wrap:balance}
 /* タブレット（600px以上）は右寄せの幅の狭い面にする（全幅だと項目がまばらになる） */
 @media(min-width:600px){body.coletlab-vivid-home #mobile-menu{left:auto;width:min(460px,calc(100vw - 24px))}}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__sub a::after{content:"→";flex:none;font:800 13px/1 Inter,sans-serif;color:#F5CF6B}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__sub a:is(:hover,:focus-visible){color:#fff;background:rgba(255,255,255,.08)}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__cta{margin-top:22px}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__cta a{display:flex;align-items:center;justify-content:center;gap:.5em;min-height:60px;border:2px solid #13202B;border-radius:999px;color:#13202B;font:800 16px/1.3 "Noto Sans JP",sans-serif;letter-spacing:.06em;background:linear-gradient(115deg,#F0587E,#F7894A 40%,#F5CF6B 72%,#3ED6DC);background-size:260% 260%;box-shadow:5px 5px 0 #fff;animation:vv-menu-flow 8s ease-in-out infinite alternate}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__cta a::after{content:"→";font-family:Inter,sans-serif}
 /* メニューを開いている間は、ヘッダーのボタンを白にしてメニューの面とつなげる */
 body.coletlab-vivid-home.menu-open .vv-header .menu-toggle{background:#fff}
 body.coletlab-vivid-home.menu-open .vv-header .menu-toggle span{background:#13202B}
}

/* フッター。濃い面に、流れる社名の帯。 */
body.coletlab-vivid-home .vv-footer{padding:0;overflow:clip;color:#fff;background:radial-gradient(50% 60% at 90% 0%,rgba(62,214,220,.25),transparent 70%),radial-gradient(45% 50% at 0% 100%,rgba(240,88,126,.22),transparent 70%),var(--vv-ink)}
body.coletlab-vivid-home .vv-footer__marquee{overflow:hidden;white-space:nowrap;padding:28px 0 8px;border-bottom:1px solid rgba(255,255,255,.12)}
body.coletlab-vivid-home .vv-footer__marquee .vv-marquee__track{display:inline-flex;align-items:center;gap:.4em;width:max-content;will-change:transform}
body.coletlab-vivid-home .vv-footer__marquee span{font:800 clamp(56px,11vw,168px)/1 Unbounded,Inter,sans-serif;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.32)}
body.coletlab-vivid-home .vv-footer__marquee span:nth-of-type(2n){-webkit-text-stroke:0;background:linear-gradient(100deg,var(--vv-aqua),var(--vv-lemon) 50%,var(--vv-pink));-webkit-background-clip:text;background-clip:text}
body.coletlab-vivid-home .vv-footer__marquee i{display:inline-block;width:.42em;height:.42em;border-radius:22%;transform:rotate(45deg);background:linear-gradient(135deg,var(--vv-aqua),var(--vv-lemon) 50%,var(--vv-pink));flex:none}
body.coletlab-vivid-home .vv-footer__body{position:relative;padding:64px 6% 88px}
body.coletlab-vivid-home .vv-footer .site-footer__logo{width:200px}
/* ロゴの下の会社名・所在地・電話（日本語表記） */
body.coletlab-vivid-home .vv-footer__address{display:grid;gap:4px;margin-top:20px;font-style:normal;font-size:13px;line-height:1.8;letter-spacing:.04em;color:rgba(255,255,255,.78)}
body.coletlab-vivid-home .vv-footer__name{font-size:15px;font-weight:700;color:#fff}
body.coletlab-vivid-home .vv-footer__address a{color:inherit;text-decoration:none}
/* ビル名は途中で折らず、狭い幅ではビル名の前で改行する */
body.coletlab-vivid-home .vv-footer__bldg{display:inline-block;white-space:nowrap}
@media(hover:hover){body.coletlab-vivid-home .vv-footer__address a:hover{color:var(--vv-lemon)}}
body.coletlab-vivid-home .vv-footer .photo-footer-brand{margin-bottom:56px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
body.coletlab-vivid-home .vv-footer .photo-footer-brand .coletlab-partner__inner{grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center}
/* 公式バッジは画像自体に白い背景と枠があるため、下地を足さない。 */
body.coletlab-vivid-home .vv-footer .coletlab-partner__badge{width:160px;padding:0;border-radius:0;background:none}
body.coletlab-vivid-home .vv-footer .photo-footer-brand .coletlab-partner__copy{display:grid;gap:8px}
/* 文とリンクの間が35pxに開いていた（文の下の余白8px＋間14px＋押しやすさのための高さ44pxの中央に文字）。高さ44pxは残し、文字を上に寄せて約9pxにする。下に余った押せる範囲は負の余白で相殺し、文のかたまりをロゴの高さの中央に置く */
body.coletlab-vivid-home .vv-footer .photo-footer-brand .coletlab-partner__statement{margin-bottom:0}
body.coletlab-vivid-home .vv-footer .photo-footer-brand a.coletlab-partner__link{align-items:flex-start;padding-top:2px;margin-bottom:-14px}
body.coletlab-vivid-home .vv-footer .photo-footer-brand .coletlab-partner__statement{line-height:1.9;letter-spacing:.04em}
/* 「OpenAI Select Partnerです。」を1つのかたまりにして、「す。」だけの行を作らない（2026-11-02 タブレット幅の目視） */
body.coletlab-vivid-home .vv-footer .photo-footer-brand .coletlab-partner__statement span{display:inline-block;word-break:keep-all}
body.coletlab-vivid-home .vv-footer .photo-footer-brand .coletlab-partner__statement,body.coletlab-vivid-home .vv-footer .photo-footer-brand .coletlab-partner__link{color:#fff}
body.coletlab-vivid-home .vv-footer .site-footer__nav-title{font-family:Inter,"Noto Sans JP",sans-serif;font-size:15px;font-weight:700;letter-spacing:.04em;color:#fff;margin-bottom:24px}
body.coletlab-vivid-home .vv-footer .site-footer__service-group-title{color:var(--vv-aqua);letter-spacing:.06em}
body.coletlab-vivid-home .vv-footer .site-footer__nav-list a{color:rgba(255,255,255,.78);font-size:13px;letter-spacing:.04em;transition:color .2s}
body.coletlab-vivid-home .vv-footer .site-footer__nav-list a:hover{color:var(--vv-lemon)}
body.coletlab-vivid-home .vv-footer .site-footer__sns-icon{border-color:rgba(255,255,255,.25);background:transparent;color:#fff}
body.coletlab-vivid-home .vv-footer .site-footer__bottom{margin-top:56px;padding-top:28px;border-top-color:rgba(255,255,255,.12);color:rgba(255,255,255,.6)}
body.coletlab-vivid-home .vv-footer .site-footer__legal a{color:#fff}
body.coletlab-vivid-home .vv-footer .site-footer__toggle{color:#fff}
body.coletlab-vivid-home .vv-footer .photo-motion-toggle{right:6%;bottom:28px;color:rgba(255,255,255,.7);border-bottom-color:rgba(255,255,255,.4);font-family:"Noto Sans JP",sans-serif}
body.coletlab-vivid-home .vv-footer :is(a,button):focus-visible{outline-color:var(--vv-aqua)}
@media(max-width:767px){
 body.coletlab-vivid-home .vv-footer__marquee{padding:20px 0 4px}
 body.coletlab-vivid-home .vv-footer__body{padding:44px 6% 84px}
 body.coletlab-vivid-home .vv-footer .photo-footer-brand{margin-bottom:12px;padding-bottom:40px}
 body.coletlab-vivid-home .vv-footer .photo-footer-brand .coletlab-partner{margin-top:36px}
 body.coletlab-vivid-home .vv-footer .photo-footer-brand .coletlab-partner__inner{grid-template-columns:minmax(0,1fr);gap:24px}
 body.coletlab-vivid-home .vv-footer .site-footer__channels>div{border-color:rgba(255,255,255,.12)}
 body.coletlab-vivid-home .vv-footer .site-footer__toggle svg{color:#fff}
}
/* ===== 2026-11-02 フッターを本文の部品にそろえる =====
   ユーザー「パンくずとフッターのデザインが、なんか普通。他と合っていない」→お任せ。
   暗い面は、直前の色のグラデーションのお問い合わせ欄との区切りとして残し、本文と同じ特徴を足す：上の縁の4色の線、
   英字の見出しと色の下線、◆の印、触れると出る矢印、線とずらした影のステッカー。 */
body.coletlab-vivid-home .vv-footer__marquee{border-top:6px solid;border-image:linear-gradient(90deg,var(--vv-pink),var(--vv-orange) 35%,var(--vv-lemon) 65%,var(--vv-aqua)) 1}
/* 会社名のまとまりを、白い線の枠とピンクのずらした影のステッカーに */
body.coletlab-vivid-home .vv-footer__company{padding:28px 32px;border:2px solid #fff;border-radius:24px;box-shadow:6px 6px 0 var(--vv-pink)}
/* 列の見出し：英字の書体に色の下線（列ごとに色を変える） */
body.coletlab-vivid-home .vv-footer .site-footer__nav-label,body.coletlab-vivid-home .vv-footer .site-footer__nav-title:not(:has(.site-footer__nav-label)){position:relative;display:inline-block;padding-bottom:10px;font:800 14px/1.2 Unbounded,Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#fff}
body.coletlab-vivid-home .vv-footer .site-footer__nav-label::after,body.coletlab-vivid-home .vv-footer .site-footer__nav-title:not(:has(.site-footer__nav-label))::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:4px;border-radius:2px;background:var(--c,var(--vv-aqua))}
body.coletlab-vivid-home .vv-footer .site-footer__nav--services{--c:var(--vv-pink)}
body.coletlab-vivid-home .vv-footer .photo-footer-nav>nav:nth-of-type(2){--c:var(--vv-lemon)}
body.coletlab-vivid-home .vv-footer .site-footer__channels{--c:var(--vv-aqua)}
/* まとまりの見出しの前に◆ */
body.coletlab-vivid-home .vv-footer .site-footer__service-group-title{display:flex;align-items:center;gap:8px}
body.coletlab-vivid-home .vv-footer .site-footer__service-group-title::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;rotate:45deg;background:linear-gradient(135deg,var(--vv-pink),var(--vv-orange))}
/* リンクに触れると、色が変わり矢印が出る */
body.coletlab-vivid-home .vv-footer .site-footer__nav-list a{display:inline-flex;align-items:center;gap:6px}
body.coletlab-vivid-home .vv-footer .site-footer__nav-list a::after{content:"→";font:800 12px/1 Inter,sans-serif;color:var(--vv-lemon);opacity:0;translate:-4px 0;transition:opacity .2s,translate .3s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){body.coletlab-vivid-home .vv-footer .site-footer__nav-list a:hover::after{opacity:1;translate:0 0}}
/* SNSのボタン：白い丸に墨の線、色のずらした影 */
body.coletlab-vivid-home .vv-footer .site-footer__sns-icon{border:2px solid #fff;background:#fff;color:var(--vv-ink);box-shadow:3px 3px 0 var(--vv-aqua);transition:translate .25s,box-shadow .25s}
body.coletlab-vivid-home .vv-footer .site-footer__sns-icon:nth-child(2){box-shadow:3px 3px 0 var(--vv-pink)}
body.coletlab-vivid-home .vv-footer .site-footer__sns-icon:nth-child(3){box-shadow:3px 3px 0 var(--vv-lemon)}
@media(hover:hover){body.coletlab-vivid-home .vv-footer .site-footer__sns-icon:hover{translate:-2px -2px;box-shadow:5px 5px 0 var(--vv-aqua)}}
/* タブレットは会社名の枠とパートナー表示を縦に並べる（横に並べると、パートナーの文が細い列で何度も折り返した） */
@media(max-width:1023px){
 body.coletlab-vivid-home .vv-footer .photo-footer-brand{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
 body.coletlab-vivid-home .vv-footer__company{justify-self:start}
}
@media(max-width:767px){
 body.coletlab-vivid-home .vv-footer__company{padding:22px 22px 24px;justify-self:stretch}
 /* スマホは開閉する日本語の見出しだけを出す（英字の見出しは元の指定どおり隠す） */
 body.coletlab-vivid-home .vv-footer .site-footer__nav-label{display:none}
 /* スマホの開閉の行：日本語の見出しを大きく、右の印を白い丸に */
 body.coletlab-vivid-home .vv-footer .site-footer__toggle{font:800 16px/1.5 "Noto Sans JP",sans-serif;letter-spacing:.04em}
 body.coletlab-vivid-home .vv-footer .site-footer__toggle svg{box-sizing:content-box;width:14px;height:14px;padding:6px;border:2px solid rgba(255,255,255,.5);border-radius:50%}
}
@media(prefers-reduced-motion:reduce){body.coletlab-vivid-home .photo-header{transition:none}}
@keyframes vv-menu-in{from{clip-path:inset(0 0 100% 0 round 28px);translate:0 -12px}to{clip-path:inset(0 0 0 0 round 28px);translate:0 0}}
@keyframes vv-menu-item{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes vv-menu-flow{from{background-position:0% 50%}to{background-position:100% 50%}}
/* 動きを止める設定では、メニューの登場と色の流れも止める */
html[data-motion="off"] #mobile-menu,html[data-motion="off"] #mobile-menu *{animation:none!important}
@media(prefers-reduced-motion:reduce){#mobile-menu,#mobile-menu *{animation:none!important}}

/* ===== 2026-11-02 ヘッダーとメニューを本文の部品にそろえる =====
   ユーザー「少しスクロールした時の黒い背景のヘッダーメニューは本当にサイトに合ってるのかな」「ヘッダーメニューの中身も修正が必要。お任せ」。
   本文のカード・フォームの枠と同じ、白い面・墨の2pxの線・ずらした影にする。黒い帯は濃い節で背景に溶け、別の部品に見えていた。 */
/* ページ上部：メニューの帯を白い面に墨の線 */
body.coletlab-vivid-home .vv-header .photo-primary-nav{background:#fff;border:2px solid var(--vv-ink);box-shadow:4px 4px 0 var(--vv-ink);-webkit-backdrop-filter:none;backdrop-filter:none}
/* スクロール後：帯全体を白い面に。ロゴは色のまま、文字は墨 */
body.coletlab-vivid-home .vv-header[data-scrolled="true"]{background:#fff;border:2px solid var(--vv-ink);box-shadow:6px 6px 0 var(--vv-ink);-webkit-backdrop-filter:none;backdrop-filter:none}
body.coletlab-vivid-home .vv-header[data-scrolled="true"] .photo-primary-nav{border:0;box-shadow:none;background:transparent}
body.coletlab-vivid-home .vv-header[data-scrolled="true"] .vv-header__logo--white{opacity:0}
body.coletlab-vivid-home .vv-header[data-scrolled="true"] .vv-header__logo--color{opacity:1}
body.coletlab-vivid-home .vv-header[data-scrolled="true"] .global-nav__en{color:var(--vv-teal)}
body.coletlab-vivid-home .vv-header[data-scrolled="true"] .global-nav__list>li>a{color:var(--vv-ink)}
body.coletlab-vivid-home .vv-header[data-scrolled="true"] .global-nav__list>li>a:hover{color:var(--vv-teal)}
/* お問い合わせのボタンも本文のボタンと同じ墨の線とずらした影 */
body.coletlab-vivid-home .vv-header .site-header__mail{border:2px solid var(--vv-ink);box-shadow:3px 3px 0 var(--vv-ink);color:var(--vv-ink)}
body.coletlab-vivid-home .vv-header .site-header__mail::after{font-weight:800}
body.coletlab-vivid-home .vv-header .site-header__mail:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--vv-ink)}
/* パソコンの開く一覧：見出しの下線をまとまりごとに色分けし、項目を少し大きく */
body.coletlab-vivid-home .vv-header .global-nav__dropdown{box-shadow:6px 6px 0 var(--vv-ink)}
body.coletlab-vivid-home .vv-header .global-nav__dropdown-label{color:var(--vv-ink);border-bottom-width:3px}
body.coletlab-vivid-home .vv-header .global-nav__dropdown-group:nth-child(3n+1) .global-nav__dropdown-label{border-bottom-color:var(--vv-pink)}
body.coletlab-vivid-home .vv-header .global-nav__dropdown-group:nth-child(3n+2) .global-nav__dropdown-label{border-bottom-color:var(--vv-aqua)}
body.coletlab-vivid-home .vv-header .global-nav__dropdown-group:nth-child(3n) .global-nav__dropdown-label{border-bottom-color:var(--vv-lemon)}
body.coletlab-vivid-home .vv-header .global-nav__dropdown ul a{font-size:15px}
body.coletlab-vivid-home .vv-header .global-nav__dropdown ul a:is(:hover,:focus-visible){background:#FFF1E8}
@media(max-width:1023px){
 body.coletlab-vivid-home .vv-header[data-scrolled="true"]{box-shadow:4px 4px 0 var(--vv-ink)}
 /* メニューのボタンは、上部・スクロール後・開いている間とも墨の丸に白い線 */
 body.coletlab-vivid-home .vv-header[data-scrolled="true"] .menu-toggle,body.coletlab-vivid-home.menu-open .vv-header .menu-toggle{background:var(--vv-ink)}
 body.coletlab-vivid-home .vv-header[data-scrolled="true"] .menu-toggle span,body.coletlab-vivid-home.menu-open .vv-header .menu-toggle span{background:#fff}
 /* スマホ・タブレットのメニュー：白い面・墨の線・ずらした影。英字は色のグラデーション、日本語は墨 */
 body.coletlab-vivid-home #mobile-menu{color:var(--vv-ink);background:radial-gradient(60% 40% at 100% 0%,rgba(62,214,220,.2),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(240,88,126,.14),transparent 70%),#fff;box-shadow:8px 8px 0 var(--vv-ink)}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__item{border-bottom-color:rgba(19,32,43,.14)}
 body.coletlab-vivid-home #mobile-menu :is(.mobile-menu__link,.mobile-menu__expand){color:var(--vv-ink)}
 /* background の一括指定にすると、文字の形に切り抜く指定（background-clip:text）まで戻って色の塊になる。色の画像だけを替える */
 body.coletlab-vivid-home #mobile-menu .mobile-menu__en{background-image:linear-gradient(100deg,#0FA3A8,var(--vv-pink) 60%,var(--vv-orange))}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__ja{color:#4A5A66}
 body.coletlab-vivid-home #mobile-menu :is(.mobile-menu__link,.mobile-menu__expand):is(:hover,:focus-visible) .mobile-menu__ja{color:var(--vv-ink)}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__chevron{border-color:var(--vv-ink);color:var(--vv-ink)}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__expand[aria-expanded="true"] .mobile-menu__chevron{color:var(--vv-ink);background:var(--vv-aqua);border-color:var(--vv-ink)}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__item > .mobile-menu__sub{background:#EAF3FB;border:2px solid var(--vv-ink)}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__category{border-top-color:rgba(19,32,43,.14)}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__category-toggle{color:var(--vv-ink)}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__sub a{color:var(--vv-ink)}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__sub a::after{color:var(--vv-pink)}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__sub a:is(:hover,:focus-visible){color:var(--vv-ink);background:#fff}
 body.coletlab-vivid-home #mobile-menu .mobile-menu__cta a{box-shadow:5px 5px 0 var(--vv-ink)}
 body.coletlab-vivid-home #mobile-menu :is(a,button):focus-visible{outline:3px solid var(--vv-pink);outline-offset:2px}
}

/* 見出しの英字は Unbounded（2026-11-02 ユーザー「トップMVのAIって文字も見出しに使っている英語はこのフォントが良い」。トップの Learn. Adopt. Build. Keep. と同じ書体）。
   書体の並びの先頭に Unbounded を置き、英字・数字だけを Unbounded で、日本語は Noto Sans JP で表示する（Unbounded は日本語の字を持たない）。
   新しいデザインの全ページ（トップ・下層・一覧）の本文の見出しと、下層の冒頭の大きな見出し（〜__catch）に当てる。メニュー・フッターは対象外 */
/* 記事の見出しは対象外（2026-11-02 ユーザー「コラムなどの記事の見出しにはUnboundedは適用しなくて良い」）。
   記事ページ（vl-single）の題名・本文の見出しと、一覧に並ぶ記事の題名（〜card__title・お知らせの行・検索結果・関連記事）は元の書体のまま */
body.coletlab-vivid-home:not(.vl-single) main :is(h1,h2,h3,h4):not([class*="card__title"],[class*="card-title"],.ar-line__name,.search-result__title,.vl-latest__title),
body.coletlab-vivid-home main [class*="-hero__catch"]{font-family:"Unbounded","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif!important}

/* COLET NAVI の起動ボタン（2026-11-02 ユーザー「COLET NAVI…全てのページを終わらせて」）。
   正本は別リポジトリのプラグイン（colet-lab/coletlab-ai-consultation の widget.css）。機能・文言・位置は変えず、
   新しいデザインのページでだけ、見た目を下層ページの部品（墨の線・ずらした影）にそろえる上書き */
body.coletlab-vivid-home #cn-launcher{border:2px solid #13202B;border-radius:20px;background:#13202B;box-shadow:5px 5px 0 #F0587E;transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-home #cn-launcher:hover{translate:2px 2px;box-shadow:3px 3px 0 #F0587E}
body.coletlab-vivid-home #cn-launcher img{border:2px solid #fff}
body.coletlab-vivid-home #cn-dismiss{border:2px solid #13202B;background:#fff;color:#13202B;box-shadow:3px 3px 0 #3ED6DC}
body.coletlab-vivid-home #cn-panel{border:2px solid #13202B;border-radius:24px;box-shadow:10px 10px 0 #0FA3A8}
@media(max-width:700px){body.coletlab-vivid-home #cn-panel{border:0;border-radius:0;box-shadow:none}}
/* 入口の英字 COLET NAVI もサイトの英字（Unbounded）にそろえる（2026-11-02 ユーザー「見出しに使っている英語はこのフォント」）。読み込み待ちの「閉じる」は丸い札に */
body.coletlab-vivid-home #cn-launcher strong{font-family:"Unbounded","Noto Sans JP",sans-serif!important;font-style:normal!important;font-weight:800!important;font-size:15px!important;letter-spacing:.02em!important;background:linear-gradient(90deg,#3ED6DC,#F5CF6B,#F0587E);-webkit-background-clip:text;background-clip:text;color:transparent!important}
body.coletlab-vivid-home #cn-fallback button{border:2px solid #13202B!important;border-radius:999px!important;background:#13202B!important;color:#fff!important;padding:10px 22px!important;box-shadow:3px 3px 0 #F0587E!important;font-weight:800}

/* 離脱ポップアップ：白い面に墨の線とずらした影、ラベルはオレンジの吹き出し、ボタンは墨の面 */
body.coletlab-vivid-home .exit-popup__card{border:2px solid #13202B!important;border-radius:26px!important;background:#fff!important;box-shadow:10px 10px 0 #F0587E!important}
body.coletlab-vivid-home .exit-popup__label{display:inline-block;padding:7px 14px;border-radius:14px;background:#F7894A!important;color:#fff!important;font:800 11px/1.3 "Unbounded","Inter",sans-serif!important;letter-spacing:.16em}
body.coletlab-vivid-home .exit-popup__title{font-weight:900;color:#13202B}
body.coletlab-vivid-home .exit-popup__cta{border:2px solid #13202B!important;border-radius:999px!important;box-shadow:4px 4px 0 #13202B!important;transition:translate .2s,box-shadow .2s}
body.coletlab-vivid-home .exit-popup__cta:hover{translate:2px 2px;box-shadow:2px 2px 0 #13202B!important}
body.coletlab-vivid-home .exit-popup__close{border:2px solid #13202B!important;border-radius:50%!important;background:#fff!important;color:#13202B!important}


/* 誘導の写真（2026-11-02）：離脱ポップアップ・記事のCTA・追従サイドバーの絵を、丸く切った写真に。枠の箱は付けない */
body.coletlab-vivid-home .exit-popup__mark:has(.column-offer-art--photo){width:112px!important;height:112px!important;padding:0!important;border:3px solid #fff!important;border-radius:50%!important;overflow:hidden;background:none!important;box-shadow:0 12px 26px -14px rgba(19,32,43,.5)!important}
body.coletlab-vivid-home .single-post__next-lp__visual:has(.column-offer-art--photo){width:min(180px,40vw)!important;aspect-ratio:1!important;justify-self:center;align-self:center;padding:0!important;border:3px solid #fff!important;border-radius:50%!important;overflow:hidden;background:none!important;box-shadow:0 14px 30px -16px rgba(19,32,43,.5)!important}
body.coletlab-vivid-home .column-offer-art--photo{display:block;width:100%!important;height:100%!important;object-fit:cover;border-radius:0}

/* パンくずは文字として1行目の続きから流す（2026-11-02 ユーザー「ズレてる。パンくず」）。
   以前は並びを flex にしていたため、最後の項目（今いるページ）が1行目に空きがあっても丸ごと次の行に落ちていた
   （会社概要・事業領域・お問い合わせ・研修・Instagram は幅の広い画面でも。記事は長い題名で）。区切りの◆は文字の高さの中央に置く */
body.coletlab-vivid-home .breadcrumb__list{display:block!important;line-height:1.75!important}
body.coletlab-vivid-home .breadcrumb__list>li{display:inline!important;flex:none!important;min-width:0!important}
body.coletlab-vivid-home .breadcrumb__list>li.breadcrumb__sep{display:inline-block!important;position:relative;width:7px!important;height:7px!important;margin:0 11px!important;vertical-align:middle!important;top:-2px;transform:none!important;translate:none!important}
body.coletlab-vivid-home .breadcrumb__sep::before{position:absolute;inset:0}
body.coletlab-vivid-home .breadcrumb__list [aria-current="page"]{word-break:normal;text-wrap-style:auto}