@charset "utf-8";

/* 取付け方法の種類
-------------------------------------------------- */
.attach-box{
	margin-bottom:30px;
}

/* 図面 */
.attach-box .diagram{
	border:1px solid #dcdcdc;
	padding:10px;
	background:#ffffff;
	margin-top:10px;
	text-align:center;
}

/* イラスト */
.attach-box .figure{
	width:80%;
	margin:10px auto 0 auto;
}

/* ねじ込み式 */
.attach-box.screwedin .diagram img{
	width:76%;
}

/* アングル式 */
.attach-box.angle .diagram img{
	width:80%;
}
.attach-box.angle .figure{
	width:45%;
}

/* スパナ */
.spanner h6::before{
	content:'◆';
	display:inline-block;
	margin-right:3px;
}
.spanner h6{
	font-weight:500;
	margin-bottom:5px;
}
.spanner table{
	border-top:1px solid #dcdcdc;
	border-left:1px solid #dcdcdc;
	margin:10px auto 30px auto;
}
.spanner table th,
.spanner table td{
	padding:5px 15px;
	border-right:1px solid #dcdcdc;
	border-bottom:1px solid #dcdcdc;
	font-weight:400;
	text-align:center;
	font-size:1.2rem;
	background:#ffffff;
}
.spanner table thead th{
	background:#d90013;
	color:#ffffff;
}

/* ユーエイスパナ */
.spanner .spanner-inner.yuei p{
	font-size:1.2rem;
	margin-bottom:10px;
}
.spanner .spanner-inner.yuei p span{
	display:inline-block;
	border-radius:10px;
	background:#d90013;
	color:#ffffff;
	margin-right:3px;
	font-size:1rem;
	padding:0 10px;
}

/* 両口平スパナ */
.spanner .spanner-inner.double .figure{
	width:78%;
	margin:0 auto;
}

/* 片口平スパナ */
.spanner .spanner-inner.single .figure{
	width:68%;
	margin:0 auto;
}



/* PC
-------------------------------------------------- */
@media only screen and (min-width: 768px) {


	/* 取付け方法の種類
	++++++++++++++++++++++++++++++++++++++++++++++ */
	.attach-box{
		margin-bottom:40px;
	}
	.attach-box .explanation{
		float:left;
		width:64%;
	}

	/* 図面 */
	.attach-box .diagram{
		padding:20px;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}

	/* イラスト */
	.attach-box .figure{
		float:right;
		margin:0;
		width:33%;
	}

	/* プレート式 */
	.attach-box.plate .diagram{
		width:68%;
	}
	.attach-box.plate .platelist{
	    /*display:inline-block;*/
	    border-radius:10px;
	    background:#d90013;
	    color:#ffffff;
	    margin:10px 0 0 0;
	    /*font-size:1rem;*/
	    width:64%;
	    padding:10px 10px;
	    text-align:center;
	}

	.attach-box.plate .platelist a{
		color:#FFFFFF;
	}

	/* ねじ込み式 */
	.attach-box.screwedin .diagram img{
		width:100%;
	}
	.attach-box.screwedin .diagram{
		width:54%;
	}

	/* 差し込み式 */
	.attach-box.plug .diagram{
		width:76%;
	}

	/* アングル式 */
	.attach-box.angle .explanation{
		width:75%;
	}
	.attach-box.angle .diagram{
		width:49%;
	}
	.attach-box.angle .diagram img{
		width:100%;
	}
	.attach-box.angle .figure{
		width:22%;
	}

	/* スパナ */
	.spanner table th,
	.spanner table td{
		font-size:13px;
	}
	.spanner .spanner-inner{
		margin-bottom:50px;
	}
	.spanner .spanner-box{
		float:left;
		width:50%;
	}
	.spanner table{
		margin:0 0 0 60px;
		float:left;
	}

	/* ユーエイスパナ */
	.spanner .spanner-inner.yuei p{
		font-size:13px;
	}
	.spanner .spanner-inner.yuei p span{
		font-size:10px;
	}

	/* 両口平スパナ・片口平スパナ */
	.spanner .spanner-inner.double .figure,
	.spanner .spanner-inner.single .figure{
		margin:0;
	}
}