@charset "utf-8";

.sponly {
	display: none;
}

.event_main_flex {
	display: flex;
	gap: 4%;
	align-items: flex-start;
}

.event_left_col {
	flex: 0 1 clamp(200px, 30%, 360px); 
	width: 100%;
}

.event_image img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2; /* 一覧と比率を統一 */
		object-fit: cover;
		border-radius: 12px;
}

.event_action_area {
	margin-top: 20px;
}
.event_action_area a {
	margin: 60px auto 20px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	max-width: 460px;
	height: 57px;
	background-color: var(--color-wh);
	border: 1px solid var(--color-bk);
	border-radius: 50px;
	text-decoration: none;
	color: var(--color-bk);
	font-weight: var(--fw-bold);
	font-size: var(--fz-20);
	line-height: 1.3;
	padding: 0 50px 0 20px;
	transition: background-color 0.3s;
	margin-bottom: 20px;
}
.event_action_area a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 55px;
	background: var(--color-org);
	border-radius: 50%;
	background-image: url(../../images/common/icon_arrow.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30%;
}
.event_action_area a:hover {
	background-color: var(--color-beg5);
}




.event_info_box {
	flex: 1;
	width: 100%;
}

.cat-label {
	font-size: var(--fz-13);
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
}

.cat-label.subject_session {
	background: #69b99f;
	color: var(--color-wh);
}
.cat-label.experience_session {
	background: #1c96d4;
	color: var(--color-wh);
}
.cat-label.night_session {
	background: #1d4da0;
	color: var(--color-wh);
}
.cat-label.exam_advice {
	background: #e83820;
	color: var(--color-wh);
}
.cat-label.weekend_session {
	background: #ed8000;
	color: var(--color-wh);
}


.event_info_box h3 {
	font-size: var(--fz-24);
	font-weight: var(--fw-bold);
	line-height: 1.4;
	margin-bottom: 0;
	color: var(--color-bk);
}

.event_info_box .event-date {
	font-size: var(--fz-20);
	font-weight: var(--fw-bold);
	margin-bottom: 5px;
}

.event_description {
	font-size: var(--fz-15);
	font-weight: var(--fw-bold);
	line-height: 1.6;
}


/* 受付終了時のスタイル */
.btn_full_status {
		text-align: center;
		padding: 15px;
		background: #eee;
		border-radius: 10px;
		color: #666;
		font-weight: var(--fw-bold);
}

/* --- 下部エリア（区切り線と戻るボタン） --- */
.event_sep {
		border: none;
		border-top: 1px solid #ccc;
		margin: 60px 0;
}

.event_back_area {
		display: flex;
		justify-content: center;
		border-top: 1px solid var(--color-bk);
		margin-top: 50px;
		padding-top: 50px;
}

.event_back_area a {
	margin: 60px auto 20px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	max-width: 460px;
	height: 57px;
	background-color: var(--color-wh);
	border: 1px solid var(--color-bk);
	border-radius: 50px;
	text-decoration: none;
	color: var(--color-bk);
	font-weight: var(--fw-bold);
	font-size: var(--fz-20);
	line-height: 1.3;
	padding: 0 50px 0 20px;
	transition: background-color 0.3s;
	margin-bottom: 20px;
}
.event_back_area a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 55px;
	background: var(--color-org);
	border-radius: 50%;
	background-image: url(../../images/common/icon_arrow.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30%;
}
.event_back_area a:hover {
	background-color: var(--color-beg5);
}





/* /////////////////////////// */
/* /////////////////////////// */
/* /////////////////////////// */
/* スマホ用 */
@media (max-width:769px) {

	.event_main_flex {
		flex-direction: column;
		gap: 30px;
	}

	.event_info_box .event-date {
		font-size: var(--fz-20);
	}

	.sponly {
		display: block;
	}
	.pconly {
		display: none;
	}


}