:root {
  --navy: #1b2838;
  --navy-deep: #0a2a66;
  --green-dark: #1f3d2b;
  --accent: #e53935;
}
body { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, system-ui, sans-serif; }

.text-navy { color: var(--navy-deep); }
.focus\:ring-navy:focus { --tw-ring-color: var(--navy-deep); }

.site-header { background: var(--navy); position: sticky; top: 0; z-index: 50; }
.site-footer { background: var(--navy); margin-top: 4rem; }

/* ヒーロー */
.hero-bg {
  background-color: #4b5563;
  background-image:
    linear-gradient(rgba(20, 30, 45, 0.55), rgba(20, 30, 45, 0.55)),
    url('img/hero.svg');
  background-size: cover;
  background-position: center;
}
.hero { min-height: 420px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2.5rem; }
.hero-inner { text-align: center; color: #fff; }
.hero-title { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; text-shadow: 0 2px 12px rgba(0,0,0,.6); letter-spacing: .02em; }
.hero-subtitle { margin-top: .5rem; font-size: 1.1rem; letter-spacing: .15em; opacity: .9; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

.section-video-title { font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 900; color: var(--navy-deep); line-height: 1; letter-spacing: .02em; }
.section-heading { text-align: center; font-size: 1.5rem; color: #333; margin-bottom: 1.75rem; position: relative; padding-bottom: .9rem; }
.section-heading::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 64px; height: 3px; background: var(--navy); }

/* 講義カード */
.lecture-card { display: block; background: var(--green-dark); color: #fff; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.18); transition: transform .2s, box-shadow .2s; }
.lecture-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.lecture-card-media { position: relative; display: flex; gap: 1.25rem; padding: 1.25rem; background: linear-gradient(135deg, #223f2e 0%, #1a3324 100%); min-height: 230px; }
.lecturer-photo { width: 150px; height: 190px; object-fit: cover; background: #dbe7f0; border: 1px solid rgba(255,255,255,.3); flex-shrink: 0; }
.lecturer-info { display: flex; flex-direction: column; justify-content: space-between; padding-right: 4.5rem; }
.lecturer-label { font-size: 1.6rem; font-weight: 700; }
.lecturer-affiliation { font-size: 1.05rem; line-height: 1.5; opacity: .95; }
.lecturer-name { font-size: 1.5rem; font-weight: 700; margin-top: .25rem; }
.play-badge { position: absolute; right: 1.25rem; bottom: 1.1rem; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 0 0 4px #fff, 0 4px 14px rgba(0,0,0,.4); transition: transform .2s; padding-left: 3px; }
.lecture-card-title { padding: .9rem 1.25rem 1.1rem; font-size: 1.05rem; line-height: 1.6; border-top: 1px solid rgba(255,255,255,.12); }

.material-link { color: #1a56db; font-weight: 700; text-decoration: underline; margin-left: .25rem; }
.material-link:hover { color: #0f3d9e; }

/* ボタン */
.btn-primary { background: var(--navy); color: #fff; font-weight: 700; padding: .75rem 1.5rem; border-radius: .375rem; transition: background .2s; }
.btn-primary:hover { background: #2b3f57; }
.btn-outline { display: inline-block; border: 2px solid #222; color: #222; font-weight: 700; padding: .85rem 2.75rem; background: #fff; transition: all .2s; }
.btn-outline:hover { background: #222; color: #fff; }

/* プレイヤー */
.player-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: .5rem; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.25); }

/* 管理画面 */
.kpi-card { background: #fff; border-radius: .75rem; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.kpi-label { font-size: .8rem; color: #6b7280; }
.kpi-value { font-size: 2rem; font-weight: 800; color: var(--navy-deep); margin-top: .25rem; }
.kpi-sub { font-size: .75rem; color: #9ca3af; margin-top: .25rem; }
.panel { background: #fff; border-radius: .75rem; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.panel-title { font-weight: 700; color: #374151; margin-bottom: 1rem; }
.data-table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.data-table th { background: #f3f4f6; color: #4b5563; font-weight: 600; padding: .6rem .75rem; text-align: center; white-space: nowrap; }
.data-table td { padding: .6rem .75rem; border-bottom: 1px solid #f1f5f9; text-align: center; white-space: nowrap; }
.data-table td.text-left, .data-table th.text-left { text-align: left; }
.progress-bar { display: inline-block; width: 90px; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; vertical-align: middle; }
.progress-bar > span { display: block; height: 100%; background: var(--navy-deep); }

/* ===== スマホ対応 ===== */
@media (max-width: 640px) {
  .hero { min-height: 260px; padding-bottom: 1.5rem; }
  .hero-title { font-size: 1.5rem; padding: 0 1rem; }
  .hero-subtitle { font-size: .9rem; }
  .section-video-title { font-size: 3rem; }
  .section-heading { font-size: 1.25rem; }

  .lecture-card-media { gap: .9rem; padding: .9rem; min-height: 0; }
  .lecturer-photo { width: 96px; height: 122px; }
  .lecturer-info { padding-right: 0; padding-bottom: 3.2rem; min-width: 0; }
  .lecturer-label { font-size: 1.1rem; }
  .lecturer-affiliation { font-size: .85rem; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
  .lecturer-name { font-size: 1.1rem; margin-top: .35rem; }
  .play-badge { width: 44px; height: 44px; font-size: 1.1rem; right: .9rem; bottom: .9rem; box-shadow: 0 0 0 3px #fff, 0 3px 10px rgba(0,0,0,.4); }
  .lecture-card-title { font-size: .95rem; padding: .75rem .9rem .9rem; }

  .btn-outline { padding: .75rem 1.75rem; }
  #lecturer-section { flex-direction: column; }
  #lecturer-section img { width: 80px; height: 96px; }
  #material-list li { line-height: 1.7; }
  .kpi-value { font-size: 1.5rem; }
}
@media (max-width: 380px) {
  .lecturer-photo { width: 80px; height: 102px; }
  .lecturer-name { font-size: 1rem; }
}

/* ===== アンケート ===== */
.accent-navy { accent-color: var(--navy-deep); }
.survey-block { background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1.5rem; }
.survey-q { font-weight: 700; color: #1f2937; font-size: 1.05rem; line-height: 1.6; }
.survey-num { display: inline-block; background: var(--navy); color: #fff; font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: .25rem; margin-right: .6rem; vertical-align: middle; }
.req { display: inline-block; background: #fee2e2; color: #b91c1c; font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: .25rem; margin-left: .4rem; vertical-align: middle; }
.survey-choice { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .9rem; border: 1px solid #e5e7eb; border-radius: .5rem; cursor: pointer; transition: background .15s, border-color .15s; }
.survey-choice:hover { background: #f9fafb; }
.survey-choice:has(input:checked) { background: #eef2ff; border-color: var(--navy-deep); }
.survey-choice input { margin-top: .3rem; width: 1rem; height: 1rem; flex-shrink: 0; }
.rating-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rating-table th { background: #f3f4f6; color: #4b5563; font-weight: 600; padding: .6rem .5rem; text-align: center; font-size: .8rem; white-space: nowrap; }
.rating-table td { padding: .7rem .5rem; border-bottom: 1px solid #f1f5f9; text-align: center; }
.rating-table td.text-left, .rating-table th.text-left { text-align: left; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.scale-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .75rem .4rem; border: 1px solid #e5e7eb; border-radius: .5rem; cursor: pointer; font-size: .8rem; text-align: center; line-height: 1.3; color: #374151; transition: background .15s, border-color .15s; }
.scale-item:hover { background: #f9fafb; }
.scale-item:has(input:checked) { background: #eef2ff; border-color: var(--navy-deep); font-weight: 700; }
.survey-chip { cursor: pointer; }
.survey-chip span { display: inline-block; padding: .55rem 1.2rem; border: 1px solid #d1d5db; border-radius: 999px; font-size: .9rem; color: #374151; transition: all .15s; }
.survey-chip:hover span { background: #f9fafb; }
.survey-chip:has(input:checked) span { background: var(--navy); border-color: var(--navy); color: #fff; }
.survey-select, .survey-textarea { width: 100%; border: 1px solid #d1d5db; border-radius: .5rem; padding: .7rem .9rem; font-size: .95rem; background: #fff; }
.survey-select:focus, .survey-textarea:focus { outline: none; border-color: var(--navy-deep); box-shadow: 0 0 0 3px rgba(10,42,102,.12); }
@media (max-width: 640px) {
  .survey-block { padding: 1.1rem; }
  .scale { grid-template-columns: 1fr; }
  .scale-item { flex-direction: row; justify-content: flex-start; padding: .65rem .9rem; font-size: .9rem; }
  .rating-table th { font-size: .7rem; padding: .5rem .25rem; }
  .rating-table td { padding: .6rem .25rem; font-size: .8rem; }
}
.rating-card { border: 1px solid #e5e7eb; border-radius: .5rem; padding: .9rem; }
.survey-chip-sm span { padding: .4rem .8rem; font-size: .8rem; }