@charset "UTF-8";

/* --------------------------------------------------
  一覧
-------------------------------------------------- */

#event-list { margin: 0 auto 40px !important; list-style: none !important; display: flex; flex-wrap: wrap; justify-content: space-between; }
#event-list::after { content: ''; width: 280px; height: 0; }
#event-list li { margin-bottom: 40px; width: 280px; background: #f4f4f4; }
#event-list li a { color: #111; }
#event-list li .eye-catch { width: 280px; height: 210px; background: #fff; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
#event-list li .eye-catch img { width: 100%; }
#event-list li .eye-catch .category { padding: 3px 15px; background: rgba(var(--main-color)); color: #fff; display: inline-block; position: absolute; left: 0; bottom: 0; }
#event-list li .body { padding: 10px 20px; }
#event-list li .date { display: block; }
#event-list li .title { margin: 10px 0 20px; font-size: 1.8rem; font-weight: bold; text-align: center; display: block; }
#event-list li a:hover { text-decoration: none; }
#event-list li a:hover img { transform: scale(1.1); }

@media screen and (max-width: 1024px) {
#event-list li { width: 48%; }
#event-list li .eye-catch { width: 100%; }
}

@media screen and (max-width: 767px) {
#event-list li { margin-bottom: 20px; width: 100%; }
}

/* --------------------------------------------------
  詳細
-------------------------------------------------- */

article .eye-catch { margin: 20px 0; text-align: center; }
article .eye-catch img { width: 100%; max-width: 600px; }
article img { margin: 10px 0; }
article .meta { margin-top: 20px; padding: 10px 20px; background: #f4f4f4; font-size: 1.5rem; text-align: right; }
article .meta span { display: inline-block; }
article .meta .category { margin-right: 20px; padding-right: 20px; border-right: solid 1px #ccc; }
.contents-navi { margin-top: 30px; text-align: center; }

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 767px) {
}