@charset "UTF-8";

/* ===================================
	File Name   : exhibition.css
	Description : Exhibition Page's Layout CSS
	Editor      : Bface Nakamura
	Last Editor : Bface Nakamura
	
	Update Description :
	[2026/06/29] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Share Elements
	2.Section [press_flow]
	3. Section [press_achievements]

====================================== */



/*===== 1. Share Elements =====*/
/* Price Box */
dl.box_price {
	display: flex;
	width: 100%;

	dt {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20rem;
		padding: 2.5rem 1.5rem;
		background-color: var(--mainC);
		color: #fff;
		font-size: 1.8rem;

		& > span {
			font-size: 1.6rem;
		}
	}

	dd {
		flex-grow: 1;
		display: flex;
		align-items: baseline;
		justify-content: center;
		padding: 2rem 1rem;
		border: .1rem solid currentColor;
		font-size: 2.2rem;
		font-family: 'Open Sans', sans-serif;
		font-weight: 700;

		span {
			font-size: 1.6rem;
			font-weight: 500;
		}
	}

	@media (max-width: 768px) {
		dt {
			width: 15rem;
			padding: 1rem 1rem;
			font-size: 1.6rem;

			& > span {
				font-size: 1.4rem;
			}
		}

		dd {
			padding: 1rem;
			font-size: 2.2rem;

			span {
				font-size: 1.4rem;
			}
		}
	}
}


/*===== 2.Section [press_flow]  =====*/
#press_flow {
	> div {
		position: relative;
		max-width: 113.6rem;
		margin: 0 auto;
		&::before {
			position: absolute;
			top: 2rem;
			left: calc(2rem + 3.5rem - .2rem);
			width: .4rem;
			height: calc(100% + 2rem);
			background: var(--mainC);
			content: "";
		}
	}
	section {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-column-gap: 2rem;
		grid-auto-rows: min-content;
		align-items: flex-start;
		justify-content: flex-start;
		margin: 0 auto 2rem;
		padding: 2rem;
		background: var(--LGC);
		h3 {
			grid-column: 1/2;
			display: flex;
			position: relative;
			z-index: 2;
			flex-wrap: wrap;
			align-items: center;
			font-weight: bold;
			em {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 7rem;
				height: 7rem;
				background: var(--mainC);
				color: var(--baseC);
				line-height: 1;
				b {
					display: block;
					margin-top: .5rem;
					font-size: 1.8rem;
				}
			}
		}
		> div:has(figure) {
			grid-column: 2/3;
			display: grid;
			grid-template-columns: 1fr 15rem;
			grid-template-rows: auto auto 1fr;
			column-gap: 2rem;
		}
		> div {
			em {
				grid-column: 1/2;
				display: block;
				margin-bottom: 1.5rem;
				font-weight: bold;
				font-size: 2rem;
			}
			p {
				grid-column: 1/2;
				margin: 0 0 2rem;
				line-height: 1.4;
			}
			a {
				grid-column: 1/2;
				max-width: 60rem;
        margin: 0 auto;
			}
			figure {
				grid-column: 2/3;
				grid-row: 1/4;
			}
		}
	}
	aside {
		margin: 4rem auto 0;
		> ul {
			margin-top: 1rem;
			padding: 1rem;
			border: dotted .1rem var(--mainC);
			b { font-weight: bold;}
		}
		.table_scroll {
			border: none;
			table { table-layout: auto;}
			tr:not(:first-child) th { border-top: .1rem solid var(--baseC);;}
			th { width: 20rem;}
			td { font-size: 1.4rem; 
				text-align: left;}
		}
		.notice {
			margin-top: 1rem;
		}

	}
	@media (max-width: 768px) {
		> div::before { display: none;}
		section {
			grid-column-gap: 1rem;
			padding: 1rem;
			h3 em {
				width: 4.5rem;
				height: 4.5rem;
				font-size: 1.2rem;
				b { font-size: 1.6rem;}
			}
			> div:has(figure) {
				grid-template-columns: 1fr 12rem;
			}
			> div {
				em {
					margin-bottom: 1rem;
					font-size: 1.6rem;
				}
				p { margin-bottom: 1rem;}
				a { grid-column: 1/3;}
			}
		}
		aside {
			margin: 2rem 0 auto;
			.table_scroll {
				white-space: normal;
				th { width: 10rem;}
			}
			.notice {font-size: 1.4rem;}
			> ul {
			b { display: block;}
		}
		}
	}
}



/*===== 3. Section [press_achievements] =====*/
#press_achievements {
	max-width: 108rem;
	background-color: var(--LGC);
	padding: 3rem 2rem;
	& > div {
		display: flex;
		justify-content: center;
		gap: 5rem;
		padding: 3rem 0;
		& > div {
			display: flex;
			align-items: center;
			gap: 4rem;
			&:first-of-type {
				padding-right: 5rem;
				border-right: 0.1rem solid var(--GC);
			}
			& > figure {
				width: 8rem;
				height: 8rem;
				& img {
					height: 100%;
				}
			}
			& > div {
				& > span {
					display: block;
					font-size: 2.4rem;
				}
				& > em {
					display: block;
					font-weight: bold;
					font-size: 6rem;
					font-family: 'Open Sans', sans-serif;
					& > span {
						margin-left: .5rem;
						font-size: 3rem;
						font-family: 'Noto Sans JP', sans-serif;
					}
				}
				& > em + em {
					font-size: 4rem;
					& > span {
						font-size: 2.4rem;
					}
				}
			}
		}
	}
	& > a {
		max-width: 60rem;
		margin: 2rem auto 0;
	}
	@media (max-width: 768px) {
		padding: 2rem 2rem;

		&>div {
			flex-direction: column;
			gap: 2rem;
			padding: 1rem 0 0;

			&>div {
				justify-content: center;

				&:first-of-type {
					padding-right: 0;
					padding-bottom: 2rem;
					border-right: initial;
					border-bottom: 0.1rem solid var(--GC);
				}

				&>figure {
					width: 5rem;
					height: 5rem;
				}

				&>div {
					&>span {
						font-size: 1.8rem;
					}

					&>em {
						font-size: 3.6rem;
						line-height: 1.2;

						&>span {
							font-size: 1.8rem;
						}
					}

					&>em+em {
						font-size: 2.8rem;

						&>span {
							font-size: 1.6rem;
						}
					}
				}
			}
		}
	}
}