/* もぐ 公式サイト。もちのうの legal.css と同じ骨格で、色だけ もぐ に合わせている */
:root{
  --bg:#FBFBF9; --ink:#1A1A1A; --sub:#5B5B5B; --mute:#8A8A8A;
  --line:#E6E6E3; --sunk:#F4F4F2; --green:#83CF46; --greenDeep:#4E9E1E;
  --max:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.85; font-size:16px;
}
nav{
  position:sticky; top:0; z-index:10; background:rgba(251,251,249,.92);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
  padding:12px 20px; max-width:var(--max); margin:0 auto;
}
nav .brand{display:flex; align-items:center; gap:9px; font-weight:800; color:var(--ink); text-decoration:none; font-size:16px}
nav .brand img{width:26px; height:26px; border-radius:7px; display:block}
nav .back{margin-left:auto; color:var(--mute); text-decoration:none; font-size:13px}
nav .back:hover{color:var(--ink)}
main{max-width:var(--max); margin:0 auto; padding:0 20px 80px}

/* トップ */
.hero{padding:64px 0 44px; border-bottom:1px solid var(--line)}
.hero img.mark{width:76px; height:76px; border-radius:19px; display:block; margin-bottom:22px}
.hero h1{font-size:31px; line-height:1.35; margin:0 0 14px; letter-spacing:-.01em}
.hero p{font-size:16px; color:var(--sub); margin:0 0 8px}
.tag{display:inline-block; margin-top:20px; font-size:12px; font-weight:700; color:var(--greenDeep);
     background:#EFF9E6; border-radius:999px; padding:6px 13px}
.cards{display:grid; gap:12px; margin:36px 0 0}
@media(min-width:620px){.cards{grid-template-columns:1fr 1fr}}
.card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px; text-decoration:none; color:inherit; display:block}
.card:hover{border-color:#D6D6D2}
.card h3{margin:0 0 6px; font-size:15px}
.card p{margin:0; font-size:13.5px; color:var(--mute); line-height:1.7}

/* 文書 */
.doc{padding:44px 0 0}
.doc h1{font-size:27px; margin:0 0 6px; letter-spacing:-.01em}
.doc .updated{font-size:13px; color:var(--mute); margin:0}
.doc h2{font-size:17px; margin:38px 0 10px; padding-top:22px; border-top:1px solid var(--line)}
.doc h3{font-size:15px; margin:24px 0 6px}
.doc p{margin:0 0 12px; font-size:15px; color:#2E2E2E}
.doc ul,.doc ol{margin:0 0 12px; padding-left:1.35em}
.doc li{margin:0 0 7px; font-size:15px; color:#2E2E2E}
.doc a{color:var(--greenDeep)}
.doc strong{font-weight:700}
.note{background:var(--sunk); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:0 0 16px}
.note p:last-child{margin-bottom:0}
table{width:100%; border-collapse:collapse; margin:0 0 16px; font-size:14px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--mute); font-weight:700; font-size:12.5px; white-space:nowrap}
footer{border-top:1px solid var(--line); margin-top:56px; padding:24px 0 0; font-size:13px; color:var(--mute)}
footer a{color:var(--mute); text-decoration:none; margin-right:14px}
footer a:hover{color:var(--ink)}