@charset "utf-8";
/* =====================================================================
 * theme.css  ―  Leading Up System 外観刷新レイヤー
 *
 * style.css の「後ろ」に読み込んで、見た目だけを上書きする追加CSS。
 * style.css 自体は一切変更していないので、header.html の
 * <link ... theme.css> の1行を外せば元の見た目に完全に戻る。
 *
 * 対応ブラウザ: モダンブラウザ全般（CSS変数 / flexbox / clamp を使用）
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. デザイントークン（色・角丸・影をここに集約）
 *    配色を変えたいときはこのブロックだけ触れば全ページに反映される。
 * ------------------------------------------------------------------- */
:root {
    --lus-primary:        #2f4acb;  /* 基調のブルー */
    --lus-primary-dark:   #1f3495;
    --lus-primary-tint:   #eef2ff;  /* ホバー等の薄い面 */
    --lus-navy:           #16235c;  /* 見出しの濃紺 */
    --lus-accent:         #00a86b;  /* 合格・肯定 */
    --lus-danger:         #e0364c;  /* 不合格・注意 */
    --lus-red:            #d8121f;  /* 進学塾リードアップのブランドカラー */

    --lus-bg:             #f2f6fc;  /* ページ背景 */
    --lus-surface:        #ffffff;  /* カード面 */
    --lus-border:         #e2e8f4;
    --lus-text:           #1f2b45;
    --lus-muted:          #6b7a99;  /* 補助テキスト */

    --lus-radius:         12px;
    --lus-radius-lg:      18px;
    --lus-shadow-sm:      0 1px 3px rgba(22, 35, 92, .07);
    --lus-shadow:         0 1px 2px rgba(22, 35, 92, .04), 0 8px 24px rgba(22, 35, 92, .07);
    --lus-shadow-lift:    0 6px 20px rgba(22, 35, 92, .14);

    --lus-sidebar-w:      248px;
    --lus-maxw:           1160px;
}

/* ---------------------------------------------------------------------
 * 2. 土台（body / リンク / 画像）
 * ------------------------------------------------------------------- */
body {
    background-color: var(--lus-bg);
    /* style.css の overflow:hidden は横スクロール抑制のためだったが、
       下で -500% のはみ出しレイアウトを解除するので不要。
       残すと position:sticky やスマホ表示の妨げになるため visible に戻す。 */
    overflow: visible;
    font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
                 "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI",
                 Meiryo, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--lus-text);
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

a:link,
a:visited {
    color: var(--lus-primary);
    text-decoration: none;
}

a:hover,
a:active {
    color: var(--lus-primary-dark);
    text-decoration: underline;
}

/* 画像がレイアウト幅を突き破らないように（スマホ対応の要） */
#right img,
.tex img {
    max-width: 100%;
    height: auto;
}

/* <font size="n"> を今風の文字サイズに読み替える。
   タグを消さずに見た目だけ整えるので、PHP側の出力はそのままで済む。 */
#right font[size="1"] { font-size: 11px; }
#right font[size="2"] { font-size: 13px; }
#right font[size="3"] { font-size: 15px; }
#right font[size="4"] { font-size: 17px; }
#right font[size="5"] { font-size: 20px; }
#right font[size="6"] { font-size: 24px; }
#right font[size="7"] { font-size: 28px; }
#right font { line-height: 1.6; }

/* 判定欄などで使われている読みにくい色の指定を、視認性の高い色に読み替える。
   color属性はCSSより優先度が低いので、!important なしで上書きできる。 */
#right font[color="pink"]      { color: var(--lus-danger); font-weight: 700; }   /* 不合格 */
#right font[color="dark-blue"] { color: var(--lus-primary); font-weight: 700; }  /* 満点（dark-blueは無効な色名で従来は黒表示だった） */
#right font[color="gray"]      { color: var(--lus-muted); }                      /* 未受験 */

/* ---------------------------------------------------------------------
 * 3. レイアウト骨格
 *    style.css の「margin:-500% / padding:500%」による疑似フルブリードと
 *    980px 固定幅を解除し、可変幅の2カラムにする。
 * ------------------------------------------------------------------- */
#top {
    width: auto;
    max-width: var(--lus-maxw);
    margin: 0 auto;
    padding: 0 20px 48px;
}

#head,
#main,
#foot {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ヘッダー（HTML+CSSで組んだロゴ。バナー画像は使わない） */
#head {
    height: auto;
    min-height: 0;
    padding: 12px 24px;
    text-align: left;
    background-color: var(--lus-surface);
    border-top: none;
    border-bottom: 1px solid var(--lus-border);
    border-radius: 0 0 var(--lus-radius-lg) var(--lus-radius-lg);
    box-shadow: var(--lus-shadow-sm);
}

#label {
    margin-top: 0;
    text-align: left;
}

.lus-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.lus-hd__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.lus-hd__brand:hover {
    text-decoration: none;
}

/* 進学塾リードアップのブランドカラー（赤）の縦ライン */
.lus-hd__rule {
    flex: 0 0 5px;
    width: 5px;
    align-self: stretch;
    min-height: 42px;
    background-color: var(--lus-red);
    border-radius: 99px;
}

.lus-hd__names {
    display: block;
    min-width: 0;
}

.lus-hd__title {
    display: block;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--lus-navy);
}

.lus-hd__sub {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--lus-muted);
}

/* 進学塾リードアップ ロゴ（原本ai由来の背景透過PNG 944x187）
   実寸の約5倍を読み込んでいるので、高解像度ディスプレイでもくっきり表示される。 */
.lus-hd__logo {
    display: block;
    flex: 0 1 auto;
    width: 190px;
    height: auto;
}

/* サイドバー内に echo される空のステータス表（旧実装の名残）を隠す */
#left table {
    display: none;
}

/* 本体：サイドバーと本文の2カラム */
#main {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 0 0;
    background-color: transparent;
    border: none;
}

/* メニューを左カラム、本文を右カラムにする。
   右メニューに戻したい場合は下の2つの order を入れ替えるだけでよい。 */
#left  { order: 1; }
#right { order: 2; }

#right {
    flex: 1 1 auto;
    min-width: 0;                 /* 長いテーブルがある子で潰れないように */
    width: auto;
    margin: 0;
    padding: 28px 32px;
    background-color: var(--lus-surface);
    border: 1px solid var(--lus-border);
    border-radius: var(--lus-radius-lg);
    box-shadow: var(--lus-shadow);
}

.tex {
    width: auto;
    padding: 0;
}

/* フッター */
#foot {
    margin-top: 24px;
    padding: 20px 0 0;
    font-size: 11px;
    font-weight: 400;
    color: var(--lus-muted);
    background-color: transparent;
    border: none;
}

/* ---------------------------------------------------------------------
 * 4. サイドメニュー
 * ------------------------------------------------------------------- */
#left {
    float: none;
    flex: 0 0 var(--lus-sidebar-w);
    width: var(--lus-sidebar-w);
    margin: 0;
    background: transparent;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cfd8e8 transparent;
}

#left::-webkit-scrollbar {
    width: 6px;
}

#left::-webkit-scrollbar-thumb {
    background-color: #cfd8e8;
    border-radius: 3px;
}

#left::-webkit-scrollbar-track {
    background: transparent;
}

#left ul {
    padding: 8px;
    margin: 0;
    list-style: none;
    background-color: var(--lus-surface);
    border: 1px solid var(--lus-border);
    border-radius: var(--lus-radius-lg);
    box-shadow: var(--lus-shadow);
}

#left li {
    padding: 0;
    margin: 0 0 2px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    border: none;
}

#left li a {
    display: block;
    padding: 10px 12px;
    color: var(--lus-text);
    background-color: transparent;
    border-radius: 10px;
    transition: background-color .15s ease, color .15s ease;
}

#left li a:hover {
    color: var(--lus-primary-dark);
    background-color: var(--lus-primary-tint);
    text-decoration: none;
}

/* 現在開いているページ */
#left li span.icon {
    display: block;
    margin: 0;
    padding: 10px 12px;
    color: #fff;
    background-color: var(--lus-primary);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(47, 74, 203, .28);
}

/* 「メニュー」「中１」などの見出し行 */
#left li span.label {
    display: block;
    margin: 0;
    padding: 16px 12px 6px;
    color: var(--lus-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: left;
    background-color: transparent;
    border: none;
}

#left li:first-child span.label {
    padding-top: 6px;
}

#left li span.blocked {
    display: block;
    margin: 0;
    padding: 10px 12px;
    color: var(--lus-muted);
    background-color: #f1f4f9;
    border-radius: 10px;
}

/* ---------------------------------------------------------------------
 * 5. スマホ用メニュー開閉（JavaScript不要のチェックボックス方式）
 *    header.html が出力する #lus-nav-toggle / .lus-nav-btn と対になる。
 * ------------------------------------------------------------------- */
#lus-nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lus-nav-btn {
    display: none;                 /* PCでは出さない（下のmedia queryで解放） */
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--lus-primary-dark);
    background-color: var(--lus-surface);
    border: 1px solid var(--lus-border);
    border-radius: var(--lus-radius);
    box-shadow: var(--lus-shadow-sm);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.lus-nav-btn::before {
    content: "";
    width: 18px;
    height: 12px;
    flex: 0 0 18px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    background:
        linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

/* ---------------------------------------------------------------------
 * 6. 見出し
 * ------------------------------------------------------------------- */
#right h2 {
    position: relative;
    margin: 0 0 24px;
    padding: 0 0 14px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    color: var(--lus-navy);
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 2px solid var(--lus-border);
}

#right h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 64px;
    height: 2px;
    background-color: var(--lus-primary);
}

#right h3 {
    position: relative;
    height: auto;
    margin: 40px 0 16px;
    padding: 0 0 0 14px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--lus-navy);
    border-left: 4px solid var(--lus-primary);
    border-bottom: none;
}

#right h3.green {
    margin: 32px 0 14px;
    padding: 0 0 0 14px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--lus-accent);
    border-left: 4px solid var(--lus-accent);
    border-bottom: none;
}

#right h4 {
    margin: 28px 0 12px;
    padding: 0 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--lus-text);
    border-left: 3px solid #ff8a3d;
}

#right h5,
#right h6 {
    margin: 20px 0 10px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--lus-text);
    background-color: #f1f4f9;
    border-left: 3px solid var(--lus-muted);
    border-radius: 0 6px 6px 0;
}

/* ---------------------------------------------------------------------
 * 7. ボタン
 * ------------------------------------------------------------------- */
#right a.btn-flat,
#right a.btn-toLecture {
    display: inline-block;
    padding: 14px 40px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: var(--lus-primary);
    border: none;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(47, 74, 203, .28);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    overflow: visible;
}

#right a.btn-toLecture {
    background: var(--lus-accent);
    box-shadow: 0 4px 14px rgba(0, 168, 107, .28);
}

#right a.btn-flat:hover,
#right a.btn-toLecture:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--lus-shadow-lift);
}

#right a.btn-flat:hover {
    background: var(--lus-primary-dark);
}

/* 旧デザインの拡大する円エフェクトは無効化 */
#right a.btn-flat::before,
#right a.btn-toLecture::before,
#right a.btn-flat:hover::before,
#right a.btn-toLecture:hover::before {
    display: none;
    content: none;
}

/* ---------------------------------------------------------------------
 * 8. ログインフォーム
 * ------------------------------------------------------------------- */
#right .lus-login {
    max-width: 400px;
    margin: 8px auto 0;
    padding: 28px;
    text-align: left;
    background-color: var(--lus-surface);
    border: 1px solid var(--lus-border);
    border-radius: var(--lus-radius-lg);
    box-shadow: var(--lus-shadow);
}

#right .lus-login__label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--lus-muted);
}

#right .lus-login input[type="text"],
#right .lus-login input[type="email"],
#right .lus-login input[type="password"] {
    display: block;
    width: 100%;
    padding: 13px 14px;
    font-size: 16px;          /* 16px未満だとiOSで自動ズームするため下げない */
    font-family: inherit;
    color: var(--lus-text);
    background-color: #fff;
    border: 1.5px solid var(--lus-border);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#right .lus-login input[type="text"]:focus,
#right .lus-login input[type="email"]:focus,
#right .lus-login input[type="password"]:focus {
    outline: none;
    border-color: var(--lus-primary);
    box-shadow: 0 0 0 3px rgba(47, 74, 203, .16);
}

/* 伏せ字表示。type="password" を使うとブラウザがパスワード保存を提案してしまうため、
   type="text" のまま見た目だけ伏せ字にしている（塾の共用タブレット対策）。
   「パスワードを表示する」ON でこのクラスが外れ、素の文字に戻る。 */
#right .lus-login input.lus-login__masked {
    -webkit-text-security: disc;
    text-security: disc;
    letter-spacing: .12em;
}

#right .lus-login__toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lus-muted);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

#right .lus-login__toggle input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--lus-primary);
    cursor: pointer;
}

#right .lus-login input[type="submit"] {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background-color: var(--lus-primary);
    border: none;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(47, 74, 203, .28);
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

#right .lus-login input[type="submit"]:hover {
    background-color: var(--lus-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--lus-shadow-lift);
}

/* ---------------------------------------------------------------------
 * 9. ログイン中バナー / ステータスメッセージ
 * ------------------------------------------------------------------- */
#right .lus-greeting {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 24px;
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--lus-primary) 0%, var(--lus-primary-dark) 100%);
    border-radius: var(--lus-radius-lg);
    color: #fff;
    box-shadow: 0 6px 18px rgba(47, 74, 203, .22);
}

#right .lus-greeting__name {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

#right .lus-greeting__role {
    font-size: 13px;
    opacity: .9;
}

#right .lus-status {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: var(--lus-text);
}

#right .lus-status--error {
    padding: 14px 16px;
    color: var(--lus-danger);
    background-color: #fdf0f2;
    border: 1px solid #f7d4da;
    border-radius: var(--lus-radius);
}

#right .lus-status--success {
    padding: 14px 16px;
    color: #0b7350;
    background-color: #eefaf4;
    border: 1px solid #c9ecdd;
    border-radius: var(--lus-radius);
}

/* ---------------------------------------------------------------------
 * 10. お知らせボックス（.box10）
 * ------------------------------------------------------------------- */
#right .box10 {
    width: auto;
    margin: 0 0 28px;
    padding: 18px 22px;
    font-weight: 600;
    color: var(--lus-text);
    background-color: #f7fbff;
    border: 1px solid var(--lus-border);
    border-top: none;
    border-left: 4px solid var(--lus-primary);
    border-radius: 0 var(--lus-radius) var(--lus-radius) 0;
    box-shadow: var(--lus-shadow-sm);
}

/* ---------------------------------------------------------------------
 * 11. リンクタイル（宿題確認・テスト結果・英語・数学）
 *     以前は 300x300 の PNG 画像。HTML+CSS に置き換えたので拡大してもぼけず、
 *     画面幅に応じて 2列 ⇄ 1列 に自動で切り替わる。
 * ------------------------------------------------------------------- */
#right .lus-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin: 0 0 14px;
}

#right .lus-tile {
    /* タイルごとのアクセント色。下の --variant で上書きする */
    --tile-accent: var(--lus-primary);
    --tile-tint: var(--lus-primary-tint);

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    color: var(--lus-text);
    text-decoration: none;
    background-color: var(--lus-surface);
    border: 1px solid var(--lus-border);
    border-radius: var(--lus-radius-lg);
    box-shadow: var(--lus-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#right .lus-tile:hover,
#right .lus-tile:focus {
    color: var(--lus-text);
    text-decoration: none;
    transform: translateY(-2px);
    border-color: var(--tile-accent);
    box-shadow: var(--lus-shadow-lift);
}

#right .lus-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    color: var(--tile-accent);
    background-color: var(--tile-tint);
    border-radius: 11px;
}

#right .lus-tile__icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

#right .lus-tile__body {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

#right .lus-tile__title {
    display: block;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--lus-navy);
}

#right .lus-tile__desc {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--lus-muted);
}

#right .lus-tile__arrow {
    display: flex;
    flex: 0 0 auto;
    color: #c3ccdd;
    transition: color .15s ease, transform .15s ease;
}

#right .lus-tile__arrow svg {
    width: 17px;
    height: 17px;
    display: block;
}

#right .lus-tile:hover .lus-tile__arrow {
    color: var(--tile-accent);
    transform: translateX(2px);
}

/* 教科・用途ごとの色分け。みんなのクリア情報の色（英語=オレンジ / 数学=赤）と揃えている */
#right .lus-tile--homework  { --tile-accent: #0a9b68; --tile-tint: #e7f7f0; }
#right .lus-tile--testcheck { --tile-accent: #2f4acb; --tile-tint: #eef2ff; }
#right .lus-tile--english   { --tile-accent: #d97706; --tile-tint: #fdf3e3; }
#right .lus-tile--math      { --tile-accent: #d9304a; --tile-tint: #fdecef; }
/* ---------------------------------------------------------------------
 * 12. みんなのクリア情報（教科別カラム）
 *     データがある教科だけカラムを出すので、英数だけの時期は2カラム、
 *     理科・社会が動いている時期は自動で3〜4カラムに増える。
 * ------------------------------------------------------------------- */
#right .lus-clear {
    margin: 0 0 24px;
    background-color: var(--lus-surface);
    border: 1px solid var(--lus-border);
    border-radius: var(--lus-radius-lg);
    box-shadow: var(--lus-shadow-sm);
    overflow: hidden;
}

#right .lus-clear__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    padding: 13px 18px;
    background-color: #f7f9fd;
    border-bottom: 1px solid var(--lus-border);
}

#right .lus-clear__title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--lus-navy);
}

#right .lus-clear__note {
    font-size: 11px;
    font-weight: 600;
    color: var(--lus-muted);
}

#right .lus-clear__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 実際に表示する教科数ぶんのカラムを作る（PHP側が --N のクラスを付ける）。
   英数だけの時期は2カラム、理社が動いている時期は自動で3〜4カラムになる。 */
#right .lus-clear__grid--1 { grid-template-columns: minmax(0, 1fr); }
#right .lus-clear__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#right .lus-clear__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#right .lus-clear__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#right .lus-clear__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* カラムが多いときは文字を少し詰める */
#right .lus-clear__grid--4 .lus-clear__exam,
#right .lus-clear__grid--5 .lus-clear__exam {
    font-size: 11.5px;
}

#right .lus-clear__grid--4 .lus-clear__item,
#right .lus-clear__grid--5 .lus-clear__item {
    padding: 9px 12px;
}

#right .lus-clear__col {
    --clear-accent: var(--lus-primary);
    min-width: 0;
    border-left: 1px solid var(--lus-border);
}

#right .lus-clear__col:first-child {
    border-left: none;
}

#right .lus-clear__subject {
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--clear-accent);
    border-bottom: 2px solid var(--clear-accent);
}

#right .lus-clear__list {
    margin: 0;
    padding: 0;
    list-style: none;
    /* 1教科30件まで出すので、カラムが伸びすぎないよう中でスクロールさせる。
       件数がこれより少ないときはスクロールバーは出ない。 */
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cfd8e8 transparent;
}

#right .lus-clear__list::-webkit-scrollbar {
    width: 6px;
}

#right .lus-clear__list::-webkit-scrollbar-thumb {
    background-color: #cfd8e8;
    border-radius: 3px;
}

#right .lus-clear__list::-webkit-scrollbar-track {
    background: transparent;
}

#right .lus-clear__item {
    padding: 10px 16px;
    border-bottom: 1px solid #f0f3f9;
}

#right .lus-clear__item:last-child {
    border-bottom: none;
}

#right .lus-clear__exam {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--lus-text);
    word-break: break-word;
}

#right .lus-clear__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.5;
}

#right .lus-clear__name {
    font-weight: 700;
    color: var(--lus-muted);
}

#right .lus-clear__score {
    font-weight: 800;
    color: var(--clear-accent);
}

#right .lus-clear__when {
    margin-left: auto;
    color: #9aa8c0;
    white-space: nowrap;
}

/* 満点合格のときだけ付く金色のバッジと、行のほんのり色づけ */
#right .lus-clear__perfect {
    padding: 1px 8px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: .02em;
    white-space: nowrap;
    color: #8a5a00;
    background-color: #fdf1d4;
    border: 1px solid #f0d9a2;
    border-radius: 999px;
}

#right .lus-clear__item--perfect {
    background-color: #fffcf3;
}

#right .lus-clear__item--perfect .lus-clear__score {
    color: #b8860b;
}

#right .lus-clear__empty {
    margin: 0;
    padding: 22px 18px;
    font-size: 13px;
    text-align: center;
    color: var(--lus-muted);
}

/* 教科ごとの色。リンクタイルやテスト結果の色分けと揃えている */
#right .lus-clear__col--english { --clear-accent: #d97706; }
#right .lus-clear__col--math    { --clear-accent: #d9304a; }
#right .lus-clear__col--science { --clear-accent: #0a9b68; }
#right .lus-clear__col--social  { --clear-accent: #7c5cd6; }
#right .lus-clear__col--other   { --clear-accent: #6b7a99; }

/* 狭い画面では段数を減らす。カラムの区切りは左線ではなく上線にする */
@media (max-width: 1000px) {
    #right .lus-clear__grid,
    #right .lus-clear__grid--3,
    #right .lus-clear__grid--4,
    #right .lus-clear__grid--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #right .lus-clear__col:nth-child(-n+2) {
        border-top: none;
    }

    #right .lus-clear__col:nth-child(odd) {
        border-left: none;
    }

    #right .lus-clear__col {
        border-top: 1px solid var(--lus-border);
    }
}

@media (max-width: 700px) {
    #right .lus-clear__grid,
    #right .lus-clear__grid--2,
    #right .lus-clear__grid--3,
    #right .lus-clear__grid--4,
    #right .lus-clear__grid--5 {
        grid-template-columns: minmax(0, 1fr);
    }

    #right .lus-clear__col {
        border-left: none;
        border-top: 1px solid var(--lus-border);
    }

    #right .lus-clear__col:first-child {
        border-top: none;
    }
}

/* ---------------------------------------------------------------------
 * 13. テーブル類
 * ------------------------------------------------------------------- */
#right table {
    max-width: 100%;
}

/* 受験履歴・宿題提出状況テーブル */
#right .rireki-table {
    /* カード幅いっぱいに収める。width指定が無いと「テスト名」などの長い列に
       押し広げられて、カードの外（サイドメニューの下）まではみ出してしまう。 */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    font-size: 13px;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--lus-surface);
    border: 1px solid var(--lus-border);
    border-radius: var(--lus-radius);
    box-shadow: var(--lus-shadow-sm);
    overflow: hidden;
}

#right .rireki-table tr {
    height: auto;
}

#right .rireki-table th,
#right .rireki-table td {
    padding: 10px 14px;
    text-align: center;
    vertical-align: middle;
}

/* 2列目以降は「20」「1回目」「合格」「2026-08-08 16:55」など短い値なので、
   途中で折り返させない（折り返すと「満/点」のように縦に潰れて読めなくなる）。 */
#right .rireki-table th,
#right .rireki-table td {
    white-space: nowrap;
    line-height: 1.55;
}

/* 1列目は「テスト名」「宿題ページ」で非常に長い。
   ここを nowrap にするとテーブルが横に伸びてカードの外へはみ出すので、必ず折り返す。 */
#right .rireki-table th:first-child,
#right .rireki-table td:first-child {
    min-width: 170px;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

#right .rireki-table th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--lus-navy);
    background: #f7f9fd;
    border-bottom: 1px solid var(--lus-border);
}

#right .rireki-table tr:nth-child(odd) {
    background: transparent;
}

#right .rireki-table tbody tr:nth-child(even) {
    background: #fafbfe;
}

#right .rireki-table td {
    border-bottom: 1px solid #f0f3f9;
}

#right .rireki-table tbody tr:last-child td {
    border-bottom: none;
}

/* 「【このテストの受験履歴】」ラベル：左右の二重線をやめて落ち着いたピル型に */
#right .rirekiTag {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--lus-muted);
    background-color: #f1f4f9;
    border-radius: 999px;
}

#right .rirekiTag::before,
#right .rirekiTag::after {
    display: none;
    content: none;
}

/* 「〇〇さんのテスト受講状況」：斜線の下線をやめてシンプルに */
#right .studentName {
    margin: 0 0 8px;
    padding: 0 0 16px;
    text-align: center;
    color: var(--lus-navy);
    border-bottom: 1px solid var(--lus-border);
}

#right .studentName::after {
    display: none;
    content: none;
}


/* ---------------------------------------------------------------------
 * 14. 素のボタン（ログアウト・登録・検索など）
 *     <input type="submit"> を直書きしているページが多いので、
 *     クラスが付いていないボタンにまとめて既定のスタイルを当てる。
 *     Bootstrap(.btn) / jQuery UI(.ui-button) / DataTables(.dt-button) が
 *     付けたボタンは、あちらのCSSに任せるため除外する。
 * ------------------------------------------------------------------- */
#right input[type="submit"]:not(.btn):not(.ui-button):not(.dt-button),
#right input[type="button"]:not(.btn):not(.ui-button):not(.dt-button),
#right button[type="submit"]:not(.btn):not(.ui-button):not(.dt-button):not(.lus-picker__btn) {
    display: inline-block;
    padding: 9px 22px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.5;
    letter-spacing: .02em;
    color: #fff;
    background-color: var(--lus-primary);
    border: none;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(47, 74, 203, .22);
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

#right input[type="submit"]:not(.btn):not(.ui-button):not(.dt-button):hover,
#right input[type="button"]:not(.btn):not(.ui-button):not(.dt-button):hover,
#right button[type="submit"]:not(.btn):not(.ui-button):not(.dt-button):not(.lus-picker__btn):hover {
    background-color: var(--lus-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--lus-shadow-lift);
}

#right input[type="submit"]:not(.btn):active,
#right input[type="button"]:not(.btn):active,
#right button[type="submit"]:not(.btn):not(.lus-picker__btn):active {
    transform: translateY(0);
}

/* 取り消し系は控えめな見た目にする */
#right input[type="reset"]:not(.btn) {
    display: inline-block;
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    color: var(--lus-muted);
    background-color: var(--lus-surface);
    border: 1px solid var(--lus-border);
    border-radius: 9px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* ---------------------------------------------------------------------
 * 15. テスト・宿題の選択ボタン一覧（.lus-picker）
 *
 *     もとは <table> の2列セルに <input type="submit"> を並べる作りで、
 *     テスト名が長いと折り返せず、カードの外まではみ出していた。
 *
 *     ・PHP側は <input type="submit"> を <button type="submit"> に変えただけ。
 *       name / value はそのままなので、送信される値は従来と同じ。
 *       （button はラベルを折り返せるので、長いテスト名でも収まる）
 *     ・並びは display:contents で table/tr を透過させ、
 *       <td> をそのままグリッドの升目として扱っている。
 *       display:contents 非対応の古いブラウザでは、従来どおりの2列テーブルとして表示される。
 * ------------------------------------------------------------------- */
#right table.lus-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
    width: 100%;
    margin: 0 0 10px;
    border-collapse: collapse;
}

#right table.lus-picker > tbody,
#right table.lus-picker tr {
    display: contents;
}

#right table.lus-picker td {
    display: block;
    padding: 0;
    border: none;
    background: none;
}

#right table.lus-picker form {
    margin: 0;
}

#right .lus-picker__btn {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.55;
    text-align: left;
    /* 長いテスト名を折り返す。input では効かないので button に変えてある */
    white-space: normal;
    word-break: break-word;
    color: var(--lus-text);
    background-color: var(--lus-surface);
    border: 1px solid var(--lus-border);
    border-radius: 10px;
    box-shadow: var(--lus-shadow-sm);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

#right .lus-picker__btn:hover {
    color: var(--lus-primary-dark);
    background-color: var(--lus-primary-tint);
    border-color: var(--lus-primary);
    box-shadow: var(--lus-shadow);
}

#right .lus-picker__btn:active {
    box-shadow: var(--lus-shadow-sm);
}

@media (max-width: 600px) {
    #right table.lus-picker {
        grid-template-columns: 1fr;
    }
}


/* ---------------------------------------------------------------------
 * 16. ページ内のタブメニュー（#category）
 *
 *     show_menu.php が出力する
 *       <table class="table_style_menu"><tr><td><div id="category"><ul>…
 *     を、今風のセグメント型タブに見せる。HTMLはそのまま（PHPの変更は不要）。
 *
 *     ・入れ物の <table> は display:block にして、745px固定幅を解除する
 *     ・現在のページは <span class="icon">、他は <a> で出力されるので、
 *       それぞれ「選択中のタブ」「未選択のタブ」として色を変える
 *     ・タブが多いときは折り返す（中1〜中3で6個以上並ぶページがあるため）
 * ------------------------------------------------------------------- */
#right .table_style_menu,
#right .table_style_menu tbody,
#right .table_style_menu tr,
#right .table_style_menu td {
    display: block;
    width: auto;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    border-radius: 0;
}

#right #category {
    margin: 0 0 22px;
}

#right #category ul {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px;
    margin: 0;
    list-style: none;
    background-color: #f1f4f9;
    border-radius: 12px;
}

#right #category li {
    display: block;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    font-size: inherit;
}

#right #category ul li a,
#right #category ul li span.icon {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .01em;
    white-space: nowrap;
    border-radius: 9px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

/* 未選択のタブ */
#right #category ul li a {
    color: var(--lus-muted);
    background: none;
}

#right #category ul li a:hover {
    padding: 8px 16px;
    color: var(--lus-primary-dark);
    background-color: var(--lus-surface);
    text-decoration: none;
}

/* 選択中のタブ */
#right #category ul li span.icon {
    color: #fff;
    background-color: var(--lus-primary);
    box-shadow: 0 2px 6px rgba(47, 74, 203, .26);
}

@media (max-width: 600px) {
    #right #category ul {
        gap: 2px;
        padding: 3px;
    }

    #right #category ul li a,
    #right #category ul li span.icon {
        padding: 7px 12px;
        font-size: 12.5px;
    }

    #right #category ul li a:hover {
        padding: 7px 12px;
    }
}

/* ---------------------------------------------------------------------
 * 17. レスポンシブ
 * ------------------------------------------------------------------- */

/* タブレット以下：サイドバーを畳んでボタンで開閉 */
@media (max-width: 900px) {
    #top {
        padding: 0 14px 40px;
    }

    #head {
        padding: 10px 16px;
    }

    .lus-hd__logo {
        width: 160px;
    }

    /* 開閉ボタンは未ログイン時はPHP側で出力していないので、ここでは常に表示でよい */
    .lus-nav-btn {
        display: flex;
    }

    #main {
        display: block;
        padding-top: 14px;
    }

    #left {
        display: none;
        position: static;
        float: none;
        width: 100%;
        max-height: none;
        margin: 10px 0 0;
        overflow: visible;
    }

    /* メニューボタンが押されたときだけサイドバーを出す */
    #lus-nav-toggle:checked ~ #main #left {
        display: block;
    }

    #left ul {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 4px;
    }

    #left li {
        font-size: 13px;
    }

    /* 見出し行（メニュー/中１…）はグリッドの行いっぱいに */
    #left li:has(span.label) {
        grid-column: 1 / -1;
    }

    #right {
        margin-top: 14px;
        padding: 22px 18px;
        border-radius: var(--lus-radius-lg);
    }

    /* 幅が足りないときは、はみ出させずにテーブル自体を横スクロールさせる */
    #right .rireki-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #right .rireki-table th:first-child,
    #right .rireki-table td:first-child {
        min-width: 190px;
    }
}

/* スマートフォン */
@media (max-width: 600px) {
    body {
        font-size: 14.5px;
    }

    #top {
        padding: 0 10px 32px;
    }

    #right {
        padding: 18px 14px;
    }

    /* ヘッダー：バッジ＋サービス名だけ残し、塾ロゴは幅に応じて縮める */
    .lus-hd {
        gap: 10px;
    }

    .lus-hd__brand {
        gap: 9px;
    }

    .lus-hd__rule {
        flex: 0 0 4px;
        width: 4px;
        min-height: 34px;
    }

    .lus-hd__title {
        font-size: 16px;
    }

    .lus-hd__sub {
        font-size: 10px;
        letter-spacing: .04em;
    }

    .lus-hd__logo {
        width: 130px;
        min-width: 100px;
    }

    #right h2 {
        font-size: 18px;
        margin-bottom: 20px;
    }

    #right h3 {
        font-size: 16px;
        margin-top: 30px;
    }

    #right .lus-greeting {
        padding: 16px 18px;
    }

    #right .lus-greeting__name {
        font-size: 19px;
    }

    #right .lus-login {
        padding: 22px 18px;
    }

    #right .lus-cards {
        grid-template-columns: 1fr;   /* スマホでは1列に積む */
        gap: 10px;
    }

    #right .lus-tile {
        padding: 14px 15px;
        gap: 12px;
    }

    #right .lus-tile__icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }

    #right .lus-tile__title {
        font-size: 16px;
    }

    #right a.btn-flat,
    #right a.btn-toLecture {
        display: block;
        padding: 14px 20px;
    }

    }

/* ---------------------------------------------------------------------
 * 18. 宿題の提出期限と提出状況（homeworkCheck_1：生徒・保護者共通）
 *     PHP側は lib/homework_status.php。
 *     バッジの言葉と色は講師サイト（jhs-teacher の theme.css 21.）とそろえている。
 * ------------------------------------------------------------------- */

/* ページ上のまとめ */
#right .lus-hwsum {
    margin: 6px 0 22px;
    padding: 16px 18px;
    background-color: var(--lus-surface);
    border: 1px solid var(--lus-border);
    border-radius: var(--lus-radius-lg);
}

#right .lus-hwsum__ok {
    margin: 0;
    font-weight: 700;
    color: #0a7a4f;
}

#right .lus-hwsum__ok::before {
    content: "\2713  ";   /* ✓ */
}

#right .lus-hwsum__nums {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#right .lus-hwsum__num {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--lus-radius);
}

#right .lus-hwsum__num b {
    font-size: 26px;
    line-height: 1;
}

#right .lus-hwsum__num span {
    font-size: 13px;
    font-weight: 700;
}

#right .lus-hwsum__num--over         { color: #c62839; background-color: #fdebed; }
#right .lus-hwsum__num--over.is-zero { color: var(--lus-muted); background-color: #f1f4f9; }
#right .lus-hwsum__num--soon         { color: #2f55c4; background-color: #eaf0ff; }

#right ul.lus-hwsum__list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

#right ul.lus-hwsum__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 8px 0;
    border-top: 1px solid var(--lus-border);
    font-size: 13.5px;
}

#right .lus-hwsum__subj {
    padding: 1px 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--lus-primary-dark);
    background-color: var(--lus-primary-tint);
    border-radius: 999px;
}

#right .lus-hwsum__name {
    font-weight: 700;
    color: var(--lus-text);
}

#right .lus-hwsum__date {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--lus-muted);
    white-space: nowrap;
}

/* 期限の列 */
#right .lus-dl {
    font-weight: 700;
    color: var(--lus-text);
}

#right .lus-dl__note {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #2f55c4;
}

#right .lus-dl__note--today { color: #d9730d; }
#right .lus-dl__note--over  { color: #c62839; }

#right .lus-hwsum__date .lus-dl__note {
    display: inline;
    margin-left: 6px;
}

/* 期限の日付だけでは伝わらない補足（「10/10(土)の授業まで」など） */
#right .lus-dl__detail {
    display: block;
    max-width: 16em;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--lus-muted);
    white-space: normal;
}

/* 状況バッジ */
#right .lus-st {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 999px;
    white-space: nowrap;
}

#right .lus-st--ontime  { color: #0a7a4f; background-color: #e2f5ec; }   /* 期限内に提出 */
#right .lus-st--late    { color: #a65300; background-color: #fff0dc; }   /* 期限後に提出 */
#right .lus-st--done    { color: var(--lus-primary-dark); background-color: var(--lus-primary-tint); } /* 提出済 */
#right .lus-st--before  { color: #2f55c4; background-color: #eaf0ff; }   /* 期限前 */
#right .lus-st--missing { color: #c62839; background-color: #fdebed; }   /* 未提出（期限切れ） */
#right .lus-st--none    { color: var(--lus-muted); background-color: #f1f4f9; } /* 未提出（期限なし） */
/* 入塾前（2026-10-07）。入塾日以前が期限で未提出の宿題。未提出に数えないので、赤ではなく点線の控えめな見た目にする */
#right .lus-st--pre     { color: #7a8494; background-color: #fff; box-shadow: inset 0 0 0 1px #c9d0db; }

#right table.lus-hwview td {
    vertical-align: middle;
}

/* タブレット幅（900px以下）では .rireki-table を横スクロールさせるため display:block にしている（17.）。
   そのままだと中身が枠いっぱいに広がらず、右側が空いてしまうので、中身だけ表として100%に広げる。
   中身が枠より広いときは、これまでどおり横スクロールになる。 */
@media (max-width: 900px) {
    #right .rireki-table > tbody {
        display: table;
        width: 100%;
    }
}

/* ---------------------------------------------------------------------
 * 19. タブ切替と折りたたみ（homeworkCheck_1 / testCheck_1）
 *     PHP側は lib/lus_tabs.php の lusTabs()。
 *     JavaScript は使わない。見えないラジオボタンを先に並べ、:checked と nth-of-type で
 *     対応するタブと中身を出している。8タブまで対応（増やすときは下の3か所に行を足す）。
 * ------------------------------------------------------------------- */
#right .lus-tabs {
    position: relative;
    margin: 4px 0 20px;
}

/* 本物のラジオは隠す（矢印キーでの切り替えはそのまま効く） */
#right .lus-tabs__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

#right .lus-tabs__nav {
    display: flex;
    flex-wrap: wrap;  /* 横スクロールにすると、選ばれているタブが画面の外に隠れることがあるので折り返す */
    gap: 6px;
    padding: 5px;
    background-color: #eef1f8;
    border-radius: 14px;
}

#right .lus-tabs__tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--lus-muted);
    white-space: nowrap;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}

#right .lus-tabs__tab:hover {
    color: var(--lus-primary-dark);
    background-color: rgba(255, 255, 255, .6);
}

/* 期限を過ぎて未提出の件数 */
#right .lus-tabs__badge {
    min-width: 1.6em;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    color: #fff;
    background-color: #d6364a;
    border-radius: 999px;
}

#right .lus-tabs__panels {
    margin-top: 14px;
}

#right .lus-tabs__panel {
    display: none;
}

/* 選ばれているタブ */
#right .lus-tabs__radio:nth-of-type(1):checked ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(1),
#right .lus-tabs__radio:nth-of-type(2):checked ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(2),
#right .lus-tabs__radio:nth-of-type(3):checked ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(3),
#right .lus-tabs__radio:nth-of-type(4):checked ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(4),
#right .lus-tabs__radio:nth-of-type(5):checked ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(5),
#right .lus-tabs__radio:nth-of-type(6):checked ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(6),
#right .lus-tabs__radio:nth-of-type(7):checked ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(7),
#right .lus-tabs__radio:nth-of-type(8):checked ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(8) {
    color: #fff;
    background-color: var(--lus-primary);
    box-shadow: 0 2px 8px rgba(47, 74, 203, .25);
}

/* キーボードで選んでいるタブ */
#right .lus-tabs__radio:nth-of-type(1):focus-visible ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(1),
#right .lus-tabs__radio:nth-of-type(2):focus-visible ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(2),
#right .lus-tabs__radio:nth-of-type(3):focus-visible ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(3),
#right .lus-tabs__radio:nth-of-type(4):focus-visible ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(4),
#right .lus-tabs__radio:nth-of-type(5):focus-visible ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(5),
#right .lus-tabs__radio:nth-of-type(6):focus-visible ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(6),
#right .lus-tabs__radio:nth-of-type(7):focus-visible ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(7),
#right .lus-tabs__radio:nth-of-type(8):focus-visible ~ .lus-tabs__nav .lus-tabs__tab:nth-of-type(8) {
    outline: 2px solid var(--lus-primary);
    outline-offset: 2px;
}

/* 選ばれているタブの中身 */
#right .lus-tabs__radio:nth-of-type(1):checked ~ .lus-tabs__panels > .lus-tabs__panel:nth-of-type(1),
#right .lus-tabs__radio:nth-of-type(2):checked ~ .lus-tabs__panels > .lus-tabs__panel:nth-of-type(2),
#right .lus-tabs__radio:nth-of-type(3):checked ~ .lus-tabs__panels > .lus-tabs__panel:nth-of-type(3),
#right .lus-tabs__radio:nth-of-type(4):checked ~ .lus-tabs__panels > .lus-tabs__panel:nth-of-type(4),
#right .lus-tabs__radio:nth-of-type(5):checked ~ .lus-tabs__panels > .lus-tabs__panel:nth-of-type(5),
#right .lus-tabs__radio:nth-of-type(6):checked ~ .lus-tabs__panels > .lus-tabs__panel:nth-of-type(6),
#right .lus-tabs__radio:nth-of-type(7):checked ~ .lus-tabs__panels > .lus-tabs__panel:nth-of-type(7),
#right .lus-tabs__radio:nth-of-type(8):checked ~ .lus-tabs__panels > .lus-tabs__panel:nth-of-type(8) {
    display: block;
}

/* タブの中の最初の教科見出しは上の余白を詰める */
#right .lus-tabs__panel > h4:first-child {
    margin-top: 0;
}

/* 宿題のまとめ：いまの期／ほかの期 */
#right .lus-hwsum__term {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--lus-muted);
}

#right .lus-hwsum__term b {
    color: var(--lus-navy);
}

#right .lus-hwsum__other {
    margin: 12px 0 0;
    padding-top: 10px;
    font-size: 12.5px;
    color: var(--lus-muted);
    border-top: 1px dashed var(--lus-border);
}

#right .lus-hwsum__other b {
    color: #c62839;
}

/* 折りたたみ（テストの期・章ごと） */
#right .lus-examnote {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--lus-muted);
}

#right details.lus-grp {
    margin: 0 0 10px;
    background-color: var(--lus-surface);
    border: 1px solid var(--lus-border);
    border-radius: var(--lus-radius);
    overflow: hidden;
}

#right .lus-grp__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 13px 16px;
    list-style: none;
    cursor: pointer;
}

#right .lus-grp__head::-webkit-details-marker {
    display: none;
}

/* 開閉の矢印 */
#right .lus-grp__head::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--lus-muted);
    border-bottom: 2px solid var(--lus-muted);
    transform: rotate(-45deg);
    transition: transform .15s;
}

#right details.lus-grp[open] > .lus-grp__head::before {
    transform: rotate(45deg);
}

#right details.lus-grp[open] > .lus-grp__head {
    border-bottom: 1px solid var(--lus-border);
}

#right .lus-grp__head:hover {
    background-color: #f7f9fd;
}

#right .lus-grp__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--lus-navy);
}

#right .lus-grp__progress {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

#right .lus-grp__bar {
    display: block;
    width: 90px;
    height: 6px;
    overflow: hidden;
    background-color: #e8ecf5;
    border-radius: 999px;
}

#right .lus-grp__bar span {
    display: block;
    height: 100%;
    background-color: var(--lus-accent);
    border-radius: 999px;
}

#right .lus-grp__count {
    font-size: 12.5px;
    color: var(--lus-muted);
    white-space: nowrap;
}

#right .lus-grp__count b {
    font-size: 14px;
    color: var(--lus-accent);
}

/* 折りたたみの中の表は、外枠を折りたたみ側に任せる */
#right details.lus-grp table.rireki-table {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* テスト結果の表 */
#right .lus-examview__history {
    display: block;
    font-size: 11px;
    color: var(--lus-muted);
}

#right table.lus-examview tr.is-untaken td {
    color: #9aa5bd;
}

#right table.lus-examview tr.is-untaken td:first-child {
    color: var(--lus-text);
}

/* 判定バッジ */
#right .lus-jd {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 999px;
    white-space: nowrap;
}

#right .lus-jd--perfect { color: #9a6b00; background-color: #fff4d1; }
#right .lus-jd--pass    { color: #0a7a4f; background-color: #e2f5ec; }
#right .lus-jd--fail    { color: #c62839; background-color: #fdebed; }
#right .lus-jd--none    { color: var(--lus-muted); background-color: #f1f4f9; }

@media (max-width: 600px) {
    #right .lus-grp__progress {
        margin-left: 0;
        width: 100%;
    }

    #right .lus-grp__bar {
        flex: 1;
    }
}

/* 学年の切り替え（testCheck_1。lusTabs(..., 'grade')）
   中の「英語／数学／講習・入試」のタブと見分けがつくように、白地で横幅いっぱいの均等割りにする。
   子セレクタ（>）で書いているので、入れ子になった教科のタブには効かない。 */
#right .lus-tabs--grade > .lus-tabs__nav {
    padding: 6px;
    background-color: var(--lus-surface);
    border: 1px solid var(--lus-border);
}

#right .lus-tabs--grade > .lus-tabs__nav > .lus-tabs__tab {
    flex: 1 1 0;
    justify-content: center;
    padding: 11px 16px;
    font-size: 15px;
}

#right .lus-tabs--grade > .lus-tabs__panels {
    margin-top: 18px;
}