/* 見た目調整用 */
body {
  /* フォントの種類を指定 */
  font-family: sans-serif;
}

p {
  font-size: 16px;
  font-family: sans-serif;
  margin-bottom: 0.5em;
}

h1 {
  color: #364e96;/*文字色*/
  padding: 0.3em 0;/*上下の余白*/
  border-top: solid 3px #364e96;/*上線*/
  border-bottom: solid 3px #364e96;/*下線*/
}

h2 {
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #add8e6;/*背景色*/
  border-left: solid 5px #364e96;/*左線（実線 太さ 色）*/
}

h3 {
  /*線の種類（二重線）太さ 色*/
  border-bottom: double 5px #add8e6;
}

.container {
  background-color: #ffffff;
}

.container > div {
  background-color: #dcdcdc  ;
}

/* ----------------------------------------- */
/* Subgrid */
/* ----------------------------------------- */

.container {
  /* グリッドコンテナ */
  display: grid;
  /* 最小256px、最大1frの列を繰り返しつくる */
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  /* 余白 */
  gap: 12px;
}

.item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.item_title {
  margin: 0;
  font-family: sans-serif;
  font-size: 14px;
  margin-bottom: 0.5em;
  color: #4169e1;
  /* 水平方向の中央揃え */
  text-align: center;
}


.item_thumb img {
  width: 100%;
  height: auto;
}

footer {
  width: 100%;
  height: 52px; 
  text-align: right;
  color: #ffffff;
  padding: 2px 0;
  background-color: #008b8b;
}