:root { --bg:#F6F6F2; --card:#fff; --text:#1F2A44; --muted:#6E7487; --primary:#4256DB; --soft:#E8EAFB; --border:#E2E5EC; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'Noto Sans JP','Hiragino Sans','Yu Gothic',system-ui,sans-serif; line-height:1.9; letter-spacing:.01em; }
a { color:var(--primary); }
.g-nav { max-width:1040px; margin:0 auto; padding:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.g-brand { white-space:nowrap; display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:800; font-size:1.15rem; letter-spacing:.06em; }
.g-brand img { width:36px; height:36px; }
.g-btn { display:inline-block; padding:.6em 1.1em; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--text); text-decoration:none; font-weight:700; white-space:nowrap; }
.g-btn.primary { background:var(--primary); border-color:var(--primary); color:#fff; }
main { max-width:760px; margin:0 auto; padding:8px 16px 56px; }
.g-crumb { font-size:.85rem; color:var(--muted); margin:0 0 8px; }
.g-crumb a { color:var(--muted); }
h1 { font-size:clamp(1.5rem,4.4vw,2.1rem); line-height:1.4; font-weight:800; margin:.2em 0 .4em; text-wrap:balance; }
h2 { font-size:clamp(1.2rem,3.4vw,1.45rem); font-weight:800; margin:2.2em 0 .6em; padding-left:12px; border-left:5px solid var(--primary); line-height:1.5; }
h3 { font-size:1.05rem; font-weight:800; margin:1.6em 0 .4em; }
p { margin:.8em 0; }
.g-meta { color:var(--muted); font-size:.85rem; margin:0 0 1.2em; }
.g-lead { font-size:1.05rem; }
article ul, article ol { padding-left:1.4em; }
article li { margin:.35em 0; }
.g-q { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin:12px 0; }
.g-q p { margin:0; }
.g-q .q { font-weight:700; }
.g-q .a { color:var(--muted); font-size:.93rem; margin-top:4px; }
.g-tip { background:var(--soft); border-radius:14px; padding:14px 16px; margin:16px 0; }
.g-tip p { margin:0; }
table { border-collapse:collapse; width:100%; background:var(--card); font-size:.93rem; }
th, td { border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top; }
th { background:var(--soft); }
.g-scroll { overflow-x:auto; }
.g-cta { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:22px 18px; margin:36px 0 0; text-align:center; }
.g-cta h2 { border:0; padding:0; margin:0 0 .4em; }
.g-cta p { margin:.3em 0 1em; }
main.wide { max-width:1040px; }
.g-links { display:flex; align-items:center; gap:18px; }
.g-links a:not(.g-btn) { color:var(--text); text-decoration:none; font-weight:700; font-size:.95rem; padding:4px 0; border-bottom:3px solid transparent; white-space:nowrap; }
.g-links a[aria-current] { border-bottom-color:var(--primary); }
.g-cards { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.g-card { display:flex; flex-direction:column; height:100%; background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden; text-decoration:none; color:var(--text); transition:transform .15s, box-shadow .15s; }
.g-card:hover, .g-card:focus-visible { transform:translateY(-3px); box-shadow:0 12px 28px rgba(31,42,68,.14); }
.g-cover { position:relative; display:flex; align-items:center; gap:14px; aspect-ratio:16/9; padding:18px 20px; color:#fff; overflow:hidden; background:linear-gradient(135deg,#4256DB,#6B7BEA); }
.g-cover.warm { background:linear-gradient(135deg,#E8703A,#F2A33C); }
.g-cover.green { background:linear-gradient(135deg,#1F9D7A,#55C29A); }
.g-cover::after { content:'?'; position:absolute; right:-10px; bottom:-60px; font-size:200px; font-weight:800; line-height:1; color:rgba(255,255,255,.14); }
.g-cover b { font-size:clamp(2.6rem,7vw,3.4rem); font-weight:800; line-height:1; letter-spacing:.02em; }
.g-cover i { font-style:normal; font-weight:800; font-size:1.05rem; line-height:1.45; }
.g-card-body { display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; flex:1; }
.g-tag { align-self:flex-start; background:var(--soft); color:var(--primary); font-weight:700; font-size:.75rem; padding:2px 10px; border-radius:999px; }
.g-card strong { font-size:1.05rem; line-height:1.55; }
.g-desc { color:var(--muted); font-size:.88rem; line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.g-card-foot { margin-top:auto; padding-top:6px; display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--muted); }
.g-card-foot em { font-style:normal; font-weight:700; color:var(--primary); }
.g-more { margin-top:40px; }
@media (max-width:560px) { .g-brand { font-size:1rem; gap:8px; } .g-links { gap:12px; } .g-links a:first-child { display:none; } .g-btn { padding:.5em .8em; font-size:.9rem; } }
footer { text-align:center; color:var(--muted); font-size:.85rem; padding:24px 16px 40px; }
footer a { color:var(--muted); margin:0 8px; }
@media (max-width:400px) { .g-nav { padding:12px; gap:8px; } .g-brand { font-size:.92rem; gap:6px; letter-spacing:.03em; } .g-brand img { width:30px; height:30px; } .g-links { gap:10px; } .g-links a:not(.g-btn) { font-size:.85rem; } .g-btn { padding:.45em .65em; font-size:.8rem; } .g-cta .g-btn { padding:.6em 1em; font-size:.95rem; } }