@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700;900&display=swap');

:root { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; color: #3d2015; background: #fff8ef; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
main { width: min(100%, 430px); }
.mark { margin: 0 0 20px; color: #c40c0c; font-size: 25px; font-weight: 700; letter-spacing: -1px; }
.mark span { color: #ff6500; }
section { padding: 32px; border: 1px solid #f6ce71; border-radius: 14px; background: #fff; box-shadow: 0 12px 34px rgba(196, 12, 12, .09); }
p { margin: 0 0 8px; color: #cc561e; font-size: 16px; font-weight: 700; }
h1 { margin: 0 0 26px; color: #3d2015; font-size: 30px; letter-spacing: -.04em; }
label { display: grid; gap: 8px; color: #7a4127; font-size: 16px; font-weight: 700; }
label + label { margin-top: 16px; }
input { padding: 12px; border: 1px solid #edc7a4; border-radius: 8px; font-size: 16px; }
.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 70px; }
.password-field .password-toggle { position: absolute; top: 50%; right: 7px; width: auto; margin: 0; padding: 7px 9px; transform: translateY(-50%); border: 1px solid #edc7a4; border-radius: 5px; background: #fff; color: #cc561e; font-size: 13px; line-height: 1; }
.password-field .password-toggle:hover { background: #fff7e8; }
button { width: 100%; margin-top: 16px; padding: 15px; border: 0; border-radius: 8px; background: #ff6500; color: #fff; font-size: 17px; font-weight: 700; }
output { display: block; min-height: 20px; margin-top: 14px; color: #c40c0c; font-size: 16px; }
nav { display: flex; gap: 16px; margin-top: 18px; font-size: 16px; }
nav a { color: #cc561e; text-underline-offset: 3px; }
small { display: block; margin-top: 28px; color: #8d6c5d; line-height: 1.7; }

.password-field .password-toggle{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border-radius:10px}.login-remember{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400}.login-remember input{width:20px;height:20px;margin:0}.login-remember+button{min-height:48px}@media(max-width:480px){body{padding:20px 16px}section{padding:24px 20px}input{min-width:0;width:100%}}