@charset "UTF-8";

/* ====================================
	共通スタイル
==================================== */
/* メインビジュアル */
.main-visual {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	block-size: 40rem;
	background: url(images/main-visual_sp.jpg) no-repeat bottom / cover;
}

.main-visual-title-wrap {
	inline-size: fit-content;
	padding-bottom: 5%;
	padding-right: 5%;
}

.main-visual__about {
	line-height: 1;
	color: #fff;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.main-visual-logo {
	inline-size: 20rem;
}

.main-visual-year {
	margin-bottom: 0.5em;
	font-size: 1.6rem;
}

.main-visual-date {
	font-size: 1.5rem;

	span {
		font-size: 2.2rem;
	}
}

.main-visual-place {
	margin-top: 0.5em;
	font-size: 3rem;
}

/* イントロ */
.intro {
	padding: 5rem 0;
}

.intro-title {
	max-inline-size: 48rem;
}

.intro-sub-title {
	margin-bottom: 5rem;
	font-size: 1.6rem;
}

.intro-text {
	margin-top: 4rem;
	font-size: 1.8rem;
}

/* NEWS */
.news {
	padding: 3rem 0;
	border-top: solid 1px #DFDFDF;
	border-bottom: solid 1px #DFDFDF;
}

.list-news {
	display: grid;
	gap: 1em;
	margin-top: 0.5em;

	a {
		text-decoration: underline;
	}
}

.news-title {
	font-size: 1.6rem;
}

.news-date {
	min-inline-size: 6.7em;
	color: #59574B;
}

.news-text {
	.award-logo {
		inline-size: 10rem;
	}

	.award-text-wrap {
		margin-top: 1em;
	}

	.award-text {
		margin-top: 0.8em;
	}
}

/* アーカイブ */
.archive {
	padding-bottom: 4rem;
}

.archive__link-anchor {
	display: flex;
	flex-wrap: wrap;
	background: var(--white-gray);
}

.archive-img {
	inline-size: 100%;
}

.archive-text-wrap {
	padding: 2rem 5%;
}

.archive-text {
	font-size: 1.8rem;
	text-align: center;
}

.archive-more {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	margin-top: 2rem;
	padding: 1em 1.5em;
	font-size: 1.5rem;
	background: var(--light-gray);
	border-radius: 5rem;
	text-align: center;

	.icon-arrow-right {
		font-size: 0.5em;
	}
}

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

.section-title {
	font-size: 4rem;
}

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

/* アーカイブ */
.archive__link-anchor {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 展示ブース */
.exhibition__category {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.exhibition__category-text {
	padding-top: 2rem;
	padding-bottom: 4rem;
}

.exhibition-title {
	margin-bottom: 0.5em;
	font-size: 2.8rem;
}

.exhibition-text {
	font-size: 1.5rem;
}

/* 展示ブース：展示ブースイメージ */
.exhibition__booth {
	padding: 3rem 0 5rem;
}

.exhibition__booth-title {
	font-size: 1.6rem;
}

.exhibition__booth-img-container {
	margin-top: 2rem;
}

/* ステージ */
.stage__visual {
	margin-top: 5rem;
	block-size: 54.5vw;
	background: url(/ceatec/assets/index/images/stage-img.jpg) no-repeat bottom / cover;
}

.stage__detail {
	padding-top: 6rem;
}

/* ステージ：テーブル */
.stage-schedule-title {
	margin-top: 4rem;
	margin-bottom: 2rem;
	font-size: 1.6rem;
}

.compare-legend-list {
	margin-top: 2rem;
	margin-bottom: 1em;
	display: flex;
	justify-content: flex-start;
	font-size: 1.2rem;

	li:not(:first-child) {
		margin-left: 0.5em;
	}
}

.stage-schedule-table-wrapper {
	overflow-x: auto;
	position: relative;
}

.stage-schedule-table {
	inline-size: 100%;
	table-layout: fixed;
	border-right: solid 1px #727272;
	border-bottom: solid 1px #727272;
	word-break: break-all;
	border-collapse: separate;
	border-spacing: 0px;

	caption {
		caption-side: top;
		margin-bottom: 2rem;
		font-size: 2rem;
		font-weight: bold;
		text-align: center;
		color: #000;
	}

	th,
	td {
		padding: 0.5rem 0.5rem;
		font-size: 1.2rem;
		text-align: center;
		border-top: solid 1px #727272;
	}

	.schedule-col-title {
		background: #8E0000;
		color: #fff;
	}

	.schedule-row-title {
		background: var(--white-gray);
	}

	th[scope="row"] {
		inline-size: 80px;
		font-weight: 400;
		border-left: solid 1px #727272;
		position: sticky;
		left: 0;
	}

	th[scope="col"],
	td {
		border-left: solid 1px #727272;
	}

	.left-cell {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 70px;
	}
}

/* 開催概要 */
.about__table {
	margin-top: 6rem;
}

.about-img {
	margin-top: 6rem;
}

.table-base {
	inline-size: 100%;
}

.table-base__row {
	border-top: solid 2px var(--border-gray);
	border-bottom: solid 2px var(--border-gray);
	--table-cell-padding-tb: 1rem;
	--table-cell-padding-lr: 1rem;
	font-size: 1.4rem;

	>th {
		inline-size: 22%;
		padding: var(--table-cell-padding-tb);
		background-color: var(--table-bg-gray);
		font-size: 1.6rem;
	}

	>td {
		padding: var(--table-cell-padding-tb);
	}
}

.list-period {
	font-size: 1.5rem;
}

.list-period-end {
	display: inline-block;
}

.list-place-text {
	font-size: 1.5rem;
}

.list-place-map {
	display: block;
}

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

	/* NEWS */
	.list-news {
		a:hover {
			text-decoration: none;
		}
	}

	/* アーカイブ */
	.archive__link-anchor:hover {
		text-decoration: none;
	}
}

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

	/* 展示ブース */
	.exhibition__category-text {
		padding-inline: 5%;
	}

	/* ステージ：テーブル */
	.stage-schedule-table {

		th,
		td {
			inline-size: 114px;
		}
	}
}

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

	/* メインビジュアル */
	.main-visual {
		justify-content: center;
		block-size: 40rem;
		background: url(images/main-visual.jpg) no-repeat bottom / cover;
	}

	.main-visual-title-wrap {
		margin-left: 50%;
		padding-bottom: 2.5%;
		padding-right: 0;
	}

	.main-visual-logo {
		inline-size: 20rem;
	}

	.main-visual-year {
		margin-bottom: 0.5em;
		font-size: 1.6rem;
	}

	.main-visual-date {
		font-size: 1.5rem;

		span {
			font-size: 2.2rem;
		}
	}

	.main-visual-place {
		margin-top: 0.8em;
		font-size: 3.2rem;
	}

	/* ステージ：テーブル */
	.compare-legend-list {
		margin-top: 6rem;
		margin-bottom: 2rem;
	}

	.stage-schedule-table {
		min-inline-size: 1200px;

		th,
		td {
			padding: 1rem 1rem;
			font-size: 1.4rem;
		}

		.schedule-col-title {
			font-size: 1.6rem;
		}

		th[scope="row"] {
			inline-size: 120px;
			font-size: 1.6rem;
		}
	}
}

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

	/* 展示ブース */
	.exhibition__category-text-wrap {
		padding-inline: 1.5%;
	}
}

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

	/* 展示ブース：展示ブースイメージ */
	.exhibition__booth-text-wrap,
	.exhibition__booth-cursor {
		display: none;
	}
}

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

	/* メインビジュアル */
	.main-visual {
		block-size: 63rem;
		background: url(images/main-visual.jpg) no-repeat bottom / cover;
	}

	.main-visual-title-wrap {
		margin-left: 50%;
		padding-bottom: 2.5%;
	}

	.main-visual-logo {
		inline-size: 28rem;
	}

	.main-visual-date {
		font-size: 2.4rem;

		span {
			font-size: 4.2rem;
		}
	}

	.main-visual-place {
		font-size: 3.8rem;
	}

	/* イントロ */
	.intro {
		padding: 10rem 0 12rem;
	}

	.intro-title {
		max-inline-size: 60rem;
	}

	.intro-sub-title {
		margin-bottom: 5rem;
		font-size: 1.6rem;
	}

	.intro-text {
		margin-top: 8rem;
		font-size: 2rem;
	}

	/* NEWS */
	.news {
		padding: 3rem 0;
	}

	.news-wrap {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 7rem;
		font-size: 1.6rem;
	}

	.list-news {
		margin-top: 0;
	}

	.list-news>.list-item {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 3rem;
	}

	.news-title {
		font-size: 1.6rem;
	}

	.news-text {
		.award {
			display: grid;
			grid-template-columns: 25% 1fr;
			gap: 1em;
		}

		.award-logo {
			margin-left: 2em;
			inline-size: 12rem;
		}

		.award-text-wrap {
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			margin-top: 0;
		}

		.award-text {
			margin-top: 0.8em;
		}
	}

	/* アーカイブ */
	.archive {
		padding-bottom: 8rem;
	}

	.archive-img {
		inline-size: 50%;
	}

	.archive-text-wrap {
		flex: 1;
		padding: 2rem 5%;
	}

	.archive-text {
		font-size: 2.8rem;
		text-align: left;
	}

	.archive-more {
		margin-top: 4rem;
		font-size: 2rem;
	}

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

	.section-title {
		font-size: 6.4rem;
		line-height: 1.2;
	}

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

	/* 展示ブース */
	.flex__item:first-child .exhibition__category-text-wrap {
		padding-left: 3%;
	}

	.flex__item:last-child .exhibition__category-text-wrap {
		padding-right: 3%;
	}

	.exhibition__category {
		padding-top: 5rem;
		padding-bottom: 10rem;

		.flex__item {
			display: flex;
			flex-wrap: wrap;
			align-content: start;
			flex-basis: 50%;
		}

		.flex__item:first-child .exhibition__category-text {
			padding: 5rem 5% 0 0;
		}
	}

	.exhibition__category-text {
		padding: 5rem 0 0 5%;
	}

	.exhibition__category-img {
		inline-size: 100%;
	}

	.exhibition__category-text {
		max-inline-size: 60rem;
	}

	.exhibition-title {
		font-size: 4rem;
	}

	.exhibition-text {
		font-size: 2rem;
	}

	/* 展示ブース：展示ブースイメージ */
	.exhibition__booth {
		padding: 4rem 0 8rem;
	}

	.exhibition__booth-title {
		font-size: 2rem;
	}

	.exhibition__booth-img-container {
		padding-bottom: 7rem;
		position: relative;
	}

	.exhibition__booth-cursor {
		display: inline-grid;
		grid-template-columns: auto 1fr;
		gap: 1rem;
		align-items: center;
		padding: 1rem 1.5rem 1rem 1rem;
		background-color: var(--light-gray);
		border-radius: 5rem;
		position: absolute;
		right: 0;
		bottom: 0;

		.icon-cursor {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			inline-size: 3.5rem;
			aspect-ratio: 1;
			background-color: #fff;
			border-radius: 5rem;

			img {
				display: inline-block;
				inline-size: 1.2rem;
			}
		}
	}

	.exhibition__booth-cursor-text {
		font-size: 1.4rem;
	}

	.exhibition__booth-text-wrap {
		min-block-size: 12lh;
		padding: 1em 1em;
		border-bottom: solid 1px #000;
	}

	.exhibition__booth-default {
		font-size: 1.6rem;
		font-weight: 400;
	}

	.exhibition__booth-zone {
		margin-bottom: 0.5em;
	}

	.exhibition__booth-zone-title {
		font-size: 2rem;
	}

	.exhibition__booth-zone-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		min-block-size: 7lh;
		margin-top: 1.5em;

		li {
			inline-size: 100%;
			margin-top: 0.25em;
			display: none;
		}
	}

	/* ステージ */
	.stage__visual {
		block-size: 32.4vw;
	}

	/* ステージ：テーブル */
	.stage-schedule-title {
		margin-top: 8rem;
		font-size: 2rem;
	}

	/* 開催概要 */
	.about__table {
		margin-top: 6rem;
	}

	.table-base__row {
		--table-cell-padding-tb: 2rem;
		--table-cell-padding-lr: 4rem;
		font-size: 1.6rem;

		>th {
			padding: var(--table-cell-padding-tb);
			font-size: 2rem;
		}

		>td {
			padding: var(--table-cell-padding-tb) var(--table-cell-padding-lr);
		}
	}

	.list-period {
		font-size: 2rem;
	}

	.list-place-text {
		font-size: 1.8rem;
	}

	.list-place-map {
		display: inline-block;
		margin-left: 0.5em;
	}

}

/* ====================================
	1600px以上専用スタイル
==================================== */
@media screen and (width >=1600px) {
	.main-visual {
		inline-size: 100%;
		block-size: 39.4vw;
	}
}