/* =============================================================
   アップデート情報（固定ページ /updates/。page-updates.php）
   色とタイポグラフィの変数は assets/base.css の :root を使う。
   .emr-kicker は home.css にあるので、ここでも同じ見た目を定義し直す。
   ============================================================= */

.emr-updates {
	max-width: 960px;
	margin: 0 auto;
	padding-bottom: 24px;
	color: var(--mr-ink);
}

.emr-updates .emr-kicker {
	display: block;
	font-family: var(--mr-disp);
	font-size: 15px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mr-cobalt);
	margin-bottom: 6px;
}

.emr-updates__head {
	border-bottom: 3px solid var(--mr-ink);
	padding-bottom: 14px;
	margin-bottom: 28px;
}

.emr-updates__title {
	font-weight: 800;
	font-size: clamp(26px, 3.4vw, 36px);
	letter-spacing: .03em;
	margin: 0 0 8px;
}

.emr-updates__lead {
	margin: 0;
	color: var(--mr-ink-soft);
	line-height: 1.8;
}

.emr-updates__intro { margin-bottom: 28px; }

/* ---------- 一覧（2件以上のときだけ出る） ---------- */

.emr-updates__index ol {
	list-style: none;
	margin: 0 0 36px;
	padding: 0;
	border-top: 1px solid var(--mr-rule);
}

.emr-updates__index li {
	display: flex;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--mr-rule);
}

.emr-updates__index time {
	flex: 0 0 auto;
	font-family: var(--mr-mono);
	font-size: 13px;
	color: var(--mr-ink-soft);
	padding-top: 2px;
}

.emr-updates__index a { color: var(--mr-cobalt); font-weight: 700; }

/* ---------- 記事1件 ---------- */

.emr-update {
	background: var(--mr-paper-2);
	border: 3px solid var(--mr-ink);
	box-shadow: 8px 8px 0 var(--mr-ink);
	padding: 28px 32px 32px;
	margin-bottom: 40px;
	scroll-margin-top: 24px;
}

.emr-update__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--mr-mono);
	font-size: 13px;
	color: var(--mr-ink-soft);
}

.emr-update__tag {
	background: var(--mr-gold);
	color: var(--mr-ink);
	font-family: var(--mr-disp-ja);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .1em;
	padding: 3px 12px;
}

.emr-update__title {
	font-weight: 800;
	font-size: clamp(22px, 2.8vw, 30px);
	line-height: 1.45;
	letter-spacing: .02em;
	margin: 12px 0 18px;
}

.emr-update__body h3 {
	font-weight: 800;
	font-size: 19px;
	margin: 0 0 12px;
}

.emr-update__lead {
	font-size: 17px;
	line-height: 1.9;
	margin: 0 0 26px;
}

/* 参加する方／主催者の方 */
.emr-update__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 32px;
}

.emr-update__card {
	background: var(--mr-paper);
	border: 2px solid var(--mr-ink);
	padding: 18px 20px 6px;
}

.emr-update__label {
	display: inline-block;
	background: var(--mr-cobalt);
	color: var(--mr-paper);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: .12em;
	padding: 4px 14px;
	margin-bottom: 12px;
}

.emr-update__card--alt .emr-update__label { background: var(--mr-gold-deep); }

.emr-update__card ul {
	margin: 0 0 12px;
	padding-left: 1.2em;
}

.emr-update__card li {
	line-height: 1.8;
	margin-bottom: 8px;
}

/* 画面のイメージ。キャプチャは大きく見せない（縦長のフォームは幅を絞る） */
.emr-update__shots { margin-bottom: 32px; }
.emr-update__shots .emr-update__note { margin-bottom: 14px; }

.emr-update__shots-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 20px;
}

.emr-update__shot {
	flex: 0 1 300px;
	margin: 0;
}

.emr-update__shot:first-child { flex-basis: 240px; }

.emr-update__shots-row--owner { flex-direction: column; }
.emr-update__shots-row--owner .emr-update__shot { flex-basis: auto; max-width: 520px; width: 100%; }

.emr-update__shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px solid var(--mr-ink);
	box-shadow: 4px 4px 0 var(--mr-rule);
}

.emr-update__shot figcaption {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--mr-ink-soft);
}

/* 予約の流れ（3段） */
.emr-update__flow { margin-bottom: 32px; }

.emr-update__flow ol {
	list-style: none;
	counter-reset: emr-flow;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 0 0 12px;
	padding: 0;
}

.emr-update__flow li {
	counter-increment: emr-flow;
	background: var(--mr-ink);
	color: var(--mr-paper);
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.7;
}

.emr-update__flow li::before {
	content: counter(emr-flow, decimal-leading-zero);
	display: block;
	font-family: var(--mr-disp);
	font-size: 22px;
	color: var(--mr-gold);
	line-height: 1;
	margin-bottom: 6px;
}

.emr-update__flow li span {
	display: block;
	font-weight: 800;
	font-size: 16px;
}

.emr-update__note {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--mr-ink-soft);
}

/* 知っておいてほしいこと */
.emr-update__faq { margin-bottom: 30px; }

.emr-update__faq dl { margin: 0; border-top: 1px solid var(--mr-rule); }

.emr-update__faq dt {
	font-weight: 800;
	padding-top: 12px;
}

.emr-update__faq dd {
	margin: 4px 0 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mr-rule);
	line-height: 1.8;
	color: var(--mr-ink-soft);
}

.emr-update__faq a {
	color: var(--mr-cobalt);
	border-bottom: 1px solid var(--mr-gold);
}

/* ボタン */
.emr-update__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.emr-update__btn {
	display: inline-flex;
	align-items: center;
	background: var(--mr-gold);
	color: var(--mr-ink);
	border: 2px solid var(--mr-ink);
	font-weight: 800;
	padding: 12px 22px;
	transition: transform .15s, box-shadow .15s;
}

.emr-update__btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--mr-ink);
	color: var(--mr-ink);
}

.emr-update__btn--ghost { background: transparent; }

/* ---------- レスポンシブ ---------- */

@media (max-width: 760px) {
	.emr-update { padding: 20px 18px 24px; box-shadow: 5px 5px 0 var(--mr-ink); }
	.emr-update__cols,
	.emr-update__flow ol { grid-template-columns: 1fr; }
	.emr-updates__index li { flex-direction: column; gap: 2px; }
}