@charset "UTF-8";
/* CSS Document */
/*---------------------------------

  ブログ

---------------------------------*/
.eventBlock {}
/*---------------------------------
  タイトル+一覧
---------------------------------*/
.eventBlock .wrap {}
.eventBlock .title {
  display: flex;
  justify-content: space-between;
}
.eventBlock .title h2 {}
.eventBlock .inner .infoList {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 7rem;
  list-style: none;
}
.eventBlock .inner .infoList li {
  flex-basis: calc(100%/3 - 4.7rem);
}
.eventBlock .inner .infoList li a {
  color: #333;
  display: block;
}
.eventBlock .inner .infoList li a::after {
  background: url("../images/arr_basic.svg") no-repeat center right/1rem;
  content: 'read more';
  display: block;
  margin-top: 1rem;
  padding-right: 2rem;
  text-align: right;
}
.eventBlock .inner .infoList li a figure {
  border-radius: .5rem;
  overflow: hidden;
  position: relative;
}
.eventBlock .inner .infoList li._end a figure::after {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  content: '終了しました';
  font-size: 1.2em;
  display: grid;
  justify-content: center;
  align-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.eventBlock .inner .infoList li a figure img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.eventBlock .inner .infoList li a div {
  margin-top: 2rem;
}
.eventBlock .inner .infoList li a p._ttl {
  flex-basis: 100%;
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 2rem;
}
.eventBlock .inner .infoList li a dl {
  border-top: 1px solid #ccc;
  display: grid;
  grid-template-columns: 6em auto;
}
.eventBlock .inner .infoList li a dl dt, .eventBlock .inner .infoList li a dl dd {
  border-bottom: 1px solid #ccc;
  padding: 1rem 0;
}
.eventBlock .inner .infoList li a:hover figure img {
  transform: scale(1.1);
}
.eventBlock .inner .infoList li a:hover::after {
  letter-spacing: 2px;
}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 896px) {
  .eventBlock .wrap {}
  .eventBlock .inner .infoList {
    gap: 7rem;
  }
  .eventBlock .inner .infoList li {
    flex-basis: calc(100%/2 - 3.7rem);
  }
}
@media screen and (max-width: 480px) {
  .eventBlock .inner .infoList {
    gap: 5rem;
  }
  .eventBlock .inner .infoList li {
    flex-basis: calc(100%/1);
  }
}
/*---------------------------------
  詳細
---------------------------------*/
.detailsBlock .wrap .joBox {
  display: flex;
  align-items: center;
  gap: 5rem;
}
.detailsBlock .wrap .joBox figure {
  border: 1px solid #eee;
  flex-basis: 40rem;
  position: relative;
}
.detailsBlock .wrap .joBox figure img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.detailsBlock .wrap .joBox._end figure::after {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  content: '終了しました';
  font-size: 1.2em;
  display: grid;
  justify-content: center;
  align-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.detailsBlock .wrap .joBox div dl {
  display: grid;
  grid-template-columns: 6em auto;
}
.detailsBlock .wrap .joBox div dl dt, .detailsBlock .wrap .joBox div dl dd {
  padding: 1rem 0;
}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 896px) {
  .detailsBlock .wrap .joBox {
    flex-direction: column;
    gap: 3rem;
  }
  .detailsBlock .wrap .joBox figure {
    flex-basis: auto;
  }
  .detailsBlock .wrap .joBox div dl {
    border-top: 1px solid #ccc;
  }
  .detailsBlock .wrap .joBox div dl dt, .detailsBlock .wrap .joBox div dl dd {
    border-bottom: 1px solid #ccc;
  }
}
@media screen and (max-width: 480px) {}