/* トップページ（2026-11-01 やり直し版）。文字と色が主役。スマホを基準に、広い画面で拡張する。 */
.vv-page{
  --ink:#13202B;--ink2:#1D3A4A;--paper:#F6F9FB;--sky:#EAF3FB;
  --teal:#067B7B;--teal2:#0FA3A8;--aqua:#3ED6DC;
  --pink:#D23E66;--pink2:#F0587E;--orange:#F7894A;--lemon:#F5CF6B;
  --hh:78px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  --jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  --en:"Inter","Noto Sans JP",sans-serif;
  --display:"Unbounded","Inter","Noto Sans JP",sans-serif;
  --body:500 16px/1.95 var(--jp);
  overflow-x:clip;color:var(--ink);font-family:var(--jp);background:var(--paper);
  font-feature-settings:"palt";
}
.vv-page *,.vv-page *::before,.vv-page *::after{box-sizing:border-box}
/* 初期化は優先度0にする（個別の余白指定を打ち消さないため）。 */
:where(.vv-page) :where(h1,h2,h3,p,ol,ul,figure){margin:0;padding:0}
:where(.vv-page) :where(ol,ul){list-style:none}
:where(.vv-page) a{color:inherit;text-decoration:none}
.vv-page a:focus-visible{outline:3px solid var(--aqua);outline-offset:4px;border-radius:8px}
.vv-page p{word-break:keep-all;overflow-wrap:anywhere}
.vv-char{display:inline-block;will-change:transform}
/* 見出しの上の英字ラベル。ラベル→見出しは20px。 */
.vv-label{margin-bottom:20px;font:700 12px/1.4 var(--display);letter-spacing:.22em;color:var(--teal2)}
.vv-philo .vv-label{color:var(--aqua)}

/* 流れる帯 */
.vv-marquee{position:absolute;left:-10%;width:120%;overflow:hidden;white-space:nowrap;pointer-events:none;z-index:1}
.vv-marquee__track{display:inline-flex;align-items:center;gap:.6em;padding:.62em 0;width:max-content;will-change:transform}
.vv-marquee span{font:800 clamp(20px,3vw,44px)/1.15 var(--display);letter-spacing:0;white-space:nowrap}
.vv-marquee i{display:inline-block;width:.6em;height:.6em;border-radius:22%;transform:rotate(45deg);background:linear-gradient(135deg,var(--aqua),var(--lemon) 50%,var(--pink2));flex:none}

/* 1 冒頭 */
.vv-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:clip;padding:180px 6% 130px;background:var(--grain),var(--paper)}
.vv-hero__orb{position:absolute;right:-38%;top:24%;width:min(118vw,880px);aspect-ratio:1;z-index:0;pointer-events:none}
.vv-hero__orb span{position:absolute;inset:0;border-radius:50%}
.vv-hero__orb span:nth-child(1){background:conic-gradient(from 0deg,var(--teal),var(--aqua),var(--lemon),var(--orange),var(--pink2),var(--teal));-webkit-mask:radial-gradient(farthest-side,transparent 58%,#000 59%);mask:radial-gradient(farthest-side,transparent 58%,#000 59%);animation:vv-spin 22s linear infinite}
.vv-hero__orb span:nth-child(2){inset:22%;background:radial-gradient(circle at 30% 30%,var(--pink2),transparent 62%);filter:blur(30px);opacity:.55;animation:vv-float 9s ease-in-out infinite alternate}
.vv-hero__orb span:nth-child(3){inset:30% 8% 8% 30%;background:radial-gradient(circle,var(--aqua),transparent 65%);filter:blur(36px);opacity:.6;animation:vv-float 11s ease-in-out infinite alternate-reverse}
.vv-marquee--a{top:84px;transform:rotate(-3deg);background:linear-gradient(90deg,var(--teal),var(--teal2) 50%,var(--teal));color:#fff}
.vv-marquee--b{bottom:30px;transform:rotate(2.5deg);background:#fff;color:var(--ink);border-block:2px solid var(--ink)}
.vv-hero__inner{position:relative;z-index:2;width:100%}
.vv-kicker{font:700 12px/1.4 var(--display);letter-spacing:.22em;color:var(--ink);margin-bottom:28px}
.vv-kicker b{color:var(--pink)}
.vv-hero__title{font:900 min(15vw,150px,15svh)/1.08 var(--jp);letter-spacing:-.04em;white-space:nowrap}
.vv-hero__title em{position:relative;font-style:normal;color:var(--teal);display:inline-block}
/* 見出しのメリハリ：要の語（知識・AI・活かす）を大きく残し、つなぎの語（企業の・を、・と・。）を小さくする */
.vv-hero__title .vv-hero__sub{font-size:.46em;letter-spacing:0;margin-inline:.06em}
.vv-hero__title em::after{content:"";position:absolute;left:0;right:.4em;bottom:.08em;height:.22em;background:var(--lemon);z-index:-1;transform-origin:left;transform:scaleX(var(--vv-scale,1));border-radius:.1em}
.vv-hero__lead{margin-top:28px;font:700 clamp(16px,1.6vw,22px)/1.85 var(--jp);letter-spacing:.04em;max-width:22em}

/* 2 考え方 */
.vv-philo{background:var(--paper)}
.vv-philo__panel{position:relative;overflow:clip;padding:clamp(150px,30vw,340px) 6% clamp(96px,16vw,200px);color:#fff;background:var(--grain),radial-gradient(60% 50% at 85% 20%,rgba(62,214,220,.38),transparent 70%),radial-gradient(55% 45% at 10% 90%,rgba(240,88,126,.36),transparent 70%),linear-gradient(160deg,var(--ink),var(--ink2) 60%,#0B2F38)}
.vv-philo__giant{position:absolute;top:clamp(40px,8vw,110px);left:0;display:flex;gap:.25em;white-space:nowrap;font:800 clamp(84px,19vw,300px)/1 var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22);pointer-events:none}
.vv-philo__giant span:nth-child(2){font-family:var(--jp);font-weight:900;-webkit-text-stroke:0;background:linear-gradient(100deg,var(--aqua),var(--lemon) 55%,var(--pink2));-webkit-background-clip:text;background-clip:text;opacity:.9}
.vv-philo__body{position:relative;z-index:1;max-width:780px;margin-left:auto}
.vv-philo__title{margin-top:16px;font:900 clamp(34px,6vw,80px)/1.24 var(--jp);letter-spacing:-.02em}
.vv-philo__text{margin-top:28px;font:700 clamp(17px,1.6vw,21px)/2.05 var(--jp);letter-spacing:.04em}

/* 3 AI活用の支援。通常は縦に並べ、動きがある時は画面を固定して1枚ずつ切り替える。 */
.vv-support{position:relative;padding:110px 6% 80px;background:var(--grain),var(--paper)}
.vv-support__latin{display:flex;flex-direction:column;font:800 clamp(46px,13vw,104px)/.98 var(--display);letter-spacing:-.04em}
.vv-support__latin span{width:max-content;color:transparent;background:linear-gradient(120deg,var(--teal),var(--aqua) 40%,var(--pink2) 75%,var(--orange));-webkit-background-clip:text;background-clip:text;padding-bottom:.06em}
.vv-support__title{margin-top:28px;font:900 clamp(28px,3.8vw,52px)/1.3 var(--jp);letter-spacing:-.02em}
.vv-support__lead{margin-top:14px;font:var(--body);letter-spacing:.04em}
.vv-cards{display:grid;gap:24px;margin-top:48px}
.vv-card__inner{position:relative;display:flex;flex-direction:column;min-height:380px;height:100%;padding:clamp(28px,3.6vw,48px);border-radius:32px;overflow:clip;color:#fff;container-type:inline-size;transform-origin:50% 100%;box-shadow:0 30px 60px -32px rgba(19,32,43,.55)}
.vv-card__inner::after{content:"";position:absolute;inset:0;background:var(--grain);pointer-events:none}
.vv-card--teal .vv-card__inner{background:radial-gradient(70% 60% at 100% 100%,rgba(62,214,220,.7),transparent 70%),linear-gradient(145deg,#055E5E,var(--teal) 45%,var(--teal2))}
.vv-card--pink .vv-card__inner{background:radial-gradient(70% 60% at 100% 100%,rgba(247,137,74,.75),transparent 70%),linear-gradient(145deg,#A82A50,var(--pink) 50%,#DA4A6F)}
.vv-card--lemon .vv-card__inner{color:var(--ink);background:radial-gradient(70% 60% at 100% 100%,rgba(240,88,126,.45),transparent 70%),linear-gradient(145deg,#F9DD8C,var(--lemon) 50%,#F6B865)}
.vv-card--ink .vv-card__inner{background:radial-gradient(70% 60% at 100% 100%,rgba(62,214,220,.45),transparent 70%),linear-gradient(145deg,var(--ink),var(--ink2) 60%,#0D4F58)}
.vv-card__no{font:800 clamp(38px,5vw,68px)/1 var(--display);letter-spacing:-.02em;align-self:flex-start;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.92)}
.vv-card--lemon .vv-card__no{-webkit-text-stroke-color:var(--ink)}
.vv-card__inner h3{position:relative;z-index:1;margin-top:24px;font:900 clamp(26px,3vw,40px)/1.32 var(--jp);letter-spacing:-.01em;word-break:keep-all}
.vv-card__inner p{position:relative;z-index:1;margin-top:14px;font:var(--body);font-weight:600;letter-spacing:.04em;max-width:21em}
.vv-card__more{position:relative;z-index:1;align-self:flex-start;margin-top:24px;letter-spacing:.06em;padding-bottom:3px;border-bottom:2px solid currentColor;font:800 14px/1.5 var(--jp)}
.vv-card__verb{position:absolute;right:5cqi;bottom:3cqi;z-index:0;font:900 21cqi/1 var(--jp);letter-spacing:-.06em;white-space:nowrap;pointer-events:none}
.vv-card--teal .vv-card__verb,.vv-card--pink .vv-card__verb,.vv-card--ink .vv-card__verb{color:rgba(255,255,255,.94)}
.vv-card--lemon .vv-card__verb{color:var(--ink)}

/* 固定中の舞台（スクリプトが .is-pinned を付けた時だけ） */
.vv-support.is-pinned{padding:0;overflow:clip}
.vv-support.is-pinned .vv-support__pin{height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px;padding:calc(var(--hh) + 12px) 6% 22px}
.vv-support.is-pinned .vv-support__latin{flex-direction:row;flex-wrap:wrap;gap:.1em .3em;font-size:clamp(20px,6vw,30px);line-height:1.1}
.vv-support.is-pinned .vv-support__latin span{background-image:none;-webkit-text-stroke:1.5px rgba(19,32,43,.3);transition:-webkit-text-stroke-color .3s}
.vv-support.is-pinned .vv-support__latin span.is-active{background-image:linear-gradient(120deg,var(--teal),var(--aqua) 40%,var(--pink2) 75%,var(--orange));-webkit-text-stroke-color:transparent}
.vv-support.is-pinned .vv-support__title{margin-top:10px;font-size:clamp(22px,6vw,30px)}
.vv-support.is-pinned .vv-support__lead{margin-top:2px;font-size:14px}
.vv-support.is-pinned .vv-cards{position:relative;display:block;margin:0;height:100%}
.vv-support.is-pinned .vv-card{position:absolute;inset:0}
.vv-support.is-pinned .vv-card__inner{min-height:0}
/* スマホは右下に外部の相談ボタンが重なるため、大きな動詞を左下に置く。 */
@media(max-width:767px){.vv-card__verb{left:7cqi;right:auto;bottom:5cqi;font-size:23cqi}}

/* 4 事業 */
.vv-biz{position:relative;overflow:clip;padding:96px 6% 140px;background:#fff}
.vv-ring{position:absolute;right:-44%;bottom:60px;width:min(120vw,800px);aspect-ratio:1;pointer-events:none}
.vv-ring svg{width:100%;height:100%;overflow:visible}
.vv-ring text{font:800 30px var(--display);letter-spacing:4px;fill:var(--teal)}
.vv-biz__copy{position:relative;z-index:1;max-width:720px}
.vv-biz__title{margin-top:16px;font:900 clamp(34px,5.6vw,78px)/1.24 var(--jp);letter-spacing:-.02em}
.vv-biz__text{margin-top:28px;font:var(--body);letter-spacing:.04em;max-width:34em}
.vv-biz__links{position:relative;z-index:1;display:grid;gap:22px;margin-top:56px}
.vv-biz__links>li{display:flex}
.vv-biz__link{display:flex;flex-direction:column;flex:1;width:100%;min-height:220px;padding:30px 28px 32px;border:2px solid var(--ink);border-radius:28px;background:#fff;box-shadow:8px 8px 0 var(--c,var(--teal));transition:translate .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1)}
.vv-biz__link--web{--c:var(--teal2)}.vv-biz__link--field{--c:var(--pink2)}.vv-biz__link--event{--c:var(--lemon)}
.vv-biz__link:hover{translate:-4px -4px;box-shadow:14px 14px 0 var(--c)}
.vv-biz__en{display:block;font:800 clamp(40px,4.4vw,60px)/1 var(--display);letter-spacing:-.03em;color:transparent;background:linear-gradient(110deg,var(--c),var(--ink) 140%);-webkit-background-clip:text;background-clip:text}
.vv-biz__link--event .vv-biz__en{background:linear-gradient(110deg,#E8A93A,var(--orange));-webkit-background-clip:text;background-clip:text}
.vv-biz__link h3{margin-top:0;padding-top:28px;font:900 21px/1.45 var(--jp);letter-spacing:0;word-break:keep-all}
.vv-biz__link p{margin-top:10px;font:500 15px/1.85 var(--jp);letter-spacing:.04em}

/* 5 AI Lab */
.vv-lab{position:relative;overflow:clip;padding:40px 6% 120px;color:#fff;background:var(--grain),radial-gradient(50% 50% at 80% 70%,rgba(15,163,168,.4),transparent 70%),var(--ink)}
.vv-marquee--lab{position:relative;left:-6%;width:112%}
.vv-marquee--lab span{font-size:clamp(72px,16vw,232px);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.3)}
.vv-marquee--lab span:nth-of-type(2n){-webkit-text-stroke:0;background:linear-gradient(100deg,var(--aqua),var(--lemon));-webkit-background-clip:text;background-clip:text}
.vv-lab__card{position:relative;z-index:2;display:block;max-width:880px;margin:-2vw auto 0;padding:clamp(30px,5vw,60px) clamp(26px,5vw,60px);border:1px solid rgba(255,255,255,.22);border-radius:32px;background:linear-gradient(140deg,rgba(255,255,255,.1),rgba(255,255,255,.03));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .3s}
.vv-lab__card:hover{border-color:var(--aqua)}
.vv-lab__name{font:800 clamp(44px,6.6vw,96px)/1 var(--display);letter-spacing:-.04em;color:transparent;background:linear-gradient(100deg,var(--aqua),var(--lemon));-webkit-background-clip:text;background-clip:text;padding-bottom:.06em}
.vv-lab__title{margin-top:24px;font:900 clamp(26px,3.4vw,42px)/1.32 var(--jp);letter-spacing:-.01em}
.vv-lab__text{margin-top:16px;font:var(--body);letter-spacing:.04em}
.vv-lab__more{display:inline-block;margin-top:28px;letter-spacing:.06em;padding-bottom:3px;border-bottom:2px solid currentColor;font:800 14px/1.5 var(--jp)}

/* 6 相談。PCは左に見出し、右に相談の内容と電話。 */
.vv-contact{position:relative;overflow:clip;padding:150px 6% 120px;background:var(--grain),linear-gradient(115deg,var(--pink2),var(--orange) 40%,var(--lemon) 72%,var(--aqua));background-size:auto,260% 260%;animation:vv-flow 16s ease-in-out infinite alternate}
.vv-marquee--contact{top:30px;background:var(--ink);color:#fff;transform:rotate(-2deg)}
.vv-contact__inner{position:relative;z-index:2;display:grid;gap:48px}
.vv-contact__title{font:900 min(13.5vw,150px)/1.12 var(--jp);letter-spacing:-.04em;white-space:nowrap}
.vv-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:64px;margin-top:40px;padding:0 40px;border-radius:999px;background:var(--ink);color:#fff;font:800 18px/1.2 var(--jp);letter-spacing:.08em;transition:background .25s,color .25s}
.vv-btn:hover{background:#fff;color:var(--ink)}
.vv-contact__panel{padding:clamp(28px,3vw,44px) clamp(24px,3vw,44px);border:2px solid var(--ink);border-radius:32px;background:rgba(255,255,255,.72);box-shadow:10px 10px 0 var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vv-contact__lead{font:var(--body);font-weight:600;letter-spacing:.04em}
/* 相談の種類。縦に並べると欄が長くなるため、色の短い線を頭に付けた語を横に流す。語の途中では改行しない。 */
.vv-contact__topics{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:24px;padding:20px 0;border-block:1px solid rgba(19,32,43,.18)}
.vv-contact__topics li{display:inline-flex;align-items:center;gap:8px;font:700 15px/1.6 var(--jp);letter-spacing:.04em;white-space:nowrap}
.vv-contact__topics li::before{content:"";flex:none;width:14px;height:3px;border-radius:2px;background:var(--teal)}
.vv-contact__topics li:nth-child(4n+2)::before{background:var(--pink)}
.vv-contact__topics li:nth-child(4n+3)::before{background:var(--orange)}
.vv-contact__topics li:nth-child(4n+4)::before{background:var(--ink)}
.vv-contact__tel{display:grid;margin-top:28px;padding-top:24px;border-top:2px dashed rgba(19,32,43,.35)}
.vv-contact__tel span{font:700 13px/1.5 var(--jp);letter-spacing:.06em}
.vv-contact__tel b{margin-top:6px;font:800 clamp(22px,3vw,42px)/1.1 var(--display);letter-spacing:0;white-space:nowrap}
.vv-contact__tel small{margin-top:6px;font:700 13px/1.5 var(--jp)}
.vv-contact__tel:hover b{color:var(--pink)}

@keyframes vv-spin{to{transform:rotate(1turn)}}
@keyframes vv-float{from{transform:translate(-6%,4%) scale(.95)}to{transform:translate(8%,-6%) scale(1.08)}}
@keyframes vv-flow{from{background-position:0 0,0% 50%}to{background-position:0 0,100% 50%}}

/* タブレット以上 */
@media(min-width:768px){
  .vv-hero{padding:200px 6% 170px}
  /* タブレットの輪は見出しと説明の下、右下から昇る位置に置く。 */
  .vv-hero__orb{right:-26%;top:46%;width:min(78vw,620px)}
              .vv-marquee--a{top:104px;transform:rotate(-1.6deg)}
  .vv-philo__panel{min-height:min(100svh,900px)}
  .vv-biz{padding-top:140px}
  .vv-support.is-pinned .vv-support__pin{padding-bottom:40px}
  .vv-support.is-pinned .vv-cards{height:min(100%,560px);align-self:center}
  .vv-ring{right:-30%;width:min(90vw,760px)}
}
/* PC */
@media(min-width:1024px){
  /* 見出しは「企業の知識を、／AIと活かす。」の2行、説明は1行にする。 */
  .vv-br-sp{display:none}
  /* 2行の見出し。つなぎの語を小さくした分、要の語を大きくする（1行目は約4.3文字分の幅） */
  .vv-hero__title{font-size:min(13vw,172px,17svh)}
  .vv-hero__lead{max-width:none;white-space:nowrap}
  .vv-page{--hh:92px}
  .vv-hero{padding:226px 6% 150px}
              .vv-support{padding:160px 6% 160px}
  .vv-support__pin{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:6%;align-items:start}
  .vv-cards{margin-top:0}
  .vv-support.is-pinned .vv-support__pin{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:none;align-items:center;gap:6%;padding:calc(var(--hh) + 24px) 6% 48px}
  .vv-support.is-pinned .vv-support__latin{flex-direction:column;font-size:clamp(56px,6.4vw,104px);line-height:.98}
  .vv-support.is-pinned .vv-support__latin span{-webkit-text-stroke-width:2px}
  .vv-support.is-pinned .vv-support__title{margin-top:24px;font-size:clamp(30px,3.2vw,46px)}
  .vv-support.is-pinned .vv-support__lead{margin-top:10px;font-size:16px}
  .vv-support.is-pinned .vv-cards{height:min(68vh,600px)}
  .vv-biz{padding:180px 6% 180px}
  .vv-biz__links{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vv-lab{padding:60px 6% 160px}
  .vv-contact{padding:190px 6% 170px}
  .vv-contact__inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:5%}
  .vv-contact__title{font-size:min(7.6vw,124px)}
}

/* 余白の基準（2026-11-01 ユーザー指摘「ブロック同士の余白が全くない」で全面見直し）。
   見出し→本文、本文→リンク、ブロック同士、ボックスの内側、セクションの上下を、それぞれ下の値にそろえる。 */
.vv-page{--s-title-text:clamp(32px,3.2vw,44px);--s-text-action:clamp(40px,3.6vw,52px);--s-block:clamp(64px,7vw,104px);--s-box:clamp(32px,4vw,56px);--s-section:clamp(120px,14vw,200px)}
.vv-hero__lead{margin-top:var(--s-title-text)}
.vv-philo__panel{padding-bottom:var(--s-section)}
.vv-philo__title{margin-top:0}
.vv-philo__text{margin-top:var(--s-title-text)}
.vv-support{padding-top:var(--s-section);padding-bottom:var(--s-section)}
.vv-support__title{margin-top:var(--s-title-text)}
.vv-support__lead{margin-top:20px}
.vv-cards{gap:32px;margin-top:var(--s-block)}
.vv-card__inner{padding:var(--s-box)}
.vv-card__inner h3{margin-top:32px}
.vv-card__inner p{margin-top:20px}
.vv-card__more{margin-top:var(--s-text-action)}
.vv-support.is-pinned{padding:0}
.vv-support.is-pinned .vv-support__pin{gap:32px;padding:calc(var(--hh) + 24px) 6% 32px}
.vv-support.is-pinned .vv-support__title{margin-top:20px}
.vv-support.is-pinned .vv-support__lead{margin-top:10px}
.vv-support.is-pinned .vv-cards{margin:0}
.vv-biz{padding-top:var(--s-section);padding-bottom:var(--s-section)}
.vv-biz__title{margin-top:0}
.vv-biz__text{margin-top:var(--s-title-text)}
.vv-biz__links{gap:28px;margin-top:var(--s-block)}
.vv-biz__link{padding:var(--s-box)}
.vv-biz__link h3{padding-top:48px}
.vv-biz__link p{margin-top:16px}
.vv-lab{padding-top:56px;padding-bottom:var(--s-section)}
.vv-lab__card{margin:var(--s-block) auto 0;padding:clamp(40px,5vw,72px) var(--s-box)}
.vv-lab__title{margin-top:36px}
.vv-lab__text{margin-top:24px}
.vv-lab__more{margin-top:var(--s-text-action)}
/* 相談は上の帯の下に64〜104pxだけ空け、下もブロック間の値にする（長くなりすぎないように）。 */
.vv-contact{padding-top:calc(var(--s-block) + 90px);padding-bottom:var(--s-block)}
.vv-btn{margin-top:var(--s-text-action)}
.vv-contact__inner{gap:var(--s-block)}
.vv-contact__panel{padding:var(--s-box)}
.vv-contact__topics{margin-top:36px}
.vv-contact__tel{margin-top:40px;padding-top:36px}
.vv-contact__tel b{margin-top:12px}
.vv-contact__tel small{margin-top:10px}
@media(min-width:1024px){
  .vv-support.is-pinned .vv-support__pin{gap:6%;padding:calc(var(--hh) + 40px) 6% 56px}
  .vv-support.is-pinned .vv-support__title{margin-top:var(--s-title-text)}
  .vv-support.is-pinned .vv-support__lead{margin-top:16px}
  .vv-contact__inner{gap:6%}
  .vv-cards{margin-top:0}
}
/* 低い画面の固定中は、カード内の間隔を少し詰めて全文を収める（それでも各ブロックの間は20px以上）。 */
@media(max-height:760px){
  .vv-support.is-pinned .vv-support__lead{display:none}
  .vv-support.is-pinned .vv-card__inner{padding:28px}
  .vv-support.is-pinned .vv-card__inner h3{margin-top:20px}
  .vv-support.is-pinned .vv-card__inner p{margin-top:14px}
  .vv-support.is-pinned .vv-card__more{margin-top:24px}
}
@media(max-height:700px){.vv-support.is-pinned .vv-card__verb{font-size:14cqi}}
@media(max-height:600px){
  .vv-support.is-pinned .vv-card__verb{display:none}
  .vv-support.is-pinned .vv-card__inner{padding:24px}
  .vv-support.is-pinned .vv-support__pin{gap:20px}
}

/* 写真。生成した写真は小さく使う（この大きさなら網点は掛けない。2026-11-01 ユーザー判断）。 */
.vv-person,.vv-card__photo,.vv-philo__photo,.vv-biz__photo,.vv-lab__photo{background:var(--ink)}
.vv-person img,.vv-card__photo img,.vv-philo__photo img,.vv-biz__photo img,.vv-lab__photo img{display:block;width:100%;height:100%;object-fit:cover}
.vv-people{position:absolute;inset:0;z-index:2;pointer-events:none}
.vv-person{position:absolute;display:block;width:var(--d);aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 14px 26px -14px rgba(19,32,43,.55);will-change:transform}
/* 1280px未満。冒頭の写真は、文字のない2つの場所（見出しの右側＝上から、説明の下＝下から）に大きさと位置をばらして散らす。 */
@media(max-width:1279px){
  .vv-hero{align-items:flex-start}
  .vv-people{inset:0}
  .vv-person{translate:none}
  .vv-person--1{--d:clamp(56px,15vw,96px);right:auto;left:67%;top:200px;bottom:auto}
  .vv-person--2{--d:clamp(40px,11vw,64px);left:auto;right:3%;top:205px;bottom:auto}
  .vv-person--3{--d:clamp(60px,18vw,110px);left:6%;right:auto;top:auto;bottom:250px}
  .vv-person--4{--d:clamp(44px,13vw,76px);left:30%;right:auto;top:auto;bottom:150px}
  .vv-person--5{--d:clamp(64px,20vw,124px);left:52%;right:auto;top:auto;bottom:228px}
  .vv-person--6{--d:clamp(46px,14vw,88px);left:auto;right:5%;top:auto;bottom:138px}
}
/* スマホ。輪を下端から一定の位置に置き、弧の写真が説明より下に来るようにする。 */
@media(max-width:767px){
  .vv-hero{padding-bottom:390px}
  .vv-hero__orb{right:-38%;top:auto;bottom:96px;width:min(118vw,880px)}
}
/* 縦長のタブレット。スマホと同じく下端から置く。 */
@media(min-width:768px) and (max-width:1023px){
  .vv-hero{padding-bottom:450px}
  .vv-hero__orb{right:-22%;top:auto;bottom:120px;width:min(78vw,620px)}
  .vv-person--1{left:auto;right:8%;top:220px}
  .vv-person--2{right:4%;top:360px}
  .vv-person--3{bottom:300px}
  .vv-person--4{bottom:170px}
  .vv-person--5{bottom:262px}
  .vv-person--6{bottom:160px}
}
/* 横長のタブレット（1024〜1279px）。輪を下端から置き、弧の写真を冒頭の範囲に収める。 */
@media(min-width:1024px) and (max-width:1279px){
  .vv-hero{padding-bottom:450px}
  .vv-hero__orb{right:-14%;top:auto;bottom:110px;width:min(56vw,620px)}
  .vv-person--1{left:auto;right:2%;top:250px}
  .vv-person--2{right:8%;top:430px}
  .vv-person--3{bottom:300px}
  .vv-person--4{bottom:170px}
  .vv-person--5{bottom:262px}
  .vv-person--6{bottom:160px}
}
.vv-card__photos{position:absolute;top:clamp(28px,3.6vw,48px);right:clamp(28px,3.6vw,48px);z-index:1;display:flex;align-items:flex-start}
.vv-card__photo{display:block;width:18cqi;max-width:104px;aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 12px 24px -12px rgba(0,0,0,.5)}
.vv-card__photo:first-child{width:12cqi;max-width:70px;margin:8cqi -4cqi 0 0;position:relative;z-index:1}
/* 考え方の写真も、ほかの写真と同じ丸・同じ3pxの白い縁にそろえる。 */
.vv-philo__photo{position:relative;z-index:1;width:min(40%,160px);margin:0 0 48px auto;border:3px solid #fff;border-radius:50%;overflow:hidden;aspect-ratio:1;box-shadow:0 24px 48px -24px rgba(0,0,0,.7)}
/* 事業カードの右上の写真は、カードと同じ2pxの墨紺の縁と、カードと同じ色のずれた影にする。 */
.vv-biz__link{position:relative}
.vv-biz__photo{position:absolute;top:-20px;right:-14px;width:clamp(58px,5vw,78px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid var(--ink);rotate:8deg;box-shadow:4px 4px 0 var(--c,var(--teal))}
/* AI Labの右上の写真は、カードと同じ1pxの半透明の白い縁にする。 */
.vv-lab__photo{position:absolute;top:-34px;right:-10px;width:clamp(76px,7.4vw,108px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.22);rotate:8deg;box-shadow:0 18px 36px -18px rgba(0,0,0,.8)}
@media(max-width:767px){.vv-card__photo{width:20cqi}.vv-card__photo:first-child{width:13cqi;margin:6cqi -4cqi 0 0}.vv-card__inner h3{margin-top:40px}}
/* 1280px以上。冒頭の写真は色の輪のまわり（見出しより右）に、小さめに置く。 */
@media(min-width:1280px){
  .vv-person--1{--d:clamp(84px,7vw,116px);left:auto;right:30%;top:16%;bottom:auto}
  .vv-person--2{--d:clamp(72px,6vw,96px);left:auto;right:8%;top:14%;bottom:auto}
  .vv-person--3{--d:clamp(88px,7.6vw,124px);left:auto;right:3%;top:47%;bottom:auto}
  .vv-person--4{--d:clamp(66px,5.4vw,88px);left:auto;right:19%;top:33%;bottom:auto}
  .vv-person--5{--d:clamp(80px,6.8vw,112px);left:auto;right:16%;top:auto;bottom:16%}
  .vv-person--6{--d:clamp(64px,5.4vw,88px);left:auto;right:7%;top:auto;bottom:11%}
}
@media(min-width:1280px){.vv-philo__photo{position:absolute;left:8%;bottom:16%;width:min(13vw,180px);margin:0}}

/* 円周の文字は、1280px以上だけ見出しの右上に置く（それ未満はカードの後ろに回し、説明に重ねない）。 */
/* PC（1280px以上）の色の輪は元の大きさと位置。 */
@media(min-width:1280px){.vv-hero__orb{right:-8%;top:50%;translate:0 -50%;width:min(64vw,900px)}}
@media(min-width:1280px){.vv-ring{right:-8%;top:60px;bottom:auto;width:min(56vw,820px)}}

/* お知らせ・コラム・会社情報（2026-11-01追加・同日作り直し）。載せる量は控えめにし、見た目はほかの節と同じ大きな英字・色の影・動きで組む。写真は置かない。 */
.vv-notes{position:relative;overflow:clip;padding:var(--s-section) 6% clamp(96px,10vw,144px);background:var(--grain),radial-gradient(45% 40% at 92% 12%,rgba(240,88,126,.14),transparent 70%),radial-gradient(50% 45% at 4% 60%,rgba(62,214,220,.18),transparent 70%),linear-gradient(180deg,var(--sky),#fff 80%)}
.vv-notes__bg{position:absolute;top:clamp(24px,4vw,64px);left:0;margin:0;white-space:nowrap;font:800 clamp(110px,22vw,340px)/1 var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(6,123,123,.16);pointer-events:none;user-select:none}
.vv-notes__inner{position:relative;z-index:1;display:grid;row-gap:clamp(80px,9vw,128px);max-width:1200px;margin:0 auto}
.vv-notes__block--news{--c:var(--pink2)}
.vv-notes__block--column{--c:var(--teal2)}
:where(.vv-page) .vv-notes__en{display:block;margin:0;font:800 clamp(52px,7vw,96px)/1 var(--display);letter-spacing:-.03em;color:transparent;background:linear-gradient(110deg,var(--c),var(--ink) 150%);-webkit-background-clip:text;background-clip:text;overflow:hidden;padding-bottom:.08em}
.vv-notes__en .vv-char{display:inline-block}
:where(.vv-page) .vv-notes__title{margin:14px 0 36px;font:800 17px/1.5 var(--jp);letter-spacing:.12em}
/* お知らせ：罫線の行。触れると背景が左から色で満ちる。 */
.vv-notes__list{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.vv-notes__list li{border-bottom:1px solid rgba(19,32,43,.18)}
.vv-row{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:20px;row-gap:8px;padding:24px 8px 24px 0;color:inherit;text-decoration:none}
.vv-row::before{content:"";position:absolute;inset:0 -12px;z-index:-1;border-radius:14px;background:rgba(240,88,126,.12);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.vv-row__meta{grid-column:1;font:700 13px/1.4 var(--display);letter-spacing:.06em;color:var(--pink)}
.vv-row__title{grid-column:1;display:-webkit-box;overflow:hidden;font:700 16px/1.65 var(--jp);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vv-row .vv-arrow{grid-column:2;grid-row:1/span 2}
/* 矢印は丸の中。触れると色で塗られる。 */
.vv-arrow{display:grid;place-items:center;flex:none;width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;background:#fff;font:800 16px/1 var(--en);color:var(--ink);transition:background .3s,color .3s,transform .4s cubic-bezier(.16,1,.3,1)}
/* コラム：事業の節と同じ、墨紺の太い枠と色のずれた影のカード。影の色はカテゴリーごと。 */
.vv-notes__cards{display:grid;gap:22px;margin:0;padding:0;list-style:none}
.vv-post{--c:var(--teal2);position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:20px;row-gap:12px;padding:24px 24px 24px 26px;border:2px solid var(--ink);border-radius:24px;background:#fff;box-shadow:7px 7px 0 var(--c);color:inherit;text-decoration:none;transition:translate .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1)}
.vv-post--geo{--c:var(--aqua)}.vv-post--seo,.vv-post--web{--c:var(--lemon)}.vv-post--meo,.vv-post--ad{--c:var(--orange)}.vv-post--sns{--c:var(--pink2)}.vv-post--line{--c:var(--teal)}
.vv-post__meta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font:700 13px/1.4 var(--display);letter-spacing:.06em;color:#4A5A66}
.vv-post__cat{font:800 13px/1.4 var(--jp);letter-spacing:.04em;color:var(--ink);padding-left:14px;position:relative}
.vv-post__cat::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px var(--ink)}
.vv-post__title{display:-webkit-box;overflow:hidden;font:800 17px/1.6 var(--jp);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vv-notes__more{display:inline-block;margin-top:44px;padding-bottom:3px;border-bottom:2px solid currentColor;font:800 14px/1.5 var(--jp);letter-spacing:.06em;color:var(--ink);text-decoration:none}
.vv-row:focus-visible,.vv-post:focus-visible,.vv-notes__more:focus-visible{outline:3px solid var(--c,var(--teal));outline-offset:4px}
@media(hover:hover){
  .vv-row:hover::before{transform:scaleX(1)}
  .vv-row:hover .vv-arrow{background:var(--pink2);border-color:var(--pink2);color:#fff;transform:translateX(4px)}
  .vv-post:hover{translate:-4px -4px;box-shadow:12px 12px 0 var(--c)}
  .vv-post:hover .vv-arrow{background:var(--ink);color:#fff;transform:rotate(-45deg)}
  .vv-notes__more:hover{color:var(--c,var(--teal))}
}
/* 会社情報：墨紺の面に白い文字。冒頭と同じ色の輪の一部が、背景でゆっくり回る。 */
.vv-company{--c:var(--aqua);position:relative;overflow:clip;isolation:isolate;padding:clamp(40px,5vw,64px) clamp(28px,5vw,64px) 150px;border-radius:32px;color:#fff;background:var(--grain),radial-gradient(60% 70% at 100% 100%,rgba(62,214,220,.22),transparent 70%),linear-gradient(150deg,var(--ink),var(--ink2) 70%,#0B2F38)}
.vv-company__ring{position:absolute;z-index:-1;right:-90px;bottom:-110px;width:260px;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,var(--teal),var(--aqua),var(--lemon),var(--orange),var(--pink2),var(--teal));-webkit-mask:radial-gradient(farthest-side,transparent 58%,#000 59%);mask:radial-gradient(farthest-side,transparent 58%,#000 59%);animation:vv-spin 26s linear infinite}
.vv-company .vv-notes__en{white-space:nowrap;font-size:clamp(36px,10.5vw,96px);letter-spacing:-.04em;background:linear-gradient(110deg,var(--aqua),var(--lemon) 120%);-webkit-background-clip:text;background-clip:text}
.vv-company .vv-notes__title{margin-bottom:32px}
.vv-company__list{margin:0;border-top:1px solid rgba(255,255,255,.4)}
.vv-company__list>div{display:grid;grid-template-columns:6.5em 1fr;align-content:start;gap:16px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.vv-company__list dt{font:700 13px/1.7 var(--jp);letter-spacing:.06em;color:var(--aqua)}
.vv-company__list dd{margin:0;font:500 16px/1.7 var(--jp)}
.vv-company__more{color:#fff}
@media(hover:hover){.vv-company__more:hover{color:var(--lemon)}}
/* お知らせとコラムは左右に並べ、英字・見出し・一覧・リンクの段をそろえる。1024px以上だけ（768pxでは列が細く、題名が語の途中で折れて窮屈だった。2026-11-02 目視） */
@media(min-width:1024px){
  .vv-notes__inner{grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto) auto;column-gap:clamp(40px,5vw,88px);row-gap:0}
  .vv-notes__block--news,.vv-notes__block--column{display:grid;grid-template-rows:subgrid;grid-row:1/span 4}
  .vv-notes__block--news .vv-notes__more,.vv-notes__block--column .vv-notes__more{justify-self:start;align-self:start}
}
@media(min-width:768px){
  .vv-company{grid-column:1/-1;margin-top:clamp(80px,9vw,128px);padding-bottom:clamp(40px,5vw,64px);padding-right:clamp(250px,30vw,340px)}
  .vv-company .vv-notes__en{font-size:clamp(52px,7vw,96px)}
  .vv-company__list{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
  .vv-company__list>div{grid-template-columns:1fr;gap:6px}
  .vv-company__ring{right:-130px;bottom:auto;top:50%;margin-top:-180px;width:360px}
}
@media(min-width:1024px){
  .vv-company{padding-right:clamp(260px,26vw,380px)}
}
/* 会社情報を横1列に並べるのは、所在地が折り返さない広さがあるときだけ。 */
@media(min-width:1280px){
  .vv-company__list{grid-template-columns:repeat(4,auto);column-gap:clamp(24px,3vw,48px);border-bottom:1px solid rgba(255,255,255,.18)}
  .vv-company__list>div{padding:24px 0;border-bottom:0}
}
@media(min-width:1024px){
  .vv-company__ring{width:min(520px,40vw);right:-160px;margin-top:calc(min(520px,40vw) / -2)}
}
/* お知らせは4件。PC・タブレットはコラムのカード3枚と下端をそろえるため4件、縦に並ぶスマホは3件にとどめる。 */
@media(max-width:767px){.vv-notes__list li:nth-child(n+4){display:none}}
/* スマホとタブレットは列が細いので、題名を3行まで出す。 */
@media(max-width:1023px){.vv-row__title,.vv-post__title{-webkit-line-clamp:3}}

/* 動きを止める設定。最終の状態で静止させる。 */
@media(prefers-reduced-motion:reduce){
  .vv-page *,.vv-page *::before,.vv-page *::after{animation:none!important;transition:none!important}
}
html[data-motion="off"] .vv-page *,html[data-motion="off"] .vv-page *::before,html[data-motion="off"] .vv-page *::after{animation:none!important;transition:none!important}

/* WordPressの共通ヘッダーの高さを見込み、アンカーの見出しを隠さない。 */
html:has(body.coletlab-vivid-home){scroll-padding-top:104px}
body.coletlab-vivid-home{margin:0;background:#F6F9FB}
@media(max-width:800px){html:has(body.coletlab-vivid-home){scroll-padding-top:94px}}

/* 本文・記事の題名・見出しは文節で折り返し、1字だけの行を避ける（2026-11-02 タブレット・スマホの目視で、語の途中の改行が見つかった）。
   共通の integration.css（body.coletlab-experience main p）より強い指定にする */
body.coletlab-vivid-home main :is(p,li,dd,dt,h2,h3){word-break:auto-phrase;text-wrap-style:pretty}
body.coletlab-vivid-home main a{word-break:auto-phrase;text-wrap-style:balance}
/* 「見る →」だけが次の行に残らないよう、リンクの後半をひとかたまりにする（2026-11-02 目視） */
.vv-nw{white-space:nowrap}

/* 2026-11-02 原稿P00の改稿で冒頭の説明が2文になった。スマホ・タブレットは続けて流し、パソコンは文の切れ目で2行にする（1行固定だと幅1024で収まらない） */
.vv-br-pc{display:none}
@media(min-width:1024px){.vv-br-pc{display:inline}.vv-hero__lead{white-space:normal;max-width:44em}}