#container{
    margin:0 auto;
    height:max-content;
    width:fit-content;/*幅を中身の幅にフィットさせる*/
}


#main_column{
    float:left;
    margin-top:1em;
    margin-left:1em;
    padding:1em;
    width:600px;
    background-color: #ffffff;
}

.main_image{
    max-width:100%;
    margin: 0 auto;
    max-height: 800px;
}

#right_column{
    margin-top:1em;
    margin-left:1em;
    padding:1em;
    width:300px;
    background-color: #ffffff;
    float:left;
}


.article_list{
    background-color: #ffffff;
    display: grid;
    gap: 0.5em;
    grid-template-columns:100px 1fr;
    border-bottom: 1px solid #dddddd;
    padding-bottom: 10px;
    margin-bottom: 10px;

}

.thumbnail{
    width: 100%;
    height: 100px;
    object-fit: cover;/*トリミング*/
}


.clearfix {
    clear: both;
}


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

    body{
        min-width:0;
    }


    #container{
        width:96%;
        margin:0 auto;
    }

    #main_column{
        float:none;
        width:100%;
        margin:0 ;
        margin-top:0.5em;
        padding:0.5em;
    }

    #right_column{
        float:none;
        width:100%;
        margin:0 auto;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        padding:0.5em;
    }
    


}