:root{
  --bg:#141414; --panel:#1D1D1D; --ink:#111111; --white:#FFFFFF; --gray:#BCBCBC; --line:#2C2C2C;
  --teal:#00B3A4; --yellow:#FFD400; --pink:#FF2E7E; --lime:#9BE015; --orange:#FF5A1F;
  --hdr:68px;
  --ar:'Archivo Black','Noto Sans JP',sans-serif; --ks:'Kaushan Script','Noto Sans JP',cursive;
  --os:'Oswald','Noto Sans JP',sans-serif; --jp:'Noto Sans JP',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
a{color:inherit;text-decoration:none;}  /* 指定がないとリンク内の文字が既定の青になる */
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--white);font-family:var(--jp);line-height:1.9;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt";overflow-x:hidden;}

/* ---------- 写真プレースホルダー ---------- */
.ph{position:relative;background:#4C5A5A;overflow:hidden;}
.ph::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 14px,transparent 14px 28px);}
.ph::after{content:attr(data-ph);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--os);font-weight:600;font-size:.7rem;letter-spacing:.2em;color:#fff;
  border:1px solid rgba(255,255,255,.4);padding:.45rem 1rem;white-space:nowrap;text-align:center;}
.ph.teal{background:var(--teal);}.ph.yellow{background:var(--yellow);}
.ph.pink{background:var(--pink);}.ph.lime{background:var(--lime);}
.ph.yellow::after,.ph.lime::after{color:var(--ink);border-color:rgba(0,0,0,.4);}

/* ---------- 共通 ---------- */
.wrap{max-width:1300px;margin:0 auto;padding:0 5vw;}
.sec{padding:clamp(80px,11vw,150px) 0;position:relative;}
.enh{font-family:var(--ar);font-size:clamp(3.4rem,10.5vw,9rem);line-height:.86;letter-spacing:-.01em;
  text-transform:uppercase;}
.jph{font-weight:900;font-size:clamp(1.45rem,4.2vw,2.7rem);line-height:1.5;letter-spacing:-.01em;}
/* 本文の基準。2026-08-05に全面的に上げた（16.6px → 21.8px）。
   1行が長くなりすぎないよう、組み幅も 62ch → 54ch に詰めている */
.body{font-size:clamp(1.14rem,2.25vw,1.36rem);line-height:2.05;color:#D0D0D0;max-width:54ch;}
.body b{color:#fff;font-weight:700;}
/* 見出し・決めゼリフは、折れるときに行を均等に割る。
   これがないと「意識ではな／く、」のように最終行に1文字だけ落ちることがある。
   <br> で折る位置を指定していても、幅が足りなければ <br> 以外の場所でも折れるため、
   幅の指定だけでは防ぎきれない（特にスマホ幅）*/
.fv h1,.fv .sub,.reframe h2,.thesis h2,.band p,.jph,.mono .voice,.mono .last,.mono .lead,
.chk h3,.zig-txt h3,.duo h3,.closing .lead,.closing .big,.closing .bd,.pm-strong,
.oy-scene h3,.fcard h3,.story .lead-q,.story .mark,.saying,.saying-a,.founder-mark p,
.honest .voice p,.h-fin,.fit .h,.cta h2,.ans .quote,.ans .fin,.crit .o,
.doubt .hd,.doubt .awake,.doubt .said,.doubt .attr,.hook .h,.hook .q,
.work h3,.work .gain,.work-fin p,.avg,.qa .q h3,.qa .a .said,.qa .a .fin{text-wrap:balance;}

/* ただし balance は <br> を含む要素では効かない（実測：`.closing .bd` は [257,249,251] と
   均等に割れるのに、<br> のある `.closing .lead` は [312,337,24] で最終行に1文字だけ残った）。
   そこで、意図的に折る行は <br> ではなく .ln のブロックにして、行ごとに balance をかける */
.ln{display:block;text-wrap:balance;}

/* ---------- 確認待ちの印 ----------
   先方（豊田様）に確認したい箇所に、その場で見えるように付ける。
   文字サイズは em 指定なので、乗せた文の大きさに追従する。
   ※クラス名は .needchk。**.chk は市松グリッド（旧レイアウト）で使われていて衝突する**
     （display:grid になってバッジが全幅に伸びた）
   **公開前に .needchk を全部消すこと。**残っている箇所は _NOTES.md の一覧を参照 */
.needchk{display:inline-block;vertical-align:middle;margin:0 .1em 0 .5em;
  padding:.18em .6em;background:var(--pink);color:var(--ink);
  font-family:var(--jp);font-weight:900;font-size:.56em;letter-spacing:.06em;
  line-height:1.5;border-radius:2px;white-space:nowrap;}

/* 段落は balance ではなく pretty。balance は行長を揃えにいくので長文だと組みが痩せる。
   pretty は行長を変えずに、最終行に1〜2文字だけ残るのを避ける */
.body,.mono p,.thesis .sub p,.reframe p:not(.lab),.doubt p.bd,.hook p.bd,
.work p,.qa .a p,.cta p,.fcard p,.real div,.mcard .ba .was{text-wrap:pretty;}

.up{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);}
.up.in{opacity:1;transform:none;}
.dots{background-image:radial-gradient(rgba(255,255,255,.22) 1.4px,transparent 1.4px);
  background-size:9px 9px;}

/* ---------- ヘッダー ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:stretch;
  justify-content:space-between;background:var(--ink);min-height:var(--hdr);}
.logo{display:flex;align-items:center;gap:.9rem;padding:1.05rem 1.6rem;}
.logo b{font-family:var(--ar);font-size:1.12rem;letter-spacing:.18em;}
.logo span{font-family:var(--os);font-weight:500;font-size:.98rem;letter-spacing:.14em;color:#CFCFCF;}
.hnav{display:flex;}
.hnav a{display:flex;align-items:center;justify-content:center;text-align:center;padding:0 1.5rem;
  font-weight:700;font-size:1.02rem;line-height:1.35;color:var(--ink);text-decoration:none;
  transition:filter .25s;}
.hnav a:hover{filter:brightness(1.12);}
.hnav a:nth-child(1){background:var(--teal);color:var(--ink);}
.hnav a:nth-child(2){background:var(--lime);}
.hnav a:nth-child(3){background:var(--yellow);}
@media(max-width:760px){.hnav a{padding:0 .9rem;font-size:.82rem;}.logo span{display:none;}}

/* ---------- FV ---------- */
.fv{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  padding:0 0 clamp(40px,7vw,90px);}
.fv-bg{position:absolute;inset:0;background:#0C1A19;}
/* 集合写真は11人が横に広いので cover だと端の人が切れる。
   contain で必ず全員入れ、余った所は暗いベタで埋める */
/* 写真の器そのものをヘッダーの下に収める。こうすると contain が器の中で完結し、
   どの画面比率でも上下左右いずれも切れない */
.fv-bg .ph{position:absolute;inset:var(--hdr) 0 0 0;background:transparent;
  background-size:contain!important;background-position:center top!important;background-repeat:no-repeat;}
/* 2026-08-07：写真全面にかけていた暗いグラデーションをやめた。
   旧：linear-gradient(180deg,rgba(8,20,20,.58),rgba(8,18,18,.72) 45%,rgba(6,14,14,.93))
   → 一番上ですでに .58 かかっていて、写真全体が veil をかぶったように見えていた。
     「透過の写真がかぶってるよ顔が」という指摘はこれ。

   ただし全部外すと文字が読めない（実測：黄の筆記体で 1.12:1、白の見出しで 1.50:1。
   大きい文字の基準 3:1 を下回る。背景に白い壁とホワイトボードが来るため）。

   2026-08-07（2回目の指示）：「トップページの写真は透過しよう」
   → グラデーションではなく、**写真全体を均一に透過**させる形にした。
     グラデーションだと場所によって濃さが変わり、顔の一部だけが沈んで見える。
     均一なら写真全体が同じだけ後ろに退くので、顔の見え方に差が出ない。
   ※筆記体は 7rem → 4.4rem のまま（文字のかたまりを顔より下へ逃がすため） */
.fv-bg::after{content:"";position:absolute;inset:0;background:rgba(6,14,14,.5);}
.fv-in{position:relative;z-index:3;width:100%;max-width:1300px;margin:0 auto;padding:0 5vw;}
/* 筆記体は 7rem → 4.4rem。文字のかたまりを短くして、座っている列の顔より下に収めるため。
   色は黄 → 白（2026-08-07）。黄（相対輝度 0.682）だと白いホワイトボードに重なる部分が
   1.78:1 までしか出ず、大きい文字の基準 3:1 に届かなかった。白（1.0）にして稼いでいる。
   FVから黄は消えるが、ブランド色は見出しのハイライト（.fv h1 em の黄ベタ）に残る */
.fv .script{font-family:var(--ks);color:#fff;font-size:clamp(2rem,5.4vw,4.4rem);
  line-height:1;transform:rotate(-3deg);transform-origin:left bottom;margin-bottom:.5rem;
  text-shadow:0 2px 6px rgba(0,0,0,.55),0 6px 26px rgba(0,0,0,.6);}
.fv h1{font-weight:900;font-size:clamp(1.9rem,6.4vw,4.9rem);line-height:1.24;letter-spacing:-.025em;
  text-shadow:0 4px 26px rgba(0,0,0,.5);}
.fv h1 em{font-style:normal;background:var(--yellow);color:var(--ink);padding:0 .12em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.fv .sub{margin-top:1.9rem;font-weight:700;font-size:clamp(1.1rem,2.3vw,1.42rem);line-height:1.85;
  text-shadow:0 2px 14px rgba(0,0,0,.6);}
.fv .sub span{display:block;font-weight:400;color:#D6D6D6;font-size:.92em;}
.fv .badge{display:inline-block;margin-top:1.6rem;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.28);
  padding:.55rem 1.15rem;font-size:.86rem;}
.fv .scroll{position:absolute;right:5vw;bottom:clamp(40px,7vw,90px);font-family:var(--os);
  font-size:.88rem;letter-spacing:.26em;writing-mode:vertical-rl;color:#fff;display:flex;
  align-items:center;gap:1rem;z-index:3;}
.fv .scroll::after{content:"";width:1px;height:70px;background:var(--yellow);
  animation:sc 1.9s ease-in-out infinite;}
@keyframes sc{0%,100%{transform:scaleY(.25);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}}
@media(max-width:700px){.fv .scroll{display:none;}}

/* ---------- 共感：独白を積み上げる（写真も飾りも使わず、言葉だけで運ぶ） ---------- */
.mono{padding:clamp(3.6rem,8vw,7rem) 5vw;}
/* 本文が小さいという指摘（2026-08-03）→ 18.4px から 23.0px に。
   字が大きくなると1行が短くなりすぎるので、組み幅も 760→860px に広げている */
.mono-in{max-width:860px;margin:0 auto;}
.mono p{font-size:clamp(1.18rem,2.45vw,1.44rem);line-height:2.05;color:#CFCFCF;}
.mono .lead{margin-top:clamp(2.4rem,5vw,3.6rem);font-size:clamp(1.14rem,2.1vw,1.22rem);color:#D8D8D8;}
.mono .voice{margin-top:.9rem;font-weight:900;line-height:1.55;letter-spacing:-.02em;
  font-size:clamp(1.5rem,4.4vw,2.9rem);}
.mono .voice .k{color:var(--yellow);}
.mono .last{margin-top:.9rem;font-weight:900;line-height:1.48;letter-spacing:-.02em;
  font-size:clamp(1.7rem,5.2vw,3.3rem);}
.mono .last em{font-style:normal;background:var(--yellow);color:var(--ink);padding:0 .12em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.mono hr{border:0;border-top:1px solid #2C2C2C;margin:clamp(2.6rem,5vw,3.6rem) 0 0;}

/* ---------- 問題の再定義：ここで一度、面ごと明るく反転させる ---------- */
.reframe{background:var(--yellow);color:var(--ink);display:grid;grid-template-columns:1.05fr .95fr;
  align-items:center;gap:clamp(2rem,5vw,4.5rem);padding:clamp(3.4rem,7vw,6rem) 5vw;}
.reframe .lab{font-family:var(--os);font-weight:600;font-size:1.02rem;letter-spacing:.18em;margin-bottom:1.2rem;}
.reframe h2{font-weight:900;font-size:clamp(1.55rem,3.9vw,2.85rem);line-height:1.5;
  letter-spacing:-.02em;margin-bottom:1.6rem;}
.reframe p{font-size:clamp(1.14rem,2.25vw,1.36rem);line-height:2.05;color:rgba(0,0,0,.82);}
.reframe p+p{margin-top:1.2rem;}
.reframe b{color:var(--ink);}
.reframe .fig{aspect-ratio:4/3;background-size:cover;background-position:center 22%;background-color:#12181A;}
@media(max-width:820px){.reframe{grid-template-columns:1fr;}}

/* ---------- 主張：この1文がページの芯なので、単独で立てる ---------- */
.thesis{padding:clamp(3.6rem,8vw,7rem) 5vw clamp(2.4rem,5vw,4rem);text-align:center;}
.thesis .lab{font-family:var(--os);font-weight:600;font-size:1.02rem;letter-spacing:.2em;
  color:var(--lime);margin-bottom:1.4rem;}
/* 折れる位置は <br> だけで決める。それ以外の場所で折れると「意識ではな／く、」になる。
   1行目「人が変わるのは、意識ではなく、」は実測 13.22em。使える幅は 90vw（左右5vwのパディング）。
   13.22em ≦ 90vw を全幅で満たすには font-size ≦ 6.8vw が必要。
   下限を 1.6rem で固定していたのが原因で、360px幅では 25.6px×13.22em=338px > 324px となり割れていた。
   vw追従を 4.2 → 5.6 に上げ、下限を 1.28rem に下げて、どの幅でも約18%の余裕を残している
   （＝1行目が16文字程度に伸びても折れない。コピーは後から差し替わるため余裕を持たせてある）*/
.thesis h2{font-weight:900;font-size:clamp(1.2rem,5.6vw,3.1rem);line-height:1.5;letter-spacing:-.02em;
  max-width:none;margin:0 auto;}
.thesis .sub{max-width:820px;margin:clamp(2rem,4vw,3rem) auto 0;text-align:left;
  font-size:clamp(1.14rem,2.25vw,1.36rem);line-height:2.05;color:#D0D0D0;}
.thesis .sub p+p{margin-top:1.2rem;}

/* ---------- セクション見出し帯 ---------- */
.band{padding:clamp(46px,7vw,90px) 5vw;text-align:center;color:var(--ink);}
.band.teal{background:var(--teal);color:var(--ink);}
.band.yellow{background:var(--yellow);}
.band.pink{background:var(--pink);color:var(--ink);}
.band.lime{background:var(--lime);}
.band .enh{margin-bottom:.5rem;}
.band p{font-weight:900;font-size:clamp(1.14rem,2.6vw,1.6rem);}

/* ---------- 市松グリッド ---------- */
.chk{display:grid;grid-template-columns:repeat(2,1fr);}
.chk>*{min-height:clamp(260px,32vw,430px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.8rem,4vw,3.4rem);}
.chk .txt{background:var(--panel);}
.chk .txt.k1{background:var(--ink);}
.chk .en{font-family:var(--os);font-weight:600;font-size:.76rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--teal);margin-bottom:.9rem;}
.chk h3{font-weight:900;font-size:clamp(1.15rem,2.6vw,1.68rem);line-height:1.55;margin-bottom:1rem;}
.chk p{font-size:.94rem;line-height:2;color:#C0C0C0;}
.chk .ph{padding:0;}
@media(max-width:820px){.chk{grid-template-columns:1fr;}.chk>*{min-height:240px;}}

/* ---------- Empathy ---------- */
.emp{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.emp .ph,.emp .pane{min-height:100%;}
.emp .box{padding:clamp(2.4rem,6vw,5.5rem) clamp(1.6rem,5vw,4.5rem);background:var(--panel);}
.emp .tail{margin-top:2rem;padding:1rem 1.2rem;background:var(--ink);border-left:4px solid var(--yellow);
  font-size:.9rem;color:#A6A6A6;}
@media(max-width:880px){.emp{grid-template-columns:1fr;}.emp .ph,.emp .pane{min-height:320px;}}

/* ---------- Our Answer ---------- */
.ans{display:grid;grid-template-columns:1fr 1.25fr;align-items:stretch;}
.ans .ph{min-height:100%;}
.ans .box{padding:clamp(2.4rem,6vw,5rem) clamp(1.6rem,4.5vw,4rem);background:var(--ink);}
.ans .cap{font-family:var(--jp);font-weight:700;font-size:1rem;letter-spacing:.1em;color:var(--teal);margin-bottom:.5rem;}
.ans .name{font-weight:900;font-size:1.55rem;margin-bottom:2rem;}
.ans .name span{display:block;font-family:var(--os);font-weight:500;font-size:1rem;
  letter-spacing:.14em;color:var(--gray);margin-top:.25rem;}
.ans .item{padding:1.4rem 0;border-top:1px solid var(--line);}
.ans .item .t{font-family:var(--jp);font-weight:700;font-size:1rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:.5rem;}
.ans .item p{font-size:clamp(1.1rem,2.1vw,1.28rem);line-height:2.05;color:#D0D0D0;}
.ans .quote{background:var(--yellow);color:var(--ink);padding:1.8rem;margin:1.2rem 0;
  font-weight:900;font-size:clamp(1.02rem,2.3vw,1.3rem);line-height:1.72;}
.ans .fin{font-weight:900;font-size:clamp(1.1rem,2.6vw,1.5rem);color:var(--lime);}
@media(max-width:880px){.ans{grid-template-columns:1fr;}.ans .ph{min-height:320px;}}

/* ---------- One Year Later ---------- */
.oy{background:var(--ink);}
/* before/after は「暗い箱が2つ」だと差が出ない。
   過去＝沈んだ暗色、現在＝イエローのベタ。地の色そのもので変化を見せる */
.oy-row{padding:clamp(2.2rem,4.6vw,3.4rem) 5vw;border-top:1px solid #2C2C2C;}
.oy-row:first-of-type{border-top:0;}
.oy-in{max-width:1180px;margin:0 auto;}
.oy-scene{display:flex;align-items:baseline;gap:clamp(.8rem,2vw,1.3rem);
  margin-bottom:clamp(1.2rem,2.6vw,1.9rem);}
.oy-scene .no{font-family:var(--ar);font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1;color:#7A7A7A;}
.oy-scene h3{font-weight:900;font-size:clamp(1.28rem,3vw,2.05rem);line-height:1.4;letter-spacing:-.02em;}
.oy-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;}
.oy-side{padding:clamp(1.5rem,2.8vw,2.2rem);}
.oy-side .lb{font-weight:900;font-size:clamp(1.06rem,2.2vw,1.42rem);margin-bottom:.85rem;line-height:1;}
.oy-side p{font-size:clamp(1.14rem,2.25vw,1.36rem);line-height:2;}
.oy-was{background:#131313;}
.oy-was .lb{color:#9C9C9C;}
.oy-was p{color:#BDBDBD;}
.oy-now{background:var(--yellow);}
.oy-now .lb{color:rgba(0,0,0,.5);}
.oy-now p{color:var(--ink);font-weight:700;}
.oy-arw{display:flex;align-items:center;justify-content:center;background:#131313;
  padding:0 clamp(.5rem,1.6vw,1.1rem);}
.oy-arw svg{width:clamp(24px,3.2vw,38px);height:auto;display:block;}
@media(max-width:820px){
  .oy-pair{grid-template-columns:1fr;}
  .oy-arw{padding:.7rem 0;}
  .oy-arw svg{transform:rotate(90deg);}
}
@media(max-width:900px){.oy-row{grid-template-columns:1fr;}}

/* ---------- Facts ---------- */
.facts{background:var(--bg);}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.fcard{padding:clamp(2rem,4vw,3rem) clamp(1.4rem,3vw,2.4rem);color:var(--ink);
  min-height:clamp(230px,24vw,290px);display:flex;flex-direction:column;justify-content:center;}
.fcard:nth-child(1){background:var(--teal);color:var(--ink);}
.fcard:nth-child(2){background:var(--yellow);}
.fcard:nth-child(3){background:var(--lime);}
.fcard:nth-child(4){background:var(--pink);color:var(--ink);}
.fcard:nth-child(5){background:var(--yellow);}
.fcard:nth-child(6){background:var(--teal);color:var(--ink);}
.fcard .step{font-family:var(--os);font-weight:600;font-size:1.04rem;letter-spacing:.2em;
  opacity:.62;margin-bottom:.9rem;}
.fcard h3{font-weight:900;font-size:clamp(1.4rem,3vw,2rem);line-height:1.45;margin-bottom:1rem;}

.fcard p{font-size:clamp(1.12rem,2.15vw,1.32rem);line-height:1.95;opacity:1;}
/* 到達条件は本文と役割が違うので、線で区切って一段落として見せる */
.fcard .cond{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(0,0,0,.2);
  font-weight:700;font-size:clamp(1.06rem,2vw,1.22rem);}
.fcard:nth-child(1) .cond,.fcard:nth-child(4) .cond{border-color:rgba(0,0,0,.24);}
/* 4列版。インラインstyleで書くとメディアクエリを上書きしてしまい、
   390px幅で4列のまま（1列97px）になって見出しが1文字ずつ縦に割れていた */
.fgrid.four{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.fgrid,.fgrid.four{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.fgrid,.fgrid.four{grid-template-columns:1fr;}}

/* ---------- Members ---------- */
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);}
/* メンバーが4名になり、team/office のタイルが行を独占して高さ0に潰れるため、
   2カラムぶん占有させて 3:2 の比率を明示する（カード高さとほぼ一致する） */
.mgrid > .ph,.mgrid > .pane{grid-column:span 2;aspect-ratio:3/2;}
/* 2026-08-07：確定稿でカードに Before→After が入り、文字量が倍近くになった。
   写真の上に重ねる作りだと、カードの固定比率（3:4）に対して余white が 0〜20px しか残らず、
   フォントの出方やコピーの微調整で必ず切れる（実際にヘッドレスの描画で切れた）。
   → 写真と文字を上下に分け、文字側は高さを内容なりにする。
   スクリム越しに小さい字を読ませる形も避けられる */
.mcard{position:relative;display:flex;flex-direction:column;background:var(--panel);overflow:hidden;}
.mcard .ph{position:relative;aspect-ratio:1/1;flex:0 0 auto;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.mcard:hover .ph{transform:scale(1.04);}
.mcard .ov{position:static;z-index:2;padding:1.5rem 1.4rem 1.7rem;display:flex;flex-direction:column;
  flex:1 1 auto;}
.mcard .tagm{position:absolute;left:0;top:0;font-family:var(--os);font-weight:700;font-size:.98rem;
  letter-spacing:.16em;padding:.3rem .75rem;color:var(--ink);}
.mcard:nth-child(4n+1) .tagm{background:var(--yellow);}
.mcard:nth-child(4n+2) .tagm{background:var(--teal);color:var(--ink);}
.mcard:nth-child(4n+3) .tagm{background:var(--pink);color:var(--ink);}
.mcard:nth-child(4n+4) .tagm{background:var(--lime);}
.mcard .nm{font-family:var(--jp);font-weight:900;font-size:clamp(1.16rem,2.2vw,1.5rem);letter-spacing:.01em;
  line-height:1.1;margin-bottom:.3rem;}
.mcard .ro{font-family:var(--os);font-weight:500;font-size:1.12rem;letter-spacing:.1em;color:#DCDCDC;}
.mcard .rom{font-family:var(--os);font-size:.98rem;letter-spacing:.14em;color:#CCCCCC;margin:.24rem 0 .34rem;}
.mcard .cm{margin-top:.7rem;font-weight:700;font-size:clamp(1.06rem,2vw,1.22rem);line-height:1.65;}
.mcard .fr{margin-top:.5rem;font-size:1rem;color:#C4C4C4;}
@media(max-width:900px){.mgrid{grid-template-columns:repeat(2,1fr);}.mgrid > .ph,.mgrid > .pane{grid-column:span 1;aspect-ratio:1/1;}}
/* 2列のままだと390px幅でカードが195pxになり、ビフォー文が16.6pxの3行に潰れる。
   本文の下限（18px）を割るので、この幅からは1列にして文字を full サイズで出す */
@media(max-width:560px){.mgrid{grid-template-columns:1fr;}.mcard .ph{aspect-ratio:4/3;}}

/* ---------- 写真の代わりに面を埋めるパネル ---------- */
.pane{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.8rem,4vw,3.2rem);overflow:hidden;}
.pane .no{font-family:var(--ar);font-size:clamp(3.4rem,9vw,6.4rem);line-height:.86;
  letter-spacing:-.02em;opacity:.22;}
.pane .kw{font-weight:900;font-size:clamp(1.35rem,3.4vw,2.3rem);line-height:1.45;margin-top:.6rem;}
.pane .sm{font-family:var(--os);font-weight:600;font-size:.72rem;letter-spacing:.22em;
  margin-top:1rem;opacity:.7;}
.pane.teal{background:var(--teal);color:#fff;}
.pane.yellow{background:var(--yellow);color:var(--ink);}
.pane.pink{background:var(--pink);color:#fff;}
.pane.lime{background:var(--lime);color:var(--ink);}
.pane.dark{background:var(--panel);color:#fff;}
/* 斜めストライプ。写真がない面が「空き」に見えないようにする */
.pane.stripe::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.055) 0 14px,transparent 14px 28px);}
.pane.dark.stripe::after{background:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 14px,transparent 14px 28px);}
/* 共感パート：写真の代わりに置く大きな独白 */
.emp .pane{background:#0F3330;justify-content:flex-end;}
.emp .pane .lead{font-family:var(--ks);color:var(--yellow);font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1.1;transform:rotate(-3deg);transform-origin:left bottom;margin-bottom:1.4rem;}
.emp .pane .big{font-weight:900;font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.5;}
.emp .pane .big em{font-style:normal;background:var(--yellow);color:var(--ink);padding:0 .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.emp .pane .note{margin-top:1.6rem;font-size:1.1rem;line-height:2;color:#D0D0D0;}

/* 図版パネル。写真が揃わないぶんを、描き起こした図で埋める */
.pane .art{position:absolute;pointer-events:none;}
.pane .art svg{width:100%;height:100%;display:block;}
.pane.art-full{padding:clamp(1.4rem,3.4vw,2.6rem);}
.pane.art-full .art{inset:clamp(1.4rem,3.4vw,2.6rem);}
.pane.art-side .art{right:0;top:0;bottom:0;width:47%;}
.pane.art-side > :not(.art){position:relative;z-index:2;max-width:53%;}
@media(max-width:760px){
  .pane.art-side .art{width:100%;opacity:.2;}
  .pane.art-side > :not(.art){max-width:100%;}
}

/* 文章の横に画像を置く帯。左に本文、右に写真 */
.pitch{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch;background:var(--panel);}
.pitch .ph{min-height:clamp(300px,34vw,470px);order:2;}
.pitch .box{order:1;padding:clamp(2.6rem,6vw,5rem) clamp(1.6rem,5vw,4.5rem);
  display:flex;flex-direction:column;justify-content:center;}
@media(max-width:880px){.pitch{grid-template-columns:1fr;}
  .pitch .ph{order:1;min-height:260px;}.pitch .box{order:2;}}

/* ---------- Reframe：写真と本文を左右交互に置く（DeNAの「働く環境を知る」の組み方） ---------- */
.zig{max-width:1180px;margin:0 auto;padding:clamp(2.4rem,5vw,4rem) 5vw clamp(4.5rem,9vw,7.5rem);
  display:flex;flex-direction:column;gap:clamp(3.6rem,7vw,6.5rem);}
.zig-row{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(1.8rem,5vw,4.4rem);align-items:center;}
.zig-row:nth-child(even){grid-template-columns:1.08fr 1fr;}
.zig-row:nth-child(odd) .zig-fig{order:2;}   /* 1つ目は本文が左・写真が右（参考サイトと同じ起点） */
.zig-fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0F1112;}
.zig-fig.lime{background:var(--lime);}
.zig-fig .ph{position:absolute;inset:0;background-size:cover;background-position:center;}
.zig-fig .ph.diagram{background-size:contain;background-repeat:no-repeat;}
.zig-fig svg{position:absolute;inset:clamp(1.2rem,3vw,2.4rem);width:auto;height:auto;
  top:clamp(1.2rem,3vw,2.4rem);right:clamp(1.2rem,3vw,2.4rem);
  bottom:clamp(1.2rem,3vw,2.4rem);left:clamp(1.2rem,3vw,2.4rem);}
.zig-txt .en{font-family:var(--os);font-weight:600;font-size:1rem;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:.9rem;}
.zig-txt h3{font-weight:900;font-size:clamp(1.3rem,3vw,1.95rem);line-height:1.5;margin-bottom:1.1rem;}
.zig-txt p{font-size:clamp(1.12rem,2.15vw,1.32rem);line-height:2.05;color:#D0D0D0;}
@media(max-width:820px){
  .zig-row,.zig-row:nth-child(even){grid-template-columns:1fr;gap:1.5rem;}
  .zig-row .zig-fig{order:0;}
}

/* ---------- Promise ---------- */
.promise{background:var(--panel);}
.promise .body+.body{margin-top:1.6rem;}
.pm-strong{margin-top:2.4rem;background:var(--ink);border-left:8px solid var(--lime);
  padding:1.8rem;font-weight:900;font-size:clamp(1.12rem,3vw,1.85rem);line-height:1.7;}

/* ========== 2026-08-07 確定稿で追加したパーツ ========== */

/* ---------- 3 問題提起：独白の続きなので、共感パートと同じ組み方で受ける ---------- */
.doubt{background:var(--panel);padding:clamp(3.4rem,7vw,6rem) 5vw;}
.doubt-in{max-width:860px;margin:0 auto;}
.doubt .hd{font-weight:900;line-height:1.45;letter-spacing:-.02em;
  font-size:clamp(1.8rem,5.4vw,3.4rem);}
.doubt .hd em{font-style:normal;color:var(--yellow);}
.doubt .re{margin-top:.9rem;font-weight:700;color:#B4B4B4;
  font-size:clamp(1.1rem,2.2vw,1.32rem);}
.doubt p.bd{margin-top:clamp(2.2rem,4.4vw,3.2rem);
  font-size:clamp(1.14rem,2.25vw,1.36rem);line-height:2.05;color:#D0D0D0;}
.doubt .awake{margin-top:1.6rem;font-weight:900;line-height:1.6;
  font-size:clamp(1.24rem,2.9vw,1.85rem);}
.doubt .said{margin-top:clamp(2.6rem,5vw,3.8rem);padding:clamp(1.6rem,3.2vw,2.4rem);
  background:var(--ink);border-left:8px solid var(--pink);
  font-weight:900;line-height:1.62;font-size:clamp(1.3rem,3.2vw,2.1rem);letter-spacing:-.01em;}
.doubt .said .k{color:var(--pink);}
.doubt .attr{margin-top:1.1rem;font-size:clamp(1.06rem,2vw,1.24rem);line-height:1.9;color:#C4C4C4;}

/* ---------- 4 社長ストーリーフック：別ページへの入口。写真を大きく使う ---------- */
.hook{display:grid;grid-template-columns:1fr 1.1fr;align-items:stretch;background:var(--ink);}
.hook .ph{min-height:clamp(320px,38vw,520px);background-size:cover;background-color:#12181A;}
.hook .box{padding:clamp(2.6rem,6vw,5rem) clamp(1.6rem,5vw,4.5rem);
  display:flex;flex-direction:column;justify-content:center;}
.hook .lab{font-family:var(--os);font-weight:600;font-size:1.02rem;letter-spacing:.2em;
  color:var(--teal);margin-bottom:1.3rem;}
/* 2026-08-07：問題提起の章末に置いていた引用をここへ移した。
   豊田さんに向けられた言葉なので、本人の紹介と同じ面にあるほうが誰の話か分かる。
   フックの箱は本文より狭いので、.doubt .said より一回り小さくしてある */
.hook .said{margin-bottom:1.4rem;padding:clamp(1.2rem,2.4vw,1.8rem);
  background:var(--panel);border-left:8px solid var(--pink);
  font-weight:900;line-height:1.6;letter-spacing:-.01em;text-wrap:balance;
  font-size:clamp(1.16rem,2.5vw,1.6rem);}
.hook .said .k{color:var(--pink);}
.hook .h{font-weight:900;line-height:1.6;letter-spacing:-.01em;
  font-size:clamp(1.35rem,3.2vw,2.15rem);}
.hook p.bd{margin-top:1.4rem;font-size:clamp(1.12rem,2.15vw,1.32rem);line-height:2.05;color:#D0D0D0;}
.hook .q{margin-top:1.6rem;font-weight:900;color:var(--yellow);
  font-size:clamp(1.16rem,2.5vw,1.5rem);line-height:1.7;}
.hook .btns{margin-top:clamp(1.8rem,3.4vw,2.6rem);justify-content:flex-start;}
@media(max-width:880px){.hook{grid-template-columns:1fr;}.hook .ph{min-height:280px;}}

/* ---------- 6 仕事内容：2つしかないので、番号を大きく振って左右に並べる ---------- */
.work{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#2C2C2C;}
.work>div{background:var(--panel);padding:clamp(2.4rem,5vw,4rem) clamp(1.8rem,4vw,3.2rem);}
.work .n{font-family:var(--ar);font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;}
.work>div:nth-child(1) .n{color:var(--teal);}
.work>div:nth-child(2) .n{color:var(--lime);}
.work h3{font-weight:900;font-size:clamp(1.35rem,3vw,2rem);line-height:1.45;margin:.7rem 0 1.2rem;}
.work p{font-size:clamp(1.12rem,2.15vw,1.32rem);line-height:2.05;color:#D0D0D0;}
.work p+p{margin-top:1.1rem;}
.work .gain{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid #333;font-weight:900;
  font-size:clamp(1.16rem,2.4vw,1.44rem);line-height:1.7;}
.work>div:nth-child(1) .gain b{color:var(--teal);}
.work>div:nth-child(2) .gain b{color:var(--lime);}
@media(max-width:820px){.work{grid-template-columns:1fr;}}
/* 2つを受ける締め */
.work-fin{background:var(--ink);padding:clamp(2.6rem,5vw,4rem) 5vw;text-align:center;}
.work-fin p{max-width:900px;margin:0 auto;font-weight:900;line-height:1.7;
  font-size:clamp(1.24rem,3vw,2rem);text-wrap:balance;}
.work-fin em{font-style:normal;background:var(--yellow);color:var(--ink);padding:0 .12em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;}

/* ---------- 7 組織制度（圧縮版）：4段の名前だけ。説明は詳細ページ側に置く ---------- */
/* キャリアステップの4段。
   2026-08-07：一度「段の高さを変えて階段にする」を試したが、変だという判断で元に戻した。
   代わりに、出現のしかたで段であることを見せる（下の @keyframes ladderPanel）*/
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#2C2C2C;}
.ladder>div{position:relative;display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(150px,17vw,215px);color:var(--ink);
  padding:clamp(1.6rem,3.2vw,2.4rem) clamp(2.6rem,4.4vw,3.4rem) clamp(1.6rem,3.2vw,2.4rem) clamp(1.2rem,2.4vw,1.8rem);}
.ladder>div:nth-child(1){background:var(--teal);}
.ladder>div:nth-child(2){background:var(--yellow);}
.ladder>div:nth-child(3){background:var(--lime);}
.ladder>div:nth-child(4){background:var(--pink);}
.ladder .st{font-family:var(--os);font-weight:600;font-size:1.04rem;letter-spacing:.2em;opacity:.62;}
.ladder h3{font-weight:900;font-size:clamp(1.3rem,2.8vw,1.85rem);line-height:1.4;margin-top:.6rem;}
/* 矢印は次のブロックを指すので、右端の中央に置く（左下に置くと行き場のない記号に見える） */
.ladder .arw{position:absolute;right:clamp(.7rem,1.4vw,1.1rem);top:50%;transform:translateY(-50%);
  font-family:var(--os);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1;opacity:.45;}
.ladder>div:last-child .arw{display:none;}

/* ---- 色の面が左から開いて、文字が少し遅れて上がる ----
   2026-08-07：跳ねる動き（下から出て行き過ぎる）を一度入れたが、
   **サイト内の他の動きと種類が違う**ため、比較のうえでこの形にした。
   すでに 写真 .wipe が clip-path で左から開き、帯 .band が中央から開き、
   文字 .up が下からフェードして上がる。B案はその2つを組み合わせただけなので、
   ここだけ新しい動きが増えない。順番（面が開く → 中の文字）も帯と同じ。
   速度も既存に寄せてある（写真1.05秒／帯0.9秒 → 面0.8秒）。イージングも帯と同じもの。

   段ごとの遅れは --d に持たせ、中の文字はそこからの相対で指定する。
   固定値で書くと4段目の文字が1段目と同時に出てしまう。

   .ladder .ex（クラス3つ）は共通の .ex.in（クラス2つ）より詳細度が高いので、
   記述順に関係なくこちらが勝つ */
@keyframes ladderPanel{
  0%  {clip-path:inset(0 100% 0 0);}
  100%{clip-path:inset(0 0 0 0);}
}
@keyframes ladderText{
  0%  {opacity:0; transform:translateY(16px);}
  100%{opacity:1; transform:translateY(0);}
}
.ladder .ex{opacity:1;clip-path:inset(0 100% 0 0);}
.ladder .ex .st,.ladder .ex h3,.ladder .ex .arw{opacity:0;}
.ladder .ex.in{animation:ladderPanel .8s cubic-bezier(.65,0,.2,1) forwards;}
.ladder .ex.in .st,.ladder .ex.in h3,.ladder .ex.in .arw{
  animation:ladderText .5s cubic-bezier(.2,.7,.2,1) forwards;}
.ladder .ex.in:nth-child(1){--d:0s;}
.ladder .ex.in:nth-child(2){--d:.09s;}
.ladder .ex.in:nth-child(3){--d:.18s;}
.ladder .ex.in:nth-child(4){--d:.27s;}
.ladder .ex.in    {animation-delay:var(--d);}
.ladder .ex.in .st {animation-delay:calc(var(--d) + .3s);}
.ladder .ex.in h3  {animation-delay:calc(var(--d) + .37s);}
.ladder .ex.in .arw{animation-delay:calc(var(--d) + .46s);}

@media(max-width:820px){
  .ladder{grid-template-columns:repeat(2,1fr);}
  .ladder>div:nth-child(2) .arw{display:none;}   /* 2列のとき、行末の矢印は次を指さない */
}
@media(max-width:520px){
  .ladder{grid-template-columns:1fr;}
  .ladder>div{min-height:0;padding-right:clamp(1.2rem,2.4vw,1.8rem);}
  .ladder .arw{display:none;}
}
.rule-list{max-width:900px;margin:clamp(2.4rem,5vw,3.6rem) auto 0;}
.rule-list li{list-style:none;display:flex;gap:.9rem;align-items:flex-start;
  font-weight:700;font-size:clamp(1.16rem,2.35vw,1.42rem);line-height:1.75;
  padding:1.2rem 0;border-top:1px solid #2C2C2C;}
.rule-list li:last-child{border-bottom:1px solid #2C2C2C;}
.rule-list li::before{content:"○";flex:0 0 auto;font-family:var(--os);font-weight:700;
  color:var(--lime);opacity:.8;}
.avg{margin-top:clamp(2rem,4vw,3rem);font-weight:900;line-height:1.6;
  font-size:clamp(1.3rem,3.2vw,2.1rem);text-align:center;}
.avg b{color:var(--yellow);}

/* ---------- 8 社員インタビュー：カードにビフォー→アフターを載せる ---------- */
.mcard .ba{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid #333;}
.mcard .ba .was{font-size:clamp(1.14rem,2vw,1.2rem);line-height:1.7;color:#C6C6C6;text-wrap:balance;}
.mcard .ba .now{margin-top:.7rem;font-weight:900;line-height:1.7;text-wrap:balance;
  font-size:clamp(1.2rem,2.15vw,1.3rem);color:var(--yellow);}
.mcard .ba .now::before{content:"→ ";font-family:var(--os);font-weight:700;}

/* ---------- 9 Q&A：不安を潰す節。質問を大きく、答えを読ませる ---------- */
.qa{max-width:900px;margin:0 auto;}
.qa-item{border-top:1px solid #2C2C2C;padding:clamp(2rem,4vw,3rem) 0;}
.qa-item:last-child{border-bottom:1px solid #2C2C2C;}
.qa .q{display:flex;gap:clamp(.8rem,1.8vw,1.2rem);align-items:baseline;}
.qa .q .n{font-family:var(--ar);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1;color:var(--teal);}
.qa .q h3{font-weight:900;letter-spacing:-.01em;line-height:1.55;
  font-size:clamp(1.24rem,2.9vw,1.85rem);text-wrap:balance;}
.qa .a{margin-top:clamp(1.4rem,2.8vw,2rem);padding-left:clamp(2.1rem,4.4vw,3.1rem);}
.qa .a p{font-size:clamp(1.14rem,2.25vw,1.36rem);line-height:2.05;color:#D0D0D0;}
.qa .a p+p{margin-top:1.2rem;}
.qa .a b{color:#fff;}
.qa .a .said{margin-top:1.4rem;padding:1.3rem 1.5rem;background:var(--ink);
  border-left:5px solid var(--yellow);font-weight:900;line-height:1.7;
  font-size:clamp(1.14rem,2.4vw,1.44rem);}
.qa .a .said .k{color:var(--yellow);}
.qa .a .fin{margin-top:1.4rem;font-weight:900;color:var(--lime);line-height:1.7;
  font-size:clamp(1.16rem,2.5vw,1.5rem);}
@media(max-width:600px){.qa .a{padding-left:0;}}

/* ---------- 主張を支える2枚。写真とタイポで別々の見せ方にする ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#2C2C2C;}
.duo>div{background:var(--panel);display:flex;flex-direction:column;}
.duo .top{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#12181A;}
.duo .in{padding:clamp(1.9rem,3.4vw,2.9rem);}
.duo .lab{font-family:var(--os);font-weight:600;font-size:1rem;letter-spacing:.2em;margin-bottom:.9rem;}
.duo h3{font-weight:900;font-size:clamp(1.25rem,2.6vw,1.78rem);line-height:1.55;margin-bottom:1.1rem;}
.duo p.bd{font-size:clamp(1.12rem,2.15vw,1.32rem);line-height:2.05;color:#D0D0D0;}
/* 「基準だけが効く」ことを、消した項目と残した項目で見せる */
.crit{aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.6rem,3vw,2.8rem);background:var(--bg);}
.crit .q{font-size:clamp(1.06rem,2vw,1.22rem);color:#D0D0D0;margin-bottom:1.2rem;}
.crit .x{display:flex;align-items:center;gap:.85rem;padding:.55rem 0;
  font-weight:700;font-size:clamp(1.02rem,2vw,1.28rem);color:#9A9A9A;}
.crit .x i{font-style:normal;font-family:var(--os);font-size:.86em;color:#7E7E7E;}
.crit .x s{text-decoration-thickness:2px;}
.crit .o{display:inline-flex;align-items:center;gap:.85rem;margin-top:1.1rem;
  padding:.85rem 1.1rem;background:var(--lime);color:var(--ink);
  font-weight:900;font-size:clamp(1.05rem,2.1vw,1.32rem);}
@media(max-width:820px){.duo{grid-template-columns:1fr;}}

/* ---------- 階段の締め。ここは結論なので、地の文のままだと空間に負ける ---------- */
.closing{padding:clamp(2.8rem,6vw,4.8rem) 5vw clamp(3.8rem,8vw,6.5rem);}
.closing-in{max-width:880px;margin:0 auto;}
.closing .lead{font-size:clamp(1.14rem,2.25vw,1.36rem);line-height:2.05;color:#B8B8B8;}
.closing .big{margin-top:1.5rem;font-weight:900;line-height:1.5;letter-spacing:-.02em;
  font-size:clamp(1.6rem,4.2vw,2.85rem);}
.closing .big em{font-style:normal;background:var(--lime);color:var(--ink);padding:0 .12em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.closing .bd{margin-top:1.5rem;font-size:clamp(1.14rem,2.25vw,1.36rem);line-height:2.05;color:#C6C6C6;}


/* ---------- 実績の並び ---------- */
.real{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#2C2C2C;margin-top:clamp(2rem,4vw,3rem);}
.real div{background:var(--bg);padding:1.6rem clamp(1.2rem,2.4vw,1.8rem);
  font-size:clamp(1.12rem,2.15vw,1.32rem);line-height:1.9;}
.real b{color:var(--yellow);font-weight:900;}
@media(max-width:660px){.real{grid-template-columns:1fr;}}

/* ---------- 合う人・合わない人 ---------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#2C2C2C;}
.fit>div{padding:clamp(2.2rem,5vw,4rem) clamp(1.6rem,4vw,3.2rem);}
.fit .no{background:var(--panel);}
.fit .yes{background:var(--teal);color:var(--ink);}
.fit .t{font-family:var(--jp);font-weight:700;font-size:1rem;letter-spacing:.1em;margin-bottom:1.4rem;}
.fit .no .t{color:var(--gray);}
.fit li{list-style:none;font-weight:700;font-size:clamp(1rem,2vw,1.18rem);line-height:1.7;
  padding:1rem 0;border-top:1px solid rgba(255,255,255,.16);}
.fit li:last-child{border-bottom:1px solid rgba(255,255,255,.16);}
@media(max-width:760px){.fit{grid-template-columns:1fr;}}

/* ---------- 代表の長い話 ---------- */
.story .wrap{max-width:760px;}
.story .body{max-width:none;}
.story .body+.body{margin-top:1.5rem;}
.story .lead-q{font-weight:900;font-size:clamp(1.2rem,3vw,1.9rem);line-height:1.7;margin:2.4rem 0;
  padding-left:1.2rem;border-left:5px solid var(--yellow);}
.story .mark{margin-top:2.6rem;font-weight:900;font-size:clamp(1.1rem,2.6vw,1.55rem);line-height:1.75;color:var(--lime);}

/* ---------- Honestly ---------- */
.honest{background:var(--pink);}
.honest .enh,.honest .jph{color:var(--ink);}
.hgrid.four{grid-template-columns:repeat(2,1fr);}
.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:2.4rem;background:rgba(0,0,0,.2);}
.hitem{background:var(--ink);padding:2.1rem clamp(1.5rem,2.4vw,1.9rem);}
.hitem .n{font-family:var(--ar);font-size:2.4rem;color:var(--pink);line-height:1;margin-bottom:.7rem;}
.hitem p{font-weight:700;font-size:clamp(1.12rem,2.15vw,1.32rem);line-height:1.8;}
.h-fin{margin-top:2.4rem;font-weight:900;color:var(--ink);font-size:clamp(1.12rem,2.9vw,1.8rem);line-height:1.7;}
@media(max-width:820px){.hgrid{grid-template-columns:1fr;}}

/* 「」つきのセリフを立てる。地の文の断定より、こちらのほうが刺さる */
.saying{margin:2.8rem 0 0;font-weight:900;line-height:1.62;
  font-size:clamp(1.28rem,3.1vw,2.05rem);letter-spacing:-.01em;}
.saying .k{color:var(--yellow);}
.saying-a{margin:.9rem 0 2.8rem;font-size:clamp(1.08rem,2.05vw,1.26rem);line-height:1.9;color:#CBCBCB;}
.saying-a b{color:#fff;font-weight:700;}
.honest .voice{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(0,0,0,.2);margin-top:1.6rem;}
.honest .voice p{background:var(--ink);padding:1.9rem clamp(1.5rem,2.4vw,1.9rem);font-weight:900;
  font-size:clamp(1.16rem,2.4vw,1.48rem);line-height:1.7;}
.honest .voice .k{color:var(--yellow);}
@media(max-width:760px){.honest .voice{grid-template-columns:1fr;}}

/* 代表の話はページで一番重い内容。地の色を変えて「章」として独立させる */
.founder{background:#0E1414;}
.founder .ans{background:transparent;}
.founder .story{background:transparent;padding-top:clamp(1rem,2vw,1.6rem);}
.founder .story .wrap{max-width:800px;}
.founder .story .body{font-size:clamp(1.2rem,2.4vw,1.46rem);line-height:2.1;color:#D8D8D8;}
.founder .story .body b{color:#fff;}
.founder .band{background:var(--lime);}
.founder-mark{max-width:800px;margin:0 auto;padding:0 5vw clamp(3rem,6vw,5rem);}
.founder-mark p{border-top:1px solid #26302F;padding-top:clamp(1.6rem,3vw,2.4rem);
  font-weight:900;line-height:1.7;font-size:clamp(1.2rem,2.9vw,1.75rem);color:var(--lime);}

/* 向き・不向きは、○✕を大きく出して一目で分かるようにする */
.fit li{list-style:none;display:flex;gap:.9rem;align-items:flex-start;
  font-weight:700;font-size:clamp(1.16rem,2.35vw,1.42rem);line-height:1.75;
  padding:1.25rem 0;border-top:1px solid rgba(255,255,255,.18);}
.fit li:last-child{border-bottom:1px solid rgba(255,255,255,.18);}
.fit li::before{content:"✕";flex:0 0 auto;font-family:var(--os);font-weight:700;
  font-size:1.05em;line-height:1.6;opacity:.5;}
.fit .yes li{border-color:rgba(0,0,0,.22);}
.fit .yes li::before{content:"○";opacity:.62;}
.fit .no{background:#131313;}
.fit .no li{color:#C6C6C6;}
.fit .no .t{color:#9C9C9C;}
.fit .yes .t{color:rgba(0,0,0,.62);}
.fit .h{font-weight:900;font-size:clamp(1.3rem,3vw,1.95rem);line-height:1.45;margin-bottom:1.4rem;}

/* ---------- CTA ---------- */
.cta{background:var(--ink);text-align:center;padding:clamp(80px,11vw,150px) 5vw;}
.cta .script{font-family:var(--ks);color:var(--yellow);font-size:clamp(2.2rem,7vw,4.6rem);
  line-height:1.1;margin-bottom:1rem;}
.cta h2{font-weight:900;font-size:clamp(1.5rem,4.6vw,3rem);line-height:1.5;margin-bottom:1.6rem;}
.cta p{color:#CBCBCB;font-size:clamp(1.12rem,2.15vw,1.32rem);line-height:2.05;max-width:52ch;margin:0 auto;}
.btns{margin-top:2.8rem;display:flex;gap:0;justify-content:center;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:1.3rem 2.8rem;font-weight:900;
  font-size:clamp(1.1rem,2.1vw,1.28rem);text-decoration:none;transition:filter .3s,transform .3s;}
.btn.p{background:var(--yellow);color:var(--ink);}
.btn.s{background:var(--teal);color:#fff;}
.btn:hover{filter:brightness(1.1);transform:translateY(-3px);}
.cta .fine{margin-top:1.7rem;font-size:1.06rem;color:#ABABAB;}
footer{background:var(--bg);color:#9E9E9E;padding:2.2rem 5vw;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:1.02rem;}


/* 写真を入れた枠（プレースホルダーの斜線とラベルを消す） */
.ph.img{background-size:cover;background-position:center 32%;background-repeat:no-repeat;}
.ph.img::before,.ph.img::after{display:none !important;}

/* ============ 動き（参考：アキテム） ============ */
/* 1. ローディング：4色のブロックが時間差で上に引ける */
.loading{position:fixed;inset:0;z-index:9999;display:flex;pointer-events:none;}
.loading div{flex:1;transform-origin:top center;}
.loading div:nth-child(1){background:var(--teal);}
.loading div:nth-child(2){background:var(--lime);}
.loading div:nth-child(3){background:var(--yellow);}
.loading div:nth-child(4){background:var(--pink);}
.loading.go div{animation-name:BlockAnime;animation-timing-function:cubic-bezier(.7,0,.3,1);
  animation-fill-mode:forwards;animation-duration:.85s;}
.loading.go div:nth-child(2){animation-delay:.1s;}
.loading.go div:nth-child(3){animation-delay:.2s;}
.loading.go div:nth-child(4){animation-delay:.3s;}
.loading.done{display:none;}
@keyframes BlockAnime{0%{transform:scaleY(1);}100%{transform:scaleY(0);}}

/* 2. FVの写真はゆっくり寄る（アキテムは動画。写真でその代役をする） */
.fv-bg .ph{animation:kenburns 1.6s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes kenburns{0%{opacity:0;transform:translateY(10px);}100%{opacity:1;transform:none;}}
.fv .script,.fv h1,.fv .sub,.fv .badge{opacity:0;transform:translateY(24px);}
.fv.ready .script,.fv.ready h1,.fv.ready .sub,.fv.ready .badge{opacity:1;transform:none;
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);}
.fv.ready .script{transition-delay:.05s;}
.fv.ready h1{transition-delay:.22s;}
.fv.ready .sub{transition-delay:.4s;}
.fv.ready .badge{transition-delay:.52s;}

/* 3. 流れる帯（アキテムの infiniteslide） */
.marquee{overflow:hidden;white-space:nowrap;padding:.85rem 0;}
.marquee.y{background:var(--yellow);color:var(--ink);}
.marquee.t{background:var(--teal);color:var(--ink);}
.mq-in{display:inline-flex;animation:infiniteslide 34s linear infinite;}
.mq-in.rev{animation-direction:reverse;}
.mq-in span{font-family:var(--jp);font-weight:900;font-size:clamp(1.1rem,2.4vw,1.7rem);letter-spacing:.02em;
  padding-right:2.6rem;display:inline-block;}
.mq-in span i{font-style:normal;opacity:.45;}
@keyframes infiniteslide{0%{transform:translate3d(0,0,0);}100%{transform:translate3d(-50%,0,0);}}

/* 4. expansion：溜めてから一気に出る（アキテムの出方） */
.ex{opacity:0;}
.ex.in{animation:expansion 1.15s cubic-bezier(.2,.9,.3,1) forwards;}
.ex.in:nth-child(2){animation-delay:.08s;}
.ex.in:nth-child(3){animation-delay:.16s;}
.ex.in:nth-child(4){animation-delay:.24s;}
.ex.in:nth-child(5){animation-delay:.32s;}
.ex.in:nth-child(6){animation-delay:.4s;}
@keyframes expansion{
  0%{transform:scale(.5);opacity:0;}
  78%{transform:scale(.5);opacity:0;}
  100%{transform:scale(1);opacity:1;}
}

/* 5. 色面・写真ブロックは横から開く（アキテムのマスク演出） */
.wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s cubic-bezier(.65,0,.2,1);}
.wipe.rev{clip-path:inset(0 0 0 100%);}
.wipe.in{clip-path:inset(0 0 0 0);}
/* 見出し帯は中央から開く */
.band{clip-path:inset(0 50% 0 50%);transition:clip-path .9s cubic-bezier(.65,0,.2,1);}
.band.in{clip-path:inset(0 0 0 0);}
@media (prefers-reduced-motion:reduce){
  .wipe,.band,.ex,.up{clip-path:none !important;opacity:1 !important;transform:none !important;animation:none !important;}
  .fv-bg .ph{animation:none;}
}