/* ---------- hero（背景動画） ---------- */
  .hero{background:var(--b900);color:var(--on-dark);position:relative;overflow:hidden;isolation:isolate}

  /* ===== FV背景：18枚のスライドショー（2段階のテンポ） =====
     最初の数枚だけ速く切り替えて掴み、そのあとは読ませるためにゆっくりにする。
     タイミングはページ末尾のスクリプトの FAST / SLOW で調整する。

     カクつき対策（v5.1）
       ・切り替えの少し前に、次の1枚だけを「見えない状態で描画」しておく（.pre）
         → 表示の瞬間にラスタライズが走らないので、コマ落ちしない
       ・合成レイヤーに載せるのは常に「表示中＋次の1枚」だけ。18枚ぶんの
         GPUメモリを確保しないので、モバイルでも破綻しない
       ・切り替え自体は requestAnimationFrame でフレーム境界に合わせる */
  .hero .fvflash{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
    transform:translateZ(0)}
  /* ファストカット：クロスフェードは使わず、瞬間で切り替える */
  .hero .fvflash > span{position:absolute;inset:0;visibility:hidden;opacity:0}
  .hero .fvflash > span:first-child{visibility:visible;opacity:1}  /* JS未実行でも1枚目は表示 */
  .hero .fvflash.js > span:first-child{visibility:hidden;opacity:0}
  .hero .fvflash.js > span.pre{visibility:visible;opacity:.01;will-change:opacity}
  .hero .fvflash.js > span.on {visibility:visible;opacity:1;  will-change:opacity}
  .hero .fvflash img{width:100%;height:100%;object-fit:cover;display:block}

  /* フィルムグレイン：素材の粒は圧縮前に落としてあるので、
     質感は画面解像度のノイズで戻す。拡大してもボケない。 */
  .hero .grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.20;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px 180px}

  /* ② スクリム：左のテキスト部分だけ落とし、画面中央から右には一切かけない。
        中央のロゴを濁らせないための設計。上下端はセクションの境目をなじませる分だけ。 */
  .hero .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
      linear-gradient(90deg, rgba(11,42,70,.64) 0%, rgba(11,42,70,.44) 24%,
                             rgba(11,42,70,.12) 42%, rgba(11,42,70,0) 54%),
      linear-gradient(180deg, rgba(11,42,70,.26) 0%, rgba(11,42,70,0) 30%,
                              rgba(11,42,70,0) 70%, rgba(11,42,70,.46) 100%)}

  .hero .wrap{padding-top:clamp(56px,9vw,112px);padding-bottom:clamp(56px,9vw,112px);
    position:relative;z-index:3}

  /* 透過を薄くしたぶん、文字側で可読性を担保する */
  .hero h1,.hero .lead,.hero .eyebrow,.hero .proof{
    text-shadow:0 2px 26px rgba(4,18,32,.92), 0 1px 8px rgba(4,18,32,.80), 0 1px 2px rgba(4,18,32,.65)}

  /* モバイル・動きを抑える設定では切り替えを止め、1枚だけ表示 */
  @media (max-width:760px){
    .hero .grain{opacity:.14}
  }
  .eyebrow{display:flex;align-items:center;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
           color:#fff;margin:0 0 18px}
  .hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(38px,6.4vw,68px);
           line-height:1.14;letter-spacing:.05em;margin:0 0 20px}
  .hero h1 .dot{color:var(--acc)}
  .hero .lead{font-size:clamp(14px,1.4vw,16px);font-weight:700;max-width:32em;margin:0 0 14px;line-height:1.95}
  .hero .lead strong{font-weight:900;color:#fff}
  .hero .lead2{margin-top:-2px;color:#DCE8F4}
  .hero .proof{display:flex;align-items:center;font-family:var(--mono);font-size:11px;font-weight:700;
               letter-spacing:.1em;color:#fff;margin:0 0 28px}
  .hero .proof .ic{margin-right:7px;width:13px;height:13px}
  .btns{display:flex;gap:10px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-size:13.5px;
       padding:12px 22px;background:var(--acc);color:#1A1405;font-weight:700}
  .btn:hover{background:#F0B84B}
  .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);font-weight:700}
  .btn.ghost:hover{border-color:var(--on-dark)}

  /* ---------- section furniture ---------- */
  section{padding-top:clamp(44px,6vw,74px);padding-bottom:clamp(44px,6vw,74px)}
  .band-white{background:var(--white)}
  .band-deep{background:var(--b800);color:var(--on-dark)}
  .band-tint{background:var(--b50)}

  /* 見出しラベルは和文になったので、欧文用の広いトラッキングをやめる */
  .label{display:flex;align-items:center;font-family:var(--sans);font-size:11.5px;font-weight:700;
         letter-spacing:.12em;color:var(--b600);margin:0 0 13px}
  .band-deep .label{color:#fff}

  h2{font-family:var(--serif);font-weight:700;font-size:clamp(21px,2.7vw,30px);
     line-height:1.5;letter-spacing:.04em;margin:0 0 16px}
  .sec-lead{font-size:14px;font-weight:500;max-width:46em;margin:0 0 34px;color:var(--n700)}
  .band-deep .sec-lead{color:#CFDFEE}

  .more{display:inline-flex;align-items:center;gap:6px;margin-top:22px;font-size:13px;font-weight:700;
        text-decoration:none;color:var(--b600);border-bottom:1px solid var(--b300);padding-bottom:3px;
        transition:border-color .25s,color .25s}
  .more:hover{color:var(--b500);border-color:var(--b500)}
  .band-deep .more{color:var(--b300);border-color:rgba(123,180,234,.5)}
  .band-deep .more:hover{color:#fff;border-color:#fff}

  /* ---------- issues ---------- */
  .issues{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .issue{background:var(--white);border:1px solid var(--n300);border-top:2px solid var(--b600);
         padding:18px 17px;display:flex;flex-direction:column;gap:9px}
  .issue .ihead{display:flex;align-items:center;gap:9px}
  .issue .tag{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--b600)}
  .issue h3{font-family:var(--serif);font-size:15px;font-weight:700;margin:0;line-height:1.65}
  .issue p{margin:0;font-size:13px;font-weight:500;color:var(--n700);padding-left:11px;
           border-left:2px solid var(--n300);line-height:1.75}
  .handoff{display:flex;align-items:flex-start;gap:11px;margin:30px 0 0;font-family:var(--serif);font-weight:700;
           font-size:clamp(15px,1.8vw,19px);letter-spacing:.04em;line-height:1.8}
  .handoff .ic{color:var(--acc);margin-top:5px}
  .handoff .em{color:var(--b600)}
  @media (max-width:980px){.issues{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.issues{grid-template-columns:1fr}}

  /* ---------- thesis / chart ---------- */
  .thesis-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,4vw,48px);align-items:center}
  .thesis-copy p{margin:0 0 15px;font-size:14px;font-weight:500;color:var(--n700)}
  .thesis-copy .punch{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--n900);letter-spacing:.03em;margin-bottom:0}
  .sub-claim{display:flex;align-items:center;gap:10px;margin-top:22px;padding:12px 15px;
             background:var(--b50);border-left:3px solid var(--b600);font-size:14px;font-weight:500}
  .sub-claim .ic{color:var(--b600);width:18px;height:18px}
  .sub-claim b{color:var(--b700)}
  .chart{width:100%;height:auto;display:block}
  .chart .grid{stroke:var(--n300);stroke-width:1}
  .chart .axis{stroke:var(--n500);stroke-width:1}
  .chart .flat{stroke:var(--n500);stroke-width:2;fill:none;stroke-dasharray:5 4}
  .chart .comp{stroke:var(--b600);stroke-width:2.6;fill:none;stroke-linecap:round}
  .chart .gap{fill:var(--b600);opacity:.10}
  .chart text{font-family:var(--sans);font-size:12px;fill:var(--n700)}
  .chart .tick{font-family:var(--mono);font-size:9.5px;fill:var(--n500);letter-spacing:.1em}
  .chart .lbl-comp{fill:var(--b600);font-weight:700}
  .chart .lbl-flat{fill:var(--n500)}

  /* --- 複利グラフ アニメーション ---
     広告（単利）の破線は最初から固定表示。
     ビューポートに入った瞬間だけ、CRM（複利）の線が描かれ、塗りが左から立ち上がる。 */
  /* 線の描画と塗りのワイプは JS（rAF）で同一の進捗値から駆動し、必ず同期させる。
     ラベルと終点だけ CSS の遅延アニメーションで乗せる。 */
  .chart .lbl-comp,.chart .endpt,.chart .endhalo{opacity:0}
  .chart.play .endpt{animation:cFade .6s ease 2.45s forwards}
  .chart.play .endhalo{animation:cHalo 2s ease-out 2.7s infinite}
  .chart.play .lbl-comp{animation:cRise .9s ease 1.1s forwards}
  @keyframes cFade{to{opacity:1}}
  @keyframes cRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  @keyframes cHalo{0%{opacity:.45;transform:scale(1)}70%{opacity:0;transform:scale(3.2)}100%{opacity:0;transform:scale(3.2)}}
  .chart .endhalo{transform-box:fill-box;transform-origin:center}
  .chart .lbl-comp{transform-box:fill-box;transform-origin:center}
  @media (prefers-reduced-motion:reduce){
    .chart .lbl-comp,.chart .endpt{opacity:1}
    .chart .endhalo{opacity:0}
    .chart.play *{animation:none !important}
  }
  @media (max-width:880px){.thesis-grid{grid-template-columns:1fr}}

  /* ---------- WHY：比較されるか／比較の外にいるか ---------- */
  .dgm{width:100%;height:auto;display:block}
  .dgm text{font-family:var(--sans);font-size:12.5px;font-weight:700;fill:var(--n900)}
  .dgm .sm{font-size:11px;font-weight:500;fill:var(--n700)}
  .dgm .mono{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;fill:var(--n500)}
  .dgm .mono.b{fill:var(--b600)}
  .dgm .bxg{fill:var(--n100);stroke:var(--n300);stroke-width:1.4}
  .dgm .bxb{fill:var(--b50);stroke:var(--b600);stroke-width:1.8}
  .dgm .arw{stroke:var(--n500);stroke-width:1.6;fill:none}
  .dgm .arwb{stroke:var(--b600);stroke-width:2.4;fill:none}
  .dgm .sep{stroke:var(--n300);stroke-width:1;stroke-dasharray:4 4}
  .dgm .warn{fill:var(--acc-ink);font-size:11.5px;font-weight:700}
  .dgm .good{fill:var(--b700);font-size:11.5px;font-weight:700}
  /* 表示されたら上段→下段の順に立ち上げ、直通路の矢印を引く */
  .dgm .g1,.dgm .g2{opacity:0}
  section.in .dgm .g1{animation:dgmIn .9s ease .15s forwards}
  section.in .dgm .g2{animation:dgmIn .9s ease .95s forwards}
  section.in .dgm .arwb{stroke-dasharray:240;stroke-dashoffset:240;
    animation:dgmDraw 1.1s cubic-bezier(.3,.7,.3,1) 1.15s forwards}
  @keyframes dgmIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  @keyframes dgmDraw{to{stroke-dashoffset:0}}
  @media (prefers-reduced-motion:reduce){
    .dgm .g1,.dgm .g2{opacity:1}
    section.in .dgm *{animation:none !important}
    .dgm .arwb{stroke-dashoffset:0}
  }

  /* ---------- service : アイソメトリック三層ビジュアル ---------- */
  .svc-visual{margin:4px auto 46px;max-width:680px}
  .svc-visual svg{width:100%;height:auto;display:block;overflow:visible}
  .iso-l{opacity:0;transform:translateY(20px)}
  .iso-c{opacity:0}
  .svc-visual.play .iso-l{animation:isoRise .8s cubic-bezier(.2,.7,.3,1) forwards}
  .svc-visual.play .iso-l.d1{animation-delay:0s}
  .svc-visual.play .iso-l.d2{animation-delay:.16s}
  .svc-visual.play .iso-l.d3{animation-delay:.32s}
  .svc-visual.play .iso-c{animation:isoFade .6s ease forwards}
  .svc-visual.play .iso-c.d1{animation-delay:.55s}
  .svc-visual.play .iso-c.d2{animation-delay:.71s}
  .svc-visual.play .iso-c.d3{animation-delay:.87s}
  @keyframes isoRise{to{opacity:1;transform:translateY(0)}}
  @keyframes isoFade{to{opacity:1}}
  .iso-num{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.08em}
  .iso-jp{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:.05em;fill:#fff}
  .iso-en{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.18em;fill:var(--on-dark-s)}
  .iso-badge{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;fill:#1A1405}
  @media (prefers-reduced-motion:reduce){
    .iso-l,.iso-c{opacity:1;transform:none}
    .svc-visual.play *{animation:none !important}
  }
  @media (max-width:640px){
    .iso-jp{font-size:24px}
    .iso-en{font-size:11px}
    .iso-num{font-size:16px}
  }

  /* ---------- service layers ---------- */
  .layers{border-top:1px solid rgba(234,241,248,.22)}
  .lrow{display:grid;grid-template-columns:74px 1fr 1.3fr;gap:clamp(12px,2.6vw,34px);
        padding:24px 0;border-bottom:1px solid rgba(234,241,248,.22);align-items:start}
  .lrow .lv{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;
            letter-spacing:.1em;color:var(--b300);padding-top:3px}
  .lrow .lv.lv-hi{color:var(--acc);font-weight:700}
  .lrow h3 .hi-badge{display:inline-block;margin-left:10px;font-family:var(--mono);font-size:9.5px;
    font-weight:700;letter-spacing:.08em;background:var(--acc);color:#1A1405;padding:3px 8px;vertical-align:3px}
  .lrow .lhead{display:flex;align-items:center;gap:10px}
  .lrow .lhead .ic{color:var(--b300)}
  .lrow h3{font-family:var(--serif);font-size:clamp(17px,1.9vw,21px);font-weight:700;margin:0 0 3px;letter-spacing:.04em}
  .lrow .en{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.15em;color:#A8C0D6}
  .lrow p{margin:0 0 10px;font-size:13.5px;font-weight:500;color:#CFDFEE}
  .lrow p strong{color:#fff;font-weight:600}
  .lrow ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
  .lrow li{font-size:12px;font-weight:500;padding:4px 11px;border:1px solid rgba(234,241,248,.34);color:#E1EBF6}
  .lrow.wide{grid-template-columns:74px 1fr}
  .lrow.wide>div:last-child{grid-column:2;margin-top:12px}
  @media (max-width:880px){
    .lrow{grid-template-columns:1fr;gap:10px}.lrow .lv{padding-top:0}
    .lrow.wide{grid-template-columns:1fr}.lrow.wide>div:last-child{grid-column:1;margin-top:0}
  }
  .l2split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .l2b{display:flex;flex-direction:column;gap:9px}
  .l2b .bh{display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(234,241,248,.3);padding-bottom:6px}
  .l2b .bh .ic{color:var(--b300);width:15px;height:15px}
  .l2b .bh .jp{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:.05em}
  .l2b .bh .en{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.15em;color:#A8C0D6}
  .l2b>p{margin:0;font-size:12.5px;font-weight:500;color:#CFDFEE}
  .opts{display:flex;flex-direction:column;gap:7px}
  .opt{border:1px solid rgba(234,241,248,.22);border-left:3px solid var(--b400);padding:9px 11px}
  .opt b{display:block;font-size:11.5px;font-weight:600;margin-bottom:2px}
  .opt span{font-size:11.5px;font-weight:500;color:#C6D8EA;line-height:1.7}
  .pick{display:flex;gap:9px;padding:9px 11px;border-left:3px solid var(--acc);
        background:rgba(227,169,53,.14);font-size:11.5px;line-height:1.7}
  .pick .ic{color:var(--acc);width:14px;height:14px;margin-top:3px}
  @media (max-width:880px){.l2split{grid-template-columns:1fr}}

  /* ---------- trio ---------- */
  .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.6vw,28px)}
  /* h2 の下線と重なって線が増えすぎるため、カード上部の罫線は置かない。
     アイコンとキッカーで各カードの起点を示す */
  .trio article{display:flex;flex-direction:column;gap:9px;padding-top:4px}
  .trio .thead{display:flex;align-items:center;gap:9px}
  .trio .thead .ic{color:var(--b600)}
  .trio .kick{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--b600)}
  .trio h3{font-family:var(--serif);font-size:18px;font-weight:700;margin:0;letter-spacing:.04em}
  .trio p{margin:0;font-size:13.5px;font-weight:500;color:var(--n700)}
  @media (max-width:880px){.trio{grid-template-columns:1fr}}

  /* ---------- steps ---------- */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.6vw,24px)}
  .steps article{background:var(--white);border:1px solid var(--n300);padding:20px;
                 display:flex;flex-direction:column;gap:8px}
  .steps .shead{display:flex;align-items:center;justify-content:space-between}
  .steps .n{font-family:var(--mono);font-size:20px;color:var(--b600);line-height:1}
  .steps .shead .ic{color:var(--b300);width:22px;height:22px}
  .steps h3{font-family:var(--serif);font-size:17px;font-weight:700;margin:0;letter-spacing:.04em}
  .steps p{margin:0;font-size:13px;font-weight:500;color:var(--n700)}
  .steps .free{align-self:flex-start;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
               background:var(--acc);color:#1A1405;padding:2px 8px}
  @media (max-width:880px){.steps{grid-template-columns:1fr}}

  /* ---------- 無償診断で見る7つのチェック ---------- */
  .chk7{margin-top:34px;background:var(--b50);border-left:3px solid var(--b600);padding:22px 24px}
  .chk7-h{display:flex;align-items:flex-start;gap:8px;margin:0 0 16px;font-size:14px;font-weight:700;color:var(--n900)}
  .chk7-h .ic{color:var(--b600);margin-top:3px;flex:none}
  .chk7-h b{color:var(--b700)}
  .chk7-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:7px 26px}
  .chk7-list li{display:grid;grid-template-columns:26px 68px 1fr;gap:9px;align-items:baseline;font-size:12.5px}
  .chk7-list .n{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--b400)}
  .chk7-list .t{font-weight:700;color:var(--n900)}
  .chk7-list .d{font-weight:500;color:var(--n700)}
  .chk7-f{margin:16px 0 0;font-size:12.5px;font-weight:500;color:var(--n700)}
  @media (max-width:760px){
    .chk7-list{grid-template-columns:1fr}
    .chk7-list li{grid-template-columns:24px 62px 1fr}
  }

  /* ---------- works ---------- */
  .filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;padding:0;list-style:none}
  .filters li{font-size:12px;font-weight:500;padding:6px 13px;border:1px solid var(--n300);background:var(--white);color:var(--n700)}
  .filters li:first-child{background:var(--b600);color:#fff;border-color:var(--b600)}
  .filters li.sep{border:none;background:none;color:var(--n300);padding:5px 2px}
  .works{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .work{background:var(--white);border:1px solid var(--n300);display:flex;flex-direction:column;text-decoration:none}
  .work:hover{border-color:var(--b400)}
  .work .thumb{height:168px;background:linear-gradient(135deg,var(--b700),var(--b500));position:relative;
               display:flex;align-items:center;justify-content:center;overflow:hidden}
  /* 実写（ブルーデュオトーン）を敷く場合 */
  .work .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
                   transition:transform 1.2s cubic-bezier(.2,.75,.25,1)}
  .work:hover .thumb img{transform:scale(1.045)}
  /* バッジの可読性を確保する左上のかぶせ */
  .work .thumb::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(150deg, rgba(6,26,45,.62) 0%, rgba(6,26,45,.20) 34%, rgba(6,26,45,0) 60%),
               linear-gradient(0deg, rgba(6,26,45,.42) 0%, rgba(6,26,45,0) 42%)}
  .work .thumb .ic{position:relative;z-index:1;color:rgba(255,255,255,.45);width:34px;height:34px;stroke-width:1.2}
  .work .thumb .badges{position:absolute;z-index:2;left:12px;top:12px;display:flex;gap:5px}
  .work .badge{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;padding:3px 7px;
               background:rgba(255,255,255,.93);color:var(--b800)}
  .work .badge.layer{background:var(--acc);color:#1A1405}
  .work .body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1}
  .work .ind{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--b600)}
  .work h3{font-family:var(--serif);font-size:15.5px;font-weight:700;margin:0;line-height:1.6}
  .work .sum{margin:0;font-size:13px;font-weight:500;color:var(--n700);flex:1}
  .work .out{display:flex;align-items:flex-start;gap:7px;margin:0;padding-top:10px;
             border-top:1px solid var(--n300);font-size:13px;font-weight:500}
  .work .out .ic{color:var(--b600);width:15px;height:15px;margin-top:3px}
  .work .out b{color:var(--b700);font-weight:700}
  .work.slot{border-style:dashed;border-color:var(--slot);background:transparent}
  .work.slot .thumb{background:repeating-linear-gradient(135deg,var(--n100),var(--n100) 8px,#E7EBEF 8px,#E7EBEF 16px)}
  .work.slot .thumb .ic{color:var(--slot)}
  .work.slot h3{color:var(--slot)}
  .work.slot .out .ic{color:var(--slot)}
  @media (max-width:980px){.works{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.works{grid-template-columns:1fr}}

  /* ---------- column ---------- */
  .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .col{background:var(--white);border:1px solid var(--n300);padding:17px;
       display:flex;flex-direction:column;gap:8px;text-decoration:none}
  .col:hover{border-color:var(--b400)}
  .col .meta{display:flex;gap:9px;align-items:center;font-family:var(--mono);font-size:9.5px;
             letter-spacing:.08em;color:var(--n500)}
  .col .cat{display:inline-flex;align-items:center;gap:5px;background:var(--b50);color:var(--b700);padding:3px 8px}
  .col .cat .ic{width:11px;height:11px}
  .col h3{font-family:var(--serif);font-size:15px;font-weight:700;margin:0;line-height:1.65}
  .col .by{display:flex;align-items:center;gap:6px;margin:0;font-size:11.5px;color:var(--n500)}
  .col .by .ic{width:13px;height:13px}
  @media (max-width:880px){.cols{grid-template-columns:1fr}}

  /* ---------- partner ---------- */
  .partner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,48px);align-items:center}
  .partner ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px}
  .partner li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;font-weight:500;color:#DCE8F4}
  .partner li .ic{color:var(--acc);width:15px;height:15px;margin-top:4px}
  @media (max-width:880px){.partner{grid-template-columns:1fr}}

  /* ---------- company ---------- */
  .co-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:start}
  .vision{font-family:var(--serif);font-weight:700;font-size:clamp(17px,2vw,22px);line-height:1.95;
          letter-spacing:.05em;margin:0 0 20px}
  .vision .em{color:var(--b600)}
  .values{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
  .values li{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:5px 12px;
             border:1px solid var(--n300);color:var(--n700)}
  .values li .ic{width:12px;height:12px;color:var(--b400)}
  .facts{display:grid;grid-template-columns:auto 1fr;gap:0;font-size:13px;margin:0}
  .facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--n500);
            padding:11px 20px 11px 0;border-bottom:1px solid var(--n300);white-space:nowrap}
  .facts dd{margin:0;padding:11px 0;border-bottom:1px solid var(--n300);font-weight:500}
  .facts .chk{font-family:var(--mono);font-size:9px;color:var(--acc-ink);
              background:#FDF4E2;padding:2px 6px;margin-left:7px}
  .facts .addr{display:block;line-height:1.75}
  .facts .addr + .addr{margin-top:7px}
  .facts .addr b{display:inline-block;min-width:2.6em;margin-right:9px;font-family:var(--mono);
                 font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--b600);
                 border:1px solid var(--b200);padding:1px 6px;vertical-align:1px}
  @media (max-width:880px){.co-grid{grid-template-columns:1fr}}

  /* ---------- cta ---------- */
  .cta-box{text-align:center;display:flex;flex-direction:column;align-items:center;gap:15px}
  .cta-box .label{justify-content:center}
  .cta-box h2{margin:0}
  .cta-box p{margin:0;max-width:44em;color:#E6EEF7;font-weight:500;font-size:14px}

  /* ---------- footer ---------- */
  footer{background:var(--b900);color:#B9CBDD;padding:36px 0 34px;font-size:13px;font-weight:500}
  footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
  footer .fnav{display:flex;gap:24px;flex-wrap:wrap}
  footer .fnav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
  footer a{text-decoration:none}
  footer a:hover{color:var(--on-dark)}
  footer .fine{font-family:var(--mono);font-size:10px;letter-spacing:.06em;margin:0}
  /* 最下部：コピーライトとタグライン。リンク集の下に横一列で置く */
  footer .fbot{display:flex;justify-content:space-between;align-items:baseline;gap:10px 24px;
               flex-wrap:wrap;margin-top:30px;padding-top:18px;
               border-top:1px solid rgba(185,203,221,.22)}
  footer .fbot .tag{color:#7E93A8}
  @media (max-width:560px){footer .fbot{flex-direction:column;gap:7px}}
  footer .ext{display:inline-flex;align-items:center;gap:5px}
  footer .ext .ic{width:11px;height:11px;color:var(--b300)}

  /* ---------- palette appendix ---------- */
  .pal{background:var(--n900);color:var(--on-dark)}
  .pal h2{color:#fff}
  .swatches{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-bottom:22px}
  .sw{display:flex;flex-direction:column}
  .sw .chip{height:52px}
  .sw .cd{font-family:var(--mono);font-size:8.5px;padding-top:5px;color:var(--on-dark-s)}
  .sw .nm{font-family:var(--mono);font-size:8px;color:#6C7B89}
  @media (max-width:880px){.swatches{grid-template-columns:repeat(5,1fr)}}
  .pal table{width:100%;border-collapse:collapse;font-size:12.5px}
  .pal th,.pal td{text-align:left;padding:8px 11px;border-bottom:1px solid #2A3540}
  .pal th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--on-dark-s);font-weight:400}
  .pal code{font-family:var(--mono);font-size:11.5px;color:var(--b300)}

  /* ============================================================
     ▼ コーポレートTOP v2.0 で追加したコンポーネント
     ============================================================ */

  /* ---------- clients：FV直下の顧客ロゴスライダー ----------
     途切れずに流し続けるため、同じ列を2本並べて -50% まで動かす。
     端は両側でフェードさせ、切れ目を目立たせない。 */
  .clients{padding-top:28px;padding-bottom:28px;border-bottom:1px solid var(--n300);overflow:hidden}
  .clients .clabel{display:flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.12em;
                   color:var(--n500);margin:0 0 18px}
  .clients .clabel .ic{width:13px;height:13px;margin-right:7px;color:var(--b400)}
  .marquee{position:relative;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .mtrack{display:flex;width:max-content;animation:mscroll 42s linear infinite}
  .marquee:hover .mtrack{animation-play-state:paused}
  @keyframes mscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .mlogo{flex:none;width:158px;height:58px;margin-right:14px;
         display:flex;align-items:center;justify-content:center}
  .mlogo img{max-width:100%;max-height:100%;object-fit:contain;
             filter:grayscale(1);opacity:.6;transition:filter .35s,opacity .35s}
  .mlogo:hover img{filter:none;opacity:1}
  .mlogo.slot{border:1px dashed var(--slot);color:var(--slot);
              font-family:var(--mono);font-size:9.5px;letter-spacing:.14em}
  @media (prefers-reduced-motion:reduce){.mtrack{animation:none}}
  @media (max-width:640px){.mlogo{width:124px;height:48px;margin-right:10px}}

  /* ---------- service：4カード（band-deep の上に置く） ---------- */
  .svc4{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .svc4 a{display:flex;flex-direction:column;gap:9px;text-decoration:none;
          border:1px solid rgba(234,241,248,.24);border-top:2px solid var(--b400);
          padding:20px 20px 18px;transition:border-color .25s,background .25s}
  .svc4 a:hover{border-color:var(--b300);background:rgba(255,255,255,.05)}
  .svc4 a.hi{border-top-color:var(--acc);background:rgba(227,169,53,.07)}
  .svc4 a.hi:hover{background:rgba(227,169,53,.12)}
  .svc4 .shd{display:flex;align-items:center;gap:9px}
  .svc4 .shd .ic{color:var(--b300);width:19px;height:19px}
  .svc4 a.hi .shd .ic{color:var(--acc)}
  .svc4 .kick{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;color:var(--b300)}
  .svc4 a.hi .kick{color:var(--acc)}
  .svc4 .flag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;
              background:var(--acc);color:#1A1405;padding:3px 8px;margin-left:auto}
  .svc4 h3{font-family:var(--serif);font-size:19px;font-weight:700;margin:0;letter-spacing:.04em;color:#fff}
  .svc4 p{margin:0;font-size:13.5px;font-weight:500;color:#CFDFEE;flex:1}
  .svc4 .go{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
            color:var(--b300);padding-top:4px}
  .svc4 a.hi .go{color:var(--acc)}
  .svc4 .go .ic{width:14px;height:14px}
  @media (max-width:760px){.svc4{grid-template-columns:1fr}}

  /* ---------- fields：支援領域チップ ---------- */
  .fields{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 26px;padding:0}
  .fields li{font-size:12.5px;font-weight:700;padding:7px 14px;
             background:var(--white);border:1px solid var(--n300);color:var(--n700)}

  /* ---------- works：数値スロット ---------- */
  .work .out .slotnum{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
                      color:var(--slot);border:1px dashed var(--slot);padding:1px 11px;margin-right:9px}

  /* ---------- team ---------- */
  .team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,36px)}
  .member{display:grid;grid-template-columns:132px 1fr;gap:18px;align-items:start}
  /* 写真は角丸で書き出し済み。背景を透過で持っているので敷き色は入れない */
  .member .ph{aspect-ratio:49/60;display:block}
  .member .ph img{width:100%;height:100%;object-fit:cover;display:block}
  .member .nm{font-family:var(--serif);font-size:19px;font-weight:700;margin:0 0 3px;letter-spacing:.05em}
  .member .role{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
                color:var(--b600);margin:0 0 11px}
  .member .bio{margin:0;font-size:12.5px;font-weight:500;color:var(--n700);line-height:1.85}
  .member .bio.todo{color:var(--slot);border-left:2px dashed var(--slot);padding-left:11px}
  @media (max-width:900px){.team{grid-template-columns:1fr}}
  @media (max-width:420px){.member{grid-template-columns:104px 1fr;gap:14px}}

  /* ---------- news：会社の動き用の空き枠 ---------- */
  .col.slot{border-style:dashed;border-color:var(--slot);background:transparent}
  .col.slot h3{color:var(--slot)}

  /* ---------- duo：会社概要／採用 ---------- */
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .duo a{background:var(--white);border:1px solid var(--n300);padding:24px 24px 22px;
         display:flex;flex-direction:column;gap:9px;text-decoration:none;transition:border-color .25s}
  .duo a:hover{border-color:var(--b400)}
  .duo .dh{display:flex;align-items:center;gap:9px}
  .duo .dh .ic{color:var(--b600);width:20px;height:20px}
  .duo .kick{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;color:var(--b600)}
  .duo h3{font-family:var(--serif);font-size:19px;font-weight:700;margin:0;letter-spacing:.04em}
  .duo p{margin:0;font-size:13px;font-weight:500;color:var(--n700);flex:1}
  .duo .go{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
           color:var(--b600);padding-top:4px}
  .duo .go .ic{width:14px;height:14px}
  @media (max-width:760px){.duo{grid-template-columns:1fr}}
  .band-deep

  /* ---------- CTAの補足行 ---------- */
  .cta-box .sub{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#A8C0D6;margin-top:4px}

  /* ============================================================
     ▼ 顧客資産化診断（/diagnosis/asset/）
     ============================================================ */

  /* ---------- 診断ページのヒーロー ----------
     写真が明るい（白い紙が大半）ので、TOPのFVより濃いスクリムを敷く。
     左に向かって濃くし、見出しの側だけ確実に読ませる。 */
  .dhero{background:var(--b900);color:var(--on-dark);position:relative;overflow:hidden;isolation:isolate}
  .dhero .fvbg{position:absolute;inset:0;z-index:0;overflow:hidden}
  .dhero .fvbg img{width:100%;height:100%;object-fit:cover;display:block;object-position:52% 44%}
  .dhero .grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.18;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px 180px}