@charset "UTF-8";
figure, p {
  /* リセット用（場合によっては不要） */
  margin: 0;
}
figure2, p {
  /* リセット用（場合によっては不要） */
  margin: 0;
}

.image_box {
  width: 320px;
  display: block;
}

.image_box2 {
  width: 320px;
  display: block;
}

.hover {
  position: relative;
}
.hover2 {
  position: relative;
}
.hover figure {
  overflow: hidden;
}
.hover2 figure2 {
  overflow: hidden;
}
.hover2 #figure2 {
  overflow: hidden;
}
.hover figure img {
  display: block;
  width: 100%;
  transition: 0.3s;
/*  filter: brightness(50%);*/
  height: 240px;
  object-fit: cover;

}

.hover2 figure2 img {
  display: block;
  width: 100%;
  transition: 0.3s;
/*  filter: brightness(50%);*/
  height: 150px;
  object-fit: cover;

}

.hover2#figure2 img {
  display: block;
  width: 100%;
  transition: 0.3s;
/*  filter: brightness(50%);*/
  height: 150px;
  object-fit: cover;

}

.hover figure figcaption {
  transition: 0.3s;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  color: #fff;
/* border: solid 1px #fff;*/
}
.hover figure figcaption .txt_box {
  position: relative;
  width: 100%;
  height: 100%;
}
.hover figure figcaption .txt_box > p {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.hover2 figure2 figcaption {
  transition: 0.3s;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  color: #fff;
/* border: solid 1px #fff;*/
}
.hover2 figure2 figcaption .txt_box {
  position: relative;
  width: 100%;
  height: 100%;
}
.hover2 figure2 figcaption .txt_box > p {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.hover:hover figure img {
  transform: scale(1.2);
  filter: brightness(90%);
}
.hover:hover figure figcaption {
  opacity: 1;
}
.hover2:hover figure2 img {
  transform: scale(1.2);
  filter: brightness(90%);
}
.hover2:hover #figure2 img {
  transform: scale(1.2);
  filter: brightness(90%);
}
.hover2:hover figure2 figcaption {
  opacity: 1;
}
.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  justify-itemes: center;
}
.grid2 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  justify-itemes: center;
}
#gridtitle{
background:#253494;color:#FFF;text-align:center;text-decoration:none;padding:10px; border-top: 1px solid #fff; border-bottom: 1px solid #fff;
}