:root { --brand: #0090d9; --brand-dark: #0077b3; --brand-pale: #eaf6fd;
        --fg: #1b1f24; --bg: #ffffff; --muted: #5b6570; --line: #e3e8ee;
        --danger: #b3261e; --danger-bg: #fdecea; }
* { box-sizing: border-box; }
/* 🚨 iOS は横向きにすると本文だけ勝手に拡大する。切ると縦横で字の大きさが揃う */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
       color: var(--fg); background: var(--bg); line-height: 1.7;
       /* 長いメールアドレスや URL でスマホが横に伸びるのを止める */
       overflow-wrap: break-word; }
/* 画像・埋め込みは器より大きくしない(1つでもはみ出すと画面全体が横スクロールする) */
img, svg, video, canvas, iframe { max-width: 100%; }
img { height: auto; }
/* キーボード操作のときだけ枠を出す。マウスでは出さない */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 画面内リンクで飛んだとき、見出しが上端に貼り付かないようにする */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.site-header { display: flex; justify-content: space-between; align-items: center; gap: 10px;
       flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.site-header nav { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.brand { font-weight: 700; color: var(--brand); text-decoration: none; }
.container { max-width: 960px; margin: 0 auto;
       padding: 24px max(20px, env(safe-area-inset-left)) 24px max(20px, env(safe-area-inset-right)); }
form label { display: block; margin: 12px 0; }
form input { display: block; width: 100%; max-width: 360px; padding: 10px;
       border: 1px solid var(--line); border-radius: 8px; font-size: 16px; }
button { background: var(--brand); color: #fff; border: 0; border-radius: 8px;
       padding: 10px 20px; font-size: 16px; cursor: pointer; }
.messages { list-style: none; padding: 0; }
.messages .error { color: var(--danger); }

/* 横スクロールする帯(タブ・表)の共通の作法。
   🚨 スマホでスクロールバーが出ると帯が2重に見えて押しづらいので隠す。
      隠すぶん、端を切らずに最後まで指で送れるよう momentum を明示する。 */
.tp-tabs, .tp-table-wrap, .tst-table-wrap, .ts-grid-wrap, .tst-subtabs, .ttr-subtabs, .tst-picker {
       scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tp-tabs::-webkit-scrollbar, .tp-table-wrap::-webkit-scrollbar, .tst-table-wrap::-webkit-scrollbar,
.ts-grid-wrap::-webkit-scrollbar, .tst-subtabs::-webkit-scrollbar, .ttr-subtabs::-webkit-scrollbar,
.tst-picker::-webkit-scrollbar { display: none; }

/* ===== ログイン / パスワード / ポータル選択 ==============================
   🚨 白いカードに枠線と薄い影……だけだと、よくある認証画面と見分けがつかない
      （実際「Google に似すぎている」と指摘を受けた）。マナビライトの画面だと
      ひと目で分かるように、**カードの上にブランド色の帯**を置き、入力欄は
      塗りにしている。ここを白カード＋枠線に戻さない。
   🚨 フォントもアイコンも外部から読み込まない(ロゴはインライン SVG)。
      ログイン画面を外部の可用性に依存させない。 */
body.auth-page { background:
       radial-gradient(1100px 520px at 12% -8%, rgba(0, 144, 217, .16), transparent 62%),
       radial-gradient(900px 460px at 96% 8%, rgba(0, 144, 217, .10), transparent 60%),
       #eef3f8; }
.auth-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
       align-items: center; justify-content: center;
       padding: 32px max(20px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom))
                max(20px, env(safe-area-inset-left)); }
.auth-card { width: 100%; max-width: 440px; background: #fff; border-radius: 20px;
       overflow: hidden;   /* 帯の角を carve するため */
       box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 18px 44px rgba(16, 24, 40, .13); }

/* 箱の頭。🚨 2026-09-29 から箱は全体を白(青い帯に白い台で載せるとロゴが浮いた。久松さん指示) */
.auth-head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 28px 20px;
       background: #fff; border-bottom: 1px solid #eef2f6; text-align: center; }
.auth-logo-img { display: block; width: auto; height: 40px; max-width: 100%; }
.auth-head-text { min-width: 0; }
.auth-head-name { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: .04em;
       line-height: 1.3; }
.auth-head-sub { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4;
       color: var(--fg, #1f2a37); }

.auth-body { padding: 26px 28px 24px; }

.auth-messages { list-style: none; margin: 0 0 20px; padding: 0; }
.auth-messages li { padding: 11px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.6; }
.auth-messages .error { color: var(--danger); background: var(--danger-bg);
       border: 1px solid #f5c6c2; }
.auth-messages .success { color: #1a6b32; background: #e8f6ec; border: 1px solid #b7e0c4; }

.auth-form { margin: 0; }
.auth-field { margin-bottom: 18px; }
.auth-field label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 700;
       color: #3c4756; }
/* 塗りの入力欄。枠線だけの白い箱より、どこに書くのかが一目で分かる */
.auth-field input { display: block; width: 100%; max-width: none; padding: 13px 14px;
       border: 1.5px solid transparent; border-radius: 12px; font-size: 16px; color: var(--fg);
       background: #f1f5f9; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.auth-field input::placeholder { color: #9aa7b6; }
.auth-field input:hover { background: #eaf0f6; }
.auth-field input:focus { outline: none; background: #fff; border-color: var(--brand);
       box-shadow: 0 0 0 4px rgba(0, 144, 217, .16); }

.auth-submit { display: block; width: 100%; margin-top: 24px; padding: 14px;
       font-size: 15.5px; font-weight: 800; letter-spacing: .04em; border-radius: 12px;
       box-shadow: 0 2px 8px rgba(0, 144, 217, .30); transition: background-color .15s, box-shadow .15s; }
.auth-submit:hover { background: var(--brand-dark); box-shadow: 0 4px 14px rgba(0, 144, 217, .38); }
.auth-submit:focus-visible { outline: 3px solid rgba(0, 144, 217, .35); outline-offset: 2px; }
/* 送ったあと(static/js/auth.js)。押せたことが見えるように薄くし、待ちのカーソルにする */
.auth-submit.is-busy { opacity: .7; cursor: progress; }

.auth-links { margin: 16px 0 0; font-size: 12.5px; text-align: center; }
.auth-links a { color: var(--brand); text-decoration: none; font-weight: 600; }
.auth-links a:hover { text-decoration: underline; }

.auth-divider { display: flex; align-items: center; gap: 14px; margin: 24px 0 18px;
       color: #8b97a5; font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #e3e8ee; }

/* Google ボタン: Google のブランドガイドに沿って白地・枠線・公式4色ロゴ。
   🚨 ここだけは Google の作法に合わせる（勝手に色を変えてはいけない） */
.auth-google { display: flex; align-items: center; justify-content: center; gap: 10px;
       width: 100%; padding: 12px; border: 1.5px solid #dbe2ea; border-radius: 12px;
       background: #fff; color: #3c4043; font-size: 14.5px; font-weight: 600;
       text-decoration: none; transition: background-color .15s, border-color .15s; }
.auth-google:hover { background: #f7f9fb; border-color: #c6d0da; }
.auth-google:focus-visible { outline: 3px solid rgba(0, 144, 217, .35); outline-offset: 2px; }
.auth-google-icon { width: 18px; height: 18px; flex: none; }
.auth-note-center { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; }

.auth-help { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #eef2f6;
       font-size: 12px; color: var(--muted); text-align: center; line-height: 1.8; }
.auth-lead { margin: 0 0 20px; font-size: 14px; line-height: 1.85; }
.auth-note { margin: 14px 0 0; font-size: 12px; color: var(--muted); line-height: 1.7; }
.auth-field-error { margin: 7px 0 0; font-size: 12px; color: var(--danger); line-height: 1.6; }
.auth-foot { margin: 22px 0 0; font-size: 11px; color: #8b97a5; letter-spacing: .1em; }

@media (max-width: 480px) {
  .auth-shell { justify-content: flex-start; padding: 24px 14px calc(24px + env(safe-area-inset-bottom)); }
  .auth-card { border-radius: 16px; }
  .auth-head { padding: 18px 20px; }
  .auth-head-name { font-size: 18px; }
  .auth-body { padding: 22px 18px 20px; }
  .auth-field { margin-bottom: 16px; }
  /* 指で押す前提の高さにする(小さいと押し間違える) */
  .auth-submit { padding: 15px; }
  .auth-google { padding: 14px; }
  .auth-help { line-height: 1.9; }
}

/* ===== 社内スタッフのプレビュー ======================================== */
/* 帯: 本物の利用者の画面と取り違えないよう、常に最上部に居座らせる */
.preview-bar { position: sticky; top: 0; z-index: 100; display: flex; flex-wrap: wrap;
       align-items: center; gap: 10px; padding: 8px 16px;
       background: #4b3f10; color: #fdf6e3; font-size: 12.5px; line-height: 1.5; }
.preview-bar-tag { flex: none; padding: 2px 8px; border-radius: 999px;
       background: #f5c518; color: #3a2f00; font-weight: 700; font-size: 11.5px; }
.preview-bar-text { flex: 1 1 auto; min-width: 0; }
.preview-bar-actions { display: flex; gap: 8px; flex: none; }
.preview-bar-actions form { margin: 0; }
.preview-bar-actions button { background: transparent; color: #fdf6e3; font-size: 12px;
       padding: 4px 10px; border: 1px solid rgba(253, 246, 227, .45); border-radius: 6px; }
.preview-bar-actions button:hover { background: rgba(253, 246, 227, .12); }
/* auth-shell は 100vh を使うので、帯のぶん縮めて画面外にはみ出させない */
body.has-preview-bar .auth-shell { min-height: calc(100vh - 37px); }
@media (max-width: 480px) {
  .preview-bar { padding: 7px 12px; font-size: 12px; }
  .preview-bar-actions { flex: 1 1 100%; }
}

/* ポータル選択画面（auth-card の中身） */
.choose-who { margin: 0 0 20px; padding: 12px 14px; border-radius: 12px;
       background: #f1f5f9; font-size: 12.5px; line-height: 1.7; color: #3c4756; }
.choose-who strong { font-weight: 700; word-break: break-all; color: var(--fg); }
.choose-list { display: grid; gap: 10px; }
.choose-list form { margin: 0; }
.choose-item { display: block; width: 100%; text-align: left; padding: 16px 18px;
       background: #f8fafc; color: var(--fg); border: 1.5px solid transparent;
       border-radius: 12px; cursor: pointer;
       transition: border-color .15s, background-color .15s, box-shadow .15s; }
.choose-item:hover { border-color: var(--brand); background: #fff;
       box-shadow: 0 2px 10px rgba(0, 144, 217, .14); }
.choose-item.is-active { border-color: var(--brand); background: var(--brand-pale); }
.choose-item-name { display: block; font-size: 15.5px; font-weight: 700; }
.choose-item-note { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.choose-stop { margin: 12px 0 0; }
.choose-stop button { width: 100%; background: transparent; color: var(--muted);
       border: 1.5px solid #e3e8ee; border-radius: 12px; font-size: 13px; padding: 10px; }
.choose-stop button:hover { background: #f6f8fa; }

/* ===== 教師ポータル (tp-) ============================================== */
/* 仕様書 §3-1 の並び: ヘッダー → お知らせ・タスク → タブ → 本文 */
body.tp-page { background: #f4f6f9; }

/* §3-2 ヘッダー */
.tp-header { background: #fff; border-bottom: 1px solid var(--line); }
.tp-header-inner { max-width: 1100px; margin: 0 auto; padding: 10px 20px;
       display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tp-brand { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tp-brand-name { font-weight: 700; color: var(--brand); font-size: 16px; }
.tp-brand-sub { font-size: 12px; color: var(--muted); }
.tp-me { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tp-avatar { flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%;
       background: var(--brand); color: #fff; font-size: 14px; font-weight: 700; }
.tp-me-text { display: flex; flex-direction: column; min-width: 0; }
.tp-me-name { font-size: 13px; font-weight: 700; line-height: 1.4; }
.tp-me-types { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tp-type { padding: 1px 7px; border-radius: 999px; background: var(--brand-pale);
       color: #0a6a9e; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.tp-logout { flex: none; font-size: 12px; color: var(--muted); text-decoration: none; }
.tp-logout:hover { text-decoration: underline; }

.tp-modal { border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px;
       width: min(360px, calc(100vw - 24px)); box-shadow: 0 12px 32px rgba(16, 24, 40, .18); }
.tp-modal::backdrop { background: rgba(16, 24, 40, .35); }
.tp-modal-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.tp-modal-body { margin: 0 0 18px; font-size: 13px; color: var(--muted); line-height: 1.7; }

.tp-main { max-width: 1100px; margin: 0 auto;
       padding: 20px max(20px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom))
                max(20px, env(safe-area-inset-left)); }

/* §4 お知らせ・タスク */
.tp-tasks { background: #fff; border: 1px solid var(--line); border-radius: 12px;
       padding: 16px 18px; margin-bottom: 18px; }
.tp-tasks-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
       font-size: 14px; font-weight: 700; }
.tp-count { padding: 1px 9px; border-radius: 999px; background: #eef2f7;
       color: var(--muted); font-size: 11.5px; font-weight: 700; }
.tp-empty-tasks { margin: 0; font-size: 13px; color: var(--muted); }
.tp-tasks-all { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--brand-dark); }
.tp-tasks.is-compact .tp-task { padding: 8px 12px; }
.tp-tasks.is-compact .tp-task-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnw-todo { margin: 0 0 22px; }
#todo { scroll-margin-top: calc(var(--ps-bar-h, 0px) + var(--ps-head-h, 58px) + 12px); }
.tp-task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tp-task { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px;
       border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px;
       background: #fff; }
/* 3系統の色分け(§4-1): アラート=赤 / 調査=青 / 依頼=紫 */
.tp-task.is-alert { border-left-color: #dc2626; }
.tp-task.is-survey { border-left-color: #2563eb; }
.tp-task.is-request { border-left-color: #7c3aed; }
.tp-task-pri { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
       display: inline-flex; align-items: center; justify-content: center;
       font-size: 11px; font-weight: 700; }
.pri-high .tp-task-pri { background: #fdecea; color: #b3261e; }
.pri-mid  .tp-task-pri { background: #fff4e0; color: #a45b00; }
.pri-low  .tp-task-pri { background: #eef2f7; color: #5b6570; }
.tp-task-body { flex: 1 1 auto; min-width: 0; }
.tp-task-title { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.tp-task-line { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
/* 🚨 2026-10-02 久松さん「お知らせ(TODO)がいっぱいあると見づらい・スマホでボタンが幅を取りすぎて気持ち悪い」:
   一番上は3件まで(残りは「すべて見る」→ お知らせタブ)。ボタンは小さく右に置き、スマホでも横いっぱいにしない */
.tp-task-btn { flex: none; align-self: center; padding: 6px 14px; border-radius: 8px;
       background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 700;
       text-decoration: none; white-space: nowrap; }
.tp-task-btn:hover { background: var(--brand-dark); }
/* ボタンで送信するタスク(「確認しました」など) */
.tp-task-form { flex: none; align-self: center; margin: 0; }
button.tp-task-btn { border: 0; font-family: inherit; line-height: 1.4; cursor: pointer; }

/* §3-3 タブ */
.tp-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line);
       margin-bottom: 0; scroll-padding-inline: 16px; }
.tp-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px;
       font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none;
       white-space: nowrap; border-bottom: 2px solid transparent; }
.tp-tab:hover { color: var(--fg); }
.tp-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); background: #fff; }
.tp-tab-badge { padding: 0 6px; min-width: 18px; height: 18px; border-radius: 999px;
       background: #dc2626; color: #fff; font-size: 11px; font-weight: 700;
       display: inline-flex; align-items: center; justify-content: center; }

.tp-body { background: #fff; border: 1px solid var(--line); border-top: 0;
       border-radius: 0 0 12px 12px; padding: 22px 20px; }

/* 未実装タブの案内。作り終えたら消す */
.tp-todo-lead { margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.tp-todo-list { margin: 0; padding-left: 20px; font-size: 13px; color: var(--muted);
       line-height: 1.9; }
.tp-todo-list strong { color: var(--fg); }

@media (max-width: 640px) {
  /* タブは画面の端まで使う。器の内側に収めると1つぶん狭くなって、
     「右にまだタブがある」ことに気づきにくい(.tp-main の左右余白と同じ値で打ち消す) */
  .tp-tabs { margin-left: calc(-1 * max(14px, env(safe-area-inset-left)));
         margin-right: calc(-1 * max(14px, env(safe-area-inset-right)));
         padding-left: max(14px, env(safe-area-inset-left));
         padding-right: max(14px, env(safe-area-inset-right)); }
  .tp-header-inner { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; }
  .tp-brand { flex: 1 1 auto; }
  .tp-me { flex: 1 1 100%; }
  .tp-logout { margin-left: auto; padding: 6px 2px; }
  .tp-main { padding: 14px max(14px, env(safe-area-inset-right))
                     calc(14px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .tp-tasks { padding: 14px; border-radius: 10px; }
  .tp-task { gap: 10px; padding: 10px; }
  .tp-task-title { font-size: 14px; }
  .tp-task-line { font-size: 13px; }
  /* 🚨 2026-10-02 まで横いっぱいのボタンにしていて「幅を取りすぎて気持ち悪い」(久松さん)。右に小さく置く(高さは指で押せる 36px) */
  .tp-task-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; font-size: 12.5px; }
  .tp-tab { padding: 11px 14px; font-size: 13.5px; }
  .tp-body { padding: 16px 14px; border-radius: 0 0 10px 10px; }
  /* 表は行間・余白を詰めて、横スクロールの量を減らす */
  .sp-table th, .sp-table td { padding: 7px 8px; }
  .sp-table th { width: auto; }
  /* 入力欄が3列並ぶ表は潰すと書けない。器の中で横に送れるだけの幅を確保する */
  .sp-table-list { min-width: 440px; }
  .sp-card { padding: 14px; }
  .sp-form-actions { flex-wrap: wrap; gap: 12px; }
  .sp-submit { flex: 1 1 100%; }
  .sp-cancel { flex: 1 1 100%; text-align: center; }
  /* 🚨 16px 未満の入力欄は iOS が勝手に拡大する(戻すと画面全体がずれる)。
        スマホ幅のときだけ 16px にそろえる */
  .sp-field input[type="text"], .sp-field input[type="date"], .sp-field select,
  .sp-field textarea, .tp-fam-form input, .tp-preview-pick input[type="text"] { font-size: 16px; }
  .tp-fam-head { font-size: 13.5px; }
  .tp-fam-date { margin-left: 0; flex-basis: 100%; }
  .tp-fam-form { gap: 8px; }
  .tp-fam-form input { flex: 1 1 160px; }
}
@media (max-width: 420px) {
  .tp-brand { flex-wrap: wrap; gap: 0 6px; }
  .sp-actions { grid-template-columns: 1fr; }
  .sp-field { padding: 14px; }
  .site-header { padding: 10px 14px; }
}

/* ===== 生徒・保護者ポータル (sp-) ====================================== */
/* 枠は教師ポータル(tp-)と共有し、中身だけこちらで足す */
.sp-messages { list-style: none; margin: 0 0 16px; padding: 0; }
/* 🚨 2026-10-04: 操作のあとの知らせは画面の上に重ねて出す(shell.js が .is-floating を付ける)。戻り先がページの途中だと
   知らせが画面の外になり「押しても何も起きない」に見えた(社内プレビューで送れないとき・スマホの送信後)。押すと消える */
.sp-messages.is-floating { position: fixed; z-index: 80; left: 50%; transform: translateX(-50%);
       top: calc(var(--ps-bar-h, 0px) + var(--ps-head-h, 58px) + 10px); width: min(560px, calc(100vw - 32px));
       margin: 0; display: grid; gap: 6px; }
.sp-messages.is-floating li { box-shadow: 0 6px 22px rgba(15, 23, 42, .18); cursor: pointer; font-size: 14px; }
.sp-messages.is-floating li::after { content: "×"; float: right; margin-left: 10px; opacity: .6; }
.sp-messages li { padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.sp-messages .success { background: #e8f6ec; color: #1a6b32; border: 1px solid #b7e0c4; }
.sp-messages .error { background: var(--danger-bg); color: var(--danger); border: 1px solid #f5c6c2; }

.sp-h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.sp-h2:not(:first-child) { margin-top: 28px; }
.sp-lead { margin: 0 0 16px; font-size: 13.5px; line-height: 1.8; }
.sp-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.7; }
.sp-empty { margin: 0; font-size: 13px; color: var(--muted); }

.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-span2 { grid-column: 1 / -1; }
.sp-card { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.sp-card-head { display: flex; align-items: baseline; justify-content: space-between;
       gap: 12px; margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.sp-card-more { font-size: 12px; font-weight: 500; color: var(--brand); text-decoration: none; }
.sp-card-more:hover { text-decoration: underline; }

/* 指導予定 */
.sp-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-lesson { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
       padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
       background: #fff; }
.sp-lesson-when { flex: none; display: flex; align-items: baseline; gap: 4px; }
.sp-lesson-date { font-size: 17px; font-weight: 700; }
.sp-lesson-wday { font-size: 12px; color: var(--muted); }
.sp-lesson-time { margin-left: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.sp-lesson-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
       gap: 10px; flex-wrap: wrap; }
.sp-lesson-subject { font-size: 13.5px; font-weight: 700; }
.sp-lesson-teacher { font-size: 12.5px; color: var(--muted); }
.sp-chip { padding: 1px 8px; border-radius: 999px; background: var(--brand-pale);
       color: #0a6a9e; font-size: 11px; font-weight: 600; white-space: nowrap; }
.sp-chip.is-warn { background: #fdecea; color: var(--danger); }
/* 中止のコマは消さずに、済んだものとして薄く出す(消えると予定が無くなったと誤解される) */
.sp-lesson.is-cancelled { background: #fafbfc; }
.sp-lesson.is-cancelled .sp-lesson-date,
.sp-lesson.is-cancelled .sp-lesson-time { color: var(--muted); text-decoration: line-through; }
.sp-lesson-join { flex: none; padding: 7px 14px; border-radius: 8px; background: var(--brand);
       color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.sp-lesson-join:hover { background: var(--brand-dark); }
.sp-lesson-join.is-off { background: #eef2f7; color: #98a2b3; pointer-events: none; }

.sp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
       font-size: 13px; line-height: 1.7; }
.sp-due { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px;
       background: #fff4e0; color: #a45b00; font-size: 11.5px; font-weight: 700; }

.sp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sp-table th, .sp-table td { padding: 8px 10px; border-bottom: 1px solid var(--line);
       text-align: left; vertical-align: top; }
.sp-table th { width: 34%; color: var(--muted); font-weight: 600; white-space: nowrap; }
.sp-table-list th { width: auto; }
.sp-payload { color: var(--muted); font-size: 12px; }

/* 申請 */
.sp-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
       gap: 10px; }
.sp-action { display: block; padding: 14px 16px; border: 1px solid #cfd8e3; border-radius: 10px;
       background: #fff; text-decoration: none; color: var(--fg);
       transition: border-color .15s, background-color .15s; }
.sp-action:hover { border-color: var(--brand); background: #fbfdff; }
.sp-action-name { display: block; font-size: 14px; font-weight: 700; }
.sp-action-note { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

/* 申請フォーム。ログイン画面と同じ「塗りの入力欄」に揃える。
   🚨 ラベルと入力欄が細い線で並ぶだけの作りにしない（どこに何を書くのか
      分かりにくく、よくある汎用フォームと見分けがつかない）。
      1問ずつ枠で区切り、必須を明示する。 */
.sp-form { max-width: 620px; }
.sp-field { margin-bottom: 14px; padding: 16px 18px; border-radius: 14px;
       background: #f8fafc; border: 1.5px solid transparent; transition: border-color .15s; }
.sp-field:focus-within { border-color: var(--brand); background: #fff;
       box-shadow: 0 2px 12px rgba(0, 144, 217, .12); }
.sp-field label { display: block; margin-bottom: 9px; font-size: 13.5px; font-weight: 700;
       color: #3c4756; }
.sp-required { margin-left: 8px; padding: 2px 7px; border-radius: 999px;
       background: #fdecea; color: var(--danger); font-size: 10.5px; font-weight: 700;
       vertical-align: 1px; }
.sp-field input[type="text"], .sp-field input[type="date"], .sp-field select,
.sp-field textarea { width: 100%; max-width: none; padding: 12px 14px; font-size: 15.5px;
       border: 1.5px solid #dbe2ea; border-radius: 10px; font-family: inherit;
       background: #fff; color: var(--fg); transition: border-color .15s, box-shadow .15s; }
.sp-field textarea { resize: vertical; line-height: 1.7; }
.sp-field select { appearance: none;
       /* 三角は SVG を埋め込む（外部アイコンを読まない方針） */
       background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6570' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
       background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.sp-field input:focus, .sp-field select:focus, .sp-field textarea:focus {
       outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,144,217,.16); }
.sp-field input[type="checkbox"] { width: auto; margin-right: 8px;
       accent-color: var(--brand); transform: scale(1.15); }
.sp-form-actions { display: flex; align-items: center; gap: 18px; margin-top: 24px; }
.sp-submit { padding: 13px 30px; font-size: 15px; font-weight: 800; border-radius: 12px;
       letter-spacing: .03em; box-shadow: 0 2px 8px rgba(0, 144, 217, .30); }
.sp-submit:hover { background: var(--brand-dark); box-shadow: 0 4px 14px rgba(0, 144, 217, .38); }
.sp-cancel { font-size: 13px; color: var(--muted); text-decoration: none; }
.sp-cancel:hover { text-decoration: underline; }

/* 教師ポータル: 家庭から届いたもの(生徒・保護者ポータルと連動) */
.tp-family { margin-bottom: 24px; }
.tp-fam-list, .tp-fam-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tp-fam-item { padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid #7c3aed; border-radius: 8px; }
.tp-fam-item.is-new { background: #faf7ff; }
.tp-fam-head { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.tp-fam-date { margin-left: auto; font-size: 12px; color: var(--muted); }
.tp-fam-line { margin: 2px 0 0; font-size: 13px; line-height: 1.6; }
.tp-fam-form { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tp-fam-form input { width: auto; max-width: none; padding: 7px 10px; border: 1px solid #cfd8e3; border-radius: 8px; font-size: 14px; }
.tp-fam-form button { padding: 8px 14px; font-size: 13px; font-weight: 700; }
.tp-fam-student { padding: 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; }
.tp-fam-sub { margin: 10px 0 4px; font-size: 12.5px; font-weight: 700; color: #3c4756; }
.tp-fam-rows li { font-size: 13px; line-height: 1.6; }
.tp-fam-link { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--brand); text-decoration: none; }
.tp-preview-pick { margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px;
       border-radius: 8px; background: #fff8dc; color: #4b3f10; font-size: 12px; }
.tp-preview-pick input[type="text"] { width: 110px; max-width: none; padding: 4px 8px; font-size: 12px; border-radius: 6px; border: 1px solid #cfd8e3; }
.tp-preview-pick button { padding: 4px 10px; font-size: 12px; border-radius: 6px; }

@media (max-width: 720px) {
  .sp-grid { grid-template-columns: 1fr; }
  .sp-lesson { gap: 8px; }
  .sp-lesson-join { width: 100%; text-align: center; }
}


/* ===== ポータル共通の枠 (ps-) ============================================
   生徒・保護者・教師の3つで同じ(templates/portal/shell.html。2026-09-27 久松さん指示)。
   PC は左のサイドバー、スマホは左上のメニューボタン＋下の固定ボタン。境目は 960px。
   🚨 境目を変えるときは static/js/shell.js の matchMedia も同じ値にする。 */
.ps-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ps-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9;
       stroke-linecap: round; stroke-linejoin: round; }
body.ps-page { background: #f4f6f9; }

.ps-header { position: sticky; top: var(--ps-bar-h, 0px); z-index: 60; display: flex; align-items: center; gap: 12px;
       min-height: 58px; padding: 6px max(20px, env(safe-area-inset-right)) 6px max(20px, env(safe-area-inset-left));
       background: #fff; border-bottom: 1px solid var(--line); }
.ps-menu-btn { display: none; }
.ps-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.ps-logo { display: block; width: auto; height: 30px; max-width: none; }
.ps-portal-name { padding: 3px 10px; border-radius: 999px; background: var(--brand-pale); color: #0a6a9e;
       font-size: 12.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.ps-me { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ps-logout { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 2px;
       font-size: 12px; color: var(--muted); text-decoration: none; }
.ps-logout:hover { color: var(--fg); }
/* ログアウトは POST のボタン(2026-09-29)。見た目は以前のリンクのまま */
.ps-logout-form { flex: none; margin: 0; display: inline-flex; }
button.ps-logout, button.link-button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.ps-logout .ps-ico { width: 16px; height: 16px; }

/* 🚨 2026-10-02 久松さん「PC でサイドバーが真ん中に寄って浮いて見える。一番左に寄せて右側を広く。中身の幅はそれなりに」:
   サイドバーは画面の左端(以前は 1440px の箱ごと中央寄せで、広い画面では左に灰色が出ていた)。
   本文は残りの幅を使い、中身(.ps-main-inner)は 1120px までで中央に置く */
.ps-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; }
.ps-side { position: sticky; top: calc(var(--ps-bar-h, 0px) + var(--ps-head-h, 58px));
       height: calc(100vh - var(--ps-bar-h, 0px) - var(--ps-head-h, 58px)); overflow-y: auto;
       padding: 16px 12px 24px; background: #fff; border-right: 1px solid var(--line); }
.ps-side-head { display: none; }
.ps-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ps-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0;
       border-radius: 8px; background: transparent; color: #3c4756; font-family: inherit; font-size: 14px;
       font-weight: 600; line-height: 1.4; text-align: left; text-decoration: none; cursor: pointer; }
.ps-nav-item:hover { background: #f4f6f9; color: var(--fg); }
/* 🚨 選択中は背景と文字色だけ。角丸(8px)の内側に影で左の線を引くと、線が角に沿って曲がり「左だけ角丸の枠」に見えた
   (2026-09-27 久松さん「選択中のもの、左側が角丸のボーダーになっている」) */
.ps-nav-item.is-active { background: var(--brand-pale); color: var(--brand-dark); font-weight: 700; }
.ps-nav-item.is-off, .ps-nav-item:disabled { color: #9aa3ad; cursor: default; background: transparent; }
/* 🚨 2026-10-04 久松さん「生徒、保護者、教師すべて、サイドバーの文字は青じゃなくて黒に」。家庭の画面は本文のリンクの色
   (mypage.css の .mp-page a)がメニューにも効いて青くなっていたので .ps-side を付けて強くする。選択中も文字は黒(背景の薄い青と太字で示す) */
.ps-side .ps-nav-item, .ps-side .ps-nav-item:hover, .ps-side .ps-nav-item.is-active { color: var(--fg); }
.ps-side .ps-nav-item.is-off, .ps-side .ps-nav-item:disabled { color: #9aa3ad; }
.ps-nav-item small { font-size: 11px; font-weight: 500; }
.ps-nav-label { flex: 1 1 auto; min-width: 0; }
.ps-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #dc2626;
       color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ps-ext { width: 14px; height: 14px; color: #9aa3ad; }
.ps-nav-group { margin: 18px 12px 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.ps-side-block { margin: 0 0 14px; padding: 0 4px 14px; border-bottom: 1px solid var(--line); }
/* メニューの下に置く欄(受講中のプランなど)。上に線 */
.ps-side-block.is-bottom { margin: 18px 0 0; padding: 14px 4px 0; border-top: 1px solid var(--line); border-bottom: 0; }
.ps-side-label { margin: 0 0 6px 8px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.ps-main { min-width: 0; padding: 22px max(32px, env(safe-area-inset-right)) 48px 32px; }
.ps-main-inner { max-width: 1120px; margin: 0 auto; }
/* ページの見出し(いま開いているメニュー)。メニューを移ったあと、ここを画面の上に出す(teacher_scroll.js)
   🚨 2026-10-02 久松さん「『指導』などの見出しは見出しっぽく、左にマナビライトのロゴ(電球)を付けて」(3つのポータルすべて)。
      電球はロゴ(logo-manabiright.svg)の左端の6つの図形だけを抜き出した static/img/logo-mark.svg。ページごとのアイコンはやめた */
/* 文字色もマナビライトの青(2026-10-02 久松さん「黒字で浮いているので青に」) */
.ps-page-title { position: relative; display: flex; align-items: center; gap: 10px; margin: 26px 0 14px; padding: 0 0 10px;
       border-bottom: 2px solid #dbe7f1; color: var(--brand); font-size: 21px; font-weight: 800; letter-spacing: .02em; line-height: 1.4;
       scroll-margin-top: calc(var(--ps-bar-h, 0px) + var(--ps-head-h, 58px) + 8px); }
.ps-page-title::before { content: ""; flex: none; width: 20px; height: 28px;
       background: url("/static/img/logo-mark.svg") no-repeat center / contain; }
.ps-page-title::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 64px; height: 2px; background: var(--brand); }
.ps-page-title:first-child { margin-top: 0; }
/* タブが無くなったので、本文の器の上も角を丸める */
.ps-main .tp-body { border-top: 1px solid var(--line); border-radius: 12px; }
.ps-backdrop { display: none; }
.ps-bottom { display: none; }

@media (max-width: 959.98px) {
  .ps-header { min-height: 54px; gap: 8px; padding-left: max(6px, env(safe-area-inset-left));
         padding-right: max(12px, env(safe-area-inset-right)); }
  .ps-menu-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px;
         padding: 0; border-radius: 10px; background: transparent; color: var(--fg); }
  .ps-menu-btn:hover { background: #f4f6f9; }
  .ps-menu-btn .ps-ico { width: 24px; height: 24px; }
  .ps-logo { height: 26px; }
  .ps-layout { display: block; }
  .ps-side { position: fixed; z-index: 80; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); height: auto;
         padding: 0 12px calc(24px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
         transform: translateX(-102%); transition: transform .2s ease; visibility: hidden; }
  body.ps-side-open .ps-side { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(16, 24, 40, .25); }
  .ps-side-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 10px 12px; }
  .ps-side-title { font-size: 14px; font-weight: 700; }
  .ps-side-close { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
         padding: 0; border-radius: 10px; background: transparent; color: var(--fg); }
  .ps-side-close .ps-ico { width: 22px; height: 22px; }
  .ps-nav-item { padding: 12px; font-size: 15px; }
  .ps-backdrop { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(16, 24, 40, .42); }
  .ps-backdrop[hidden] { display: none; }
  body.ps-side-open { overflow: hidden; }
  .ps-main { padding: 14px max(14px, env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom))
         max(14px, env(safe-area-inset-left)); }
  .ps-page-title { font-size: 19px; margin-top: 20px; }
  .ps-page-title::before { width: 18px; height: 25px; }
  /* 下の固定ボタン(よく使うもの) */
  .ps-bottom { display: flex; position: fixed; z-index: 55; left: 0; right: 0; bottom: 0;
         padding: 4px max(6px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
         background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgba(16, 24, 40, .06); }
  .ps-bottom-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
         padding: 6px 2px 4px; border-radius: 10px; color: #5b6570; font-size: 10.5px; font-weight: 700;
         line-height: 1.3; text-decoration: none; }
  /* 「その他」はボタン(メニューを開く)。見た目はほかの項目と同じ */
  button.ps-bottom-item { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
  .ps-bottom-item.is-active { color: var(--brand); background: var(--brand-pale); }
  .ps-bottom-ico { position: relative; display: inline-flex; }
  .ps-bottom-ico .ps-ico { width: 24px; height: 24px; }
  .ps-dot { position: absolute; top: -5px; right: -11px; min-width: 17px; height: 17px; padding: 0 4px;
         border-radius: 999px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700;
         display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #fff; }
  .ps-bottom-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* ===== チャット(チャネルトーク)のボタン ==================================
   🚨 2026-10-23 から右下はマナミ(static/css/manami.css・templates/portal/_manami.html)。前の「チャットで相談」のボタン
      (ps-chat-btn)はやめた。チャネルトークはマナミの「本部に問い合わせたい」から開く。未読の数もマナミの丸の右上 */

/* ===== 一番上のお知らせ(バナー) =========================================
   🚨 2026-10-02 久松さん「お知らせは簡単なバナーで目立つように。押したらお知らせのページで開く(全体的に)」。
      各ページの上は1行のバナーを3件まで。中身と操作はお知らせのページ(家庭 ?tab=notices・教師 /teacher/news/) */
.ps-banners { display: grid; gap: 8px; margin: 0 0 6px; }
.ps-banner { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border-radius: 12px;
       border: 1px solid #cfe3f3; background: #f0f8fe; color: var(--fg); text-decoration: none;
       transition: background-color .15s, border-color .15s; }
.ps-banner:hover { background: #e3f2fc; border-color: #9fcbea; }
.ps-banner.is-alert { border-color: #f3b4ae; background: #fff1f0; }
.ps-banner.is-alert:hover { background: #ffe5e2; }
.ps-banner-tag { flex: none; padding: 1px 8px; border-radius: 6px; background: var(--brand); color: #fff;
       font-size: 11.5px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.ps-banner.is-alert .ps-banner-tag { background: #dc2626; }
.ps-banner-title { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.5;
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-banner-sub { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ps-banner-go { width: 18px; height: 18px; color: #7a8796; }
@media (max-width: 640px) {
  .ps-banner { padding: 10px 12px; gap: 8px; }
  .ps-banner-title { font-size: 13.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
         -webkit-box-orient: vertical; }
  .ps-banner-sub { display: none; }
}

@media (max-width: 640px) {
  .ps-me-text { display: none; }
  .ps-logout span { display: none; }
}
@media (max-width: 380px) {
  .ps-logo { height: 22px; }
  .ps-portal-name { padding: 2px 7px; font-size: 11px; }
}

/* 従来版のマナビカルテ(運用開始日より前の回のスプレッドシート)を開くボタン(2026-10-02 久松さん「従来版のカルテが
   開く場合は、ちょっと文言や見た目を変えたボタンにして、直接スプレッドシートが開くように」)。
   新しいカルテ(青のボタン)と見分けがつくよう、灰色の点線の枠＋別タブの印。家庭の .mp-page a.tp-btn にも負けない強さにする */
a.tp-btn.is-legacy, .mp-page a.tp-btn.is-legacy, .tp-page a.tp-btn.is-legacy {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f4f6f8; border: 1px dashed #8aa0b4; color: #3d5469; }
a.tp-btn.is-legacy:hover { background: #e9eef3; }
a.tp-btn.is-legacy .ps-ico, a.th-link.is-legacy .ps-ico { width: 14px; height: 14px; flex: none; }
a.th-link.is-legacy { display: inline-flex; align-items: center; gap: 4px; color: #3d5469; }

/* 上の「お知らせ／TODO」(全件)は、スマホで1件の高さを詰める(2026-10-02 久松さん「全体的に、きれいなレスポンシブ対応を」。
   「隠さず全件表示」のままだと、スマホの1画面目が TODO だけになっていた)。件数は絞らない。
   種別の札(アラート・依頼…)は左の線の色で分かるのでスマホでは出さない。ボタンの高さ(36px・指で押せる)は変えない */
@media (max-width: 599.98px) {
  .tp-tasks.is-compact { padding: 10px 10px 12px; }
  .tp-tasks.is-compact .tp-tasks-head { margin-bottom: 8px; }
  .tp-tasks.is-compact .tp-task-list { gap: 5px; }
  .tp-tasks.is-compact .tp-task { align-items: center; gap: 8px; padding: 5px 8px; }
  .tp-tasks.is-compact .tp-task-pri { width: 18px; height: 18px; margin-top: 0; font-size: 10px; line-height: 18px; }
  .tp-tasks.is-compact .tp-task-stream { display: none; }
  .tp-tasks.is-compact .tp-task-title { font-size: 13px; line-height: 1.4; }
  .tp-tasks.is-compact .tp-task-line { font-size: 12px; line-height: 1.4; }
}
/* Navi・T-Navi の入口のいちばん下: 本部用の小さいリンク(templates/navi/gate.html。2026-10-23) */
.nv-staff-link { margin: 22px 0 0; text-align: center; font-size: 12px; }
.nv-staff-link a { color: var(--muted, #6b7785); text-decoration: underline; }