:root{font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;color:#304c75;background:#ffffff;line-height:1.8}*{box-sizing:border-box}body{margin:0}main{max-width:940px;margin:0 auto;padding:48px 24px}header{text-align:center;margin-bottom:30px}.brand{letter-spacing:.2em;font-size:12px;color:#586780}h1{font-size:clamp(25px,5vw,36px);margin:8px}h2{font-size:21px;margin:0 0 20px}.intro{text-align:center;margin-bottom:30px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}section{background:white;border:1px solid #dce1e9;border-radius:16px;padding:28px;box-shadow:0 6px 24px #14243c0a}.login{max-width:480px;margin:auto}label{display:block;margin-bottom:8px}input{width:100%;padding:14px;border:1px solid #a9b4c5;border-radius:7px;font:inherit;margin-bottom:20px}button{border:0;border-radius:7px;background:#345587;color:white;padding:13px 24px;font:inherit;cursor:pointer;width:100%}button:hover{background:#28446e}:focus-visible{outline:3px solid #b58724;outline-offset:3px}.error,.notice{color:#a5352e}.note,footer{font-size:13px;color:#606d80}.note{margin-top:25px}footer{text-align:center;margin-top:36px}.logout{max-width:230px;margin:30px auto 0}.secondary{background:#e8ecf2;color:#263c5c}#result{text-align:center}#answer{font-size:24px;font-weight:700}#reset{max-width:280px}[hidden]{display:none!important}@media(max-width:640px){.grid{grid-template-columns:1fr}main{padding:24px 16px}section{padding:24px}}

/* 元アプリの配色 */
:root{color:#212529;background:#fff}
.brand,.note,footer{color:#6c757d}
header{border-bottom:2px solid #3498db;padding-bottom:18px}
h1{color:#2c3e50}
section{border-color:#ddd;box-shadow:0 2px 5px #00000012}
input{border-color:#ced4da}
button{background:#007bff}
button:hover{background:#0069d9}
.grid>section{padding:0;overflow:hidden}
.grid>section>h2{
  color:#fff;background:#007bff;text-align:center;
  padding:18px 12px;margin:0;font-weight:500
}
.grid>section>form{padding:24px}
.grid>section:nth-child(2)>h2,
.grid>section:nth-child(2) button{background:#28a745}
.grid>section:nth-child(2) button:hover{background:#218838}
#reset{background:#343a40}
#reset:hover{background:#23272b}
.secondary{background:#e9ecef;color:#343a40}
.secondary:hover{background:#dce0e3}

/* 結果画面の配色 */
#result{
  padding:0 0 28px;
  overflow:hidden;
  border-color:#b8daff;
  background:#f7fbff;
}
#result>h2{
  background:#007bff;
  color:#fff;
  padding:18px 12px;
  margin:0 0 24px;
}
#result>p{margin-left:24px;margin-right:24px}
#answer{color:#0056b3}
#reset{background:#007bff}
#reset:hover{background:#0069d9}

#answer{color:#212529}
#answer .converted-year{color:#ff5722}