@charset "shift_jis";
/* CSS Document */


/*グリッドレイアウト*/

.grid {
  display: grid;
  max-width:1100px;
  grid-gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin:20px auto;
  padding:0 10px;
}
.item {
  background: #fff;
  border:1px solid #dcdcdc;
  text-align: center;
}

.catch {
  padding: 1em;
  font-size:110%;
  text-align: left;
}

.cimg {
  max-width: 100%;
  height: auto;
  margin:15px;
}
.cname {
  display:block;
  text-align: center;
  background: linear-gradient(-135deg, #FFF9E6, #FFF9E6);
  padding:15px 0px;
  color:white;
  font-weight:bold;
  font-size:calc(11px + 0.4vw);
  letter-spacing:0.05em;
}

.cbluegreen{
  background: linear-gradient(-135deg, #4ea1d5, #4ea1d5);
}

.cwhite{
  background: white;
  color:#4c4c4c;
}



.itemTitle{
  max-width:1100px;
  margin:0 auto;
}

.itemTitle h2{
  margin:1.5em 0 0.8em 0;
  line-height:1.5;
  font-size:120%;
  padding:8px 15px;
  color:#111;
  background-color:#f5f5f5;
}

.item a{
text-decoration:none;
}

.item a:hover{
text-decoration:underline white;
}

.cwhite:hover{
text-decoration:underline;
}


/* カテゴリ画像サイズ */

@media screen and (max-width: 578px) {
  .grid  {
  display: grid;
  display: -ms-grid;
  max-width:578px;
  grid-gap: 10px;
  grid-template-columns: repeat(2, minmax(93px, 1fr));
  margin:10px auto;
  padding:0 10px;
  }
.cimg {
  max-width: 80%;
  height: auto;
  margin:10px 5px;
  }
.cname {
  padding:8px 0px;
  }
.catch {
  padding: 1em;
  font-size:85%;
  text-align: left;
  }
}