#container {
    border-top: 5px solid #598bd9; /*上の線の幅、線種、色*/
    margin: 0 auto;
    max-width: 800px; /*サイトの最大幅*/
    background: #fff; /*背景色*/
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /*ボックスの影。右に、下に、広げる幅。0,0,0は黒の事で0.2は透明度20%の事。*/
}
#main .list {
    margin-bottom: 20px; /*ボックス同士の上下間の余白*/
    border: 1px solid #ccc; /*枠線の幅、線種、色*/
    padding: 10px; /*ボックス内の余白。変更する際は、下の「#main .list a」のmarginとpaddingの数字も変更する。*/
    background: linear-gradient(#FFF, #eee); /*グラデーション*/
    box-shadow: 0px 2px 5px #ccc; /*影の設定。右・下・ぼかし幅・色の設定*/
}
.wrap{
  width:90%;
  margin:0 5%;
  margin:20px;
}
.flex{
  display:flex;
}
img{
  width:100%;
}
.image-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,2fr));
gap:10px;
}    
figure {
    text-align: center;
}
figcaption {
    font-size: small;
    line-height: 130%;
    padding-top: 10px;
}    
p.sb {
    text-align: right;
    font-size: 0.9em;
    margin-top: 80px;
    padding-top: 0px;
}