/* ============================================
   fix.css — 上書き・追加用CSS
   style.css / {role}.css の後に読み込む
   編集はここに追記すること（既存CSSは触らない）
   ============================================ */
:root {
  --c-primary:  #836FFF;
  --c-accent:   #14B8A6;
  --vb-ink:      #211951;
}
a{
	text-decoration:none;
}
.no_login {
	width:400px;
	text-align:center;
	margin:100px auto 0;
}
.no_login a{
	justify-content: center;
	font-size:50pt;
	line-height:50px;
}
form.login_form{
	width:100%;
	max-width:500px;
	padding:0 20px;
	text-align:center;
	margin:0 auto;
}
form.login_form p{
	font-size:11pt;
	line-height:20px;
	color:#aaa;
	margin:0;
	padding:0;
}
form.login_form dl{
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	align-items: center;
	margin:20px 0;
}
form.login_form dt,
form.login_form dd{
	display:block;
	box-sizing:border-box;
	margin:10px 0;
}
form.login_form dt{
	width:150px;
	padding:0 20px;
	text-align:right;
	color:var(--c-primary);
	font-size:15pt;
}
form.login_form dd{
	width:calc(100% - 150px);
}
form.login_form dd input,
form.login_form dd select{
	box-sizing:border-box;
	display:block;
	width:90%;
	height:40px;
	line-height:40px;
	padding:10px;
	font-size:12pt;
	border:2px solid var(--c-primary);
	outline:none;
	background:var(--c-bg);
	border-radius:10px;
}
form.login_form dd input:focus{
	background:#fff;
}
form.login_form input[type="submit"]{
	display:block;
	width:150px;
	text-align:center;
	font-size:15pt;
	line-height:50px;
	background:var(--c-primary);
	color:#fff;
	transition:all .3s;
	margin:20px auto;
	border-radius:10px;
	border:none;
	outline:none;
	cursor:pointer;
}
form.login_form input[type="submit"]:hover{
	transform:scale(1.1);
	background:var(--c-accent);
	color:#fff;
}
form.login_form a{
	text-decoration:none;
	color:var(--c-primary);
}
form.login_form a:hover{
	text-decoration:underline;
}

/* --- ログインエラー --- */
.login-error {
  color: var(--c-wrong);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  margin: -8px 0 8px;
}
/* --- ヘルプ --- */
.help-link { text-align: center; margin-top: 30px!important; font-size: 13px; }
.help-link a {color: var(--c-accent)!important; text-decoration: none; }

/* --- カード星（追加スタイル） --- */
.card-star-wrap {
  font-size: 20px;
  flex-shrink: 0;
  min-width: 28px;
  text-align: center;
  line-height: 1;
}
.card-star-empty { color: var(--c-border); }
.card-star.gold  { font-size: 24px; }

/* --- 正解表示（commented状態） --- */
.correct-ans {
  font-size: 13px;
  color: var(--c-sub);
  margin-top: 4px;
}

/* --- 課題なし表示 --- */
.hw-empty {
  list-style: none;
  text-align: center;
  padding: 32px 0;
  color: var(--c-sub);
  font-size: 15px;
}

/* --- チャレンジページ --- */
.challenge-intro  { margin-bottom: 8px; }
.challenge-lead   { font-size: 16px; font-weight: 700; color: var(--c-primary); }
.challenge-empty  { text-align: center; padding: 40px 0; color: var(--c-sub); font-size: 15px; }

/* --- 過去ログ --- */
.past-log-loading {
  text-align: center;
  padding: 16px 0;
  color: var(--c-sub);
  font-size: 14px;
}
.hw-card.past-log { opacity: 0.85; }

/* --- ログアウト --- */
.logout-area {
  text-align: center;
  margin-top: 40px;
  padding-bottom: 20px;
}
.btn-logout {
  display: inline-block;
  padding: 10px 32px;
  border: 1.5px solid var(--c-border);
  border-radius: 20px;
  font-size: 14px;
  color: var(--c-sub);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.btn-logout:hover {
  border-color: var(--c-wrong);
  color: var(--c-wrong);
}

/* --- プロフィールページ --- */
.profile-wrap      { padding-bottom: 40px; }

.profile-icon-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 24px 0 20px;
}
.profile-icon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.profile-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.btn-icon-upload {
  display: inline-block;
  padding: 6px 18px;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  color: var(--c-text);
  transition: border-color 0.15s;
}
.btn-icon-upload:hover { border-color: var(--c-primary); }
.icon-hint { font-size: 12px; color: var(--c-sub); }

.profile-greeting {
  text-align: center;
  font-size: 16px;
  margin-bottom: 24px;
}
.profile-name { font-weight: 700; font-size: 18px; }

.profile-form .info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
}
.profile-form .info-list dt {
  font-size: 12px;
  color: var(--c-sub);
  margin: 16px 0 4px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.profile-form .info-list dd { margin: 0; }
.profile-form .info-list input,
.profile-form .info-list select {
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--c-border);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 16px;
  font-family: var(--font-main);
  background: var(--c-surface);
  color: var(--c-text);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.profile-form .info-list input:focus,
.profile-form .info-list select:focus { border-color: var(--c-primary); }
.level-hint { font-size: 12px; color: var(--c-sub); margin-top: 4px; }

.profile-form .info-list .mail-notify-label{
  color: var(--c-text);
	display:flex;
	font-size: 10pt;
	margin:10px 0;
	align-items: center;
}
.profile-form .info-list .mail-notify-label input{
  appearance: none;
	display:block;
	width:15px;
	height:15px;
	margin:0 10px;
	border: 1px solid #ddd;
	padding:0;
	border-radius: 3px;
}
.profile-form .info-list .mail-notify-label input:checked {
	background:#1ab;
}
.profile-form .info-list .mail-notify-label input:checked::before {
	content: "";
	display: block;
	position: relative;
	left: 4.4px;
	top: 0px;
	width: 6px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}
.password-section { margin-top: 32px; }

.profile-msg {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  z-index: 100;
  white-space: nowrap;
}
.profile-msg.success { background: var(--c-correct); color: #fff; }
.profile-msg.error   { background: var(--c-wrong);   color: #fff; }
.btn-accent{
	background:#836FFF;
}
.btn-accent:hover,.btn-primary:hover{
	background:#14B8A6;
}
/* --- スワイプUI：横スワイプ制御 --- */
.swipe-wrap { touch-action: pan-y; }

/* --- お知らせページ共通 --- */
.notice-list  { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.notice-card {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.notice-card.broadcast          { border-color: #836FFF; background: #EEF3FF; }
.notice-card.individual         { border-color: #B07FE0; background: #FAF0FF; }
.notice-card.inquiry.pending    { border-color: #14B8A6; background: #ebf5f4; }
.notice-card.inquiry.replied    { border-color: #2ECC71; background: #EDFBF3; }

.notice-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--c-sub);
}
.notice-type   { font-weight: 700; font-size: 13px; }
.notice-target { color: var(--c-primary); font-weight: 700; }
.notice-from   { color: var(--c-sub); }
.notice-date   { margin-left: auto; }

.notice-title  { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.notice-body   { font-size: 15px; line-height: 1.7; }

.notice-reply {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(46,204,113,0.12);
  border-radius: 10px;
}
.reply-label { font-size: 12px; font-weight: 700; color: #1a9a52; margin-bottom: 4px; }
.reply-body  { font-size: 14px; line-height: 1.7; }
.reply-date  { font-size: 12px; color: var(--c-sub); margin-top: 4px; }

.notice-pending {
  margin-top: 12px;
  font-size: 13px;
  color: #14b8a6;
  font-weight: 700;
}

.notice-empty  { text-align: center; padding: 40px 0; color: var(--c-sub); font-size: 15px; }

.notice-msg {
  font-size: 14px;
  font-weight: 700;
  padding: 8px 0;
  margin-top: 6px;
}
.notice-msg.success { color: #1a9a52; }
.notice-msg.error   { color: var(--c-wrong); }

/* 問い合わせフォーム（生徒） */
.notice-inquiry-wrap  { margin-bottom: 16px; }
.btn-inquiry-toggle {
  width: 100%;
  padding: 14px;
  background: var(--c-surface);
  border: 2px solid var(--c-primary);
  border-radius: 14px;
  font-size: 16px;
  font-family: var(--font-main);
  font-weight: 700;
  color: var(--c-primary);
  cursor: pointer;
}
.inquiry-form-area  { margin-top: 10px; }
.inquiry-textarea   { width: 100%; box-sizing: border-box; border: 1.5px solid var(--c-border); border-radius: 12px; padding: 12px 14px; font-size: 15px; font-family: var(--font-main); resize: vertical; outline: none; }
.inquiry-textarea:focus { border-color: var(--c-primary); }
.inquiry-count      { font-size: 12px; color: var(--c-sub); text-align: right; margin: 4px 0 8px; }

/* 投稿フォーム（teacher/admin） */
.notice-post-wrap   { margin-bottom: 20px; }
.notice-post-tabs   { display: flex; gap: 8px; margin-bottom: 12px; }
.tab-btn {
  padding: 8px 18px;
  border: 2px solid var(--c-border);
  border-radius: 20px;
  background: var(--c-surface);
  font-size: 14px;
  font-family: var(--font-main);
  font-weight: 700;
  cursor: pointer;
  color: var(--c-sub);
  transition: border-color 0.15s, color 0.15s;
}
.tab-btn.active { border-color: var(--c-primary); color: var(--c-primary); }
.notice-post-form { display: flex; flex-direction: column; gap: 8px; }
.notice-input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 15px;
  font-family: var(--font-main);
  background: var(--c-surface);
  outline: none;
}
.notice-input:focus { border-color: var(--c-primary); }
.notice-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--font-main);
  resize: vertical;
  outline: none;
}
.notice-textarea:focus { border-color: var(--c-primary); }

/* 返信フォーム */
.notice-reply-form  { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.reply-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-main);
  resize: vertical;
  outline: none;
  background: #fff;
}
.reply-textarea:focus { border-color: #2ECC71; }

/* =============================================
   Teacher pages — Phase 1 additions
   ============================================= */

/* submission badge button (header) */
.submission-badge-btn {
  position: fixed;
  top: 14px;
  right: 72px;
  background: #e74c3c;
  color: #fff;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.submission-badge-btn span { margin-left: 4px; }

/* badge styles */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.badge.pending    { background: #f39c12; color: #fff; }
.badge.submitted  { background: #3498db; color: #fff; }
.badge.commented  { background: #2ecc71; color: #fff; }
.badge.draft      { background: #95a5a6; color: #fff; }
.badge-count { background: #e74c3c; color: #fff; border-radius: 50%; padding: 1px 7px; font-size: 13px; margin-left: 6px; }

/* override mark */
.override-mark { color: #f39c12; font-size: 12px; margin-left: 4px; }

/* filter bar */
.filter-bar { display: flex; gap: 10px; margin-bottom: 16px; }
.filter-bar select { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; }

/* student table */
.student-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.student-table th { background: #f8f9fa; padding: 8px 10px; text-align: left; border-bottom: 2px solid #ddd; font-weight: 700; }
.student-table td { padding: 10px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.student-table tbody tr { cursor: pointer; transition: background .15s; }
.student-table tbody tr:hover { background: #f0f8ff; }

/* dashboard cards */
.dashboard-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.dash-card { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.dash-card-main { border-left: 5px solid #3498db; text-align: center; padding: 28px 20px; }
.dash-card-main.has-action { border-color: #e74c3c; }
.dash-card-main.all-done   { border-color: #2ecc71; }
.dash-card-num  { font-size: 52px; font-weight: 900; color: #e74c3c; line-height: 1; }
.dash-all-done  { font-size: 48px; line-height: 1; }
.dash-card-label { font-size: 16px; margin: 8px 0 14px; color: #555; }
.dash-card-btn  { display: inline-block; margin-top: 4px; }
.dash-card-warn { border-left: 5px solid #f39c12; }
.dash-card-info { border-left: 5px solid #3498db; }
.dash-card-small { border-left: 5px solid #95a5a6; }
.dash-card-icon { font-size: 22px; margin-bottom: 6px; }
.dash-card-sub  { font-size: 13px; color: #999; }
.dash-card-link { color: #3498db; font-size: 13px; text-decoration: none; display: inline-block; margin-top: 8px; }
@media (min-width: 769px) {
  .dashboard-cards { flex-direction: row; flex-wrap: wrap; }
  .dash-card-main { flex: 0 0 100%; }
  .dash-card { flex: 1 1 calc(50% - 7px); }
}

/* comment list */
.comment-filter-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-item { border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background .15s; }
.comment-item:hover { background: #f8f9ff; }
.comment-item.is-draft { border-left: 4px solid #f39c12; }
.comment-item-inner { display: flex; align-items: center; gap: 12px; padding: 14px 8px; }
.comment-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-item-body { flex: 1; min-width: 0; }
.comment-item-name { font-weight: 700; font-size: 15px; }
.comment-item-unit { font-size: 13px; color: #666; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comment-item-meta { display: flex; gap: 10px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.comment-score  { font-size: 13px; font-weight: 700; color: #3498db; }
.comment-date   { font-size: 12px; color: #aaa; }
.comment-badge  { font-size: 11px; padding: 2px 7px; border-radius: 8px; font-weight: 700; }
.comment-badge.needs { background: #3498db; color: #fff; }
.comment-badge.draft { background: #f39c12; color: #fff; }
.comment-item-arrow { color: #bbb; font-size: 22px; flex-shrink: 0; }
.all-done-msg { text-align: center; padding: 40px 20px; font-size: 18px; color: #666; }

/* comment detail */
.comment-detail-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.score-summary { display: flex; align-items: center; gap: 16px; background: #f8f9fa; border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; }
.score-big { font-size: 36px; font-weight: 900; color: #3498db; white-space: nowrap; }
.score-big span { font-size: 18px; color: #999; }
.score-info { flex: 1; }
.student-nm { font-weight: 700; font-size: 16px; }
.unit-nm { font-size: 13px; color: #666; }
.answer-row { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; align-items: flex-start; }
.answer-row .icon { font-size: 18px; flex-shrink: 0; }
.answer-row .body { flex: 1; }
.answer-row .qtext { font-size: 14px; color: #333; }
.answer-row .uans  { font-weight: 700; font-size: 15px; margin-top: 2px; }
.answer-row .correct-ans { font-size: 13px; color: #2ecc71; margin-top: 2px; }

/* template palette */
.tpl-palette { background: #f8f9fa; border-radius: 12px; padding: 14px; margin: 16px 0; }
.tpl-palette-title { font-weight: 700; font-size: 13px; color: #777; margin-bottom: 8px; }
.tpl-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.tpl-tab-btn { padding: 5px 12px; border: 1px solid #ddd; border-radius: 16px; background: #fff; font-size: 13px; cursor: pointer; }
.tpl-tab-btn.active { background: #3498db; color: #fff; border-color: #3498db; }
.tpl-list { display: none; }
.tpl-list.active { display: block; }
.tpl-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .15s; margin-bottom: 4px; border: 1px solid transparent; }
.tpl-item:hover { background: #e8f4fd; }
.tpl-item.selected { background: #e8f4fd; border-color: #3498db; }
.tpl-en { font-size: 14px; font-weight: 600; }
.tpl-ja { font-size: 12px; color: #888; margin-top: 2px; }
.comment-input-wrap { margin: 16px 0; }
.comment-input-label { font-size: 13px; color: #777; font-weight: 700; }
.comment-input-wrap textarea { width: 100%; margin-top: 6px; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; box-sizing: border-box; }
.comment-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* student detail */
.student-info-card { background: #f8f9fa; border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; }
.student-section { margin-bottom: 20px; }
.sec-label { font-size: 12px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.btn-sm { padding: 5px 14px !important; font-size: 13px !important; min-height: 32px !important; border-radius: 8px; cursor:pointer;}
.btn-warn { border-color: #e74c3c !important; color: #e74c3c !important; }
#override-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
#override-form select, #override-form input { padding: 6px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; }
.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-list li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0; flex-wrap: wrap; font-size: 13px; }
.recent-date { color: #aaa; flex-shrink: 0; }
.recent-unit { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-score { font-weight: 700; flex-shrink: 0; }

/* logs */
.log-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.log-table th { background: #f8f9fa; padding: 8px 10px; text-align: left; border-bottom: 2px solid #ddd; font-weight: 700; }
.log-table td { padding: 10px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.log-row { cursor: pointer; transition: background .15s; }
.log-row:hover { background: #f0f8ff; }
.btn-back-inline { font-size: 13px; color: #3498db; text-decoration: none; margin-right: 8px; }
.student-logs-header { margin-bottom: 10px; }

/* modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200; }
.modal-box { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 16px; padding: 20px 24px; width: min(480px, 92vw); z-index: 201; max-height: 80vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-title { font-weight: 700; font-size: 16px; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #aaa; }

/* questions */
.q-level-group { margin-bottom: 24px; }
.q-level-heading { font-weight: 900; font-size: 15px; color: #3498db; border-bottom: 2px solid #e8f4fd; padding-bottom: 6px; margin-bottom: 10px; }
.q-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.q-item-info { flex: 1; min-width: 0; }
.q-item-title { font-weight: 700; font-size: 14px; }
.q-title-ja { font-size: 12px; color: #888; margin-left: 6px; font-weight: 400; }
.badge-adv { font-size: 11px; background: #9b59b6; color: #fff; border-radius: 8px; padding: 1px 6px; margin-left: 4px; }
.q-item-meta { font-size: 12px; color: #aaa; margin-top: 3px; }
.q-item-btns { display: flex; gap: 6px; flex-shrink: 0; }
.assign-panel { background: #f8f9fa; border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; }
.assign-unit-name { font-weight: 700; font-size: 15px; margin-top: 4px; }
.assign-level-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.assign-student-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; font-size: 14px; }
.assign-student-row input { flex-shrink: 0; }
.q-preview-list { margin-top: 8px; }
.q-preview-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.q-preview-num { font-weight: 700; font-size: 14px; color: #3498db; flex-shrink: 0; width: 28px; }
.q-preview-type { font-size: 11px; color: #aaa; margin-bottom: 2px; }
.q-preview-question { font-size: 14px; margin-bottom: 4px; }
.q-preview-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.q-preview-choices .choice { padding: 3px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; }
.q-preview-choices .choice.correct { background: #2ecc71; color: #fff; border-color: #2ecc71; }
.q-preview-words { display: flex; gap: 6px; flex-wrap: wrap; }
.q-preview-words .word-chip { background: #e8f4fd; padding: 3px 10px; border-radius: 8px; font-size: 13px; color: #333; }
/* sort問題の単語チップ（生徒UI）*/
.sort-bank .word-chip  { display: inline-block; background: #fff; border: 2px solid var(--c-primary, #4A7CF7); color: #2D2D2D; border-radius: 20px; padding: 6px 14px; font-size: 15px; font-weight: 700; cursor: pointer; margin: 4px; transition: opacity .15s; }
.sort-bank .word-chip.used { opacity: .3; pointer-events: none; }
.sort-drop { min-height: 44px; border: 2px dashed #ccc; border-radius: 12px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ans-chip  { display: inline-block; background: var(--c-primary, #4A7CF7); color: #fff; border-radius: 20px; padding: 6px 14px; font-size: 15px; font-weight: 700; cursor: pointer; margin: 2px; }
.q-preview-answer { font-size: 12px; color: #2ecc71; margin-top: 4px; font-weight: 700; }

/* student side: comment display with ja (teacher.css/fix.css 内で追加したクラス。student.cssの.teacher-commentと分離) */
.comment-label  { font-size: 12px; color: #3498db; font-weight: 700; margin-bottom: 6px; }
.comment-en     { font-size: 15px; color: #333; }
.comment-ja     { font-size: 13px; color: #888; margin-top: 4px; }

/* =============================================
   Admin pages — Phase 1 additions
   ============================================= */

.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-tabs .tab-btn { display: inline-block; padding: 8px 16px; border: 2px solid #ddd; border-radius: 20px; font-size: 14px; font-weight: 700; text-decoration: none; color: #666; background: #fff; cursor: pointer; transition: all .15s; }
.admin-tabs .tab-btn.active { background: #3498db; color: #fff; border-color: #3498db; }
.admin-tabs .tab-btn:hover:not(.active) { border-color: #3498db; color: #3498db; }

.admin-section { margin-bottom: 24px; }
.admin-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.admin-hint { font-size: 12px; color: #aaa; }
.req { color: #e74c3c; font-weight: 700; }

.exp-ok   { color: #2ecc71; font-weight: 700; }
.exp-over { color: #e74c3c; font-weight: 700; }
.exp-none { color: #aaa; }

.schedule-import-wrap { background: #f8f9fa; border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.schedule-import-wrap code { background: #eee; padding: 1px 5px; border-radius: 4px; font-size: 12px; }



/* ============================================
   fix.css 追加パッチ v2 — 末尾に追記してください
   Student Dashboard Redesign (violetB)
   — index.php / dashboard.php は無修正
   — セレクタは .wrap スコープ(生徒固有)
   ============================================ */

/* violetB パレット変数 */
:root {
  --vb-primary:  #836FFF;
  --vb-accent:   #14B8A6;
  --vb-ink:      #211951;
  --vb-sub:      #6B6B8A;
  --vb-bg:       #F0F3FF;
  --vb-surface:  #FFFFFF;
  --vb-line:     #E1E4F4;
  --vb-pending-tint:   #FCF69C;
  --vb-pending-bar:    #F5CE3E;
  --vb-draft-tint:     #FF6FB5;
  --vb-draft-bar:      #FF8FC6;
  --vb-submitted-tint: #AB46D2;
  --vb-submitted-bar:  #C274DD;
  --vb-commented-tint: #4A7CF7;
  --vb-commented-bar:  #7199F9;
  --vb-hero-grad:      linear-gradient(135deg, #14B8A6 0%, #2DD4BF 50%, #836FFF 115%);
  --vb-hero-shadow:    rgba(20,184,166,0.32);
}

/* ===== 生徒ページだけ: 背景と nav は body:has(.wrap) で絞る ===== */
body:has(.wrap) {
  background: var(--vb-bg);
  color: var(--vb-ink);
}
body:has(.wrap) .logo b { color: var(--vb-primary); }
body:has(.wrap) .logo u { color: var(--vb-accent); }

/* ----- タブバー (下部固定ダーク) ----- */
body:has(.wrap) nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: none;
  margin: 0;
  padding: 10px 8px calc(12px + env(safe-area-inset-bottom));
  background: #211951;
  box-shadow: 0 -4px 20px rgba(33,25,81,0.22);
  z-index: 50;
}
body:has(.wrap) nav ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  max-width: 680px;
  margin: 0 auto;
  flex-wrap: nowrap;
}
body:has(.wrap) nav ul li { margin: 0; }
body:has(.wrap) nav ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 2px;
  background: transparent;
  border: none;
  border-radius: 14px;
  color: #9A94C0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  min-height: 56px;
  transition: background 0.2s, color 0.2s;
}
body:has(.wrap) nav ul li a::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: transparent;
  background-image: var(--vb-tab-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  transition: background-color 0.2s, box-shadow 0.2s;
}
body:has(.wrap) nav ul li:nth-child(1) a { --vb-tab-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%239A94C0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8v10a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2z'/></svg>"); }
body:has(.wrap) nav ul li:nth-child(2) a {
/*
--vb-tab-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='%239A94C0' stroke='none'><path d='M12 2l1.8 5.4L19 9l-5.2 1.6L12 16l-1.8-5.4L5 9l5.2-1.6z'/></svg>");

*/
--vb-tab-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='%239A94C0' stroke='none'><path stroke-linecap='round' stroke-linejoin='round' d='M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z' /></svg>"); 
}

body:has(.wrap) nav ul li:nth-child(3) a { --vb-tab-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%239A94C0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 7v10M18 7v10M3 10v4M21 10v4M6 12h12'/></svg>"); }
body:has(.wrap) nav ul li:nth-child(4) a { --vb-tab-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%239A94C0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 1 1 12 0v5l2 3H4l2-3z'/><path d='M10 19a2 2 0 0 0 4 0'/></svg>"); }
body:has(.wrap) nav ul li a.active { color: #fff; font-weight: 800; }
body:has(.wrap) nav ul li a.active::before {
  background-color: var(--vb-primary);
  box-shadow: 0 4px 14px rgba(131,111,255,0.4);
}
body:has(.wrap) nav ul li:nth-child(1) a.active { --vb-tab-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8v10a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2z'/></svg>"); }
body:has(.wrap) nav ul li:nth-child(2) a.active {
/* --vb-tab-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='%23FFFFFF' stroke='none'><path d='M12 2l1.8 5.4L19 9l-5.2 1.6L12 16l-1.8-5.4L5 9l5.2-1.6z'/></svg>");
*/

--vb-tab-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='%23FFFFFF' stroke='none'>  <path stroke-linecap='round' stroke-linejoin='round' d='M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z' /></svg>"); 
 }
body:has(.wrap) nav ul li:nth-child(3) a.active { --vb-tab-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 7v10M18 7v10M3 10v4M21 10v4M6 12h12'/></svg>"); }
body:has(.wrap) nav ul li:nth-child(4) a.active { --vb-tab-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 1 1 12 0v5l2 3H4l2-3z'/><path d='M10 19a2 2 0 0 0 4 0'/></svg>"); }
body:has(.wrap) nav ul li a:hover:not(.active)::before { background-color: rgba(255,255,255,0.08); }

/* nav-badge */
body:has(.wrap) nav .nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 24px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--vb-primary);
  background: #e91e63;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(131,111,255,0.5);
  z-index: 2;
}

/* ===== .wrap 内部 — .wrap プレフィックスで絞る ===== */

.wrap { padding-bottom: 100px; }

/* お知らせバナー */
.wrap .notice {
  background: #fff;
  color: var(--vb-ink);
  border: 1px solid var(--vb-line);
  border-left: 4px solid var(--vb-accent);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(33,25,81,0.05);
  margin: 8px 0 20px;
  font-size: 14px;
  font-weight: 600;
}

/* セクション見出し */
.wrap .sec-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--vb-ink);
  text-transform: none;
  letter-spacing: 0;
  margin: 8px 2px 14px;
}

/* 宿題リスト — 2カラムグリッド */
.wrap .hw-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 20px;
  padding: 0;
}
/* ----- 宿題カード(通常) ----- */
.wrap .hw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
  padding: 0;
  border-radius: 16px !important;
  border: 1px solid var(--vb-line) !important;
  background: var(--vb-surface) !important;
  box-shadow:
    0 1px 2px rgba(33,25,81,0.04),
    0 4px 14px rgba(33,25,81,0.06) !important;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.wrap .hw-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 6px 10px rgba(33,25,81,0.06),
    0 14px 28px rgba(33,25,81,0.14) !important;
}

/* カード上半: ステータス色の淡地 */
.wrap .hw-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(100% - 50px);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--vb-tint) 18%, #fff) 0%,
    color-mix(in srgb, var(--vb-tint) 48%, #fff) 100%);
  z-index: 0;
}

/* ===== 立体本 = .card-star-wrap を装飾器として再利用 ===== */
.wrap .hw-card .card-star-wrap {
  /* 中身(★★ など)は飛ばす */
  font-size: 0;
  text-indent: -9999px;
  color: transparent;
  overflow: hidden;
  /* 位置と形 */
  position: absolute;
  left: 16%;
  top: 20%;
  width: 58%;
  aspect-ratio: 1/1;
  transform: rotate(-8deg);
  z-index: 1;
  /* 本の表紙 = メイン白紙面 */
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 80%, #f0f0f0 100%);
  border-radius: 10px;   /* 上丸め強め = 本っぽい */
  /* 重なる紙を box-shadow で多段に — 3枚ぶん */
  box-shadow:
    /* 全体の落ち影 */
     0    4px 10px  rgba(0,0,0,0.18),
     0   10px 24px  rgba(0,0,0,0.20),
    /* 奥1枚目(薄ベージュ) */
     4px  4px 0 -1px #fafafa,
     4px  4px 0 0   rgba(33,25,81,0.06),
    /* 奥2枚目(もっと奥) */
     8px  8px 0 -1px #f3f3f3,
     8px  8px 0 0   rgba(33,25,81,0.05),
    /* 表紙の上ハイライト */
     inset 0 1px 0 rgba(255,255,255,1);
  padding: 0;
  margin: 0;
  min-width: 0;
  line-height: 0;
  text-align: initial;
  display: block;
}

/* 罫線 3本 — repeating-linear-gradient */
.wrap .hw-card .card-star-wrap::before {
	content: "";
	position: absolute;
	width: 50%;
	background: var(--vb-bar);
	border-radius: 2px;
	opacity: 0.65;
	pointer-events: none;
	height: 4px;
	top: 70px;
	left: 15%;
	box-shadow:0 -15px 0 var(--vb-bar),10px -15px 0 var(--vb-bar),
		0 -30px 0 var(--vb-bar),20px -30px 0 var(--vb-bar);
}

/* 角折れ — submitted / commented のみ */
.wrap .hw-card.submitted .card-star-wrap::after,
.wrap .hw-card.commented .card-star-wrap::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 22%; height: 22%;
  background: linear-gradient(225deg,
    color-mix(in srgb, var(--vb-bar) 20%, transparent) 0%,
    color-mix(in srgb, var(--vb-bar) 55%, transparent) 100%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  border-top-right-radius: 10px;
}

/* ステータス別カラー */
.wrap .hw-card.pending   { --vb-tint: var(--vb-pending-tint);   --vb-bar: var(--vb-pending-bar); }
.wrap .hw-card.draft     { --vb-tint: var(--vb-draft-tint);     --vb-bar: var(--vb-draft-bar); }
.wrap .hw-card.submitted { --vb-tint: var(--vb-submitted-tint); --vb-bar: var(--vb-submitted-bar); }
.wrap .hw-card.commented { --vb-tint: var(--vb-commented-tint); --vb-bar: var(--vb-commented-bar); }
.wrap .hw-card.advanced  { --vb-tint: #D4A5F0;                  --vb-bar: #B07FE0; }

/* 手作り感 — カードごとに微妙に傾き変更 */
.wrap .hw-card:nth-child(2n) .card-star-wrap { transform: rotate(-5deg); }
.wrap .hw-card:nth-child(3n) .card-star-wrap { transform: rotate(-10deg); left: 20%; }
.wrap .hw-card:nth-child(4n) .card-star-wrap { transform: rotate(-6deg); }
.wrap .hw-card:nth-child(5n) .card-star-wrap { transform: rotate(-9deg); left: 18%; }
.wrap .hw-card:nth-child(6n) .card-star-wrap { transform: rotate(-7deg); }

/* ステータスアイコン (右上丸バッジ) */
.wrap .hw-card .card-icons {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  text-indent:-9999px;
  border-radius: 50%;
/*
 background: #fff;
 display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(33,25,81,0.18);
  padding: 0;
  gap: 0;*/
}
.wrap .hw-card.pending .card-icons {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23F5CE3E' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z' /%3E%3C/svg%3E");
 }
.wrap .hw-card.draft .card-icons {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FF8FC6' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125' /%3E%3C/svg%3E");
 }
.wrap .hw-card.submitted .card-icons {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23AB46D2' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z' /%3E%3C/svg%3E");
 }
.wrap .hw-card.commented .card-icons {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%237199F9' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z' /%3E%3C/svg%3E");
 }

/* カード下半: ステータス色帯+白文字 */
.wrap .hw-card .card-body {
  position: relative;
  z-index: 2;
  background: var(--vb-bar);
  color: #fff;
  padding: 10px 14px 12px;
  flex: 0 0 auto;
  border-radius: 0;
width:100%;
}
.wrap .hw-card .card-title {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
	text-overflow: ellipsis;
	white-space:nowrap;
}
.wrap .hw-card .card-meta {
  order: -1;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.06em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

/* ===== ヒーローカード = .hw-list 最初の pending ===== */
.wrap #challenge-list .hw-card,
.wrap #training-list .hw-card,
.wrap .hw-list .hw-card:first-child {
  grid-column: 1 / -1;
  min-height: 225px;
  background: var(--vb-hero-grad) !important;
  border: none !important;
  box-shadow: 0 14px 40px var(--vb-hero-shadow) !important;
  padding: 28px 26px 26px;
  justify-content: flex-start;
  overflow: hidden;
	position:relative;
}
.wrap #challenge-list .hw-card{
background: linear-gradient(135deg, rgb(235, 69, 95) 0%, rgb(255, 107, 138) 55%, rgb(131, 111, 255) 110%)!important;
    box-shadow: rgba(235, 69, 95, 0.35) 0px 14px 40px!important;
}
.wrap #challenge-list .hw-card.submitted{
background: linear-gradient(135deg, rgb(224 161 255) 0%, rgb(195 41 171) 55%, rgb(227 11 116) 110%) !important;
    box-shadow: rgb(117 69 235 / 35%) 0px 14px 40px !important;
}
.wrap #challenge-list .hw-card.commented{
    background: linear-gradient(135deg, rgb(69 235 175) 0%, rgb(107 116 255) 55%, rgb(131, 111, 255) 110%) !important;
    box-shadow: rgb(79 69 235 / 35%) 0px 14px 40px !important;
}
.wrap #training-list .hw-card{
background: linear-gradient(135deg, #ffb73c 0%,  rgb(235, 69, 95) 110%)!important;
    box-shadow: rgba(235, 69, 95, 0.35) 0px 14px 40px!important;
}
.wrap #training-list .hw-card.resume{
background:linear-gradient(135deg, #890ec5 0%, rgb(26 155 221) 110%) !important;
    box-shadow: #1c9b4359 0px 14px 40px!important;
}
/* ヒーロー用 ::before = 装飾ブロブ */
.wrap #training-list .hw-card::before,
.wrap #challenge-list .hw-card::before ,
.wrap .hw-list .hw-card:first-child::before {
  content: "";
  position: absolute;
  left:auto;
  top: -60px; right: -40px;
  width: 200px; height: 200px;
  background: rgba(255,255,255,0.14);
  border-radius: 50%;
  animation: vbBlobDrift1 6s ease-in-out infinite;
  z-index: 0;
}
/* ヒーロー用 立体本 = .card-star-wrap を小さめ・左寄せに */
.wrap #training-list .hw-card .card-star-wrap,
.wrap #challenge-list .hw-card .card-star-wrap,
.wrap .hw-list .hw-card:first-child .card-star-wrap {
  top: 60px;
  left: 30px;
  width: 64px;
  aspect-ratio: 1 / 1;
  transform: rotate(0);
  animation: vbHeroFloat 3.5s ease-in-out infinite;
}
.wrap #training-list .hw-card .card-icons,
.wrap #challenge-list .hw-card .card-icons,
.wrap .hw-list .hw-card:first-child .card-icons{
	display:none;
}
.wrap #training-list .hw-card .card-star-wrap::before,
.wrap #challenge-list .hw-card .card-star-wrap::before,
.wrap .hw-list .hw-card:first-child .card-star-wrap::before {
  /* ヒーロー内は罫線を accent(teal) に */
	background:var(--vb-accent);
	top: 60%;
	left: 15%;
	box-shadow:0 -10px 0 var(--vb-accent) ,5px -10px 0 var(--vb-accent) ,
		0 -20px 0 var(--vb-accent) ,10px -20px 0 var(--vb-accent) ;
  opacity: 0.75;
}
/* * カード種類、ステータスごとの色 **/
.wrap #challenge-list .hw-card{
--vb-accent:#eb455f;
}
.wrap #challenge-list .hw-card.submitted{
--vb-accent:#843ab5;
}
.wrap #challenge-list .hw-card.commented{
--vb-accent:#3a89b5;
}
.wrap #training-list .hw-card {
--vb-accent:#ff9800;
}
.wrap #training-list .hw-card.resume{
--vb-accent:#5200ff;
}

/* ヒーローのカード本体 */
.wrap #training-list .hw-card .card-body,
.wrap #challenge-list .hw-card .card-body,
.wrap .hw-list .hw-card:first-child .card-body {
  background: transparent;
  padding: 0 0 0 90px;
  min-height: 80px;
  margin: 30px 0 0 0;
}
.wrap #training-list .hw-card .card-meta,
.wrap #challenge-list .hw-card .card-meta,
.wrap .hw-list .hw-card:first-child .card-meta {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.wrap #training-list .hw-card .card-title,
.wrap #challenge-list .hw-card .card-title,
.wrap .hw-list .hw-card:first-child .card-title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  -webkit-line-clamp: 2;
}
/* ヒーローのステータスアイコン */
.wrap #training-list .hw-card .card-icons,
.wrap #challenge-list .hw-card .card-icons,
.wrap .hw-list .hw-card:first-child .card-icons {
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.22);
  color: #fff;
  box-shadow: none;
  font-size: 16px;
}
/* TODAY ラベル — card-body::before で追加 */
.wrap #training-list .hw-card .card-body::before,
.wrap #challenge-list .hw-card .card-body::before,
.wrap .hw-list .hw-card:first-child .card-body::before {
  content: "HOMEWORK";
  position: absolute;
  top: -23px;
  left: 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #fff;
  opacity: 0.9;
}
.wrap #challenge-list .hw-card .card-body::before{
  content: "CHALLENGE";
}
.wrap #training-list .hw-card .card-body::before{
  content: "TRAINING";
}
/* 「▶ はじめる」ボタン — card-body::after */
.wrap #training-list .hw-card::after,
.wrap #challenge-list .hw-card::after,
.wrap .hw-list .hw-card:first-child::after {
  content: "▶  はじめる";
  display: block;
	width:100%;
  padding: 14px 20px;
  background: #fff;
  color: var(--vb-accent);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  animation: vbCtaPulse 2.4s ease-in-out infinite;
}
.wrap #challenge-list .hw-card::after{
  content: "🔥 ちょうせんする";
}
.wrap #challenge-list .hw-card.draft::after,
.wrap #training-list .hw-card.resume::after,
.wrap .hw-card.draft:first-child::after {
  content: "▶  つづける";
}
.wrap #challenge-list .hw-card.submitted::after,
.wrap .hw-card.submitted:first-child::after {
  content: "⏱ さいてんちゅう…";
}
.wrap #challenge-list .hw-card.commented::after,
/*.wrap .hw-card.advanced:first-child::after,*/
.wrap .hw-card.commented:first-child::after {
  content: "◎ こたえあわせ";
}
@keyframes vbBlobDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-10px, 8px) scale(1.05); }
}
@keyframes vbHeroFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-4px) rotate(-1deg); }
}
@keyframes vbCtaPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
  50%      { box-shadow: 0 4px 14px rgba(0,0,0,0.15), 0 0 0 8px rgba(255,255,255,0.18); }
}

/* hw-empty */
.wrap .hw-empty {
  grid-column: 1 / -1;
  background: #fff;
  border: 1px dashed var(--vb-line);
  border-radius: 16px;
  padding: 40px 20px;
  color: var(--vb-sub);
  list-style: none;
  text-align: center;
}

/* past-log */
.wrap .hw-card.past-log { opacity: 0.88; }



/* nav show/hide on scroll 
@media (max-width: 768px) {
  nav {
    transition: transform 0.3s ease;
  }
  body:has(.wrap) nav.nav-hidden {
    transform: translateY(100%);
  }
}*/
@media (max-width: 768px) {
  body:has(.wrap) nav {
    /* スムーズに、ただし速すぎない */
    /* ふわっと長めに。Apple系の自然な動き */
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    /* iOS Safari でtransform時にカクつかない */
    will-change: transform;
    /* ホームインジケータのある端末で下に余白を確保 */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* 隠す: 下に完全に逃がす。translateY(100%) は nav 自身の高さ分。
     safe-area込みで完全に消したいなら calc で余裕をもたせる */
  body:has(.wrap) nav.nav-hidden {
    transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
    /* ポインタイベントも無効化 (隠れたまま誤タップ防止) */
    pointer-events: none;
  }

  /* オーバースクロール時の挙動を抑える(iOSバウンス低減) */
  body:has(.wrap) {
    overscroll-behavior-y: contain;
  }
}

/* PCでは常時表示、保険でtransform reset */
@media (min-width: 769px) {
  body:has(.wrap) nav.nav-hidden {
    transform: none;
  }
}

/* ============================================
   notice
   ============================================ */
.notice-inquiry-wrap{
	margin-bottom:20px;
}
.btn-inquiry-toggle{
	display:flex;
	border:none;
	box-shadow:0 0 5px #3333;
	bockground:#fff;
	text-align:left;
	box-sizing:border-box;
	color:#333;
	border-radius:15px;
	line-height:30px;
}
.btn-inquiry-toggle::before{
	content:"";
	display:block;
	width:30px;
	height:30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23836FFF'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z' /%3E%3C/svg%3E");
	margin-right:10px;
}
.btn-inquiry-toggle.is-open{
	background:#eee;
}
.btn-inquiry-toggle.is-open::before{
	content:"×";
	text-align:center;
	background-image:none;
}
.notice-card{
	margin:0;
	background:#fff!important;
	border:none;
	border-radius:15px;
	box-sizing:border-box;
	color:#333;
	box-shadow:0 0 5px #3333;
}
.notice-card.staff{
	background:#dde!important;
	box-shadow:unset;
}
.notice-card::before{
	content:"おしらせ";
	display:inline-block;
	background:#fcf69c;
	color:#b39d43;
	font-size:8pt;
	padding:0 10px;
	margin:5px 0 15px 0;
	line-height:20px;
	border-radius:10px;
}
.notice-card.inquiry::before{
	content:"しつもん";
	background:#dff5f3;
	color:#1ba;
}
.notice-card.individual::before{
	content:"あなたへ";
	background:#f0e5fa;
	color:#995ccf;
}
.notice-card.staff::before{
	content:"業務連絡";
	background:#333;
	color:#ccc;
}
.notice-date{
	margin-top:-90px;
}
.notice-title{
	font-size:18px;
}
.notice-reply{
	background:#f0faf7;
}
.reply-header{
	display:flex;
	align-content: center;
	margin-bottom:10px;
}

.reply-label{
	margin-left:10px;
	color:#1ba;
}
.reply-date{
	margin:0;
	margin-left:auto;
}
/* ============================================
   training
   ============================================ */
.t_res{
	display:flex;
	justify-content: space-between;
}
.t_res button:not(#btn-training-finish){
	width: calc(50% - 20px);
	min-height: 56px;
	background: var(--c-primary);
	color: #fff;
	border: none;
	border-radius: 14px;
	font-size: 20px;
	font-family: var(--font-main);
	font-weight: 700;
	cursor: pointer;
	letter-spacing: 0.04em;
	transition: background 0.15s, transform 0.1s;
	margin-top: 4px;
	display:block;
}
#btn-training-finish{
	width: calc(50% - 20px);
}
.t_res button:hover{
	background: #14B8A6!important;
}