body{
    background-color:#1a1a1a;
    color:#fff;
    font-family:sans-serif;
    display:flex;
    justify-content:center;
}
.container{font-size:16px;width:92%; max-width:650px; margin-top:8px;}
h1{font-size:18px;text-align:center;}
ul{list-style:none; padding:0;}
li{
    background:#333;
    margin-bottom:10px;
    padding:12px;
    border-radius:5px;
    display:flex;
    justify-content:space-between;
}
a{color:#4dabf7; text-decoration:none;}
.delete-btn{color:#ff6b6b; cursor:pointer;}


/* ベーススタイル（PC用・横並び） */
.form-container {
    display: flex;
    gap: 10px; /* 項目間の隙間 */
    padding: 10px;
    justify-content: center; /* 中央寄せ */
}
.form-container input {
    flex: 5; /* 幅を均等にする */
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* パディングを含めて幅を計算 */
}
.form-container button {
    flex: 1; /* 幅を均等にする */
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* パディングを含めて幅を計算 */
}

/* スマホ用（600px以下・縦並び） */
@media screen and (max-width: 580px) {
.container{width:94%;}
    .form-container {
        flex-direction: column; /* 縦並びに変更 */
        gap: 10px; /* 縦の隙間を少し広げる */
    }
}