@charset "UTF-8";

/* ====================================
	共通スタイル
==================================== */
main {
	font-family: 'BIZ UDPGothic', sans-serif;
}

/* ページ */
.page-basic {
	padding-top: 2rem;
}

/* Youtube アイコン */
.youtube-play {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: url(/ceatec/assets/common/images/youtube-play.png) no-repeat center center/6rem auto;
	}
}

/* メインタイトル */
.main-title {
	font-size: 4rem;
	line-height: 1.2;
}

.main-title-jp {
	font-size: 1.6rem;
}

/* ページ内リンク */
.skip-link-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;

	li {
		inline-size: 100%;
	}
}

.skip-link-unchor {
	display: flex;
	align-items: center;

	.icon-arrow-down {
		margin-left: 0.5em;
		color: var(--sharp-red);
	}
}

/* セクション */
.section {
	padding-top: 8rem;
}

/* アーカイブ */
.archive-title {
	margin-bottom: 1em;
	font-size: 2.8rem;
	font-weight: 700;
}

.archive-movie-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4rem 2%;
}

.archive-movie-unchor {
	display: block;
	block-size: 100%;
	background: var(--white-gray);
}

.archive-movie-text-wrap {
	padding: 1em;
}

.archive-movie-zone {
	font-size: 1.4rem;
}

.archive-movie-title {
	margin-top: 0.25em;
	font-size: 1.7rem;
}

.archive-movie-zone-list {
	list-style-type: disc;
	margin-top: 1em;
	padding-left: 1em;
	font-size: 1.2rem;
}

.archive-movie-date {
	font-size: 1.4rem;
}

.archive-movie-speaker {
	margin-top: 1.5em;
	font-size: 1.2rem;
}

.archive-movie-slogan-unchor {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 4rem;
	background: var(--white-gray);

	figure,
	.archive-movie-slogan-text-wrap {
		inline-size: 100%;
	}
}

.archive-movie-slogan-text-wrap {
	padding: 1em;
}

/* ====================================
	768px未満専用スタイル
==================================== */
@media screen and (width <768px) {}

/* ====================================
	768px以上専用スタイル
==================================== */
@media screen and (width >=768px) {

	/* アーカイブ */
	.archive-movie-list {
		gap: 3rem 3%;

		>li {
			inline-size: 31.3%;
		}
	}
}

/* ====================================
	768px以上1080px未満専用スタイル
==================================== */
@media screen and (768px <=width < 1080px) {}

/* ====================================
	1080px未満専用スタイル
==================================== */
@media screen and (width <1080px) {}

/* ====================================
	1080px以上専用スタイル
==================================== */
@media print,
screen and (1080px <=width) {

	/* ページ */
	.page-basic {
		padding-top: 6rem;
	}

	/* メインタイトル */
	.main-title {
		font-size: 6.4rem;
	}

	.main-title-jp {
		font-size: 2rem;
	}

	/* ページ内リンク */
	.skip-link-list {
		display: flex;
		flex-wrap: wrap;
		gap: 1.25em;

		li {
			inline-size: auto;
		}

		li:not(:first-child) {
			padding-left: 1.25em;
			border-left: solid 1px #000;
		}
	}

	.skip-link-unchor {
		display: flex;
		align-items: center;

		.icon-arrow-down {
			margin-left: 0.5em;
			color: var(--sharp-red);
		}
	}

	/* セクション */
	.section {
		padding-top: 10rem;
	}

	/* アーカイブ */
	.archive-title {
		font-size: 3.6rem;
	}

	.archive-movie-list {
		gap: 4rem 2%;

		>li {
			inline-size: 23.5%;
		}
	}

	/* アーカイブ：スローガン */
	.archive-movie-slogan-unchor {
		margin-bottom: 4rem;

		figure {
			inline-size: 50%;
		}

		.archive-movie-slogan-text-wrap {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			padding: 1em 5% 3em;
		}

		.archive-movie-date {
			font-size: 1.8rem;
		}

		.archive-movie-title {
			margin-top: 0.75em;
			font-size: 2.4rem;
		}

		.archive-movie-speaker {
			margin-top: 2em;
			font-size: 1.6rem;
		}

		.youtube-play {

			&::before {
				background-size: 8rem auto;
			}
		}
	}
}

/* ====================================
	ホバー、マウスポインタが有効なデバイス
==================================== */
@media (hover:hover) and (pointer: fine) {

	.archive-movie-slogan-unchor:hover,
	.archive-movie-unchor:hover {
		text-decoration: none;
	}
}