#container{
    display: grid;
    grid-template-rows: auto; /* 必要に応じて行のサイズを調整 */
    grid-template-columns: repeat(2, 1fr); /* 2列に均等に分割 */
    gap: 0.5em; /* グリッドアイテム間の間隔 */
}

.flat-button {
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 7px 15px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.1s ease;
    text-decoration: none;
}

.flat-button:link {
    color: #fff;
}

.flat-button:visited {
    color: #fff;
}

.flat-button:hover {
    background-color: #2980b9;
    color: #fff;
}

.flat-button:focus {
    outline: none;
    background-color: #2980b9;
    color: #fff;
}

.flat-button:active {
    background-color: #1f639a;
    color: #fff;
}


.article_list{
    background-color: #ffffff;
    padding: 1em; /* 内側の余白を1emに設定 */
    max-width:450px;
    word-wrap: break-word; /* 長い単語を折り返す */
    overflow-wrap: break-word; /* 長い単語を折り返す */
}

.image{
    max-width: 100%;
    height: auto;
}
.name{
    font-weight: bold;
}

.time{
    font-size: smaller;
    color: gray;
}

p.delete-link {
    text-align: right;
    /* text-align プロパティはブロックレベル要素に対して効果があるのでa.delete-link では指定しない */
}

a.delete-link {
    color: gray;
    text-decoration: none;
}

@media screen and (max-width: 600px) {
	/* 600px以下に適用されるCSS（スマホ用） */

    #container{
        display: block;
        width:96%;
        padding: 1em;
        background-color: #ffffff;
    }

    .article_list{
        width:100%;
        max-width: none;
        padding: 0;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #dddddd;
    }




}