/* ===== 相手別の下層3ページ（for-sbir / for-university / for-vc）専用の部品
   style.css の後に読む。色・書体は style.css の変数だけを使う（新しい色コードは作らない）。 ===== */

/* --- 1画面目（パンくず＋英字＋日本語見出し＋リード＋写真1枚。写真の角に濃紺の正方形） --- */
.for-hero{padding:10px 0 72px;overflow:hidden}
.for-hero .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:32px 56px;align-items:center}
.crumb{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12px;color:var(--ink2);min-height:28px;align-items:center}
.crumb a{color:var(--ink2)}
.crumb a:hover{color:var(--navy)}
.crumb span::before{content:"／";margin-right:10px;color:var(--line)}
.crumb span:first-child::before{content:none}
.crumb b{color:var(--ink);font-weight:700}
.for-hero .en.big{display:block;font-size:clamp(28px,3.2vw,44px);line-height:1;letter-spacing:.06rem;color:var(--navy);margin-top:10px;border-left:4px solid var(--navy);padding-left:18px}
.for-hero h1{font-size:clamp(22px,2.5vw,34px);font-weight:900;line-height:1.35;letter-spacing:.02em;margin-top:14px}
.for-hero .lead{margin-top:12px;font-size:14px;line-height:1.8;color:var(--ink2)}
.for-hero .acts{margin-top:16px}
.for-hero .acts .btn.lg{min-height:64px}
.for-hero .acts .btn{width:100%;max-width:440px}
/* 裏付けの札（トップの .proof と同じ線の作り） */
.for-proof{display:flex;flex-wrap:wrap;gap:0;margin-top:14px;max-width:520px;border-top:2px solid var(--navy);border-bottom:2px solid var(--navy)}
.for-proof div{flex:1 1 0;padding:6px 14px;border-left:1px solid var(--line);min-width:0}
.for-proof div:first-child{border-left:0;padding-left:0}
.for-proof .en{display:block;font-size:clamp(18px,1.6vw,24px);line-height:1.1;color:var(--navy)}
.for-proof .en small{font-family:var(--sans);font-weight:700;font-size:12px;margin-left:2px}
.for-proof span{display:block;font-size:11px;color:var(--ink2);line-height:1.5;margin-top:4px;font-weight:700}
.for-proof.one{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 16px;padding:8px 0}
.for-proof.one div{padding:0;border:0}
.for-proof.one .en{font-size:36px}
.for-proof.one p{font-size:12px;font-weight:700;line-height:1.55;max-width:none;border-left:1px solid var(--line);padding-left:16px}
.for-proof.one p small{display:block;font-weight:500;color:var(--ink2);font-size:11px}
.for-fig{position:relative;padding:28px 28px 0 0}
.for-fig .ph{position:relative;overflow:hidden;background:var(--paper2)}
.for-fig .ph img{width:100%}
.for-fig .sq{position:absolute;background:var(--navy);display:block}
.for-fig .sq.s1{width:14%;aspect-ratio:1;right:0;top:0;z-index:2}
.for-fig .sq.s2{width:7%;aspect-ratio:1;left:-3.5%;bottom:-6%;z-index:2}
.for-fig .cap{position:absolute;left:0;bottom:-14px;z-index:3;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh);padding:10px 16px;font-size:12px;font-weight:700;line-height:1.5;display:flex;gap:10px;align-items:center}
.for-fig .cap .en{font-size:12px;color:var(--navy);letter-spacing:.14em}

/* --- 本文の2列（左＝本文、右＝見せ場や引用） --- */
.for-body{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px 64px;align-items:start}
.for-body p{color:var(--ink2);font-size:15px}
.for-body p+p{margin-top:16px}
.for-body>.ph{max-width:440px;justify-self:end;width:100%}
.for-body h3{font-size:clamp(20px,2vw,26px);font-weight:900;line-height:1.5;margin-bottom:16px}
.for-body .quote{margin-top:0}
.for-wide{margin-top:56px}

/* --- 見せ場A：時間軸を大きく（style.css の .timeline を土台に拡大） --- */
.for-tl .timeline{margin-top:24px;padding-top:56px}
.for-tl .timeline .span{font-size:clamp(14px,1.4vw,18px);padding:8px 18px}
.for-tl .timeline .axis{height:16px}
.for-tl .timeline .marks{margin-top:22px}
.for-tl .timeline .mk{font-size:14px;padding-top:14px}
.for-tl .timeline .mk::before{top:-34px;height:28px}
.for-tl .timeline .mk b{font-size:clamp(22px,2.4vw,34px)}
.for-tl .timeline .mk.end b{font-size:clamp(30px,3.6vw,52px);line-height:1}
.for-tl .timeline .mk.now b{font-size:clamp(22px,2.4vw,34px)}
.tl-foot{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:16px 40px;align-self:center}
.tl-foot .en{display:block;font-size:clamp(28px,3vw,40px);line-height:1;color:var(--navy)}
.tl-foot .en small{font-family:var(--sans);font-weight:700;font-size:14px;margin-left:4px;color:var(--navy)}
.tl-foot span{display:block;font-size:12px;color:var(--ink2);margin-top:6px;font-weight:700}

/* --- 見せ場B：24%を特大（style.css の .gap24 / .band を土台） --- */
.for-24{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 64px;align-items:center;background:var(--paper);padding:48px;border:1px solid var(--line);margin-top:8px}
.for-24 .bignum{display:flex;align-items:baseline;gap:6px;color:var(--navy)}
.for-24 .bignum .en{font-size:clamp(96px,12vw,168px);line-height:.9}
.for-24 .bignum .pct{font-family:var(--en);font-weight:800;font-size:clamp(32px,3.4vw,52px)}
.for-24 .numcap{font-weight:700;font-size:15px;line-height:1.8;color:var(--ink)}
.for-24 .small{margin-top:12px}

/* --- 見せ場C：3者の図（VC・投資先・マーケティング＋。契約＝実線、報告の共有＝点線） --- */
.tri{position:relative;margin-top:8px;border:1px solid var(--line);background:var(--paper);padding:40px 32px 32px}
.tri .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 24px;align-items:stretch;position:relative}
.tri .node{position:relative;z-index:1;background:var(--paper);border:1px solid var(--line);padding:20px 20px 18px;min-height:150px}
.tri .node.main{border:2px solid var(--navy)}
.tri .node .en{display:block;font-size:12px;color:var(--navy);letter-spacing:.14em}
.tri .node b{display:block;font-size:clamp(17px,1.6vw,21px);font-weight:900;line-height:1.4;margin-top:6px}
.tri .node p{font-size:13px;color:var(--ink2);margin-top:10px;line-height:1.7}
.tri .node ul{margin-top:10px;display:grid;gap:4px}
.tri .node li{font-size:12px;color:var(--ink);font-weight:700;padding-left:14px;position:relative;line-height:1.6}
.tri .node li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--navy)}
.tri .links{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;overflow:visible}
.tri .links svg{width:100%;height:100%;display:block;overflow:visible}
.tri .links path{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round}
.tri .links path.dash{stroke-dasharray:6 6;stroke:var(--ink2)}
.tri .lbl{position:absolute;z-index:2;background:var(--paper);padding:2px 10px;font-size:12px;font-weight:700;color:var(--navy);border:1px solid var(--navy);white-space:nowrap;line-height:1.7}
.tri .lbl.dash{color:var(--ink2);border-style:dashed;border-color:var(--ink2)}
.tri .lbl.a{left:calc(16.66% + 0px);top:-14px;transform:translateX(-50%);left:33.33%}
.tri .lbl.b{left:66.66%;top:-14px;transform:translateX(-50%)}
.tri .lbl.c{left:50%;bottom:4px;transform:translateX(-50%)}
.tri .rail-b{height:44px;position:relative;margin-top:16px}
.tri .rail-b svg{position:absolute;left:16.66%;right:16.66%;top:0;height:100%;width:66.66%;overflow:visible}
.tri .rail-b path{fill:none;stroke:var(--ink2);stroke-width:2;stroke-dasharray:6 6;stroke-linecap:round}
.tri .foot{margin-top:18px;font-size:12px;color:var(--ink2);line-height:1.7;display:flex;gap:24px;flex-wrap:wrap}
.tri .foot span{display:inline-flex;align-items:center;gap:8px}
.tri .foot i{width:24px;height:0;border-top:2px solid var(--navy);display:inline-block}
.tri .foot i.d{border-top:2px dashed var(--ink2)}

/* --- 壁（箇条書き：濃紺の角印・1本ずつ線で区切る） --- */
.walls{border-top:1px solid var(--line)}
.walls li{display:grid;grid-template-columns:28px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.8;color:var(--ink);font-weight:500}
.walls li i{width:14px;height:14px;background:var(--navy);display:block;margin-top:11px}

/* --- 入り方（01/02/03 の要点） --- */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px;border-top:1px solid var(--line);padding-top:32px}
.how div{position:relative;padding-top:6px}
.how .en{display:block;font-size:40px;line-height:1;color:var(--navy)}
.how p{font-size:15px;color:var(--ink);font-weight:700;line-height:1.8;margin-top:14px;max-width:none}
.how-note{margin-top:28px}

/* --- 相談の面 --- */
.consult{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:center;background:var(--paper2);padding:56px 48px;border-left:6px solid var(--navy)}
.consult h2{font-size:clamp(22px,2.2vw,30px);font-weight:900;line-height:1.45}
.consult p{margin-top:14px;color:var(--ink2);font-size:15px}
.consult .btn{width:100%}

/* --- 他の相手別（トップのUSE CASEカードと同じ部品。2枚） --- */
.uc.two .rail{overflow:visible;scroll-snap-type:none;display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:0}
.uc.two .card{flex:none}

@media (max-width:991px){
  .for-hero .wrap{grid-template-columns:1fr;gap:36px}
  .for-fig{padding:24px 24px 0 0}
  .for-body{grid-template-columns:1fr;gap:28px}
  .how{grid-template-columns:1fr;gap:24px}
  .consult{grid-template-columns:1fr;padding:40px 28px}
  .for-24{grid-template-columns:1fr;padding:32px 24px}
  .tri .grid{grid-template-columns:1fr;gap:40px}
  .tri .links,.tri .lbl.a,.tri .lbl.b,.tri .lbl.c,.tri .rail-b{display:none}
  .tri .node+.node::before{content:"";position:absolute;left:50%;top:-40px;height:40px;border-left:2px solid var(--navy)}
  .tri .node.vc+.node::before{border-left-style:dashed;border-left-color:var(--ink2)}
}
@media (max-width:767px){
  .for-hero{padding:8px 0 56px}
  .for-hero .en.big{font-size:26px;padding-left:12px;margin-top:8px}
  .for-hero h1{font-size:clamp(20px,6vw,28px)}
  .for-hero .lead{margin-top:10px;font-size:13px;line-height:1.75}
  .for-hero .acts .btn{max-width:none}
  .for-proof div{padding:4px 8px}
  .for-proof div:first-child{padding-left:0}
  .for-proof .en{font-size:17px}
  .for-proof .en small{font-size:10px}
  .for-proof span{font-size:10px;margin-top:2px}
  .for-proof.one .en{font-size:30px}
  .for-proof.one p{font-size:11px}
  .for-proof.one p small{display:none}
  .for-fig .cap{position:static;margin-top:14px;display:inline-flex}
  .for-fig .sq.s2{display:none}
  .tl-foot{grid-template-columns:1fr 1fr;gap:16px 24px}
  .for-tl .timeline .mk.end b{font-size:34px}
  .uc.two .rail{grid-template-columns:1fr}
  .walls li{font-size:14px}
}

/* ===== 仕上げ（review-subpages 2026-10-07 夜） ===== */
/* #13 #15 1画面目の裏付け＝引用（お困りごと別と同じ型） */
.for-proof.q{display:grid;grid-template-columns:150px 1fr;gap:0 16px;align-items:center;padding:10px 0;max-width:560px}
.for-proof.q .src{font-size:12px;color:var(--ink2);font-weight:700;line-height:1.5;padding:0;border:0}
.for-proof.q .src b{display:block;font-size:11px;color:var(--navy);letter-spacing:.04em}
.for-proof.q .cap{font-size:13px;font-weight:700;line-height:1.65;border-left:1px solid var(--line);padding-left:16px;max-width:none;color:var(--ink)}
.for-hero .ref,.for-proof .ref{font-size:11px;color:var(--navy);text-decoration:underline;margin-left:4px;font-weight:500;display:inline}
/* #15 HOW に移した3つの数字 */
.for-proof.in-how{max-width:none;margin:40px 0 8px}
.for-proof.in-how div{padding:12px 20px}
.for-proof.in-how .en{font-size:clamp(24px,2.4vw,32px)}
.for-proof.in-how span{font-size:13px}
/* #14 壁の右端に段の札 */
.walls li{grid-template-columns:28px minmax(0,1fr) auto;align-items:start}
.walls li .stg{align-self:start;margin-top:4px}
.wall-wide .for-body{grid-template-columns:1fr}
@media (max-width:767px){
  .for-proof.q{grid-template-columns:1fr;gap:6px}
  .for-proof.q .cap{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:8px;font-size:12px}
  .walls li{grid-template-columns:28px minmax(0,1fr)}
  .for-proof.in-how div{padding:8px 10px}
}