RWDな<h1>よくあるRWDなお問い合わせフォーム</h1>
<form class="h-adr">
<input type="hidden" class="p-country-name" value="Japan">
	<div class="table_basic01">
		<dl>
			<dt>お問い合わせ種別</dt>
			<dd class="form_parts01">
				<div>
					<label><input type="checkbox" name="select01" value="このブログについて">このブログについて</label>
					<label><input type="checkbox" name="select02" value="アクセシビリティについて">アクセシビリティについて</label>
					<label><input type="checkbox" name="select03" value="サイト制作について">サイト制作について</label>
					<label><input type="checkbox" name="select04" value="メディア取材について">メディア取材について</label>
					<label><input type="checkbox" name="select05" value="その他">その他</label>
				</div>
			</dd>
		</dl>
		<dl>
			<dt>お名前</dt>
			<dd>
				<label><input type="text" name="your-name" value="" class="" placeholder="出路樽 愛子"></label>
			</dd>
		</dl>
		<dl>
			<dt>ふりがな</dt>
			<dd>
				<label><input type="text" name="your-name-kana" value="" class="" placeholder="でじたる あいこ"></label>
			</dd>
		</dl>
		<dl>
			<dt>会社名</dt>
			<dd>
				<label><input type="text" name="company" value="" class="" placeholder="株式会社デジタルアイデンティティ"></label>
			</dd>
		</dl>
		<dl>
			<dt>性別</dt>
			<dd class="form_parts01">
				<div>
					<label><input type="radio" name="sex" value="未回答" checked="checked">未回答</label>
					<label><input type="radio" name="sex" value="男性">男性</label>
					<label><input type="radio" name="sex" value="女性">女性</label>
				</div>
			</dd>
		</dl>
		<dl>
			<dt>メールアドレス</dt>
			<dd>
				<label><input type="text" name="email" value="" class="" placeholder="sample@digitalidentity.co.jp"></label>
			</dd>
		</dl>
		<dl>
			<dt>電話番号</dt>
			<dd>
				<label><input type="text" name="tel" value="" class="" placeholder="090-1234-5678"></label>
			</dd>
		</dl>
		<dl>
			<dt class="any">郵便番号(ハイフンなし)</dt>
			<dd>
				<label><input type="text" name="zip" value="" class="p-postal-code" maxlength="7" placeholder="1500022"></label>
			</dd>
		</dl>
		<dl>
			<dt class="any">都道府県</dt>
			<dd>
				<label><input type="text" name="state" value="" class="p-region" placeholder="東京都"></label>
			</dd>
		</dl>
		<dl>
			<dt class="any">住所</dt>
			<dd>
				<label><input type="text" name="address" value="" class="p-locality p-street-address p-extended-address" placeholder="渋谷区恵比寿南1-15-1 A-PLACE恵比寿南5F"></label>
			</dd>
		</dl>
		<dl>
			<dt class="any">お問い合わせ内容</dt>
			<dd>
				<label><textarea name="" id="" cols="30" rows="10" placeholder="ご意見、ご質問などをご入力ください。"></textarea></label>
			</dd>
		</dl>
		<div class="application01">
			<div class="btn_submit01">
				<button type="submit" name="submit"><p>送信する</p></button>
			<!-- /.btn_basic01 --></div>
		<!-- /.application --></div>
	<!-- /.table_basic01 --></div>
</form>

/* ==========================================================
!Reset
========================================================== */
* {
	outline: none;
}
/* 全ての要素のbox-sizingをデフォルトでborder-boxにする */
:root {
	box-sizing: border-box;
}
*,
::before,
::after {
	box-sizing: inherit;
}
/* ==========================================================
!Base
========================================================== */
h1 {
	text-align: center;
}
.table_basic01 {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #dddddd;

	dl {
		display: block;
		margin: 0;
		padding: 4% 0 4% 0;
		border-width: 0 0 1px 0;
		border-style: solid;
		border-color: #dddddd;

		dt {
			position: relative;
			width: 100%;
			margin: 0 0 2.5% 0;
			padding: 0;
			color: #00508e;
			font-weight: bold;
			text-align: left;
			line-height: 1.5;

			&:after {
				position: absolute;
				top: 4px;
				right: 0;
				display: inline-block;
				width: 35px;
				margin: 0 0 0 8px;
				padding: 4px 4px 3px 4px;
				color: #ffffff;
				font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
				font-size: 12px;
				line-height: 1;
				text-align: center;
				vertical-align: middle;
				content: "必須";
				background: #cc0000;
				transform: translate(0, -2px);
			}
			// 任意
			&.any {
				&:after {
					content: none;
				}
			}
		}
		dd {
			width: 100%;
			margin: 0;
			padding: 0;
			text-align: left;
			line-height: 1.5;

			&.form_parts01 {
				display: block;

				div {
					width: 100%;

					label {
						display: block;
						width: 100%;
					}
				}
			}
			.example01 {
				display: block;
				font-size: 12px;
			}
		}
	}
	/* !送信ボタン
	---------------------------------------------------------- */
	.btn_submit01 {
		position: relative;
		width: 80%;
		max-width: 200px;
		margin: 4% auto;

		&:hover,
		&:focus,
		&:active {
			opacity: 0.8;
		}
		button,
		input[type="submit"] {
			position: relative;
			z-index: 1;
			display: block;
			width: 100%;
			margin: 0;
			padding: 1em 2em 1em 2em;
			border: none;
			color: #ffffff;
			font-size: 16px;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0.1em;
			background: #00508e;
			cursor: pointer;

			p {
				margin: 0;
				padding: 0;
			}
		}
	}
}

/* 768px以上（タブレット） */
@media only screen and (min-width: 768px), print {
	.table_basic01 {
		dl {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			align-items: flex-start;
			position: relative;
			padding: 16px 0 16px 0;

			dt {
				position: relative;
				width: 30%;
				margin: 0;
				padding: 0;

/*				&:after {
					position: static;
					top: auto;
					right: auto;
					display: inline-block;
				}
*/			}
			dd {
				width: 65%;
				padding: 0 0 0 2%;
			}
		}
	}
}

/* ==========================================================
!Form Parts
========================================================== */
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
textarea {
	width: 100%;
}

$('.p-postal-code').on('keyup', function() {
	var max = $(this).attr('maxlength');
	var current = $(this).val().length;
 
	if(current >= max) {
		$(".p-locality").focus();
	}
});