:root {
  --primary-color: #a8b2c1;
  --primary-dark: #94a3b8;
  --secondary-color: #48bb78;
  --accent-color: #cbd5e1;
  /* Pastel blue palette */
  --pastel-blue-1: #dbeafe; /* blue-100 */
  --pastel-blue-2: #bfdbfe; /* blue-200 */
  --pastel-blue-3: #93c5fd; /* blue-300 */
  --background: #f7fafc;
  --surface: #ffffff;
  --text-primary: #2d3748;
  --text-secondary: #718096;
  --border-color: #e2e8f0;
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --radius: 12px;
  --radius-lg: 16px;
}


/* 英語文字用フォントの包括的設定 */
.word-text,
.phonics-test-table td.phonics-test-word-cell,
.word-item,
.phonics-modal-body,
.alphabet-button,
.voice-test-word,
#vocab-word,
#exam-word,
#english,
#answer,
#word-input,
#imijun-type-input,
.brand-english,
.quiz_en,
#hw-modal-word,
#globish-english,
#globish-word,
#elementary-english,
#imijun-english,
#imijun-type-english,
table td:first-child,
table th:first-child,
.vocab-choice-btn .choice-text,
.exam-choice-btn .choice-text,
#vocab-wrong-list strong,
.result-details strong,
.clickable-word,
.vocab-clickable-word,
.exam-clickable-word,
.pronunciation,
#vocab-pron,
#exam-pron,
#globish-translation,
/* 解説モーダル内の英語テキスト */
#explain-modal-body .masked-text,
#explain-modal-body .tts-clickable,
#explain-modal-body table td:nth-child(3),
#explain-modal-body strong,
#explain-modal-body em,
#explain-modal-body code:not(pre code),
/* 解説モーダル内の通常のテキスト（見出し、段落、リストなど） */
#explain-modal-body h1,
#explain-modal-body h2,
#explain-modal-body h3,
#explain-modal-body p,
#explain-modal-body li,
#explain-modal-body ul,
#explain-modal-body ol,
/* 小学校英語モーダル内の英語テキスト */
#elementary-modal-body .tts-clickable,
#elementary-modal-body table td:nth-child(3),
#elementary-modal-body strong,
#elementary-modal-body em,
#elementary-modal-body code:not(pre code),
/* 小学校英語モーダル内の通常のテキスト（見出し、段落、リストなど） */
#elementary-modal-body h1,
#elementary-modal-body h2,
#elementary-modal-body h3,
#elementary-modal-body p,
#elementary-modal-body li,
#elementary-modal-body ul,
#elementary-modal-body ol {
  font-family: 'Lexend Deca', 'Segoe UI', Arial, sans-serif !important;
  font-weight: 400 !important;
}

/* 表現集モードのチェックボックススタイル */
.memorization-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #7BD4FF;
}

.memorization-checkbox:checked {
  background-color: #7BD4FF;
}

/* 表現集モードのマイクボタンスタイル */
.mic-button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 20px;
  transition: transform 0.2s ease;
}

.mic-button:hover {
  transform: scale(1.2);
}

.mic-button:active {
  transform: scale(0.9);
}

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

body {
  font-family: 'Lexend Deca', 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
  font-weight: 400;
  /* パールホワイトの柔らかな背景 */
  background: linear-gradient(135deg, #f8f9fb 0%, #ffffff 55%, #f2f3f7 100%);
  min-height: 100vh;
  color: var(--text-primary);
  line-height: 1.6;
}

/* 日本語テキストの基本設定 */
p, li, span, div, td, th, label, button, input, textarea, select {
  font-weight: 400;
}

/* 日本語テキストの包括的設定 */
#japanese, .japanese-text, .modal-body p, .modal-body li, .modal-body span, .modal-body div {
  font-weight: 400;
}

#container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  animation: fadeIn 0.5s ease-in;
}

/* フォニックスモード用スタイル */

#phonics-panel {
  width: 100%;
  max-width: 100%;
  padding: 20px;
}

.phonics-content {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-md);
  margin-top: 20px;
  width: 100%;
  max-width: 100%;
}

.alphabet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 15px;
  max-width: 800px;
  margin: 0 auto;
}

.alphabet-button {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--border-color);
  background: var(--surface);
  border-radius: var(--radius);
  font-size: 32px;
  font-weight: 400;
  color: var(--primary-color);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.alphabet-button:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.alphabet-button.phoneme-mastered {
  background: #c3e9ff;
  border-color: #5bb4e8;
}

.alphabet-button.phoneme-mastered:hover {
  background: #a8d8f0;
  color: white;
}

.alphabet-button.special-phoneme {
  background: var(--surface);
  color: var(--primary-color);
  font-size: 28px;
}

.alphabet-button.special-phoneme:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.phoneme-separator {
  grid-column: 1 / -1;
  height: 2px;
  background: var(--border-color);
  margin: 20px 0;
}

/* フォニックスモーダル用スタイル */
.phonics-modal-content {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: #fff;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* フォニックステストモーダル用スタイル */
.phonics-test-modal-content {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: #fff;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.phonics-test-modal-body {
  padding: 40px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* フォニックステスト: テーブルコンテナの幅（exam と同様に） */
#phonics-test-table-container {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 50px;
}

@media (min-width: 768px) {
  #phonics-test-table-container {
    width: 35%;
  }
}

/* フォニックステストテーブル */
.phonics-test-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  margin: 0 auto;
  font-size: 18px;
  table-layout: fixed;
  padding-bottom: 50px;
}

.phonics-test-table thead {
  background: rgba(202, 243, 255, 0.8);
  position: sticky;
  top: 0;
  z-index: 10;
}

.phonics-test-table th {
  padding: 16px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 2px solid #e5e7eb;
  font-size: 16px;
}

.phonics-test-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s;
}

.phonics-test-table tbody tr:hover {
  background-color: #f9fafb;
}

.phonics-test-table td {
  padding: 16px;
  color: #1f2937;
  font-size: 18px;
}

/* Windows Chrome 初回フォント未適用対策: 単語セル用の強制フォント指定 */
.phonics-test-table td.phonics-test-word-cell {
  font-family: 'Lexend Deca', 'Segoe UI', Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.phonics-test-table .test-play-btn,
.phonics-test-table .test-pencil-btn {
  transition: transform 0.2s, opacity 0.2s;
}

.phonics-test-table .test-play-btn:hover,
.phonics-test-table .test-pencil-btn:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

/* フォニックス音声テストモーダル用スタイル */
.phonics-voice-test-modal-content {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: #fff;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.phonics-voice-test-modal-body {
  padding: 40px;
  padding-bottom: 100px; /* ボタン用のスペースを確保 */
  overflow-y: auto;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.phonics-voice-test-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  max-width: 800px;
  width: 100%;
}

.voice-test-image-container {
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.2s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.voice-test-image-container:hover {
  transform: scale(1.05);
}

.voice-test-image-container img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.voice-test-image-container.correct {
  border: 8px solid #ffdd00;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 12px rgba(255, 221, 0, 0.5);
}

.voice-test-word {
  font-size: 72px;
  font-weight: 400;
  color: #1f2937;
  text-align: center;
}

.voice-test-recognition {
  min-height: 80px;
  width: 100%;
  max-width: 500px;
  padding: 20px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #6b7280;
}

.voice-test-recognition.listening {
  border-color: #ef4444;
  background: #fef2f2;
  color: #ef4444;
}

.voice-test-recognition.success {
  border-color: #10b981;
  background: #f0fdf4;
  color: #10b981;
  font-weight: bold;
}

.voice-test-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 5px;
  background: white;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
}

.voice-test-control-btn {
  width: 30%;
  padding: 10px 20px;
  font-size: 22px;
  font-weight: 600;
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.voice-test-control-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.voice-test-control-btn:active {
  transform: translateY(0);
}

.phonics-modal-body {
  position: relative;
  flex: 1;
  padding: 40px;
  overflow-y: auto;
  background: linear-gradient(135deg, #f8f9fb 0%, #ffffff 55%, #f2f3f7 100%);
}

.word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 250px));
  gap: 20px;
  padding: 40px 100px;
  max-width: 1400px;
  margin: 0 auto;
  justify-content: center;
  place-content: center;
}

.word-card {
  background: var(--surface);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  padding: 10px 10px 15px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: 300px;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.word-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-color);
}

.word-card img {
  width: auto;
  max-width: 80%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 auto 5px auto;
  flex-shrink: 0;
  align-self: center;
}

.word-text {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-primary);
  text-transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  width: 100%;
  padding: 8px 5px 12px 5px;
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-height: 0;
  line-height: 1.2;
}

.word-number {
  color: var(--text-secondary);
  font-size: 20px;
  font-weight: normal;
  margin-right: 5px;
}

.star-container {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.star-container:hover {
  transform: scale(1.2);
}

.star-icon {
  font-size: 24px;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.star-icon.mastered {
  filter: none;
  opacity: 1;
  animation: starPop 0.3s ease;
}

@keyframes starPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* 音素ハイライト */
.phoneme-highlight {
  color: #ff0000;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: bold;
}

.nav-area {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1010;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  transition: all 0.3s ease;
}

.nav-area-left {
  left: 10px;
}

.nav-area-right {
  right: 10px;
}

.nav-area:hover {
  background: var(--primary-color);
  transform: translateY(-50%) scale(1.1);
}

.nav-arrow {
  font-size: 28px;
  color: var(--primary-color);
  transition: color 0.3s ease;
}

.nav-area:hover .nav-arrow {
  color: white;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .word-grid {
    padding: 40px 80px;
  }
  /* Vocab: 英語見出しはやや縮小 */
  #vocab-word { font-size: 2rem; }
  /* モバイル/タブレットでは選択肢を広めに */
  .vocab-choice-btn {
    width: 90%;
    min-width: 0;
    max-width: none;
    font-size: 1.15rem; /* モバイル: やや大きめに */
  }
  
  .nav-area {
    width: 50px;
    height: 50px;
  }
  
  .nav-arrow {
    font-size: 24px;
  }
  
  .word-text {
    font-size: 36px;
  }
}

@media (max-width: 480px) {
  .word-grid {
    padding: 30px 70px;
  }
  /* Vocab: 英語見出しはさらに縮小 */
  #vocab-word { font-size: 1.8rem; }
  .vocab-choice-btn {
    width: 95%;
    font-size: 1.1.2rem; /* スマホ小画面: 読みやすく */
  }
  
  .word-text {
    font-size: 32px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#title {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 0;
  margin-bottom: 20px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  overflow: hidden;
  position: relative;
}

#title h1 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

#title h2 {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 400;
  margin-bottom: 15px;
}

#title h3 {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 400;
  margin: 10px 0;
}

/* Hero Header Styles */
.hero-header {
  position: relative;
  padding: 20px 30px 8px;
  background: transparent;
  overflow: hidden;
}

.hero-bg { display: none; }

@keyframes gradientShift {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% { 
    transform: scale(1.05) rotate(1deg);
    opacity: 0.8;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

.brand-container {
  flex: 1;
  text-align: center;
}

.brand-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.brand-意味順 {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.brand-english {
  font-size: 2.5rem;
  font-weight: 400;
  background: linear-gradient(135deg, #a8b2c1 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -1px;
  animation: textGlow 3s ease-in-out infinite;
  text-shadow: 0 4px 8px rgba(168, 178, 193, 0.2);
}

.brand-divider {
  font-size: 2rem;
  font-weight: 300;
  color: rgba(168, 178, 193, 0.5);
  animation: pulse 2s ease-in-out infinite;
}

.brand-tcool {
  font-size: 2.6rem;
  font-weight: 800;
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  -webkit-text-fill-color: initial;
  background: none;
  text-shadow: none;
  animation: none;
  font-style: normal;
  text-transform: none;
  position: relative;
  display: inline-block;
}
.brand-tcool::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 999px;
  margin: 8px auto 0;
  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
  opacity: 0.9;
}

@keyframes textGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 8px rgba(168, 178, 193, 0.3));
  }
  50% { 
    filter: drop-shadow(0 0 16px rgba(203, 213, 225, 0.4));
  }
}

.brand-separator {
  width: 4px;
  height: 60px;
  background: linear-gradient(to bottom, 
    transparent, 
    var(--primary-color), 
    var(--accent-color), 
    transparent);
  border-radius: 2px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { 
    opacity: 0.6;
    transform: scaleY(1);
  }
  50% { 
    opacity: 1;
    transform: scaleY(1.1);
  }
}

.brand-subtitle {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  position: relative;
}

.kanji-highlight {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 2rem;
  text-shadow: 0 2px 4px rgba(168, 178, 193, 0.2);
  position: relative;
  animation: kanjiFloat 4s ease-in-out infinite;
}

@keyframes kanjiFloat {
  0%, 100% { 
    transform: translateY(0px);
  }
  50% { 
    transform: translateY(-3px);
  }
}

.brand-tagline {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-secondary);
  font-style: italic;
  letter-spacing: 1px;
  margin-top: 8px;
  opacity: 0.9;
  animation: fadeInUp 1s ease 0.5s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 0.9;
    transform: translateY(0);
  }
}

.hero-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.floating-element {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0.6;
  animation: float 6s ease-in-out infinite;
}

.elem-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.elem-2 {
  top: 15%;
  right: 15%;
  animation-delay: 1.5s;
}

.elem-3 {
  bottom: 25%;
  left: 8%;
  animation-delay: 3s;
}

.elem-4 {
  bottom: 20%;
  right: 12%;
  animation-delay: 4.5s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.6;
  }
  25% {
    transform: translateY(-10px) rotate(5deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  75% {
    transform: translateY(-10px) rotate(-5deg);
    opacity: 0.8;
  }
}

/* モード選択 */
#mode-selector {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background: #ffffff;
  z-index: 9999;
  padding: 20px;
  overflow-y: auto;
}

#mode-selector.hidden {
  display: none;
}

/* PC ではモードを 5 列グリッドで表示 */
@media (min-width: 1024px) {
  #mode-selector {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 200px));
    justify-items: stretch;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: 30px;
  }
  #mode-selector.hidden {
    display: none;
  }
  #mode-selector .mode-btn {
    width: 100%;
    min-width: 0;
    height: 150px;
  }
}

.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: white;
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 150px;
  height: 120px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.mode-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.mode-btn.active {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, rgba(168, 178, 193, 0.1), rgba(203, 213, 225, 0.1));
}

.mode-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
}

.mode-name {
  font-size: 1.1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.mode-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* 単語学習モード（vocab） */
/* テーブルの背景マージンを無くし、フォニックス表と統一 */
#vocab-panel {
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  margin: 10px auto 0;
  max-width: 100%;
  box-shadow: none;
}

/* vocab-containerのレスポンシブ設定 */
.vocab-container {
  width: 100%;
  margin: 0 auto;
}

/* PC画面では50%幅、スマホでは100%幅 */
@media (min-width: 768px) {
  .vocab-container {
    width: 50%;
  }
}

/* 検定モード（exam）のレスポンシブ設定 */
#exam-panel {
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  margin: 10px auto 0;
  max-width: 100%;
  box-shadow: none;
}

.exam-container {
  width: 100%;
  margin: 0 auto;
}

/* PC画面では50%幅、スマホでは100%幅 */
@media (min-width: 768px) {
  .exam-container {
    width: 50%;
  }
}

/* 級別のヘッダーボタンにも適用 */
.exam-grade-header {
  width: 100%;
}

/* 意味順モード（imijun）のレスポンシブ設定 */
#imijun-panel,
#elementary-panel {
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  margin: 10px auto 0;
  max-width: 100%;
  box-shadow: none;
}

#imijun-grammar-list,
#elementary-grammar-list {
  width: 100%;
  margin: 0 auto;
}

/* PC画面での幅設定、スマホでは100%幅 */
@media (min-width: 768px) {
  #imijun-grammar-list {
    width: 60%;
  }
  #elementary-grammar-list {
    width: 50%;
  }
}

/* 表現集モード（globish）のレスポンシブ設定 */
#globish-panel {
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  margin: 10px auto 0;
  max-width: 100%;
  box-shadow: none;
}

/* recitation-mode-listのレスポンシブ設定 */
#recitation-mode-list {
  width: 100%;
  margin: 0 auto;
}

/* PC画面では50%幅にする */
@media (min-width: 768px) {
  #recitation-mode-list {
    width: 50%;
    margin: 0 auto;
  }
}

.vocab-level-table {
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  font-size: 1.2rem;
}

.vocab-level-table thead {
  /* パールホワイト系の控えめヘッダー */
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  color: var(--text-primary);
}

/* フォニックスモードの表ヘッダー専用スタイル */
#phonics-table-container .vocab-level-table thead {
  background: linear-gradient(90deg, #F4C6D7 0%, #F5AEC6 45%, #F9729C 100%) !important;
}

#phonics-table-container .vocab-level-table th {
  color: #475569 !important;
  font-weight: 600 !important;
}

.vocab-level-table th {
  padding: 16px 20px;
  text-align: left;
  font-weight: normal;
  letter-spacing: 0.5px;
  font-size: 1.2rem;
}

/* 英単語表のカラム幅設定 (10%:15%:15%:15%:45%の比率) */
#vocab-home .vocab-level-table th:nth-child(1),
#vocab-home .vocab-level-table td:nth-child(1) {
  width: 10%; /* no. */
}

#vocab-home .vocab-level-table th:nth-child(2),
#vocab-home .vocab-level-table td:nth-child(2) {
  width: 15%; /* 単語数 */
}

#vocab-home .vocab-level-table th:nth-child(3),
#vocab-home .vocab-level-table td:nth-child(3) {
  width: 15%; /* Flashcard */
}

#vocab-home .vocab-level-table th:nth-child(4),
#vocab-home .vocab-level-table td:nth-child(4) {
  width: 15%; /* クイズ */
}

#vocab-home .vocab-level-table th:nth-child(5),
#vocab-home .vocab-level-table td:nth-child(5) {
  width: 45%; /* 手書き */
}

.vocab-level-table td {
  padding: 14px 20px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  font-size: 1.2rem;
  font-weight: normal;
}

.vocab-level-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(246, 248, 252, 0.9) 0%, rgba(241, 243, 248, 0.9) 100%);
}

/* 交互の薄いグレーでゼブラ表示 */
.vocab-level-table tbody tr { background: #ffffff; }
.vocab-level-table tbody tr:nth-child(even) { background: #f5f6fa; }

/* フォニックス一覧表: 背景色を全て白に統一 */
#phonics-table-container .vocab-level-table tbody tr { background: #ffffff; }
#phonics-table-container .vocab-level-table tbody tr:nth-child(even) { background: #ffffff; }

/* フォニックス一覧表: カラム幅設定と文字サイズ */
#phonics-table-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* PC画面では35%幅、スマホでは100%幅 */
@media (min-width: 768px) {
  #phonics-table-container {
    width: 35%;
  }
}

#phonics-table-container .vocab-level-table {
  table-layout: fixed;
  width: 100%;
}

#phonics-table-container .vocab-level-table th:nth-child(1),
#phonics-table-container .vocab-level-table td:nth-child(1) {
  width: 10%; /* 番号 */
  text-align: center;
}

#phonics-table-container .vocab-level-table td:nth-child(1) {
  font-size: 1.2rem;
}

#phonics-table-container .vocab-level-table th {
  font-size: 1.2rem;
  font-weight: normal;
}

#phonics-table-container .vocab-level-table th:nth-child(2) {
  /* 音素ヘッダー */
  width: 10%;
  text-align: center;
}

#phonics-table-container .vocab-level-table td:nth-child(2) {
  /* 音素データ */
  width: 10%;
  text-align: center;
  font-size: 1.2rem;
  font-weight: normal;
  letter-spacing: 0.5px;
}

#phonics-table-container .vocab-level-table th:nth-child(3) {
  /* 発音記号ヘッダー */
  width: 20%;
  text-align: center;
}

#phonics-table-container .vocab-level-table td:nth-child(3) {
  /* 発音記号データ */
  width: 20%;
  text-align: center;
  font-size: 1.2rem;
  font-weight: normal;
}

#phonics-table-container .vocab-level-table th:nth-child(4),
#phonics-table-container .vocab-level-table td:nth-child(4) {
  width: 30%; /* クリア */
  text-align: center;
  font-size: 1.2rem;
}



.vocab-quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.vocab-quiz-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  max-width: 800px;
  margin: 0 auto 20px;
}

.vocab-question h2 {
  font-size: 2rem;
  color: var(--text-primary);
  text-align: center;
}

/* Vocab: 英語は Google Fonts を使用 */
#vocab-word {
  font-size: 2.4rem; /* 英語の見出しを大きく */
  line-height: 1.2;
}

/* 結果一覧の英単語も英語フォントで - フォントは上部の包括的設定で適用 */

.vocab-question { margin-bottom: 20px; }

.vocab-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0; /* 上は .vocab-question で制御 */
  align-items: center; /* 中央寄せ */
}

.vocab-choice-btn {
  background: white;
  border: 2px solid var(--border-color);
  padding: 16px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  display: block;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  /* デスクトップでより広く、モバイルで適切に収まるように調整 */
  width: 85%;
  min-width: 280px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.25rem; /* 英単語の選択肢フォントを拡大 */
  line-height: 1.5;
}
.vocab-choice-btn:hover:not(.disabled) { 
  background: #f5f5f5; 
  border-color: var(--primary-color);
  transform: translateX(3px);
}
.vocab-choice-btn.correct { background: #4caf50; color: #fff; border-color: #4caf50; }
.vocab-choice-btn.wrong { background: #f44336; color: #fff; border-color: #f44336; }
.vocab-choice-btn.disabled { cursor: not-allowed; opacity: 0.7; }

.vocab-progress-bar { 
  background: rgba(168, 178, 193, 0.2); 
  border-radius: 10px; 
  padding: 16px; 
  max-width: 800px; 
  margin: 0 auto; 
}
.vocab-progress-bar .bar { 
  background: rgba(168, 178, 193, 0.3); 
  height: 18px; 
  border-radius: 10px; 
  overflow: hidden; 
  margin-bottom: 8px; 
}
.vocab-progress-bar .fill { 
  height: 100%; 
  width: 0%; 
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); 
  transition: width 0.4s ease; 
}
.vocab-progress-bar .pct { 
  text-align: center; 
  color: var(--text-primary); 
  font-weight: 600; 
}

.vocab-result-card { 
  background: linear-gradient(135deg, #fdfeff 0%, #ffffff 40%, #f8fafb 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px; 
  padding: 40px; 
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  max-width: 800px; 
  margin: 20px auto;
  backdrop-filter: blur(10px);
}

.score-display {
  text-align: center;
  margin-bottom: 0;
  padding: 0px;
  background: linear-gradient(135deg, #ffffff 0%, #fefefe 50%, #fafafc 100%);
  border-radius: 15px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

.score-display .score {
  font-size: 20px;
  font-weight: 300;
  color: #2d3748;
  letter-spacing: 2px;
  margin: 0;
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
}

.score-display .score span {
  font-weight: 600;
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.result-details {
  margin: 0 0 20px 0;
  padding: 25px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(203, 213, 225, 0.3);
}

.result-details h3 {
  margin: 0 0 20px 0;
  font-size: 1.3rem;
  font-weight: 500;
  color: #4a5568;
  letter-spacing: 0.5px;
}

.result-details ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.result-details li {
  padding: 12px 16px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #ffffff 0%, #fcfcfd 100%);
  border-radius: 8px;
  border-left: 3px solid #cbd5e1;
  font-size: 1.05rem;
  color: #2d3748;
  transition: all 0.2s ease;
}

.result-details li:hover {
  transform: translateX(5px);
  border-left-color: #4a5568;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.vocab-clickable-word,
.clickable-word,
.clickable-sentence,
td.clickable-word,
td.clickable-sentence {
  color: #2563eb !important;
  text-decoration: underline !important;
  text-decoration-style: dotted !important;
  text-underline-offset: 2px !important;
  transition: all 0.2s ease;
  cursor: pointer;
}

.vocab-clickable-word:hover,
.clickable-word:hover,
.clickable-sentence:hover,
td.clickable-word:hover,
td.clickable-sentence:hover {
  color: #1d4ed8 !important;
  text-decoration-style: solid !important;
}

.result-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 35px;
  flex-wrap: wrap;
}

.result-actions .btn {
  padding: 14px 32px;
  font-size: 1.05rem;
  font-weight: 500;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.3px;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.result-actions .btn-primary {
  background: linear-gradient(135deg, #f7fafc 0%, #ffffff 50%, #f0f4f8 100%);
  color: #2d3748;
  border: 1px solid rgba(203, 213, 225, 0.5);
}

.result-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  background: linear-gradient(135deg, #ffffff 0%, #f7fafc 50%, #edf2f7 100%);
}

.result-actions .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.result-actions .btn-secondary {
  background: linear-gradient(135deg, #718096 0%, #4a5568 100%);
  color: white;
  border: 1px solid transparent;
}

.result-actions .btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(74, 85, 104, 0.25);
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

.result-actions .btn-secondary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(74, 85, 104, 0.15);
}

/* モバイルで3択ボタンが枠を超えないよう固定幅を解除してフル幅に */
@media (max-width: 768px) {
  .vocab-choice-btn {
    width: 95%;
    min-width: 0;       /* ベースの min-width:320px を無効化 */
    max-width: none;    /* 親の内側幅を超えない */
  }
  
  .vocab-result-card {
    padding: 25px;
    margin: 15px;
  }
  
  .score-display .score {
    font-size: 20px;
  }
  
  .result-actions {
    flex-direction: column;
  }
  
  .result-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .vocab-choice-btn {
    width: 95%;
    min-width: 0;
    max-width: none;
    padding: 14px;      /* 極小画面で内側余白をわずかに調整 */
    font-size: 1.1.2rem;  /* 可読性を保ちつつ縮小 */
  }
  
  .vocab-result-card {
    padding: 20px;
    margin: 10px;
  }
  
  .score-display {
    padding: 12px;
    margin-bottom: 0;
  }
  
  .score-display .score {
    font-size: 20px;
    letter-spacing: 1px;
  }
  
  .result-details {
    padding: 18px;
  }
  
  .result-details h3 {
    font-size: 1.15rem;
  }
  
  .result-details li {
    padding: 10px 14px;
    font-size: 0.95rem;
  }
  
  .result-actions .btn {
    padding: 12px 24px;
    font-size: 0.95rem;
  }
}

.vocab-keyboard-hint { 
  text-align: center; 
  color: var(--text-secondary); 
  margin-bottom: 10px; 
}

.mode-icon {
  font-size: 1.3rem;
  margin-bottom: 2px;
}

.mode-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.mode-desc {
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-align: center;
}

/* 送信ボタン */
.submit-btn {
  display: block;
  margin: 20px auto;
  padding: 12px 30px;
  background: linear-gradient(135deg, #eef2ff, #f5f7ff);
  color: var(--text-primary);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  font-size: 1.2rem;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.submit-btn:active {
  transform: translateY(0);
}

/* 説明モード */
#explain-panel {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 30px;
  margin: 20px 0; /* 左寄せ（中央寄せをやめる） */
  max-width: 1000px;
  box-shadow: var(--shadow-lg);
}

/* 旧 音読モードスタイルは撤去 */

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

#explain-heading {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 16px;
  text-align: center;
}

#explain-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.explain-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
}

.explain-body {
  white-space: pre-wrap;
  line-height: 1.8;
  color: var(--text-primary);
}

.explain-body h1 {
  margin-bottom: 20px;
}

.explain-body h2 {
  margin-bottom: 20px;
  margin-top: 30px;
}

.explain-body h3 {
  margin-bottom: 15px;
  margin-top: 25px;
}

.explain-body p {
  margin-bottom: 15px;
}

.explain-body ul,
.explain-body ol {
  margin-bottom: 15px;
  padding-left: 30px;
}

.explain-body li {
  margin-bottom: 8px;
}

/* markmap SVG container */
.explain-body svg.markmap {
  width: 100%;
  height: 70vh; /* large, but within viewport */
  max-height: 800px;
  font-size: 11px;
}

/* モーダル */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.modal-content {
  position: relative;
  z-index: 1001;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 利用規約モーダル専用スタイル */
#license-modal.modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#license-modal .modal-content {
  width: 30%;
  max-width: 500px;
  min-width: 400px;
  max-height: 80vh;
  height: auto;
  background: white;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: modalSlideIn 0.3s ease-out;
}

#license-modal .modal-backdrop {
  background: transparent;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(248, 250, 252, 0.95);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 利用規約モーダルのヘッダー */
#license-modal .modal-header {
  padding: 20px 24px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

#license-modal .modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
}

#license-modal .modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  border: none;
  color: #64748b;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

#license-modal .modal-close:hover {
  background: #e2e8f0;
  color: #475569;
}

/* フォニックステストモーダルのヘッダーの高さを狭くする */
#phonics-test-modal .modal-header {
  padding: 10px;
  position: relative;
}

#phonics-test-modal-title {
  color: red;
}

#phonics-test-modal .modal-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#phonics-test-modal .modal-close {
  margin-left: auto;
}

.modal-title {
  font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close {
  border: none;
  background: rgba(255, 255, 255, 0.9);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-close:hover {
  background: rgba(255, 255, 255, 1);
  color: var(--text-primary);
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.modal-close:active {
  transform: scale(0.95);
}

/* Navigation buttons for modal */
.modal-nav-group {
  display: flex;
  gap: 8px;
  margin-right: auto;
  align-items: center;
}

.modal-nav-btn {
  padding: 5px;
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #4c51bf;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-nav-btn:hover {
  background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.modal-nav-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Reading button in header */
.reading-start-btn {
  padding: 5px 12px;
  background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
  color: white;
  border: 1px solid #FF8C00;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.reading-start-btn:hover {
  background: linear-gradient(135deg, #FF8C00 0%, #FF7F00 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.reading-start-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 解説モーダルの3つのボタンのポップアニメーション */
@keyframes modalButtonPop {
  /* 各ボタンの持ち時間は全体の33.3% (9秒周期で3秒ずつ) */
  0%, 33.3%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  /* ポップアップ */
  5.5% {
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }
  11% {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
  }
  /* 小さなバウンス */
  16.5% {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  }
  22% {
    transform: translateY(0) scale(1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

/* 解説モーダルのボタンにループアニメーションを適用 */
.modal-nav-btn.pop-animation-1 {
  animation: modalButtonPop 9s ease-in-out infinite;
  animation-delay: 0s;
  will-change: transform, box-shadow;
}

.modal-nav-btn.pop-animation-2 {
  animation: modalButtonPop 9s ease-in-out infinite;
  animation-delay: 3s;
  will-change: transform, box-shadow;
}

.modal-nav-btn.pop-animation-3 {
  animation: modalButtonPop 9s ease-in-out infinite;
  animation-delay: 6s;
  will-change: transform, box-shadow;
}

/* 学習モーダルのナビゲーション矢印 */
.quiz-nav-arrows {
  display: inline-flex;
  gap: 10px;
  margin-left: 20px;
}

.quiz-nav-arrows .modal-nav-btn {
  padding: 5px;
  min-width: 40px;
}

.modal-body {
  position: relative;
  flex: 1;
  padding: 0; /* markmap を全域に */
  padding-top: 0;
  margin-left: 20px;
}

.modal-body svg.markmap {
  width: 100%;
  height: 100%;
  font-size: 11px;
}

/* 文法学習（説明）モーダルは通常フォントにする */
#explain-modal .modal-title {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif !important;
  font-weight: 400;
}
/* 意味順２モーダルのヘッダーも普通のフォントに */
#imijun2-modal .modal-title {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif !important;
  font-weight: 400;
}
#explain-modal .modal-body,
#explain-modal .modal-body * {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
  font-weight: 400;
}

/* 解説モーダル内の日本語テキストの太さを調整 */
#explain-modal-body p,
#explain-modal-body li,
#explain-modal-body span:not(.masked-text),
#explain-modal-body div:not(.masked-text) {
  font-weight: 400;
}
#explain-modal .modal-body svg.markmap {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
}

/* 著作権モーダル: ヘッダーフォントを通常に、本文に余白 */
#license-modal .modal-title {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif !important;
  font-weight: 400;
}
#license-modal .modal-body {
  padding: 24px 32px;
  overflow-y: auto;
  line-height: 1.6;
  color: #374151;
  font-weight: 400;
}

#license-modal .modal-body > * + * {
  margin-top: 16px;
}

#license-modal .modal-body p {
  margin: 0 0 16px 0;
}

#license-modal .modal-body a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
}

#license-modal .modal-body a:hover {
  text-decoration: underline;
} 

/* 文法学習モーダル本文の余白とMarkdown整形 */
#explain-modal-body {
  padding: 24px 32px; /* 内側の余白を十分に確保 */
  overflow-y: auto;
  font-size: 14px; /* デフォルトのフォントサイズを小さく設定 */
}

#explain-modal-body > * + * {
  margin-top: 10px; /* 要素間の縦リズム */
}

#explain-modal-body h1 {
  font-size: 1.2rem;
  line-height: 1.35;
  font-weight: bold;
}

#explain-modal-body h2 {
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: bold;
}

#explain-modal-body h3 {
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: #B0ED4F;
}

#explain-modal-body h4 {
  font-size: 1rem;
  margin: 20px 0 8px;
  line-height: 1.35;
  font-weight: bold;
}

#explain-modal-body h5,
#explain-modal-body h6 {
  margin: 20px 0 8px;
  line-height: 1.35;
  font-weight: bold;
}

/* PDFと同じようにタイトル（h1, h2）にアンダーラインを追加（英文法の緑テーマに合わせて緑色） */
#explain-modal-body h1,
#explain-modal-body h2 {
  border-bottom: 2px solid #B0ED4F;
  padding-bottom: 8px;
}

/* 見出しの強調 */
#explain-modal-body h3,
#explain-modal-body h4,
#explain-modal-body h5,
#explain-modal-body h6 {
  font-weight: bold;
}

#explain-modal-body p {
  line-height: 2.2;
}

/* 英文（英語の例文）のフォントサイズを調整 */
#explain-modal-body strong,
#explain-modal-body em,
#explain-modal-body code:not(pre code) {
  font-size: 1.05em; /* 英文を少し大きく表示 */
  font-weight: 400; /* Regular */
}

/* マスクされた英文も調整 */
#explain-modal-body .masked-text {
  font-size: 1.05em; /* マスクされた英文を少し大きく */
  font-weight: 400;
  font-family: 'Lexend Deca', 'Segoe UI', Arial, sans-serif !important;
}

#explain-modal-body ul,
#explain-modal-body ol {
  margin: 0 0 16px 0;
  padding-left: 1.4em;
  line-height: 2.0;
}

#explain-modal-body li { 
  margin: 8px 0; 
  font-size: 14px; /* リスト項目のフォントサイズを調整 */
}

#explain-modal-body blockquote {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--border-color);
  background: #f9fafb;
  border-radius: 8px;
}

#explain-modal-body pre,
#explain-modal-body code {
  background: #f5f5f7;
  border-radius: 6px;
}

#explain-modal-body pre {
  padding: 12px 16px;
  overflow: auto;
  margin: 12px 0;
}

#explain-modal-body code { padding: 2px 6px; }

#explain-modal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

#explain-modal-body th,
#explain-modal-body td {
  border: 1px solid var(--border-color);
  padding: 8px 10px;
  text-align: left;
}

#explain-modal-body img {
  /* モバイル・タブレットでは80%、PCでは30% */
  width: 80% !important;
  height: auto !important;
  display: block !important;
  margin: 10px 0 !important;  /* 左寄せ：autoを0に変更 */
  padding: 0 !important;
  float: none !important;
  max-width: 80% !important;  /* フォールバック追加 */
}

/* el-grammar.md の画像スタイル */
/* 画像を左寄せで表示 - モバイルではデフォルト200px */
#elementary-modal-body img {
  width: 200px !important;
  height: auto !important;
  display: block !important;
  margin: 10px 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* PC画面では画像を左寄せで表示 */
@media (min-width: 768px) {
  #elementary-modal-body p:has(img) {
    width: 100%;
    margin: 10px 0;
    padding: 0;
    text-align: left;
  }
  
  #elementary-modal-body p:has(img) img {
    margin: 10px 0 !important;
    /* PCでは30%幅で左寄せ */
    width: 30% !important;
    max-width: 400px !important; /* 最大幅を制限 */
  }
  
  /* 英文法の解説モーダル - 画像を左寄せ */
  #explain-modal-body p:has(img) {
    width: 100%;  /* 幅を100%に変更して左寄せを有効に */
    margin: 10px 0;  /* 左右のmargin autoを削除 */
    padding: 0;
    text-align: left;  /* 左寄せ */
  }
  
  #explain-modal-body p:has(img) img {
    margin: 10px 0 !important;  /* 左寄せ：左右のmarginを0に */
    width: 30% !important;  /* PC画面では30% */
    max-width: 100% !important;  /* レスポンシブ対応 */
  }
  
  /* :has()セレクタのフォールバック - より詳細度の高いセレクタ */
  #explain-modal-body img {
    width: 30% !important;  /* PC画面では30% */
    max-width: 100% !important;
  }
}


.practice-btn {
  padding: 6px 12px;
  background: linear-gradient(135deg, #eef2ff, #f5f7ff);
  color: var(--primary-dark);
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.practice-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background: linear-gradient(135deg, #e3eaff, #eef4ff);
}

.practice-btn:active {
  transform: translateY(0);
}

/* 英単語モードの開始ボタン */
.vocab-start-btn {
  position: relative;
  padding: 8px 20px;
  background: linear-gradient(135deg, #fdfeff 0%, #f8f9fa 50%, #fafbfc 100%);
  color: #4a5568;
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 
              0 1px 3px rgba(0, 0, 0, 0.08),
              inset 0 1px 2px rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.vocab-start-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transition: left 0.5s ease;
}

.vocab-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 
              0 2px 4px rgba(0, 0, 0, 0.08),
              inset 0 1px 3px rgba(255, 255, 255, 1);
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 50%, #f8f9fa 100%);
  border-color: rgba(147, 197, 253, 0.5);
}

.vocab-start-btn:hover::before {
  left: 100%;
}

.vocab-start-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08),
              inset 0 1px 2px rgba(0, 0, 0, 0.05);
  background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 50%, #e9ecef 100%);
}

/* フラッシュカードボタンのスタイル */
.vocab-flashcard-btn {
  position: relative;
  padding: 8px 20px;
  background: linear-gradient(135deg, #fdfeff 0%, #f8f9fa 50%, #fafbfc 100%);
  color: #4a5568;
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 
              0 1px 3px rgba(0, 0, 0, 0.08),
              inset 0 1px 2px rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.vocab-flashcard-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transition: left 0.5s ease;
}

.vocab-flashcard-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 
              0 2px 4px rgba(0, 0, 0, 0.08),
              inset 0 1px 3px rgba(255, 255, 255, 1);
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 50%, #f8f9fa 100%);
  border-color: rgba(147, 197, 253, 0.5);
}

.vocab-flashcard-btn:hover::before {
  left: 100%;
}

.vocab-flashcard-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08),
              inset 0 1px 2px rgba(0, 0, 0, 0.05);
  background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 50%, #e9ecef 100%);
}

/* Globishモードの開始ボタン */
.globish-start-btn {
  position: relative;
  padding: 8px 20px;
  background: linear-gradient(135deg, #fdfeff 0%, #f8f9fa 50%, #fafbfc 100%);
  color: #4a5568;
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 
              0 1px 3px rgba(0, 0, 0, 0.08),
              inset 0 1px 2px rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.globish-start-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transition: left 0.5s ease;
}

.globish-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 
              0 2px 4px rgba(0, 0, 0, 0.08),
              inset 0 1px 3px rgba(255, 255, 255, 1);
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 50%, #f8f9fa 100%);
  border-color: rgba(147, 197, 253, 0.5);
}

.globish-start-btn:hover::before {
  left: 100%;
}

.globish-start-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08),
              inset 0 1px 2px rgba(0, 0, 0, 0.05);
  background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 50%, #e9ecef 100%);
}



.back-btn {
  display: block;
  margin: 20px auto;
  padding: 10px 25px;
  background: #f8f8ff;
  color: #2d3748;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: #f8f8ff;
  border-color: #cbd5e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* 統計コントロール */
#stats-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 5px;
  padding-bottom: 15px;
}

.stats-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.export-btn {
  background: linear-gradient(135deg, var(--secondary-color), #38a169);
  color: white;
  box-shadow: var(--shadow-sm);
}

.export-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.clear-btn {
  background: linear-gradient(135deg, #f56565, #e53e3e);
  color: white;
  box-shadow: var(--shadow-sm);
}

.clear-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

#overall-stats {
  padding: 10px 18px;
  background: rgba(168, 178, 193, 0.08);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* クイズ進捗バー */
#quiz-progress {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.quiz-progress-info {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 15px;
}

#current-question {
  color: var(--primary-color);
  font-size: 1.5rem;
}

#total-questions {
  color: var(--text-secondary);
}

.quiz-progress-bar {
  width: 100%;
  height: 20px;
  background: var(--background);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #e3eaff, #eef4ff);
  border-radius: 10px;
  transition: width 0.5s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

#question {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px;
  margin: 30px 0;
  box-shadow: var(--shadow-md);
  min-height: 200px;
  display: none;  /* デフォルトで非表示 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#question:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

#japanese {
  font-size: 1.6rem;
  font-weight: normal;
  color: var(--text-primary);
  margin-bottom: 20px;
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
}

#japanese.good-job-message {
  font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 2.5rem;
  font-weight: bold;
}

#english {
  font-size: 2rem;
  color: #000000;
  font-weight: 400;
}

#word-input {
  width: 100%;
  max-width: 600px;
  padding: 20px 20px 25px 20px;
  font-size: 1.6rem;
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  outline: none;
  transition: all 0.3s ease;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  margin: 20px auto;
  display: block;
  text-align: center;  /* カーソルと入力テキストを中央寄せ */
  line-height: 1.5;
  min-height: 70px;
}

#keyboard-hint {
  max-width: 600px;
  margin: -10px auto 10px;
  text-align: right;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

#word-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(168, 178, 193, 0.1);
  transform: translateY(-2px);
}

#word-input::placeholder {
  color: var(--text-secondary);
}

#ans {
  display: none;  /* デフォルトで非表示 */
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 20px auto;
}

#hide_answer, #hide_quiz {
  padding: 8px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  background: linear-gradient(135deg, #eef2ff, #f5f7ff);
  color: var(--primary-dark);
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

#hide_answer:hover, #hide_quiz:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  background: linear-gradient(135deg, #e3eaff, #eef4ff);
}

#hide_answer:active, #hide_quiz:active {
  transform: translateY(0);
}

/* Answerボタンをパールホワイト配色に調整 */
#hide_answer {
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 55%, #f4f6fa 100%);
  color: var(--text-primary);
  border-color: #e5e7eb;
}

#hide_answer:hover {
  background: linear-gradient(135deg, #f5f6fa 0%, #ffffff 60%);
}

/* 答えブロック（統一されたグレイ背景） */
#answer-block {
  background: #f5f5f5;
  padding: 12px 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  max-width: 600px;
}

.answer-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

#answer {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--primary-color);
  padding: 0;
  background: none;
}

#hint {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-left: auto;
  padding: 0;
  background: none;
}

.hint-text:not(:empty)::before {
  content: "(";
}

.hint-text:not(:empty)::after {
  content: ")";
}

#意味順Btns {
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
  margin: 10px auto 0;
  max-width: 1200px;
}

/* パネルの全画面表示 */
#imijun-panel,
#globish-panel,
#意味順Btns {
  width: 100%;
  max-width: 100%;
  padding: 20px;
}

.grammar-table {
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1.2rem;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* PC画面では50%幅、スマホでは100%幅 - globish用 */
@media (min-width: 768px) {
  #globish-panel .grammar-table {
    width: 100%;
  }
  
  #imijun-panel .grammar-table {
    width: 100%;
  }
}

.grammar-table thead {
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
}

.grammar-table th {
  padding: 16px 20px;
  text-align: left;
  font-weight: normal;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.grammar-table th:first-child {
  width: 80px;
  text-align: center;
}

/* 通常のgrammar-tableの2列目、3列目 */
#意味順Btns .grammar-table th:nth-child(2) {
  width: 200px;
}

#意味順Btns .grammar-table th:nth-child(3) {
  width: 100px;
}

.grammar-table td:nth-child(4) {
  text-align: left;
  color: #000000;
}

/* 文法学習モード専用: 統計カラムなしの場合のカラム幅と配置 */
.explain-mode .grammar-table th:nth-child(1),
.explain-mode .grammar-table td:nth-child(1) {
  width: 10%;
}

.explain-mode .grammar-table th:nth-child(2),
.explain-mode .grammar-table td:nth-child(2) {
  width: 30%;
}

.explain-mode .grammar-table th:nth-child(3),
.explain-mode .grammar-table td:nth-child(3) {
  width: 60%;
  text-align: left;
}

/* タイピングモード専用: 説明カラムなしの3列構成 (番号:回数:文法項目 = 10%:10%:80%) */
.practice-mode .grammar-table {
  table-layout: fixed;
}

.practice-mode .grammar-table th {
  color: #000000 !important;
}

.practice-mode .grammar-table th:nth-child(1),
.practice-mode .grammar-table td:nth-child(1) {
  width: 10%;
  text-align: center;
  color: #000000 !important;
}

.practice-mode .grammar-table th:nth-child(2),
.practice-mode .grammar-table td:nth-child(2) {
  width: 10%;
  text-align: center;
  color: #000000 !important;
}

.practice-mode .grammar-table th:nth-child(3),
.practice-mode .grammar-table td:nth-child(3) {
  width: 80%;
  text-align: left;
  color: #000000 !important;
}

/* タイピングモードの全てのセルのフォント色を黒に */
.practice-mode .grammar-table td {
  color: #000000 !important;
}

/* タイピングモードの統計セル（回数）も黒に */
.practice-mode .grammar-table .stats-cell,
.practice-mode .grammar-table .stats-cell .stats-count,
.practice-mode .grammar-table .stats-cell .stats-accuracy,
.practice-mode .grammar-table .stats-cell .stats-review {
  color: #000000 !important;
}

/* 手書きモード専用: 説明カラムなしの3列構成 (番号:回数:文法項目 = 10%:10%:80%) */
.handwriting-mode .grammar-table,
.handwriting-mode #意味順Btns .grammar-table {
  table-layout: fixed !important;
}

.handwriting-mode .grammar-table th:nth-child(1),
.handwriting-mode .grammar-table td:nth-child(1),
.handwriting-mode #意味順Btns .grammar-table th:nth-child(1),
.handwriting-mode #意味順Btns .grammar-table td:nth-child(1) {
  width: 10% !important;
  text-align: center !important;
}

.handwriting-mode .grammar-table th:nth-child(2),
.handwriting-mode .grammar-table td:nth-child(2),
.handwriting-mode #意味順Btns .grammar-table th:nth-child(2),
.handwriting-mode #意味順Btns .grammar-table td:nth-child(2) {
  width: 10% !important;
  text-align: center !important;
}

.handwriting-mode .grammar-table th:nth-child(3),
.handwriting-mode .grammar-table td:nth-child(3),
.handwriting-mode #意味順Btns .grammar-table th:nth-child(3),
.handwriting-mode #意味順Btns .grammar-table td:nth-child(3) {
  width: 80% !important;
  text-align: left !important;
}

/* テストモード専用: 7列構成 (番号:文法項目:解説:意味順:練習:テスト:正答率) */
.test-mode .grammar-table,
.test-mode #意味順Btns .grammar-table {
  table-layout: fixed !important;
}

.test-mode .grammar-table th:nth-child(1),
.test-mode .grammar-table td:nth-child(1),
.test-mode #意味順Btns .grammar-table th:nth-child(1),
.test-mode #意味順Btns .grammar-table td:nth-child(1) {
  width: 8% !important;
  text-align: center !important;
}

.test-mode .grammar-table th:nth-child(2),
.test-mode .grammar-table td:nth-child(2),
.test-mode #意味順Btns .grammar-table th:nth-child(2),
.test-mode #意味順Btns .grammar-table td:nth-child(2) {
  width: 22% !important;
  text-align: left !important;
}

.test-mode .grammar-table th:nth-child(3),
.test-mode .grammar-table td:nth-child(3),
.test-mode #意味順Btns .grammar-table th:nth-child(3),
.test-mode #意味順Btns .grammar-table td:nth-child(3) {
  width: 14% !important;
  text-align: center !important;
}

.test-mode .grammar-table th:nth-child(4),
.test-mode .grammar-table td:nth-child(4),
.test-mode #意味順Btns .grammar-table th:nth-child(4),
.test-mode #意味順Btns .grammar-table td:nth-child(4) {
  width: 14% !important;
  text-align: center !important;
}

.test-mode .grammar-table th:nth-child(5),
.test-mode .grammar-table td:nth-child(5),
.test-mode #意味順Btns .grammar-table th:nth-child(5),
.test-mode #意味順Btns .grammar-table td:nth-child(5) {
  width: 14% !important;
  text-align: center !important;
}

.test-mode .grammar-table th:nth-child(6),
.test-mode .grammar-table td:nth-child(6),
.test-mode #意味順Btns .grammar-table th:nth-child(6),
.test-mode #意味順Btns .grammar-table td:nth-child(6) {
  width: 14% !important;
  text-align: center !important;
}

.test-mode .grammar-table th:nth-child(7),
.test-mode .grammar-table td:nth-child(7),
.test-mode #意味順Btns .grammar-table th:nth-child(7),
.test-mode #意味順Btns .grammar-table td:nth-child(7) {
  width: 14% !important;
  text-align: center !important;
}

/* 意味順モード用カラム幅設定 (番号:練習回数:文法項目 = 10%:10%:80%) */
#imijun-panel .grammar-table {
  table-layout: fixed !important;
  width: 100% !important;
}

/* 意味順モード - すべてのth/tdのデフォルト幅をリセット */
#imijun-panel .grammar-table th,
#imijun-panel .grammar-table td {
  width: auto !important;
}

/* 番号カラム（1列目） */
#imijun-panel .grammar-table th:nth-child(1),
#imijun-panel .grammar-table td:nth-child(1) {
  width: 10% !important;
  min-width: 10% !important;
  max-width: 10% !important;
  text-align: center !important;
  color: #000000 !important;
  font-size: 1.2rem !important;
}

/* 練習回数カラム（2列目）*/
#imijun-panel .grammar-table th:nth-child(2),
#imijun-panel .grammar-table td:nth-child(2) {
  width: 10% !important;
  min-width: 10% !important;
  max-width: 10% !important;
  text-align: center !important;
  color: #000000 !important;
  font-size: 1.2rem !important;
}

/* 文法項目カラム（3列目） */
#imijun-panel .grammar-table th:nth-child(3),
#imijun-panel .grammar-table td:nth-child(3) {
  width: 80% !important;
  min-width: 80% !important;
  max-width: 80% !important;
  text-align: left !important;
  color: #000000 !important;
  font-size: 1.2rem !important;
}

/* メディアクエリでも上書き */
@media (max-width: 768px) {
  #imijun-panel #imijun-grammar-list .grammar-table thead th:nth-child(2),
  #imijun-panel #imijun-grammar-list .grammar-table tbody td:nth-child(2) {
    width: 10% !important;
    min-width: 10% !important;
    max-width: 10% !important;
  }
}

@media (max-width: 480px) {
  #imijun-panel #imijun-grammar-list .grammar-table thead th:nth-child(2),
  #imijun-panel #imijun-grammar-list .grammar-table tbody td:nth-child(2) {
    width: 10% !important;
    min-width: 10% !important;
    max-width: 10% !important;
  }
}

.grammar-table tbody tr {
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--border-color);
}

/* パールホワイト基調 + 薄いグレーのゼブラ */
.grammar-table tbody tr { background: #ffffff; }
.grammar-table tbody tr:nth-child(even) { background: #f5f6fa; }

.grammar-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(246, 248, 252, 0.9) 0%, rgba(241, 243, 248, 0.9) 100%);
  transform: translateX(2px);
}

.grammar-table tbody tr:active {
  transform: translateX(0);
  background: linear-gradient(90deg, rgba(238, 240, 244, 0.95) 0%, rgba(232, 234, 240, 0.95) 100%);
}

.grammar-table td {
  padding: 14px 20px;
  color: var(--text-primary);
  line-height: 1.5;
  font-size: 1.2rem;
  font-weight: normal;
}

.grammar-table td:first-child {
  font-weight: normal;
  text-align: center;
  color: var(--primary-color);
  font-size: 1.2rem;
}

.grammar-table td:nth-child(2) {
  font-weight: normal;
  color: var(--text-primary);
  font-size: 1.2rem;
}

.grammar-table td:nth-child(3) {
  color: var(--text-secondary);
  font-size: 1.2rem;
  font-weight: normal;
}

.grammar-table tbody tr.selected {
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.grammar-table tbody tr.selected td {
  color: white;
}

.grammar-table tbody tr.selected td:nth-child(3) {
  color: rgba(255, 255, 255, 0.9);
}

/* 統計表示用スタイル */
.stats-cell {
  font-weight: normal;
  text-align: center;
}

.stats-count {
  color: var(--primary-color);
  font-size: 1.2rem;
}

.stats-accuracy {
  font-size: 1.2rem;
}

.stats-review {
  color: #e53e3e;
  font-size: 1.2rem;
}

/* 進捗による行の背景色 */
.grammar-table tbody tr.progress-low {
  background: rgba(168, 178, 193, 0.05);
}

.grammar-table tbody tr.progress-medium {
  background: rgba(55, 65, 81, 0.18); /* dark gray */
}

.grammar-table tbody tr.progress-high {
  background: rgba(55, 65, 81, 0.18); /* dark gray */
}

/* 正答率による行の背景色 */
.grammar-table tbody tr.accuracy-low {
  background: rgba(229, 62, 62, 0.08);
}

.grammar-table tbody tr.accuracy-medium {
  background: rgba(55, 65, 81, 0.18); /* dark gray */
}

.grammar-table tbody tr.accuracy-high {
  background: rgba(55, 65, 81, 0.18); /* dark gray */
}

/* 復習が必要な項目 */
.grammar-table tbody tr.has-review {
  background: rgba(229, 62, 62, 0.05);
}

/* ホバー時も背景色を維持 */
/* Hover colors: keep dark gray for achieved rows; keep existing for others */
.grammar-table tbody tr.accuracy-medium:hover,
.grammar-table tbody tr.accuracy-high:hover,
.grammar-table tbody tr.progress-medium:hover,
.grammar-table tbody tr.progress-high:hover {
  background: linear-gradient(90deg, rgba(55, 65, 81, 0.22) 0%, rgba(55, 65, 81, 0.28) 100%);
}

.grammar-table tbody tr.progress-low:hover,
.grammar-table tbody tr.accuracy-low:hover,
.grammar-table tbody tr.has-review:hover {
  background: linear-gradient(90deg, rgba(168, 178, 193, 0.12) 0%, rgba(168, 178, 193, 0.18) 100%);
}

/* 進捗表示 */
.progress-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 0 0 10px 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* バーからスタンプラリー表現へ */
.stamp-rally {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rally-track {
  position: relative;
  flex: 1;
  height: 12px;
  background: repeating-linear-gradient(90deg, #e5e7eb 0 8px, #edf2f7 8px 16px);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.rally-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
  border-radius: inherit;
  transition: width 0.4s ease;
}

.checkpoint {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px dashed #cbd5e1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  color: #e53e3e;
  z-index: 1;
}

.checkpoint.done {
  border-style: solid;
  border-color: #e53e3e;
  background: #fff5f5;
}

.rally-caption {
  min-width: 42px;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* 100% 達成スタンプ（完走） - 現在は使用しない */
/* #意味順Btns p.completed-100::after {
  content: '完走';
  position: absolute;
  top: 6px;
  right: 6px;
  color: #e53e3e;
  border: 2px solid #e53e3e;
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 800;
  font-size: 0.75rem;
  transform: rotate(-15deg);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 6px rgba(229, 62, 62, 0.25);
} */

/* 進捗カラー（信号色: 0-33% 赤 / 34-66% 黄 / 67-100% 緑） - 現在は使用しない
#意味順Btns p.progress-red {
  background: #FEE2E2;
  border-color: #FCA5A5;
}

#意味順Btns p.progress-yellow {
  background: #FEF3C7;
  border-color: #FDE68A;
}

#意味順Btns p.progress-green {
  background: #D1FAE5;
  border-color: #6EE7B7;
} */

#message {
  padding: 15px 25px;
  border-radius: var(--radius);
  font-size: 1.1.2rem;
  font-weight: 500;
  margin: 20px 0;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#message.correct {
  background: linear-gradient(135deg, #48bb78, #38a169);
  color: white;
  box-shadow: var(--shadow-md);
}

#message.incorrect {
  background: linear-gradient(135deg, #f56565, #e53e3e);
  color: white;
  box-shadow: var(--shadow-md);
}

/* .wrong_quiz （未使用）削除 */

.quiz_ja, .quiz_en, .quiz_hint, .quiz_ans {
  padding: 12px 15px;
  background: var(--background);
  border-radius: 8px;
  font-size: 1.2rem;
  color: var(--text-primary);
  min-height: 50px;
  display: flex;
  align-items: center;
}

.quiz_ja {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1.1.2rem;
}

.quiz_en {
  color: var(--primary-color);
  font-weight: 400;
  font-size: 1.3rem;
}

.quiz_ans {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
  font-weight: 600;
  text-align: center;
  justify-content: center;
}

.quiz_hint {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* #startcount, #endcount （未使用）削除 */

/* 未使用ホバー削除 */

/* #PassageArea （未使用）削除 */

/* フッター削除 */


@media (max-width: 768px) {
  #container {
    padding: 10px;
  }

  #title h1 {
    font-size: 1.5rem;
  }

  #title h2 {
    font-size: 0.9rem;
  }

  .hero-header {
    padding: 30px 20px 20px;
  }

  .hero-content {
    flex-direction: column;
  }

  .brand-main {
    flex-direction: column;
    gap: 15px;
  }

  .brand-意味順 {
    gap: 15px;
  }
  
  .brand-english {
    font-size: 1.8rem;
  }
  
  .brand-divider {
    font-size: 1.5rem;
  }
  
  .brand-tcool {
    font-size: 2rem;
  }

  .brand-separator {
    width: 60px;
    height: 4px;
    background: linear-gradient(to right, 
      transparent, 
      var(--primary-color), 
      var(--accent-color), 
      transparent);
  }

  .brand-subtitle {
    font-size: 1.2rem;
  }

  .kanji-highlight {
    font-size: 1.6rem;
  }

  .brand-tagline {
    font-size: 0.9rem;
  }

  .floating-element {
    font-size: 1.2rem;
  }

  #意味順Btns {
    padding: 20px 15px;
  }

  .grammar-table th,
  .grammar-table td {
    padding: 12px 15px;
    font-size: 0.85rem;
  }

  #意味順Btns .grammar-table th:nth-child(2) {
    width: 150px;
  }

  #japanese {
    font-size: 1.35rem;
  }

  #english {
    font-size: 1.6rem;
  }

  #word-input {
    font-size: 1.3rem;
    padding: 15px 15px 18px 15px;
    text-align: center;
    min-height: 60px;
  }

  #question {
    padding: 25px 20px;
  }

  /* .wrong_quiz （未使用）削除 */
  
  .quiz_ja, .quiz_en, .quiz_hint, .quiz_ans {
    width: 100%;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  #title h1 {
    font-size: 1.3rem;
  }

  .hero-header {
    padding: 25px 15px 15px;
  }

  .brand-意味順 {
    gap: 10px;
  }
  
  .brand-english {
    font-size: 1.2rem;
  }
  
  .brand-divider {
    font-size: 1.2rem;
  }
  
  .brand-tcool {
    font-size: 1.6rem;
  }

  .brand-subtitle {
    font-size: 1.2rem;
  }

  .kanji-highlight {
    font-size: 1.2rem;
  }

  .brand-tagline {
    font-size: 0.85rem;
  }

  #mode-selector {
    padding: 15px; /* 上下左右を均等に */
  }

  #意味順Btns {
    padding: 15px 10px;
  }
  
  .grammar-table th,
  .grammar-table td {
    padding: 10px 12px;
    font-size: 0.8rem;
  }

  #意味順Btns .grammar-table td:nth-child(3) {
    font-size: 0.75rem;
  }

  #意味順Btns .grammar-table th:first-child {
    width: 50px;
  }

  #意味順Btns .grammar-table th:nth-child(2) {
    width: 120px;
  }
}

/* 手書きモードのボタン（パールホワイトスタイル） */
#hw-next-btn.reading-btn {
  padding: 12px 24px;
  font-size: 1.2rem;
  font-weight: 400;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 55%, #f4f6fa 100%);
  color: #111827;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

#hw-next-btn.reading-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  border-color: #94a3b8;
  background: linear-gradient(135deg, #f5f6fa 0%, #ffffff 60%);
}

#hw-next-btn.reading-btn:active {
  transform: translateY(0);
}

/* 設定ボタン */
.settings-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--border-color);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.settings-btn:hover {
  transform: rotate(90deg);
  background: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
}

/* ヘッダー内の設定ボタン */
.header-settings { display: none; }

/* 右端絶対配置のスタイルは撤去 */

.hero-content {
  position: relative;
}

/* フッター設定ボタン（控えめ） */
.footer-settings {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
  opacity: 0.55;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
}
.footer-settings:hover {
  opacity: 0.9;
}

/* 設定モーダル */
.settings-modal-content {
  max-width: 500px;
  width: 90%;
  /* モーダル内でボディをスクロール可能にするため固定高を確保 */
  height: 100vh;
}

.settings-modal-body {
  padding: 0;
  /* 設定モーダルは内容が多いので内部スクロール */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.settings-section {
  padding: 20px;
}

.settings-section h3 {
  margin: 0 0 20px 0;
  font-size: 1.1.2rem;
  color: var(--text-primary);
  font-weight: 600;
}

.settings-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-action-btn {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  background: white;
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.settings-action-btn:hover {
  transform: translateX(3px);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  background: rgba(168, 178, 193, 0.05);
}

.settings-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.settings-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.settings-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.settings-action-btn.clear-btn:hover {
  border-color: #e53e3e;
  background: rgba(229, 62, 62, 0.05);
}

/* 標準Markdownテーブルをモダンなスタイルに自動変換 */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  margin: 20px auto;
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
}

/* パソコン画面では50%幅で中央配置 */
@media (min-width: 768px) {
  table {
    width: 50%;
  }
}

/* 標準Markdownテーブルのヘッダー */
table thead {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 2px solid #e2e8f0;
}

table th {
  padding: 20px 24px;
  text-align: left;
  font-weight: 600;
  color: #1e293b;
  font-size: 16px;
  letter-spacing: 0.025em;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
}

table th:first-child {
  border-top-left-radius: 16px;
}

table th:last-child {
  border-top-right-radius: 16px;
}

table th::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

table th:hover::after {
  opacity: 1;
}

/* 標準Markdownテーブルのボディ */
table tbody tr {
  transition: all 0.2s ease;
  border-bottom: 1px solid #f1f5f9;
}

table tbody tr:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 16px;
}

table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}

/* 標準Markdownテーブルのセル */
table td {
  padding: 18px 24px;
  color: #334155;
  font-size: 15px;
  line-height: 1.6;
  border-bottom: 1px solid #f1f5f9;
}

/* 英語列のスタイリング（1列目） */
table td:first-child {
  font-family: 'Lexend Deca', 'Segoe UI', 'Arial', sans-serif;
  color: #3b82f6;
  font-weight: 600;
  font-size: 16px;
}

/* 解説モーダル内のテーブル英語列（3列目）のスタイリング */
#explain-modal-body table td:nth-child(3) {
  font-family: 'Lexend Deca', 'Segoe UI', 'Arial', sans-serif !important;
  color: #3b82f6;
  font-weight: 400;
  font-size: 16px;
}

/* 小学校英語モーダル内のテーブル英語列（3列目）のスタイリング */
#elementary-modal-body table td:nth-child(3) {
  font-family: 'Lexend Deca', 'Segoe UI', 'Arial', sans-serif !important;
  color: #3b82f6;
  font-weight: 400;
  font-size: 16px;
}

/* 日本語列のスタイリング（2列目） */
table td:last-child {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
  color: #1e293b;
  font-weight: 400;
}

/* ロールプレイの表の4列目（日本語列）のスタイリング */
table td:nth-child(4) {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
  color: #1e293b;
  font-weight: 400;
  font-size: 15px;
}

/* ロールプレイの表のNo.カラム（1列目）の幅を20pxに設定 */
table th:nth-child(1),
table td:nth-child(1) {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  text-align: center;
}

/* ロールプレイの表の役割カラム（2列目）の幅を80pxに設定 */
table th:nth-child(2),
table td:nth-child(2) {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  table {
    font-size: 14px;
    margin: 15px auto;
  }
  
  table th,
  table td {
    padding: 16px 20px;
  }
  
  table th {
    font-size: 14px;
  }
  
  table td {
    font-size: 14px;
  }
  
  table td:last-child {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  table {
    border-radius: 12px;
    margin: 10px auto;
  }
  
  table th,
  table td {
    padding: 14px 16px;
  }
  
  table th {
    font-size: 13px;
    padding: 16px 16px;
  }
  
  table td {
    font-size: 13px;
  }
  
  table td:last-child {
    font-size: 14px;
  }
}

/* 設定フォーム */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-item label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-select,
.settings-input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.95rem;
  background: white;
  transition: all 0.2s ease;
}

.settings-select:focus,
.settings-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(168, 178, 193, 0.1);
}

.settings-input::placeholder {
  color: var(--text-secondary);
}

/* Pastel white scrollbars */
html {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #e5e9f2 #ffffff; /* thumb track */
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 60%, #f5f7fa 100%);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #eef2ff 0%, #f5f7ff 100%);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.05);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #e3eaff 0%, #eef4ff 100%);
}

/* 英単語モーダル: 全画面表示 */
#vocab-modal .modal-title {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif !important;
  font-weight: 400;
}

/* 検定モーダルのヘッダーも通常フォントに */
#exam-modal .modal-title {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif !important;
  font-weight: 400;
}

/* フォニックステストモーダルのヘッダーも通常フォントに */
#phonics-voice-test-modal .modal-title {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif !important;
  font-weight: 400;
}

/* 検定モーダル(範囲モーダル)のタイトルとナビボタンの間隔を広げる */
#exam-modal #exam-header-nav {
  margin-left: 100px;
}

#vocab-modal .modal-body {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 学習コンテンツエリア */
#vocab-modal .vocab-learning-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 20px 80px 20px;
}

/* 進捗情報 */
#vocab-modal .vocab-progress-info {
  text-align: center;
  font-size: 16px;
  color: #9ca3af;
  margin-bottom: 20px;
}

/* メインの単語表示エリア */
#vocab-modal .vocab-main-word {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px 20px 20px 20px;
  width: 100%;
}

#vocab-modal .vocab-main-word h2 {
  font-size: 72px;
  color: #111827;
  margin: 0;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* 発音表示エリア */
#vocab-modal .vocab-pronunciation {
  flex: 0 0 auto;
  text-align: center;
  padding: 10px 20px 40px 20px;
}

#vocab-modal .vocab-pronunciation .pronunciation {
  font-size: 24px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

/* 選択肢コンテナ */
#vocab-modal .vocab-choices-container {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

#vocab-modal .vocab-choice-btn {
  padding: 20px 24px;
  font-size: 20px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  width: 100%;
  max-width: none;
}

#vocab-modal .vocab-choice-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: #94a3b8;
  background: #f8fafc;
}

#vocab-modal .vocab-choice-btn.correct {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  color: white;
  border-color: #10b981;
}

#vocab-modal .vocab-choice-btn.wrong {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  color: white;
  border-color: #ef4444;
}

#vocab-modal .vocab-choice-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

#vocab-modal .choice-number {
  font-weight: 600;
  color: #6b7280;
  min-width: 24px;
}

#vocab-modal .vocab-choice-btn.correct .choice-number,
#vocab-modal .vocab-choice-btn.wrong .choice-number {
  color: white;
}

/* フィードバック */
#vocab-modal .feedback {
  text-align: center;
  padding: 20px;
  font-size: 20px;
  font-weight: 600;
  min-height: 60px;
}

#vocab-modal .feedback.success {
  color: #10b981;
}

#vocab-modal .feedback.error {
  color: #ef4444;
}

/* 下部の進捗バー */
#vocab-modal .vocab-bottom-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid #e5e7eb;
  z-index: 10;
}

#vocab-modal .vocab-progress-bar {
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

#vocab-modal .vocab-progress-bar .fill {
  height: 100%;
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
  transition: width 0.3s ease;
  border-radius: 4px;
}

#vocab-modal .pct {
  text-align: center;
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

/* 結果画面 */
#vocab-modal .vocab-result-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 0 20px;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

#vocab-modal .score-display {
  text-align: center;
  margin-bottom: 0px;
}

#vocab-modal .score-title {
  font-size: 24px;
  color: #6b7280;
  margin-bottom: 10px;
}

#vocab-modal .score {
  font-size: 25px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

#vocab-modal .result-details {
  width: 100%;
  flex: 1;
  overflow-x: hidden;
  margin-bottom: 20px;
  padding-bottom: 100px;
}

#vocab-modal .result-details h3 {
  font-size: 20px;
  color: #374151;
  margin-bottom: 20px;
  text-align: center;
}

#vocab-modal #vocab-wrong-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 300px;
}

#vocab-modal #vocab-wrong-list li {
  padding: 12px 16px;
  margin-bottom: 8px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 16px;
  color: #374151;
}

#vocab-modal .result-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

#vocab-modal .result-actions .btn {
  padding: 14px 32px;
  font-size: 18px;
  font-weight: 500;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

#vocab-modal .result-actions .btn-primary {
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
  color: white;
}

#vocab-modal .result-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

#vocab-modal .result-actions .btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

#vocab-modal .result-actions .btn-secondary:hover {
  background: #e5e7eb;
}

/* タブレット対応 */
@media (max-width: 768px) {
  #vocab-modal .vocab-main-word h2 {
    font-size: 56px;
  }
  
  #vocab-modal .vocab-pronunciation .pronunciation {
    font-size: 20px;
  }
  
  #vocab-modal .vocab-choice-btn {
    padding: 16px 20px;
    font-size: 18px;
  }
  
  #vocab-modal .score {
    font-size: 48px;
  }
}

/* スマートフォン対応 */
@media (max-width: 480px) {
  #vocab-modal .vocab-learning-content {
    padding: 20px 15px 100px 15px;
  }
  
  #vocab-modal .vocab-main-word {
    padding: 40px 15px 15px 15px;
  }
  
  #vocab-modal .vocab-main-word h2 {
    font-size: 48px;
  }
  
  #vocab-modal .vocab-pronunciation .pronunciation {
    font-size: 18px;
  }
  
  #vocab-modal .vocab-choices-container {
    padding: 15px;
    gap: 12px;
  }
  
  #vocab-modal .vocab-choice-btn {
    padding: 14px 16px;
    font-size: 16px;
  }
  
  #vocab-modal .feedback {
    font-size: 18px;
  }
  
  #vocab-modal .score {
    font-size: 40px;
  }
  
  #vocab-modal .result-actions {
    flex-direction: column;
  }
  
  #vocab-modal .result-actions .btn {
    width: 100%;
  }
}

/* 意味順モード - カラム幅の最終的な強制設定 */
#imijun-panel .grammar-table,
#imijun-grammar-list .grammar-table {
  table-layout: fixed !important;
  width: 100% !important;
}

/* 番号カラム（1列目）を10%に固定 */
#imijun-panel .grammar-table thead th:first-child,
#imijun-panel .grammar-table tbody td:first-child,
#imijun-panel .grammar-table thead th:nth-child(1),
#imijun-panel .grammar-table tbody td:nth-child(1),
#imijun-grammar-list .grammar-table thead th:first-child,
#imijun-grammar-list .grammar-table tbody td:first-child,
#imijun-grammar-list .grammar-table thead th:nth-child(1),
#imijun-grammar-list .grammar-table tbody td:nth-child(1) {
  width: 10% !important;
  min-width: 10% !important;
  max-width: 10% !important;
  text-align: center !important;
}

/* 文法項目カラム（2列目）を30%に固定 - 最優先 */
#imijun-panel .grammar-table thead th:nth-child(2),
#imijun-panel .grammar-table tbody td:nth-child(2),
#imijun-grammar-list .grammar-table thead th:nth-child(2),
#imijun-grammar-list .grammar-table tbody td:nth-child(2) {
  width: 30% !important;
  min-width: 30% !important;
  max-width: 30% !important;
  text-align: left !important;
}

/* 解説カラム（3列目）を15%に固定 */
#imijun-panel .grammar-table thead th:nth-child(3),
#imijun-panel .grammar-table tbody td:nth-child(3),
#imijun-grammar-list .grammar-table thead th:nth-child(3),
#imijun-grammar-list .grammar-table tbody td:nth-child(3) {
  width: 15% !important;
  min-width: 15% !important;
  max-width: 15% !important;
  text-align: center !important;
}

/* 音読カラム（4列目）を15%に固定 */
#imijun-panel .grammar-table thead th:nth-child(4),
#imijun-panel .grammar-table tbody td:nth-child(4),
#imijun-grammar-list .grammar-table thead th:nth-child(4),
#imijun-grammar-list .grammar-table tbody td:nth-child(4) {
  width: 15% !important;
  min-width: 15% !important;
  max-width: 15% !important;
  text-align: center !important;
}

/* Typingカラム（5列目）を15%に固定 */
#imijun-panel .grammar-table thead th:nth-child(5),
#imijun-panel .grammar-table tbody td:nth-child(5),
#imijun-grammar-list .grammar-table thead th:nth-child(5),
#imijun-grammar-list .grammar-table tbody td:nth-child(5) {
  width: 15% !important;
  min-width: 15% !important;
  max-width: 15% !important;
  text-align: center !important;
}

/* テストカラム（6列目）を15%に固定 */
#imijun-panel .grammar-table thead th:nth-child(6),
#imijun-panel .grammar-table tbody td:nth-child(6),
#imijun-grammar-list .grammar-table thead th:nth-child(6),
#imijun-grammar-list .grammar-table tbody td:nth-child(6),
#imijun-panel .grammar-table thead th:last-child,
#imijun-panel .grammar-table tbody td:last-child,
#imijun-grammar-list .grammar-table thead th:last-child,
#imijun-grammar-list .grammar-table tbody td:last-child {
  width: 15% !important;
  min-width: 15% !important;
  max-width: 15% !important;
  text-align: center !important;
}

/* タイピングモード時の強制的なカラム幅設定（最優先） */
.practice-mode #imijun-panel .grammar-table thead th:nth-child(1),
.practice-mode #imijun-panel .grammar-table tbody td:nth-child(1) {
  width: 10% !important;
  min-width: 10% !important;
  max-width: 10% !important;
}

.practice-mode #imijun-panel .grammar-table thead th:nth-child(2),
.practice-mode #imijun-panel .grammar-table tbody td:nth-child(2) {
  width: 10% !important;
  min-width: 10% !important;
  max-width: 10% !important;
}

.practice-mode #imijun-panel .grammar-table thead th:nth-child(3),
.practice-mode #imijun-panel .grammar-table tbody td:nth-child(3) {
  width: 80% !important;
  min-width: 80% !important;
  max-width: 80% !important;
}

/* タイピングモード時の意味順Btns テーブルのカラム幅設定 */
.practice-mode #意味順Btns .grammar-table {
  table-layout: fixed !important;
  width: 100% !important;
}

.practice-mode #意味順Btns .grammar-table th:nth-child(1),
.practice-mode #意味順Btns .grammar-table td:nth-child(1) {
  width: 10% !important;
  min-width: 10% !important;
  max-width: 10% !important;
}

.practice-mode #意味順Btns .grammar-table th:nth-child(2),
.practice-mode #意味順Btns .grammar-table td:nth-child(2) {
  width: 10% !important;
  min-width: 10% !important;
  max-width: 10% !important;
}

.practice-mode #意味順Btns .grammar-table th:nth-child(3),
.practice-mode #意味順Btns .grammar-table td:nth-child(3) {
  width: 80% !important;
  min-width: 80% !important;
  max-width: 80% !important;
}

/* Globishモードのテーブルカラム幅設定 (10%:30%:60%) */
#globish-level-list .grammar-table {
  table-layout: fixed !important;
  width: 100% !important;
}

#globish-level-list .grammar-table th:nth-child(1),
#globish-level-list .grammar-table td:nth-child(1) {
  width: 10% !important;
  min-width: 10% !important;
  max-width: 10% !important;
}

#globish-level-list .grammar-table th:nth-child(2),
#globish-level-list .grammar-table td:nth-child(2) {
  width: 30% !important;
  min-width: 30% !important;
  max-width: 30% !important;
}

#globish-level-list .grammar-table th:nth-child(3),
#globish-level-list .grammar-table td:nth-child(3) {
  width: 60% !important;
  min-width: 60% !important;
  max-width: 60% !important;
}

/* 小学校英語モード - Let's Tryと印刷のカラム幅設定 */
#elementary-panel .elementary-fixed-table {
  table-layout: fixed !important;
  width: 100% !important;
  font-size: 16px !important;
}

#elementary-panel .elementary-fixed-table th,
#elementary-panel .elementary-fixed-table td {
  font-size: 16px !important;
}

#elementary-panel .elementary-fixed-table colgroup col:nth-child(1) {
  width: 90% !important;
}

#elementary-panel .elementary-fixed-table colgroup col:nth-child(2) {
  width: 80px !important;
}

#elementary-panel .elementary-fixed-table th:nth-child(1),
#elementary-panel .elementary-fixed-table td:nth-child(1) {
  width: 90% !important;
  text-align: left !important;
  color: #000 !important;
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
}

#elementary-panel .elementary-fixed-table th:nth-child(2),
#elementary-panel .elementary-fixed-table td:nth-child(2) {
  width: 80px !important;
  padding: 0 10px !important;
  text-align: right !important;
}

/* 小学校英語モード - TTSクリック可能なセルのスタイル */
#elementary-modal-body .tts-clickable {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* フォニックスモード - コンテナと表の幅制限（小学校英語と同じスタイル） */
#phonics-panel {
  padding: 20px;
}

#phonics-table-container {
  width: 100%;
  margin: 0 auto;
}

#phonics-panel .vocab-level-table {
  width: 100%;
  margin: 0 auto;
}

/* PC画面では最大幅を制限 */
@media (min-width: 768px) {
  #phonics-table-container {
    max-width: 800px;
  }
}

/* パフォーマンステストモード - カラム幅設定と表の最大幅制限（小学校英語と同じ） */
#performance-panel .performance-fixed-table {
  table-layout: fixed !important;
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  font-size: 16px !important;
}
#performance-panel .performance-fixed-table th,
#performance-panel .performance-fixed-table td {
  font-size: 16px !important;
}
#performance-panel .performance-fixed-table th:nth-child(1),
#performance-panel .performance-fixed-table td:nth-child(1) {
  width: 50px !important;
  text-align: center !important;
  color: #000 !important;
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
}
#performance-panel .performance-fixed-table th:nth-child(2),
#performance-panel .performance-fixed-table td:nth-child(2) {
  width: calc(100% - 50px) !important;
  text-align: left !important;
  color: #000 !important;
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
}

#elementary-modal-body .tts-clickable:hover {
  background-color: rgba(255, 224, 92, 0.2) !important;
}

#elementary-modal-body .tts-clickable:active {
  background-color: rgba(255, 224, 92, 0.4) !important;
}

/* 小学校英語モード - 解説モーダル内の表のフォントを通常フォントに設定 */
#elementary-modal-body table {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
  font-weight: 400;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  margin: 20px auto;
}

/* PC画面では表を60%幅で中央配置 */
@media (min-width: 768px) {
  #elementary-modal-body table {
    width: 60%;
    margin: 20px auto;
  }
}

/* 小学校英語モード - ロールプレイの表のゼブラストライプ */
#elementary-modal-body table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

#elementary-modal-body table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

/* ホバー効果 */
#elementary-modal-body table tbody tr:hover {
  background-color: #e3f2fd !important;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

/* テーブルヘッダーのモダンなスタイル */
#elementary-modal-body table thead tr {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

#elementary-modal-body table thead th {
  padding: 14px 10px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  border-bottom: none;
}

/* テーブルセルのパディング調整 */
#elementary-modal-body table tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid #e9ecef;
  vertical-align: middle;
}

/* 最後の行の下線を削除 */
#elementary-modal-body table tbody tr:last-child td {
  border-bottom: none;
}

/* ロールプレイの表（4カラムある表）の特別なスタイル */
#elementary-modal-body table th:nth-child(1):not(:last-child):not(:nth-last-child(2)) {
  text-align: center !important;
  padding: 5px !important;
}

#elementary-modal-body table td:nth-child(1):not(:last-child):not(:nth-last-child(2)) {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
  font-weight: 400;
  color: #667eea;
  text-align: center !important;
  padding: 5px !important;
}

/* ロールプレイの役割列のスタイル（2列目で、かつ4カラムある場合） */
#elementary-modal-body table td:nth-child(2):not(:last-child) {
  font-weight: 400;
  color: #495057;
  background-color: rgba(102, 126, 234, 0.05);
  border-radius: 4px;
  text-align: center !important;
  padding: 5px 8px !important;
}

#elementary-modal-body table td:last-child {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
  font-weight: 400;
}

/* 小学校英語モーダル内の日本語テキストの太さを調整 */
#elementary-modal-body p,
#elementary-modal-body li,
#elementary-modal-body span,
#elementary-modal-body div {
  font-weight: 400;
}

/* モバイル画面では表を100%幅に */
@media (max-width: 767px) {
  #elementary-modal-body table {
    width: 100%;
    margin: 10px auto;
  }
}

/* 小学校英語モード - デフォルトで表のセルを左寄せに */
#elementary-modal-body table td {
  text-align: left !important;
  padding-left: 30px !important;
}

/* 小学校英語モード - ロールプレイ見出しを左寄せで配置 */
#elementary-modal-body h3.elementary-roleplay-heading {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 20px 0 10px 0;
  padding: 0;
  text-align: left;
  box-sizing: border-box;
}

/* 小学校英語モード - ボタンコンテナのパディングを0に設定 */
#elementary-modal .elementary-button-container {
  padding: 0;
}

/* PC画面では見出しも左寄せで表示 */
@media (min-width: 768px) {
  #elementary-modal-body h3.elementary-roleplay-heading {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 20px 0 10px 0;
    padding: 0;
    text-align: left;
    box-sizing: border-box;
  }
  
  /* パソコンでの音読開始ボタンを左端に配置 */
  .explain-button-container,
  .elementary-button-container {
    text-align: left !important;
    margin-left: 50px !important;
  }
}


/* 表現の表（2カラムの表）の幅を50%ずつに設定 */
#elementary-modal-body table th:first-child:last-of-type,
#elementary-modal-body table td:first-child:last-of-type {
  width: 100% !important;
}

#elementary-modal-body table th:first-child:not(:last-child),
#elementary-modal-body table td:first-child:not(:last-child) {
  width: 50% !important;
  text-align: left !important;
  padding-left: 30px !important;
  font-weight: normal !important;
  color: #1f2937 !important;
}

#elementary-modal-body table th:nth-child(2):last-child,
#elementary-modal-body table td:nth-child(2):last-child {
  width: 50% !important;
  text-align: left !important;
  padding-left: 30px !important;
}

/* ロールプレイの表（4カラム）のカラム幅設定 */
/* No.列 - 20px */
#elementary-modal-body table th:nth-child(1):not(:last-child):not(:nth-last-child(2)),
#elementary-modal-body table td:nth-child(1):not(:last-child):not(:nth-last-child(2)) {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
}

/* 役割列 - 60px */
#elementary-modal-body table th:nth-child(2):not(:last-child),
#elementary-modal-body table td:nth-child(2):not(:last-child) {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;

/* 表現集モード（Recitation）のスタイル */

/* 表現集モーダル内のフォント設定 */
#recitation-modal-body .tts-clickable,
#recitation-modal-body table td:nth-child(1),
#recitation-modal-body strong,
#recitation-modal-body em,
#recitation-modal-body code:not(pre code) {
  font-family: 'Lexend Deca', 'Segoe UI', Arial, sans-serif !important;
  font-weight: 400 !important;
}

#recitation-modal-body h1,
#recitation-modal-body h2,
#recitation-modal-body h3,
#recitation-modal-body p,
#recitation-modal-body li,
#recitation-modal-body ul,
#recitation-modal-body ol {
  font-family: 'Lexend Deca', 'Segoe UI', Arial, sans-serif !important;
  font-weight: 400 !important;
}

/* 表現集モーダル内の表のスタイル */
#recitation-modal-body table {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
  font-weight: 400;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  margin: 20px auto;
}

/* PC画面では表を60%幅で中央配置 */
@media (min-width: 768px) {
  #recitation-modal-body table {
    width: 60%;
    margin: 20px auto;
  }
}

/* 表現集モードの英語セル */
#recitation-modal-body table td:nth-child(1) {
  font-family: 'Lexend Deca', 'Segoe UI', 'Arial', sans-serif !important;
  color: #3b82f6;
  font-weight: 400;
  font-size: 16px;
}

/* 日本語列のスタイリング */
#recitation-modal-body table td:nth-child(2) {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif;
  color: #1e293b;
  font-weight: 400;
  font-size: 15px;
}

/* 暗記シート機能 */
#recitation-modal-body .english-masked {
  background-color: #ffffff;
  color: #ffffff;
  padding: 2px 12px;
  border: 1px solid #000000;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
  min-width: 100px;
  text-align: center;
  user-select: none;
  margin: 4px 2px;
  line-height: 1.8;
}

#recitation-modal-body .english-masked:hover {
  background-color: #f0f0f0;
  border-color: #333333;
}

/* TTS クリック可能要素 */
#recitation-modal-body .tts-clickable {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#recitation-modal-body .tts-clickable:hover {
  background-color: rgba(123, 212, 255, 0.2) !important;
}

#recitation-modal-body .tts-clickable:active {
  background-color: rgba(123, 212, 255, 0.4) !important;
}

/* 英語列 - 45% */
#elementary-modal-body table th:nth-child(3),
#elementary-modal-body table td:nth-child(3) {
  width: 45% !important;
  text-align: left !important;
  padding-left: 20px !important;
}

/* 日本語列 - 35% */
#elementary-modal-body table th:nth-child(4),
#elementary-modal-body table td:nth-child(4) {
  width: 35% !important;
  text-align: left !important;
  padding-left: 20px !important;
}

/* 検定モードのスタイル */
.exam-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.exam-screen {
  display: none;
}

.exam-screen.active {
  display: block;
}

.exam-learning-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 120px);
  padding: 20px;
  padding-bottom: 120px;
}

.exam-result-content {
  padding: 20px;
  padding-bottom: 100px;
}

.exam-progress-info {
  display: none;
}

.exam-main-word {
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
}

.exam-main-word h2 {
  font-size: 64px;
  font-weight: bold;
  color: #1e293b;
  margin: 0;
}

.exam-pronunciation {
  text-align: center;
  margin-bottom: 15px;
  font-size: 18px;
  color: #64748b;
}

.exam-choices-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.exam-choice-btn {
  background: white;
  border: 2px solid var(--border-color);
  padding: 16px;
  border-radius: 10px;
  text-align: left;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 320px;
  line-height: 1.5;
}

.exam-choice-btn:hover:not(.disabled) { 
  background: #f5f5f5; 
  border-color: var(--primary-color);
  transform: translateX(3px);
}

.exam-choice-btn.correct { 
  background: #4caf50; 
  color: #fff; 
  border-color: #4caf50; 
}

.exam-choice-btn.wrong { 
  background: #f44336; 
  color: #fff; 
  border-color: #f44336; 
}

.exam-choice-btn.disabled { 
  cursor: not-allowed; 
  opacity: 0.7; 
}

.exam-bottom-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid #e5e7eb;
  padding: 16px 20px;
  z-index: 1000;
}

.exam-progress-bar {
  margin-bottom: 8px;
}

.exam-progress-bar .bar {
  background: #e5e7eb;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.exam-progress-bar .fill {
  background: linear-gradient(to right, #B0ED4F, #3B5601);
  height: 100%;
  transition: width 0.3s;
}

.exam-bottom-progress .pct {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#exam-modal .modal-content {
  background: linear-gradient(135deg, #fdfbfb 0%, #f8f9fa 100%);
}

#exam-modal .exam-choice-btn {
  padding: 20px 24px;
  font-size: 20px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  width: 100%;
}

#exam-modal .exam-choice-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: #94a3b8;
  background: #f8fafc;
}

#exam-modal .exam-choice-btn.correct {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  color: white;
  border-color: #10b981;
}

#exam-modal .exam-choice-btn.wrong {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  color: white;
  border-color: #ef4444;
}

#exam-modal .exam-choice-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.exam-clickable-word {
  cursor: pointer;
  color: #3b82f6;
  text-decoration: underline;
}

.exam-clickable-word:hover {
  color: #2563eb;
}

/* 検定モードのテーブルアニメーション */
@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

/* モバイル対応 */
@media (max-width: 768px) {
  .exam-choice-btn {
    width: 95%;
    min-width: 0;
    max-width: none;
  }
  
  #exam-modal .exam-choice-btn {
    padding: 16px 20px;
    font-size: 18px;
  }
  
  .exam-main-word h2 {
    font-size: 48px;
  }
}

@media (max-width: 480px) {
  .exam-choice-btn {
    width: 95%;
    min-width: 0;
    max-width: none;
    padding: 14px;
    font-size: 16px;
  }
  
  #exam-modal .exam-choice-btn {
    padding: 14px 16px;
    font-size: 16px;
  }
  
  .exam-main-word h2 {
    font-size: 36px;
  }
}

/* 手書きモーダルのスタイル（再利用） */
#handwriting-modal .modal-content {
  background: linear-gradient(135deg, #fdfbfb 0%, #f8f9fa 100%);
}
#handwriting-modal .modal-title {
  font-family: 'BIZ UDGothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', '游ゴシック Medium', 'メイリオ', 'Meiryo', sans-serif !important;
  font-weight: 400;
}


/* 検定モードのテーブルコンテナのスクロールバー */
.exam-table-container::-webkit-scrollbar {
  width: 8px;
}

.exam-table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.exam-table-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.exam-table-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* スティッキーヘッダーのz-index調整 */
.exam-table-container thead tr {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f7fafc;
}

/* フォニックスナビゲーションボタン */
.phonics-nav-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px;
  margin: 30px auto !important;
  padding: 20px;
  width: 100% !important;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  left: 0 !important;
  right: 0 !important;
}

.phonics-nav-btn {
  background: #ffffff;
  color: #4a5568;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-width: 80px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI', system-ui, sans-serif;
}

.phonics-nav-btn svg {
  transition: all 0.2s ease;
  flex-shrink: 0;
}


.phonics-nav-btn:hover {
  background: #f7fafc;
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}


.phonics-nav-btn:hover svg {
  transform: scale(1.1);
}

.phonics-nav-btn:active {
  transform: translateY(0px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.1s ease;
}

.phonics-nav-btn:disabled {
  background: #f8fafc;
  color: #a0aec0;
  border-color: #e2e8f0;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  opacity: 0.6;
}

.phonics-nav-btn:disabled:hover {
  transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  background: #f8fafc;
  border-color: #e2e8f0;
}

.phonics-nav-btn:disabled svg {
  opacity: 0.5;
  transform: none;
}

/* アニメーション効果 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.phonics-nav-btn:focus {
  outline: 2px solid #a0aec0;
  outline-offset: 2px;
}

/* フォニックステストテーブルコンテナの中央配置 */
#phonics-test-table-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

#phonics-test-table-container .phonics-nav-buttons {
  margin-left: auto !important;
  margin-right: auto !important;
  position: static !important;
  transform: none !important;
}

/* モーダル内のテーブルコンテナも中央配置 */
.phonics-test-modal-content #phonics-test-table-container {
  margin: 0 auto;
  display: block;
  text-align: center;
}

.phonics-test-modal-content .phonics-nav-buttons {
  margin: 30px auto !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}