@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;900&display=swap');

:root{
  --cream:#FFF9EC; --ink:#3D2B1F; --orange:#FF9F43; --red:#e63946;
  --line:#F0D9B5; --muted:#7A6055; --soft:#FFFDF7; --green:#3B8F47; --green-bg:#E8F8EC;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'M PLUS Rounded 1c','BIZ UDPGothic',sans-serif;
  background:var(--cream); color:var(--ink);
  min-height:100vh; padding:30px 16px 40px;
  display:flex; flex-direction:column; align-items:center;
}
.wrap{width:100%; max-width:920px}

/* header */
.brand{display:flex; align-items:center; justify-content:center; gap:13px}
.brand svg{flex:none}
.brand .name{font-size:clamp(1.9rem,5vw,2.4rem); font-weight:900; letter-spacing:.04em}
.tagline{text-align:center; font-size:clamp(.9rem,2.4vw,1.05rem); font-weight:900; color:var(--orange); margin:10px 0 0}
.subhead{font-size:.92rem; font-weight:900; color:#A86A1F; margin:0 0 12px}

/* page header (教科ページ) */
.back{display:inline-block; font-weight:900; font-size:.9rem; color:var(--orange); text-decoration:none; margin-bottom:8px}
.back:hover{text-decoration:underline}
.page-title{font-size:clamp(1.4rem,4vw,1.7rem); font-weight:900; margin:6px 0 2px}
.page-note{font-size:.82rem; font-weight:700; color:var(--muted); margin:0 0 14px}

/* grid + cards */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:15px}
.card{
  background:#fff; border:3px solid var(--line); border-radius:20px;
  padding:18px 16px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:6px;
  box-shadow:0 4px 14px rgba(100,60,20,.09); transition:.15s;
}
.card:hover{transform:translateY(-4px); border-color:var(--orange); box-shadow:0 8px 22px rgba(100,60,20,.17)}
.card .ico{font-size:2rem; line-height:1}
.card h3{font-size:1.08rem; font-weight:900}
.card p{font-size:.8rem; font-weight:700; color:var(--muted); line-height:1.55}
.card .badge{align-self:flex-start; font-weight:900; font-size:.72rem; border-radius:50px; padding:3px 12px; margin-top:2px}
.badge.ok{background:var(--green-bg); color:var(--green)}
.badge.pre{background:#F1E6D2; color:#9A7B4F}
.soon{border-style:dashed; border-color:#E5CBA8; background:var(--soft)}
.soon:hover{transform:none; border-color:#E5CBA8; box-shadow:0 4px 14px rgba(100,60,20,.06)}

/* recent */
.recent-sec{margin:26px 0 4px}
.recent-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px}
.recent-grid .card{flex-direction:row; align-items:center; gap:11px; padding:14px 15px}
.recent-grid .card .ico{font-size:1.6rem}
.recent-grid .card h3{font-size:.98rem}

/* grade tabs */
.gtabs{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0 18px}
.gtabs .label{font-size:.76rem; font-weight:900; color:var(--green)}
.gtab{font-family:inherit; font-weight:900; font-size:.84rem; border:2px solid var(--line);
  background:#fff; color:var(--muted); border-radius:50px; padding:7px 15px; cursor:pointer; transition:.12s}
.gtab:hover{border-color:#9CD9A6; color:var(--ink)}
.gtab.on{background:#6BCB77; border-color:#6BCB77; color:#fff}

/* section spacing */
section{margin-bottom:30px}

/* footer */
footer{text-align:center; border-top:1px solid var(--line); padding-top:16px; margin-top:34px;
  font-size:.74rem; font-weight:700; color:#B5A595; line-height:1.8}