input.searchbox{border:solid 1px var(--border-color);width:100%;height:48px;padding:8px 16px;font-family:Noto Sans JP,sans-serif}input.searchbox::placeholder{color:var(--sub-text-color);font-family:Noto Sans JP,sans-serif}form{grid-template-columns:1fr 100px;width:100%;display:grid}form button{border:solid 1px var(--border-color);color:var(--main-text-color);cursor:pointer;background-color:#efefef;border-left:none;font-family:Noto Sans JP,sans-serif;font-size:14px;transition:all .5s}form button:hover{background-color:#fff}.user-card{word-break:break-all;border-bottom:1px solid #ddd;grid-template-columns:minmax(32px,8%) 24% auto minmax(56px,8%);align-items:center;gap:12px;padding:8px;display:grid}.user-card:first-child{border-top:1px solid #ddd}.user-card div:nth-child(2){word-break:auto-phrase}header{width:var(--width-max-size);margin-inline:auto}header h1{color:var(--dark-text-color);margin:20px 0;font-family:Oswald,sans-serif;font-size:32px;font-weight:700;line-height:1.2}footer{color:#fff;background-color:#111;padding:8px 0;font-size:14px}footer div{width:var(--width-max-size);flex-wrap:wrap;align-items:center;gap:4px 40px;margin-inline:auto;display:flex}footer p{vertical-align:middle}footer a{color:#fff;grid-template-columns:40px 1fr;align-items:center;gap:8px;text-decoration:none;transition:all .5s;display:grid}footer a:hover{color:#fff6}.loading-wrapper{background-color:#fff6;justify-content:center;align-items:center;width:100%;height:100vh;display:flex;position:absolute;top:0;left:0;right:0}.loading-ring{border:4px solid #444;border-color:#444 #444 #0000 #0000;border-radius:50%;width:50px;height:50px;animation:1.8s linear infinite spin;position:relative}.loading-ring:before{content:"";border:2px solid #0000;border-color:#0000 #0000 #ddd #ddd;border-radius:50%;animation:1s linear infinite reverse spin;position:absolute;inset:-12px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.search-Wrapper{grid-template-columns:repeat(auto-fit,minmax(333px,1fr));gap:16px 40px;display:grid}:root{--main-text-color:#444;--sub-text-color:#ccc;--dark-text-color:#111;--border-color:#ccc;--width-max-size:min(92%, 1280px)}*{box-sizing:border-box;margin:0;padding:0}html{color:var(--main-text-color);font-family:Noto Sans JP,sans-serif;font-size:16px;line-height:1.6}#root{flex-direction:column;justify-content:flex-start;min-height:100vh;display:flex}main{width:var(--width-max-size);margin:40px auto;line-height:1.6}.mb-10{margin-bottom:40px}.mt-auto{margin-top:auto}