@charset "utf-8";

.block_np_form{

	& h3{
		font-size: 28px;
		font-weight: 700;
		letter-spacing: 0.2em;
		color: #383838;
		text-align: center;
		align-items: center;
		display: flex;
		justify-content: center;
		margin: 62px auto;
		word-break: keep-all;
	}
	& h3::before,
	& h3::after{
		background-color: #232323;
		content: "";
		height: 1px;
		width: 165px;
	}
	
	& h3::before{ margin-right: 15px; }
	& h3::after{ margin-left: 15px; }



	.np{
		@media screen and (max-width:767px) { display: block; padding: 0 30px;}
		.shiharai{
			background-color: #ecf7fb;
			padding: 15px 25px;
			font-size: 18px;
			font-weight: 700;
			margin: 15px auto;
			@media screen and (max-width:767px) { font-size: 16px;}
		}
		.box{
		    display: flex;
		    justify-content: space-between;
		    margin: 15px auto 30px;

			@media screen and (max-width:1199px) { display: block; max-width: 840px; width: 100%;}
		}
		
		.bn{
			max-width: 468px;
			margin: 0 30px 15px 0;
			width: 48%;
			display: block;
			@media screen and (max-width:1199px) { width: 100%;}
			
		}
		
		.kitei{
		}
	}
	
	
	.npForm{
		
		max-width: 840px;
		width: 100%;
		margin: 30px auto 60px;
		
	
		& table{ width: 100%;
			@media screen and (max-width:767px) { display: block; padding: 0 30px;}
		}
		& tbody{
			@media screen and (max-width:767px) { display: block; width: 100%;}
		}
		& tr{
			@media screen and (max-width:767px) {  width: 100%; display: block; padding: 1em 0 1em; border-bottom: dotted 1px #CCC;		}	
		}
		& th,
		& td{ 
			border-bottom: dotted 1px #CCC;		
			text-align: left;
			padding: 1em 0 2em;
			@media screen and (max-width:767px) { display: block; border-bottom: none;}
		}
		
		& th{
			font-size: 14px;
			line-height: 1.5;
			color: #333;
			text-align: left;
			width: 250px;
			vertical-align: middle;
			@media screen and (max-width:767px) { width: 100%; padding: 0 0 0.5em;}
		}
		& td{
			font-size: 14px;
			line-height: 1.5;
			color: #333;
			vertical-align: middle;
			@media screen and (max-width:767px) { width: 100%; padding: 0 0 0.5em;}
		}

		.required::after {
			background: #FF0000;
			color: #FFFFFF;
			content: "必須";
			display: inline-block;
			padding: 1px 4px;
			border-radius: 3px;
			font-size: 11px;
			margin: 0 0 0 2px;
			vertical-align: top;
		}
		
		.input_style{
				display: block;
				width: 100%;
				height: 34px;
				padding: 6px 12px;
				font-size: 14px;
				line-height: 1.42857143;
				color: #555;
				background-color: #fff;
				background-image: none;
				border: 1px solid #ccc;
				border-radius: 4px;
				-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
				box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
				-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
				-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
				transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		}
		
		.input_postcode{
			width: 8em;
			display: inline-block;
		}

		.icon_postcode{
		  padding-right: 5px;
		  display: inline-block;
		}
		
		.input_radio{
			margin: 0 3px 0 0;
		}
		.input_radio_lable{
			margin: 0 1em 0 0;
		}
		
		.submit{
			text-align: center;
			margin: 30px auto;
			.button{
				display: inline-block;
				padding: 12px 55px;
				text-align: center;
				color: #fff;
				background-color: #428bca;
				font-size: 18px;
				line-height: 1.3;
				border-radius: 6px;
				border: 1px solid #357EBD;
			}
			.back_button{
				background-color: #c0c0c0;
				border:1px solid #959595;
			}
			.button:hover{
				background-color: #285E8E;
			}
			.back_button:hover{
				background-color: #959595;
			}
		}

		
	}

	.error_text{
		color: #f00;
		background: #fde4e4;
		padding: 2px 5px;
		margin: 5px 0 0;
		border-radius: 3px;
		border: 1px solid #f00;
		font-size: 12px;
	}
	
	.thanks{
			padding: 30px;
			background: #f7f7f7;
			max-width: 840px;
			width: 100%;
			margin: 0 auto 60px;
		& h4{
			text-align: center;
			font-size: 28px;
			font-weight: 700;		
		}
		& h5{
			font-size: 18px;
			text-align: center;
			 margin: 15px 0;		
		}
		& p{ text-align: center;}
	}


}