@charset "utf-8";
/* CSS Document */
.article.form{width:100%;padding:0;}
.article.form form{
	max-width:70%;
	margin:0 auto;
}
table.formTable{
	width:80%;
	margin:0 auto 1em;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	text-align:left;
	padding:0.5em 1em;
	position:relative;
}
table.formTable th span{
	position:absolute;
	right:1em;
	font-size:80%;
	background:#FF4540;
	color:#fff;
	border-radius:4px;
	padding:0.1em 0.5em;
}
table.formTable td{
	padding:1em;
}

input[type="radio"]{margin-left:1em;}
input[type="radio"]:first-of-type{margin-left:0em;}

input[type="text"]{width:60%;}

.ad span input[type="text"]{width:9em;margin-bottom:0.5em;}
.size input[type="text"]{width:6em;}
textarea{width:100%;}
.sp{
	display: none;
}
/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:960px) {
table.formTable{
	width:100%;
	}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"] {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
.ad span input[type="text"]{width:9em;margin-bottom:-0.5em;}
	.size span{
		display:flex;
		align-items:flex-end;
		margin-bottom:0.5em;
	}
	input[type="radio"]:first-of-type {
		margin-left: 1em;
	}
	textarea{width:100%;}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}
.sp{
	display: block;
}
}

@media screen and (max-width:576px){
	.article.form{
		width:90%;
	}
	.article.form form{
	max-width:100%;
	margin:0;
	box-sizing: border-box;
}
.size input[type="text"]{width:2.5em;}
table.formTable{
	width:100%;
	}

}