/**
 * 説明会・イベントページの参加までの流れ、注意事項、補助案内を管理する。
 *
 * イベント概要・日程・体験内容とは責務を分離し、この領域の基底表示だけを定義する。
 * 画面幅による列数や並び替えはassets/css/pages/admissions/briefing/responsive.cssへ集約する。
 */

/**
 * 1.0 説明会参加までの流れ
 *
 * 申込み、確認、参加までを番号付きステップで示し、初めての参加者でも手順を追えるようにする。
 */

.join-flow {
	padding: 108px 0 116px;
	background: #ffffff;
	border-top: 1px solid rgba(239, 120, 188, 0.5);
	border-bottom: 1px solid rgba(239, 120, 188, 0.5);
}

.join-flow > .container {
	position: relative;
	overflow: hidden;
	padding: 68px 52px 54px;
	background: radial-gradient(circle at 10% 16%,
		 rgba(239,
		 120,
		 188,
		 0.12),
		 transparent 17%),
		 radial-gradient(circle at 92% 12%,
		 rgba(86,
		 209,
		 202,
		 0.08),
		 transparent 16%),
		 linear-gradient(145deg,
		 rgba(255,
		 255,
		 255,
		 0.72),
		 rgba(239,
		 120,
		 188,
		 0.12));
	border: 1px solid rgba(239, 120, 188, 0.3);
	border-radius: 32px;
	box-shadow: 0 26px 70px rgba(158, 83, 105, 0.08);
}

.join-flow .events-section-head {
	position: relative;
	z-index: 1;
	margin-bottom: 52px;
}

.join-flow__list {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	list-style: none;
}

.join-flow__step {
	position: relative;
	min-width: 0;
	min-height: 370px;
	padding: 30px 28px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: inherit;
	text-align: center;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(239, 120, 188, 0.2);
	border-radius: 24px;
	box-shadow: 0 18px 44px rgba(158, 83, 105, 0.08);
	transition:
		transform var(--shs-hover-lift-duration) var(--shs-hover-lift-ease),
		box-shadow var(--shs-hover-lift-duration) var(--shs-hover-lift-ease),
		border-color var(--shs-hover-lift-duration) var(--shs-hover-lift-ease);
}

.join-flow__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -22px;
	width: 0;
	height: 0;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 14px solid #ef78bc;
	transform: translateY(-50%);
	filter: drop-shadow(0 5px 8px rgba(158, 83, 105, 0.12));
	transition: transform 0.25s ease;
}

.join-flow__step:hover {
	transform: translateY(var(--shs-hover-card-lift-distance));
	border-color: rgba(239, 120, 188, 0.5);
	box-shadow: 0 24px 54px rgba(158, 83, 105, 0.13);
}

.join-flow__step:hover:not(:last-child)::after {
	transform: translate(4px, -50%);
}

.join-flow__icon {
	position: relative;
	width: 104px;
	height: 104px;
	margin: 0 auto 24px;
	display: grid;
	place-items: center;
	color: #ef78bc;
	background: #ffffff;
	border: 2px solid rgba(239, 120, 188, 0.34);
	border-radius: 50%;
	box-shadow: 0 12px 28px rgba(158, 83, 105, 0.08);
	transition:
		transform var(--shs-hover-lift-duration) var(--shs-hover-lift-ease),
		box-shadow var(--shs-hover-lift-duration) var(--shs-hover-lift-ease);
}

.join-flow__icon::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: conic-gradient( from 310deg, #56d1ca 0 58deg, transparent 58deg 360deg );
	-webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px) );
	mask: radial-gradient( farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px) );
	transform: rotate(0deg);
	transform-origin: center;
	transition: transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}

.join-flow__icon::after {
	content: "";
	position: absolute;
	inset: 9px;
	background: rgba(239, 120, 188, 0.045);
	border: 1px solid rgba(239, 120, 188, 0.16);
	border-radius: 50%;
}

.join-flow__step:hover .join-flow__icon {
	transform: translateY(-3px);
	box-shadow: 0 18px 34px rgba(158, 83, 105, 0.13);
}

.join-flow__step:hover .join-flow__icon::before {
	transform: rotate(92deg);
}

.join-flow__icon svg {
	position: relative;
	z-index: 1;
	width: 42px;
	height: 42px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.45;
}

.join-flow__number {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #ef78bc;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 27px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-align: center;
}

.join-flow__number::before {
	content: "STEP";
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.join-flow h3 {
	width: 100%;
	min-height: 58px;
	margin: 14px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #9e5369;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.03em;
}

.join-flow h3::after {
	content: "";
	width: 34px;
	height: 2px;
	margin-top: 14px;
	border-radius: 999px;
	background: #ef78bc;
}

.join-flow p {
	margin: 20px auto 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.85;
}

/**
 * 2.0 参加前の注意事項
 *
 * 持ち物や当日の注意点をアイコン付きでまとめ、申込み後に確認すべき情報をページ末尾へ集約する。
 */

.event-notes {
	padding: 72px 0 90px;
	background: #fff;
}

.event-notes__panel {
	display: grid;
	gap: 34px;
	padding: 42px 46px 46px;
	background: linear-gradient(135deg, rgba(239, 120, 188, 0.06), rgba(255, 255, 255, 0.94));
	border: 1px solid rgba(239, 120, 188, 0.30);
	border-radius: 26px;
	box-shadow: 0 20px 48px rgba(158, 83, 105, 0.08);
}

.event-notes__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.event-notes__head .eyebrow {
	margin: 0 0 12px;
	color: #ef78bc;
}

.event-notes h2 {
	margin: 0;
	color: #9e5369;
	font-family: "Yu Mincho", serif;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.06em;
}

.event-notes__head .accent-line {
	width: 48px;
	height: 2px;
	margin-top: 20px;
	background: #ef78bc;
	border-radius: 999px;
}

.event-notes ul {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	list-style: none;
}

.event-notes li {
	min-height: 126px;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	align-items: center;
	gap: 18px;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid rgba(239, 120, 188, 0.28);
	border-radius: 18px;
	box-shadow: 0 12px 26px rgba(158, 83, 105, 0.05);
}

.event-notes__icon {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	color: #ef78bc;
	background: rgba(239, 120, 188, 0.07);
	border-radius: 50%;
}

.event-notes__icon .material-symbols-outlined {
	font-size: 28px;
	line-height: 1;
	font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

.event-notes li h3 {
	margin: 0;
	color: #9e5369;
	font-family: "Yu Mincho", serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.event-notes li p {
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.8;
}