@charset "UTF-8";

/* ==========================================================
   イベントステータスアイコン（受付中/満員御礼/終了）
   出力: functions/event-status.php the_event_status_icon()
   表示: TOP(#contents08)・イベント一覧・イベント詳細
   ========================================================== */

.event-status {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	pointer-events: none;
}

/* 受付中 */
.event-status.icon01 {
	background: #e1523d;
}

/* 満員御礼 */
.event-status.icon02 {
	background: #e69b00;
}

/* 終了 */
.event-status.icon03 {
	background: #999;
}

/* --- TOP（イベントセクション）: サムネイル左上に重ねる --- */
#contents08 ul li {
	position: relative;
}

#contents08 ul li .event-status {
	position: absolute;
	top: -15px;
	left: -15px;
	z-index: 5;
}

/* top.css の #contents08 ul li p（color:#825b39等）を打ち消す */
#contents08 ul li a .event-status,
#contents08 ul li a .event-status span {
	color: #fff;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: normal;
	font-weight: 600;
}

/* --- イベント一覧: カード左上に重ねる --- */
.article_event {
	position: relative;
}

.article_event .event-status {
	position: absolute;
	top: -15px;
	left: -15px;
	z-index: 5;
}

/* --- イベント詳細: タイトル上に表示 --- */
.article_single-header .event-status {
	margin: 0 0 12px;
}

@media screen and (max-width: 767px) {
	.event-status {
		width: 48px;
		height: 48px;
		font-size: 11px;
	}

	#contents08 ul li a .event-status,
	#contents08 ul li a .event-status span {
		font-size: 11px;
	}
}