@charset "utf-8";

main {
	position: relative;
	z-index: 0;

	&::before {
		background: #025CBC;
		background: linear-gradient(180deg, rgba(2, 92, 188, 1) 0%, rgba(255, 255, 255, 1) 100%);
		content: "";
		display: block;
		height: 2736px;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: -1;
	}
}


#klis-x {
	color: #02236f;

	div, p, li, th, td, h2, h3, a {
		font-family: "Noto Sans JP", sans-serif;
	}
}


#klis-x_keyvisual {
	background-color: #02236f;
	background-image: url(../img/pattern_kv.webp);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: contain;
	padding: 85px 80px 570px;

	h1 {
		margin-bottom: 75px;
		text-align: center;
	}

	.lead {
		color: #ffffff;
		font-size: 22px;
		line-height: 1.8;
		text-align: center;
	}

	.button {
		display: flex;
		justify-content: center;
		margin-top: 50px;
	}
}


#klis-x_eventoutline {
	background-color: #f1f3f7;
	padding: 55px 50px 50px;

	table {
		width: 100%;

		tr {
			th, td {
				border-top: 1px solid #c6ced5;
				box-sizing: border-box;
				line-height: 1.6;
			}

			th {
				font-size: 22px;
				padding: 14px 20px;
				vertical-align: top;
				width: 190px;
			}

			td {
				font-size: 16px;
				padding: 14px 20px 14px 0;
				vertical-align: middle;
			}

			&:first-child {
				th, td {
					border-top: none;
				}
			}
		}
	}

	.button {
		display: flex;
		justify-content: center;
		margin-top: 45px;
	}
}


#klis-x_eventtimeline {
	background-color: #ffffff;
	padding: 55px 50px 60px;
}


#klis-x_speakers {
	background-color: #f1f3f7;
	padding: 72px 50px 70px;
}


#klis-x_partners {
	background-color: #ffffff;
	padding: 50px 40px 70px;
}


.klis-x_button {
	align-items: center;
	background-color: #02236f;
	border-radius: 9999px;
	color: #ffffff;
	display: flex;
	font-size: 22px;
	font-weight: 500;
	height: 50px;
	justify-content: center;
	line-height: 1;
	padding: 0 25px;
	transition: all 0.3s ease;
	width: max-content;

	&:hover {
		background-color: #02fd72;
		color: #02236f;
	}

	&[data-design="theme"] {
		background-color: #02fd72;
		color: #02236f;

		&:hover {
			background-color: #ffffff;
		}
	}
}


.klis-x_cvFooter {
	background-color: #02236f;
	display: flex;
	justify-content: center;
	padding: 25px;
}


.klis-x_heading {
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
}


.klis-x_profile {
	display: flex;
	gap: 40px;

	> div {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.name {
		font-size: 22px;
		line-height: 1;
	}

	.title {
		font-size: 16px;
		line-height: 1.18;
	}

	.bio {}

	.biography {
		font-size: 13px;
	}
}


.klis-x_listEvent {
	.article {
		display: flex;

		& + .article {
			border-top: 1px solid #c6ced5;
			margin-top: 30px;
			padding-top: 30px;
		}

		.time {
			flex-shrink: 0;
			font-size: 22px;
			width: 200px;
		}

		.wrap {
			display: flex;
			flex-direction: column;
			gap: 15px;

			.cat {
			}

			.heading {
				font-size: 26px;
				line-height: 1.18;
			}

			.text {
				font-size: 15px;
			}

			.grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: repeat(2, 1fr);
				grid-column-gap: 30px;
				grid-row-gap: 35px;
				margin-top: 15px;

				.klis-x_profile {
					gap: 16px;

					.title {
						font-size: 12px;
					}
				}
			}
		}
	}
}


.klis-x_listSpeaker {
	.klis-x_profile {
		gap: 60px;
		padding-left: 20px;

		& + .klis-x_profile {
			border-top: 1px solid #c6ced5;
			margin-top: 36px;
			padding-top: 36px;
		}
	}
}


.klis-x_listPartners {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, auto);
	grid-column-gap: 17px;
	grid-row-gap: 30px;

	h3 {
		align-items: center;
		display: flex;
		font-size: 20px;
		font-weight: 500;
		gap: 10px;
		margin-bottom: 20px;

		&::before {
			background-color: #02fd72;
			content: "";
			display: block;
			height: 19px;
			transform: skewX(-15deg);
			width: 5px;
		}
	}

	ul {
		display: grid;

		li {}
	}

	.organizer {
		grid-area: 1 / 1 / 2 / 2;

		h3 {
			font-size: 18px;
		}

		ul {
			gap: 16px;
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.partner {
		grid-area: 1 / 2 / 2 / 3;

		h3 {
			font-size: 18px;
		}

		ul {
			gap: 16px;
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.sponsor {
		grid-area: 2 / 1 / 3 / 3;

		ul {
			gap: 15px 18px;
			grid-template-columns: repeat(5, 1fr);
		}
	}
}

html {
  scroll-behavior: smooth;
}