/* 2026-11-03 情報デザインの見本（jota「色もキャラクターも、フォントもフォントウェイトもアニメーションもFIX」）
   変えるのは「どこに置くか・いくつ出すか・余白」だけ。新しい色・字・動きは足さない */

/* ---- 章ごとに地の色をそろえる（今ある白とベージュだけ） ---- */
html.joho #clients{background:#fff}
html.joho #problem{background:var(--paper)}
html.joho #talk,html.joho #positioning.pos{background:#fff}
html.joho #positioning .pos-glow{display:none}
html.joho #flow,html.joho #split,html.joho #stack,html.joho #report{background:var(--paper)!important}
html.joho #cases,html.joho #contact{background:#fff!important}

/* ---- 余白：章の間は広く、章の中は狭く ---- */
html.joho section.jsub{padding-top:24px!important}
html.joho section.jch{padding-top:140px!important}
html.joho section.jmid{padding-bottom:40px!important}

/* ---- 章の中の見出し：一段小さく（26px は今のサイトにある大きさ）・キャラクターも少し小さく（jota 11/3） ---- */
html.joho .jsub .pos-chara{height:56px}
@media (max-width:860px){html.joho .jsub .pos-chara{height:44px}}
html.joho .jsub .pos-head h2{font-size:26px}
html.joho .jsub .pos-head{margin-bottom:8px}

/* ---- 切り替えは1か所だけ（聞いて、終わりにしない の頭）。中身はそのまま全部いっしょに切り替わる ---- */
html.joho #clients .bigsw,html.joho #split .bigsw,html.joho #report .bigsw,html.joho #cases .bigsw{display:none}

/* ---- 導入・試用実績：切り替えをやめて両方を並べる ---- */
html.joho #clients .dual{grid-template-columns:1fr 1fr;gap:16px}
html.joho #clients .dual>.side{grid-area:auto}
html.joho #clients .dual>.side.mk{clip-path:none!important}
@media (max-width:900px){html.joho #clients .dual{grid-template-columns:1fr}}

/* ---- 黒い面は本物の画面だけ。課題（3つの壁・作業時間）と活用領域は白いカード（線なし） ---- */
html.joho #problem .orgs .card{background:#fff;border-color:transparent;box-shadow:none}
html.joho #problem .wall{background:#fff;box-shadow:none;color:var(--g900)}
html.joho #problem .walls.big .wbig{color:var(--g900)}
html.joho #problem .walls.big .wall:nth-child(1) .wbig{color:var(--coral)}
html.joho #problem .walls.big .wsm{color:var(--g600)}
html.joho #problem .ttime{background:#fff;color:var(--g800)}
html.joho #problem .ttime .font-title{color:var(--g900)}
html.joho #problem .tb .tl{color:var(--g900)}
html.joho #problem .tr2 .tg,html.joho #problem .tr2 small{color:var(--g500)}
html.joho #problem .tr2.old i{background:var(--coral)}
html.joho #problem .tr2.new i{background:var(--p600)}
html.joho #problem .tr2.old b{color:var(--coral)}
html.joho #problem .tr2.new b{color:var(--p600)}

html.joho #split .dual>.side,html.joho #split .dual>.side.hr,html.joho #split .dual>.side.mk{background:#fff;border-color:transparent;color:var(--g800)}
html.joho #split .side .who{color:var(--g500)}
html.joho #split .side.hr h3{color:var(--blue)}
html.joho #split .side.mk h3{color:var(--coral)}
html.joho #split .side.hr .chips span{background:var(--blue50);border-color:transparent;color:var(--blue)}
html.joho #split .side.mk .chips span{background:var(--coral50);border-color:transparent;color:var(--coral)}
html.joho #split .ret{color:var(--g900)}
html.joho #split .logn{color:var(--p600)}

/* ---- 飾りの切り絵：図や数字の横から外す（章の間に置くものは JS で移す） ---- */
html.joho #split>.motif,html.joho #report>.motif{display:none!important}
html.joho .art-beat.found{margin:8px 7% -40px auto}
html.joho .art-beat.layers{margin:56px auto -60px}

/* ---- 課題の作業時間：POLLS の字を緑にそろえて重く（jota 11/3） ---- */
html.joho #problem .tr2.new .tg{color:var(--p600);font-family:"M PLUS 1",sans-serif;font-weight:800}
html.joho #problem .orgs .card .jhl{color:var(--coral)}

/* ---- 幅をそろえる：細いものを一番広いもの（本文の枠いっぱい）に合わせる（jota 11/3） ---- */
html.joho #problem .orgs,html.joho #problem .walls,html.joho #problem .ttime,
html.joho #split .dual,html.joho #split .ctl,
html.joho #report #rtabs,html.joho #report .dual,html.joho #report .gate,
html.joho #cases .dual,html.joho #clients .dual{max-width:none}
@media (min-width:861px){html.joho #cases .side{grid-template-columns:repeat(3,1fr)}}