.eventlist {
  margin: 15px;
}
.eventlist > li {
  margin: 30px 0;
  padding: 2em;
  list-style: none;
  border-bottom: 1px dotted #9cafb3;
  /* border-radius: 5px; */
}

.eventlist h5 {
  font-size: 1.5em;
  color: #004980;
  margin-bottom: 0;
  padding-left: 0;
  border-left: none;
}

.eventlist table {
  margin: 1em 1em 0 0.5em;
  border-collapse:separate;
  border-spacing: 1em 0.8em;
  width: 100%;
  background-color: transparent;
}

.max-w-780 {
  max-width: 780px;
}

.eventlist table td, .eventlist table th {
  vertical-align: top;
}

.eventlist table th {
  width: 150px;
  font-weight: bold;
  color: #114358;
  white-space: nowrap;
}


.thum { width:100%; max-width:300px; margin: 2em 0 0 1.5em; }

.thum > img { width:100%;}

.flex {
  display: flex;
  flex-wrap: wrap;
}


.table01 th, .table01 td {
  padding:7px 10px;
}

.table01 thead th {
  background: #fff;
  color:rgb(51, 51, 51);
  font-weight: normal;
}

.table01 tbody th {
  background: #fff;
  color:rgb(51, 51, 51);
  font-weight: normal;
  white-space:normal;
  word-wrap:break-word;
}

/* .table01 tr td:nth-child(2){ text-align:center;} */
/* .table01 tr td:nth-child(3){ width:360px; } */
/* .table01 tr td:nth-child(6){ width:110px; word-break: break-all; } */
.table01 tr td:nth-child(5){ word-break: break-all; }
.table01 tr td:nth-child(8){ width: 200px; word-break: break-all; }

.dn {
  display: none;
}


/*
.table01 tr.kyocyo th {
   background:#d70f3a;
}
*/

.table01 tr.kyocyo th, .table01 tr.kyocyo td {
  background:#fff2eb;
  /* background:#ffeef5; */
}

.table01.table01 tr:nth-child(2n) td {
  background:#fff;
}


.table01 tbody th { width:181px; }
/* .table01 tr td:nth-child(2) { width:116px;} */
.table01 tr td:nth-child(5) { width:100px;}
.table01 tr td:nth-child(6) { width:100px;}
.table01 tr td:nth-child(7) { max-width:200px; word-wrap:break-word;}


.table01.intern tr td:nth-child(1) { white-space: nowrap; }



.kyocho { color:#d1002c; }



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

  .eventlist {
    margin: 15px;
  }
  .eventlist > li {
    margin: 30px 0;
    padding: 2em 0;
  }

  .eventlist table {
    margin: 1em 0 0 0;
    border-spacing: 0 0.8em;
  }

  .eventlist table td, .eventlist table th {
    display: block;
    width: 100%;
  }

  .thum { margin: 2em 0 0 0; }


  .table01 tbody th {
    width:100%;
    background: #0068b7;
    color:#fff
  }

  .table01 tr td:nth-child(n) { width:100%; max-width:100%; }

  .table01 tr td:nth-child(2) { padding-left:calc(5em + 10px); text-indent: -5em; text-align:left; white-space: normal; }
  .table01 tr td:nth-child(3) { padding-left:calc(7em + 10px); text-indent: -7em; white-space: normal; }
  .table01 tr td:nth-child(4) { padding-left:calc(8em + 10px); text-indent: -8em; }
  .table01 tr td:nth-child(5) { padding-left:calc(3em + 10px); text-indent: -3em; }
  .table01 tr td:nth-child(6) { padding-left:calc(3em + 10px); text-indent: -3em; }
  .table01 tr td:nth-child(7) { padding-left:calc(5em + 10px); text-indent: -5em; }

  .table01 tr td:nth-child(2)::before { content: "開催時間：";}
  .table01.intern tr td:nth-child(2)::before { content: "開催期間：";}
  .table01 tr td:nth-child(3)::before { content: "イベント名称：";}
  .table01 tr td:nth-child(4)::before { content: "会場・実施場所：";}
  .table01 tr td:nth-child(5)::before { content: "対象：";}
  .table01 tr td:nth-child(6)::before { content: "主催：";}
  .table01 tr td:nth-child(7)::before { content: "申込方法：";}

  .table01 tr.kyocyo th { background:#ec8700; }
  .table01 tr.kyocyo td { background:#fff; }


}






.event-filter {
	margin: 3em 15px 2em;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.event-filter .filter-label {
	font-weight: normal;
	margin-right: 1em;
	font-size: 120% !important;
	color: #114358;
}

.event-filter a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: #9a9a9a;
	margin-right: 2em; /* 右に余白 */
	font-size: 120% !important;
	font-weight: bold;
	transition: color 0.2s;
	padding-bottom: 8px;
}

/* 最後のリンクは余白不要 */
.event-filter a:last-child {
	margin-right: 0;
}

/* アイコン付きリンクのimg調整 */
.event-filter a img {
	margin-right: 0.4em;
	vertical-align: middle;
	width: 24px;
	height: 24px;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter 0.2s, opacity 0.2s;
}

/* 選択中だけカラーに */
.event-filter a.active {
	color: #0068b7;
	border-bottom: 4px solid #0068b7;
	padding-bottom: 4px;
}

.event-filter a.active img {
	filter: none;
	opacity: 1;
}

/* 個別カテゴリ色（必要に応じて変更可） */
.event-filter a[data-filter="online"].active img {
	/* online用色をSVGで用意するのが推奨 */
}

.event-filter a[data-filter="face"].active img {
	/* 対面用色をSVGで用意するのが推奨 */
}

/* イベントリスト内のリンク余白 */
.eventlist h5 > a {
	margin-right: 0.5em;
}