/* scene.css: 場面別ページ専用の部品。スマホ1列が主、広い画面でも幅を絞って中央に置く */
.scene-wrap{width:min(760px,calc(100% - 28px));margin:0 auto;padding:22px 0 56px}
.scene-hero{background:linear-gradient(180deg,#fff 0%,#eef5fb 100%);border-bottom:1px solid var(--line)}
.scene-hero .scene-wrap{padding:28px 0 26px}
.scene-hero h1{font-size:clamp(1.55rem,5.4vw,2.2rem);word-break:auto-phrase;margin:0 0 12px}
.scene-lead{color:var(--text);font-size:1.02rem;margin:0 0 14px}
.scene-meta{margin:0 0 16px;color:var(--muted);font-size:.86rem}
.crumb{margin:0 0 10px;font-size:.84rem;color:var(--muted)}
.crumb a{color:var(--primary-dark)}
.ans-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0 6px}
.ans{padding:12px 14px;border:1px solid var(--line);border-left:5px solid var(--primary);border-radius:8px;background:var(--surface)}
.ans b{display:block;margin-bottom:4px;font-size:.8rem;color:var(--primary-dark);letter-spacing:.02em}
.ans p{margin:0;color:var(--text);font-size:.95rem;line-height:1.7}
.ans.ng{border-left-color:#c0504d}.ans.ng b{color:#a43b38}
.ans.rec{border-left-color:#c9962b}.ans.rec b{color:#8a6414}
.ans.con{border-left-color:#3f8f6b}.ans.con b{color:#2c6e50}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.btn-row .button{flex:1 1 220px;text-align:center}
.sec{margin-top:18px;padding:20px 18px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.sec h2{font-size:clamp(1.2rem,4.4vw,1.5rem);margin:0 0 10px}
.sec p{color:var(--muted)}
.sec .tag{display:inline-block;margin-bottom:6px;color:var(--primary);font-size:.76rem;font-weight:700}
.stp{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px;counter-reset:s}
.stp li{position:relative;padding:12px 12px 12px 52px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft);counter-increment:s;line-height:1.7}
.stp li::before{content:counter(s);position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;display:grid;place-items:center}
.stp li strong{display:block;color:var(--text)}
.stp li span{color:var(--muted);font-size:.95rem}
.say{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.say>div{padding:12px 14px;border-radius:8px;border:1px solid var(--line)}
.say .ok{background:#f1f8f4;border-color:#bcdccb}.say .bad{background:#fbf2f1;border-color:#e6c3c1}
.say h3{margin:0 0 6px;font-size:.95rem}
.say ul{margin:0;padding-left:1.15em}.say li{margin-bottom:6px;line-height:1.7}
.tpl{margin:12px 0;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px;background:var(--surface);line-height:1.95;overflow-wrap:anywhere;font-size:.95rem}
.tpl p{margin:0;color:var(--text)}
.cards{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.cd{padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft)}
.cd strong{display:block;margin-bottom:4px;color:var(--primary-dark)}
.cd p{margin:0;font-size:.95rem;color:var(--text)}
.ladder{display:grid;gap:8px;margin-top:12px}
.ladder .lv{padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.ladder .lv:nth-child(2){margin-left:10px}.ladder .lv:nth-child(3){margin-left:20px}.ladder .lv:nth-child(4){margin-left:30px}
.ladder b{color:var(--primary-dark)}
.faq details{border:1px solid var(--line);border-radius:8px;background:var(--surface);margin-top:8px;padding:0 14px}
.faq summary{cursor:pointer;padding:12px 0;font-weight:700;line-height:1.5}
.faq details p{margin:0 0 12px;color:var(--text)}
.src-box{margin-top:18px;padding:16px;border:1px solid #b8d3e3;border-radius:8px;background:#f3f9fc}
.src-box h2{font-size:1.1rem;margin:0 0 8px}
.src-box ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.src-box li{padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:6px;font-size:.92rem;line-height:1.6}
.src-box li a{color:var(--primary-dark);font-weight:700;word-break:break-all}
.src-box p{margin:8px 0 0;font-size:.88rem;color:var(--muted)}
.edit-box{margin-top:14px;padding:10px 14px;border-radius:8px;background:var(--surface-soft);font-size:.88rem;color:var(--muted)}
.edit-box p{margin:0}
.sc-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.sc-card{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);text-decoration:none;box-shadow:0 6px 16px rgba(27,39,51,.04)}
.sc-card:hover{border-color:var(--accent)}
.sc-card span{display:block;color:var(--primary);font-size:.76rem;font-weight:700}
.sc-card strong{display:block;margin:2px 0 4px;font-size:1.02rem;line-height:1.45;color:var(--text)}
.sc-card em{display:block;color:var(--muted);font-style:normal;font-size:.9rem;line-height:1.6}
.sc-card i{display:inline-block;margin-top:8px;padding:6px 12px;border-radius:6px;background:var(--primary);color:#fff;font-style:normal;font-weight:700;font-size:.86rem}
@media (min-width:640px){
  .ans-grid,.say,.cards,.sc-grid{grid-template-columns:1fr 1fr}
  .scene-wrap{padding-top:30px}
}
@media (max-width:560px){
  .site-header{position:static;gap:10px}
  .site-nav{display:flex;flex-wrap:wrap;gap:6px}
  .site-nav a{padding:4px 10px;font-size:.86rem}
  .ladder .lv:nth-child(n){margin-left:0}
}