body {
    font-family: 'メイリオ', Meiryo, '游ゴシック', YuGothic, 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
}

.flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 650px;
}

h1 {
    margin-bottom: 0;
}

h2 {
    margin-bottom: 0;
}

h4 {
    margin-top: 0;
    margin-bottom: 4px;
}





.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
}

.button-disabled {
    display: inline-block;
    padding: 10px 20px;
    background-color: grey;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
}


.taskbutton,
.taskeditbutton {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    width: 64px;
    height: 42px;
}

.editbutton {
    /* float: left; */
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    /* width: 64px; */
    height: 42px;
}

.addafterthisdiv {
    display: flex;
    justify-content: center;
    /* 水平方向の中央揃え */
    align-items: center;
    /* 垂直方向の中央揃え */
}

.addafterthisbutton {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    /* width: 64px; */
    height: 42px;
}

.text-right {
    text-align: right;
}

.showitemhistorybutton {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
}

.deletebutton {
    float: right;
    padding: 10px 20px;
    background-color: red;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    /* width: 64px; */
    height: 42px;
}

.deletecheckbutton {
    float: right;
    padding: 10px 20px;
    background-color: red;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    /* width: 64px; */
    /* height: 42px; */
}

.taskbutton-disabled {
    display: inline-block;
    padding: 10px 20px;
    background-color: grey;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    width: 64px;
    height: 42px;
}

.buttonSelected {
    display: inline-block;
    padding: 10px 20px;
    background-color: rgb(50, 76, 153);
    color: yellow;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
}

.wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.dateWrapper {
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

input[type="date"] {
    display: inline-block;
    vertical-align: middle;
    /* 背景色 */
    background-color: white;
    /* フォントサイズ */
    font-size: 16px;
    /* 枠線のスタイル */
    border-style: solid;
    /* 枠線の太さ */
    border-width: 1px;
    /* 枠線の色 */
    border-color: gray;
    /* カーソルのスタイル */
    cursor: pointer;
    /* テキストの配置 */
    text-align: center;
    /* スパン要素のスタイル */
    color: black;
    /* アイコンの位置 */
    padding-right: 20px;
    /* アイコンの画像 */
    /* background-image: url(カレンダー画像のURL); */
    background-repeat: no-repeat;
    background-position: right center;
    /* アイコンのサイズ */
    background-size: 16px 16px;
    /* アイコンとテキストの間隔 */
    margin-right: 20px;
}

.container {
    display: flex;
    flex-direction: column;
    width: 93%;
    max-width: 650px;
}

.itemwrapper {
    border: 1px solid #e0c7c7;
}

.item {
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.itemtext {
    width: 100%;
}

.timetext {
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 5px;
    padding-left: 5px;
    font-size: small;
    color: darkslategray;
}

.twobutton {
    display: flex;
    justify-content: flex-end;
}

.itemedit {
    display: flex;
    align-items: center;
}

.itemeditinputname {
    width: 100%;
    box-sizing: border-box;
}

.itemeditinputaction {
    width: 100%;
    height: 4.5em;
    box-sizing: border-box;
}

.text {
    padding-right: 5px;
    padding-left: 5px;
    margin-top: 0;
    margin-bottom: 0;
    width: 80%;
    word-break: break-all;
}

#band {
    padding-bottom: 16px;
}

/* ul { */
/* list-style: none; */
/* 箇条書きのマーカーを削除 */
/* padding: 0; */
/* } */

/* li { */
/* display: inline-block; */
/* 横並びにする */
/* margin-right: 10px; */
/* 各要素の間に余白をつける */
/* } */

.howtoHtml {
    width: 80%;
    margin: 0 auto;
}

.midashi {
    margin-bottom: 0;
}

.setumei {
    margin-top: 0;
}

.emptyTask {
    text-align: center;
}

.settings_list {
    list-style: none;
}

#productinfo {
    font-style: italic;
    font-size: small;
}

.historydiv {
    background: darkgray;
    margin-top: 6px;
    margin-bottom: 2px;
    border-radius: 4px;
}

.historyentry {
    margin: 0;
    padding: 0;
    border: 0;
}

.itembuttons {
    display: flex;

}