*{box-sizing:border-box}body{margin:0;background:#f7f7f7;color:#222;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.55}a{color:inherit}header{position:sticky;top:0;z-index:5;height:72px;background:#fff;border-bottom:1px solid #e7e7e7;display:flex;align-items:center;gap:30px;padding:0 max(18px,calc((100% - 1160px)/2))}.logo{text-decoration:none;font-size:22px;white-space:nowrap}.logo b{font-size:27px}.logo i{display:inline-block;width:31px;height:31px;margin-right:8px;vertical-align:-8px;border-radius:50%;background:linear-gradient(145deg,#ff9c18,#ec3e2e 65%,#ffbd28)}header label{width:min(360px,38vw)}header input{width:100%;border:0;background:#f1f1f1;border-radius:4px;padding:13px 16px;font:inherit;outline:0}header>a:last-child{margin-left:auto;text-decoration:none;color:#ef613c;font-size:13px;font-weight:800}.layout{max-width:1160px;margin:auto;display:grid;grid-template-columns:220px 1fr;gap:34px;padding:35px 18px 80px}aside{border-right:1px solid #ddd;padding-right:25px}aside h2{font-size:18px;border-bottom:1px solid #ddd;padding-bottom:15px}aside button{display:block;width:100%;border:0;background:none;text-align:left;color:#777;padding:12px 3px;cursor:pointer}aside button b{float:right}aside button.active,aside button:hover{color:#ef613c;font-weight:900}aside>p{margin-top:28px;padding:14px;background:#fff1e9;color:#777;font-size:12px;border-radius:6px}main{min-width:0}.intro{background:linear-gradient(120deg,#fff,#fff0e7);border:1px solid #eee;padding:28px 32px;margin-bottom:34px;border-radius:7px}.intro small{color:#ef613c;font-weight:900}.intro h1{font-size:36px;margin:4px 0}.intro p{color:#777;margin:0}main>h2{font-size:25px;border-bottom:1px solid #ddd;padding-bottom:13px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{display:flex;flex-direction:column;text-decoration:none;background:#fff;border-radius:7px;overflow:hidden;box-shadow:0 2px 10px #00000014;transition:.2s}.card[hidden]{display:none!important}.card:hover{transform:translateY(-3px);box-shadow:0 9px 24px #00000020}.card img,.thumb{width:100%;aspect-ratio:1.78;object-fit:cover}.thumb{display:grid;place-items:center;background:linear-gradient(135deg,#142d4d,#308cc7);color:#fff;font-size:28px;font-weight:900}.thumb.sns{background:linear-gradient(135deg,#7e45c7,#f46d59)}.thumb.tools{background:linear-gradient(135deg,#111,#555)}.card>div:last-child{padding:15px;display:flex;flex-direction:column;flex:1}.card h3{font-size:16px;line-height:1.5;margin:0 0 12px}.card span{color:#999;font-size:12px}.card strong{display:block;color:#ef613c;font-size:21px;margin-top:4px}.card em{align-self:flex-start;background:#f0f0f0;color:#777;font-style:normal;font-size:11px;border-radius:20px;padding:3px 8px}.card p{font-size:13px}.card footer{margin-top:auto;padding-top:11px;border-top:1px solid #eee;color:#666;font-size:12px}.note{margin-top:45px;background:#fff;border-left:4px solid #ef613c;padding:22px}.note h2{font-size:18px}.note p{color:#777;font-size:13px}#empty{text-align:center;color:#999;padding:50px}@media(max-width:900px){.layout{grid-template-columns:1fr}aside{border:0;border-bottom:1px solid #ddd;padding:0 0 15px;overflow:auto;display:flex;gap:6px}aside h2,aside>p{display:none}aside button{width:auto;white-space:nowrap;border:1px solid #ddd;border-radius:20px;padding:7px 12px;background:#fff}.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){header{height:auto;min-height:65px;flex-wrap:wrap;gap:10px;padding:10px 14px}.logo{font-size:16px}.logo b{font-size:20px}.logo i{width:25px;height:25px;vertical-align:-6px}header label{order:3;width:100%}.layout{padding:20px 12px 60px;gap:18px}.intro{padding:22px}.intro h1{font-size:28px}.grid{grid-template-columns:1fr}}