/* vetexam.jp 動物病院防災検定 共通スタイル */
:root{
  --teal:#0E7C7B; --teal-dark:#0A5F5E; --teal-light:#E6F4F1;
  --orange:#D9480F; --orange-light:#FDEEE4;
  --navy:#1F3A5F; --navy-light:#E9EEF6;
  --dark:#26323D; --gray:#6B7785; --line:#D9E1E7; --bg:#F5F8F9;
  --green:#2B8A3E; --green-light:#E6F5E9; --red:#C92A2A; --red-light:#FDEBEB;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  background:var(--bg);color:var(--dark);line-height:1.65;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--teal)}
.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 16px;flex:1}
/* header */
.site-head{background:var(--teal);color:#fff;padding:14px 0}
.site-head .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.site-head .logo{font-size:1.15rem;font-weight:700;text-decoration:none;color:#fff;display:flex;align-items:center;gap:8px}
.site-head .logo .paw{font-size:1.3rem}
.site-head nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.site-head nav a{color:#fff;text-decoration:none;font-size:.85rem;font-weight:600;padding:6px 10px;border-radius:8px}
.site-head nav a:hover,.site-head nav a.active{background:rgba(255,255,255,.18)}
/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.04)}
h1{font-size:1.5rem;margin:20px 0 4px}
h2{font-size:1.15rem;margin:0 0 12px;color:var(--teal-dark)}
.sub{color:var(--gray);font-size:.9rem}
.badge{display:inline-block;background:var(--teal-light);color:var(--teal-dark);font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:999px;margin-right:6px}
/* buttons */
.btn{display:inline-block;border:none;cursor:pointer;font-family:inherit;text-align:center;text-decoration:none;
  font-size:1rem;font-weight:700;padding:13px 22px;border-radius:12px;transition:filter .15s}
.btn:active{filter:brightness(.92)}
.btn-primary{background:var(--teal);color:#fff}
.btn-orange{background:var(--orange);color:#fff}
.btn-ghost{background:#fff;color:var(--teal-dark);border:2px solid var(--teal)}
.btn-gray{background:#E6EBEF;color:var(--dark)}
.btn-block{display:block;width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn-row .btn{flex:1;min-width:140px}
/* feature list */
.features{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.features li{background:var(--teal-light);border-radius:10px;padding:10px 12px;font-size:.88rem;font-weight:600;color:var(--teal-dark)}
@media(max-width:520px){.features{grid-template-columns:1fr}}
/* mode select */
.mode-opt{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--line);border-radius:12px;padding:14px;margin:10px 0;cursor:pointer}
.mode-opt input{margin-top:5px;width:18px;height:18px;accent-color:var(--teal)}
.mode-opt.sel{border-color:var(--teal);background:var(--teal-light)}
.mode-opt b{display:block}
.mode-opt span{font-size:.85rem;color:var(--gray)}
/* exam top bar */
.exambar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);padding:10px 0}
.exambar .wrap{display:flex;align-items:center;gap:12px}
.timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.25rem;color:var(--teal-dark);background:var(--teal-light);padding:4px 14px;border-radius:10px}
.timer.warn{color:#fff;background:var(--orange)}
.progress-txt{margin-left:auto;font-weight:700;font-size:.9rem;color:var(--gray)}
.pbar{height:6px;background:var(--line);border-radius:3px;margin-top:8px;overflow:hidden}
.pbar>div{height:100%;background:var(--teal);width:0;transition:width .2s}
/* question */
.qcat{display:inline-block;background:var(--navy-light);color:var(--navy);font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:999px;margin-bottom:8px}
.qtext{font-size:1.06rem;font-weight:700;margin-bottom:16px}
.qnum{color:var(--teal-dark)}
.choices{list-style:none}
.choices li{margin:10px 0}
.choice{display:flex;width:100%;gap:12px;align-items:center;text-align:left;background:#fff;border:2px solid var(--line);
  border-radius:12px;padding:13px 14px;font-size:.98rem;font-weight:600;cursor:pointer;font-family:inherit;color:var(--dark)}
.choice .mk{flex:0 0 30px;height:30px;border-radius:50%;background:var(--bg);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:var(--gray)}
.choice:not([disabled]):hover{border-color:var(--teal)}
.choice.sel{border-color:var(--teal);background:var(--teal-light)}
.choice.sel .mk{background:var(--teal);border-color:var(--teal);color:#fff}
.choice.correct{border-color:var(--green);background:var(--green-light)}
.choice.correct .mk{background:var(--green);border-color:var(--green);color:#fff}
.choice.wrong{border-color:var(--red);background:var(--red-light)}
.choice.wrong .mk{background:var(--red);border-color:var(--red);color:#fff}
.choice[disabled]{cursor:default}
/* feedback */
.fb{border-radius:12px;padding:14px;margin-top:14px;font-size:.95rem}
.fb.ok{background:var(--green-light);border:1px solid var(--green)}
.fb.ng{background:var(--red-light);border:1px solid var(--red)}
.fb b.r{color:var(--green)} .fb b.w{color:var(--red)}
/* nav grid (batch) */
.qgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:10px}
.qgrid button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 0;font-size:.8rem;font-weight:700;cursor:pointer;color:var(--gray);font-family:inherit}
.qgrid button.done{background:var(--teal);border-color:var(--teal);color:#fff}
.qgrid button.cur{outline:3px solid var(--orange)}
@media(max-width:520px){.qgrid{grid-template-columns:repeat(5,1fr)}}
/* result */
.score-hero{text-align:center;padding:26px 16px}
.score-hero .big{font-size:3.2rem;font-weight:800;color:var(--teal-dark);line-height:1.1}
.score-hero .big small{font-size:1.3rem;color:var(--gray)}
.score-hero .rate{font-size:1.1rem;font-weight:700;margin-top:4px}
.pass{color:var(--green)} .fail{color:var(--orange)}
.stat-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.stat{background:var(--bg);border-radius:10px;padding:8px 16px;font-size:.85rem;font-weight:700;color:var(--gray)}
.stat b{color:var(--dark)}
/* answer list */
.ans-item{border:1px solid var(--line);border-radius:12px;padding:14px;margin:10px 0}
.ans-item.ng{border-color:var(--red);background:#FFFDFD}
.ans-item .head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-weight:700}
.mark-ok{color:var(--green);font-weight:800} .mark-ng{color:var(--red);font-weight:800}
.ans-item .exp{background:var(--teal-light);border-radius:8px;padding:10px 12px;margin-top:8px;font-size:.9rem}
.ans-item .yours{font-size:.9rem;margin-top:6px}
/* records table */
table.rec{width:100%;border-collapse:collapse;font-size:.9rem}
table.rec th,table.rec td{border-bottom:1px solid var(--line);padding:9px 6px;text-align:center}
table.rec th{background:var(--teal-light);color:var(--teal-dark);font-size:.8rem}
.bar-out{background:var(--line);border-radius:4px;height:8px;min-width:70px}
.bar-in{background:var(--teal);height:8px;border-radius:4px}
/* notes */
.notes ol{padding-left:1.3em}
.notes li{margin:10px 0;font-size:.95rem}
.notes h3{margin:18px 0 6px;font-size:1rem;color:var(--teal-dark)}
/* footer */
.site-foot{margin-top:32px;background:var(--dark);color:#fff;padding:22px 0 30px;text-align:center;font-size:.85rem}
.site-foot .org{font-weight:700;font-size:.95rem}
.site-foot a{color:#8FD8D2;text-decoration:none;font-weight:600}
.site-foot a:hover{text-decoration:underline}
.site-foot .links{margin-top:6px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.site-foot .note-link{margin-top:10px;font-size:.8rem}
.site-foot .copy{margin-top:10px;color:#AEB9C2;font-size:.75rem}
.empty{text-align:center;color:var(--gray);padding:30px 10px}
.hidden{display:none!important}
@media(max-width:520px){
  h1{font-size:1.25rem}
  .qtext{font-size:1rem}
  .btn{padding:12px 14px}
  .timer{font-size:1.05rem}
}