@charset "utf-8";

h2 {
	margin-bottom: 16px;
	padding-top: 32px;
}




/* activities */

.activity {
	padding: 32px;
	background-image: url(../img/bg-act.svg);
	background-size: 64px;
	background-repeat: repeat;
}

.activity__h2 {
	padding-bottom: 16px;
}

.activity__h2 img {
	width: 160px;
	height: auto;
}

.activity__container {
	width: calc(100% - 32px);
	max-width: 750px;
	margin: 0 auto 64px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.activity__timeline {
	position: relative;
}

.activity__timeline::before {
	position: absolute;
	top: 0;
	left: 16px;
	width: 8px;
	height: calc(100% - 16px);
	content: '';
	background: #f4b095;
}

.activity__timeline-group {
	position: relative;
	padding-top: 16px;
	margin-bottom: 40px;
}

.activity__timeline-hour {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.5rem 1.5rem;
	color: #fff;
	background: url(../img/activity__timeline-hour.png) #66ccff;
	font-size: 16px;
	border-radius: 16px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 95%;
}

.activity__timeline-item {
	padding-top: 64px;
	padding-left: 36px;
}

.activity__timeline-pc {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.pc__time1,
.pc__time2,
.pc__time3,
.pc__time4,
.pc__time5 {
	filter: drop-shadow(10px 10px 5px rgb(91, 122, 142));
}

.activity__timeline-item-desc {
	background: #fff;
	border: 4px solid #f4b095;
	border-radius: 8px;
	padding: 16px 24px;
	max-width: 90%;
	position: relative;
	width: 24em;
}

.activity__timeline-item-desc::before {
	content: '';
	width: 0;
	height: 0;
	border: 16px solid transparent;
	position: absolute;
	top: calc(50% - 16px);
	left: -32px;
	border-right-color: #f4b095;
}

.activity__timeline-item-act li::before {
	content: '\02749';
	color: var(--brand-color);
}

.activity__timeline-item-act {
	margin: 0;
	padding: 0;
	line-height: 1.8;
}

.activity__timeline-item-desc.act1 {
	background: url(../img/activity__timeline-item-act1.png) top 12px right 16px / 80px no-repeat white;
}

.activity__timeline-item-desc.act2 {
	background: url(../img/activity__timeline-item-act2.png) top 24px right 16px / 80px no-repeat white;
}

.activity__timeline-item-desc.act3 {
	background: url(../img/activity__timeline-item-act3.png) top 36px right 16px / 80px no-repeat white;
}

.activity__timeline-item-desc.act4 {
	background: url(../img/activity__timeline-item-act4.png) top 24px right 16px / 80px no-repeat white;
}

.sp__time1,
.sp__time2,
.sp__time3,
.sp__time4,
.sp__time5 {
	display: none;
}



/* event */

.activity__events {
	display: flex;
	justify-content: center;
	margin: 0 auto;
	position: relative;
	background: var(--bg-color-beige);
}

.activity__events::before {
	content: '';
	background: url(../img/bg_beige_before.png) center/cover;
	width: 100%;
	height: 32px;
	position: absolute;
	top: -31px;
	left: 0;
}

.activity__events__event {
	flex-basis: auto;
	font-size: 17px;
	padding-bottom: 32px;
}

.activity__events__h2 {
	padding-bottom: 16px;
}

.activity__events__h2 img {
	width: 160px;
	height: auto;
}

.activity__events__event__table {
	display: flex;
	max-width: 1800px;
	margin: 0 auto;
}

.activity__events__bg-l {
	flex: 1;
	background: url(../img/bg-event-l.png) center / 120px no-repeat;
}

.activity__events__bg-r {
	flex: 1;
	background: url(../img/bg-event-r.png) center / 120px no-repeat;
}

/* table */

.activity__table {
	border-collapse: collapse;
	/* width: 90%;
	max-width: 900px; */
	margin: 0 auto;
}

.activity__table tr {
	display: table-row;
}

.activity__table td {
	/* width: 33%; */
	display: table-cell;
	padding: 8px 16px;
	text-align: left;
	color: #666;
}

.activity__table td:first-child {
	padding-left: 0;
}

.activity__table td:last-child {
	padding-right: 0;
}

.activity__table td::before {
	content: '\02749';
	color: var(--brand-color)
}



/* small screen */

@media (max-width: 767px) {

	.activity {
		padding: 8px 0 32px 0;
	}

	.activity__timeline-pc {
		display: none;
	}

	.activity__container {
		display: block;
		width: 100%;
		max-width: 370px;
		margin: 0 auto;
	}

	/* .activity__timeline-group {
		margin-bottom: 64px;
	} */

	.activity__timeline-hour {
		width: 100%;
		max-width: 370px;
	}

	.activity__timeline-item-desc.act1,
	.activity__timeline-item-desc.act2,
	.activity__timeline-item-desc.act3,
	.activity__timeline-item-desc.act4 {
		background: white;
	}

	.sp__time1,
	.sp__time2,
	.sp__time3,
	.sp__time4,
	.sp__time5 {
		display: block;
		margin-top: 8px;
		margin-left: 0;
	}

	.sp__time1>img,
	.sp__time2>img,
	.sp__time3>img,
	.sp__time4>img,
	.sp__time5>img {
		width: 100%;
		max-width: 300px;
		height: auto;
		filter: drop-shadow(10px 10px 5px rgb(91, 122, 142));
	}

	/* event */

	.activity {
		padding-bottom: 80pt;
	}

	.activity__events__event {
		flex-basis: 20em;
	}

	.activity__events__bg-l,
	.activity__events__bg-r {
		display: none;
	}

	/* .events__event-item {
		background: url(../img/bg-event-sp.png) right 0 / 160px no-repeat;
	} */

	/* table */

	.activity__table {
		width: 80%;
		max-width: 280px;
		margin: 0 auto;
	}

	.activity__table tr {
		display: block;
	}

	.activity__table td {
		/* width: 90%; */
		padding: 8px 0;
		display: block;
	}

}