.addList {
    padding: 10px 30px 30px 30px;
}

label {
    display: block;
    margin: 20px 0 5px 0;
}

.addList input[type="text"],
.addList textarea {
    width: 99%;
}

.buttonWrapper {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}

/* --------------------------------------------
   １．未入力（invalid）のときだけすべて隠す
--------------------------------------------- */
input[type="date"]:invalid::-webkit-datetime-edit-year-field,
input[type="date"]:invalid::-webkit-datetime-edit-month-field,
input[type="date"]:invalid::-webkit-datetime-edit-day-field,
input[type="date"]:invalid::-webkit-datetime-edit-text {
    color: transparent;
}

/* --------------------------------------------
   ２．区切り文字“／”は常に表示したいならここで色を戻す
--------------------------------------------- */
input[type="date"]::-webkit-datetime-edit-text {
    color: initial;
}

/* --------------------------------------------
   ３．有効（値が入っている＝valid）のときは年月日フィールドも表示
--------------------------------------------- */
input[type="date"]:valid::-webkit-datetime-edit-year-field,
input[type="date"]:valid::-webkit-datetime-edit-month-field,
input[type="date"]:valid::-webkit-datetime-edit-day-field {
    color: initial;
}

/* ===== Firefox 用（:-moz-ui-valid は valid をブラウザ準拠で判定） ===== */
/* 未入力時（invalid）に隠す */
input[type="date"]:-moz-ui-invalid::-moz-date-year-field,
input[type="date"]:-moz-ui-invalid::-moz-date-month-field,
input[type="date"]:-moz-ui-invalid::-moz-date-day-field {
    color: transparent;
}

/* 入力済み時（valid）には表示 */
input[type="date"]:-moz-ui-valid::-moz-date-year-field,
input[type="date"]:-moz-ui-valid::-moz-date-month-field,
input[type="date"]:-moz-ui-valid::-moz-date-day-field {
    color: initial;
}

/* 区切り文字は常に表示 */
input[type="date"]::-moz-date-separator {
    color: initial;
}


input[type="date"]:invalid::-moz-placeholder {
    /* Firefox */
    color: transparent;
}

input[type="date"]:-moz-ui-valid::-moz-date-year-field,
input[type="date"]:-moz-ui-valid::-moz-date-month-field,
input[type="date"]:-moz-ui-valid::-moz-date-day-field {
    color: initial;
}

/* リストを最大4行分だけの高さにしてスクロール可能に */
.deletable-list-wrapper {
    max-height: 4.5em;
    /* 行の高さが約1.125em x 4行 = 4.5em くらい */
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 0.5em;
    margin-bottom: 1em;
    background: #fafafa;
}

.deletable-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.deletable-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.deletable-list .item-name {
    flex: 1;
    margin-right: 0.5em;
}

.deletable-list .delete-btn {
    color: #c00;
    text-decoration: none;
    font-weight: bold;
    padding: 0 0.2em;
}

/* スクロールバーがほそーくなる（WebKit系ブラウザ用） */
.deletable-list-wrapper::-webkit-scrollbar {
    width: 6px;
}

.deletable-list-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.category-container, .tag-container {
    display: flex;
    margin-top: 10px;
    border: 5px solid #ccc;
    border-radius: 3px;
    justify-content: space-around;
    padding: 10px 0;
}

.category-container h3, .tag-container h3 {
    margin: 0;
}

.category-container a, .tag-container a {
    font-size: 25px;
}

.addcate, .addtag {
    margin: 20px 0;
}