/* ============================================
   responsive.css
   スマートフォンを最優先に調整
   ============================================ */

@media (max-width: 860px) {
  .concept-grid { grid-template-columns: 1fr; }
  .access-grid { grid-template-columns: 1fr; }
  .experience-item { grid-template-columns: 60px 1fr; gap: 18px; }
  .experience-num { font-size: 1.6rem; }
}

@media (max-width: 720px) {
  .main-nav { display: none; }
  .header-cta { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; background: none; border: none; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--indigo-900); border-radius: 2px; }

  .site-header.nav-open .main-nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); padding: 8px 24px 20px;
    border-bottom: 1px solid rgba(30,58,95,0.1);
  }
  .site-header.nav-open .main-nav a { padding: 12px 0; border-bottom: 1px solid rgba(30,58,95,0.08); }
  .site-header.nav-open .header-cta {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: calc(100% + 210px); left: 0; right: 0;
    background: var(--paper); padding: 0 24px 20px; gap: 10px;
  }
  .site-header.nav-open .header-cta .btn { text-align: center; }

  .hero { padding-top: 88px; }
  .hero-title { font-size: 1.7rem; }
  .section { padding: 64px 20px; }
  .section-title { font-size: 1.5rem; }
  .hero-actions .btn { width: 100%; }
}

@media (max-width: 420px) {
  .logo-name { font-size: 1.1rem; }
  .experience-item { grid-template-columns: 1fr; }
  .experience-num { display: none; }
}

/* ============================================
   PHASE 16 追加：管理画面の表・クイズ画面のスマホ対応
   ============================================ */

/* 表がはみ出す場合は横スクロールできるようにする（初心者向け補足：
   PC用に作った表をスマホの狭い画面にそのまま詰め込むと崩れるため、
   表だけを横にスクロールできる領域として囲みます） */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .quiz-choices { grid-template-columns: 1fr; }
  .quiz-choice { font-size: 1rem; padding: 16px; }
  .form-row { flex-direction: column; }
  .form-row input, .form-row select { min-width: 0; }
  .stat-grid { grid-template-columns: 1fr; }
  .admin-stats { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
}