section{min-height: 100%;}
h1{padding: 30px 0; color: var(--color4); font-size: 4vw; display: block;}
#list{display: grid; grid-template-columns: calc(25% - 15px) calc(25% - 15px) calc(25% - 15px) calc(25% - 15px); grid-gap: 20px;}
.b-item{position: relative; height: auto; background-color: var(--bg); border-radius: 14px; padding: 10px;}
.b-item-img{float: left; width: 100%; background-color: var(--bg2); border-radius: 10px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.b-item-img::after{content: ""; display: block; padding-bottom: 100%;}
.b-item p{float: left; width: 100%;}
.p-item-1{padding-top: 7px; font-size: 1.3vw;}
.p-item-2{padding-top: 2px; font-size: 1vw; color: var(--color5); font-style: italic;}
/************************************************************/
/************************************************************/
@media only screen and (max-width: 767px){
h1{padding: 50px 0 20px 0; font-size: 9vw;}
#list{grid-template-columns: calc(50% - 5px) calc(50% - 5px); grid-gap: 10px;}
.b-item{border-radius: 14px; padding: 5px;}
.b-item-img::after{content: ""; display: block; padding-bottom: 130%;}
.p-item-1{padding-top: 4px; font-size: 4.5vw;}
.p-item-2{padding-top: 1px; font-size: 4vw;}
}