/* デルバト お試しページ 共通スタイル。本体エンジンの配色に寄せる(chiri_app.htmlの --paper 系) */
:root{
  --paper:#f7f4ec; --ink:#2a2723; --ink-soft:#6b6457; --line:#e2dccc;
  --green:#4f9d69; --blue:#3f7cc4; --orange:#e08a3c; --gold:#d8a93a;
  --wrong:#d9534f; --ok:#4f9d69; --card:#fffdf8; --r:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
[hidden]{display:none !important}
body{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  background:var(--paper); color:var(--ink); min-height:100vh;
}
.wrap{max-width:480px; margin:0 auto; padding:20px 16px 40px}
.tryhead{text-align:center; margin-bottom:18px}
.tryhead .brand{font-size:13px; color:var(--ink-soft); letter-spacing:.15em}
.tryhead h1{font-size:20px; margin:6px 0}
.tryhead .lead{font-size:13px; color:var(--ink-soft); margin:0}
.q{display:none; background:var(--card); border:2px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:14px}
.q.active{display:block}
.qnum{font-size:12px; color:var(--ink-soft); margin-bottom:8px}
.qtext{font-size:17px; line-height:1.5; margin-bottom:14px; font-weight:700}
.choices{display:flex; flex-direction:column; gap:8px}
.choice{
  display:block; width:100%; text-align:left; font-size:15px; padding:12px 14px;
  border:2px solid var(--line); border-radius:12px; background:#fff; color:var(--ink);
  cursor:pointer; font-family:inherit;
}
.choice:active{transform:translateY(1px)}
.choice.correct{border-color:var(--ok); background:#eef6ef}
.choice.wrong{border-color:var(--wrong); background:#fbebea}
.choice[disabled]{cursor:default}
.feedback{margin-top:12px; font-weight:700; font-size:14px}
.feedback.ok{color:var(--ok)}
.feedback.ng{color:var(--wrong)}
.memo{margin-top:8px; font-size:13px; color:var(--ink-soft); background:#fbf8ef; border-radius:10px; padding:10px 12px}
.qfoot{display:flex; justify-content:flex-end; margin-bottom:20px}
.btn{
  display:inline-block; padding:12px 20px; border-radius:14px; border:none;
  background:var(--green); color:#fff; font-size:15px; font-weight:700; cursor:pointer;
  text-decoration:none; text-align:center; font-family:inherit;
}
.btn.primary{display:block; width:100%; margin:16px 0 10px}
.resultActions{display:flex; gap:10px; margin:16px 0 10px}
.resultActions .btn{flex:1; margin:0}
.btn.secondary{background:#fff; color:var(--green); border:2px solid var(--green)}
#result{background:var(--card); border:2px solid var(--line); border-radius:var(--r); padding:22px 18px; text-align:center}
#result h2{margin:0 0 10px; font-size:20px}
#result p{font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0 0 4px}
.backlink{display:block; margin-top:8px; font-size:13px; color:var(--ink-soft)}
.tryfoot{text-align:center; margin-top:24px; font-size:12px; color:var(--ink-soft)}
.tryfoot a{color:var(--ink-soft)}
.subjects{list-style:none; margin:0; padding:0}
.subjects .subject{margin-bottom:20px}
.subjects h2{font-size:15px; margin:0 0 8px}
.units{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.units a{
  display:block; background:var(--card); border:2px solid var(--line); border-radius:12px;
  padding:12px 14px; text-decoration:none; color:var(--ink); font-size:15px;
}
@media (max-width:375px){
  .qtext{font-size:16px}
}