@charset "UTF-8";
/* MITO JAM 体験会 参加申込一覧（page-mitojam-entry.php）
   見出しは他ページ（rental.css #introduction）と同じ型: 英字=Athelas・灰／和文=Noto Sans JP 太字／紺の下線
   標準パターン: 一覧は grid（PC 2列・SP 1列）、カード内は縦の flex、ボタンは右寄せにしない（押しやすさ優先で幅いっぱい） */
.mje {
	--mje-navy: #0c3484;
	--mje-orange: #EF8000;
	--mje-orange-deep: #d67300;
	--mje-gray: #BDC3C7;
	--mje-line: #d9dde3;
	--mje-bg: #F4F4F4;
	--mje-ink: #222;
	--mje-sub: #666;
	padding: 0 20px 100px;
}
.mje-intro {
	margin: 0 auto 50px;
	max-width: 860px;
	text-align: center;
}
.mje-heading {
	margin: 80px auto 30px;
	padding-bottom: 20px;
	font-family: "Athelas-Regular";
	font-size: 36px;
	font-weight: bold;
	line-height: 1.2em;
	letter-spacing: 2px;
	color: var(--mje-gray);
	border-bottom: 1px solid var(--mje-navy);
}
.mje-heading span {
	display: block;
	margin-top: 10px;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #444;
}
.mje-lead {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.9em;
	color: var(--mje-ink);
}

.mje-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin: 0 auto;
	padding: 0;
	max-width: 960px;
	list-style: none;
}
.mje-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 28px 28px;
	background: #fff;
	border: 1px solid var(--mje-line);
	border-top: 4px solid var(--mje-navy);
	font-family: "Noto Sans JP", sans-serif;
	color: var(--mje-ink);
}
.mje-time {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--mje-navy);
}
.mje-status {
	padding: 1px 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--mje-sub);
	background: var(--mje-bg);
	border-radius: 999px;
}
.mje-name {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mje-ink);
}
.mje-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
}
.mje-info div {
	display: grid;
	grid-template-columns: 3em 1fr;
	gap: 8px;
}
.mje-info dt {
	font-weight: 700;
	color: var(--mje-navy);
}
.mje-info dd {
	margin: 0;
}
.mje-btn {
	display: block;
	margin-top: auto;
	padding: 14px 16px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: var(--mje-orange);
	transition: background .2s;
}
.mje-btn::after {
	content: "\f105";
	margin-left: 10px;
	font-family: FontAwesome;
}
.mje-btn:hover,
.mje-btn:focus-visible {
	color: #fff;
	background: var(--mje-orange-deep);
}
/* 受付終了の案内（ボタンの位置に出す） */
.mje-closed {
	margin: auto 0 0;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: var(--mje-sub);
	background: var(--mje-bg);
}
.mje-note {
	margin: 0;
	font-size: 12px;
	color: var(--mje-sub);
}
.mje-list-min .mje-card {
	gap: 16px;
}

/* PCのみの改行 */
.mje-pc { display: inline; }

@media screen and (max-width: 768px) {
	.mje {
		padding: 0 16px 60px;
	}
	.mje-intro {
		margin-bottom: 30px;
	}
	.mje-heading {
		margin: 30px auto 20px;
		padding-bottom: 10px;
		font-size: 6vw;
	}
	.mje-heading span {
		font-size: 4.2vw;
	}
	.mje-lead {
		font-size: 15px;
		text-align: left;
	}
	.mje-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	.mje-card {
		padding: 20px 18px 22px;
	}
	.mje-name {
		font-size: 19px;
	}
	.mje-pc { display: none; }
}