@charset "UTF-8";
/*
 * NOTE:
 * Chrome/Edge + Windows + password manager autofill では、
 * 初回描画時のみフォントが意図通りに反映されない場合がある。
 * computed style は正しいが、描画レイヤの問題でクリック後に修正される。
 * 機能・セキュリティには影響なしのため、本番では許容。
 */

/* =========================================================
   0) Design tokens / Base
   ========================================================= */
:root{
  /* Base UI tokens (home.php の <style> から移植) */
  --bd:#e6e8eb;
  --bg:#f6f7f9;
  --fg:#333333;
  --mut:#666;
  --card:#fff;
  --link:#0b57d0;

  /* Font tokens */
  --font-family-sans-serif: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Noto Sans JP",
                            system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-font-sans-serif: var(--font-family-sans-serif);

  /* Layout */
  --content-max: 1080px;

  /* Buttons */
  --btn-radius: 10px;
  --btn-pad-y: .45rem;
  --btn-pad-x: .9rem;

  --c-primary: #0b57d0;
  --c-border: #e6e8eb;
  --c-text: #111;
  --c-danger: #b3261e;

  /* Convenience */
  --els-sans: var(--font-family-sans-serif);

  /* Typing tokens (single source of truth) */
  --typing-max: 980px;
  --typing-stage-max: 980px;
  --typing-target-height: 140px;
  --typing-orange: #ff7a00;
  --typing-gray: #444;
}

/* =========================================================
   Base
   ========================================================= */
html{
  overflow-y: scroll;  
}
html, body{
  font-family: var(--font-family-sans-serif);
  font-size: 1rem;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
}

/* Bootstrapの.containerを少し広めに固定したい場合（必要なら維持） */
.container{
  max-width: var(--content-max);
}

/* =========================================================
   1) Form typography (base)
   ========================================================= */
input, textarea, select, button,
.form-control, .btn{
  font-family: var(--els-sans) !important;
  font-size: 16px !important;
}
select{ padding:3px 6px; }

/* =========================================================
   2) Autofill fixes (Chrome/Edge + Firefox)
   ========================================================= */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
input:-webkit-autofill:hover,
textarea:-webkit-autofill:hover,
select:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus{
  font-family: var(--els-sans) !important;
  -webkit-text-fill-color: currentColor !important;
  transition: background-color 999999s ease-out 0s;
}

/* autofill の “文字列” に刺す（効く環境向け） */
input:-webkit-autofill::first-line,
textarea:-webkit-autofill::first-line,
select:-webkit-autofill::first-line{
  font-family: var(--els-sans) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

/* Firefox（効く環境のみ） */
input:autofill,
textarea:autofill,
select:autofill{
  font-family: var(--els-sans) !important;
}

/* 再描画トリガ（必要なページだけ付与して使う） */
.repaint input{
  transform: translateZ(0);
}

/* ログインの2項目は font shorthand で確定（あなたの既存意図を維持） */
#login_id, #password{
  font: 16px/1.5 var(--els-sans) !important;
  font-weight: 400 !important;
}
#login_id:-webkit-autofill::first-line,
#password:-webkit-autofill::first-line{
  font: 16px/1.5 var(--els-sans) !important;
  font-weight: 400 !important;
}

/* =========================================================
   3) Buttons (site-wide)
   ========================================================= */
.btn-els{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-weight: 600;
  border: 1px solid transparent;
  line-height: 1.2;
}

.btn-els-primary{
  background: var(--c-primary);
  color:#fff;
}
.btn-els-primary:hover{ filter: brightness(.95); color:#fff; }

.btn-els-ghost{
  background:#fff;
  border-color: var(--c-border);
  color: var(--c-text);
}
.btn-els-ghost:hover{ background:#f6f7f9; color: var(--c-text); }

.btn-els-logout{
  background:#fff;
  border: 1px solid rgba(179,38,30,.35);
  color: var(--c-danger);
  border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-weight: 600;
}
.btn-els-logout:hover{
  background: rgba(179,38,30,.06);
  color: var(--c-danger);
}

/* =========================================================
   4) Header / Nav (site-wide)
   ※ Bootstrapの .row と衝突しやすいので scope する
   ========================================================= */
header{ background:var(--card); border-bottom:1px solid var(--bd); }

.wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
/* default=1024px */

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 0;
}

.brand{
  font-weight:800;
}

/* ここは header 内に限定（Bootstrap .row を壊さない） */
header .row{
  display:flex;
  gap:10px;
  align-items:center;
}

.muted{ color:var(--mut); font-size:1rem; }


nav{
  padding:10px 0 14px;
  display:flex;
  gap:14px;
  min-width: 6em;
}
nav a{
  text-decoration:none;
  color:#1a1a1a;
  padding:6px 8px;
  border-radius:8px;
}
nav a:hover{ background:#f0f1f3; }
nav a.is-active{ background:#f0f1f3; font-weight:700;}

a.link{ color:var(--link); text-decoration:none; }
a.link:hover{ text-decoration:underline; }

nav .header-nav {
  display: inline-block;
  min-width: 4em;
  text-align: center;
}

nav .header-nav.is-active {
  font-weight: bold;
}

/* =========================================================
   5) Main / Cards / Tables (home.php の <style> から移植)
   ========================================================= */
main{
  max-width:1200px; /* default=1024px */
  margin:22px auto;
  padding:0 16px;
}

.card{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:12px;
  padding:16px;
  margin-bottom:16px;
}

.course{
  border-bottom:1px solid var(--bd);
  padding-top:12px;
  padding-bottom:12px;
  /*margin-top:12px;*/
}
.course-first{
    padding-top:0;
}

table{
  width:100%;
  border-collapse:collapse;
  font-size:1rem;
}
th, td{
  border-top:1px solid var(--bd);
  padding:8px 6px;
}
th{ color:var(--mut); }

.notice{
  background:#fff3cd;
  border:1px solid #ffe69c;
  border-radius:12px;
  padding:12px;
  margin-bottom:16px;
}

/* ===== notice : success ===== */
.notice-success{
  background:#d1e7dd;
  border:1px solid #a3cfbb;
  border-radius:12px;
  padding:16px;
}
.notice-success strong,
.notice-success .muted{
  color:#0f5132;
}

/* ===== notice : error ===== */
.notice-error{
  background:#f8d7da;
  border:1px solid #f1aeb5;
  border-radius:12px;
  padding:16px;
}
.notice-error strong{
  color:#842029;
}
.notice-error .muted{
  color:#842029;
}
.notice-error ul{
  margin:10px 0 0;
  padding-left:20px;
}

/* =========================================================
   6) Footer (site-wide)
   ========================================================= */
footer{
  margin-top:22px;
  padding:18px 0;
  border-top:1px solid var(--bd);
  background:var(--card);
}
footer .sep{ margin:0 8px; color:var(--mut); }

/* =====================================================
    Typing (single source of truth)
   ==================================================== */

/* --- Topbar (counter / timer / quit) --- */
.typing-topbar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:60px;
  flex-wrap:wrap;
  text-align:center;
  margin:12px 0;
}
.typing-counter,
.typing-timer{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.typing-topbar .label{
  font-size:1rem;
  color:var(--mut);
}
.typing-topbar .val{
  font-size:22px;
  font-weight:700;
}
.typing-time-text{
  font-size:20px;
  font-weight:700;
}

/* --- Stage width anchor (prevents mode-dependent width shrink) --- */
.typing-stage{
  width:100%;
  position:relative; /* overlay base */
}
.typing-stage-inner{
  width:100%;
  max-width: var(--typing-stage-max);
  margin:0 auto;
  position:relative;
  min-height: 260px;
}

/* --- Overlay: hero & countdown centered (grid is robust) --- */
.typing-hero-overlay,
.typing-countdown{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
 /* width:100%; */
  text-align:center;
  pointer-events:none;
}
.typing-hero-overlay{
  padding: 16px 18px;
  box-sizing: border-box;
}
.typing-hero-overlay{ z-index: 40; }
.typing-countdown{ z-index: 50; }

.typing-hero-overlay .main{
  font-size:28px;
  font-weight:700;
  color: #d60000;
  animation: blinkStart 1.5s ease-in-out infinite;
}
.typing-hero-overlay .sub{
  margin-top:10px;
  font-size:1.2rem;
  color:var(--mut);
}

.typing-countdown{
  z-index:50;
}
.typing-countdown .num{
  font-size:40px;
  font-weight:900;
  color:var(--typing-orange);
}

/* --- Hide target before start (keep layout) --- */
.typing-stage.is-before-start #targetText,
.typing-stage.is-before-start #targetSub{
  visibility:hidden !important; /* keep layout height */
}

/* --- Panel (target container) --- */
.typing-panel{
  background:#f8f9fa;
  border:1px solid #dee2e6;
  border-radius:.5rem;
  padding:16px;
  margin:0 auto;
}

/* Target fixed area (layout should not change across modes) */
.typing-target-wrap{
  height: var(--typing-target-height);
  display:grid;
  place-items:center;
  position: relative;
  overflow: hidden;
}

/* Target text alignment */
#targetText{
  width:100%;
  text-align:center;
  line-height:1.4;
}

/* Japanese */
.typing-jp{
  font-size:1.15rem;
  font-weight:600;
}
.typing-roma{
  font-size:1.05rem;
}

/* Sub (romanization / etc.) */
.typing-sub{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  font-size: 1.3rem;
}

/* --- Character styling (single source) --- */
/* Default: rest is dark, done is orange */
.typing-done{
  color: var(--typing-orange);
  font-weight:700;
  font-size:50px;
}
.typing-rest{
  color: var(--typing-gray);
  font-weight:600;
  font-size:50px;
}

/* Home position (one char) */
.typing-one{
  font-size:50px;
  font-weight:900;
  color: var(--typing-gray);
  letter-spacing:.04em;
  text-align:center;
  padding:10px 0;
}
/* home_position: correct flash */
.typing-one.is-correct{
  color: var(--typing-orange);
}

/* If you still use .typing-target.is-correct in JS, keep color effect minimal */
.typing-target.is-correct{
  color: var(--typing-orange);
}

/* --- Miss feedback --- */
.typing-panel.is-miss{
  animation: shake .18s ease both;
}
@keyframes shake{
  0%{ transform: translateX(0); }
  30%{ transform: translateX(-6px); }
  60%{ transform: translateX(6px); }
  100%{ transform: translateX(0); }
}

/* --- Keyboard (SVG) --- */
.typing-kbd svg{
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* --- Keyboard (HTML) --- */
.kbd{
  width: 100%;
  max-width: 100%;
  margin: 20px auto 0;
  background:#fbfbfb;
  border:1px solid #e6e6e6;
  border-radius:18px;
  padding:18px 36px;
  box-shadow:0 10px 18px rgba(0,0,0,.08);
}
.kbd .row{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-bottom:10px;
  flex-wrap:nowrap;
}
.kbd .row.indent1{ padding-left:22px; }
.kbd .row.indent2{ padding-left:44px; }
.kbd .row.indent3{ padding-left:0; } /* Shiftを左へ寄せる */

.kbd .key{
  width:66px;
  height:54px;
  background:#fff;
  border:2px solid #d8d8d8;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size: 18px;
  font-weight:700;
  color:#444;
  user-select:none;
}
.kbd .key.wide{ width:140px; font-size:18px; color:#666; }
.kbd .key.shift{ width:120px; font-size:18px; color:#666; }
.kbd .key.space{ width:460px; height:50px; font-size:18px; }
.kbd .key.hi{ background:#7fc6ff; border-color:#4aa6ff; }

/* Next key highlight */
.kbd .key.is-next{
  background: rgba(255, 122, 0, .35);
  border-color: rgba(255, 122, 0, .95);
  box-shadow: 0 0 0 6px rgba(255, 122, 0, .18);
  transform: translateY(-2px);
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.kbd .key.is-correct{
  animation: flash .18s ease both;
}
@keyframes flash{
  0%{ filter: brightness(1); }
  100%{ filter: brightness(1.06); }
}

/* --- Fingertips guide (no palm) --- */
.typing-hands{
  width: 100%;
  margin: 14px auto 0;
  display:flex;
  justify-content:space-between;
  gap:18px;
  opacity:.98;
}
.tips{
  width:46%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:10px;
}
.tip{
  position:relative;
  width:50px;
  height:78px;
  border-radius:25px 25px 10px 10px;
  border:2px solid #c9b3a3;
  background:#f3d6c6;
  box-shadow:none;
  transition: transform .10s ease, background .12s ease, border-color .12s ease;
  transform-origin:50% 90%;
}
.tip::before{
  content:"";
  position:absolute;
  left:50%;
  top:4px;
  transform: translateX(-50%);
  width:26px;
  height:17px;
  border-radius:25px 25px 10px 10px;
  background: rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.6);
  z-index:2;
  pointer-events:none;
}

/* finger length variations */
.tips.left  .tip[data-f="L5"]{ height:76px; }
.tips.left  .tip[data-f="L4"]{ height:96px; }
.tips.left  .tip[data-f="L3"]{ height:106px; }
.tips.left  .tip[data-f="L2"]{ height:100px; }
.tips.left  .tip.thumb{ height:56px; width:56px; border-radius:25px 25px 10px 10px; }

.tips.right .tip[data-f="R2"]{ height:100px; }
.tips.right .tip[data-f="R3"]{ height:106px; }
.tips.right .tip[data-f="R4"]{ height:96px; }
.tips.right .tip[data-f="R5"]{ height:76px; }
.tips.right .tip.thumb{ height:56px; width:56px; border-radius:25px 25px 10px 10px; }

/* active finger */
.tip.is-active{
  border-color: rgba(255, 122, 0, .95);
  background:#f3d6c6;
  box-shadow: 0 0 0 6px rgba(255, 122, 0, .18);
  transform: scale(1.08);
}

/* --- English word spacing (character-split rendering) --- */
.typing-space{
  display:inline-block;
  width:1.8em; /* “約2倍” */
}

/* --- Per-mode typography overrides (do NOT affect layout box) --- */
/* en_words: smaller font for characters */
.typing-stage[data-mode="en_words"] .typing-done,
.typing-stage[data-mode="en_words"] .typing-rest{
  font-size:32px;
}

/* Optional: if you later want home_position smaller/larger, do it here without changing box */
/* .typing-stage[data-mode="home_position"] .typing-one{ font-size: 48px; } */

/* Typing-Page Body Class */
.page-typing main{
    display: flex;
    flex-direction: column;
    align-ites: center;
}
.page-typing{
    --typing-stage-max: 1200px; 
}
/* typing page: stage-inner centered */
.page-typing .typing-stage-inner{
  margin-left: auto;
  margin-right: auto;
}
.page-typing .kbd{
  margin-left: auto;
  margin-right: auto;
}

/* 開始赤点滅 */
@keyframes blinkStart{
  0%   { opacity: 1; }
  49%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

/* 日本語練習（ja）：表示調整 */
.typing-stage[data-mode="ja"] .typing-jp{
  font-size: 34px;      /* 好みで調整：52〜60 */
  font-weight: 400;
}

.typing-stage[data-mode="ja"] .typing-roma{
  color: #444;
}

/* ローマ字は span（typing-done/rest）に font-size が付くので、ここを上書きする */
.typing-stage[data-mode="ja"] .typing-roma .typing-done,
.typing-stage[data-mode="ja"] .typing-roma .typing-rest{
  font-size: 30px;      /* 好みで調整：28〜36 */
  font-weight: 400;
}

/* 日本語モードでは targetSub を使わない */
.typing-stage[data-mode="ja"] #targetSub{
  display: none !important;
}
/* ===============================
   成績オーバーレイ
================================ */

.typing-result-overlay{
  position:absolute;
  inset:0;
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:200;

  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease;
}

.typing-result-overlay.is-show{
  opacity:1;
  pointer-events:auto;
}

.typing-result-box{
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(4px);

  width:550px;
  border-radius:16px;
  padding:28px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  text-align:center;
}

.typing-result-box h2{
  font-weight:600;
}

.result-row{
  display:flex;
  justify-content:space-between;
  margin:8px 0;
  font-size:23px;
}
.typing-result-box .text-muted{
  font-size: 12px;
  line-height: 1.4;
}
/* 保存メッセージ強調 */
#saveMsg{
  font-size: 18px;
}
/* スコア算出根拠左寄せ */
#resExplain{
  text-align: left;
  font-size: 14px;
  line-height: 1.4;
  margin-top: 8px;
}
/* タイピング練習メニューの表示 */
/* typing menu layout */
.typing-menu-grid{
  display: grid;
  gap: 1.25rem;
}

.tm-row{
  display: grid;
  gap: .75rem;
}

.tm-label{
  font-weight: 600;
}

.typing-set-groups{
  display: grid;
  gap: 1rem;
}

.typing-set-group{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .75rem;
  padding: .9rem;
  background: #fff;
}

.typing-set-group-title{
  font-weight: 700;
  margin-bottom: .65rem;
}

.typing-set-items{
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tm-radio{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tm-card{
  display: block;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: .75rem;
  padding: .75rem .85rem;
  margin-bottom: 0;
  cursor: pointer;
  background: #fff;
}

.tm-card-title{
  font-weight: 400;
}

.tm-card-sub{
  font-size: .9rem;
  margin-top: .15rem;
}

.tm-radio:checked + .tm-card{
  background: rgba(13,110,253,.12);
  color: inherit;
  border-color: #0d6efd;
  /* rgba(13,110,253,.35);*/
}

.tm-radio:checked + .tm-card .tm-card-sub{
  color: #6c757d; /* 元のmutedに近い表示 */
}

/* minutes: make the whole segment fill the band height */
.typing-minutes{
  display: flex;
  gap: 0;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: .75rem;
  overflow: hidden;
  align-items: stretch; /* 高さを揃える */
}

.tm-minute{
  flex: 1;
  display: flex;              /* ラベル自体を伸ばす */
  align-items: center;
  justify-content: center;
  padding: .6rem 0;
  margin: 0;                  /* 余計な下マージン対策 */
  cursor: pointer;
  background: #fff;
  border-right: 1px solid rgba(0,0,0,.12);
  line-height: 1.2;
}

.tm-minute:last-of-type{
  border-right: none;
}

.tm-radio:checked + .tm-minute{
  background: rgba(13,110,253,.14);
  color: #0b5ed7;
  border-color: rgba(13,110,253,.35);
}

.tm-actions{
  margin-top: 1rem;
}
/* typing menu: big groups in one row (responsive) */
.typing-set-groups{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

@media (max-width: 992px){
  .typing-set-groups{
    grid-template-columns: 1fr;
  }
}

/* compress vertical space a bit */
.typing-set-group{
  padding: .75rem;
}

.typing-set-group-title{
  margin-bottom: .5rem;
}

.typing-set-items{
  gap: .5rem;
  grid-template-columns: 1fr; /* 各大グループ内は縦並びで一覧性優先 */
}

.tm-card{
  padding: .6rem .75rem;
}

.tm-card-sub{
  margin-top: .1rem;
}
.tm-label-note{
  font-weight: normal;
  font-size: .9rem;
  color: #6c757d;
  margin-left: .5rem;
}
/* ブランドロゴ */
.brand-els {
  font-size: 3em;
  font-weight: 700;
  letter-spacing: -2px;
  display: inline-block;
  line-height: 1;
  color: #0d6efd;
}
/* 制限時間 */
/* typing menu: limit time 1-15 in a single row (Bootstrap3/HONOKA compatible) */
.time-grid-15{
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

/* radioは完全に隠す */
.time-radio{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ボタン風の見た目 */
/* 練習メニュー（tm-card）と同系の見た目 */
.time-grid-item{
  display: block;
  width: 100%;
  text-align: center;
  padding: 6px 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  transition: all .15s ease-in-out;
}

/* 選択時：tm-cardの選択色に合わせる */
.time-radio:checked + .time-grid-item{
  border-color: #0d6efd;      /* tm-cardと同じ強調色に合わせる */
  background: #e7f1ff;        /* 淡い塗りつぶし */
  color: #0d6efd;
}

/* disabled対応 */
.time-radio:disabled + .time-grid-item{
  opacity: .5;
  cursor: not-allowed;
}



/* IT用語・日常会話（subjp表示時）だけ、固定heightを解除して詰める */
.typing-has-subjp .typing-target-wrap {
  height: auto !important;
  min-height: 0 !important;
}

/* ついでに間隔と文字サイズ */
.typing-has-subjp #targetSub {
  font-size: 1.4rem;
  line-height: 1.2;
  margin-top: 0.1rem !important; /* mt-1対策 */
}

.typing-has-subjp #targetText {
  margin-bottom: 0 !important;
}

/* typing menu: 小分類グリッド（PCは4列固定、SPは2列） */
.tm-set-grid{
  display: grid;
  gap: .5rem;
}

@media (min-width: 768px){
  .tm-set-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px){
  .tm-set-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tm-set-cell{
  min-width: 0;
}
/* typing menu: 小分類カードのテキストを上下中央揃え */
.tm-card{
  display: flex;
  align-items: center;      /* 縦中央 */
  justify-content: center;  /* 横中央 */
  text-align: center;
}

/* タイトル要素がブロック化されていても中央に */
.tm-card-title{
  margin-bottom: 0;
}

/* 試験専用メニューの注意文を上下中央揃え */
.typing-set-group .alert{
  display: flex;
  align-items: center;      /* 縦中央 */
  justify-content: center;  /* 横中央 */
  text-align: center;
  min-height: 50px;         /* カードと高さを揃えたい場合 */
}

/* 試験専用メニュー：注意文（alert）を小分類カードと同じ見た目に寄せる */
.typing-set-group .alert{
  /* 角丸：tm-card相当 */
  border-radius: 12px;          /* ここは tm-card の値に合わせて調整 */
  
  /* 高さ：tm-card相当 */
  min-height: 50px;             /* ここは tm-card の高さに合わせて調整 */
  display: flex;
  align-items: center;          /* 縦中央 */
  justify-content: center;      /* 横中央 */
  text-align: center;

  /* 余白：カードっぽく */
  margin-bottom: 0;
}

/* 試験専用メニュー：常時2分割 */
.tm-set-grid-exam{
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* スマホでも2分割維持 */
@media (max-width: 767.98px){
  .tm-set-grid-exam{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* 試験専用：常時2列 */
.tm-set-grid.tm-set-grid-exam{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* 英語（日常会話）と試験は Consolas にする */
.typing-stage[data-mode="en_words"] #targetText,
.typing-stage[data-mode="en_words"] .typing-rest,
.typing-stage[data-mode="en_words"] .typing-done{
  font-family: Consolas, "Courier New", monospace;
}

/* 試験は必ずConsolas（保険） */
body.is-exam #targetText,
body.is-exam .typing-rest,
body.is-exam .typing-done{
  font-family: Consolas, "Courier New", monospace;
}
/* 試験だけ：英文を小さくして見切れにくくする */
body.is-exam .typing-stage[data-mode="en_words"] .typing-rest{
  font-size: 23px; /* 目安：17〜19px */
}
/* 入力済みの文字も揃える */
body.is-exam .typing-stage[data-mode="en_words"] .typing-done{
  font-size: 23px;
}
/* en_words の単語間スペースを小さく */
.typing-stage[data-mode="en_words"] .typing-space{
  width: 0.8rem; /* 目安：0.8〜1.1remで調整 */
}
/* 試験時だけ英文を左寄せにする */
body.is-exam #targetText{
  text-align: left !important;
}

/* =========================================
   科目「学習メニュー」表（course_view.php）
   - 縦線なし（table-bordered不使用前提）
   - thead：上下太罫線
   - tbody：通常下罫線（最終行も必ず表示）
   - タイトル：左寄せ / 折り返し禁止
   - キーワード：折り返し可（左寄せ / 上寄せ）
   ========================================= */

.table-lessons{
  background:#fff;
  border-collapse: collapse;
  width:100%;
}

/* セル共通（余白） */
.table-lessons th,
.table-lessons td{
  padding:0.65rem 0.9rem;
}

/* ヘッダー：上下太罫線 + 中央揃え */
.table-lessons thead th{
  font-weight:600;
  white-space:nowrap;
  text-align:center;
  vertical-align:middle !important;
  border-top:2px solid #dee2e6;
  border-bottom:2px solid #dee2e6;
}

/* 行：下罫線（通常） */
.table-lessons tbody td{
  border-bottom:1px solid #dee2e6;
}

/* 最終行：下罫線を必ず残す（環境差吸収） */
.table-lessons tbody tr:last-child td{
  border-bottom:1px solid #dee2e6;
}

/* 折り返し禁止 + 中央（回/状態/完了年月日） */
.table-lessons .col-no,
.table-lessons .col-status,
.table-lessons .col-date{
  white-space:nowrap;
  text-align:center;
  vertical-align:middle !important;
}

/* タイトル：左寄せ + 折り返し禁止 + 縦中央 */
.table-lessons .col-title{
  white-space:nowrap;
  text-align:left;
  vertical-align:middle !important;
}
.table-lessons .col-title a{
  white-space:nowrap;
  text-decoration:none;
}
.table-lessons .col-title a:hover{
  text-decoration:underline;
}

/* キーワード：折り返し可（左寄せ + 上寄せ） */
.table-lessons .col-keywords{
  white-space:normal;
  word-break:break-word;
  text-align:left;
  vertical-align:middle !important;
}

/* 列幅（必要なら数値だけ調整） */
.table-lessons .col-no{ width:40px; }
.table-lessons .col-status{ width:60px; }
.table-lessons .col-date{ width:120px; }

/* ===== 学習状態 ===== */

.table-lessons .state-未着{
  color:#6c757d;
}

.table-lessons .state-学習中{
  color:#0d6efd;
  font-weight:600;
}

.table-lessons .state-完了{
  color:#146c43;
  font-weight:600;
}
/* 未公開なら行全体を薄く */
.table-lessons tr.is-closed td{
  opacity:0.50;
}
.table-lessons tr.is-closed a{
  pointer-events:none; /* 念のため：リンクが残った場合も無効化 */
}

/* =========================================================
   Lesson page typography (lesson.php / review / lesson本文)
   ========================================================= */

/* lesson.php の <main class="lessonpage"> を前提 */
main.lessonpage{
  /* ここは必要なら：ページ幅など（既に全体幅1200pxなら不要） */
}

/* 本文：少し大きめ＋読みやすい行間
   ただし topmenu は例外で下で上書き */
main.lessonpage p,
main.lessonpage li,
main.lessonpage div{
  font-size: 1.05rem;
  line-height: 1.7;
}

/* 冒頭の「科目トップへ」は例外 */
main.lessonpage p.topmenu{
  margin-top: 12px;
  font-size: 1rem;
}
main.lessonpage p.topmenu.lesson-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
main.lessonpage .nav-right{
  display:flex;
  gap:20px;
}
/* 前回が無い場合（初回）の崩れ予防 */
.nav-right span.muted{
  opacity:0.5;
}

/* 余白の暴れを抑える（長文/解説が増えても破綻しにくい） */
main.lessonpage .card h2,
main.lessonpage .card h3{
  margin-top: 0;
}

/* 復習（details） */
main.lessonpage .lesson-review-card summary{
  cursor: pointer;
  font-weight: 600;
}
main.lessonpage .lesson-review-card .review-body{
  margin-top: 12px;
}
main.lessonpage .lesson-review-card .review-body > :first-child{ margin-top: 0; }
main.lessonpage .lesson-review-card .review-body > :last-child{ margin-bottom: 0; }

/* 未公開の完了日を見やすく */
.table-lessons .col-status{ line-height:1.2; }

.small {
  font-size: 80%;
}
.small-lesson {
  font-size: 60%;
  font-weight: 400;
}
/* =====================================================
   End of file
   ==================================================== */