/* ===== 通信教材の特徴マップ ===== */
.km2{--ac:#0f766e;margin:24px 0;scroll-margin-top:80px}

/* 幼児・小学生タブ */
.km2-tabs{display:flex;border-bottom:1px solid #ddd;margin-bottom:12px}
.km2-tabs button{flex:1;background:none;border:0;border-bottom:3px solid transparent;padding:10px 0;font-size:15px;color:#888;cursor:pointer;font-family:inherit}
.km2-tabs button.on{color:var(--ac);border-bottom-color:var(--ac);font-weight:700}

/* 目的ボタン */
.km2-purpose{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px}
.km2-purpose span{font-size:12px;color:#666}
.km2 .km2-chip{font-size:13px;padding:4px 12px;border:1px solid #ccc;border-radius:999px;background:#fff;color:#444;cursor:pointer;font-family:inherit;box-shadow:none}
.km2 .km2-chip.on{background:var(--ac)!important;border-color:var(--ac)!important;color:#fff!important}

/* マップ */
.km2-board{position:relative;width:100%;max-width:640px;margin:0 auto;aspect-ratio:2/1;border:1px solid #e5e5e5;border-radius:10px;background:#fafafa;overflow:hidden}
.km2-grid{position:absolute;left:0;right:0;height:0;border-top:1px dashed #ddd}
.km2-grid span{position:absolute;right:6px;top:-8px;font-size:10px;color:#aaa;background:#fafafa;padding:0 3px;line-height:16px}
.km2-grid.g3{top:22%}
.km2-grid.g2{top:44%}
.km2-grid.g1{top:66%}
.km2-vline{position:absolute;left:50%;top:0;bottom:16%;width:1px;background:#e8e8e8}
.km2-ax-y{position:absolute;left:8px;top:6px;font-size:12px;font-weight:700;color:#555;line-height:1.3}
.km2-ax-y::before{content:"↑ "}
.km2-ax-y small{display:block;font-size:10px;font-weight:400;color:#888}
.km2-ax-l,.km2-ax-r{position:absolute;bottom:calc(16% + 4px);font-size:12px;font-weight:700;color:#555}
.km2-ax-l{left:8px}
.km2-ax-r{right:8px}
.km2-base{position:absolute;left:0;right:0;bottom:0;height:16%;display:flex;align-items:center;justify-content:center;gap:4px;background:#fef3c7;border-top:2px solid #f59e0b;font-size:13px;font-weight:700;color:#92400e}
.km2-base small{font-size:11px;font-weight:400}

/* 教材の点 */
.km2-pt{position:absolute;width:14px;height:14px;transform:translate(-50%,-50%);text-decoration:none;color:#333;z-index:2;transition:opacity .3s}
.km2-pt .mk{display:block;width:14px;height:14px;border-radius:50%;background:var(--ac);border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.km2-pt .lb{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:12px;white-space:nowrap;background:rgba(255,255,255,.9);padding:0 3px;border-radius:3px;line-height:1.4}
.km2-pt.el .lb{left:0;transform:none}
.km2-pt.er .lb{left:auto;right:0;transform:none}
.km2-pt:hover .lb{color:var(--ac);font-weight:700}
.km2-pt.dim{opacity:.15}
.km2-hint{font-size:12px;color:#888;text-align:center;margin:8px 0 20px}

/* 教材カード */
.km2-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.km2[data-tab=y] .km2-card:not(.y),
.km2[data-tab=s] .km2-card:not(.s){display:none}
.km2-card{position:relative;border:1px solid #e5e5e5;border-radius:10px;padding:14px;background:#fff;transition:opacity .3s,box-shadow .3s;scroll-margin-top:80px}
.km2-card.dim{opacity:.35}
.km2-card.flash{animation:km2flash 1.6s}
@keyframes km2flash{0%,60%{box-shadow:0 0 0 3px var(--ac)}100%{box-shadow:0 0 0 0 transparent}}
.km2-card-hd{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.km2-card-hd > div{min-width:0}
.km2-th{width:40px;height:40px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.km2-ag{display:inline-block;font-size:11px;color:#777;background:#f4f4f4;border-radius:3px;padding:0 6px;margin-top:2px}

/* 内容・サポートの目盛り */
.km2-meter{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:center;margin:4px 0 8px;font-size:12px}
.km2-meter dt{color:#888;margin:0}
.km2-meter dd{margin:0;display:flex;align-items:center;gap:8px;color:#333}
.km2-scale{display:inline-flex;gap:2px}
.km2-scale i{display:block;width:14px;height:6px;border-radius:3px;background:#e5e5e5}
.km2-scale i.on{background:var(--ac)}
.km2-dots{display:inline-flex;gap:3px}
.km2-dots i{display:block;width:8px;height:8px;border-radius:50%;background:#e5e5e5}
.km2-dots i.on{background:var(--ac)}

.km2-desc{font-size:14px;margin:6px 0}
.km2-yaku,.km2-get{font-size:13px;margin:6px 0;background:#f8f8f8;border-radius:6px;padding:6px 10px}
.km2-yaku b,.km2-get b{display:block;font-size:11px;color:var(--ac);font-weight:700}
.km2-btn{display:block;text-align:center;margin-top:10px;background:var(--ac);color:#fff;text-decoration:none;padding:9px 0;border-radius:6px;font-size:14px;font-weight:700}
.km2-btn:hover{opacity:.85;color:#fff}
.km2-pr{position:absolute;top:10px;right:10px;font-size:10px;color:#999;border:1px solid #ccc;border-radius:3px;padding:0 4px;line-height:1.5}
.km2 img[width="1"]{position:absolute;width:1px;height:1px;border:0}

/* 記事側の見出し・段落のスタイル（.matome h3 など）を打ち消す */
.km2 h3.km2-nm{font-size:17px;font-weight:700;line-height:1.4;text-indent:0;margin:0;padding:0 36px 0 0;border:0;background:none}
.km2 h3.km2-nm::before,.km2 h3.km2-nm::after{content:none}
.km2 .km2-card p{text-indent:0;padding-left:0;padding-right:0}
.km2 .km2-card p.km2-yaku,.km2 .km2-card p.km2-get{padding:6px 10px}
.km2 .km2-meter dt,.km2 .km2-meter dd{text-indent:0;padding:0;background:none;border:0}

@media (max-width:600px){
  .km2-board{aspect-ratio:4/3}
  .km2-ax-y small{display:none}
  .km2-base small{display:none}
  .km2-ax-l,.km2-ax-r{font-size:11px}
  .km2-pt .lb{font-size:11px}
}