/*
 * tsk-v2 / event.css
 *
 * セミナー・外装NEXT（/event/ 一覧・種別の絞り込み・詳細）専用。
 * 該当ページだけで読み込む（inc/event.php）。クラス名は .event-* に限定する。
 *
 * 【方針】
 *   - 「経営情報誌のセミナー案内」に寄せる。日付と受付状況が最初に目に入る並び。
 *     一覧は横長 1 カラム（左に画像・右に情報）で、3 列の角丸カードにしない。
 *   - 白面＋細い罫線のみ。大きな影・大きな角丸・意味のないアイコン・グラデーションは使わない。
 *   - セミナーと外装NEXTの差は種別ラベルの色 1 色だけ（セミナー=濃紺 / 外装NEXT=ブロンズ）。
 *     背景・フォント・レイアウトは共通にし、外装NEXTだけを派手にしない。
 *   - 受付状況は色だけで伝えない。バッジには必ず文字を入れる。
 *   - 配色は既存トークンのみ。ブレークポイントは既存の 700px / 1060px のみ。
 *   - 既存部品（.page-header / .breadcrumb / .check-list / .link-arrow / .pagination /
 *     .archive-empty / .entry-back）を再利用し、ここではイベント固有のレイアウトだけを定義する。
 *
 * 【詳細ページ（PHASE NEXT-18）】
 *   - 詳細はトップページの設計に揃える：濃紺のファーストビュー＋実写、英字ラベル＋大きな h2（section-head）、
 *     白・薄灰・濃紺の帯（layout.css の .section）でセクションの役割を分ける。
 *   - 視覚要素は意味のあるものだけ：開催情報の線画アイコン（template-parts/event/icon.php）、
 *     プログラムのタイムライン、対象者の写真。数字の装飾・グラデーション・大きな影は使わない。
 *   - 上の「白面＋細い罫線のみ」「外装NEXTだけを派手にしない」は一覧に対する方針として維持する。
 */

/* ==========================================================================
   器
   ========================================================================== */

.event-wrap {
	width: 100%;
	max-width: var(--w-main);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-bottom: var(--sp-2xl);
}

/* ==========================================================================
   バッジ（一覧・詳細で共用）
   ========================================================================== */

.event-type,
.event-status {
	display: inline-block;
	padding: 0.2em 0.65em;
	border: 1px solid currentColor;
	border-radius: var(--r-xs);
	font-size: var(--fs-2xs);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: var(--ls-wide);
	white-space: nowrap;
}

/* 種別：アクセント色 1 色だけを変える */
.event-type {
	border-color: transparent;
	border-left: 3px solid currentColor;
	border-radius: 0;
	padding-left: 0.55em;
	background-color: var(--paper-200);
}

.event-type--seminar {
	color: var(--color-brand);
}

.event-type--next {
	color: var(--bronze-600);
}

/* 受付状況 */
.event-status--open {
	color: var(--accent-500);
	background-color: var(--paper-000);
}

.event-status--few {
	color: var(--ink-000);
	background-color: var(--accent-500);
	border-color: var(--accent-500);
}

.event-status--closed,
.event-status--finished,
.event-status--cancelled {
	color: var(--ink-500);
	background-color: var(--paper-200);
	border-color: var(--line-strong);
}

/* ==========================================================================
   種別の絞り込み（一覧）
   ========================================================================== */

.event-filter {
	margin-bottom: var(--sp-lg);
	border-bottom: 1px solid var(--line);
}

.event-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--sp-md);
	margin: 0;
}

.event-filter__link {
	display: inline-block;
	padding: var(--sp-2xs) 0 var(--sp-xs);
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--ink-500);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.event-filter__link:hover,
.event-filter__link:focus-visible {
	color: var(--accent-500);
}

.event-filter__link[aria-current="page"] {
	color: var(--color-brand);
	border-bottom-color: var(--color-brand);
}

/* ==========================================================================
   一覧
   ========================================================================== */

.event-group + .event-group {
	margin-top: var(--sp-2xl);
}

.event-group__title {
	margin-bottom: var(--sp-sm);
	font-size: var(--fs-md);
	color: var(--color-brand);
}

.event-list {
	margin: 0;
	border-top: 1px solid var(--line-strong);
}

.event-card {
	min-width: 0;
	border-bottom: 1px solid var(--line);
}

.event-card__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-sm);
	padding: var(--sp-md) 0;
	color: inherit;
	text-decoration: none;
}

@media (min-width: 700px) {

	.event-card__link {
		grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
		gap: var(--sp-lg);
	}
}

/* 画像枠。16:10 に揃え、写真は枠いっぱいに切り抜く */
.event-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background-color: var(--paper-200);
	border: 1px solid var(--line);
	border-radius: var(--r-xs);
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.event-card__link:hover .event-card__media,
.event-card__link:focus-visible .event-card__media {
	border-color: var(--color-brand);
}

.event-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* メイン画像が無いイベント：開催日を組んだ無地の枠 */
.event-card__blank {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	padding: var(--sp-sm);
	background-color: var(--paper-000);
	border-top: 4px solid var(--color-brand);
}

/*
 * SP（1 カラム）では無地の枠が全幅の大きな空白になり、開催日も本文と重複するため出さない。
 * 2 カラム（700px 以上）では左列の位置を揃えるために残す。
 */
@media (max-width: 699.98px) {

	.event-card__media:has(> .event-card__blank) {
		display: none;
	}
}

.event-card__blank-date {
	color: var(--color-brand);
	font-family: var(--font-num);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: var(--ls-wide);
}

.event-card__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.event-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3xs) var(--sp-2xs);
	margin-bottom: var(--sp-2xs);
}

.event-card__date {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--sp-xs);
	margin-bottom: var(--sp-3xs);
	color: var(--color-brand);
	font-family: var(--font-num);
	font-size: var(--fs-base);
	font-weight: 700;
	letter-spacing: var(--ls-wide);
}

.event-card__time {
	color: var(--ink-700);
	font-size: var(--fs-sm);
}

.event-card__title {
	font-size: var(--fs-md);
	line-height: var(--lh-snug);
	color: var(--ink-900);
	transition: color 0.2s ease;
}

/* 長いイベント名を文節で折り返す（対応ブラウザのみ。PHASE NEXT-18 でファーストビューの指定から移した） */
.event-card__title {
	word-break: auto-phrase;
}

.event-card__link:hover .event-card__title,
.event-card__link:focus-visible .event-card__title {
	color: var(--accent-500);
}

.event-card__summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: var(--sp-2xs);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	color: var(--color-text-muted);
}

.event-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3xs) var(--sp-md);
	margin: var(--sp-xs) 0 0;
	font-size: var(--fs-xs);
	color: var(--ink-700);
}

.event-card__fact-label {
	margin-right: var(--sp-2xs);
	color: var(--ink-500);
	font-weight: 700;
}

.event-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2xs);
	margin-top: var(--sp-sm);
	color: var(--accent-500);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.event-card__more::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.event-card__link:hover .event-card__more::after,
.event-card__link:focus-visible .event-card__more::after {
	transform: rotate(-45deg) translate(2px, 2px);
}

/* 過去の開催は情報として残すが、今後の開催より一段控えめにする（文字色は AA を保つ） */
.event-card--past .event-card__date {
	color: var(--ink-700);
}

.event-card--past .event-card__img {
	filter: grayscale(0.6);
}

/* ==========================================================================
   詳細：ファーストビュー（PHASE NEXT-18）
   トップページのファーストビューと同じ設計：濃紺の面・実写・英字ラベル・ブロンズの強調・画像の下に CTA。
   ・濃紺の帯 … 種別（日本語＋英字）・受付状況・h1・キャッチコピー ／ 右に写真（SP は写真が先）
   ・白の帯   … 開催の要点（線画アイコン）と申込ボタン
   ========================================================================== */

.event-hero__stage {
	background-color: var(--navy-800);
	color: var(--ink-000);
	padding-block: var(--sp-lg) var(--sp-xl);
}

@media (min-width: 900px) {

	.event-hero__stage {
		padding-block: var(--sp-2xl);
	}
}

.event-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-lg);
	align-items: center;
}

.event-hero__head {
	min-width: 0;
}

/* SP は写真 → 見出しの順 */
.event-hero__media {
	order: -1;
	min-width: 0;
	margin: 0;
}

@media (min-width: 900px) {

	.event-hero__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		column-gap: var(--sp-2xl);
	}

	.event-hero__media {
		order: 0;
	}

	.event-hero__stage--no-media .event-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.event-hero__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-xs);
}

/* 種別ごとの写真（アイキャッチが無いとき）は枠に合わせて切り抜く。アイキャッチは切り抜かない */
.event-hero__media--stock .event-hero__img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

@media (min-width: 900px) {

	.event-hero__media--stock .event-hero__img {
		aspect-ratio: 4 / 3;
	}
}

.event-hero__caption {
	margin-top: var(--sp-2xs);
	font-size: var(--fs-2xs);
	line-height: var(--lh-snug);
	color: rgba(255, 255, 255, 0.72);
}

/* 英字ラベル（トップページの fv-eyebrow と同じ組み方） */
.event-hero__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2xs) var(--sp-sm);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
}

.event-hero__eyebrow-ja {
	display: flex;
	align-items: center;
	gap: var(--sp-2xs);
	color: var(--ink-000);
}

.event-hero__eyebrow-ja::before {
	content: "";
	width: 2rem;
	height: 2px;
	background-color: var(--bronze-300);
}

.event-hero__eyebrow-en {
	color: rgba(217, 178, 106, 0.92);
	font-family: var(--font-num);
	font-size: var(--fs-2xs);
	letter-spacing: 0.18em;
}

/* 濃紺の面の上の受付状況 */
.event-hero .event-status {
	color: var(--ink-000);
	background-color: transparent;
	border-color: var(--line-on-dark-strong);
}

.event-hero .event-status--few {
	background-color: var(--accent-500);
	border-color: var(--accent-500);
}

.event-hero .event-status--closed,
.event-hero .event-status--finished,
.event-hero .event-status--cancelled {
	color: rgba(255, 255, 255, 0.72);
}

/* h1：1 つのまま。句点で 2 段に分けたときは 1 段目をブロンズで強調する（inc/event.php） */
.event-hero__title,
.event-hero .page-title {
	margin-top: var(--sp-md);
	color: var(--ink-000);
	font-size: clamp(1.75rem, 1.05rem + 2.6vw, 3rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.02em;
	word-break: auto-phrase;
}

.event-hero__title-lead,
.event-hero__title-rest {
	display: block;
}

.event-hero__title-lead {
	color: var(--bronze-300);
}

.event-hero__title-rest {
	margin-top: 0.45em;
	font-size: 0.56em;
	font-weight: 700;
	line-height: var(--lh-snug);
	letter-spacing: 0;
	color: var(--ink-000);
}

.event-hero__catch {
	max-width: 36em;
	margin-top: var(--sp-md);
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: rgba(255, 255, 255, 0.86);
}

.event-hero__notice {
	margin-top: var(--sp-md);
	padding: var(--sp-xs) var(--sp-sm);
	border-left: 3px solid var(--bronze-300);
	background-color: rgba(255, 255, 255, 0.08);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--ink-000);
}

/* 白の帯：開催の要点と申込ボタン */
.event-hero__bar {
	background-color: var(--paper-000);
	border-bottom: 1px solid var(--line);
}

.event-hero__bar-inner {
	display: grid;
	gap: var(--sp-md);
	padding-block: var(--sp-md) var(--sp-lg);
}

@media (min-width: 900px) {

	.event-hero__bar-inner {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--sp-lg);
		padding-block: var(--sp-lg);
	}
}

/* 要点は内容の幅で横に並べ、入りきらなければ次の行へ（開催日が途中で折れないように） */
.event-keyfacts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-sm) var(--sp-lg);
	margin: 0;
}

.event-keyfacts__item {
	position: relative;
	min-height: 2.25rem;
	padding-left: 3rem;
}

.event-keyfacts__icon {
	position: absolute;
	top: 50%;
	left: 0;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0.45rem;
	border-radius: 50%;
	background-color: var(--paper-200);
	color: var(--color-brand);
	transform: translateY(-50%);
}

.event-keyfacts__label {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--ink-500);
}

.event-keyfacts__value {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: var(--lh-snug);
	color: var(--ink-900);
	white-space: nowrap;
}

/* 線画アイコン（トップページの fv-badge__svg と同じ線の太さ・端の処理） */
.event-icon {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ==========================================================================
   詳細：本文の帯（PHASE NEXT-18）
   トップページの .section（白・薄灰・濃紺）をそのまま使い、上下の余白だけイベント詳細向けに詰める。
   見出しはトップページの section-head（英字ラベル＋大きな h2）と同じクラス。
   ========================================================================== */

.event-band {
	padding-block: clamp(3.5rem, 2.25rem + 4.5vw, 6rem);
}

.event-band.section--plain + .event-band.section--plain {
	border-top: 1px solid var(--line);
}

.event-head {
	margin-bottom: var(--sp-lg);
}

/* 案内DM・関連動画は従来の見出し（event-section__title）のまま、帯の中で大きさだけ揃える */
.event-band .event-section {
	padding: 0;
	border-top: 0;
}

.event-band .event-section__title {
	margin-bottom: var(--sp-lg);
	font-size: var(--fs-xl);
	font-weight: 800;
	color: var(--color-brand);
}

/* ---- こんな会社・経営者へ（薄灰の帯・写真＋リスト） ---- */

.event-audience__body {
	display: grid;
	gap: var(--sp-lg);
}

@media (min-width: 900px) {

	.event-audience__body--media {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--sp-2xl);
		align-items: start;
	}
}

.event-audience__media {
	margin: 0;
}

.event-audience__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-xs);
}

.event-audience__caption {
	margin-top: var(--sp-2xs);
	font-size: var(--fs-2xs);
	color: var(--ink-500);
}

.event-audience__list {
	display: grid;
	gap: var(--sp-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {

	.event-audience__body:not(.event-audience__body--media) .event-audience__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.event-audience__item {
	position: relative;
	padding: var(--sp-sm) var(--sp-md) var(--sp-sm) 3.5rem;
	background-color: var(--paper-000);
	border: 1px solid var(--line);
	border-radius: var(--r-xs);
	font-size: var(--fs-md);
	font-weight: 500;
	line-height: var(--lh-snug);
	color: var(--ink-900);
	word-break: auto-phrase;
}

/* 印：濃紺の丸に白いチェック（対象者＝「当てはまる」） */
.event-audience__item::before,
.event-audience__item::after {
	content: "";
	position: absolute;
	top: 50%;
}

.event-audience__item::before {
	left: var(--sp-md);
	width: 1.25rem;
	height: 1.25rem;
	margin-top: -0.625rem;
	border-radius: 50%;
	background-color: var(--color-brand);
}

.event-audience__item::after {
	left: calc(var(--sp-md) + 0.36rem);
	width: 0.52rem;
	height: 0.28rem;
	margin-top: -0.22rem;
	border-left: 2px solid var(--ink-000);
	border-bottom: 2px solid var(--ink-000);
	transform: rotate(-45deg);
}

/* ---- この時間で持ち帰れること（濃紺の帯） ---- */

.event-takeaways__list {
	display: grid;
	gap: var(--sp-lg) var(--sp-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {

	.event-takeaways__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1060px) {

	.event-takeaways__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.event-takeaways__item {
	position: relative;
	padding-top: var(--sp-sm);
	border-top: 1px solid var(--line-on-dark-strong);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: var(--lh-snug);
	color: var(--ink-000);
	word-break: auto-phrase;
}

/* 印：上辺の短いブロンズの罫（持ち帰るもの＝「得られる」） */
.event-takeaways__item::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 2.5rem;
	height: 3px;
	background-color: var(--bronze-300);
}

.event-takeaways__action {
	margin-top: var(--sp-xl);
}

/* ==========================================================================
   詳細：今回のご案内を見る（案内DMビューワー）
   ・JS 無し … 全ページを横に並べ、この帯の中だけを横スクロールして読む（ページ全体は伸ばさない）
   ・JS 有り（.is-enhanced）… 1 ページずつ表示。枠の縦横比は 1 ページ目に固定し、ページ送りで高さを変えない
   ・黒いツールバー等の「PDFビューア風」にはしない。白面・罫線・濃紺の文字だけで組む
   ========================================================================== */

.event-dm__lead {
	margin-top: calc(var(--sp-md) * -0.5);
	margin-bottom: var(--sp-md);
	font-size: var(--fs-sm);
	color: var(--ink-700);
}

.event-dm__viewer {
	max-width: 34rem;
}

/* JS 無し：横スクロールの帯 */
.event-dm__pages {
	display: flex;
	gap: var(--sp-sm);
	margin: 0;
	padding: 0 0 var(--sp-xs);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

.event-dm__page {
	flex: 0 0 min(80%, 22rem);
	scroll-snap-align: start;
	background-color: var(--paper-000);
	border: 1px solid var(--line);
}

.event-dm__img {
	display: block;
	width: 100%;
	height: auto;
}

/* JS 有り：1 ページずつ表示する枠 */
.event-dm.is-enhanced .event-dm__pages {
	display: block;
	aspect-ratio: var(--event-dm-ratio, 1 / 1.414);
	padding: 0;
	overflow: hidden;
	background-color: var(--paper-000);
	border: 1px solid var(--line-strong);
}

.event-dm.is-enhanced .event-dm__page {
	width: 100%;
	height: 100%;
	border: 0;
	cursor: zoom-in;
}

.event-dm.is-enhanced .event-dm__page[hidden] {
	display: none;
}

.event-dm.is-enhanced .event-dm__img {
	height: 100%;
	object-fit: contain;
}

/* 前へ・ページ番号・次へ・拡大 */
.event-dm__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2xs) var(--sp-xs);
	margin-top: var(--sp-xs);
}

.event-dm__controls[hidden] {
	display: none;
}

.event-dm__nav,
.event-dm__zoom,
.event-dm__dialog-button {
	min-height: 2.75rem;
	padding: 0 var(--sp-sm);
	background-color: var(--paper-000);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-xs);
	color: var(--color-brand);
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.event-dm__nav:hover:not(:disabled),
.event-dm__nav:focus-visible,
.event-dm__zoom:hover,
.event-dm__zoom:focus-visible,
.event-dm__dialog-button:hover,
.event-dm__dialog-button:focus-visible {
	border-color: var(--color-brand);
	color: var(--accent-500);
}

.event-dm__nav:disabled {
	color: var(--ink-300);
	cursor: default;
}

.event-dm__counter {
	min-width: 4.5em;
	color: var(--ink-900);
	font-family: var(--font-num);
	font-weight: 700;
	text-align: center;
	letter-spacing: var(--ls-wide);
}

.event-dm__zoom {
	margin-left: auto;
}

/* サムネイル：1 行。はみ出す分はこの帯の中だけで横スクロール */
.event-dm__thumbs {
	display: flex;
	gap: var(--sp-2xs);
	margin: var(--sp-sm) 0 0;
	padding: 2px 2px var(--sp-2xs);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.event-dm__thumbs[hidden] {
	display: none;
}

.event-dm__thumb-item {
	flex: 0 0 auto;
}

.event-dm__thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3xs);
	width: 4rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ink-500);
	font: inherit;
	font-size: var(--fs-2xs);
	cursor: pointer;
}

.event-dm__thumb-img {
	display: block;
	width: 4rem;
	height: 5.25rem;
	object-fit: contain;
	background-color: var(--paper-000);
	border: 1px solid var(--line);
	opacity: 0.75;
}

.event-dm__thumb:hover .event-dm__thumb-img,
.event-dm__thumb:focus-visible .event-dm__thumb-img {
	opacity: 1;
	border-color: var(--color-brand);
}

/* 表示中のページ：枠を太く＋番号に下線（色だけで示さない） */
.event-dm__thumb[aria-current="true"] {
	color: var(--color-brand);
	font-weight: 700;
}

.event-dm__thumb[aria-current="true"] .event-dm__thumb-img {
	opacity: 1;
	outline: 2px solid var(--color-brand);
	outline-offset: 1px;
}

.event-dm__thumb[aria-current="true"] .event-dm__thumb-num {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* 拡大表示（<dialog>） */
.event-dm__dialog {
	width: min(100vw - 2rem, 64rem);
	max-width: none;
	height: calc(100dvh - 2rem);
	max-height: none;
	padding: 0;
	background-color: var(--paper-100);
	border: 1px solid var(--line-strong);
	color: var(--ink-900);
}

.event-dm__dialog::backdrop {
	background-color: rgba(0, 16, 28, 0.6);
}

.event-dm__dialog:fullscreen {
	width: 100vw;
	height: 100vh;
	border: 0;
}

.event-dm__dialog-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.event-dm__dialog-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2xs);
	padding: var(--sp-2xs) var(--sp-sm);
	background-color: var(--paper-000);
	border-bottom: 1px solid var(--line);
}

.event-dm__dialog-title {
	margin-right: auto;
	color: var(--color-brand);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.event-dm__dialog-counter {
	margin-left: var(--sp-xs);
	color: var(--ink-900);
	font-family: var(--font-num);
	letter-spacing: var(--ls-wide);
}

.event-dm__dialog-button[hidden] {
	display: none;
}

.event-dm__dialog-stage {
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--sp-sm);
	overflow: auto;
}

/* 画像は縦横どちらも画面内に収まる最大の大きさ（原寸より大きくはしない） */
.event-dm__dialog-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
	background-color: var(--paper-000);
}

.event-dm__dialog-nav {
	display: flex;
	justify-content: center;
	gap: var(--sp-sm);
	padding: var(--sp-2xs) var(--sp-sm);
	background-color: var(--paper-000);
	border-top: 1px solid var(--line);
}

.event-dm__dialog-nav .event-dm__nav {
	min-width: 7rem;
}

/* ==========================================================================
   詳細：案内DMビューワー（PHASE NEXT-20：デジタルカタログ型）
   ・ビューワーは中央に置く。1 ページ表示は最大 34rem、見開き（900px 以上・3 ページ以上の縦長資料）は最大 56rem
   ・見開きの枠は 2 ページ分の縦横比で固定（表紙だけの view でも枠の大きさは変えない＝CLS なし）
   ・左右の丸い矢印は枠の外側（PC）／内側の端（SP）。下の前へ／次へと同じ動作
   ・切り替えは軽い横スライドだけ（prefers-reduced-motion では無し）。3D のページめくりはしない
   ・透かしは CSS の重ね表示（画像には焼き込まない）。本文が読める薄さ
   ========================================================================== */

.event-dm__viewer {
	margin-inline: auto;
}

.event-dm.is-spread .event-dm__viewer {
	max-width: 56rem;
}

.event-dm__frame {
	position: relative;
}

/* 透かし（JS の有無にかかわらず表示） */
.event-dm__page {
	position: relative;
	overflow: hidden;
}

.event-dm__page::after,
.event-dm__dialog-stage::after {
	content: attr(data-watermark);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 暗いページでも明るいページでも見えるよう、白い文字に薄い濃紺の縁を付ける（どちらも本文より十分に薄く） */
	color: rgba(255, 255, 255, 0.2);
	text-shadow: 0 0 1px rgba(0, 23, 42, 0.35);
	font-size: clamp(0.875rem, 0.6rem + 1.4vw, 1.5rem);
	font-weight: 800;
	letter-spacing: 0.2em;
	white-space: nowrap;
	transform: rotate(-24deg);
	pointer-events: none;
}

.event-dm__dialog-stage {
	position: relative;
}

/* JS 有り：スワイプ中も縦スクロールはブラウザに任せる */
.event-dm.is-enhanced .event-dm__pages {
	touch-action: pan-y;
}

/* 見開き */
.event-dm.is-enhanced.is-spread .event-dm__pages {
	display: flex;
	justify-content: center;
	aspect-ratio: var(--event-dm-spread-ratio, 2 / 1.414);
}

.event-dm.is-enhanced.is-spread .event-dm__page {
	flex: 0 0 50%;
	width: 50%;
}

/* 見開きの綴じ目：細い線 1 本 */
.event-dm.is-enhanced.is-spread .event-dm__page.is-right {
	box-shadow: inset 1px 0 0 var(--line-strong);
}

/* 左右の矢印 */
.event-dm__side {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 2.75rem;
	height: 2.75rem;
	margin-top: -1.375rem;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	color: var(--color-brand);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.event-dm__side[hidden] {
	display: none;
}

.event-dm__side::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.6rem;
	height: 0.6rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.event-dm__side--prev {
	left: 0.5rem;
}

.event-dm__side--prev::before {
	transform: translate(-35%, -50%) rotate(-135deg);
}

.event-dm__side--next {
	right: 0.5rem;
}

.event-dm__side--next::before {
	transform: translate(-65%, -50%) rotate(45deg);
}

.event-dm__side:hover:not(:disabled),
.event-dm__side:focus-visible {
	border-color: var(--color-brand);
	color: var(--accent-500);
}

.event-dm__side:focus-visible {
	outline: 2px solid var(--accent-500);
	outline-offset: 2px;
}

.event-dm__side:disabled {
	opacity: 0.35;
	cursor: default;
}

/* PC：矢印は枠の外側に出す（ページの文字に重ねない） */
@media (min-width: 1060px) {

	.event-dm__side--prev {
		left: -3.75rem;
	}

	.event-dm__side--next {
		right: -3.75rem;
	}
}

/* ページ番号は中央、拡大は右端 */
.event-dm.is-enhanced .event-dm__controls {
	justify-content: center;
}

.event-dm.is-enhanced .event-dm__zoom {
	margin-left: var(--sp-sm);
}

/* 切り替え時の軽い横スライド */
@keyframes event-dm-turn-next {
	from {
		opacity: 0.35;
		transform: translateX(2.5%);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes event-dm-turn-prev {
	from {
		opacity: 0.35;
		transform: translateX(-2.5%);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {

	.event-dm__pages.is-turn-next .event-dm__page:not([hidden]) {
		animation: event-dm-turn-next 0.28s ease-out;
	}

	.event-dm__pages.is-turn-prev .event-dm__page:not([hidden]) {
		animation: event-dm-turn-prev 0.28s ease-out;
	}
}

/* 拡大表示：スワイプ中も縦スクロールはブラウザに任せる */
.event-dm__dialog-stage {
	touch-action: pan-y pinch-zoom;
}

/* ==========================================================================
   詳細：当日のプログラム（PHASE NEXT-18：タイムライン）
   左に縦の線と点。区分（講座1 等）・時刻 → タイトル → 説明 → 担当 の順に強弱をつける。
   ゲスト講演等（区分に「ゲスト」）は点を塗り、本文を薄灰の面にして自然に区別する。
   ========================================================================== */

.event-program {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.event-program::before {
	content: "";
	position: absolute;
	top: 0.6rem;
	bottom: 0.6rem;
	left: 0.5rem;
	width: 2px;
	background-color: var(--line-strong);
}

.event-program__item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-2xs);
	padding: 0 0 var(--sp-lg) 2.5rem;
}

.event-program__item:last-child {
	padding-bottom: 0;
}

@media (min-width: 700px) {

	.event-program__item {
		grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
		column-gap: var(--sp-lg);
		padding-left: 3rem;
	}
}

.event-program__node {
	position: absolute;
	top: 0.3rem;
	left: 0;
	width: 1.1rem;
	height: 1.1rem;
	border: 2px solid var(--color-brand);
	border-radius: 50%;
	background-color: var(--paper-000);
}

.event-program__when {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--sp-xs);
}

@media (min-width: 700px) {

	.event-program__when {
		flex-direction: column;
		gap: var(--sp-3xs);
	}
}

.event-program__time {
	color: var(--color-brand);
	font-family: var(--font-num);
	font-weight: 700;
	letter-spacing: var(--ls-wide);
}

.event-program__label {
	color: var(--color-brand);
	font-size: var(--fs-sm);
	font-weight: 700;
}

/* 時刻・区分が無い行でも本文の位置を揃える */
.event-program__body {
	grid-column: -2 / -1;
	min-width: 0;
}

.event-program__title {
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: var(--lh-snug);
	color: var(--ink-900);
	word-break: auto-phrase;
}

.event-program__desc {
	max-width: var(--w-text);
	margin-top: var(--sp-2xs);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color: var(--ink-700);
}

.event-program__person {
	margin-top: var(--sp-2xs);
	font-size: var(--fs-sm);
	color: var(--ink-700);
	word-break: auto-phrase;
}

/* ゲスト講演等 */
.event-program__item--guest .event-program__node {
	background-color: var(--accent-500);
	border-color: var(--accent-500);
	box-shadow: 0 0 0 4px var(--paper-000), 0 0 0 5px var(--accent-500);
}

.event-program__item--guest .event-program__label {
	color: var(--accent-500);
}

.event-program__item--guest .event-program__body {
	padding: var(--sp-md);
	background-color: var(--paper-200);
	border-left: 3px solid var(--accent-500);
}

/* ==========================================================================
   詳細：登壇者（PHASE NEXT-18）
   PC は 2 列の紹介ブロック（白地・上辺の濃紺の罫）。写真は登録されているときだけ出す。
   ========================================================================== */

.event-speakers {
	display: grid;
	gap: var(--sp-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {

	.event-speakers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-lg);
	}
}

.event-speaker {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	gap: var(--sp-sm);
	padding: var(--sp-md) var(--sp-md) var(--sp-lg);
	background-color: var(--paper-000);
	border-top: 3px solid var(--color-brand);
}

.event-speaker--no-photo {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {

	.event-speaker {
		grid-template-columns: 6rem minmax(0, 1fr);
		gap: var(--sp-md);
		padding: var(--sp-lg);
	}

	.event-speaker--no-photo {
		grid-template-columns: minmax(0, 1fr);
	}
}

.event-speaker__photo {
	aspect-ratio: 1 / 1;
	background-color: var(--paper-200);
	border-radius: var(--r-xs);
	overflow: hidden;
}

.event-speaker__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.event-speaker__body {
	min-width: 0;
}

.event-speaker__name {
	font-size: var(--fs-xl);
	font-weight: 800;
	line-height: var(--lh-tight);
	color: var(--ink-900);
}

.event-speaker__affiliation {
	margin-top: var(--sp-2xs);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-brand);
}

.event-speaker__profile {
	margin-top: var(--sp-sm);
	padding-top: var(--sp-sm);
	border-top: 1px solid var(--line);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color: var(--ink-700);
}

/* ==========================================================================
   詳細：開催概要（PHASE NEXT-18）
   意味の決まった線画アイコン＋項目名＋値の小さな情報ブロック。値の無い項目は出さない。
   ========================================================================== */

.event-summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-sm);
	margin: 0;
}

@media (min-width: 700px) {

	.event-summary {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		gap: var(--sp-md);
	}
}

.event-summary__row {
	padding: var(--sp-md);
	background-color: var(--paper-000);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-xs);
}

.event-summary__label {
	display: flex;
	align-items: center;
	gap: var(--sp-2xs);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--ink-500);
}

.event-summary__icon {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--color-brand);
}

.event-summary__value {
	margin: var(--sp-2xs) 0 0;
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: var(--lh-snug);
	color: var(--ink-900);
	overflow-wrap: anywhere;
}

/* ==========================================================================
   詳細：このテーマを動画でも見る（関連 YouTube）
   ・サムネイル（メディアライブラリの画像）を主役にし、カードの枠・影・角丸の強調は付けない
   ・1 本は大きく 1 枚、2 本は横並び、3 本は 1 本目を大きく左・2〜3 本目を右に縦積み（700px 以上）
   ・SP（700px 未満）は 1 列
   ・枠は 16:9 固定。クリック後の iframe も同じ枠に収め、高さを変えない（CLS なし）
   ========================================================================== */

.event-videos__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.event-videos__list--1 {
	max-width: 48rem;
}

@media (min-width: 700px) {

	.event-videos__list--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--sp-lg);
	}

	.event-videos__list--3 {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		column-gap: var(--sp-lg);
		align-items: start;
	}

	.event-videos__list--3 .event-video:first-child {
		grid-row: 1 / span 2;
	}
}

.event-video {
	min-width: 0;
}

.event-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--paper-200);
	border: 1px solid var(--line);
	overflow: hidden;
}

.event-video__play {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.event-video__play:disabled {
	cursor: default;
}

.event-video__thumb,
.event-video__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.event-video__thumb {
	object-fit: cover;
}

/* 再生の目印：左下の小さなラベル（三角＋「再生」）。JS が無くボタンが押せないときは出さない */
.event-video__badge {
	position: absolute;
	left: var(--sp-xs);
	bottom: var(--sp-xs);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2xs);
	min-height: 2.75rem;
	padding: 0 var(--sp-sm);
	background-color: var(--color-brand);
	color: var(--ink-000);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: var(--ls-wide);
}

.event-video__badge::before {
	content: "";
	width: 0;
	height: 0;
	border-top: 0.4em solid transparent;
	border-bottom: 0.4em solid transparent;
	border-left: 0.65em solid currentColor;
}

.event-video__play:disabled .event-video__badge {
	display: none;
}

.event-video__play:hover:not(:disabled) .event-video__badge,
.event-video__play:focus-visible .event-video__badge {
	background-color: var(--accent-500);
}

.event-video__play:focus-visible {
	outline: 2px solid var(--accent-500);
	outline-offset: -2px;
}

.event-video__title {
	margin-top: var(--sp-2xs);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: var(--lh-snug);
	color: var(--ink-900);
	word-break: auto-phrase;
}

/* ==========================================================================
   詳細：申込ボタン（FV）とお申し込み（最下部）
   ・FV と最下部の 2 か所だけ。行き先は同じ（form: #event-application / external: 外部 URL）
   ・最下部は download のフォーム欄と同じ「グレーの帯＋上下の罫線」。白い大きな角丸カードにしない
   ・フォーム項目は既存の .form-page（components.css）をそのまま使う
   ========================================================================== */

.event-hero__action {
	margin-top: var(--sp-md);
}

.event-hero__cta,
.event-entry__cta {
	width: 100%;
}

@media (min-width: 500px) {

	.event-hero__cta,
	.event-entry__cta {
		width: auto;
		min-width: 20rem;
	}
}

.event-entry {
	margin-top: var(--sp-lg);
	padding: var(--sp-xl) 0;
	background-color: var(--paper-200);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	scroll-margin-top: var(--sp-lg);
}

@media (min-width: 700px) {

	.event-entry {
		padding: var(--sp-2xl) 0;
	}
}

.event-entry__inner {
	width: 100%;
	max-width: var(--w-text);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.event-entry__title {
	font-size: var(--fs-lg);
	color: var(--color-brand);
}

/* 申込内容の確認（イベント名・開催日・参加費） */
.event-entry__target {
	margin: var(--sp-md) 0 0;
	padding: var(--sp-xs) var(--sp-sm);
	background-color: var(--paper-000);
	border-left: 3px solid var(--color-brand);
	font-size: var(--fs-sm);
}

.event-entry__target-row {
	display: grid;
	grid-template-columns: 4.5em minmax(0, 1fr);
	gap: var(--sp-xs);
	padding: var(--sp-3xs) 0;
}

.event-entry__target dt {
	color: var(--ink-500);
	font-weight: 700;
}

.event-entry__target dd {
	margin: 0;
	color: var(--ink-900);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.event-entry__form {
	margin-top: var(--sp-md);
}

.event-entry__form .wpcf7-form p:first-child {
	margin-top: 0;
}

/* 同意のチェックボックスを指で押しやすい大きさに（文言側の label もタップ可能。イベントのフォームだけに限定） */
.event-entry__form input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin-right: var(--sp-3xs);
	vertical-align: -0.2em;
}

.event-entry__action {
	margin-top: var(--sp-lg);
}

.event-entry__external-note {
	margin-top: var(--sp-2xs);
	font-size: var(--fs-xs);
	color: var(--ink-500);
}

.event-entry__notes {
	margin: var(--sp-md) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-xs);
	line-height: var(--lh-normal);
	color: var(--ink-700);
}

.event-entry__notes li::before {
	content: "※";
	margin-right: 0.25em;
}

/* ==========================================================================
   詳細：一覧へ戻る
   ========================================================================== */

.event-single .entry-back {
	margin-top: var(--sp-lg);
	margin-bottom: var(--sp-2xl);
}

/* ==========================================================================
   詳細：申込までの流れ（PHASE NEXT-17 / NEXT-18）
   ========================================================================== */

/* FV の申込ボタン（白の帯の右側）と、その直下の条件の要点（外装NEXT のみ出力） */
.event-hero__bar .event-hero__action {
	margin-top: 0;
}

.event-hero__cta-note {
	margin-top: var(--sp-xs);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	color: var(--ink-700);
	word-break: auto-phrase;
}

/* お申し込み：英字ラベル・見出し・冒頭の一文 */
.event-entry__eyebrow {
	margin-bottom: var(--sp-2xs);
}

.event-entry .event-entry__title {
	font-size: var(--fs-2xl);
	font-weight: 800;
}

.event-entry__lead {
	margin-top: var(--sp-xs);
	font-size: var(--fs-md);
	line-height: var(--lh-normal);
	color: var(--ink-700);
}

/* 申込内容の確認：長いイベント名が 1 文字だけ次行に残らないよう文節で折り返す */
.event-entry__target dd {
	word-break: auto-phrase;
}

/* お申し込み前にご確認ください：入力欄の前に置く重要事項（青系の控えめな枠） */
.event-entry__important {
	margin-top: var(--sp-md);
	padding: var(--sp-sm) var(--sp-md);
	background-color: var(--paper-000);
	border: 1px solid var(--line-strong);
	border-top: 3px solid var(--color-brand);
}

.event-entry__important-title {
	font-size: var(--fs-base);
	color: var(--color-brand);
}

.event-entry__important .event-entry__notes {
	margin-top: var(--sp-2xs);
	font-size: var(--fs-sm);
	color: var(--ink-900);
}

.event-entry__important .event-entry__notes li + li {
	margin-top: var(--sp-3xs);
}

/* ==========================================================================
   詳細：図解「このイベントで考えること」（PHASE NEXT-19）
   上に中心のテーマ（濃紺）、線でつないだ下に領域（線画＋領域名＋ひとこと）。カードにはしない。
   ・PC（700px 以上）… テーマから下へ 1 本、横に分かれて各領域へ（2〜4 つを横並び）
   ・SP（700px 未満）… テーマから左の縦線を下ろし、各領域へ枝分かれ（縦並び）
   線は関係を示すためだけに使う。領域の数は --event-map-count（map.php が出力）で受け取る。
   ========================================================================== */

.event-map {
	--event-map-stem: var(--sp-lg);
	--event-map-line: var(--line-strong);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.event-map__hub {
	position: relative;
	margin: 0;
	padding: var(--sp-sm) var(--sp-xl);
	background-color: var(--navy-800);
	border-radius: var(--r-xs);
	color: var(--ink-000);
	font-size: var(--fs-xl);
	font-weight: 800;
	line-height: var(--lh-tight);
	letter-spacing: 0.02em;
	text-align: center;
	word-break: auto-phrase;
}

/* テーマから下へ伸びる線 */
.event-map__hub::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 2px;
	height: var(--event-map-stem);
	margin-left: -1px;
	background-color: var(--event-map-line);
}

.event-map__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--event-map-count, 3), minmax(0, 1fr));
	width: 100%;
	margin: var(--event-map-stem) 0 0;
	padding: 0;
	list-style: none;
}

/* 横に分かれる線（両端の領域の中心から中心まで） */
.event-map__list::before {
	content: "";
	position: absolute;
	top: 0;
	right: calc(100% / (var(--event-map-count, 3) * 2));
	left: calc(100% / (var(--event-map-count, 3) * 2));
	height: 2px;
	background-color: var(--event-map-line);
}

.event-map__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--event-map-stem) var(--sp-sm) 0;
	text-align: center;
}

/* 横の線から各領域へ下りる線 */
.event-map__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: var(--event-map-stem);
	margin-left: -1px;
	background-color: var(--event-map-line);
}

.event-map__figure {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 6rem;
	height: 6rem;
	padding: 1.3rem;
	background-color: var(--paper-000);
	border: 2px solid var(--color-brand);
	border-radius: 50%;
	color: var(--color-brand);
}

.event-map__text {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3xs);
	margin-top: var(--sp-sm);
	min-width: 0;
}

.event-map__label {
	font-size: var(--fs-lg);
	font-weight: 800;
	line-height: var(--lh-snug);
	color: var(--ink-900);
	word-break: auto-phrase;
}

.event-map__note {
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: var(--lh-snug);
	color: var(--color-brand);
	word-break: auto-phrase;
}

/* SP：左の縦線から枝分かれする縦並び */
@media (max-width: 699.98px) {

	.event-map {
		--event-map-rail: 1.75rem; /* 線画の丸（3.5rem）の中心 */
		align-items: stretch;
	}

	.event-map__hub {
		align-self: flex-start;
		padding: var(--sp-xs) var(--sp-md);
		font-size: var(--fs-lg);
		text-align: left;
	}

	.event-map__hub::after {
		left: var(--event-map-rail);
	}

	.event-map__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.event-map__list::before {
		content: none;
	}

	.event-map__item {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--sp-sm);
		padding: 0 0 var(--sp-md);
		text-align: left;
	}

	.event-map__item:last-child {
		padding-bottom: 0;
	}

	/* 縦線：各領域の上端から下端まで。最後の領域は丸の中心で止める */
	.event-map__item::before {
		bottom: 0;
		left: var(--event-map-rail);
		height: auto;
	}

	.event-map__item:last-child::before {
		bottom: auto;
		height: var(--event-map-rail);
	}

	.event-map__figure {
		width: 3.5rem;
		height: 3.5rem;
		padding: 0.7rem;
	}

	.event-map__text {
		margin-top: 0;
		padding-top: 0.45rem;
	}
}

/* 線画が未選択の領域：丸だけを残して位置を揃える */
.event-map__figure--empty {
	border-style: dashed;
	border-color: var(--line-strong);
}

/* ==========================================================================
   詳細：外装NEXTを、まず1回体験してください（PHASE NEXT-20）
   申込の直前の濃紺の帯。写真＋見出し・説明 → 要点 3 つ（線画アイコン）→ 申込ボタン。
   要点はカードにせず、上の細い罫で区切った 3 列（SP は縦並び）。
   ========================================================================== */

.event-trial__grid {
	display: grid;
	gap: var(--sp-lg);
}

@media (min-width: 900px) {

	.event-trial__grid--media {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--sp-2xl);
		align-items: center;
	}
}

.event-trial__media {
	margin: 0;
}

.event-trial__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-xs);
}

.event-trial__caption {
	margin-top: var(--sp-2xs);
	font-size: var(--fs-2xs);
	color: rgba(255, 255, 255, 0.72);
}

.event-trial .event-head {
	margin-bottom: var(--sp-md);
}

.event-trial .section-head__title {
	word-break: auto-phrase;
}

.event-trial__text {
	max-width: 36em;
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: rgba(255, 255, 255, 0.86);
}

.event-trial__text + .event-trial__text {
	margin-top: var(--sp-sm);
}

.event-trial__more {
	margin-top: var(--sp-md);
}

.event-trial__more .link-arrow {
	color: var(--accent-200);
}

.event-trial__points {
	display: grid;
	gap: var(--sp-lg);
	margin: var(--sp-xl) 0 0;
	padding: var(--sp-lg) 0 0;
	border-top: 1px solid var(--line-on-dark-strong);
	list-style: none;
}

@media (min-width: 700px) {

	.event-trial__points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--sp-xl);
	}
}

.event-trial__point {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	column-gap: var(--sp-sm);
	align-items: start;
}

.event-trial__icon {
	grid-row: 1 / span 2;
	width: 3rem;
	height: 3rem;
	padding: 0.6rem;
	border: 1px solid var(--line-on-dark-strong);
	border-radius: 50%;
	color: var(--bronze-300);
}

.event-trial__point-title {
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: 800;
	line-height: var(--lh-snug);
	color: var(--ink-000);
	word-break: auto-phrase;
}

.event-trial__point-body {
	margin-top: var(--sp-3xs);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color: rgba(255, 255, 255, 0.8);
}

.event-trial__action {
	margin-top: var(--sp-xl);
}