/* ===== まなびポータル v3 ポップ&カラフル デザイントークン ===== */
:root{
  --bg:#fff9f0;
  --ink:#3b3663; --ink2:#7a76a3; --ink3:#b0adcc;
  --card:#ffffff; --line:#f0e9f7;
  --ac:#7c6cf6; --ac-dark:#5f4fd8;
  --pop-pink:#ff5fa2; --pop-orange:#ffab2e; --pop-yellow:#ffd93d;
  --pop-green:#2ecc8f; --pop-sky:#3db9f5; --pop-purple:#a06cf6;
  --ok:#22b573; --ok-bg:#e8fbf1; --ng:#ff5470; --ng-bg:#ffeef1;
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --sh-sm:0 4px 14px rgba(124,108,246,.10);
  --sh-md:0 10px 28px rgba(124,108,246,.16);
  --kokugo:#f43f6b; --sugaku:#3d7bf5; --rika:#2ecc8f; --shakai:#ffab2e; --eigo:#a06cf6; --koumin:#14b8a6;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",Meiryo,sans-serif;
  background:var(--bg);
  background-image:
    radial-gradient(circle at 8% 12%, rgba(255,95,162,.09) 0 180px, transparent 200px),
    radial-gradient(circle at 92% 6%, rgba(61,185,245,.10) 0 160px, transparent 190px),
    radial-gradient(circle at 85% 88%, rgba(46,204,143,.09) 0 190px, transparent 220px),
    radial-gradient(circle at 6% 82%, rgba(255,171,46,.10) 0 150px, transparent 180px),
    radial-gradient(rgba(124,108,246,.055) 1.5px, transparent 1.5px);
  background-size:auto,auto,auto,auto,26px 26px;
  background-attachment:fixed;
  color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;min-height:100vh;
}
.wrap{max-width:720px;margin:0 auto;padding:0 16px 48px}
a{color:inherit}
button{font-family:inherit}
.card{background:var(--card);border:2px solid #fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;cursor:pointer;
  border-radius:16px;font-weight:800;font-size:14px;padding:13px 18px;text-decoration:none;
  transition:transform .08s,box-shadow .08s,filter .15s}
.btn-ac{background:var(--ac);color:#fff;
  box-shadow:0 5px 0 rgba(0,0,0,.22);
  box-shadow:0 5px 0 color-mix(in srgb,var(--ac) 62%,#000)}
.btn-ac:hover{filter:brightness(1.07)}
.btn-ac:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.22)}
.btn-ghost{background:#fff;color:var(--ac);border:2.5px solid var(--ac);box-shadow:0 4px 0 rgba(0,0,0,.10)}
.btn-ghost:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.10)}
.btn-soft{background:#f2effe;color:var(--ac);box-shadow:0 4px 0 #ddd6f8}
.btn-soft:active{transform:translateY(3px);box-shadow:0 1px 0 #ddd6f8}
.chip{display:inline-block;font-size:11px;font-weight:800;border-radius:20px;padding:3px 11px;
  background:#f2effe;background:color-mix(in srgb,var(--ac) 13%,#fff);color:var(--ac)}
.bar{height:12px;border-radius:8px;background:#efeaf9;overflow:hidden;box-shadow:inset 0 2px 3px rgba(0,0,0,.06)}
.bar>i{display:block;height:100%;border-radius:8px;background:var(--ac);
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0 8px,transparent 8px 16px);
  background-size:44px 44px;animation:barmove 1.1s linear infinite;transition:width .4s ease}
@keyframes barmove{from{background-position:0 0}to{background-position:44px 0}}
.mut{color:var(--ink2)} .mut3{color:var(--ink3)}
.center{text-align:center}
@keyframes popin{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(3deg)}}
@keyframes wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}}
@keyframes stampin{0%{transform:scale(2.4);opacity:0}55%{transform:scale(.92);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes confet{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--cx),var(--cy)) rotate(540deg);opacity:0}}
@keyframes rainfall{0%{transform:translateY(-30px) rotate(0);opacity:1}90%{opacity:1}100%{transform:translateY(105vh) rotate(480deg);opacity:.5}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
.popin{animation:popin .35s ease both}
.shake{animation:shake .4s ease both}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}