/* 下層ページの共通の土台（2026-11-01）。色・書体・余白の値・ボタン・帯・フォームの枠・パートナー表示だけを持つ。
   主役の図とレイアウトはページごとの pages/*.css で作る（全ページを同じ型にしない。docs/design-handoff-vivid-2026-11-01.md）。 */
.vs-page{
  --ink:#13202B;--ink2:#1D3A4A;--paper:#F6F9FB;--sky:#EAF3FB;--muted:#4A5A66;
  --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;
  --s-title-text:clamp(28px,3vw,40px);--s-text-action:clamp(40px,3.6vw,52px);--s-block:clamp(56px,6vw,96px);--s-box:clamp(28px,4vw,56px);--s-section:clamp(104px,12vw,176px);
  overflow-x:clip;color:var(--ink);font:500 16px/1.95 var(--jp);background:var(--paper);font-feature-settings:"palt"
}
.vs-page *,.vs-page *::before,.vs-page *::after{box-sizing:border-box}
:where(.vs-page) :where(h1,h2,h3,p,ol,ul,dl,dd,figure){margin:0;padding:0}
:where(.vs-page) :where(ol,ul){list-style:none}
:where(.vs-page) a{color:inherit;text-decoration:none}
.vs-page a:focus-visible{outline:3px solid var(--aqua);outline-offset:4px;border-radius:8px}
/* 和文は禁則処理（句読点を行頭に置かない）で折り返す。 */
.vs-page p,.vs-page dd,.vs-page li,.vs-page a{word-break:normal;line-break:strict;overflow-wrap:anywhere}
/* 見出し・ボタン・リンクは文節で折り返し、1字だけの行を避ける（2026-11-02 タブレット・スマホの目視で、語の途中の改行が見つかった。本文は下の指定でふつうに流す）。
   共通の integration.css（body.coletlab-experience main p）より強い指定にする。改行を指定した .vs-nowrap は下の指定で守る。
   text-wrap の一括指定は折り返しの有無まで「折り返す」に戻し、各ページの white-space:nowrap を打ち消す（2026-11-02 事業領域の帯の文字が縦に割れた）。折り返し方だけを text-wrap-style で指定する。
   共通CSSの段落の指定（body.coletlab-experience main p:not(…):not(…) の text-wrap:wrap）より強くするため div.vs-page と :not(.vs-nowrap) で詳細度を上げる。
   リンクは「見／る」のような1〜2文字の行を作らないよう、行の長さをそろえる（balance） */
/* 本文はふつうに行末まで流す（文節で折り返すと、長い文でも行を埋める前に折れて右端がでこぼこになり、変な位置で改行して見えた。2026-11-02 ユーザー「必要なところは改行する運用の方が良くない？」）。
   文節での折り返しは見出し・ボタン・リンクと、ページごとに指定した短い文だけ。句読点を行頭に置かない禁則処理（line-break:strict）は残す */
body.coletlab-experience div.vs-page main :is(p,li,dd,dt):not(.vs-nowrap){word-break:normal;text-wrap-style:pretty}
body.coletlab-experience div.vs-page main :is(h2,h3,h4):not(.vs-nowrap){word-break:auto-phrase;text-wrap-style:balance}
body.coletlab-experience div.vs-page main a:not(.vs-nowrap){word-break:auto-phrase;text-wrap-style:balance}
/* 見出しの上のサービス名（h1）も、語の途中（「代／行」など）で折り返さない（2026-11-02 総合レビューU02）。auto-phrase が無いブラウザは keep-all、はみ出すときだけどこでも折る */
body.coletlab-experience div.vs-page main [class*="-hero__name"]{word-break:keep-all;word-break:auto-phrase;overflow-wrap:anywhere;text-wrap-style:balance}
body.coletlab-experience .vs-page .vs-btn{word-break:auto-phrase;text-wrap-style:balance}
/* 問い合わせの選択肢・表の項目と値・資格名など短い文は文節で折り返す（「知り／たい」「年末年／始」「G／検定」のように語の途中で割れた。2026-11-02 目視） */
body.coletlab-experience div.vs-page main :is(dt,dd,th,td,small,strong){word-break:auto-phrase}
body.coletlab-experience .vs-page .vs-form :is(.wpcf7-list-item-label,.contact-form__label){word-break:auto-phrase;text-wrap-style:balance}
vs-nw{white-space:nowrap}
/* 冒頭の見出しの「スマホ・タブレットだけの改行」（coletlab_vs_catch の「|」）。1024px以上では改行しない */
@media(min-width:1024px){.vs-br-sp{display:none}}
/* 冒頭の見出しを入れる枠を、文字の大きさの基準（コンテナ）にする。1023px以下で、いちばん長い行が枠の幅の97%になる大きさにする（下の --fit-em は各ページの値） */
@media(max-width:1023px){
  body.coletlab-experience .vs-page :is(.wb-hero__text,.cp-hero__text,.pd-hero__head,.gx-hero__text,.mo-hero__text,.ig-hero__text,.ab-hero__text,.sv3-hero__text,.tr2-hero__inner,.ax-hero__text,.pr-hero__text,.ct-hero__text,.fd-hero__text,.ev-hero__text){container-type:inline-size}
  /* 縦に並べる枠の中で幅の上限だけを持つ枠は、基準にすると幅が0になるので幅を指定する */
  body.coletlab-experience .vs-page .wb-hero__text{width:100%}
  /* いちばん長い行の長さ（文字の大きさ何個分か。2026-11-02 実測。同日夜、原稿の改稿で見出しが変わった8ページを測り直し）。--fit-tb はタブレット、--fit-lines は1023px以下の行数 */
  body.coletlab-experience .vs-page .wb-hero__catch{--fit-sp:8.16;--fit-tb:8.16;--fit-lines:2}
  body.coletlab-experience .vs-page .cp-hero__catch{--fit-sp:7.14;--fit-tb:7.14;--fit-lines:3}
  body.coletlab-experience .vs-page .pd-hero__catch{--fit-sp:9.4;--fit-tb:9.4;--fit-lines:2} /* 2026-11-02 「見た目も、集客も、」の行末の読点が次の行へ落ちたので、読点の幅を見込んで測り直した */
  body.coletlab-experience .vs-page .gx-hero__catch{--fit-sp:9.18;--fit-tb:9.18;--fit-lines:3}
  body.coletlab-experience .vs-page .fd-hero__catch{--fit-sp:7.1;--fit-tb:7.1;--fit-lines:4}
  body.coletlab-experience .vs-page .ev-hero__catch{--fit-sp:8.2;--fit-tb:8.2;--fit-lines:3}
  body.coletlab-experience .vs-page .mo-hero__catch{--fit-sp:6.12;--fit-tb:6.12;--fit-lines:4}
  body.coletlab-experience .vs-page .ig-hero__catch{--fit-sp:6.12;--fit-tb:6.12;--fit-lines:3}
  body.coletlab-experience .vs-page .ab-hero__catch{--fit-sp:7;--fit-tb:7;--fit-lines:2}
  body.coletlab-experience .vs-page .sv3-hero__catch{--fit-sp:10.2;--fit-tb:10.2;--fit-lines:4} /* 2026-11-02 見出しの英字を Unbounded にして「Web」が広がったので測り直した（7.34→8） */
  body.coletlab-experience .vs-page .tr2-hero__catch{--fit-sp:7.5;--fit-tb:7.5;--fit-lines:3}
  body.coletlab-experience .vs-page .ax-hero__catch{--fit-sp:9.16;--fit-tb:9.16;--fit-lines:2}
  body.coletlab-experience .vs-page .pr-hero__catch{--fit-sp:8.16;--fit-tb:8.16;--fit-lines:3}
  body.coletlab-experience .vs-page .ct-hero__catch{--fit-sp:6.12;--fit-tb:6.12;--fit-lines:3}
  /* 冒頭の説明文は、大きくした見出しとの釣り合いで少し大きく（タブレット19px） */
  body.coletlab-experience .vs-page [class*="-hero__lead"]{font-size:19px}
}
@media(max-width:767px){
  body.coletlab-experience .vs-page [class*="-hero__catch"]{font-size:calc(97cqw / var(--fit-sp, 9))}
  body.coletlab-experience .vs-page [class*="-hero__lead"]{font-size:17px}
}
@media(min-width:768px) and (max-width:1023px){
  /* 見出しの高さが画面の高さの約半分を超えないよう、行数から上限を決める */
  body.coletlab-experience .vs-page [class*="-hero__catch"]{font-size:min(112px, calc(97cqw / var(--fit-tb, 9)), calc(48svh / var(--fit-lines, 2) / 1.3))}
}
/* 区切りを指定したボタンやリンクの文字は、区切りの位置でだけ折り返す。 */
.vs-seg{display:inline-block}
.vs-segs{display:inline}
.vs-char{display:inline-block;will-change:transform}
/* 改行位置を指定した見出しや数字は折り返さない。共通CSSの段落の text-wrap:wrap より強く指定する。 */
body.coletlab-experience .vs-page main p.vs-nowrap.vs-nowrap{text-wrap:nowrap;white-space:nowrap}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 小さな丸い写真（白い3pxの縁）。位置と大きさはページごとに決める。 */
.vs-photo{position:absolute;width:var(--d,96px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 12px 30px rgba(19,32,43,.18);pointer-events:none}
.vs-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ボタン */
.vs-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:60px;padding:0 36px;border:2px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font:800 16px/1.3 var(--jp);letter-spacing:.06em;text-align:center;transition:background .25s,color .25s,translate .3s cubic-bezier(.16,1,.3,1)}
.vs-btn::after{content:"→";font-family:var(--en)}
.vs-btn--ghost{background:#fff;color:var(--ink)}
@media(hover:hover){.vs-btn:hover{background:#fff;color:var(--ink);translate:0 -3px}.vs-btn--ghost:hover{background:var(--ink);color:#fff}}
.vs-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);transition:background .3s,color .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.vs-more{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:var(--s-text-action)}
.vs-more a{display:inline-block;padding-bottom:3px;border-bottom:2px solid currentColor;font:800 15px/1.6 var(--jp);letter-spacing:.04em}
@media(hover:hover){.vs-more a:hover{color:var(--pink)}}
/* 狭い画面では、長いボタンの文字が言葉の途中で折れないよう、左右の余白を詰めて文節で折り返す */
/* .vs-page a の word-break:normal より強い指定にする */
@media(max-width:479px){.vs-page .vs-btn{padding-inline:20px}}

/* 流れる帯（語の間は色のひし形。写真は挟まない） */
.vs-marquee{position:absolute;left:-10%;width:120%;overflow:hidden;white-space:nowrap;pointer-events:none;z-index:1}
.vs-marquee__track{display:inline-flex;align-items:center;gap:.6em;padding:.62em 0;width:max-content;will-change:transform}
.vs-marquee span{font:800 clamp(20px,3vw,40px)/1.15 var(--display);white-space:nowrap}
.vs-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}

/* 相談フォーム（機能部品。各ページの専用フォームを白い面に置く） */
.vs-form{position:relative;overflow:clip;padding:calc(var(--s-block) + 90px) 6% var(--s-block);background:var(--grain),linear-gradient(115deg,var(--pink2),var(--orange) 40%,var(--lemon) 72%,var(--aqua));background-size:auto,260% 260%;animation:vs-flow 16s ease-in-out infinite alternate}
.vs-form .vs-marquee{top:28px;transform:rotate(-2deg);background:var(--ink);color:#fff}
.vs-form__panel{position:relative;z-index:2;max-width:860px;margin:0 auto;padding:var(--s-box) clamp(20px,4vw,56px);border:2px solid var(--ink);border-radius:32px;background:#fff;box-shadow:10px 10px 0 var(--ink)}
.vs-form__head{margin-bottom:var(--s-title-text)}
.vs-form__en{font:800 clamp(40px,6vw,72px)/1 var(--display);letter-spacing:-.03em;color:transparent;background:linear-gradient(110deg,var(--pink2),var(--ink) 150%);-webkit-background-clip:text;background-clip:text}
.vs-form__title{margin-top:14px;font:900 clamp(22px,2.6vw,32px)/1.4 var(--jp);text-wrap:balance;word-break:auto-phrase}
.vs-form__tel{margin-top:20px;font-size:15px;line-height:1.8}
.vs-form__tel a{display:inline-block;margin:0 .6em;font:800 20px/1.4 var(--en);border-bottom:2px solid currentColor}
.vs-form__tel small{font-size:13px;color:var(--muted)}
.vs-form .experience-cf7{max-width:none;margin:0;padding:0;background:none;border-radius:0}
/* 399px以下：枠を画面の端まで広げず、左右に余白を残す（2026-11-02 目視で、枠の左右が約4pxで窮屈・LINEの案内が枠の端に付いていた） */
@media(max-width:399px){
  .vs-form{padding-inline:12px}
  .vs-form__panel{padding-inline:16px;border-radius:24px;box-shadow:6px 6px 0 var(--ink)}
  /* 共通の integration.css は、認証欄の300pxを取るためにフォーム全体を画面幅まで広げ、内側の余白を5pxにする。
     下層ではフォームを枠の内側に戻し、認証欄だけを枠の余白へはみ出させて300pxを取る（2026-11-02 目視で入力欄が枠の線から約6px） */
  body.coletlab-experience .vs-page .vs-form .experience-cf7{width:auto;margin-inline:0;padding-inline:0}
  body.coletlab-experience .vs-page .vs-form .wpcf7-turnstile{width:300px;max-width:none;margin-inline:min(0px,calc((100% - 300px) / 2))}
}
/* お問い合わせ欄の下のLINEの案内は、入力欄と同じ左右の位置にそろえる */
body.coletlab-experience .vs-form__panel > .line-registration--service{margin-inline:0}

/* 相談フォームの見た目（2026-11-01 ユーザー「フォームの送信ボタンやフォーム自体もデザインを変更して良い」）。
   項目・確認画面・送信の仕組みは共通のフォーム部品のまま、入力欄・選択・ボタンを太枠と色のずれた影の語彙にそろえる。 */
body.coletlab-experience .vs-page .vs-form .experience-cf7 .contact-form__field{margin:0 0 32px}
body.coletlab-experience .vs-page .vs-form .experience-cf7 .contact-form__label{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;font:800 15px/1.6 var(--jp);letter-spacing:.04em}
body.coletlab-experience .vs-page .vs-form .experience-cf7 .contact-form__required{margin:0 0 0 8px;padding:3px 10px;border-radius:999px;background:var(--pink2);color:#fff;font:800 11px/1.4 var(--jp);letter-spacing:.08em}
body.coletlab-experience .vs-page .vs-form .experience-cf7 .contact-form__optional{margin:0;padding:2px 9px;border:1.5px solid rgba(19,32,43,.3);border-radius:999px;color:var(--muted);font:700 11px/1.4 var(--jp)}
body.coletlab-experience .vs-page .vs-form .experience-cf7 :is(.contact-form__input,.contact-form__textarea,select){min-height:58px;padding:14px 18px;border:2px solid var(--ink);border-radius:16px;background-color:#fff;color:var(--ink);font:600 16px/1.6 var(--jp);box-shadow:none;transition:box-shadow .25s,translate .25s}
body.coletlab-experience .vs-page .vs-form .experience-cf7 select{padding-right:48px}
body.coletlab-experience .vs-page .vs-form .experience-cf7 :is(.contact-form__input,.contact-form__textarea,select):focus{outline:none;box-shadow:5px 5px 0 var(--aqua);translate:-2px -2px}
body.coletlab-experience .vs-page .vs-form .experience-cf7 ::placeholder{color:#8A9AA6;opacity:1}
body.coletlab-experience .vs-page .vs-form .experience-cf7 [aria-invalid=true]:is(input,textarea,select){border-color:var(--pink);box-shadow:5px 5px 0 rgba(240,88,126,.35)}
body.coletlab-experience .vs-page .vs-form .experience-cf7 .wpcf7-list-item{margin:0 0 8px}
body.coletlab-experience .vs-page .vs-form .experience-cf7 .wpcf7-list-item label{align-items:center;gap:12px;font:600 15px/1.8 var(--jp);cursor:pointer}
body.coletlab-experience .vs-page .vs-form .experience-cf7 :is(input[type=checkbox],input[type=radio]){flex:none;width:24px;height:24px;margin:0;appearance:none;-webkit-appearance:none;border:2px solid var(--ink);border-radius:7px;background:#fff;cursor:pointer;transition:background-color .2s,box-shadow .2s}
body.coletlab-experience .vs-page .vs-form .experience-cf7 input[type=radio]{border-radius:50%}
body.coletlab-experience .vs-page .vs-form .experience-cf7 input[type=checkbox]:checked{background:var(--aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%2313202B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:3px 3px 0 var(--ink)}
body.coletlab-experience .vs-page .vs-form .experience-cf7 input[type=radio]:checked{background:radial-gradient(circle,var(--ink) 0 5px,var(--aqua) 6px);box-shadow:3px 3px 0 var(--ink)}
body.coletlab-experience .vs-page .vs-form .experience-cf7 :is(input[type=checkbox],input[type=radio]):focus-visible{outline:3px solid var(--pink2);outline-offset:3px}
body.coletlab-experience .vs-page .vs-form .experience-cf7 .contact-form__submit{margin-top:40px}
/* CF7 が自動で入れた改行がボタンの上に残り、同意欄との間が空きすぎるため消す */
body.coletlab-experience .vs-page .vs-form .experience-cf7 .contact-form__submit > p > br{display:none}
body.coletlab-experience .vs-page .vs-form .experience-cf7 .cf7c-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
body.coletlab-experience .vs-page .vs-form .experience-cf7 :is(.btn,.cf7c-confirm-btn,.wpcf7-submit):not(.cf7c-back-btn){display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-width:280px;min-height:64px;padding:16px 40px;border:2px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font:800 17px/1.4 var(--jp);letter-spacing:.06em;box-shadow:6px 6px 0 var(--pink2);cursor:pointer;transition:translate .3s,box-shadow .3s}
body.coletlab-experience .vs-page .vs-form .experience-cf7 button.cf7c-confirm-btn::after{content:"→";font-family:var(--en)}
body.coletlab-experience .vs-page .vs-form .experience-cf7 .cf7c-back-btn{display:inline-flex;align-items:center;justify-content:center;min-height:64px;padding:16px 32px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:800 16px/1.4 var(--jp);cursor:pointer}
@media(hover:hover){body.coletlab-experience .vs-page .vs-form .experience-cf7 :is(.btn,.cf7c-confirm-btn,.wpcf7-submit):not(.cf7c-back-btn):hover{translate:-2px -2px;box-shadow:9px 9px 0 var(--pink2)}body.coletlab-experience .vs-page .vs-form .experience-cf7 .cf7c-back-btn:hover{background:var(--sky)}}
/* 確認画面：スマホでは送信と戻るを枠の幅いっぱいにそろえる（2026-11-02 送信ボタンの最小幅280pxが枠からはみ出していた） */
@media(max-width:699px){body.coletlab-experience .vs-page .vs-form .experience-cf7 .cf7c-actions>:is(.wpcf7-submit,.cf7c-back-btn){width:100%;min-width:0!important;box-sizing:border-box}}
body.coletlab-experience .vs-page .vs-form .experience-cf7 .cf7c-panel{margin-bottom:24px;padding:clamp(20px,3vw,32px);border:2px solid var(--ink);border-radius:20px;background:var(--sky)}
body.coletlab-experience .vs-page .vs-form .experience-cf7 .cf7c-panel__heading{font:800 16px/1.6 var(--jp)}
body.coletlab-experience .vs-page .vs-form .experience-cf7 .wpcf7-response-output{margin:24px 0 0;padding:16px 20px;border:2px solid var(--ink);border-radius:16px;font:700 14px/1.7 var(--jp)}
body.coletlab-experience .vs-page .vs-form .experience-cf7 :is(.contact-form__hint,.contact-form__submit-note){font-size:13px;line-height:1.8;color:var(--muted)}
@media(min-width:640px){body.coletlab-experience .vs-page .vs-form .experience-cf7 .contact-form__media-options .wpcf7-checkbox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}}
@media(max-width:767px){body.coletlab-experience .vs-page .vs-form .experience-cf7 :is(.btn,.cf7c-confirm-btn,.wpcf7-submit,.cf7c-back-btn){width:100%;min-width:0}}
/* 400px未満は共通のフォーム部品が左右4pxまで広げる（認証欄の300pxを確保するため）。300pxを残せる範囲で、左右に最大16pxの余白を取る */
@media(max-width:399px){body.coletlab-experience .vs-page .vs-form .experience-cf7{padding-inline:min(16px,max(5px,calc((100vw - 308px) / 2)))}}

/* パートナー表示（公式バッジの色と比率は変えない） */
.vs-page .coletlab-partner{max-width:640px}
.vs-page .coletlab-partner__inner{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.vs-page .coletlab-partner__badge{width:150px;height:auto;flex:none}
.vs-page .coletlab-partner__statement{font:800 15px/1.7 var(--jp)}
.vs-page .coletlab-partner__statement span{display:inline-block}
.vs-page .coletlab-partner__link{display:inline-block;margin-top:6px;padding-bottom:2px;border-bottom:1px solid currentColor;font:700 14px/1.6 var(--jp)}
.vs-page .coletlab-partner__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@keyframes vs-spin{to{transform:rotate(1turn)}}
@keyframes vs-flow{from{background-position:0 0,0% 50%}to{background-position:0 0,100% 50%}}
@media(max-width:767px){.vs-btn{width:100%;padding:12px 20px;font-size:15px;text-wrap:balance}}

/* 動きを止める設定。最後の状態で静止させる。 */
@media(prefers-reduced-motion:reduce){.vs-page *,.vs-page *::before,.vs-page *::after{animation:none!important;transition:none!important}}
html[data-motion="off"] .vs-page *,html[data-motion="off"] .vs-page *::before,html[data-motion="off"] .vs-page *::after{animation:none!important;transition:none!important}
/* パンくずはトップと同じく背景を持たせず、MVの上に重ねる（本文の流れに入れるとMVの上に帯ができ、MVが押し下げられる）。
   左端はヘッダーのロゴにそろえ、ヘッダーのすぐ下に置く。 */
body.coletlab-vivid-sub .breadcrumb{position:absolute;top:96px;left:3vw;right:3vw;z-index:5;max-width:none;margin:0;padding:0}
body.coletlab-vivid-sub .breadcrumb::before{content:none}
@media(max-width:1023px){body.coletlab-vivid-sub .breadcrumb{top:80px;left:16px;right:16px}}
/* パンくずの見た目（2026-11-02 ユーザー「パンくずとフッターのデザインが普通。他と合っていない」→お任せ）。
   家のアイコンと「›」の灰色の初期の見た目をやめ、流れる帯と同じ◆の色の印で区切る。今いるページは太字の墨の文字だけ。背景の帯や枠は付けない。パンくずは .vs-page の外にあるので、色は変数ではなく値で書く */
body.coletlab-vivid-sub .breadcrumb__list{gap:0 12px;font:700 12px/1.6 "Noto Sans JP",sans-serif;letter-spacing:.06em;color:#13202B}
body.coletlab-vivid-sub .breadcrumb__list a{color:#4A5A66;font-weight:700;padding-block:2px}
body.coletlab-vivid-sub .breadcrumb__list a::after{height:2px;background:#0FA3A8}
body.coletlab-vivid-sub .breadcrumb__list a:hover{color:#13202B}
body.coletlab-vivid-sub .breadcrumb__list li:first-child a::before{content:none}
body.coletlab-vivid-sub .breadcrumb__sep{width:7px;height:7px;opacity:1;color:inherit}
body.coletlab-vivid-sub .breadcrumb__sep::before{-webkit-mask:none;mask:none;border-radius:2px;rotate:45deg;background:linear-gradient(135deg,#F0587E,#F7894A)}
/* 今いるページは下線を付けない（すぐ下のページ名のラベルがピンクの下線を持ち、同じ見た目が重なる。2026-11-02 ユーザー指摘） */
body.coletlab-vivid-sub .breadcrumb__list [aria-current="page"]{color:#13202B;font-weight:800}
/* 長いページ名は1行目の続きから始めて中で折り返す（スマホで◆だけが1行目の最後に残った。2026-11-02 目視） */
body.coletlab-vivid-sub .breadcrumb__list li:last-child{flex:1 1 9em;min-width:0}
body.coletlab-vivid-sub .breadcrumb__list [aria-current="page"]{word-break:auto-phrase;text-wrap-style:balance}

/* 同じ分類のほかのサービス（2026-11-02）。フォームの前に、白い面＋墨の2pxの線＋色のずらした影の札を並べる。
   PCは札3列（ほかが2つ・1つのときは2列）、タブレット2列、スマホ1列。札の中は名前→説明→矢印 */
.vs-related{position:relative;padding:var(--s-section) 6% calc(var(--s-section) * .7);background:var(--grain),linear-gradient(180deg,#fff,var(--paper))}
.vs-related__inner{max-width:1200px;margin:0 auto}
.vs-related__en{font:800 12px/1.4 var(--display);letter-spacing:.2em;color:var(--teal2)}
.vs-related__title{margin-top:12px;font:900 clamp(24px,3.2vw,40px)/1.35 var(--jp);letter-spacing:-.01em;word-break:auto-phrase;text-wrap:balance}
.vs-related__list{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:var(--s-title-text);list-style:none;padding:0}
@media(min-width:768px){.vs-related__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(min-width:1024px){.vs-related--n5 .vs-related__list,.vs-related--n3 .vs-related__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vs-related--n1 .vs-related__list{max-width:600px}
.vs-related__item{--c:var(--aqua);display:flex}
.vs-related__item--2{--c:var(--pink2)}
.vs-related__item--3{--c:var(--lemon)}
.vs-related__item--4{--c:var(--orange)}
.vs-related__link{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:10px;width:100%;padding:24px 24px 20px;border:2px solid var(--ink);border-radius:20px;background:#fff;box-shadow:6px 6px 0 var(--c);color:var(--ink);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.vs-related__name{font:900 clamp(18px,1.6vw,21px)/1.45 var(--jp);word-break:auto-phrase}
.vs-related__note{font:500 15px/1.85 var(--jp);color:var(--muted)}
.vs-related__arrow{justify-self:end;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-weight:800;transition:transform .25s ease}
@media(hover:hover){.vs-related__link:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--c)}.vs-related__link:hover .vs-related__arrow{transform:translateX(4px)}}
.vs-related__link:focus-visible{outline:3px solid var(--aqua);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.vs-related__link,.vs-related__arrow{transition:none}}
.vs-related__note{word-break:normal;line-break:strict;text-wrap:wrap}