/* ============================================================
   教材カードの 見た目（2026-10-19）
   ユーザー「保護者向けページと 教員向けページで、ツールカードの 記述に ついては 統一して。
   保護者向けの イラストが とても わかりやすいので、教員向けでも 実装して」
   → 教材集（/kyozai/）・教員向けページ（/sensei/）・保護者・子ども向けページ（/katei/）の **教材カードは ぜんぶ この 見た目**。
     中身は card.js（TOA_CARD.html）。ページの 中に カードの CSS を 書かない（ずれる もと）。
   ⚠️ 色は ページの 変数（--card など）を 使い、無い ページでは かっこの 中の 色（教材集と 同じ）。
   ============================================================ */
.m-card{background:var(--card,#fff);border:1px solid var(--border,#d9ebe6);border-radius:16px;padding:18px;
  display:flex;flex-direction:column;gap:9px;box-shadow:0 3px 14px rgba(12,74,110,.06);
  border-top:5px solid var(--amber,#93d6c9);transition:transform .16s,box-shadow .16s}
.m-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(12,74,110,.13)}
/* ══ 学年共通の 教材（grades に「共通」）は カードの 色を かえる（2026-10-19 ユーザー要望「共通教材は カードの 色を 変えて わかりやすく」）══
   うすい 黄（さし色）の 地と 金の 上の 帯。学年・教科で 絞った ときは 下に まとめ、見出し（.grid-sec）を 入れる。 */
.m-card.kyo{background:#fffcef;border-color:#f1e2b0;border-top-color:var(--gold,#edc85c)}
.m-top{display:flex;align-items:flex-start;gap:10px}
/* ⚠️ **カードの 高さを そろえる**（2026-09-21 ユーザー要望）。
   名前は **かならず 2行ぶん**の 高さを とる（1行の ものと 2行の ものが 混ざると わくが ずれる）。
   ⚠️ 3行に なる 名前は 切れる ので、**長い 名前を つけない**こと。 */
.m-name{font-size:16.5px;font-weight:800;line-height:1.35;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
/* ↑ 2026-10-27 全体点検：ことばの 途中で 折らない（前は「タイピング モンスタ｜ー」「都道府県クイズ（県｜庁所在地・地方）」「賞状・がんばり賞メー｜カー」）。
   スペース・かっこ・「・」の 前で 折る＝「都道府県クイズ｜（県庁所在地・地方）」。入りきらない ことばだけ どこでも 折る（overflow-wrap）。
   5つの はばで 38件 くらべ、2行に 入りきらず 切れる 名前は 前と 同じ（ふえない）ことを たしかめた */
.tag{font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:99px;white-space:nowrap}
/* 👀 ひらかれた 回数と 人気の 順位（2026-10-07）。右上の 札の 下に 小さく（おもての バッジには 入れない＝高さを そろえる）*/
.m-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.m-views{font-size:11.5px;font-weight:800;color:var(--sub,#517772);white-space:nowrap}
.m-rank{font-size:11px;font-weight:900;padding:1px 8px;border-radius:99px;background:var(--amber-light,#fdf3d6);color:#7a5614;white-space:nowrap}
.tag.self{background:var(--amber-light,#fdf3d6);color:#7a5614}
.tag.ext{background:var(--info-light,#dbeafe);color:var(--info,#2563eb)}
.tag.shisaku{background:#ffedd5;color:#9a3412}   /* 🧪 試作（shisaku）。⚠️ 黄（共通）・青（押せる）・むらさき（事務）と ぶつからない 色 */
/* 2026-10-27 から 試作・外部の 札は おもての 札の 行（.m-badges）。右上（.m-side）を 3段に すると その カードだけ 上が 24px 高く なり、
   となりの カードと「くわしく」の 線が ずれた（1024・1280 の 3列で タイピング モンスター）。文字 #9a3412／地 #ffedd5＝6.4・外部 #1d4ed8／#dbeafe＝5.6 */
.badge.shisaku{background:#ffedd5;color:#9a3412;border-color:#fdba74;white-space:nowrap}
.badge.ext{background:var(--info-light,#dbeafe);color:#1d4ed8;border-color:#bfdbfe;white-space:nowrap}
/* ⚠️ バッジは **1行だけ**（いまは 共通／学年・教科・保護者・子ども・🧪 試作・🔗 外部。2026-11-03 に 🔒 先生用 を やめた。時間と 端末は 2026-10-19 に 消した）。
   場面や 単元まで 出すと 折り返して 高さが ばらつく。それらは「くわしく」の 中へ。 */
.m-badges{display:flex;flex-wrap:wrap;gap:5px;min-height:24px}
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:8px;background:#f8fafc;color:var(--sub,#517772);
  border:1px solid #eef2f7}
.badge.grade{background:var(--ok-light,#dcfce7);color:var(--ok,#146c43);border-color:#bbf7d0}
.badge.scene{background:var(--primary-light,#dff1ee);color:var(--primary-dark,#0a4aa8);border-color:#c9e9f4}
/* 全学年共通の 札（2026-10-19 ユーザー「うすい 黄色の カード だけ だと なぜ 色が 違うのか わかりづらい。共通の タグを 黄色に して、黄色が 共通ツール である ことが わかる ように」）。
   カードの うすい 黄（.m-card.kyo）と 同じ 色の なかま。⚠️ **黄の 札は これ だけ**に する（ほかの 札に 黄を 使わない）。文字 #5c3f06／地 #f9e08b＝7.6 */
.badge.kyo{background:#f9e08b;color:#5c3f06;border-color:#e2bd45}
.m-desc{font-size:13px;color:var(--sub,#517772);line-height:1.7}
/* ⚠️⚠️ おもてに 出す 説明（2026-09-23 ユーザー要望）。**3行ぶんで 固定する。**
   行数を 決めないと カードの 高さが また ばらつく（そろえたのは 2026-09-21）。
   短い 説明の カードも min-height で 同じだけ 場所を とる。
   ⚠️ 長い 説明は ここで 切れる。切れた ぶんは「くわしく」に 全文 ある。 */
.m-lead{font-size:13px;color:var(--sub,#517772);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:4.95em}
.m-howto{background:#f8fafc;border-left:3px solid var(--info,#2563eb);border-radius:0 8px 8px 0;padding:9px 12px;
  font-size:12.5px;line-height:1.7}
.m-howto .t{font-weight:800;color:var(--info,#2563eb);display:block;font-size:11.5px;margin-bottom:2px}
/* ⚠️ **ここが この サイトの いちばんの 値打ち。**（2026-09-21）
   「使ってみて」は 26件 ぜんぶに 入っている。教材を 並べた サイトは ほかにも あるが、
   **実際に 教室で 使った 先生の 実感が 全件に ついている**のは まねが できない。
   だから 小さな 欄では なく、**顔と 署名の ついた ひとこと**として 出す。 */
.m-review{background:var(--amber-light,#fdf3d6);border-radius:11px;padding:10px 12px;font-size:12.5px;
  line-height:1.7;display:flex;gap:10px;align-items:flex-start}
.m-review .m-face{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid #fff;box-shadow:0 1px 4px rgba(18,70,63,.2)}
.m-review .t{font-weight:800;color:#7a5614;font-size:11.5px;display:block;margin-bottom:2px}
.m-review .sign{display:block;margin-top:5px;font-size:11px;font-weight:700;color:#7a5614;text-align:right}
.m-caution{font-size:11.5px;color:#b3382c;line-height:1.6}
/* ══ くわしく（たたんで おく）══ 2026-09-21
   ⚠️ **消したのでは なく たたんだ。**「使ってみて」は この サイトの 値打ちなので 残す。
   たたんで おけば わくは そろい、読みたい 人だけ 開ける。 */
.m-more{border-top:1px solid var(--border,#d9ebe6);padding-top:2px}
.m-more>summary{font-size:12.5px;font-weight:800;color:var(--info,#2563eb);cursor:pointer;list-style:none;
  padding:8px 0 6px;user-select:none}
.m-more>summary::-webkit-details-marker{display:none}
.m-more>summary::before{content:"▾ くわしく"}
.m-more[open]>summary::before{content:"▴ とじる"}
.m-more>summary span{display:none}
.m-more .inner{display:flex;flex-direction:column;gap:9px;padding-bottom:4px}
.m-open{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;
  font-size:14px;font-weight:800;border-radius:11px;padding:12px;text-align:center;
  background:var(--pick,#0b57d0);color:var(--pick-text,#fff);
  box-shadow:0 4px 12px rgba(14,116,144,.28);transition:filter .15s,transform .12s}
.m-open:hover{filter:brightness(1.08);transform:translateY(-1px)}
.m-open.soon{background:#f1f5f9;color:#94a3b8;box-shadow:none;pointer-events:none}
.badge.kt{background:#fce7f0;color:#9d174d;border-color:#f6c3d7;white-space:nowrap}   /* 保護者・子ども（保護者・子ども向けの ページにも 出る 教材・2026-11-03〜。前の 🔒 先生用 は やめた）。⚠️ 黄に しない（黄の 札は 共通だけ）・青に しない（押せる もの）*/

/* 絵（2026-10-19・保護者・子ども向けの ページの 絵を 教員向けにも）。絵は materials.js の icon */
/* 枠は 64px（2026-10-31〜・ユーザーが えらんだ 大きさ。前は 46px）。とあの アイコンが ある ツールは 絵（.pic）・ない ツールは 絵文字 */
.m-icon{font-size:36px;line-height:1;flex-shrink:0;width:64px;height:64px;border-radius:14px;
  background:var(--amber-light,#fdf3d6);display:flex;align-items:center;justify-content:center}
.m-icon.pic{overflow:hidden;background:#fff}
.m-icon.pic img{display:block;width:100%;height:100%;object-fit:cover}
.m-card.kyo .m-icon{background:#fff;box-shadow:inset 0 0 0 1px #f1e2b0}
.m-card.kyo .m-icon.pic,.m-card.jimu .m-icon.pic{box-shadow:none}
/* ══ 事務の ツール（教員向けページ だけ・所見・指導案・分掌・体力テスト）は うすい むらさき（2026-10-19 夜 ユーザー「教員向けの 事務ツールの カードは、色を 変えて」）══
   ⚠️ 黄＝共通・青＝押せる もの・みどり／水色＝飾り と ぶつからない 色。札「事務」も 同じ なかま（文字 #4a2d8c／地 #e9e1fb＝8.1）。
   ボタン（.m-open）は 青の まま（押せる ものは 青）。地を 濃くした ぶん、中の うすい 字は 少し 濃く（#47645f＝5.6・くわしく #1d4ed8＝5.8。
   ふだんの #517772 だと 4.3 で 基準 4.5 に 届かない）。 */
.m-card.jimu{background:#f2ecff;border-color:#d6c8f4;border-top-color:#8b6fd8}
.m-card.jimu .m-icon{background:#fff;box-shadow:inset 0 0 0 1px #d6c8f4}
.m-card.jimu .m-lead,.m-card.jimu .m-desc,.m-card.jimu .m-views{color:#47645f}
.m-card.jimu .m-more{border-top-color:#d6c8f4}
.m-card.jimu .m-more>summary{color:#1d4ed8}
.badge.jimu{background:#e9e1fb;color:#4a2d8c;border-color:#cbbcf0}
.m-open:focus-visible,.m-more>summary:focus-visible{outline:3px solid var(--primary,#0b57d0);outline-offset:2px}
/* 事務の ツールの ダウンロード（2026-10-19 夜）：開く ボタンの 右に 小さく。⚠️ たてに ならべない（カードの 高さが そろわなく なる）*/
.m-btns{margin-top:auto;display:flex;gap:8px}
.m-btns .m-open{margin-top:0;flex:1;min-width:0;font-size:13px;padding:12px 8px;white-space:nowrap}   /* 横に ならべた ときは 字を 少し 小さく・1行（2行に なると 高さが そろわない）*/
.m-dl{flex:0 0 auto;display:flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap;
  font-size:13px;font-weight:800;border-radius:11px;padding:11px 10px;background:#fff;color:var(--info,#2563eb);
  border:2px solid var(--border,#d9ebe6);transition:.14s}
.m-dl:hover{border-color:var(--info,#2563eb);background:var(--info-light,#dbeafe)}
.m-dl:focus-visible{outline:3px solid var(--primary,#0b57d0);outline-offset:2px}
/* ことわり書き（くわしくの 中） */
.m-note{font-size:11.5px;color:var(--sub,#517772);line-height:1.65;background:#f8fafc;border-radius:8px;padding:8px 11px}
/* 動きを へらす 設定（2026-10-27 全体点検）：カードを なぞった ときに 浮かせない（酔う 子が いる）*/
@media (prefers-reduced-motion:reduce){
  .m-card,.m-open,.m-dl{transition:none}
  .m-card:hover,.m-open:hover{transform:none}
}
/* 🔧 改良中の しるし（2026-11-04）：カードの 上の 線に のせる＝右上（.m-side）の 段を ふやさない（ふやすと その カードだけ 高く なり、となりと「くわしく」の 線が ずれる）*/
.m-card{position:relative}
.m-wip{position:absolute;top:-10px;right:12px;z-index:1;font-size:11.5px;font-weight:800;line-height:1;padding:4px 9px;border-radius:99px;background:#fff4d6;color:#7a5614;border:1px solid #ecd58f;white-space:nowrap;pointer-events:none}
@media print{.m-wip{display:none}}