/* 第2章 対策編 v2（v1 を基に、使わなくなった図の指定を削除し、冒頭の移動リンク等を追加） — style-b-v3.css（共通）と style-risks-v3.css（記事レイアウト・「詳しく」欄など）の後に読み込む */

/* 役割の色（文字ラベルと併用し、色だけで区別しない） */
:root{
  --role1:#e3b48f; --role1-bg:#fff0d7;
  --role2:#d99a86; --role2-bg:#fbeae1;
  --role3:#c9b48a; --role3-bg:#f6efdc;
  --role4:#a8b086; --role4-bg:#eef0e1;
}

.page-subtitle{margin:6px 0 0;font-size:clamp(18px,2vw,22px);line-height:1.6;font-weight:700;color:var(--clay)}
.page-meta a{color:var(--clay);text-underline-offset:3px}

/* 役割タグ（本文・図で共通） */
.role-chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:1px 10px 1px 4px;border-radius:999px;font-size:12.5px;font-weight:750;line-height:1.8;color:#4a3027;background:var(--paper);border:1px solid var(--line)}
.role-chip b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11.5px;color:#4a3027}
.r1 b{background:var(--role1)} .r2 b{background:var(--role2)} .r3 b{background:var(--role3)} .r4 b{background:var(--role4)}

/* 01 よくある対策と、守れる範囲 */
.cover-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 20px}
.cover-card{padding:16px 18px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.block .cover-card .cover-name{margin:0 0 8px;font-size:16.5px;font-weight:750;line-height:1.5}
.cover-card dl{margin:0;display:grid;gap:8px}
.cover-card dt{font-size:12.5px;font-weight:750;letter-spacing:.04em}
.cover-card dd{margin:2px 0 0;font-size:14.5px;line-height:1.8;color:#4d3d35}
.cover-card .can dt{color:#58613b}
.cover-card .cannot dt{color:#8a4a36}
.cover-card .cannot dd{padding:8px 10px;border-radius:8px;background:#fbf3ea}

/* 図1 4つの役割 */
.layers{margin:24px 0;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
.layer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.layer{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:12px;border-top:5px solid}
.layer.r1{background:var(--role1-bg);border-top-color:var(--role1)}
.layer.r2{background:var(--role2-bg);border-top-color:var(--role2)}
.layer.r3{background:var(--role3-bg);border-top-color:var(--role3)}
.layer.r4{background:var(--role4-bg);border-top-color:var(--role4)}
.block .layer .layer-tag{margin:0;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--clay)}
.block .layer .layer-name{margin:-6px 0 0;font-size:17px;font-weight:750;line-height:1.5;color:var(--ink)}
.block .layer .layer-goal{margin:0;font-size:14px;line-height:1.75;color:#4d3d35}
.layer-measures{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.layer-measures a{display:block;padding:5px 10px;border-radius:8px;background:var(--paper);font-size:13.5px;font-weight:700;line-height:1.55;color:var(--ink);text-decoration:none}
.layer-measures a:hover{text-decoration:underline;text-underline-offset:3px}
.layer-limit{margin-top:auto;padding-top:10px;border-top:1px dashed rgba(123,63,48,.25)}
.block .layer-limit p{margin:0;font-size:13.5px;line-height:1.75;color:var(--muted)}
.block .layer-limit .layer-limit-label{font-size:12px;font-weight:800;letter-spacing:.04em;color:#8a4a36}
.layers-note{margin:20px 0 0;padding:14px 18px;border-radius:10px;background:#fbeae1;border:1px solid #efcdbd}
.block .layers-note p{margin:0;font-size:15px;line-height:1.85;color:#4d3d35}
.block .layers-note strong{display:block;margin-bottom:2px;color:#6b3626}

/* 図2 2つの例で見る働き方 */
.cases{margin:24px 0;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.case{display:flex;flex-direction:column;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:#fffaf4}
.case-head{padding:14px 16px;background:#f6ebe0}
.block .case-head .case-label{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--clay)}
.block .case-head .case-title{margin:2px 0 0;font-size:16.5px;font-weight:750;line-height:1.5}
.block .case-head .case-cond{margin:4px 0 0;font-size:13.5px;line-height:1.7;color:var(--muted)}
.case-rows{flex:1;margin:0;padding:0;list-style:none}
.case-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:12px 16px;border-top:1px solid #f0e5db}
.case-row .role-chip{margin-top:2px}
.block .case-row p{margin:0;font-size:14.5px;line-height:1.8;color:#4d3d35}
.block .case-row p+p{margin-top:6px}
.effect{display:inline-block;margin-right:6px;padding:0 8px;border-radius:6px;font-size:12.5px;font-weight:800;line-height:1.75;white-space:nowrap}
.effect-yes{background:#e3ead0;color:#3f4a23}
.effect-no{background:#f3e0d6;color:#7a3a28}
.effect-part{background:#f6efdc;color:#5f4a20}
.case-foot{padding:10px 16px 12px;border-top:1px dashed #e2c9b6;background:#fbf3ea}
.block .case-foot p{margin:0;font-size:13.5px;line-height:1.75;color:#6b3626;font-weight:700}

/* 対策カード（style-risks-v3.css の .entry を拡張） */
.measure .entry-head{flex-wrap:wrap;row-gap:8px}
.measure .entry-head h3{flex:1 1 16em}
.measure .step{grid-template-columns:132px minmax(0,1fr)}
.step-limit dt::before{background:#b98b7c}
.step-limit dd{padding:10px 14px;margin:-6px 0;border-radius:8px;background:#fbf3ea}
.block .measure-links{margin:14px 0 0;font-size:14px;line-height:1.8;color:var(--muted)}
.measure-links a{color:var(--clay);text-underline-offset:3px}

/* 図3 Webサイトの対策と組織全体の対策 */
.boundary{margin:24px 0;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
.boundary-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr);gap:12px}
.bzone{padding:16px;border-radius:12px;min-width:0}
.bzone-web{background:var(--cream);border:2px solid #e3b48f}
.bzone-both{background:#fbeae1;border:2px dashed #d99a86}
.bzone-org{background:#f3efe9;border:1px dashed #cdbfb1}
.block .bzone .bzone-label{margin:0 0 4px;font-size:15.5px;font-weight:750;line-height:1.5}
.block .bzone .bzone-sub{margin:0 0 10px;font-size:13px;line-height:1.65;color:var(--muted)}
.bzone ul{margin:0;padding-left:1.15em;font-size:14px;line-height:1.75;color:#4d3d35}
.bzone li+li{margin-top:4px}

/* 04 副作用 */
.effects{margin:8px 0 20px;padding:0;list-style:none;display:grid;gap:8px}
.effects li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.effects .fx-change,.effects .fx-impact{padding:12px 16px;font-size:15px;line-height:1.75}
.effects .fx-change{font-weight:750;background:#fffaf4;border-right:1px solid var(--line)}
.effects .fx-impact{color:#4d3d35}
.effects small{display:block;font-size:12px;font-weight:750;letter-spacing:.04em;color:var(--muted)}
.change-flow{counter-reset:flow;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:16px 0 18px;padding:0;list-style:none}
.change-flow li{counter-increment:flow;position:relative;padding:14px 14px 16px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.change-flow li::before{content:counter(flow);display:grid;place-items:center;width:26px;height:26px;margin-bottom:6px;border-radius:50%;background:var(--clay);color:var(--paper);font-size:13px;font-weight:800}
.change-flow strong{display:block;font-size:15px;line-height:1.5}
.change-flow span{display:block;margin-top:4px;font-size:13.5px;line-height:1.7;color:var(--muted)}

/* 05 誰が何をする（表。スマートフォンではカード表示） */
.duty{margin:16px 0 12px;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.duty table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.7}
.duty caption{caption-side:top;padding:12px 14px;text-align:left;font-size:14px;line-height:1.75;color:var(--muted);border-bottom:1px solid var(--line)}
.duty th,.duty td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid #f0e5db}
.duty thead th{background:#f6ebe0;font-size:13px;font-weight:800;color:#4a3027}
.duty tbody th{width:20%;font-weight:750;background:#fffaf4}
.duty tbody th a{color:var(--ink);text-underline-offset:3px}
.duty tbody tr:last-child th,.duty tbody tr:last-child td{border-bottom:0}
.duty td{color:#4d3d35}
.duty td+td,.duty th+td{border-left:1px solid #f0e5db}

/* Tablet */
@media (max-width:960px){
  .layer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .change-flow{grid-template-columns:1fr;gap:8px}
  .change-flow li{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:12px;padding:12px 14px}
  .change-flow li::before{grid-row:1/3;margin:0}
  .change-flow span{margin-top:0}
  .boundary-grid{grid-template-columns:1fr}
  .duty table,.duty thead,.duty tbody,.duty tr,.duty th,.duty td{display:block;width:auto}
  .duty{border:0;background:none;border-radius:0;overflow:visible}
  .duty caption{padding:0 0 10px;border-bottom:0}
  .duty thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .duty tbody tr{margin-bottom:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
  .duty tbody th{width:auto;padding:10px 14px;font-size:15px;background:#f6ebe0}
  .duty td{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:10px;padding:8px 14px;border-left:0!important}
  .duty td::before{content:attr(data-label);font-size:12.5px;font-weight:800;color:var(--clay);line-height:1.8}
  .duty caption{display:block}
}

/* Phone */
@media (max-width:640px){
  .layers,.cases,.boundary{padding:18px 14px}
  .cover-grid-3,.case-grid,.layer-grid{grid-template-columns:1fr}
  .measure .step{grid-template-columns:1fr}
  .step-limit dd{margin:0}
  .effects li{grid-template-columns:1fr}
  .effects .fx-change{border-right:0;border-bottom:1px solid var(--line)}
  .case-row{grid-template-columns:1fr;gap:6px}
  .duty td{grid-template-columns:1fr;gap:0}
}

/* ページ末尾のトップへの案内 */
.block+.pager,.article>.pager{margin-top:8px}
.note.pager-top{margin:16px 0 0}
.note.pager-top a{color:var(--clay);text-underline-offset:3px}

/* v2: 冒頭の移動リンク（スマートフォンで目次・8つの対策へ早く進めるように） */
.jump{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.jump-label{margin:0;font-size:13px;font-weight:750;color:var(--clay)}
.jump ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.jump a{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid #cfaa96;background:var(--paper);font-size:14px;font-weight:700;color:var(--clay);text-decoration:none}
.jump a:hover{background:#fff4e8}

/* v2: 冒頭の範囲説明を1つの箱にまとめた版 */
.scope-compact{margin-top:16px;padding:16px 20px}
.scope-compact .scope-title{font-size:16px}
.scope-compact .scope-intro{margin-top:4px;font-size:14.5px;line-height:1.85;color:#4d3d35}
.scope-compact a{color:var(--clay);text-underline-offset:3px}

/* v2: 図1に第1章の段階との対応を表示 */
.block .layer .layer-stage{margin:-4px 0 0;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.6);font-size:12.5px;line-height:1.6;color:#4d3d35}

/* v2: 本文中の章へのリンク */
.block p > a{color:var(--clay);text-underline-offset:3px}

@media (max-width:640px){
  .jump{gap:6px}
  .jump a{min-height:44px;font-size:13.5px;padding:6px 12px}
  .scope-compact{padding:14px 16px}
}