@charset "utf-8";
/* ============================================================================
   マイページ 共通スタイル（2026/09/09 全面改訂）

   だれのための画面か：50代以上の受講生が、自分のスマートフォンで使う。
   守っていること
   ・文字は本文 18px 以上、ボタンの文字も 18px 以上。行間は 1.75。
   ・書体は太めで丸みのある「M PLUS Rounded 1c」。細い書体は使わない。
   ・押せるものは「枠線＋うっすらした影」で押せると分かるようにし、絵と言葉を必ず併記する。
     三本線の隠しメニューは置かない。行き先はいつも上の帯に出しておく。
   ・背景と文字の明るさの差を大きく取る（本文 #14202b／白、主ボタン 白／#0b4f8a）。
     加齢で黄ばんで見える目でも読めるよう、薄い青灰の文字は使わない。
   ・大事な知らせ（残りが無い・満席・当日は不可）は色つきの枠（callout）で大きく出す。
   ・角は 0〜2px。グラデーションは使わない。影は「押せる」ことを示す目的にだけ使う。
   ・すべての文字サイズは rem。文字の大きさの設定はルートを変えるだけで全体が拡縮する。
   ============================================================================ */

:root {
    --ink: #14202b;
    --ink-weak: #37485a;
    --ink-faint: #5d6f80;
    --paper: #ffffff;
    --ground: #f2f5f8;

    /* 差し色。白の文字を載せても読める濃さ（コントラスト 8:1 以上） */
    --band: #0b4f8a;
    --band-deep: #083b68;
    --band-ink: #ffffff;

    /* 見出し・選択中の下地 */
    --tint: #e4eef8;
    --tint-deep: #c6dbf0;

    --rule: #9db1c4;
    --rule-light: #d3dee8;
    --cell-head: #e4eef8;

    /* 空き具合の色。教室でお使いの時間割表に合わせた（2026/09/11・ご指示）。
       受講生の方が教室で見慣れている色をそのまま使うため、
       ○=水色 ／ ▲=黄色 ／ ×=赤 ／ お休み=灰色 とする。 */
    --slot-vacant: #33ccff;
    --slot-vacant-ink: #ffffff;
    --slot-vacant-line: #0d8fc4;
    --slot-few: #ffff00;
    --slot-few-ink: #1a1a1a;
    --slot-few-line: #c9b800;
    --slot-full: #f50000;
    --slot-full-ink: #ffffff;
    --slot-full-line: #b30000;
    --slot-closed: #808080;
    /* コマを仕切る線。色の面どうしの境目をはっきりさせる */
    --grid-line: #14202b;

    /* 状態の色。文字として使うときは白地で 6:1 以上 */
    --ok: #186a3e;
    --ok-tint: #e2f3e8;
    --ok-line: #4ea36f;
    --warn: #8a5600;
    --warn-tint: #fff1cf;
    --warn-line: #dba233;
    --alert: #b3261e;
    --alert-tint: #fde9e7;
    --alert-line: #e06b60;

    /* フォーカスは青の上でも見えるオレンジ */
    --focus: #ff8a00;

    /* 画面の下に固定している「文字の大きさ」バーのぶんの高さ。
       このバーはホームにだけ出すので、ほかのページでは 0 にして本文を広く使う
       （body.no-textbar。MyPageMaster が印を付ける）。 */
    --barspace: 52px;

    --shadow: 0 3px 8px rgba(8, 59, 104, 0.24);
    --shadow-soft: 0 2px 5px rgba(8, 59, 104, 0.16);
    --shadow-press: 0 1px 2px rgba(8, 59, 104, 0.24);
}

* { box-sizing: border-box; }

/* すべての文字サイズはこの値を基準（rem）にしている。 */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

:root[data-textsize="large"]  { font-size: 19px; }
:root[data-textsize="xlarge"] { font-size: 22px; }

body {
    margin: 0;
    padding: 0;
    background: var(--ground);
    color: var(--ink);
    /* 書体の並び（2026/09/11 見直し）
       丸ゴシックの「M PLUS Rounded 1c」を先頭にしていたが、この書体は Windows 向けの
       ヒンティングを持たないため、等倍（1倍DPI）のPCで小さい文字がにじんで読みにくかった。
       高DPIのスマートフォンでは問題ないが、教室のPCと確認作業はほぼ等倍で行うため、
       各OSで「きれいに出る書体」が先に当たるよう並べ直した。
         Windows … BIZ UDPGothic（ユニバーサルデザイン書体。字面が大きく判読性が高い）
         iPhone  … ヒラギノ丸ゴ（丸ゴシックのまま。描画も綺麗）
         Android ほか … M PLUS Rounded 1c（Webフォント。高DPIなので綺麗に出る）
       丸みのある印象は iPhone・Android では保たれる。Windows だけ判読性を優先している。 */
    font-family: "BIZ UDPGothic", "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c", "Meiryo", sans-serif;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.75;
}

strong, b, th { font-weight: 700; }

a { color: var(--band-deep); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 4px solid var(--focus);
    outline-offset: 2px;
}

/* 読み上げ専用の文字（画面には出さない） */
.mp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* 絵（インライン SVG）。置いた場所の文字色にそろう */
.mp-ico {
    width: 1.35em;
    height: 1.35em;
    flex: 0 0 auto;
    vertical-align: -0.3em;
}

/* ---- 全体の枠 ---------------------------------------------------------- */

.mp-shell {
    max-width: 920px;
    margin: 0 auto;
    background: var(--paper);
    border-left: 1px solid var(--rule-light);
    border-right: 1px solid var(--rule-light);
    min-height: 100vh;
    padding-bottom: calc(var(--barspace) + 2rem);   /* 下の固定バーに本文が隠れないように */
}

/* 文字の大きさバーを出さないページ（ホーム以外）。下の余白を詰める */
body.no-textbar { --barspace: 0px; }

/* 画面の下に固定のボタンを置くページ（新しく予約する）。そのぶんの高さを空ける */
body.has-cta { --barspace: 76px; }

/* ---- ヘッダー ---------------------------------------------------------- */

/* 画面の上は、帯が4段（ヘッダー／お名前／行き先／画面名）積み重なる。
   1段ずつ少しずつ詰めて、本文が早く始まるようにする（ご指示 2026/09/21）。 */
.mp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--paper);
    color: var(--ink);
    padding: 4px 16px;
    border-bottom: 3px solid var(--band);
}

.mp-header-logo {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
}

.mp-header-title { margin: 0; min-width: 0; }

/* ヘッダーの右端。本日の日付と、その下に「ヘルプ」を積む（2026/09/17）。 */
.mp-header-right {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* 使い方のご案内。迷ったときに必ず目に入るよう、どの画面でも同じ場所に置く。
   主なご利用者が50代以上のため、絵だけにせず「ヘルプ」の字を必ず添える。 */
.mp-help {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--band-deep);
    background: var(--paper);
    border: 2px solid var(--band-deep);
    border-radius: 2px;
    text-decoration: none;
    white-space: nowrap;
}

.mp-help:hover { background: var(--tint); }

.mp-help.is-current {
    color: var(--band-ink);
    background: var(--band-deep);
}

.mp-help-ico { width: 1.25em; height: 1.25em; }

/* 動画の置き場所。幅いっぱいに収め、縦横比はそのまま */
.mp-help-video { margin: 10px 0 0; }

.mp-help-video video {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}

.mp-header-org,
.mp-header-app { display: block; }

.mp-header-org {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--band-deep);
}

.mp-header-app {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}

/* 氏名の帯 */
.mp-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    padding: 3px 16px;
    background: var(--tint);
    border-bottom: 1px solid var(--rule);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ink-weak);
}

.mp-identity .mp-ico { color: var(--band-deep); }

.mp-identity strong {
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 800;
}

.mp-identity-logout {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 4px 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--band-deep);
    background: var(--paper);
    border: 2px solid var(--band);
    border-radius: 2px;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
}

/* ---- 行き先の並び（ナビ） --------------------------------------------- */
/* 絵＋言葉の板を横に並べる。いま開いているページは青の下地と下線で示す。 */

.mp-nav {
    display: grid;
    /* 行き先の数が変わっても等分に並ぶようにしておく（統合・追加のたびに直さない） */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-bottom: 2px solid var(--rule);
    background: var(--paper);
}

.mp-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 56px;
    padding: 5px 4px 4px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    color: var(--band-deep);
    background: var(--paper);
    border-right: 1px solid var(--rule-light);
}

.mp-nav a:last-child { border-right: none; }

.mp-nav a:hover { background: var(--tint); }

.mp-nav-ico {
    width: 1.45em;
    height: 1.45em;
    vertical-align: middle;
}

/* 行き先の言葉は折り返さない。1つでも2行になると、
   並び全体の高さがそのぶん増えてしまうため（2026/09/21）。 */
.mp-nav-label { white-space: nowrap; }

.mp-nav a.is-current {
    background: var(--tint-deep);
    color: var(--ink);
    box-shadow: inset 0 -5px 0 var(--band);
}

/* ---- 本文 -------------------------------------------------------------- */

.mp-main { padding: 8px 16px 18px; }

/* 本日の日付。画面のいちばん右上（ヘッダーの右端）に置く。
   狭い画面では教室名と並びきらないので、短い形へ切り替える。 */
.mp-header-today {
    margin: 0 0 0 auto;
    align-self: flex-start;
    padding-top: 2px;
    font-size: 0.9375rem;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--ink-weak);
}

.mp-today-short { display: none; }

/* 絵と言葉を横に並べ、ひとかたまりで中央へ寄せる。
   絵だけで意味を伝えないよう、必ず言葉を併記する（絵は aria-hidden）。 */
.mp-page-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* 画面名は、上のナビでも同じ言葉が出ている。
       小さめでも迷わないので、そのぶん本文を広く使う（ご指示 2026/09/21）。 */
    font-size: 1.125rem;
    font-weight: 800;
    margin: 0 0 6px;
    padding-bottom: 3px;
    text-align: center;
    border-bottom: 2px solid var(--band);
}

.mp-page-title-ico {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    color: var(--band);
}

.mp-page-lead {
    margin: -4px 0 10px;
    font-size: 1rem;
    color: var(--ink-weak);
}

/* ---- 大きな行き先（ホームの先頭） ------------------------------------- */

.mp-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 12px;
}

/* 枚数が奇数のとき、最後の1枚は横いっぱいに使う（半分だけ残ると落ち着かない） */
.mp-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 先頭がお知らせに差し替わっているとき。
   お知らせは横いっぱい、残りの2枚は左右に並べる。 */
.mp-actions-notice { grid-column: 1 / -1; }
.mp-actions-withnotice > :last-child:nth-child(odd) { grid-column: auto; }
.mp-actions-notice .mp-callout { margin: 0; }

/* ホームの行き先。どれも同じ「押せるもの」なので、色は全部そろえる
   （ネイビー＋白抜き・ご指示 2026/09/21）。
   以前は先頭だけ塗り、あとは白地にしていたが、
   同じ並びの中で濃さが違うと「先頭だけが押すもの」に見えてしまっていた。 */
.mp-action {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 10px 12px;
    color: var(--band-ink);
    background: var(--band);
    border: 2px solid var(--band-deep);
    border-radius: 2px;
    text-decoration: none;
    box-shadow: var(--shadow);
}

.mp-action:hover { background: var(--band-deep); }

.mp-action:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-press);
}

.mp-action-icon .mp-ico {
    width: 2.4em;
    height: 2.4em;
    vertical-align: middle;
}

.mp-action-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mp-action-title {
    font-size: 1.3125rem;
    font-weight: 800;
    line-height: 1.25;
}

.mp-action-sub {
    margin-top: 4px;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    opacity: 0.92;
}

.mp-action-arrow .mp-ico { width: 1.5em; height: 1.5em; }

/* ---- 節（帯見出し） ---------------------------------------------------- */

.mp-section {
    margin: 0 0 14px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
}

.mp-section-head {
    background: var(--tint);
    color: var(--band-deep);
    font-size: 1.0625rem;
    font-weight: 800;
    padding: 6px 12px;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--rule-light);
    border-left: 6px solid var(--band);
}

.mp-section-body { padding: 12px 14px; }

.mp-section-body > :first-child { margin-top: 0; }
.mp-section-body > :last-child { margin-bottom: 0; }

/* 操作の前に添える短い案内 */
.mp-guide {
    margin: 0 0 8px;
    font-size: 1rem;
}

.mp-guide .lg-mark { margin: 0 2px; }

/* ---- 大事な知らせ（callout） ------------------------------------------ */
/* 色・太い枠・絵・見出しの4つで目立たせ、本文で「何をすればよいか」を書く。 */

/* 帯の中の文章は、絵の下まで使い切る（ご指示 2026/09/21）。
   絵は見出しの行に置き、本文は枠の左端から始める。
   見出しが無いものだけ、これまでどおり絵を横に並べる（mp-callout-notitle）。 */
.mp-callout {
    display: block;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 2px solid var(--rule);
    border-radius: 2px;
    background: var(--tint);
    color: var(--ink);
}

.mp-callout-icon .mp-ico {
    width: 1.9em;
    height: 1.9em;
    vertical-align: middle;
}

.mp-callout-text { flex: 1 1 auto; min-width: 0; }

.mp-callout-notitle {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.mp-callout-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.35;
}

.mp-callout-title .mp-callout-icon { flex: 0 0 auto; }

.mp-callout-body { font-size: 1.0625rem; }
.mp-callout-body p { margin: 0 0 6px; }
.mp-callout-body p:last-child { margin-bottom: 0; }

.mp-callout-actions { margin-top: 12px; }
.mp-callout-actions .mp-button { width: auto; min-width: 12em; }

.mp-callout.is-info  { border-color: var(--band); background: var(--tint); }
.mp-callout.is-info  .mp-callout-icon { color: var(--band-deep); }
.mp-callout.is-ok    { border-color: var(--ok-line); background: var(--ok-tint); }
.mp-callout.is-ok    .mp-callout-icon, .mp-callout.is-ok .mp-callout-title { color: var(--ok); }
.mp-callout.is-warn  { border-color: var(--warn-line); background: var(--warn-tint); }
.mp-callout.is-warn  .mp-callout-icon, .mp-callout.is-warn .mp-callout-title { color: var(--warn); }
.mp-callout.is-alert { border-color: var(--alert); background: var(--alert-tint); border-width: 3px; }
.mp-callout.is-alert .mp-callout-icon, .mp-callout.is-alert .mp-callout-title { color: var(--alert); }

ul.mp-plainlist {
    margin: 0;
    padding-left: 1.3em;
}

ul.mp-plainlist > li { margin: 0 0 4px; }

/* 「教室へお電話ください」 */
.mp-phone-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 12px 0 0;
    padding: 10px 12px;
    font-size: 1rem;
    color: var(--ink);
    background: var(--ground);
    border: 1px solid var(--rule-light);
    border-radius: 2px;
}

.mp-phone-note .mp-ico { color: var(--band-deep); margin-top: 0.15em; }

/* ---- 手順の進み具合 ---------------------------------------------------- */

ol.mp-stepbar {
    list-style: none;
    display: flex;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    counter-reset: none;
}

ol.mp-stepbar > li {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 6px 10px;
    border: 2px solid var(--rule-light);
    border-radius: 2px;
    background: var(--paper);
    color: var(--ink-faint);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
}

.mp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: var(--rule-light);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
}

.mp-step-num .mp-ico { width: 1.1em; height: 1.1em; vertical-align: middle; }

ol.mp-stepbar > li.is-current {
    border-color: var(--band);
    background: var(--tint);
    color: var(--ink);
}

ol.mp-stepbar > li.is-current .mp-step-num {
    background: var(--band);
    color: var(--band-ink);
}

ol.mp-stepbar > li.is-done {
    border-color: var(--ok-line);
    color: var(--ok);
}

ol.mp-stepbar > li.is-done .mp-step-num {
    background: var(--ok);
    color: #ffffff;
}

/* ---- 数値の強調（残枠など） -------------------------------------------- */

.mp-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 6px;
}

.mp-figure-value {
    font-size: 2.875rem;
    font-weight: 800;
    line-height: 1.1;
}

.mp-figure-unit {
    font-size: 1.25rem;
    font-weight: 700;
}

.mp-figure-zero { color: var(--alert); }

.mp-note {
    font-size: 1rem;
    color: var(--ink-weak);
    margin: 8px 0 0;
}

/* ---- 受講できる回数（数字の内訳） --------------------------------------- */
/* 当初は枠と玉の絵で示していたが、分かりにくいというご指摘により
   2026/09/11 に絵をやめ、数字の内訳だけにした。 */

/* 【開発用】残枠の確認表示（2026/09/17）。
   残枠は当面お見せしない方針だが、開発中は裏の計算結果を確かめたい。
   受講生向けの情報と取り違えないよう、半透明にして「開発用」と明記する。
   公開前に MyPageConstants.ShowQuotaRemainingForDev を false にすること。 */
.mp-quota-dev {
    opacity: .45;
    border: 1px dashed var(--grid-line, #14202b);
    padding: 10px 12px;
}

.mp-quota-dev-tag {
    margin: 0 0 8px;
    font-size: .8125rem;
    font-weight: 700;
}

.mp-quota-rest {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 0 14px;
    color: var(--band-deep);
}

.mp-quota-rest.is-empty { color: var(--alert); }

.mp-quota-rest-label { font-size: 1.125rem; font-weight: 800; }

.mp-quota-rest-num {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.mp-quota-rest-unit { font-size: 1.25rem; font-weight: 700; }

/* 内訳。項目名を左、回数を右に置いて1項目を1行に収める。
   （定義リストの既定のままだと項目名と回数が別々の行になり、
     縦に倍の高さを使ってしまう） */
dl.mp-quota {
    display: grid;
    grid-template-columns: 1fr auto;
    margin: 0;
    border-top: 1px solid var(--rule-light);
}

dl.mp-quota dt,
dl.mp-quota dd {
    margin: 0;
    padding: 5px 2px;
    line-height: 1.35;
    border-bottom: 1px solid var(--rule-light);
}

dl.mp-quota dd {
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

/* 内訳の子項目（ご予約済み・受けられました・お休みされました） */
dl.mp-quota dt.mp-quota-sub,
dl.mp-quota dd.mp-quota-sub {
    font-size: 0.9375rem;
    color: var(--ink-weak);
    font-weight: 500;
    padding-top: 3px;
    padding-bottom: 3px;
}

dl.mp-quota dt.mp-quota-sub { padding-left: 1.2em; }

/* 合計の行。上に太めの罫線を引いて、計算の答えだと分かるようにする */
dl.mp-quota dt.mp-quota-total,
dl.mp-quota dd.mp-quota-total {
    border-top: 2px solid var(--rule);
    border-bottom: 0;
    padding-top: 7px;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--ink);
}


/* ---- 月送り ------------------------------------------------------------ */

.mp-monthnav {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0 0 10px;
}

.mp-monthnav-btn {
    flex: 0 0 auto;
    min-height: 56px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--band-deep);
    background: var(--paper);
    border: 2px solid var(--band);
    border-radius: 2px;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}

.mp-monthnav-btn:hover { background: var(--tint); }

.mp-monthnav-btn[disabled] {
    color: var(--ink-faint);
    background: var(--ground);
    border-color: var(--rule-light);
    box-shadow: none;
    cursor: default;
}

.mp-monthnav-now {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 4px 6px;
    font-size: 1.1875rem;
    font-weight: 800;
    text-align: center;
    color: var(--ink);
    background: var(--tint);
    border: 1px solid var(--rule);
    border-radius: 2px;
}

/* 見出しと選択欄を1行に並べる（「表示する期間」など） */
.mp-inline-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 0 0 10px;
}

.mp-inline-label {
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 700;
}

.mp-inline-field .mp-select {
    flex: 1 1 12em;
    width: auto;
    min-width: 0;
    max-width: 24em;   /* 広い画面で選択欄だけが間延びしないように */
}

/* ---- 表 ---------------------------------------------------------------- */

.mp-table-wrap { overflow-x: auto; }

/* 時間割用。横スクロールを付けない箱。
   overflow-x を付けると縦もスクロールの箱とみなされ、
   中の見出しを position: sticky で固定しても効かなくなる。 */
.mp-table-wrap-plain { overflow: visible; }

table.mp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

table.mp-table th,
table.mp-table td {
    border: 1px solid var(--rule-light);
    padding: 10px 8px;
    text-align: left;
    vertical-align: top;
}

table.mp-table thead th {
    background: var(--cell-head);
    border-color: var(--rule);
    font-weight: 700;
    white-space: nowrap;
}

table.mp-table td.mp-num { text-align: right; white-space: nowrap; }
table.mp-table td.mp-refund { color: var(--alert); }
table.mp-table tbody tr:nth-child(even) td { background: #f5f9fc; }

table.mp-table-compact th,
table.mp-table-compact td {
    padding: 6px 8px;
    white-space: nowrap;
    vertical-align: middle;
}

table.mp-table th.mp-nw,
table.mp-table td.mp-nw { white-space: nowrap; }

/* ---- 定義リスト -------------------------------------------------------- */

dl.mp-datalist {
    margin: 0;
    display: grid;
    grid-template-columns: 11em 1fr;
    border-top: 1px solid var(--rule-light);
}

dl.mp-datalist dt,
dl.mp-datalist dd {
    margin: 0;
    padding: 7px 12px;
    border-bottom: 1px solid var(--rule-light);
}

dl.mp-datalist dt {
    background: var(--cell-head);
    font-weight: 700;
    border-right: 1px solid var(--rule-light);
}

/* 項目の名前は中身より控えめに。読むのは中身のほうなので */
dl.mp-datalist dt { font-size: 0.9375rem; }

/* ---- 一覧 -------------------------------------------------------------- */

ul.mp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule-light);
}

ul.mp-list > li {
    padding: 14px 4px;
    border-bottom: 1px solid var(--rule-light);
}

.mp-list-main { font-size: 1.1875rem; font-weight: 700; }

.mp-list-sub { font-size: 1rem; color: var(--ink-weak); }

.mp-list-sub-phone {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin-top: 8px;
}

.mp-list-sub-phone .mp-ico { color: var(--band-deep); margin-top: 0.15em; }

/* ---- 次回のご予約（ホームの先頭） --------------------------------------- */

.mp-next { margin: 0 0 4px; }

.mp-next-when {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--band-deep);
}

.mp-next-time {
    margin: 2px 0 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.mp-next .mp-list-action { margin-top: 14px; }

.mp-next-more-head {
    margin: 22px 0 6px;
    padding-top: 16px;
    border-top: 1px solid var(--rule-light);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-weak);
}

/* ---- 進級履歴 ---------------------------------------------------------- */

ol.mp-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
}

ol.mp-steps > li {
    display: grid;
    grid-template-columns: 3.4em 1fr;
    gap: 0 12px;
    border-bottom: 1px solid var(--rule-light);
    padding: 12px 0;
}

ol.mp-steps > li:first-child { border-top: 1px solid var(--rule); }

.mp-step-no {
    counter-increment: step;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-faint);
    padding-top: 2px;
}

.mp-step-no::before { content: counter(step) "."; }

.mp-step-name { font-size: 1.1875rem; font-weight: 700; }
.mp-step-meta { font-size: 1rem; color: var(--ink-weak); }

/* ---- 受講生作品ギャラリー ------------------------------------------------ */
/*
   いまは見本だけ。作品画像を持たないので、サムネは枠と絵記号で場所だけ示す。
   実画像を入れるときは .mp-gal-thumb に img を敷き、絵記号と「見本」の札を外す。
*/

.mp-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* カードは押せる（大きく表示する）のでボタン。見た目はカードのまま */
button.mp-gal-card {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    font-family: inherit;
    color: inherit;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper);
    overflow: hidden;
    cursor: pointer;
}

button.mp-gal-card:focus {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

button.mp-gal-card:hover .mp-gal-more,
button.mp-gal-card:focus .mp-gal-more {
    color: var(--band-deep);
    border-color: var(--band);
}

.mp-gal-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    border-bottom: 1px solid var(--rule-light);
    background: var(--tint);
    color: var(--band);
}

/* 作品の種類ごとに下地の色みだけ変える（中身の絵は共通） */
.mp-gal-doc   { background: #eaf3fb; color: #1c6bb0; }
.mp-gal-sheet { background: #e9f5ee; color: #1f7a4d; }
.mp-gal-print { background: #fdf1ef; color: #c0392b; }
.mp-gal-photo { background: #fdf4e6; color: #a86400; }
.mp-gal-slide { background: #f0eef9; color: #5b4bab; }

.mp-gal-thumb-ico {
    width: 40px;
    height: 40px;
}

.mp-gal-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 1px 6px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink-weak);
}

.mp-gal-body { display: block; padding: 8px 10px 10px; }

.mp-gal-title {
    display: block;
    margin: 0 0 2px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.mp-gal-meta {
    display: block;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ink-weak);
}

/* 「押すと大きくなる」ことを、絵と言葉の両方で示す */
.mp-gal-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 3px 8px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ink-weak);
}

.mp-gal-more-ico { width: 1em; height: 1em; }

/* ---- 作品を大きく表示する枠 --------------------------------------------- */

.mp-lb-back {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200;
    background: rgba(22, 36, 47, 0.55);
}

.mp-lb-back.is-open { display: block; }

.mp-lb {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 210;
    width: 30em;
    max-width: calc(100% - 24px);
    max-height: calc(100% - 24px);
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
}

.mp-lb.is-open { display: block; }

/* 下地の色は .mp-gal-doc 等（種別クラス）が付ける。
   ここで background / color を指定すると、後勝ちで種別の色を潰してしまう。 */
.mp-lb-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15em;
    border-bottom: 1px solid var(--rule-light);
}

.mp-lb-thumb-ico { width: 5em; height: 5em; }

.mp-lb-body { padding: 14px 16px; }

.mp-lb-title {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
}

.mp-lb-meta {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-weak);
}

.mp-lb-close {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 56px;
    padding: 8px;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--band-ink);
    background: var(--band);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

/* ---- 時間割 ------------------------------------------------------------ */

table.mp-timetable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1rem;
    table-layout: fixed;   /* 列を均等割りにして、コマ数が多い教室でも画面内に収める */
    /* 外周も中の仕切りと同じ線でそろえる */
    border-top: 1px solid var(--grid-line);
    border-left: 1px solid var(--grid-line);
}

.mp-timetable-caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 8px;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--ink);
}

/* コマとコマは細い黒線で仕切る。
   水色・黄色・赤の面が隣り合うと、薄い灰色の線では境目が沈んで
   ひとかたまりに見えてしまう。明るさの差をはっきり付けて、
   1コマずつが数えられるようにする（シニアの方が主な利用者のため）。
   線は右と下だけに引く（両側に引くと2本ぶんの太さになる）。 */
table.mp-timetable th,
table.mp-timetable td {
    border: 0;
    border-right: 1px solid var(--grid-line);
    border-bottom: 1px solid var(--grid-line);
    padding: 4px 2px;
    text-align: center;
}

/* 時刻の見出しは、下へたどっても画面の上に残す（ご指示 2026/09/17）。
   行が続くと「いま見ているコマが何時か」が分からなくなるため。
   下地を必ず塗って、下をくぐる行が透けないようにする。 */
table.mp-timetable thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--cell-head);
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.3;
    font-weight: 700;
}

table.mp-timetable thead th .mp-fr,
table.mp-timetable thead th .mp-ft { display: block; }

/* 開始時刻が主役。時限の番号は下に小さく添えるだけ */
table.mp-timetable thead th .mp-ft {
    font-weight: 800;
    font-size: 1rem;
    color: var(--ink);
    letter-spacing: -0.01em;
}

table.mp-timetable thead th .mp-fr {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--ink-weak);
}

table.mp-timetable th.mp-day {
    width: 6.6em;
    text-align: left;
    white-space: nowrap;
    background: var(--cell-head);
    font-weight: 700;
    font-size: 0.9375rem;
    padding-left: 8px;
}

table.mp-timetable tr.mp-sat th.mp-day { color: var(--band-deep); }
table.mp-timetable tr.mp-sun th.mp-day { color: var(--alert); }

table.mp-timetable tr.mp-today th.mp-day {
    box-shadow: inset 5px 0 0 var(--band);
    background: var(--tint-deep);
}

.mp-d-today { font-weight: 800; color: var(--band); }

/* 過ぎた日は薄く */

/* 状況の記号。数字（残席数）は出さない */
table.mp-timetable td {
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.2;
    height: 46px;
}

td.mp-closed {
    background: var(--slot-closed);
    color: transparent;
    cursor: default;
}

td.mp-vacant { color: var(--slot-vacant-ink); background: var(--slot-vacant); }
td.mp-few    { color: var(--slot-few-ink);    background: var(--slot-few); }
td.mp-full   { color: var(--slot-full-ink);   background: var(--slot-full); }

/* ご予約済みは塗らずに枠で示す。空きの水色と見分けがつくようにするため。
   押せるコマは中のボタンが枠を持つので、セル側の枠は付けない（二重になるため）。 */
td.mp-mine {
    background: var(--paper);
    color: var(--band-deep);
}

td.mp-mine:not(.mp-pickable) { box-shadow: inset 0 0 0 3px var(--band); }

td.mp-now {
    background: var(--band);
    color: var(--band-ink);
}

/* ○ と × は線が細く、色地に載せると弱く見える（▲ は塗りつぶしなので目立つ）。
   輪郭を足して太くする。読み込んでいる書体に 900 が無いため、
   font-weight を上げても太くならないので、線を足す方法を使う。 */
.mp-vacant .mp-mark,
.mp-full .mp-mark,
.lg-mark.mp-vacant,
.lg-mark.mp-full {
    -webkit-text-stroke: 0.06em currentColor;
}

/* お選びになったコマのチェック。○ や × と同じく線が細いので、同じだけ太くする */
td.is-picked .mp-mark,
.lg-mark.is-picked { -webkit-text-stroke: 0.06em currentColor; }

/* 押せないコマ（当日など）も、色は薄くしない（ご指示 2026/09/11）。
   本日の行だけ色あせて見え、空いているかどうかが読み取りにくくなるため。
   本日であることは、日にちの欄の帯と「本日」の文字で示している。
   押せるかどうかは、セルがボタンになっているかどうかの違いになる。 */

/* 押せるセル。中の a / button をセルいっぱいに広げ、枠線と影で「押せる」と分かるようにする。
   列と列のあいだは詰める（すき間は、時間が飛んでいるところにだけ空ける）。 */
table.mp-timetable td.mp-pickable { padding: 1px; }

/* 時間が飛んでいるところ（お昼休みなど）に、黒い太線を1本通す。
   表の上から下まで同じ位置に入るので、時間の流れがどこで切れているかが
   ひと目で分かる。空白だけだと、ただ間延びしているようにも見えるため。 */
table.mp-timetable th.mp-gapbefore,
table.mp-timetable td.mp-gapbefore {
    border-left: 4px solid var(--ink);
}

.mp-pick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 800;
    color: inherit;
    background: var(--paper);
    border: 2px solid currentColor;
    border-radius: 2px;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    text-decoration: none;
}

/* 押せるセルは、セルの色でベタに塗る（教室の表と同じ見え方にする）。
   濃い色の枠線は付けない。塗りだけのほうが色が強く出て、遠目でも状態が読める。
   「押せる」ことは、うっすらした影と大きさで示す。 */
td.mp-vacant .mp-pick {
    color: var(--slot-vacant-ink);
    background: var(--slot-vacant);
    border: 0;
}

td.mp-few .mp-pick {
    color: var(--slot-few-ink);
    background: var(--slot-few);
    border: 0;
}

td.mp-vacant .mp-pick:hover { background: #1cb8ef; }
td.mp-few .mp-pick:hover    { background: #f0e800; }

td.mp-mine .mp-pick { border-color: var(--band); background: var(--paper); }

/* 選ばれたコマ。色を反転させ、記号も「選」に変える（色だけに頼らない） */
td.is-picked .mp-pick {
    color: var(--band-ink);
    background: var(--band);
    border-color: var(--band-deep);
}

td.is-picked .mp-pick:hover { background: var(--band-deep); }

/* 日程を変える途中、いま移そうとしているご予約のコマ（2026/09/17）。
   どのご予約の話をしているのかが時間割の上でも分かるよう、枠を目立たせる。 */
td.is-changing .mp-pick {
    border-color: var(--alert);
    border-width: 3px;
    box-shadow: 0 0 0 2px var(--alert) inset;
}

/* ご予約済み（予）を選んだとき（ご指示 2026/09/17）。

   空きコマを選んだとき（上の濃い青＋白い✓）と見た目を分ける。
   同じ色にすると「新しく取るコマ」と「いま入っているご予約」が見分けられず、
   取り消すつもりが予約になっていた、という取り違えが起きるため。

   「予」は消さずに残し、その上に半透明の✓を重ねる。
   何のコマだったかを見失わせずに、選ばれていることだけを足して伝える。 */
td.mp-mine.is-picked .mp-pick {
    position: relative;
    color: var(--band-deep);
    background: var(--tint-deep);
    border-color: var(--band-deep);
}

td.mp-mine.is-picked .mp-pick:hover { background: var(--tint); }

/* ✓は大きく薄く、文字の後ろに敷く。
   同じ大きさ・同じ濃さで重ねると「予」と混ざって、どちらも読めなくなるため。 */
td.mp-mine.is-picked .mp-pick > .mp-mark {
    position: relative;
    z-index: 1;
}

td.mp-mine.is-picked .mp-pick::after {
    content: "✓";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2em;
    font-weight: 800;
    line-height: 1;
    color: rgba(8, 59, 104, 0.28);
    pointer-events: none;
}

.mp-pick:hover { background: var(--tint); }

.mp-pick:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* ---- ログイン・初回登録 ------------------------------------------------- */

/* 端末に覚えている教室・受講生番号（または本人確認できた方）を見せる箱 */
.mp-remembered {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 18px;
    padding: 12px 14px;
    background: var(--tint);
    border: 2px solid var(--band);
    border-radius: 2px;
}

.mp-remembered-label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink-weak);
}

.mp-remembered-value {
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--band-deep);
}

.mp-remembered-sub {
    font-size: 1rem;
    color: var(--ink-weak);
}

/* .mp-remembered-switch（「別の受講生でログインする」）は
   受講生を切り替える場面がまず無いため 2026/09/09 に画面から外した。 */

/* 姓・名のように 2 つ並べる欄 */
.mp-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mp-sublabel {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px;
}

/* 「パスワードを表示する」 */
.mp-showpw {
    min-height: 48px;
    margin-top: 4px;
    font-size: 1rem;
}

.mp-showpw input[type="checkbox"] {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--band);
}

/* パスワードの決まり */
ul.mp-rules {
    margin: 0 0 16px;
    padding-left: 1.3em;
    font-size: 1rem;
    color: var(--ink-weak);
}

ul.mp-rules > li { margin: 0 0 2px; }

.mp-actions-plaza { grid-template-columns: 1fr; }

/* ---- 入力フォーム ------------------------------------------------------ */

.mp-form-row { margin: 0 0 12px; }

.mp-label {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.mp-hint {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink-weak);
    margin: 2px 0 6px;
}

.mp-input,
.mp-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 10px 12px;
    font-size: 1.1875rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--rule);
    border-radius: 2px;
}

.mp-input:focus,
.mp-select:focus { border-color: var(--band); }

.mp-input-group { display: flex; gap: 8px; }

.mp-input-group .mp-select {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

.mp-checks {
    border: 1px solid var(--rule-light);
    padding: 12px;
    border-radius: 2px;
}

.mp-check {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    font-size: 1.0625rem;
    cursor: pointer;
}

.mp-check input[type="checkbox"] {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--band);
}

.mp-checks .mp-hint { margin: 0 0 14px 42px; }
.mp-checks .mp-hint:last-child { margin-bottom: 0; }

/* ---- ボタン ------------------------------------------------------------ */
/* 押せるものは「太い枠線＋うっすらした影」。押すと少し沈む。絵と言葉を併記する。 */

.mp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 64px;
    padding: 12px 20px;
    font-size: 1.3125rem;
    font-weight: 800;
    font-family: inherit;
    line-height: 1.25;
    color: var(--band-ink);
    background: var(--band);
    border: 2px solid var(--band-deep);
    border-radius: 2px;
    box-shadow: var(--shadow);
    cursor: pointer;
    text-decoration: none;
}

.mp-button .mp-ico { width: 1.4em; height: 1.4em; vertical-align: middle; }

/* ---- 「次へ進む」の印 --------------------------------------------------- */
/* 戻るボタンは左端に左向きの矢印を置いている。進むボタンは右端に右向きの矢印を
   そろえ、絵の向きと位置だけでどちらへ動くボタンか分かるようにする
   （ご指示 2026/09/21）。
   ここで完了する（決める）ボタンには付けない。進むのではなく決めるものなので、
   チェック印のままにして区別する。

   矢印は position:absolute で置く。中身を中央ぞろえにしているボタンが多く、
   並びに矢印を割り込ませると文字の中心がずれてしまうため。
   文字に重ならないよう、右側に矢印ぶんの余白をとる。 */
.mp-fwd { position: relative; padding-right: 46px; }

/* 中身を中央ぞろえにしているボタンは、左にも同じだけ余白をとる。
   右だけ空けると文字全体が左へ寄って見えるため。 */
.mp-button.mp-fwd { padding-left: 46px; padding-right: 46px; }

/* 横に2つ並べる前置き付きボタン（ホームの「この予約を｜変更する」）も幅が狭い。
   2択と同じ扱いにして、前置きの行の右上へ小さく置く。
   左右に余白を足すと「変更する」が途中で折り返してしまうため
   （360px の画面で確認）、余白は元のままにする。 */
.mp-button-stack.mp-fwd { padding-left: 20px; padding-right: 20px; }
.mp-button-stack .mp-fwd-arrow { top: 8px; right: 6px; transform: none; }
.mp-button-stack .mp-fwd-arrow .mp-ico { width: 1.1em; height: 1.1em; }

.mp-fwd-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    /* 矢印そのものは押す的ではない。押したときの当たりはボタン全体に任せる */
    pointer-events: none;
}

.mp-fwd-arrow .mp-ico { width: 1.4em; height: 1.4em; }

/* 小さな前置きを1行目に入れるボタン（「この予約を」＋「変更する」）。
   前置きは添えものなので小さく、主の文字は通常のボタンと同じ大きさのまま。 */
.mp-button-stack {
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
    padding-bottom: 10px;
}

.mp-button-stack .mp-button-pre {
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.2;
}

.mp-button-stack .mp-button-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mp-button:hover { background: var(--band-deep); }

.mp-button:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-press);
}

.mp-button-sub {
    color: var(--band-deep);
    background: var(--paper);
    border: 2px solid var(--band);
    min-height: 58px;
    font-size: 1.125rem;
    font-weight: 700;
    box-shadow: var(--shadow-soft);
}

.mp-button-sub:hover { background: var(--tint); }

.mp-button[disabled] {
    color: var(--ink-faint);
    background: var(--ground);
    border-color: var(--rule-light);
    box-shadow: none;
    cursor: default;
}

.mp-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0;
}

.mp-button-row .mp-button { width: auto; flex: 1 1 12em; }

/* 確定の前の2つのボタン。主ボタンを先に、大きく */
.mp-button-row-confirm { margin-top: 20px; }
.mp-button-row-confirm .mp-button { flex: 1 1 100%; }

/* 「この予約を」＋「変更する」「取り消す」。
   ボタンの文字は短くし、折り返さず必ず横1行に等分で並べる。
   何に対する操作かは、ボタンの中の小さな1行目で受ける（ご指示 2026/09/17）。 */
.mp-list-action {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 10px 0 0;
}

.mp-list-action .mp-button {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

/* ---- 確認画面の日時 ---------------------------------------------------- */

.mp-bigslot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 16px;
    padding: 14px 16px;
    background: var(--tint);
    border: 2px solid var(--band);
    border-radius: 2px;
}

.mp-bigslot-date {
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--band-deep);
}

.mp-bigslot-time {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--ink);
}

.mp-bigslot-frame {
    margin-left: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-weak);
}

.mp-change-pair {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 16px;
}

.mp-change-label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink-weak);
}

.mp-change-value {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink-weak);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.mp-change-arrow {
    color: var(--band);
    line-height: 1;
}

.mp-change-arrow .mp-ico {
    width: 2em;
    height: 2em;
    transform: rotate(90deg);
}

.mp-change-to .mp-bigslot { margin-bottom: 0; }

/* ---- 先頭へ戻る（下へたどると現れる） -------------------------------- */

.mp-totop {
    position: fixed;
    right: 10px;
    bottom: calc(var(--barspace) + 88px);
    z-index: 105;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 72px;
    min-height: 62px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    color: var(--band-deep);
    background: var(--paper);
    border: 2px solid var(--band);
    border-radius: 2px;
    box-shadow: var(--shadow);
    cursor: pointer;
}

.mp-totop .mp-ico { width: 24px; height: 24px; vertical-align: middle; }
.mp-totop.is-visible { display: flex; }

/* ---- 文字サイズの切り替えバー（全画面の下部に固定） --------------------- */

.mp-textbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 920px;
    margin: 0 auto;
    padding: 4px 10px;
    background: var(--paper);
    border-top: 2px solid var(--rule);
    box-shadow: 0 -2px 6px rgba(8, 59, 104, 0.10);
}

/* バー自身の文字は拡縮させない。大きくすると「とても大きい」が入りきらず、
   文字を大きくしたい人ほど操作できなくなってしまうため。 */
.mp-textbar-label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    color: var(--ink);
}

.mp-textbar-label .mp-ico { width: 22px; height: 22px; color: var(--band-deep); }

.mp-textbar-buttons {
    flex: 1 1 auto;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.mp-textsize-btn {
    flex: 1 1 0;
    min-width: 0;
    /* ここは毎回押すものではなく、一度決めたら触らない設定なので、
       本文のボタン（56px）より低くしてよい。そのぶん本文を広く使う。 */
    min-height: 40px;
    padding: 4px 2px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    color: var(--band-deep);
    background: var(--paper);
    border: 2px solid var(--band);
    border-radius: 2px;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}

.mp-textsize-btn.is-current {
    color: var(--band-ink);
    background: var(--band);
    border-color: var(--band-deep);
    box-shadow: none;
}

/* ---- 残りの枠（画面の隅に出したまま） ----------------------------------- */

/* 【開発用】仮枠で取られたご予約の数（2026/09/17）。
   赤い点線で囲み、画面の左下に浮かせる。受講生向けの表示と取り違えないための見た目。
   右下は「先頭へ」が使うので、ぶつからないよう左に置く。
   公開前に MyPageConstants.ShowProvisionalSlotDebug を false にすること。 */
.mp-provdebug {
    position: fixed;
    left: 10px;
    bottom: calc(var(--barspace) + 12px);
    z-index: 106;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 84px;
    padding: 5px 8px;
    background: var(--paper);
    border: 2px dashed #d40000;
    color: #d40000;
    line-height: 1.2;
    pointer-events: none;
}

.mp-provdebug-tag { font-size: 11px; font-weight: 700; }

.mp-provdebug-num { font-size: 20px; font-weight: 800; }

.mp-provdebug-unit { font-size: 11px; font-weight: 700; }

.mp-provdebug-break { font-size: 11px; }

.mp-quotatag {
    position: fixed;
    right: 10px;
    bottom: calc(var(--barspace) + 12px);
    z-index: 105;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    min-height: 64px;
    padding: 6px 10px;
    background: var(--paper);
    border: 3px solid var(--band);
    border-radius: 2px;
    color: var(--band-deep);
    text-decoration: none;
    line-height: 1.1;
    box-shadow: var(--shadow);
}

.mp-quotatag-label { font-size: 12px; font-weight: 800; }
.mp-quotatag-value { font-size: 1.75rem; font-weight: 800; }
.mp-quotatag-unit { font-size: 0.875rem; font-weight: 700; margin-left: 1px; }

.mp-quotatag.is-empty {
    border-color: var(--alert);
    color: var(--alert);
    background: var(--alert-tint);
}

@media (min-width: 1240px) {
    .mp-quotatag { right: 28px; bottom: calc(var(--barspace) + 24px); }
    .mp-totop { right: 28px; bottom: calc(var(--barspace) + 104px); }
}

/* ---- メッセージ（ログイン画面など） ------------------------------------ */

.mp-message {
    border: 2px solid var(--rule);
    border-radius: 2px;
    padding: 12px 14px;
    margin: 0 0 20px;
    font-size: 1.0625rem;
    background: var(--tint);
}

.mp-message-error {
    border-color: var(--alert);
    border-width: 3px;
    background: var(--alert-tint);
    color: var(--alert);
    font-weight: 700;
}

.mp-message-alert {
    border-width: 2px;
    border-color: var(--alert);
    background: var(--alert-tint);
}

.mp-empty {
    padding: 18px 4px;
    color: var(--ink-weak);
}

/* ---- 手順の説明（ホーム画面に追加） ------------------------------------ */

ol.mp-howto { margin: 0 0 6px; padding-left: 1.6em; }
ol.mp-howto > li { margin: 0 0 10px; }

.mp-howto-head {
    margin: 18px 0 8px;
    font-weight: 700;
    border-bottom: 1px solid var(--rule-light);
    padding-bottom: 4px;
}

.mp-section-body > .mp-howto-head:first-child { margin-top: 0; }

.mp-url {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--rule-light);
    background: #f5f9fc;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 1rem;
    word-break: break-all;
}

/* ---- 未実装・準備中の明示 ---------------------------------------------- */

.mp-unbuilt {
    border: 2px dashed var(--rule);
    border-radius: 2px;
    background: #f5f9fc;
    padding: 10px 12px;
    margin: 14px 0 0;
    font-size: 1rem;
    color: var(--ink-weak);
}

.mp-unbuilt-tag { font-weight: 800; color: var(--ink); }

/* ---- デバッグ表示（MyPageConstants.DebugShowSql が true のときだけ出る） --- */

.mp-debug {
    border: 2px solid var(--alert);
    padding: 12px 14px;
    margin: 0 0 22px;
    background: var(--alert-tint);
    font-size: 0.9375rem;
}

.mp-debug-head {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--alert);
    border-bottom: 1px solid var(--alert);
    padding-bottom: 4px;
}

.mp-debug-sub { margin: 14px 0 6px; font-weight: 700; }

.mp-debug-sql {
    margin: 0;
    padding: 10px 12px;
    background: var(--paper);
    border: 1px solid var(--rule-light);
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
}

ul.mp-debug-list { margin: 0; padding-left: 1.4em; }
ul.mp-debug-list > li { margin: 0 0 4px; }
.mp-debug table.mp-table { font-size: 0.875rem; }

/* ---- 凡例 -------------------------------------------------------------- */

ul.mp-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 12px 0 0;
    padding: 0;
    font-size: 1rem;
    color: var(--ink);
}

ul.mp-legend > li { display: flex; align-items: center; gap: 6px; }

.lg-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8em;
    height: 1.8em;
    border: 2px solid var(--rule-light);
    border-radius: 2px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.lg-mark.mp-vacant { color: var(--slot-vacant-ink); background: var(--slot-vacant); border-color: var(--slot-vacant); }
.lg-mark.mp-few    { color: var(--slot-few-ink); background: var(--slot-few); border-color: var(--slot-few); }
.lg-mark.mp-full   { color: var(--slot-full-ink); background: var(--slot-full); border-color: var(--slot-full); }
.lg-mark.mp-mine   { color: var(--band-deep); background: var(--paper); border-color: var(--band); border-width: 3px; }
.lg-mark.mp-now    { color: var(--band-ink); background: var(--band); border-color: var(--band-deep); }
.lg-mark.mp-closed { background: var(--slot-closed); }
.lg-mark.is-picked { color: var(--band-ink); background: var(--band); border-color: var(--band-deep); }

/* ---- お選びになったコマ（いくつでも選べる予約） ------------------------- */
/* 時間割で選んだコマをここに積み上げ、最後にまとめて登録する。
   選んだ結果がその場で分かるように、時間割のすぐ下に置く。 */

.mp-picked {
    margin: 0 0 14px;
    background: var(--paper);
    border: 2px solid var(--band);
    border-radius: 2px;
}

.mp-picked-head {
    background: var(--tint);
    color: var(--band-deep);
    font-size: 1.0625rem;
    font-weight: 800;
    padding: 6px 12px;
    border-bottom: 1px solid var(--rule-light);
}

.mp-picked-count { font-size: 1.25rem; }

.mp-picked-body { padding: 10px 12px; }

.mp-picked-body > :first-child { margin-top: 0; }
.mp-picked-body > :last-child { margin-bottom: 0; }

ul.mp-picked-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.mp-picked-list > li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--rule-light);
}

.mp-picked-when { flex: 1 1 auto; font-size: 1.0625rem; font-weight: 700; }

.mp-picked-remove {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 4px 14px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--band-deep);
    background: var(--paper);
    border: 2px solid var(--rule);
    border-radius: 2px;
    cursor: pointer;
}

.mp-picked-remove:hover { background: var(--tint); }

/* 確認・完了の画面に並べるコマ */
ol.mp-picked-confirm {
    margin: 0 0 12px;
    padding: 0 0 0 1.6em;
    font-size: 1.125rem;
    font-weight: 700;
}

ol.mp-picked-confirm > li { padding: 3px 0; }

/* ---- 画面の下に固定するボタン ------------------------------------------- */
/* 時間割は縦に長く、コマを選んだあと「この内容で予約する」まで指で戻るのが手間になる。
   選んでいる間ずっと画面の下に出しておく（ご指示 2026/09/11）。 */

/* 取り消しのときは「日程を変える」「取り消す」の2つが並ぶ（2026/09/17）。
   狭い画面でも押し分けられるよう、残りの幅を等分する。 */
.mp-stickycta-buttons {
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
}

.mp-stickycta-buttons .mp-button {
    flex: 1 1 0;
    min-width: 0;
}

.mp-stickycta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 920px;
    margin: 0 auto;
    padding: 8px 12px;
    background: var(--paper);
    border-top: 2px solid var(--band);
    box-shadow: 0 -2px 6px rgba(8, 59, 104, 0.10);
}

.mp-stickycta-count {
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink-weak);
}

.mp-stickycta-count strong { font-size: 1.375rem; color: var(--ink); }

.mp-stickycta .mp-button { flex: 1 1 auto; width: auto; margin: 0; }

/* ---- お知らせの小窓（ダイアログ） --------------------------------------- */
/* 本文の中に同じお知らせを並べる代わりに、開いた瞬間に1回だけ伝える。
   罫線と帯で作り、影やぼかしは使わない。 */

.mp-dialog-back {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200;
    background: rgba(22, 36, 47, 0.55);
}

.mp-dialog-back.is-open { display: block; }

.mp-dialog {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 210;
    width: 26em;
    max-width: calc(100% - 24px);
    max-height: calc(100% - 24px);
    overflow-y: auto;
    background: var(--paper);
    border: 2px solid var(--rule);
    border-radius: 2px;
}

.mp-dialog.is-open { display: block; }

.mp-dialog-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.35;
    border-bottom: 1px solid var(--rule-light);
}

.mp-dialog-ico { flex: 0 0 auto; }
.mp-dialog-ico .mp-ico { width: 1.5em; height: 1.5em; }

.mp-dialog-body { padding: 12px 14px; font-size: 1.0625rem; line-height: 1.6; }
.mp-dialog-body > :first-child { margin-top: 0; }
.mp-dialog-body > :last-child { margin-bottom: 0; }
.mp-dialog-body p { margin: 0 0 10px; }

.mp-dialog-foot { padding: 0 14px 14px; }

/* 小窓にボタンが2つ並ぶとき（「時間割から選ぶ」「やめる」）は縦に積む。
   横に並べると1つあたりが細くなり、指で押し分けにくいため（2026/09/17）。 */
.mp-dialog-foot .mp-button + .mp-button { margin-top: 8px; }

/* 「いまのご予約は◯◯です」の日時。小窓の中でいちばん読ませたい */
.mp-change-from {
    display: inline-block;
    margin: 4px 0;
    font-size: 1.25rem;
    color: var(--band-deep);
}

/* 種別ごとの色。帯の下地と枠だけを変え、本文は黒のままにする */
.mp-dialog.is-alert { border-color: var(--alert-line); }
.mp-dialog.is-alert .mp-dialog-head { background: var(--alert-tint); color: var(--alert); }

.mp-dialog.is-warn { border-color: var(--warn-line); }
.mp-dialog.is-warn .mp-dialog-head { background: var(--warn-tint); color: var(--warn); }

.mp-dialog.is-ok { border-color: var(--ok-line); }
.mp-dialog.is-ok .mp-dialog-head { background: var(--ok-tint); color: var(--ok); }

.mp-dialog.is-info { border-color: var(--band); }
.mp-dialog.is-info .mp-dialog-head { background: var(--tint); color: var(--band-deep); }

/* ---- フッター ---------------------------------------------------------- */

.mp-footer {
    border-top: 1px solid var(--rule);
    padding: 16px 20px 40px;
    font-size: 1rem;
    color: var(--ink-weak);
}

.mp-footer p { margin: 0 0 6px; }

/* ---- スマートフォン ---------------------------------------------------- */

@media (max-width: 640px) {
    .mp-shell { border-left: none; border-right: none; }

    .mp-main { padding: 14px 12px; }

    /* 作品ギャラリーは2列。1列だと縦に伸びすぎ、3列だと題名が読めない */
    .mp-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .mp-gal-thumb { height: 84px; }
    .mp-gal-thumb-ico { width: 34px; height: 34px; }
    .mp-gal-title { font-size: 0.9375rem; }
    .mp-gal-meta { font-size: 0.8125rem; }
    .mp-gal-more { font-size: 0.75rem; margin-top: 6px; padding: 2px 6px; }
    .mp-lb-thumb { height: 11em; }
    .mp-lb-thumb-ico { width: 4em; height: 4em; }

    /* 行き先は6つを1段に並べる。
       以前は 3列2段で高さ 130px ほどを使っており、ページを開いたとき
       本文（時間割の表など）が画面の外に押し出されていた。
       押しやすさの高さ 56px は保ったまま、段を1つ減らす。 */

    .mp-nav a {
        min-height: 56px;
        font-size: 0.8125rem;
        letter-spacing: -0.02em;
        padding: 5px 1px 4px;
    }

    .mp-nav-ico { width: 1.5em; height: 1.5em; }

    /* 狭い画面では日付を短い形に（教室名と並べるため） */
    .mp-today-long { display: none; }
    .mp-today-short { display: inline; }
    .mp-header-today { font-size: 0.8125rem; padding-top: 3px; }

    .mp-header { gap: 10px; padding: 8px 12px; }
    .mp-header-logo { width: 42px; height: 42px; }
    .mp-header-org { font-size: 1.125rem; }
    .mp-header-app { font-size: 0.9375rem; }

    /* 氏名帯は1行に収める。長い教室名は伏せる（「ご登録内容」で確認できる） */
    .mp-identity { padding: 6px 12px; font-size: 0.9375rem; gap: 4px 10px; }
    .mp-identity strong { font-size: 1.0625rem; }
    .mp-identity-school { display: none; }
    .mp-identity-no { display: none; }
    .mp-identity-logout { min-height: 40px; padding: 2px 8px; font-size: 0.875rem; }

    .mp-page-title { font-size: 1.1875rem; }

    .mp-actions { grid-template-columns: 1fr; gap: 10px; }
    .mp-action { min-height: 76px; padding: 12px 12px 12px 14px; }
    .mp-action-title { font-size: 1.1875rem; }

    .mp-figure-value { font-size: 2.5rem; }

    .mp-quota-rest-num { font-size: 2.75rem; }

    .mp-quotatag {
        right: 8px;
        bottom: calc(var(--barspace) + 6px);
        min-width: 72px;
        min-height: 58px;
        padding: 5px 8px;
    }

    .mp-quotatag-value { font-size: 1.5rem; }

    .mp-totop { right: 8px; bottom: calc(var(--barspace) + 76px); min-width: 66px; min-height: 58px; }

    /* 狭い画面でも項目の名前と中身は横に並べる。
       上下に積むと1項目で2行ぶんの高さを使い、
       「テキストお渡し日」のような添え物が主役より大きく見えてしまうため。
       名前の欄は中身の長さに合わせていちばん短い幅にする（auto）。 */
    dl.mp-datalist { grid-template-columns: auto 1fr; }
    dl.mp-datalist dt,
    dl.mp-datalist dd { padding: 5px 8px; }
    dl.mp-datalist dt { font-size: 0.875rem; line-height: 1.4; }

    .mp-button-row .mp-button { flex: 1 1 100%; }


    .mp-two { grid-template-columns: 1fr; }

    /* 手順は番号を上・言葉を下に積み、言葉が途中で折れないようにする */
    ol.mp-stepbar { gap: 4px; }
    ol.mp-stepbar > li {
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 6px 3px;
        font-size: 0.8125rem;
        text-align: center;
        white-space: nowrap;
    }
    .mp-step-num { width: 1.7em; height: 1.7em; font-size: 0.9375rem; }

    .mp-bigslot-date { font-size: 1.375rem; }
    .mp-bigslot-time { font-size: 1.25rem; }

    /* 表は1件ずつのカードに組み替える（2026/09/11）。
       横スクロールをやめ、長い講座名で何行にも折り返すのも防ぐため。
       列の名前は td の data-label から出す。
       対象は .mp-table-cards で囲んだ表だけ。時間割（日にち × コマ）は
       列を落とせないので、これまでどおり横に送れるままにする。 */
    .mp-table-cards { overflow-x: visible; }

    .mp-table-cards table.mp-table,
    .mp-table-cards table.mp-table tbody { display: block; width: 100%; }

    .mp-table-cards table.mp-table thead { display: none; }

    .mp-table-cards table.mp-table { font-size: 1rem; border: 0; }

    /* 1件が1枚のカード。短い項目は横に並べて、行数を増やさない */
    .mp-table-cards table.mp-table tr {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid var(--rule);
        border-radius: 2px;
        margin: 0 0 8px;
        background: var(--paper);
    }

    .mp-table-cards table.mp-table tbody tr:nth-child(even) td { background: transparent; }

    .mp-table-cards table.mp-table td {
        flex: 1 1 100%;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 10px;
        border: 0;
        border-bottom: 1px solid var(--rule-light);
        text-align: left;
        white-space: normal;
    }

    /* 列の名前を左に、中身を右に */
    .mp-table-cards table.mp-table td:before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-weight: 700;
        color: var(--ink-weak);
    }

    /* 日にち・時間・状態や、回数・使用・残りのような短い項目は
       1行にまとめて置く（1件が縦に長くなりすぎないように） */
    .mp-table-cards table.mp-table td.mp-nw,
    .mp-table-cards table.mp-table td.mp-num {
        flex: 1 1 auto;
        justify-content: flex-start;
        gap: 6px;
        white-space: normal;
        text-align: left;
    }

    /* 日にち・時間・状態は、値だけで何のことか分かる。
       項目名を出さずに1行へまとめる（「8月22日(土) 15:00 受講済み」）。
       講座名や進み具合のように、値だけでは分からないものには項目名を出す。 */
    .mp-table-cards table.mp-table td.mp-cell-nolabel:before { content: none; }

    /* 3つで行の幅いっぱいに広がるようにする。
       内容の幅だけにすると、下の区切り線が途中で切れて崩れて見えるため。 */
    .mp-table-cards table.mp-table td.mp-cell-nolabel {
        flex: 1 1 auto;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* 中身が無い項目（「－」）は出さない。
       表のままの広い画面では列をそろえるために残してある。 */
    .mp-table-cards table.mp-table td.mp-cell-empty { display: none; }

    /* いちばん下の項目の下線は引かない */
    .mp-table-cards table.mp-table tr td:last-child { border-bottom: 0; }

    /* ---- 時間割：夜のコマまで画面内に収める ---- */
    .mp-main .mp-section-body { padding: 12px 8px; }

    table.mp-timetable th,
    table.mp-timetable td { padding: 3px 0; }

    table.mp-timetable td.mp-pickable { padding: 1px; }

    table.mp-timetable th.mp-day {
        width: 4.1em;
        font-size: 0.875rem;
        padding-left: 4px;
    }

    /* 「1日(土)」→「1(土)」、「本日」の字も省いて幅を稼ぐ */
    .mp-d-unit,
    .mp-d-today,
    table.mp-timetable thead th { font-size: 0.8125rem; }

    /* 狭い画面では時限の番号は出さない。見たいのは開始時刻のほうで、
       「1」だけが残っても意味が伝わらないため。 */
    table.mp-timetable thead th .mp-fr { display: none; }

    /* 「本日」は日にちの下へ。横に並べると欄に収まらず、隣のコマに重なる */
    .mp-d-today { display: block; font-size: 0.75rem; line-height: 1.2; }

    /* 列幅が固定なので、文字を大きくすると隣とくっついて読めなくなる。
       開始時刻はここで大きさを決め打ちにする */
    table.mp-timetable thead th .mp-ft { font-size: 12px; font-weight: 800; }
    table.mp-timetable thead th .mp-ft-long { font-size: 11px; letter-spacing: -0.04em; }

    /* 日にちの欄を詰めて、そのぶんを時刻の列に回す */
    table.mp-timetable th.mp-day { width: 5.8em; }

    table.mp-timetable td { font-size: 1.0625rem; height: 44px; }

    .mp-pick { min-height: 42px; border-width: 2px; }

    ul.mp-legend { font-size: 0.875rem; gap: 6px 10px; }
    .lg-mark { width: 26px; height: 26px; font-size: 0.9375rem; }
}

/* ---- 印刷 -------------------------------------------------------------- */

/* ---- とくに狭い端末（幅380px未満）---------------------------------------- */
/* 想定はiPhone XR/11 クラスの 414px だが、375px・360px の端末も残っている。
   コマ数の多い教室では、この幅で「14:30」のような長い時刻が列からはみ出すので、
   日にちの欄をさらに詰めて、時刻も一段小さくする。 */

@media (max-width: 380px) {
    /* 「ご予約変更」は5文字あり、この幅では枠に収まらないので一段小さくする */
    .mp-nav a { font-size: 12px; letter-spacing: -0.04em; }

    table.mp-timetable th.mp-day { width: 5em; padding-left: 5px; }
    table.mp-timetable thead th .mp-ft { font-size: 11px; }
    table.mp-timetable thead th .mp-ft-long { font-size: 10px; }
}

@media print {
    body { background: #ffffff; }
    .mp-nav, .mp-button, .mp-button-row, .mp-textbar,
    .mp-quotatag, .mp-totop, .mp-identity-logout { display: none; }
    .mp-shell { padding-bottom: 0; max-width: none; border: none; }
}

/* ---- 1日1行のご予約一覧（変更・取り消し） ------------------------------ */
/* 「9月18日(金)」と「10:00〜 2コマ」を1つの大きなボタンに収める。
   指で押す的が行まるごとになるよう、ボタンを行いっぱいに広げる（2026/09/21）。 */
.mp-daylist { list-style: none; margin: 0; padding: 0; }

.mp-daylist li + li { margin-top: 8px; }

.mp-daylist-btn {
    display: flex;
    align-items: center;
    /* 左端に予約の絵、そのとなりに日付と時刻を左ぞろえで積む（ご指示 2026/09/21）。
       中央ぞろえだと行ごとに頭の位置がずれ、何日が並んでいるのか追いにくい。 */
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 10px 14px;
    font-family: inherit;
    text-align: left;
    /* 押せるものはネイビーの塗り＋白抜きにそろえる（ご指示 2026/09/21）。
       白地に枠線だけだと「読むもの」に見え、押せることが伝わりにくい。 */
    color: var(--band-ink);
    background: var(--band);
    border: 2px solid var(--band-deep);
    border-radius: 2px;
    cursor: pointer;
}

.mp-daylist-btn.mp-fwd { padding-right: 42px; }

.mp-daylist-btn:hover { background: var(--band-deep); }

.mp-daylist-btn:active { transform: translateY(1px); }

.mp-daylist-ico { flex: 0 0 auto; }
.mp-daylist-ico .mp-ico { width: 1.9em; height: 1.9em; }

.mp-daylist-text { flex: 1 1 auto; min-width: 0; }

.mp-daylist-date { display: block; font-size: 1.1875rem; font-weight: 800; line-height: 1.3; }

.mp-daylist-time { display: block; font-size: 1rem; font-weight: 700; line-height: 1.3; }

/* ---- 取り消すコマを選ぶ（チェックの並び） ------------------------------- */
.mp-checklist { list-style: none; margin: 0 0 14px; padding: 0; }

.mp-checklist li + li { margin-top: 8px; }

.mp-checklist label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 12px;
    font-size: 1.125rem;
    font-weight: 700;
    background: var(--paper);
    border: 2px solid var(--rule-light);
    border-radius: 2px;
    cursor: pointer;
}

.mp-checklist input { width: 26px; height: 26px; }

/* ---- 2択の選択肢（変更・取り消し） ------------------------------------- */
/* 「主」「従」で濃さを変えると、2つから選ぶ場面でも片方だけが押すものに見える。
   選択肢どうしは同じ重さにし、何が起きるかの一言で見分けていただく（2026/09/21）。 */
.mp-choicerow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0 0;
}

.mp-choice {
    display: flex;
    /* 左右に2つ並べるので、中身は縦に積んで中央ぞろえにする
       （横並びのまま絵と言葉を入れると、1つあたりが細くて読めない・2026/09/21）。 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 96px;
    padding: 10px 8px;
    font-family: inherit;
    text-align: center;
    /* 押せるものはネイビーの塗り＋白抜きにそろえる（ご指示 2026/09/21）。
       2つ並ぶ選択肢どうしは、同じ濃さのまま。 */
    color: var(--band-ink);
    background: var(--band);
    border: 3px solid var(--band-deep);
    border-radius: 2px;
    cursor: pointer;
}

.mp-choice:hover { background: var(--band-deep); }

.mp-choice:active { transform: translateY(1px); }

.mp-choice-icon { flex: 0 0 auto; }
.mp-choice-icon .mp-ico { width: 1.9em; height: 1.9em; }

.mp-choice-text { flex: 1 1 auto; min-width: 0; display: block; }

.mp-choice-title {
    display: block;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.3;
}

.mp-choice-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* 2択は左右に並ぶので幅が狭い。矢印を行の高さの真ん中に置くと、
   「このご予約をやめる」のような説明の文字を押し出して折り返してしまう
   （360px の画面で確認）。上の段は絵だけで両脇が空いているので、
   そこへ小さく置く。文字の幅は元のまま残る。 */
.mp-choice .mp-fwd-arrow { top: 8px; right: 6px; transform: none; }
.mp-choice .mp-fwd-arrow .mp-ico { width: 1.1em; height: 1.1em; }

/* ---- 変更前 → 変更後（左右2カラムのビフォーアフター） ------------------ */
/* 上下に積むと縦に伸びるので、左右に並べて一目で見比べられるようにする
   （ご指示 2026/09/21）。日付と時刻は行を分け、狭い画面でも途中で切れないように。 */
.mp-move {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 10px 12px;
    background: var(--paper);
    border: 2px solid var(--band);
    border-radius: 2px;
}

/* 前後で下地をわずかに変え、どちらが「いま」でどちらが「変更後」かを
   読まなくても掴めるようにする（ご指示 2026/09/21）。
   いまのご予約＝済んだほうなので控えめな灰、変更後＝これからなので青み。 */
.mp-move-col {
    min-width: 0;
    padding: 8px 10px;
    border-radius: 2px;
}

.mp-move-from { background: #f2f4f6; }

.mp-move-to { background: var(--tint); }

.mp-move-label {
    display: block;
    margin-bottom: 2px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ink-weak);
}

.mp-move-date,
.mp-move-time {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.mp-move-to .mp-move-date,
.mp-move-to .mp-move-time { color: var(--band-deep); }

.mp-move-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--band);
}

.mp-move-arrow .mp-ico { width: 1.6em; height: 1.6em; }

/* 変えられなかったコマの理由 */
.mp-move-why {
    grid-column: 1 / -1;
    margin: 8px 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--alert);
}

/* 時間割の上に残す「いま移しているご予約」の控え（2026/09/21）。
   本文の説明は小窓に移したので、ここは1行で短く。 */
.mp-movefrom {
    margin: 0 0 10px;
    padding: 8px 10px;
    font-size: 1rem;
    background: var(--tint);
    border-left: 0;
    border: 1px solid var(--band);
    border-radius: 2px;
}

.mp-movefrom strong { font-size: 1.0625rem; color: var(--band-deep); }

/* その日のコマを1行にまとめる（2026/09/21）。
   「11:00 から」を縦に並べると、2コマ・3コマの日で画面が間延びするため。 */
.mp-slotline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 0 4px;
}

.mp-slotline-times {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--band-deep);
}

.mp-slotline-count {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-weak);
}

/* ---- コマごとに変えるときの一覧（2026/09/21） --------------------------- */
/* 右側は、まだ決めていなければ「このコマを変更する」、
   決まっていれば「変更後」。変えたいコマだけを選べるようにするため。 */
.mp-move-pick {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-movepick {
    width: 100%;
    min-height: 56px;
    padding: 8px 6px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--band-ink);
    background: var(--band);
    border: 2px solid var(--band-deep);
    border-radius: 2px;
    cursor: pointer;
}

.mp-movepick:hover { background: var(--band-deep); }
.mp-movepick:active { transform: translateY(1px); }

/* 決まったあとの小さな操作（選び直す・変更をやめる） */
.mp-move-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--rule-light);
}

.mp-rowlink {
    padding: 4px 2px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--band-deep);
    background: none;
    border: 0;
    border-bottom: 2px solid var(--band);
    cursor: pointer;
}

.mp-rowlink:hover { color: var(--band); }