html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } body { line-height:1; font-family:var(--app-font-sans); color:#333; } ul, ol { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; } table { border-collapse:collapse; border-spacing:0; } a { text-decoration:none; color:inherit; } :root { --header-h:56px; --page-bg:#f0f4f8; --header-bg:#f0f4f8; --text-color:#333; --brand:#4f8bc2; --row-gap:32px; --app-font-sans:'Lato','Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',Meiryo,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; } html { width:100%; background-color:var(--page-bg); color:var(--text-color); font-size:14px; font-family:var(--app-font-sans); -webkit-text-size-adjust:100%; } body { min-height:100svh; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; background-color:var(--page-bg); color:var(--text-color); scrollbar-width:none; -ms-overflow-style:none; padding-top:56px; } body:not(:has(> header)) { padding-top:0; } body::-webkit-scrollbar { width:0; height:0; } body:has(> header) { padding-top:var(--header-h); box-sizing:border-box; } main { min-height:calc(100svh - var(--header-h)); box-sizing:border-box; padding:14px 14px; } footer { text-align:center; } html:not(.ms-ready) .material-symbols-sharp { visibility:hidden !important; } .material-symbols-sharp { font-family:'Material Symbols Sharp'; font-weight:normal; font-style:normal; font-size:inherit; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } header { position:fixed; top:0; left:0; right:0; height:56px; z-index:2000; background-color:var(--header-bg); } nav { height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 7px; } nav ul { display:flex; gap:14px; width:100%; align-items:center; justify-content:flex-end; } nav li { display:flex; align-items:center; } nav ul li:has(> a[title="トップへ戻る"]) { margin-right:auto; } nav button, nav a#logoutLink { background:none; border:none; padding:0; cursor:pointer; } nav button:focus-visible, nav a#logoutLink:focus-visible { outline:2px solid var(--brand); outline-offset:2px; } nav .material-symbols-sharp { font-variation-settings:'wght' 400, 'GRAD' 0, 'FILL' 0, 'opsz' 24; font-size:28px; color:#4f8bc2; cursor:pointer; } .login { display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:100svh; width:100%; box-sizing:border-box; } .login-box { text-align:center; width:70%; } .lock-icon { font-family:'Material Symbols Sharp'; font-variation-settings:'wght' 200, 'GRAD' -25, 'FILL' 0, 'opsz' 24; font-weight:200; font-size:60px !important; color:var(--brand); display:block; margin-bottom:20px; } .login-form { display:flex; flex-direction:column; gap:20px; width:100%; } .login-form input[type="text"], .login-form input[type="password"] { width:100%; padding:10px 0; font-size:16px; background-color:var(--page-bg); border:none; border-bottom:2px solid var(--brand); color:#333; outline:none; text-align:left; -webkit-appearance:none; appearance:none; border-radius:0; box-shadow:none; background-clip:padding-box; } .login-form input::placeholder { color:var(--brand); text-align:left; } .login-form .field { position:relative; } .login-form .field::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--brand); pointer-events:none; } .login-form .field input { border-bottom-color:transparent; } .login-form .pw-wrap { position:relative; } .login-form .pw-wrap input { padding-right:40px; position:relative; z-index:0; } .login-form .pw-toggle { position:absolute; right:0; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:none; background:transparent; cursor:pointer; color:var(--brand); z-index:2; } .login-form .pw-toggle .material-symbols-sharp { font-size:22px; line-height:1; } .login-form .pw-toggle:focus-visible { outline:2px solid var(--brand); outline-offset:2px; } .login-form .pw-wrap::before { content:""; position:absolute; right:0; top:0; bottom:2px; width:40px; background:var(--page-bg); pointer-events:none; z-index:1; } .login-form input:-webkit-autofill, .login-form input:-webkit-autofill:hover, login-form input:-webkit-autofill:focus, .login-form input:-webkit-autofill:active { -webkit-text-fill-color:#333 !important; background-color:var(--page-bg) !important; box-shadow:0 0 0px 1000px var(--page-bg) inset !important; transition:background-color 99999s ease-out, color 99999s ease-out; caret-color:#333; } .login.login--raised { transform:translateY(-24px); } @media (max-height: 520px) { .login.login--raised { transform:translateY(-12px); } } .logout-dialog-overlay { display:none; position:fixed; z-index:9999; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); } .logout-dialog-overlay.active { display:grid; place-items:center; } .logout-dialog-box { background:#fff; border-radius:8px; padding:20px 30px; text-align:center; max-width:300px; width:90%; box-shadow:0 0 10px rgba(0,0,0,0.3); margin:0 auto; } .logout-dialog-box p { margin-bottom:20px; font-size:16px; color:#333; } .logout-dialog-buttons { display:flex; justify-content:space-between; gap:10px; margin:0; padding:0; list-style:none; } .logout-dialog-buttons li { flex:1 1 0; display:flex; } .logout-dialog-buttons li button { flex:1 1 auto; padding:8px 0; border:none; border-radius:4px; background-color:var(--brand); color:#fff; font-size:14px; cursor:pointer; } .logout-dialog-buttons li button:hover { opacity:0.85; } .sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } input, textarea, select { -webkit-appearance:none; appearance:none; border-radius:0; box-shadow:none; background-clip:padding-box; outline:none; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } input::-ms-clear, input::-ms-reveal, input::-ms-expand { display:none; width:0; height:0; } input[type="number"] { -moz-appearance:textfield; }