@charset "UTF-8";

#products li {
	align-items:stretch;
}
li img { object-fit:cover; }
li div { padding:20px 0; }
caption {
	text-align:left;
	font-weight:bold;
	border-bottom:2px solid #33a7e2;
	margin-bottom:10px;
	color:#0091db;
}
table { margin-top:10px; }
th , td {
	border:none;
	padding:0 0 10px 0;
	text-align:left;
}
th {
	background-color:#FFF;
	padding-right:10px;
}

dl { font-weight:bold; width:100%; display:flex; flex-wrap:wrap; }
dt { width:15%; margin-bottom:5px; }
dt::after {
	content:"…";
	margin-left:8px;
}
dd { width:85%; }

#products p { line-height:1.8; }
#products table + p { line-height:1; }


.construction ol { list-style:none; padding:0; counter-reset:my-counter; }
.construction li {
	display:flex;
	align-items:center;
	border: 1px solid #0062d8;
	padding:15px;
	margin-bottom:80px;
	position:relative;
}
.construction li::before {
	content:counter(my-counter);
	counter-increment:my-counter;
	display:block; width:1.5em; height:1.5em;
	background:#0062d8;
	border-radius:1em;
	color:#FFF;
	line-height:1.5em;
	text-align:center;
	font-size:150%;
	margin-right:0.5em;
}
.construction li::after {
	content:url(./img/icon01.png);
	position:absolute;
	width:64px; height:64px;
	top:100%; left:50%;
	margin:8px 0 0 -32px;
}
.construction li:last-of-type::after { content:none; }
.construction li h3 { width:25%; margin-bottom:0; }
.construction a { text-decoration:underline; font-weight:bold; }

@media (max-width: 768px){
	li { padding:0; }
	dt { width:20%; }
	dd { width:78%; margin-left:2%; }
	.construction { width:100%; }
	.construction li { flex-wrap:wrap; }
	.construction li h3 { width:auto; }
	.construction li p { width:100%; margin-top:1em; }

}