/* Media Garden - Information child page (/mg/information/) */

.mg-information .show-pc {
	display: none !important;
}

.mg-information .show-sp {
	display: inline !important;
}

@media (min-width: 782px) {
	.mg-information .show-pc {
		display: inline !important;
	}

	.mg-information .show-sp {
		display: none !important;
	}
}

.mg-information .page-menu.line {
	border-bottom: 1px solid #3d3d3d;
}

.mg-information .mg-info-box {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: 61.875rem;
	padding-inline: 15px;
	scroll-margin-top: 4.5rem;
	width: 100%;
}

.mg-information .mg-info-tab {
	display: none !important;
	scroll-margin-top: 4.5rem;
}

.mg-information .mg-info-tabs {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-content: center;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	width: 100%;
}

.mg-information .mg-info-tabs__item {
	display: flex;
	min-width: 0;
}

.mg-information .mg-info-tabs__item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-self: center;
	max-width: 12.5rem;
	width: 100%;
}

.mg-information .mg-info-tabs__item a {
	align-items: center;
	background: #f5f5f3;
	border: 1px solid #d8d8d4;
	border-radius: 999px;
	box-sizing: border-box;
	color: #4b4b4b;
	cursor: pointer;
	display: flex;
	flex: 1 1 auto;
	font-size: 0.8125rem;
	justify-content: center;
	line-height: 1.35;
	min-height: 3.5rem;
	min-width: 0;
	padding: 0.65rem 0.85rem;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	width: 100%;
}

.mg-information .mg-info-tabs__item a:hover {
	background: #fff;
	border-color: #8fae7d;
	color: #4b4b4b;
}

.mg-information .mg-info-tabs__item.is-active a {
	background: #fff;
	border-color: #8fae7d;
	box-shadow: inset 0 0 0 1px #8fae7d;
	font-weight: 700;
}

.mg-information .mg-info-tab.active {
	display: block !important;
}

.mg-information .mg-info-panel {
	color: #4b4b4b;
	font-size: 0.875rem;
	line-height: 1.7;
}

.mg-information .mg-info-subtitle {
	color: #4b4b4b;
	font-size: 1.125rem;
	font-weight: 700;
	margin: 2rem 0 1rem;
}

.mg-information .mg-info-panel > .mg-info-subtitle:first-child {
	margin-top: 0;
}

.mg-information .infor-table {
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 2rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.mg-information .infor-table::-webkit-scrollbar {
	display: none;
	height: 0;
}

.mg-information .mg-info-scroll-hint {
	color: #8a8a86;
	display: none;
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	line-height: 1.5;
	margin: 0 0 0.75rem;
	text-align: center;
}

.mg-information .table-striple {
	border: 1px solid #d8d8d4;
	border-collapse: collapse;
	font-size: 0.8125rem;
	min-width: 100%;
	table-layout: fixed;
	width: 100%;
}

.mg-information .table-striple th,
.mg-information .table-striple td {
	border: 1px solid #d8d8d4;
	padding: 0.75rem 0.875rem;
	text-align: left;
	vertical-align: top;
}

.mg-information .table-striple th {
	background: #ecece8;
	font-weight: 700;
	white-space: nowrap;
}

.mg-information .table-striple tr:nth-child(even) td {
	background: #fafaf8;
}

.mg-information .table-striple a {
	color: inherit;
	text-decoration: underline;
}

.mg-information .table-striple a:hover {
	opacity: 0.75;
}

.mg-information .mg-info-panel table.media {
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	max-width: 100%;
	width: 100%;
}

.mg-information .mg-info-panel table.media td,
.mg-information .mg-info-panel table.media th {
	font-size: 0.8125rem;
	line-height: 1.6;
	padding: 0.5rem 0.75rem;
	vertical-align: top;
}

.mg-information .mg-info-panel table.media td[bgcolor="#CCCCCC"],
.mg-information .mg-info-panel table.media tr td[bgcolor="#CCCCCC"] {
	background: #ecece8 !important;
	font-weight: 700;
}

.mg-information .mg-info-panel .media,
.mg-information .mg-info-panel .media_green,
.mg-information .mg-info-panel .font_10px,
.mg-information .mg-info-panel .font_11px {
	font-size: 0.8125rem;
}

.mg-information .mg-info-panel p {
	margin: 0 0 1rem;
}

.mg-information .mg-info-panel strong {
	font-weight: 700;
}

.mg-information .mg-info-panel a {
	color: inherit;
	text-decoration: underline;
}

@media (min-width: 782px) {
	.mg-information .mg-info-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		grid-template-columns: none;
		justify-content: center;
		margin-bottom: 2.5rem;
	}

	.mg-information .mg-info-tabs__item {
		display: block;
		flex: 0 0 auto;
	}

	.mg-information .mg-info-tabs__item:last-child:nth-child(odd) {
		grid-column: auto;
		justify-self: auto;
		max-width: none;
		width: auto;
	}

	.mg-information .mg-info-tabs__item a {
		display: block;
		font-size: 0.875rem;
		min-height: 0;
		min-width: 7.5rem;
		padding: 0.8rem 1.25rem;
		width: auto;
	}

	.mg-information .table-striple {
		font-size: 0.875rem;
	}
}

@media (max-width: 781px) {
	.mg-information .mg-info-tabs {
		gap: 0.625rem;
		margin-bottom: 1.25rem;
	}

	.mg-information .mg-info-tabs__item a {
		font-size: clamp(0.6875rem, 3.2vw, 0.8125rem);
		min-height: 3.25rem;
		padding: 0.55rem 0.65rem;
	}

	.mg-information .mg-info-scroll-hint {
		display: block;
	}

	/* Scroll per table only (no panel-level scrollbar stack) */
	.mg-information .mg-info-panel {
		overflow-x: visible;
	}

	.mg-information .infor-table {
		margin-bottom: 1.5rem;
	}

	.mg-information .table-striple {
		min-width: 40rem;
		table-layout: auto;
		width: max-content;
	}

	.mg-information .table-striple th,
	.mg-information .table-striple td {
		min-width: 6.5rem;
		white-space: nowrap;
	}

	/* Download tab: one swipe area for the wide legacy table */
	.mg-information .mg-info-panel:has(> table.media) {
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		margin-inline: -15px;
		overflow-x: auto;
		padding-inline: 15px;
		scrollbar-width: none;
	}

	.mg-information .mg-info-panel:has(> table.media)::-webkit-scrollbar {
		display: none;
		height: 0;
	}

	.mg-information .mg-info-panel > table.media,
	.mg-information .mg-info-panel table.media {
		height: auto !important;
		max-width: none;
		min-width: 52.2rem;
		width: max-content;
	}

	.mg-information .mg-info-panel table.media td,
	.mg-information .mg-info-panel table.media th,
	.mg-information .mg-info-panel table.media p {
		height: auto !important;
		white-space: nowrap;
	}

	.mg-information .mg-info-panel table.media [style*="width"] {
		width: auto !important;
	}
}