@charset "utf-8";

.top-mv {
	height: 880px;
	background-color: #ccc;
	background: url("../img/top/top-mv.webp") no-repeat top center / cover #ccc;
	overflow: hidden;
	position: relative;

	>.inner {
		max-width: 1300px;
		margin: 120px auto 0;
		height: calc(100% - 120px);
		position: relative;
		color: var(--color-white);
		font-family: var(--font-serif);
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		z-index: 5;
	}
}

@media screen and (max-width: 1100px) {
	.top-mv {
		height: 85vw;
	}
}

@media screen and (max-width: 767px) {
	.top-mv {
		background: url("../img/top/top-mv_sp.webp") no-repeat top center / cover #ccc;

		>.inner {
			height: calc(100% - 64px);
			margin: 64px auto 0;
		}
	}
}

@media screen and (max-width: 426px) {
	.top-mv {
		height: 155vw;
	}
}

.top-mv-object {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 58vw;
	height: 60vw;
	max-height: 400px;
	background-color: rgba(0, 0, 0, .4);
	z-index: 1;
}

@media screen and (min-width: 1081px) {
	.top-mv-object {
		max-width: 40%;
	}
}

@media screen and (max-width: 1080px) {
	.top-mv-object {
		max-width: 50%;
	}
}

@media screen and (max-width: 767px) {
	.top-mv-object {
		max-width: initial;
	}
}

.top-mv-title {
	position: absolute;
	height: auto;
	top: 50%;
	right: min(4.26vw, 40px);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	max-width: 200px;
	width: 20vw;
	z-index: 5;

	>img {
		width: 100%;
		height: auto;
		display: block;
	}
}

@media screen and (max-width: 426px) {
	.top-mv-title {
		width: 28vw;
		top: 38%;
	}
}

.top-mv-contents {
	position: absolute;
	left: min(4.26vw, 20px);
	bottom: 0;
	width: 100%;
	max-width: 440px;
	z-index: 4;

	>.inner {
		border-left: 1px solid var(--color-white);
		padding: min(5.33vw, 56px) 0;
		position: relative;
		z-index: 5;
	}
}

.top-mv-contents-item {
	line-height: 1.4;
	margin-left: min(2.13vw, 20px);

	.vanue {
		font-size: min(2.93vw, 18px);
		font-weight: 600;
		background-color: var(--color-white);
		line-height: 1.2;
		color: var(--color-text);
		padding: min(1.06vw, 8px) min(2.13vw, 8px);
		display: inline-block;
		margin-bottom: min(2.13vw, 8px);
	}

	.date {
		margin-bottom: min(4.26vw, 16px);
		font-size: min(5.33vw, 28px);
		font-weight: 600;
	}

	.day {
		writing-mode: vertical-rl;
		text-orientation: upright;
		font-weight: 600;
		font-size: min(2.66vw, 24px);
	}

	.large {
		font-size: min(10.66vw, 100px);
		font-weight: 600;
		line-height: 1.2;
	}

	.member {
		display: grid;
		grid-template-columns: 30% 1fr;
		gap: 0;
		font-weight: 600;
		font-size: min(3.46vw, 20px);
		line-height: 1.6;
	}
}

@media screen and (max-width: 880px) {
	.top-mv-contents-item {
		.vanue {
			font-size: 1.93vw;
		}
	}
}

@media screen and (max-width: 767px) {
	.top-mv-contents-item {
		.vanue {
			font-size: min(2.93vw, 18px);
		}

		.member {
			grid-template-columns: min(20vw, 200px) 1fr;
		}
	}
}

/*================================
-外枠
=================================*/

.top-section {
	padding: min(10.66vw, 64px) 0;

	>.inner {
		max-width: 1300px;
		margin: auto;
		padding: 0 min(4.26vw, 16px);
	}
}

/*================================
-メニュー・お知らせ
=================================*/

.top-first-contents {
	background-color: var(--color-gray);
	padding: min(10.66vw, 48px) 0;

	>.inner {
		max-width: 1300px;
		margin: auto;
		display: grid;
		grid-template-columns: 52% 1fr;
		gap: min(4.26vw, 56px);
		padding: 0 min(4.26vw, 16px);
	}
}

@media screen and (max-width: 1100px) {
	.top-first-contents {
		>.inner {
			grid-template-columns: repeat(1, 1fr);
		}
	}
}

@media screen and (max-width: 767px) {
	.top-first-contents {
		>.inner {
			grid-template-columns: repeat(1, 1fr);
			gap: min(4.26vw, 16px);
		}
	}
}

.top-news {
	font-size: min(3.46vw, 14px);
	line-height: 1.6;
}

.top-news-list {
	overflow-x: auto;
	border: .5px solid var(--color-gray-dark);
	padding: min(4.26vw, 16px);
}

@media screen and (min-width: 768px) {
	.top-news-list {
		height: 200px;
	}
}

@media screen and (max-width: 767px) {
	.top-news-list {
		height: 20svh;
	}
}

.top-news-list-item {
	margin-bottom: min(4.26vw, 16px);
}

.top-menu-navi {
	max-height: 200px;
	overflow-y: auto;
	background-color: var(--color-white);
	padding: min(4.26vw, 16px);
}

@media screen and (min-width: 768px) {
	.top-menu-navi {
		min-height: 200px;
	}
}

@media screen and (max-width: 767px) {
	.top-menu-navi {
		max-height: initial;
		overflow-y: initial;
	}
}

.top-menu-navi-list {
	/* display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px; */
	display: block;

	.link {
		display: inline-block;
		border-bottom: .5px dashed var(--color-gray-dark);
		line-height: 1.4;

		>span {
			position: relative;
			padding-left: min(4.5vw, 20px);
			font-size: min(3.73vw, 14px);

			&::before {
				content: "〉";
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				z-index: 1;
			}
		}
	}

	li {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 8px;

		.link {
			&:last-child {
				border-bottom: 0;
			}
		}
	}

	.parent {
		font-weight: 600;
		border-bottom: 0;
	}

	.indent {
		padding-left: min(calc(4.5vw * 1.2), calc(20px * 1.2));
	}
}

@media screen and (min-width: 768px) {
	.top-menu-navi-list {
		.link {
			height: min(10.66vw, 42px);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
		}
	}
}

@media screen and (max-width: 767px) {
	.top-menu-navi-list {
		grid-template-columns: repeat(1, 1fr);

		li {
			grid-template-columns: repeat(1, 1fr);
		}

		.link {
			height: min(10.66vw, 40px);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
		}
	}
}

.top-news,
.top-menu {
	.title {
		margin: 0 0 min(2.13vw, 16px);

		span {
			position: relative;
			font-size: min(4.8vw, 19px);
			line-height: 1.6;
			font-family: var(--font-serif);
			font-weight: bold;

			&::before {
				content: "";
				position: absolute;
				left: -8px;
				top: 0;
				width: min(3.73vw, 16px);
				height: min(3.73vw, 16px);
				background-color: var(--color-assort);
				opacity: .1;
				z-index: -1;
			}

		}
	}
}

@media screen and (max-width: 767px) {

	.top-news,
	.top-menu {
		.title {
			margin: min(5.33vw, 20px) 0 min(5.33vw, 20px);
		}
	}
}

/*================================
-見出し
=================================*/

.top-headline02 {
	margin-bottom: min(10.66vw, 64px);
	line-height: 1.4;
	position: relative;

	&::before,
	&::after {
		content: "";
		position: absolute;
		z-index: 1;
	}

	&::before {
		left: 0;
		bottom: -20px;
		width: min(3.73vw, 16px);
		height: min(3.73vw, 16px);
		background-color: var(--color-assort);
	}

	&:after {
		left: min(calc(4.26vw * 1.2), calc(20px * 1.2));
		bottom: -10px;
		background-color: var(--color-assort);
		width: 40%;
		height: 2px;
		opacity: .2;
	}

	.text-en {
		font-size: min(3.2vw, 16px);
		color: var(--color-accent);
		padding-left: min(2.13vw, 8px);
		border-left: 1px solid var(--color-gray-dark);
	}

	.headline {
		font-size: min(6.93vw, 48px);
		font-weight: 600;
		font-family: var(--font-serif);
		letter-spacing: .05rem;
		line-height: 1.8;
		letter-spacing: .2rem;
	}
}

.top-headline03 {
	margin-bottom: min(12.8vw, 56px);
	background-color: var(--color-assort);
	color: var(--color-white);
	text-align: center;
	font-weight: 600;
	font-family: var(--font-serif);
	padding: min(2.13vw, 8px) min(4.26vw, 16px);
	font-size: min(5.33vw, 24px);
	line-height: 1.6;
	letter-spacing: .2rem;

	.small {
		font-size: min(3.73vw, 16px);
		display: inline-block;
		margin-left: 4px;
	}
}

/*================================
-講演者一覧
=================================*/

.top-speakers {
	border: .5px solid var(--color-gray-dark);
	padding: min(8.53vw, 40px) min(4.26vw, 80px);
	margin-bottom: 16px;

	>.inner {
		max-width: 1000px;
		margin: auto;
	}
}

.top-speakers-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: min(10.66vw, 64px) min(2.13vw, 8px);
	margin: auto;

	li {
		display: flex;
		align-items: center;
		width: 100%;
		flex-direction: column;
	}

	.name {
		font-weight: 600;
		font-family: var(--font-serif);
		text-align: center;
		background-color: var(--color-white);
		color: var(--color-assort);
		border: 2px solid var(--color-gray);
		padding: 4px;
		margin-bottom: min(4.26vw, 16px);
		font-size: min(4.26vw, 20px);
		display: block;
		width: 100%;

		>span {
			margin: 0 4px;
			font-size: min(3.2vw, 14px);
		}
	}

	.affiliation {
		text-align: center;
		display: flex;
		font-size: min(3.2vw, 14px);
		line-height: 1.4;
	}
}

@media screen and (max-width: 767px) {
	.top-speakers-list {
		grid-template-columns: repeat(2, 1fr);

		/* .affiliation {
			text-align: left;
		} */
	}
}

/*================================
-フッターの地図
=================================*/

.top-footer-map {
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	z-index: 10;

	iframe {
		width: 100%;
		height: 100%;
		aspect-ratio: 4 / 1;
		display: block;
	}
}

@media (max-width: 767px) {
	.top-footer-map {
		iframe {
			aspect-ratio: 2 / 1;
		}
	}
}

.top-schedule-list {
	display: grid;
	gap: 40px;
	margin: 0 auto 48px;

	.top-schedule-box {
		&:first-child {
			&::before {
				content: "";
				position: absolute;
				background-color: var(--color-gray-dark);
			}
		}
	}
}

@media screen and (min-width: 768px) {
	.top-schedule-list {
		grid-template-columns: repeat(2, 1fr);

		.top-schedule-box {
			&:first-child {
				&::before {
					right: -20px;
					top: 50%;
					transform: translateY(-50%);
					width: .5px;
					height: 80%;
				}
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.top-schedule-list {
		grid-template-columns: repeat(1, 1fr);

		.top-schedule-box {
			&:first-child {
				&::before {
					left: 50%;
					bottom: -20px;
					width: 80%;
					height: .5px;
					transform: translateX(-50%);
				}
			}
		}
	}
}