.background_image {
	background-image: url('../images/background.png');
	background-repeat: repeat-x;
	background-size: 100% 100%;
}
form {
	#background: #3F506B;
	color: #E6FFFF;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
div {
	box-sizing: border-box;
}
td {
	font-weight: bold;
	color: #86929D;
}
table {
	width: 100%;
	align: center;
}

.io_table {
	width: 900px;
}

li {
	font-size: 1em;
	font-weight: bold;
	color: #E6FFFF;
}

.io_block, .history_block, .image_block {
	position: relative;
	margin: 0.5em 0.1em 0;
	padding: 0.25em;
	border: solid 3px #7D9198;
	border-radius: 10px;
}
.assembly_block {
	border: none;
	&:after {
		content: "";
		display: block;
		clear: both;
	}
}
.unit_block, .frame_block, .inner_block {
	background: #3F506B;
	position: relative;
	margin: 0.5em 0.1em 0;
	padding: 0.25em;
	border: solid 3px #7D9198;
	border-radius: 10px;

	width: 49.5%;
	float: left;
}
.box-title {
	position: absolute;
	display: inline-block;
	top: -8px;
	left: 10px;
	padding: 0 5px;
	line-height: 1;
	font-size: 15px;
	#background: #3F506B;
	font-weight: bold;
	color: #E6FFFF;
}

.parts_block {
	position: relative;
	margin: 0.5em 0.1em 0;
	padding: 0.25em;
	border: solid 3px #7D9198;
	border-radius: 10px;

	float: left;
	width: 57.28em;
	box-sizing: border-box;
}

.parts_spec_block {
	position: relative;
	margin: 0.5em 0.1em 0;
	padding: 0.25em;
	border: solid 3px #7D9198;
	border-radius: 10px;

	float: left;
	width: calc((100% - 58em)*(3/5));
	box-sizing: border-box;
}
.ac_spec_block {
	position: relative;
	margin: 0.5em 0.1em 0;
	padding: 0.25em;
	border: solid 3px #7D9198;
	border-radius: 10px;

	float: left;
	width: calc((100% - 58em)*(2/5));
	box-sizing: border-box;
}

.parts_font {
	line-height: 1;
	font-size: 1em;
	font-weight: bold;
	width: 4.5em;
	text-align: center;
	color: #E6FFFF;
	word-break:break-word;
	overflow-wrap: break-word;
}




.button_io {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 175px;
	margin: 0.5em 0.5em;
	border: 2px solid #E6FFFF;
	border-radius: 15px;
	box-shadow: 0 0 0 3px #3F506B;
	background-color: #3F506B;
	color: #E6FFFF;
	font-weight: 600;
	font-size: 1em;
}
.button_io:active {
	transition: transform .2s;
	&:active{
		transform: scale(.9);
	}
}

.button_mini_io {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150px;
	margin: 0.5em 0.5em;
	border: 2px solid #E6FFFF;
	border-radius: 15px;
	box-shadow: 0 0 0 3px #3F506B;
	background-color: #3F506B;
	color: #E6FFFF;
	font-weight: 600;
	font-size: 1em;
}
.button_mini_io:active {
	transition: transform .2s;
	&:active{
		transform: scale(.9);
	}
}

.text_io {
	width: 100%;
	padding: 8px 10px;
	border: 2px solid #555;
	border-radius: 3px;
	font-size: 1em;
	line-height: 1.5;
}
.text_io:focus{
	outline: 1px solid #fff;
}

.text_io::placeholder {
	color: #666;
}

@media screen and (max-width: 1600px) {
/* 1920pxまでの幅の場合に適応される */
	body {
		//#background-color:black;
	}

	.unit_block, .frame_block, .inner_block {
		width: 49.5%;
	}

	.parts_spec_block, .ac_spec_block {
		width: calc((100% - 58em));
	}
}
@media screen and (max-width: 1280px) {
/* 1024pxまでの幅の場合に適応される */
	body {
		//#background-color:blue;
	}


	.parts_block {
		width: 29em;
	}
	.unit_block, .frame_block, .inner_block {
		width: 100%;
	}

	.parts_spec_block, .ac_spec_block {
		width: calc((100% - 29.5em));
	}
}
@media screen and (max-width: 960px) {
/* 960pxまでの幅の場合に適応される */
	body {
		//#background-color:orange;
	}

	.io_table {
		width: 100%;
	}

	.parts_spec_block, .ac_spec_block {
		width: calc((100% - 29.5em));
	}
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	 body {
		//#background-color:red;
	}

	.io_table {
		width: 100%;
	}

	.parts_block {
		width: 100%;
	}
	.unit_block, .frame_block, .inner_block {
		width: 100%;
	}

	.parts_spec_block, .ac_spec_block {
		width: 100%;
	}

	.parts_font {
		width: 20vw;
		box-sizing: border-box;
	}

	.button_io {
		width: 15vw;
		word-break:break-word;
		overflow-wrap: break-word;
	}
}