@charset "utf-8";

/* characteristic */
#characteristic table {
	width:100%;
	margin-bottom: calc(20 * 100vw / 750);
}
#characteristic table th {
	padding: calc(4 * 100vw / 750);
	font-weight: bold;
	text-align: center;
	border: 1px #CCC solid;
	background: #F5F5F5;
}
#characteristic table .headline th {
	background: #0085DD;
	color:#FFF;
}
#characteristic table td {
	padding: calc(4 * 100vw / 750);
	text-align: center;
	border: 1px #CCC solid;
}

/* example */
.example .example_box dl {
	display: grid;
	grid-template-columns: min(calc(280 * 100vw / 750), 280px) auto; 
	gap: calc(32 * 100vw / 750);
}
.example .example_images {
	font-size: calc(24 * 100vw / 750);
	font-weight: bold;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap:calc(8 * 100vw / 750);
}

/* summary */
#summary {
	margin-top: calc(28 * 100vw / 750);
	padding: calc(16 * 100vw / 750) calc(20 * 100vw / 750);
	border-radius: calc(4 * 100vw / 750);
	background:#D0EDFD;
}

@media screen and (min-width: 920px) {
/* characteristic */
#characteristic table {
	margin-bottom: 20px;
}
#characteristic table th {
	padding:4px;
}
#characteristic table td {
	padding:4px;
}

/* example */
.example .example_box dl {
	grid-template-columns: 180px auto;
	gap: 24px;
}
.example .example_images {
	font-size: 16px;
	gap: 6px;
}

/* summary */
#main #summary {
	margin-top: 24px;
	padding: 16px 20px;
	border-radius: 4px;
}
}