:root {
  --bg-primary: #f8fafc;
  --bg-card: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  
  /* QB Online Palette */
  --qb-green: #7cb342;
  --qb-green-dark: #689f38;
  --qb-green-light: #f1f8e9;
  --qb-navy: #1e3a8a;
  --qb-blue: #2563eb;
  --qb-blue-light: #eff6ff;
  --qb-wrong-red: #ef4444;
  --qb-unanswered-gray: #e2e8f0;

  --brand-color: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-light: #eff6ff;
  --success-color: #10b981;
  --success-light: #ecfdf5;
  --success-border: #059669;
  --danger-color: #ef4444;
  --danger-light: #fef2f2;
  --danger-border: #dc2626;
  --border-color: #cbd5e1;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --content-max-width: 900px;
  --app-font-size: 1.02rem;
}

html {
  overflow-x: hidden;
  max-width: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* メディア要素はコンテナ幅に収める */
img, video, iframe, table, pre {
  max-width: 100%;
}

body {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* 横スクロール完全禁止 */
  width: 100%;
}

/* Header */
.header {
  background-color: #ffffff;
  border-bottom: 2px solid var(--qb-green);
  padding: 0.75rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  gap: 1rem;
}

.brand-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--qb-navy);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.qb-logo-badge {
  background-color: var(--qb-green);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 900;
  padding: 0.15rem 0.65rem;
  border-radius: 6px;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px rgba(124, 179, 66, 0.4);
}

.brand-badge {
  background-color: #f1f8e9;
  color: var(--qb-green-dark);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  border: 1px solid rgba(124, 179, 66, 0.3);
}

.qb-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.qb-btn-primary {
  background-color: var(--qb-navy);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.qb-btn-primary:hover {
  background-color: #1e40af;
  transform: translateY(-1px);
}

.qb-btn-spaced {
  background-color: #f5f3ff;
  color: #7c3aed;
  border: 1.5px solid #a78bfa;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qb-btn-spaced:hover {
  background-color: #7c3aed;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.25);
}

.qb-btn-secondary {
  background-color: #f1f8e9;
  color: var(--qb-green-dark);
  border: 1.5px solid var(--qb-green);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qb-btn-secondary:hover {
  background-color: var(--qb-green);
  color: #ffffff;
}

.qb-btn-custom {
  background-color: #fdf4ff;
  color: #c026d3;
  border: 1.5px solid #e879f9;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qb-btn-custom:hover {
  background-color: #c026d3;
  color: #ffffff;
}

.qb-btn-lock {
  background-color: #f0fdf4;
  color: #15803d;
  border: 1.5px solid #86efac;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qb-btn-lock:hover {
  background-color: #15803d;
  color: #ffffff;
}

/* ⚙️ ヘッダー右側 ツール選択ドロップダウン */
.header-tools-select {
  background-color: #ffffff;
  color: #1e3a8a;
  border: 1.5px solid #2563eb;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.header-tools-select:hover {
  background-color: #eff6ff;
  border-color: #1d4ed8;
}

/* 🔍 常時表示 検索ボックス */
.qb-search-wrapper {
  display: flex;
  align-items: center;
  border: 1.5px solid #2563eb;
  border-radius: 6px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.qb-search-input {
  border: none;
  padding: 0.45rem 0.75rem;
  font-size: 0.88rem;
  outline: none;
  width: 170px;
  color: #1e293b;
}

.qb-search-btn {
  background: #2563eb;
  color: #ffffff;
  border: none;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  font-size: 0.88rem;
  transition: background 0.15s ease;
}

.qb-search-btn:hover {
  background: #1d4ed8;
}

/* 📑 直前チェックボタン (Header) */
.qb-btn-checksheet {
  background-color: #fff7ed;
  color: #c2410c;
  border: 1.5px solid #fdba74;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.qb-btn-checksheet:hover {
  background-color: #ea580c;
  color: #ffffff;
}

/* 📑 Checksheet Modal Grid & Cards */
.cs-section {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.25rem;
}

.cs-sec-title {
  font-size: 0.98rem;
  font-weight: 800;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #cbd5e1;
}

.cs-sec-title.title-common { color: #c2410c; border-color: #f97316; }
.cs-sec-title.title-low { color: #1e40af; border-color: #3b82f6; }
.cs-sec-title.title-gen { color: #15803d; border-color: #22c55e; }
.cs-sec-title.title-safety { color: #b91c1c; border-color: #ef4444; }

.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
}

.cs-card {
  background-color: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.6rem;
  transition: all 0.15s ease;
}

.cs-card:hover {
  border-color: #2563eb;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.cs-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.4;
}

.cs-btn-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cs-btn-quiz {
  background-color: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cs-btn-quiz:hover {
  background-color: #2563eb;
  color: #ffffff;
}

.cs-btn-link {
  font-size: 0.78rem;
  color: #64748b;
  text-decoration: none;
  font-weight: 600;
}

.cs-btn-link:hover {
  color: #2563eb;
  text-decoration: underline;
}


.qb-btn-history {
  background-color: #eff6ff;
  color: var(--qb-blue);
  border: 1.5px solid var(--qb-blue);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qb-btn-history:hover {
  background-color: var(--qb-blue);
  color: #ffffff;
}

/* QB Keyword & Question Number Search Box */
.qb-search-wrapper {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  background-color: #ffffff;
}

.qb-search-input {
  border: none;
  outline: none;
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  width: 210px;
}

.qb-search-btn {
  background-color: #f1f5f9;
  border: none;
  border-left: 1px solid var(--border-color);
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  font-size: 0.88rem;
  transition: background-color 0.2s;
}

.qb-search-btn:hover {
  background-color: var(--qb-blue-light);
}

/* モバイル用 検索アイコンボタン (デスクトップでは非表示) */
.qb-search-icon-btn {
  display: none;
  background-color: #eff6ff;
  border: 1.5px solid var(--qb-blue);
  color: var(--qb-blue);
  border-radius: 8px;
  padding: 0.48rem 0.75rem;
  font-size: 1.05rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.qb-search-icon-btn:hover {
  background-color: var(--qb-blue);
  color: #ffffff;
}

/* Modal Inner Search Input */
.builder-search-input {
  flex: 1;
  padding: 0.45rem 0.75rem;
  border: 1.5px solid #60a5fa;
  border-radius: 6px;
  font-size: 0.9rem;
  outline: none;
}

.builder-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.builder-clear-search-btn {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
}

.builder-clear-search-btn:hover {
  background-color: #f1f5f9;
  color: var(--text-primary);
}

/* Filter Controls Bar */
.control-bar {
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Practice Mode Selector Tabs */
.mode-tabs {
  display: flex;
  background-color: #f1f5f9;
  padding: 4px;
  border-radius: 8px;
  gap: 4px;
}

.mode-tab-btn {
  padding: 0.45rem 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-tab-btn:hover {
  color: var(--qb-navy);
}

.mode-tab-btn.active {
  background-color: var(--bg-card);
  color: var(--qb-navy);
  box-shadow: var(--shadow-sm);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.filter-select {
  padding: 0.45rem 0.85rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  max-width: 320px;
  transition: border-color 0.2s;
}

.filter-select:focus {
  border-color: var(--qb-navy);
}

/* Session Header Info */
.session-info-card {
  max-width: var(--content-max-width);
  margin: 1.5rem auto 0 auto;
  padding: 0 1rem;
  width: 100%;
  transition: max-width 0.25s ease;
}

.session-meta-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.5rem;
}

.session-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--qb-navy);
}

.question-counter {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--qb-navy);
  background-color: var(--qb-blue-light);
  padding: 0.25rem 0.85rem;
  border-radius: 9999px;
}

/* QB Stacked Progress Bar */
.qb-progress-container {
  width: 100%;
  height: 12px;
  background-color: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
  display: flex;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  margin-bottom: 0.4rem;
}

.qb-prog-bar {
  height: 100%;
  transition: width 0.4s ease;
}

.qb-prog-correct {
  background-color: #2563eb;
}

.qb-prog-wrong {
  background-color: #ef4444;
}

.qb-prog-unanswered {
  background-color: #cbd5e1;
}

.qb-progress-labels {
  display: flex;
  gap: 1.25rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

/* 📊 Modal Overall Bar Section */
.modal-overall-bar-section {
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.modal-overall-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
}

/* 📌 Custom Presets Styling */
.preset-name-input {
  flex: 1;
  padding: 0.45rem 0.75rem;
  border: 1.5px solid #e879f9;
  border-radius: 6px;
  font-size: 0.88rem;
  outline: none;
}

.preset-name-input:focus {
  border-color: #c026d3;
  box-shadow: 0 0 0 2px rgba(192, 38, 211, 0.15);
}

.btn-save-preset {
  background-color: #c026d3;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.btn-save-preset:hover {
  background-color: #a21caf;
}

.preset-list-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 180px;
  overflow-y: auto;
}

.preset-item-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  padding: 0.55rem 0.85rem;
  font-size: 0.88rem;
  box-shadow: var(--shadow-sm);
}

.preset-item-info {
  display: flex;
  flex-direction: column;
}

.preset-item-title {
  font-weight: 700;
  color: #065f46;
}

.preset-item-sub {
  font-size: 0.75rem;
  color: #64748b;
}

.preset-item-actions {
  display: flex;
  gap: 0.4rem;
}

.btn-apply-preset {
  background-color: #059669;
  color: #ffffff;
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  cursor: pointer;
}

.btn-apply-preset:hover {
  background-color: #047857;
}

.btn-start-preset {
  background-color: #2563eb;
  color: #ffffff;
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  cursor: pointer;
}

.btn-start-preset:hover {
  background-color: #1d4ed8;
}

.btn-delete-preset {
  background: none;
  border: 1px solid #ef4444;
  color: #ef4444;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}

.btn-delete-preset:hover {
  background-color: #fef2f2;
}

/* 🧠 Spaced Repetition Stage Badges */
.spaced-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  background-color: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #c4b5fd;
}

.spaced-stage-badge.is-due {
  background-color: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* 📝 画面右下に追従・固定表示するフローティングメモボタン (長さ1/4・最下部配置) */
.floating-note-btn {
  position: fixed;
  right: 0;
  top: auto;
  bottom: 1.5rem;
  transform: none;
  z-index: 1200;
  background-color: #eab308;
  color: #ffffff;
  border: 1.5px solid #ca8a04;
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 0.35rem 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  box-shadow: -2px 2px 8px rgba(202, 138, 4, 0.3);
  transition: all 0.25s ease;
  user-select: none;
}

.floating-note-btn:hover {
  background-color: #ca8a04;
  padding-left: 0.65rem;
}

.floating-note-icon {
  font-size: 0.95rem;
}

.floating-note-text {
  writing-mode: horizontal-tb;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.floating-note-btn.has-note {
  background-color: #ca8a04;
  border-color: #a16207;
  animation: pulse 2s infinite;
}

/* 📝 横からスッと出てスクロールしても追従するサイドドロワー (Side Note Drawer) */
.side-note-drawer {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background-color: #fefce8;
  border-left: 3.5px solid #eab308;
  box-shadow: -8px 0 25px rgba(0, 0, 0, 0.25);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.side-note-drawer.open {
  right: 0;
}

.side-note-header {
  background-color: #fef08a;
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #eab308;
}

.side-note-close-btn {
  background: #ca8a04;
  color: #ffffff;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.side-note-close-btn:hover {
  background-color: #854d0e;
}

.side-note-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.side-note-textarea {
  flex: 1;
  width: 100%;
  min-height: 250px;
  padding: 0.85rem;
  border: 1.5px solid #fde047;
  border-radius: 0.6rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: #451a03;
  background-color: #ffffff;
  outline: none;
  resize: none;
  line-height: 1.7;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.2s;
}

.side-note-textarea:focus {
  border-color: #ca8a04;
  box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.25);
}

/* 📝 Question Note Styling (Old) */
.note-card {
  display: none;
}

/* 💡 Answer Hint Card Styling (解答のヒントカード) */
.hint-toggle-btn {
  background-color: #fef3c7;
  color: #92400e;
  border: 1.5px solid #f59e0b;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: 0.4rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  transition: all 0.2s ease;
}

.hint-toggle-btn:hover {
  background-color: #fde68a;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

.hint-card {
  display: none;
  background-color: #fffbe6;
  border: 2px solid #f59e0b;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12);
  animation: fadeIn 0.3s ease;
}

.hint-card.show {
  display: block;
}

.hint-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #b45309;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1.5px dashed #fcd34d;
  padding-bottom: 0.4rem;
}

.hint-card-body {
  font-size: 0.98rem;
  color: #78350f;
  line-height: 1.8;
}

.note-in {
  display: block;
  background-color: #fffbe6;
  border-left: 5px solid #f59e0b;
  padding: 0.85rem 1.15rem;
  border-radius: 0 6px 6px 0;
  margin: 0.75rem 0;
}

.note1-title {
  font-weight: 800;
  color: #b45309;
  margin-bottom: 0.4rem;
}

/* Custom Quiz Builder Modal Styles */
.builder-section {
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 1rem;
}

.builder-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--qb-navy);
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.4rem;
}

.builder-toggle-btn {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary);
}

.builder-toggle-btn:hover {
  background-color: var(--qb-blue-light);
  color: var(--qb-blue);
}

.builder-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.5rem;
}

.builder-checkbox-grid.grid-2col {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.builder-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.builder-checkbox-label:hover {
  border-color: var(--qb-blue);
  background-color: var(--qb-blue-light);
}

.builder-checkbox-label input[type="checkbox"] {
  accent-color: var(--qb-navy);
  width: 15px;
  height: 15px;
}

/* Main Container */
.main-container {
  max-width: var(--content-max-width);
  margin: 0 auto 2.5rem auto;
  padding: 0 1rem;
  width: 100%;
  flex: 1;
  transition: max-width 0.25s ease;
}

/* Problem Card */
.problem-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
}

/* =========================================================
   🔤 フォントスケーリング重みづけルール
   - 大事な部分（問題文・選択肢・解説本文）: 大きく！
   - 条文（関連条文引用ブロック）: ちょい大きく！
   - 重要ではない部分（成績バナー・メタタグ・補足URL等）: あまり変化させず固定
========================================================= */

/* 🌟 1. 大事な部分（問題文本文・設問文） -> 最も大きく */
.problem-body, p.question, p.question-para2 {
  font-size: calc(var(--app-font-size) * 1.08) !important;
  line-height: 1.85 !important;
}

/* 🌟 1. 大事な部分（選択肢テキスト・選択肢カード） -> 大きく */
p.ques-h, p.ques-h-para2, .choice-item {
  font-size: calc(var(--app-font-size) * 1.04) !important;
  line-height: 1.75 !important;
}

/* 🌟 1. 大事な部分（解説メイン本文） -> 大きく */
p.Comm-p, p.Choices, p.Choices-para2 {
  font-size: calc(var(--app-font-size) * 1.02) !important;
  line-height: 1.8 !important;
}

/* 📜 2. 条文（関連条文引用ブロック） -> ちょい大きく */
p.low {
  font-size: calc(var(--app-font-size) * 0.95) !important;
}

p.Prov-k {
  font-size: calc(var(--app-font-size) * 0.92) !important;
}

p.Prov-h, p.Prov-h2, p.Prov-h3, p.Prov-beppyo {
  font-size: calc(var(--app-font-size) * 0.96) !important;
  line-height: 1.75 !important;
}

table.low-table {
  font-size: calc(var(--app-font-size) * 0.92) !important;
}

/* ⚪ 3. 重要ではない部分（成績バナー、メタ情報、出典等） -> あまり変化させず固定 */
.history-badge-banner,
.history-badge,
.history-badge-banner span,
date.write-date,
.overview-tag {
  font-size: 0.85rem !important;
}

/* 省スペース用スリム選択ボックス */
.filter-select-sm {
  padding: 0.35rem 0.55rem !important;
  font-size: 0.82rem !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

/* Past History Banner on Problem Header */
.history-badge-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.history-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}

.history-badge.is-correct {
  background-color: #eff6ff;
  color: #1e40af;
  border: 1px solid #3b82f6;
}

.history-badge.is-wrong {
  background-color: var(--danger-light);
  color: #991b1b;
  border: 1px solid var(--danger-border);
}

.history-badge.is-unanswered {
  background-color: #f8fafc;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

/* Top Table Header */
div.Overlay-table-2 {
  margin-bottom: 0.75rem;
  overflow-x: auto;
}

/* ⚡ 図（表）の直下に配置する高速巡回用クイックナビバー */
.quick-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.quick-nav-btn {
  background-color: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

.quick-nav-btn:hover:not([disabled]) {
  background-color: #e2e8f0;
  color: #0f172a;
}

.quick-nav-btn.next-highlight {
  background-color: #2563eb;
  color: #ffffff;
  border-color: #1d4ed8;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
}

.quick-nav-btn.next-highlight:hover:not([disabled]) {
  background-color: #1d4ed8;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.quick-nav-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.quick-nav-info {
  font-size: 0.85rem;
  font-weight: 800;
  color: #475569;
  letter-spacing: 0.03em;
}

table.top-table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #006400 !important;
  background-color: #ffffff;
  font-size: 0.93rem;
}

table.top-table th, table.top-table td {
  border: 1px solid #006400 !important;
  padding: 8px 10px !important;
  vertical-align: middle !important;
}

th.top-table-th01, td.top-table-td01 {
  text-align: center !important;
  vertical-align: middle !important;
  min-width: 170px;
}

th.top-table-th01 a, td.top-table-td01 a {
  color: #0000ff !important;
  font-weight: bold;
  text-decoration: underline;
  display: inline-block;
  text-align: center !important;
  white-space: nowrap !important; /* 常に1行に収める */
  max-width: 100%;
}

th.top-table-th02 {
  font-size: 1.15rem !important;
  font-weight: bold !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  padding: 10px 12px !important;
  background-color: #fcfcfc;
}

th.top-table-th03 {
  font-weight: bold !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  padding: 6px 8px !important;
  background-color: #f8fafc;
}

td.top-table-td02 {
  text-align: center !important;
  vertical-align: middle !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  padding: 6px 0 !important;
  background-color: #ffffff;
}

td.top-table-td02 a {
  color: #0000ff !important;
  font-weight: bold !important;
  font-size: 1.1rem !important;
  text-decoration: underline !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
}

td.top-table-td03 {
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  color: #1e293b !important;
  text-align: left !important;
  vertical-align: middle !important;
  padding: 10px 14px !important;
}

/* Problem Text */
.problem-body {
  font-size: 1.02rem;
  color: var(--text-primary);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.enclosed1 {
  border: 1px solid #333;
  padding: 2px 6px;
  margin: 0 2px;
  font-weight: bold;
  background-color: #f9f9f9;
}

table.Choices-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem 0;
  font-size: 0.95rem;
}

table.Choices-table th, table.Choices-table td {
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  vertical-align: middle;
}

table.Choices-table th {
  background-color: #f8fafc;
  font-weight: 600;
  text-align: center;
}

/* Choice Options */
.choices-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.choice-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.95rem 1.15rem;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.choice-item:hover:not(.disabled) {
  border-color: var(--qb-navy);
  background-color: var(--qb-blue-light);
}

.choice-item.selected {
  border-color: var(--qb-navy);
  background-color: var(--qb-blue-light);
  box-shadow: 0 0 0 1px var(--qb-navy);
}

.choice-item.correct {
  border-color: var(--qb-blue) !important;
  background-color: #eff6ff !important;
  color: #1e40af !important;
}

.choice-item.wrong {
  border-color: var(--danger-border) !important;
  background-color: var(--danger-light) !important;
  color: #991b1b !important;
}

/* 選択肢未選択で「解説を見る」を押した時の正解表示 (チェックマークは付けない) */
.choice-item.is-answer-highlight {
  border-color: #0284c7 !important;
  background-color: #f0f9ff !important;
  color: #0369a1 !important;
}

.choice-item.is-answer-highlight .radio-circle {
  border-color: #0284c7 !important;
  background-color: transparent !important;
}

.choice-item.is-answer-highlight .radio-circle::after {
  content: none !important;
  display: none !important;
}

.radio-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.choice-item.selected .radio-circle {
  border-color: var(--qb-navy);
  background-color: var(--qb-navy);
}

.choice-item.selected .radio-circle::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 50%;
}

.choice-item.correct .radio-circle {
  border-color: var(--qb-blue);
  background-color: var(--qb-blue);
}

.choice-item.correct .radio-circle::after {
  content: "✓";
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
}

.choice-item.wrong .radio-circle {
  border-color: var(--danger-border);
  background-color: var(--danger-border);
}

.choice-item.wrong .radio-circle::after {
  content: "✕";
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
}

.choice-text {
  font-size: 0.98rem;
  line-height: 1.6;
  color: inherit;
}

/* Action Area */
.action-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}

.btn-confirm {
  background-color: var(--qb-navy);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.75rem 2.25rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.btn-confirm:hover:not(:disabled) {
  background-color: #1e40af;
  transform: translateY(-1px);
}

.btn-confirm:disabled {
  background-color: #cbd5e1;
  cursor: not-allowed;
  transform: none;
}

.btn-nav {
  padding: 0.6rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-nav:hover:not(:disabled) {
  background-color: #f1f5f9;
}

.btn-nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Result Feedback Banner */
.result-banner {
  display: none;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  margin-top: 1.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  align-items: center;
  gap: 0.75rem;
}

.result-banner.show {
  display: flex;
  animation: slideDown 0.3s ease;
}

.result-banner.is-correct {
  background-color: #eff6ff;
  border: 1.5px solid #3b82f6;
  color: #1e40af;
}

.result-banner.is-wrong {
  background-color: var(--danger-light);
  border: 1.5px solid var(--danger-border);
  color: #991b1b;
}

/* Past 3 Wrong Answers History Box */
.wrong-history-box {
  background-color: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: 0.6rem;
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
}

.wrong-history-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #991b1b;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.wrong-history-list {
  list-style: none;
  padding-left: 0;
}

.wrong-history-item {
  font-size: 0.88rem;
  color: #7f1d1d;
  padding: 0.25rem 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #fecaca;
}

.wrong-history-item:last-child {
  border-bottom: none;
}

/* 2-Pattern Explanation Tabs UI */
.explanation-card {
  display: none;
  background-color: var(--bg-card);
  border: 2.5px solid #00b050;
  border-radius: 0.75rem;
  padding: 1.75rem;
  box-shadow: var(--shadow-md);
  margin-top: 1.5rem;
  box-sizing: border-box;
}

.explanation-card.show {
  display: flow-root !important;
  animation: fadeIn 0.3s ease;
}

.exp-pattern-content {
  display: none;
}

.exp-pattern-content.active {
  display: flow-root !important;
  animation: fadeIn 0.2s ease;
}

/* ⚡ 解説内の対象文章再掲スタイル */
.re-stated-option {
  position: relative;
  background-color: var(--bg-card, #f8fafc);
  border-left: 4px solid var(--primary, #3b82f6);
  padding: 0.75rem 1rem;
  margin: 3rem 0 0.5rem 0; /* 大きな余白で明確に区切る */
  color: var(--text-main, #334155);
  font-size: calc(var(--app-font-size, 1rem) * 0.95);
  border-radius: 0 6px 6px 0;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  display: flow-root; /* グラフなどの右寄せ(float)要素との重なりを防止 */
}

/* 2つ目以降の区切りとして点線を引く */
.re-stated-option::before {
  content: "";
  display: block;
  position: absolute;
  top: -1.75rem;
  left: -4px; /* border-left 4px分ずらす */
  right: 0;
  border-top: 2px dashed #cbd5e1;
}

/* 最初の再掲ブロックは上の余白を狭くし、点線も非表示にする */
.re-stated-option.first-option {
  margin-top: 1.5rem;
}
.re-stated-option.first-option::before {
  display: none;
}

.re-stated-option + p.ques-h,
.re-stated-option + p.comm-p9,
.re-stated-option + p {
  margin-top: 0 !important;
}

/* ⚡ 解説カード末尾のナビゲーションバー */
.exp-footer-nav {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px dashed #cbd5e1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.next-exp-btn {
  flex: 1;
  background-color: var(--qb-blue);
  color: #ffffff;
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transition: all 0.2s ease;
}

.next-exp-btn:hover:not(:disabled) {
  background-color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}


.explanation-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 1.5rem;
}

.exp-tab-btn {
  padding: 0.6rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.exp-tab-btn:hover {
  color: var(--brand-color);
}

.exp-tab-btn.active {
  color: var(--brand-color);
  border-bottom-color: var(--brand-color);
  background-color: var(--brand-light);
  border-radius: 6px 6px 0 0;
}

.exp-pattern-content {
  display: none;
}

.exp-pattern-content.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

p.ans {
  font-size: 1.2rem;
  font-weight: bold;
  color: #008000;
  margin-bottom: 0.5rem;
}

p.Comment {
  font-size: 1.1rem;
  font-weight: bold;
  color: #cc0000;
  margin-bottom: 1rem;
}

p.Comm-p, p.Choices, p.Choices-para2 {
  font-size: 1rem;
  margin-bottom: 1rem;
  line-height: 1.8;
}

/* =========================================================
   📜 法令条文ハイライト・問題文／解説文の視覚的区別
   - section.inbox: 条文引用ブロック全体のコンテナ
   - p.low: 法令名ヘッダー 【労働安全衛生法】等
   - p.Prov-k: 条文タイトル（産業医等）
   - p.Prov-h / h2 / h3: 条文本文（階層別インデント）
   - p.Prov-beppyo: 別表見出し
   - table.low-table: 条文内テーブル
   - p.question / p.ques-h: 問題文本文
   - p.comm-p9: 補足注釈
========================================================= */

/* ---- 問題文本文 ---- */
p.question {
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: 1rem;
  color: #1e293b;
}

p.question b {
  color: #1e3a8a;
  font-size: 1.1rem;
}

p.question-para2 {
  font-size: 1rem;
  line-height: 1.85;
  margin-bottom: 1.25rem;
  color: #334155;
  padding-left: 0.25rem;
}

/* ---- 選択肢テキスト (イ ロ ハ ニ ホ) ---- */
p.ques-h {
  font-size: 1rem;
  line-height: 1.85;
  margin-bottom: 0.85rem;
  color: #1e293b;
}

p.ques-h-para2 {
  font-size: 0.97rem;
  line-height: 1.85;
  margin-bottom: 0.85rem;
  color: #334155;
  padding-left: 0.4rem;
}

/* ---- 解説 補足注釈テキスト ---- */
p.comm-p9, p.comm-p9-para2 {
  font-size: 0.92rem;
  line-height: 1.75;
  color: #64748b;
  margin-bottom: 0.85rem;
  padding-left: 0.5rem;
  border-left: 3px solid #cbd5e1;
  background: none;
  clear: both;
}

/* ---- 条文引用ブロック全体 section.inbox ---- */
section.inbox {
  position: relative;
  clear: both !important;
  margin: 1.25rem 0;
  padding: 1rem 1.25rem 0.85rem 1.25rem;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #fbbf24;
  border-left: 5px solid #d97706;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.08);
}

section.inbox::before {
  content: "📜 関連条文";
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: #92400e;
  letter-spacing: 0.06em;
  background: #fde68a;
  padding: 0.15rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.65rem;
  width: fit-content;
}

/* ---- 法令名ヘッダー p.low ---- */
p.low {
  font-size: 0.92rem;
  font-weight: 800;
  color: #92400e;
  background: linear-gradient(90deg, #fde68a 0%, #fef3c7 100%);
  padding: 0.35rem 0.75rem;
  border-radius: 5px;
  margin: 0.85rem 0 0.4rem 0;
  border-left: 4px solid #b45309;
  letter-spacing: 0.03em;
}

section.inbox p.low:first-of-type {
  margin-top: 0;
}

/* ---- 条文タイトル p.Prov-k（産業医等）---- */
p.Prov-k {
  font-size: 0.88rem;
  font-weight: 700;
  color: #78350f;
  margin: 0.15rem 0 0.3rem 0.5rem;
  font-style: italic;
}

/* ---- 条文本文 p.Prov-h (メイン) ---- */
p.Prov-h {
  font-size: 0.93rem;
  line-height: 1.75;
  color: #422006;
  margin: 0.25rem 0 0.4rem 0.5rem;
  padding: 0.1rem 0;
}

p.Prov-h b {
  color: #b45309;
  font-weight: 800;
}

/* ---- 条文本文 p.Prov-h2 (号レベル) ---- */
p.Prov-h2 {
  font-size: 0.91rem;
  line-height: 1.7;
  color: #422006;
  margin: 0.2rem 0 0.35rem 1.5rem;
  padding: 0.05rem 0;
}

p.Prov-h2 b {
  color: #b45309;
  font-weight: 800;
}

/* ---- 条文本文 p.Prov-h3 (イロハ等、サブ号) ---- */
p.Prov-h3 {
  font-size: 0.89rem;
  line-height: 1.65;
  color: #44403c;
  margin: 0.15rem 0 0.3rem 2.5rem;
  padding: 0.05rem 0;
}

p.Prov-h3 b {
  color: #b45309;
  font-weight: 800;
}

/* ---- 別表見出し p.Prov-beppyo ---- */
p.Prov-beppyo {
  font-size: 0.91rem;
  font-weight: 700;
  color: #78350f;
  margin: 0.6rem 0 0.35rem 0.5rem;
  padding: 0.25rem 0.6rem;
  background: #fef3c7;
  border-radius: 4px;
  border: 1px dashed #d97706;
  width: fit-content;
}

p.Prov-beppyo b {
  color: #92400e;
}

/* ---- 条文内テーブル table.low-table ---- */
table.low-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.6rem 0 0.85rem 0;
  font-size: 0.88rem;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.low-table-th2 {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #78350f;
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  border: 1px solid #f59e0b;
  font-size: 0.85rem;
  text-align: center;
}

.low-table-td1, .low-table-td2 {
  padding: 0.45rem 0.75rem;
  border: 1px solid #e5e7eb;
  color: #1e293b;
  font-size: 0.87rem;
}

.low-table-td2 {
  text-align: center;
}

/* 条文テーブルのスクロール */
div.Overlay-table {
  overflow-x: auto;
  margin: 0.5rem 0 0.75rem 0;
  -webkit-overflow-scrolling: touch;
}

div.nowrap-table table {
  white-space: nowrap;
}

/* ---- 下線強調 span.under3 ---- */
span.under3 {
  text-decoration: underline;
  text-decoration-color: #ef4444;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  font-weight: 700;
}

/* ---- 注記ボックス span.note1 ---- */
span.note1 {
  display: block;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.6rem 0 0.85rem 0;
}

span.note1 ul {
  margin: 0;
  padding-left: 1.25rem;
}

span.note1 li {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #166534;
  margin-bottom: 0.2rem;
}

/* ---- 問題文中のテーブル table.ques-sentence-table ---- */
table.ques-sentence-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem 0;
  font-size: 0.95rem;
}

.Choices-table-th {
  background-color: #f1f5f9;
  font-weight: 600;
  text-align: center;
  padding: 8px 10px;
  border-bottom: 2px solid #cbd5e1;
  color: #475569;
  font-size: 0.88rem;
}

.Choices-table-td, .Choices-table-td2 {
  padding: 6px 10px;
  vertical-align: middle;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.95rem;
}

.Choices-table-td-l {
  padding: 6px 10px;
  vertical-align: middle;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.95rem;
}

/* ---- 執筆日 ---- */
date.write-date {
  display: block;
  font-size: 0.82rem;
  color: #94a3b8;
  text-align: right;
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e2e8f0;
}

/* Image Click-to-Zoom Cursor & Lightbox Styles */
.problem-card img, .explanation-card img {
  cursor: zoom-in !important;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.problem-card img:hover, .explanation-card img:hover {
  filter: brightness(1.05);
}

p.piczoom-left, .piczoom-left {
  cursor: pointer !important;
  user-select: none;
}

p.piczoom-left:hover, .piczoom-left:hover {
  color: var(--brand-color) !important;
  text-decoration: underline;
}

/* Lightbox Modal Overlay */
.lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 23, 42, 0.88);
  z-index: 2500;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(6px);
}

.lightbox-overlay.show {
  display: flex;
  animation: fadeIn 0.25s ease;
}

.lightbox-container {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  background-color: #ffffff;
}

.lightbox-close-btn {
  position: absolute;
  top: -45px;
  right: 0;
  background-color: #ffffff;
  color: #0f172a;
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}

.lightbox-close-btn:hover {
  background-color: var(--danger-color);
  color: #ffffff;
}

/* Picbox Gen */
div.picbox-gen {
  float: right !important;
  width: 240px !important;
  max-width: 240px !important;
  margin: 0 0 1rem 1.5rem !important;
  text-align: center !important;
}

div.picbox-gen img {
  width: 100% !important;
  max-width: 240px !important;
  height: auto !important;
  border: 1px solid #2563eb !important;
  border-radius: 6px !important;
  box-shadow: var(--shadow-sm) !important;
  cursor: zoom-in !important;
}

div.picbox-gen p.piczoom-left, div.picbox-gen .piczoom-left {
  font-size: 0.82rem !important;
  color: #008000 !important;
  margin-top: 4px !important;
  text-align: center !important;
}

@media (max-width: 640px) {
  div.picbox-gen {
    float: none !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 1rem auto !important;
  }
}

/* Roueikon Styled Elements */
.roueikon-container {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1e293b;
  line-height: 1.85;
  font-size: 1.02rem;
}

.roueikon-container p, .roueikon-container li {
  font-size: 1.02rem !important;
  line-height: 1.8 !important;
  color: #1e293b !important;
  margin-bottom: 0.75rem;
}

.roueikon-container ul, .roueikon-container ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.roueikon-container li {
  margin-bottom: 0.5rem;
}

.roueikon-container h1 {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #1d4ed8 !important;
  margin: 1.5rem 0 1rem 0 !important;
  border-bottom: 3px solid #1d4ed8 !important;
  padding-bottom: 0.4rem !important;
}

.roueikon-container section > h2, .roueikon-container h2 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  border-left: 6px solid #2563eb !important;
  padding-left: 0.75rem !important;
  margin: 1.75rem 0 1rem 0 !important;
  color: #0f172a !important;
  background-color: #f1f5f9;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  border-radius: 0 6px 6px 0;
}

.roueikon-container .lede {
  font-size: 1.05rem !important;
  background: #fdfbf7;
  border-left: 5px solid #2563eb;
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 1.5rem;
  color: #1e293b;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.roueikon-container .callout {
  margin: 1.25rem 0;
  padding: 14px 18px;
  border-left: 5px solid #2563eb;
  background: #eff6ff;
  border-radius: 0 8px 8px 0;
  font-size: 1.02rem;
}

.roueikon-container .law {
  margin: 1.25rem 0;
  padding: 16px 20px;
  background: #fcfbf8;
  border: 1.5px solid #e2e8f0;
  border-left: 5px solid #d97706;
  border-radius: 0 8px 8px 0;
  font-size: 1rem;
}

.roueikon-container .conclusion {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #0f172a;
  color: #f8fafc;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}

.roueikon-container .conclusion h2 {
  color: #facc15 !important;
  font-size: 1.2rem !important;
  margin-bottom: 0.75rem !important;
  background: none !important;
  border-left: none !important;
  padding: 0 !important;
}

.roueikon-container .conclusion p, .roueikon-container .conclusion li {
  color: #f8fafc !important;
}

/* Roueikon Diagram Image Styling */
.roueikon-container figure {
  margin: 1.75rem 0;
  text-align: center;
}

.roueikon-container img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid #e2e8f0 !important;
  display: block !important;
  margin: 0 auto !important;
}

.roueikon-container figcaption {
  font-size: 0.88rem !important;
  color: #64748b !important;
  margin-top: 0.6rem !important;
  font-weight: 500;
  text-align: center;
}

/* YouTube Video Card Styling */
.youtube-section {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-top: 1.5rem;
}

.youtube-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.youtube-thumb-card {
  display: block;
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  background-color: #000;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.youtube-thumb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.25);
}

.yt-thumb-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.88;
  transition: opacity 0.2s ease;
}

.youtube-thumb-card:hover .yt-thumb-img {
  opacity: 1;
}

.yt-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  color: #ffffff;
}

.yt-play-btn {
  width: 64px;
  height: 44px;
  background-color: #ff0000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

.youtube-thumb-card:hover .yt-play-btn {
  transform: scale(1.15);
  background-color: #cc0000;
}

.yt-play-text {
  font-size: 1.05rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  letter-spacing: 0.03em;
}

/* History Modal Styling (QB Style) */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 23, 42, 0.6);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.modal-overlay.show {
  display: flex;
  animation: fadeIn 0.2s ease;
}

.modal-card {
  background: var(--bg-card);
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.qb-modal-header {
  background-color: #ffffff;
  border-bottom: 2px solid var(--qb-navy);
}

.modal-header {
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--qb-navy);
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--text-muted);
  cursor: pointer;
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

/* QB Field Progress List */
.qb-field-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.5rem;
  max-height: none !important;
  overflow-y: visible !important;
}

.qb-field-item {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.7rem 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qb-field-item:hover {
  border-color: var(--qb-blue);
  background-color: var(--qb-blue-light);
  transform: translateX(3px);
}

.qb-field-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.history-list-container {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 240px;
  overflow-y: auto;
}

.history-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background-color: #ffffff;
  font-size: 0.9rem;
}

.history-item-row.is-correct {
  border-left: 4px solid var(--qb-blue);
}

.history-item-row.is-wrong {
  border-left: 4px solid var(--danger-color);
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  background-color: #f8fafc;
  text-align: center;
}

blockquote.quote {
  position: relative;
  background-color: #f8fafc !important;
  border-left: 5px solid #38bdf8 !important;
  padding: 1.25rem 1.25rem 1.25rem 2.4rem !important;
  margin: 1.5rem 0 !important;
  border-radius: 0 0.5rem 0.5rem 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

blockquote.quote::before {
  content: "“";
  position: absolute;
  left: 10px;
  top: 4px;
  font-size: 2.5rem;
  color: #93c5fd;
  font-family: Georgia, serif;
  line-height: 1;
}

.explanation-card a {
  color: #0000ff;
  text-decoration: underline;
}

/* =========================================================
   📋 演習前・問題概要一覧リスト (Question Overview List)
========================================================= */
.overview-list-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.overview-header-card {
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
  border: 2px solid #93c5fd;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  flex-wrap: wrap;
}

.overview-header-info {
  flex: 1;
  min-width: 260px;
}

.btn-start-all-overview {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 800;
  padding: 0.85rem 1.6rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-start-all-overview:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

.overview-items-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.overview-item-row {
  background-color: #ffffff;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.overview-item-row:hover {
  border-color: #2563eb;
  background-color: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
}

.overview-item-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.overview-item-idx {
  font-weight: 900;
  color: #2563eb;
  font-size: 0.95rem;
  min-width: 32px;
}

.overview-tag {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.overview-tag.tag-year {
  background-color: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

.overview-tag.tag-qnum {
  background-color: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
  font-weight: 800;
}

.overview-tag.tag-diff {
  background-color: #fffbe6;
  color: #b45309;
  border-color: #fde68a;
}

.overview-badge {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  white-space: nowrap;
}

.overview-badge.is-correct {
  background-color: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

.overview-badge.is-wrong {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.overview-badge.is-unanswered {
  background-color: #f8fafc;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.overview-item-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--qb-navy);
  line-height: 1.4;
}

.overview-item-snippet {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.overview-item-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.2rem;
}

.overview-item-start-btn {
  font-size: 0.84rem;
  font-weight: 700;
  color: #2563eb;
  background-color: #eff6ff;
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  border: 1px solid #bfdbfe;
  transition: all 0.15s ease;
}

.overview-start-btns-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn-start-random {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  border-color: #6d28d9 !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.22) !important;
}

.btn-start-random:hover {
  background: linear-gradient(135deg, #6d28d9, #5b21b6) !important;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35) !important;
}

.overview-item-row:hover .overview-item-start-btn {
  background-color: #2563eb;
  color: #ffffff;
  border-color: #1d4ed8;
}


@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* =========================================================
   📱 iPhone / iPad レスポンシブ対応
========================================================= */

/* ---- タブレット (iPad: 768px以下) ---- */
@media (max-width: 768px) {

  /* ヘッダー: 縦2段に折り返し */
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }

  .brand-title {
    font-size: 1rem;
    max-width: 100%;
  }

  /* ヘッダーボタン群: ヘッダー内だけでスクロール、ページ幅は超えない */
  .qb-header-actions {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .qb-header-actions::-webkit-scrollbar {
    display: none;
  }

  /* 全ヘッダーボタンを小さく */
  .qb-btn-primary,
  .qb-btn-spaced,
  .qb-btn-secondary,
  .qb-btn-custom,
  .qb-btn-history,
  .qb-btn-lock {
    font-size: 0.8rem;
    padding: 0.45rem 0.7rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .qb-search-wrapper {
    display: none; /* モバイルではテキスト検索ボックスを非表示 */
  }

  .qb-search-icon-btn {
    display: flex; /* モバイルではアイコンボタンを表示 */
    align-items: center;
    justify-content: center;
  }

  /* コントロールバー: 縦積み */
  .control-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }

  /* モードタブ: コントロールバー内だけでスクロール、ページ幅を超えない */
  .mode-tabs {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 3px;
    padding: 3px;
  }
  .mode-tabs::-webkit-scrollbar { display: none; }

  .mode-tab-btn {
    font-size: 0.82rem;
    padding: 0.4rem 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* フィルターグループ: 縦積み */
  .filter-group {
    flex-direction: column;
    gap: 0.4rem;
  }

  .filter-select {
    width: 100%;
    max-width: 100%;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
  }

  /* セッション情報 */
  .session-info-card {
    margin: 0.85rem auto 0 auto;
    padding: 0 0.85rem;
  }

  .session-meta-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }

  .session-title {
    font-size: 1rem;
  }

  .question-counter {
    font-size: 0.9rem;
    padding: 0.2rem 0.65rem;
  }

  .qb-progress-labels {
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.78rem;
  }

  /* 問題カード */
  .main-container {
    padding: 0 0.65rem;
    margin-bottom: 5rem;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .problem-card {
    padding: 1.25rem;
    border-radius: 0.65rem;
    width: 100%;
    overflow-x: hidden;
  }

  .problem-body {
    font-size: 0.97rem;
    line-height: 1.85;
  }

  /* クイックナビバー (スマホ用調整) */
  .quick-nav-bar {
    padding: 0.4rem 0.5rem;
    margin-top: 0.4rem;
    margin-bottom: 1.1rem;
  }

  .quick-nav-btn {
    font-size: 0.82rem;
    padding: 0.5rem 0.7rem;
  }

  .quick-nav-info {
    font-size: 0.78rem;
  }

  .choice-item {
    padding: 0.85rem 1rem;
  }

  .choice-text {
    font-size: 0.95rem;
  }

  /* 決定・ナビゲーションボタン */
  .action-area {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .btn-confirm {
    width: 100%;
    order: -1; /* 「決定」を一番上に */
    font-size: 1rem;
    padding: 0.85rem;
  }

  .btn-nav {
    flex: 1;
    font-size: 0.88rem;
    padding: 0.55rem 0.65rem;
    text-align: center;
  }

  /* 解説カード */
  .explanation-card {
    padding: 1.25rem;
  }

  .exp-tab-btn {
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
  }

  /* 条文引用ブロック: モバイル最適化 */
  section.inbox {
    padding: 0.75rem 0.85rem 0.65rem 0.85rem;
    margin: 1rem 0;
    border-radius: 0 8px 8px 0;
  }

  section.inbox::before {
    font-size: 0.65rem;
    padding: 0.1rem 0.45rem;
    margin-bottom: 0.45rem;
  }

  p.low {
    font-size: 0.82rem;
    padding: 0.25rem 0.55rem;
  }

  p.Prov-k {
    font-size: 0.8rem;
    margin-left: 0.25rem;
  }

  p.Prov-h {
    font-size: 0.85rem;
    margin-left: 0.25rem;
    line-height: 1.65;
  }

  p.Prov-h2 {
    font-size: 0.83rem;
    margin-left: 0.85rem;
    line-height: 1.6;
  }

  p.Prov-h3 {
    font-size: 0.81rem;
    margin-left: 1.4rem;
    line-height: 1.6;
  }

  p.Prov-beppyo {
    font-size: 0.83rem;
    margin-left: 0.25rem;
  }

  table.low-table {
    font-size: 0.8rem;
  }

  .low-table-th2 {
    font-size: 0.78rem;
    padding: 0.35rem 0.5rem;
  }

  .low-table-td1, .low-table-td2 {
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
  }

  /* 問題ヘッダー表: カード内に収める */
  div.Overlay-table-2 {
    overflow-x: hidden;
    width: 100%;
  }

  table.top-table {
    font-size: 0.82rem;
    min-width: unset;
    width: 100%;
    table-layout: fixed;
  }

  /* 難易度・年度列の幅を固定、説明列は残り全幅 */
  table.top-table th.top-table-th02,
  table.top-table td.top-table-td02 {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    white-space: normal !important;
    word-break: break-all;
  }

  table.top-table th.top-table-th03,
  table.top-table td.top-table-td03 {
    word-break: break-word;
    white-space: normal !important;
  }

  table.top-table th.top-table-th01,
  table.top-table td.top-table-td01 {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    white-space: normal !important;
    word-break: break-word;
    font-size: 0.78rem;
  }

  /* フローティングメモボタン: コンパクトに画面端に配置 */
  .floating-note-btn {
    top: auto;
    bottom: 2rem;
    right: 0;
    transform: none;
    padding: 0.4rem 0.3rem;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 2px 6px rgba(0,0,0,0.2);
  }

  .floating-note-icon {
    font-size: 0.95rem;
  }

  .floating-note-text {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
  }

  /* サイドメモドロワー: スマホでは画面幅いっぱい */
  .side-note-drawer {
    width: 100vw;
    right: -100vw;
  }

  .side-note-drawer.open {
    right: 0;
  }

  /* モーダル: 画面いっぱいに */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal-card {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 1.25rem 1.25rem 0 0;
  }

  .modal-header h3 {
    font-size: 1rem;
  }

  /* 解答ヒントカード */
  .hint-card {
    padding: 1rem 1.1rem;
  }

  /* 忘却ステージバッジ: 折り返しOK */
  .history-badge-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

/* ---- スマートフォン (iPhone: 480px以下) ---- */
@media (max-width: 480px) {

  .brand-title {
    font-size: 0.92rem;
  }

  .brand-badge {
    display: none; /* 小画面では非表示 */
  }

  .session-title {
    font-size: 0.93rem;
  }

  .problem-body {
    font-size: 0.95rem;
  }

  .choice-text {
    font-size: 0.93rem;
  }

  /* 問題表: さらに小さく */
  table.top-table {
    font-size: 0.76rem;
  }

  th.top-table-th02,
  th.top-table-th03,
  td.top-table-td02,
  td.top-table-td03 {
    padding: 4px 5px !important;
  }

  .qb-progress-labels {
    font-size: 0.75rem;
  }

  .exp-tab-btn {
    font-size: 0.78rem;
    padding: 0.4rem 0.55rem;
  }

  /* YouTube サムネイルの高さ調整 */
  .yt-thumb-img {
    aspect-ratio: 16 / 9;
  }

  /* 解説パターン2 の図解 */
  .roueikon-container img {
    border-radius: 8px !important;
  }
}

/* ---- iPhone セーフエリア対応 (ホームインジケーター) ---- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .main-container {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }

  .floating-note-btn {
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}

/* =========================================================
   📑 元サイト (osh-management.com) 直前チェックシートUI再現スタイル
========================================================= */

/* 目次枠 */
.mokuji-waku {
  background-color: #f0fdf4;
  border: 2px solid #16a34a;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.mokuji {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mokuji a {
  text-decoration: none;
  color: #15803d;
  font-weight: 700;
  display: block;
}

.mokuji-1 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-top: 0.6rem;
  color: #166534;
  border-bottom: 1px dashed #86efac;
  padding-bottom: 0.25rem;
}

.mokuji-2 {
  font-size: 0.95rem;
  margin-left: 1.25rem;
  margin-top: 0.35rem;
  color: #15803d;
}

/* サンプルボックス */
.sample-box-top {
  background-color: #fffbe6;
  border: 1px solid #ffe58f;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #595959;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.midashi-style2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  margin: 1.5rem 0 1rem 0;
}

.midashi-style3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e3a8a;
  border-left: 5px solid #2563eb;
  padding-left: 0.6rem;
  margin: 1.25rem 0 0.75rem 0;
}

.midashi-styleh4 {
  font-size: 1.08rem;
  font-weight: 800;
  color: #15803d;
  border-bottom: 2px solid #22c55e;
  padding-bottom: 0.3rem;
  margin: 1.25rem 0 0.75rem 0;
}

/* 要点リンクカード・ボックス */
.sample-box-waku {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.auto-styleh5 {
  display: block;
  background-color: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  color: #1e3a8a;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  transition: all 0.15s ease;
  cursor: pointer;
}

.auto-styleh5:hover {
  border-color: #2563eb;
  background-color: #eff6ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
}

/* note-in 枠 */
.note-in {
  display: block;
  background-color: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.note1-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #1e3a8a;
  margin-bottom: 0.6rem;
  border-bottom: 2px solid #93c5fd;
  padding-bottom: 0.25rem;
}

.linote2 {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.listn1 {
  font-weight: 800;
  color: #0f172a;
  margin-top: 0.5rem;
  font-size: 0.92rem;
}

.listn2 {
  font-size: 0.9rem;
  color: #334155;
  margin-left: 1rem;
  margin-top: 0.25rem;
  line-height: 1.6;
  position: relative;
}

.listn2::before {
  content: "・";
  position: absolute;
  left: -0.85rem;
}

/* Commentary-table (再現テーブル) */
.Commentary-table {
  width: 100%;
  border-collapse: collapse;
  border: 1.5px solid #006400 !important;
  font-size: 0.88rem;
  background-color: #ffffff;
  margin: 1rem 0;
}

.Commentary-table th, .Commentary-table td {
  border: 1px solid #006400 !important;
  padding: 0.6rem 0.85rem;
  vertical-align: middle;
}

.Commentary-table th {
  background-color: #e6f4ea;
  color: #004d00;
  font-weight: 800;
  text-align: center;
}

.Commentary-table-th-c5 {
  background-color: #f0fdf4;
  color: #166534;
  font-weight: 800;
  text-align: center;
}

/* 📑 直前チェックシート専用 2カラム閲覧ビューア */
.cs-viewer-container {
  display: flex;
  height: 100%;
  width: 100%;
}

.cs-viewer-sidebar {
  width: 300px;
  min-width: 250px;
  background-color: #ffffff;
  border-right: 1.5px solid #e2e8f0;
  overflow-y: auto;
  padding: 1rem 0.75rem;
  flex-shrink: 0;
}

.cs-sidebar-group-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #475569;
  padding: 0.6rem 0.5rem 0.3rem 0.5rem;
  margin-top: 0.5rem;
  border-bottom: 1.5px solid #cbd5e1;
}

.cs-sidebar-item {
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 0.35rem;
  transition: all 0.15s ease;
  line-height: 1.35;
}

.cs-sidebar-item:hover {
  background-color: #f1f5f9;
  color: #1e3a8a;
}

.cs-sidebar-item.active {
  background-color: #eff6ff;
  color: #1d4ed8;
  border-left: 4px solid #2563eb;
  font-weight: 800;
}

/* 📋 問題概要一覧 「もっと見る」ボタン */
.btn-load-more-overview {
  width: 100%;
  max-width: 500px;
  padding: 0.85rem 1.5rem;
  margin: 1.25rem auto 0.5rem auto;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1d4ed8;
  border: 1.5px solid #93c5fd;
  border-radius: 10px;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1);
  display: inline-block;
}

.btn-load-more-overview:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  transform: translateY(-1px);
}

.cs-viewer-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  background-color: #ffffff;
}

.cs-content-box {
  line-height: 1.65;
}

.cs-content-box h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1e3a8a;
  border-bottom: 2.5px solid #2563eb;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

.cs-lead {
  font-size: 0.92rem;
  color: #475569;
  margin-bottom: 1.5rem;
  background-color: #f8fafc;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border-left: 3px solid #0284c7;
}

.cs-sub-section {
  margin-top: 1.5rem;
}

.cs-sub-section h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.75rem;
}

.cs-table-wrapper {
  overflow-x: auto;
  margin-bottom: 1.25rem;
}

.cs-detail-table {
  width: 100%;
  border-collapse: collapse;
  border: 1.5px solid #cbd5e1;
  font-size: 0.88rem;
  background-color: #ffffff;
}

.cs-detail-table th, .cs-detail-table td {
  border: 1px solid #cbd5e1;
  padding: 0.65rem 0.85rem;
  vertical-align: middle;
}

.cs-detail-table th {
  background-color: #f1f5f9;
  font-weight: 800;
  color: #1e293b;
  text-align: center;
}

.cs-list {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.cs-list li {
  margin-bottom: 0.5rem;
  color: #334155;
  font-size: 0.92rem;
}

@media (max-width: 768px) {
  .cs-viewer-container {
    flex-direction: column;
  }
  .cs-viewer-sidebar {
    width: 100%;
    max-height: 180px;
    border-right: none;
    border-bottom: 1.5px solid #cbd5e1;
  }
}

/* ---- タッチデバイス向け: ホバー効果を無効化してタップを快適に ---- */
@media (hover: none) and (pointer: coarse) {
  .choice-item:hover:not(.disabled) {
    border-color: var(--border-color);
    background-color: var(--bg-card);
  }

  .qb-field-item:hover {
    transform: none;
  }
}

/* =========================================================
   📝 「まいめも（マイメモ）」開いたとき専用 レイアウト調整
========================================================= */

/* PC表示時: マイメモが開いたら、ヘッダー・タイトル・進捗バー・問題カードをすべて統一して残り領域の中央に配置 */
@media (min-width: 1321px) {
  body.side-note-open .session-info-card,
  body.side-note-open .main-container {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: var(--content-max-width) !important;
    width: 100% !important;
    transform: translateX(-190px) !important; /* 380pxの半分左へシフトし、タイトルとカードの垂直位置を完全一致 */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin 0.3s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.25s ease;
  }
}

/* 画面幅 901px〜1320px のPC画面 */
@media (min-width: 901px) and (max-width: 1320px) {
  body.side-note-open .session-info-card,
  body.side-note-open .main-container {
    margin-left: 1.5rem !important;
    margin-right: 390px !important;
    max-width: calc(100vw - 420px) !important;
    width: 100% !important;
    transform: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

body.side-note-open .control-bar,
body.side-note-open .header {
  padding-right: 390px !important;
  transition: padding-right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* マイメモ内部の全テキスト・文章を左揃えに強固固定 */
.side-note-drawer,
.side-note-body,
.side-note-textarea,
#sideNoteQTitle,
.side-note-header {
  text-align: left !important;
}

/* スマホ表示時レスポンシブ */
@media (max-width: 900px) {
  body.side-note-open .session-info-card,
  body.side-note-open .main-container {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100vw !important;
    transform: none !important;
  }

  body.side-note-open .control-bar,
  body.side-note-open .header {
    padding-right: 0.85rem !important;
  }
}

/* =========================================================
   🔔 トースト通知 (ブラウザ標準alertの完全代替、操作不要・自動消滅)
========================================================= */
.toast-notification {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(15, 23, 42, 0.92);
  color: #ffffff;
  padding: 0.7rem 1.4rem;
  border-radius: 9999px;
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.toast-notification.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* =========================================================
   ⚙️ 表示調整 (幅・文字サイズ無段階スライダー) ポップオーバー
========================================================= */
.display-adjust-popover {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 1.15rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  z-index: 2000;
  animation: fadeIn 0.2s ease;
}

.display-adjust-popover.show {
  display: block;
}

.adjust-range-slider {
  flex: 1;
  height: 6px;
  border-radius: 9999px;
  accent-color: #2563eb;
  cursor: pointer;
}

.adjust-step-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #1e293b;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.adjust-step-btn:hover {
  background: #eff6ff;
  border-color: #2563eb;
  color: #2563eb;
}

.adjust-preset-btn {
  flex: 1;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.35rem;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.adjust-preset-btn:hover {
  background: #eff6ff;
  border-color: #2563eb;
  color: #2563eb;
}


/* Marker Highlight Style */
.marker-highlight {
  background: linear-gradient(transparent 40%, rgba(255, 235, 59, 0.8) 40%);
  font-weight: bold;
  border-radius: 2px;
  padding: 0 0.1em;
}

/* Marker Note Style */
.marker-note {
  float: right;
  clear: right;
  margin-right: -220px; /* 枠外（右）に押し出す */
  width: 200px;
  min-height: 24px;
  font-size: 0.8rem;
  color: #0369a1;
  background: #e0f2fe;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  border: 1px solid #bae6fd;
  box-sizing: border-box;
  outline: none;
  cursor: pointer; /* デフォルトはポインター */
  word-wrap: break-word;
}

.marker-note[contenteditable="true"] {
  cursor: text;
  box-shadow: 0 0 0 2px #38bdf8;
}

.marker-note:empty::before {
  content: "📝 メモを入力...";
  color: #7dd3fc;
  pointer-events: none;
}

.marker-note img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 4px;
  border-radius: 4px;
}

@media (max-width: 1200px) {
  .marker-note {
    margin-right: -100px;
    width: 150px;
  }
}

@media (max-width: 768px) {
  .marker-note {
    float: right;
    clear: right;
    margin-right: 0;
    margin-left: 1rem;
    width: auto;
    max-width: 40%;
  }
}