body{font-family:sans-serif;line-height:1.6;background-color:#f4f4f4;margin:0;padding:20px;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;}
.container{background-color:#fff;padding:30px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);width:100%;max-width:500px;}
h1,h2,h3{text-align:center;color:#333;} /* h3も中央寄せに */
div{margin-bottom:15px;}
label{display:inline-block;margin-bottom:5px;font-weight:bold;width:100px;box-sizing:border-box;vertical-align:top;}
input[type="text"],select{padding:8px;border:1px solid #ccc;border-radius:4px;width:calc(100% - 110px);box-sizing:border-box;font-size:1em;}
.output input[type="text"]{background-color:#eee;cursor:default;}
.error-message{color:red;font-size:.9em;min-height:1em;}
.explanation { margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee;}
.explanation h3 { text-align: left; color: #333; border-bottom: none; padding-bottom: 0; margin-top: 15px; font-size: 1.2em;}
.explanation h4 { color: #444; margin-top: 10px; margin-bottom: 5px; font-size: 1.1em;} /* 各進数のタイトル */
.explanation p, .explanation ul { font-size: 0.95em; color: #555;}
.explanation ul { padding-left: 20px;}
.explanation li { margin-bottom: 8px;}
.explanation code { background-color: #f9f9f9; padding: 2px 4px; border-radius: 4px; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;}