@charset "utf-8";
/* CSS Document */

.container{ width: 100%; height: 100%; margin-top: 0; text-align: left; background: url(/images/2nd_bg.png) repeat-y 50% 0%;}
.h1box{ padding-left: 280px; background: url(/images/guide/binding/h1_pict.jpg) 0 0 no-repeat; background-size: 250px auto;}

#spec .box h3 + p{width: 655px; margin: 0 auto 10px; font-size: 1.8rem; line-height: 1.4em; color: #e70012;}
#spec .box h3 + p img{margin: 0;}
#spec .box h3 + p img:nth-of-type(1){margin-right: 15px;}
#spec .box p{width: 655px; margin: 0 auto;}
#spec .box a{text-decoration: underline; color:#2B32BC;}
#spec .box a:hover{text-decoration: underline; color:#F48E35;}
#spec .dtlbox{width: 655px; margin: 15px auto 0; padding: .7em 1.5em; border: 1px solid #cccccc; background: #e3e3e3;}
#spec .dtlbox p{width: auto; margin-bottom: 0; font-size: 1.6rem; font-weight: bold; color: #e70012;}
#spec .tojibox div{width: 48%; margin: 20px 1%;}
#spec .tojibox div h4{text-align: center;}
#spec .tojibox div p{width: auto; margin-bottom: 10px;}
#spec .tojibox div p img{display: block;}
#spec p a{color: #e70012 !important; text-decoration: underline;}
#spec p a:hover{color: #ffffff !important; text-decoration: none !important;}


@media screen and (max-width: 767px) {
	.h1box{min-height: 150px; padding-left: 0%; background: 0; background-size: 40% auto;}
	#spec .box h3 + p{width: 100%;}
	#spec .box p{width: 100%; margin: 0 auto;}
	#spec .dtlbox{width: 98%; margin: 15px auto 0;}
	#spec .dtlbox p{font-size: 1.4rem;}
	#spec .tojibox div{width: 98%; margin: 0 1% 20px;}
}