[hidden] { display: none !important; }
:root {
  --bg: #f6f7f9; --card: #fff; --text: #1d2330; --muted: #5d6675; --line: #dfe3ea;
  --accent: #1f5fa8; --accent-soft: #e5eef9; --danger: #c0392b; --ok: #1e8a4c; --glow: #49a3ff;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Hiragino Sans", "Meiryo", system-ui, sans-serif; line-height: 1.6; }
.top { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: #fff; color: var(--text); border-bottom: 3px solid var(--accent); }
.top a { color: var(--accent); }
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; font-weight: 700; text-decoration: none; }
.brand .slogan { font-size: 11px; line-height: 1.2; color: #f07c00; letter-spacing: .08em; margin-bottom: 1px; }
.brand img { height: 28px; width: auto; display: block; }
.badge { font-size: 12px; background: var(--accent-soft); color: var(--accent); padding: 1px 8px; border-radius: 10px; }
.faq-link { margin-left: auto; font-size: 14px; font-weight: 600; text-decoration: none; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.faq-link:hover { background: var(--accent-soft); }
.faq-link + .who, .faq-link + .faq-link { margin-left: 0; }
.top.in-lesson a { pointer-events: none; }
.top.in-lesson .faq-link { visibility: hidden; }
.welcome { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 8px 0 12px; }
.welcome h1 { margin: 0; }
.welcome .left-info { margin: 0; }
.who { margin-left: auto; font-size: 14px; }
/* Name in the header opens the member menu (hover on a computer, tap on a phone). */
.who-menu { position: relative; }
.who-name { white-space: nowrap; font: inherit; color: var(--text); background: none; border: 0; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.who-name::after { content: ' ▾'; font-size: 11px; }
.who-name:hover, .who-menu.open .who-name { background: var(--accent-soft); }
.who-menu .menu { display: none; position: absolute; right: 0; top: 100%; z-index: 10; min-width: 160px; padding: 6px 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.who-menu.open .menu, .who-menu:hover .menu { display: block; }
.who-menu .menu a, .who-menu .menu button { display: block; width: 100%; box-sizing: border-box; padding: 8px 14px; text-align: left; color: var(--text); text-decoration: none; font: inherit; font-size: 14px; background: none; border: 0; cursor: pointer; }
.who-menu .menu a:hover, .who-menu .menu button:hover { background: var(--accent-soft); }
.who-menu.locked { pointer-events: none; }
.who-menu.locked .who-name::after { content: ''; }
.who-menu.locked .menu { display: none !important; }
.screen { max-width: 960px; margin: 0 auto; padding: 16px; }
h1 { font-size: 22px; margin: 8px 0 12px; }
h2 { font-size: 16px; margin: 0 0 10px; }
.notes { margin: 0 0 16px; padding-left: 20px; color: var(--muted); font-size: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
label { display: block; margin-bottom: 10px; font-size: 14px; }
input[type=email], input[type=password] { display: block; width: 100%; max-width: 360px; padding: 8px 10px; font-size: 16px; border: 1px solid var(--line); border-radius: 8px; margin-top: 4px; }
.btn { display: inline-block; border: 0; background: var(--accent); color: #fff; padding: 10px 20px; font-size: 16px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.btn:disabled { background: #a9b4c4; cursor: not-allowed; }
.btn.secondary { background: var(--accent-soft); color: var(--accent); }
.btn.secondary:disabled { background: var(--accent-soft); color: var(--accent); opacity: .45; cursor: not-allowed; }
.btn.danger { background: var(--danger); }
.btn.big { display: block; width: 100%; max-width: 360px; margin: 8px auto; font-size: 18px; padding: 14px; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 13px; }
.error { color: var(--danger); font-size: 14px; min-height: 1em; margin: 6px 0; }
.hint { color: var(--muted); font-size: 13px; }
.center { text-align: center; }
.teachers { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
@media (min-width: 721px) { .teachers { grid-template-columns: repeat(auto-fill, minmax(120px, 160px)); } }
.tcard { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 2px solid var(--line); border-radius: 12px; padding: 10px 6px; cursor: pointer; background: #fff; text-align: center; font: inherit; color: inherit; }
.tcard img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.tcard .n { font-weight: 700; font-size: 14px; line-height: 1.3; }
.tcard[aria-pressed=true] { border-color: var(--accent); background: var(--accent-soft); }
.teacher-text { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.tcard .intro { font-size: 11px; line-height: 1.45; color: var(--muted); text-align: left; margin-top: 2px; }
.flag { display: inline-block; width: 18px; height: 13.5px; vertical-align: -1px; margin-right: 4px; border: 1px solid var(--line); border-radius: 2px; }
.tcard .n .flag { width: 16px; height: 12px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices.units { margin-top: 10px; }
.picks label { display: block; margin-top: 10px; font-weight: 600; font-size: 14px; }
.picks select { display: block; width: 100%; margin-top: 4px; padding: 10px; font: inherit; font-weight: normal; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.choice { border: 2px solid var(--line); border-radius: 10px; padding: 8px 14px; cursor: pointer; background: #fff; font: inherit; color: inherit; }
.choice[aria-pressed=true] { border-color: var(--accent); background: var(--accent-soft); }
.check { display: flex; gap: 8px; align-items: center; }
.check.small { font-size: 13px; margin: 0; }
.meter { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; margin: 10px 0 4px; max-width: 360px; }
#meterBar { height: 100%; width: 0; background: var(--ok); transition: width .08s; }

.lesson-grid { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
.teacher-panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; text-align: center; align-self: start; position: sticky; top: 12px; }
.photo-wrap { width: 200px; height: 200px; margin: 0 auto 10px; border-radius: 50%; padding: 6px; transition: box-shadow .2s; }
.photo-wrap img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.photo-wrap.speaking { box-shadow: 0 0 0 6px var(--glow), 0 0 28px 10px rgba(73,163,255,.55); }
.tname { font-size: 20px; font-weight: 700; }
.state { color: var(--muted); margin-bottom: 8px; }
.clock { display: flex; justify-content: center; gap: 16px; font-size: 14px; margin-bottom: 8px; }
.clock b { font-size: 18px; font-variant-numeric: tabular-nums; }
.warn { background: #fff3cd; color: #8a6100; border-radius: 8px; padding: 6px; margin-bottom: 8px; font-weight: 700; }
.side h2 { margin-top: 4px; }
.captions-head { display: flex; justify-content: space-between; align-items: center; }
.captions { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; height: 260px; overflow-y: auto; margin-bottom: 16px; font-size: 15px; }
.captions.off { display: none; }
.cap { margin: 4px 0; }
.cap .w { font-weight: 700; margin-right: 6px; }
.cap.student .w { color: var(--ok); }
.cap.teacher .w { color: var(--accent); }
.cap.partial { opacity: .7; }
.material { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px; font-size: 14px; }
.material h3 { font-size: 15px; margin: 12px 0 4px; color: var(--accent); }
.material ul { padding-left: 18px; margin: 4px 0; }
.material h4 { font-size: 14px; margin: 10px 0 4px; }
.material p { margin: 4px 0 8px; }
.material table { border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.material th, .material td { border: 1px solid var(--line); padding: 4px 6px; vertical-align: top; }
.material th { background: var(--accent-soft); }
.material pre { white-space: pre-wrap; font-family: inherit; margin: 4px 0; }
.big-num b { font-size: 24px; }
.next-unit { margin-top: 14px; }
.next-unit summary { cursor: pointer; font-weight: 700; padding: 6px 0; }

@media (max-width: 720px) {
  .brand img { height: 20px; }
  .lesson-grid { grid-template-columns: 1fr; }
  .teacher-panel { position: static; display: grid; grid-template-columns: 96px 1fr; gap: 4px 12px; text-align: left; align-items: center; }
  .photo-wrap { width: 96px; height: 96px; margin: 0; grid-row: span 3; }
  .clock { justify-content: flex-start; }
  .teacher-panel .btn, .teacher-panel .warn { grid-column: span 2; }
  .captions { height: 200px; }
}
.material.pdf { padding: 8px; }
.pdf-bar { margin: 0 0 8px; }
.pdf-page { display: block; width: 100%; height: auto; margin: 0 0 8px; border: 1px solid var(--line); background: #fff; }
.btn.small { font-size: 13px; padding: 6px 12px; text-decoration: none; display: inline-block; }
.mic-help { margin-top: 8px; font-size: 13px; }
.mic-help summary { cursor: pointer; color: var(--accent); }
.mic-help ul { padding-left: 18px; margin: 6px 0; }
.mic-help li { margin: 4px 0; }
.left-info { font-size: 15px; font-weight: 600; color: var(--accent); margin: 4px 0 8px; }
.expiry { font-size: 12px; font-weight: normal; color: var(--text); white-space: nowrap; }
.clock span + span { margin-left: 14px; }

.volume { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 8px 0; font-size: 14px; }
.volume input { width: 140px; }

/* "▶ Voice" at the end of a teacher's card text, and the teacher photo on the done screen */
.voice-btn { display: inline-block; margin-left: 2px; padding: 1px 10px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); background: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.voice-btn:hover, .voice-btn:focus-visible, .voice-btn.playing { background: var(--accent); color: #fff; }
.done-teacher { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 17px; }
.done-teacher img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

/* Entry screen: the next reservation, the two choices (今すぐレッスン / 予約する), the level line and the button bar */
.req { color: #d93025; font-size: 13px; font-weight: 600; margin-left: 8px; }
.opt { color: var(--muted); font-size: 13px; font-weight: normal; margin-left: 8px; }
.next-res { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; font-size: 14px; color: var(--text); text-decoration: none; }
.next-res img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.next-res .go { margin-left: auto; font-size: 13px; color: var(--accent); white-space: nowrap; }
.mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.mode button { border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 12px 8px; font: inherit; font-size: 17px; font-weight: 700; color: var(--muted); cursor: pointer; }
.mode button small { display: block; font-size: 12px; font-weight: normal; margin-top: 2px; }
.mode button[aria-pressed=true] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.level-now { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.level-now .hint { font-size: 13px; }
.level-now .btn { flex: none; }
@media (max-width: 720px) { .level-now .hint { display: block; } }
.mic-row { display: flex; align-items: center; gap: 12px; max-width: 420px; }
.mic-row .meter { flex: 1; margin: 0; }
.mic-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--accent); background: #fff; color: var(--accent); display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.mic-btn:hover { background: var(--accent-soft); }
.mic-btn.ok { border-color: var(--ok); color: var(--ok); background: #e3f4ea; }
#micMsg { margin: 8px 0 0; }
.action-bar { position: sticky; bottom: 0; z-index: 5; background: var(--bg); border-top: 1px solid var(--line); margin: 0 -16px; padding: 4px 16px 10px; }
.action-bar .btn.big { margin: 4px auto; }
.action-bar .error, .action-bar .hint, .action-bar .ok-msg { text-align: center; margin: 4px 0; min-height: 0; }
.action-note { text-align: center; font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.res-kind { display: flex; gap: 18px; margin: 8px 0; }
.res-kind label, .res-days label, .check-line { display: inline-flex; align-items: center; gap: 4px; font-weight: normal; }
.res-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; margin: 6px 0 10px; }
.res-row > label, .res-days-wrap { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.res-row input[type=date], .res-row input[type=time] { font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.res-days { display: flex; flex-wrap: wrap; gap: 4px 12px; font-weight: normal; }
.check-line { margin: 0 0 10px; }
.ok-msg { color: var(--ok); font-size: 14px; }

/* The ringing call screen at the reserved time */
.call-screen { position: fixed; inset: 0; z-index: 50; background: rgba(20, 30, 50, .72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.call-screen[hidden] { display: none; }
.call-box { background: #fff; border-radius: 18px; padding: 26px 22px 18px; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.call-photo { width: 128px; height: 128px; margin: 0 auto 14px; border-radius: 50%; }
.call-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.call-photo.ringing { animation: call-pulse 1.4s ease-out infinite; }
@keyframes call-pulse { 0% { box-shadow: 0 0 0 0 rgba(30, 138, 76, .55); } 100% { box-shadow: 0 0 0 26px rgba(30, 138, 76, 0); } }
.call-title { font-size: 20px; font-weight: 700; margin: 4px 0; }
.call-info { color: var(--muted); font-size: 14px; margin: 4px 0 12px; }
.call-actions { display: flex; gap: 14px; justify-content: center; margin: 10px 0 8px; }
.call-actions .btn { min-width: 128px; padding: 14px 18px; font-size: 18px; border-radius: 999px; }
.btn.call-answer { background: var(--ok); }
.btn.call-later { background: #e9ecf1; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .call-photo.ringing { animation: none; box-shadow: 0 0 0 6px rgba(30, 138, 76, .35); } }

/* Sign-up: 「はじめての方」 under the login, and the thank-you line after signing up */
.signup-card { text-align: center; }
.signup-card p { margin: 4px 0 12px; }
.welcome-msg { background: #e3f4ea; color: var(--ok); border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600; margin: 0 0 12px; }
#doneBuy .btn { margin-top: 8px; }
.site-footer { text-align: center; font-size: 11px; color: var(--muted, #666); padding: 16px 16px 24px; }
.site-footer a { color: inherit; }
.res-extra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.res-extra .btn { flex: 1 1 200px; text-align: center; }
.btn.push-on { background: #f07c00; border-color: #f07c00; color: #fff; font-weight: 700; }
.btn.push-on.done { background: #eceef2; border-color: var(--line); color: var(--muted); font-weight: normal; cursor: default; }
.notice-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 2px; color: var(--accent); border-radius: 50%; text-decoration: none; flex: none; }
.notice-bell:hover { background: var(--accent-soft); }
.notice-bell[hidden] { display: none; }
.notice-count { position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #d93025; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
@media (max-width: 720px) {
  .top { gap: 6px; padding: 8px 12px; }
  .brand { flex: none; }
  .who-menu { min-width: 0; }
  .faq-link { padding: 3px 8px; }
  .who-name { padding: 4px 2px; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
  .notice-bell { width: 30px; height: 30px; margin-left: 0; }
}
@media (max-width: 400px) {
  .brand img { height: 17px; }
  .who-name { max-width: 6.5em; }
}