diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/.markuplintrc b/packages/@d-zero/scaffold/__assets/_libs/component/form/.markuplintrc
new file mode 100644
index 00000000..37fdfcbc
--- /dev/null
+++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/.markuplintrc
@@ -0,0 +1,8 @@
+{
+	// TODO: コミットを通すための暫定設定。PR 作成までにルールの上書き内容を調整する
+	"extends": ["../../../../markuplint.config.js"],
+	"rules": {
+		"class-naming": false,
+		"placeholder-label-option": false
+	}
+}
diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-field.css b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-field.css
new file mode 100644
index 00000000..ed9e19e8
--- /dev/null
+++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-field.css
@@ -0,0 +1,76 @@
+.c-form-field {
+	display: block flow;
+	container: c-form-field / inline-size;
+}
+
+.c-form-field__grid {
+	display: grid;
+	grid-template:
+		'main' auto
+		'.' 0.5rem
+		'description' auto
+		'.' 0.5rem
+		'error-message' auto / minmax(0, 1fr);
+
+	> :where(.c-form-field__main) {
+		grid-area: main;
+	}
+
+	> :where(.c-form-field__description) {
+		grid-area: description;
+	}
+
+	> :where(.c-form-field__error-message) {
+		grid-area: error-message;
+	}
+}
+
+.c-form-field__main {
+	&:has(
+		.c-form-field__input > .c-form-input-text,
+		.c-form-field__input > .c-form-input-select
+	) {
+		display: flex;
+		flex-flow: row nowrap;
+		align-items: center;
+
+		@container (max-inline-size: 40ch) {
+			flex-direction: column;
+			align-items: start;
+		}
+
+		> :where(:not(:empty) + :not(:empty)) {
+			margin-inline-start: 0.5rem;
+
+			@container (max-inline-size: 40ch) {
+				margin-inline-start: 0;
+			}
+		}
+
+		> :where(.c-form-field__attachment-before, .c-form-field__attachment-after) {
+			flex-shrink: 0;
+			max-inline-size: calc(100% / 4);
+		}
+
+		> :where(.c-form-field__input) {
+			min-inline-size: 0;
+			max-inline-size: 100%;
+		}
+	}
+}
+
+.c-form-field__attachment-before {
+	/* 前見出しのスタイルを記述 */
+}
+
+.c-form-field__attachment-after {
+	/* 後見出しのスタイルを記述 */
+}
+
+.c-form-field__description {
+	/* 説明文のスタイルを記述 */
+}
+
+.c-form-field__error-message {
+	/* エラーメッセージのスタイルを記述 */
+}
diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-field.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-field.pug
new file mode 100644
index 00000000..c4012bcd
--- /dev/null
+++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-field.pug
@@ -0,0 +1,37 @@
+//- isGrouped: 同一 fieldset/legend 内に複数フィールドを配置する場合に true。
+	親の見出し構造と一致させること（グループ化あり = fieldset/legend、なし = div/label）
+	.c-form-field__input の中身（cFormInputXxx の呼び出し）は呼び出し側が block で渡す
+mixin cFormField(params = {})
+	-
+		const props = Object.assign({ type: "text", name: "", beforeAttachment: "", afterAttachment: "", description: "", errorMessage: "", isGrouped: false, isConfirm: false }, params);
+		const nameFirstLetterUppercased = props.name.charAt(0).toUpperCase() + props.name.slice(1);
+		const idInput = `MailMessage${nameFirstLetterUppercased}`;
+		const idField = `FieldMailMessage${nameFirstLetterUppercased}`;
+		// checkbox / radio は各選択肢が label を持つため、前後見出しは label にしない
+		const hasOwnOptionLabels = props.type === "checkbox" || props.type === "radio";
+		// CMS要件: グループ化している場合は 前見出し を labelとする。前見出しが空であれば 後見出しを labelとする
+		const isBeforeAttachmentLabel = Boolean(props.isGrouped && !hasOwnOptionLabels && props.beforeAttachment);
+		const isAfterAttachmentLabel = Boolean(props.isGrouped && !hasOwnOptionLabels && !props.beforeAttachment && props.afterAttachment);
+	.c-form-field(data-type=props.type id=idField)
+		.c-form-field__grid
+			.c-form-field__main
+				.c-form-field__attachment-before
+					if isBeforeAttachmentLabel
+						label(for=idInput) #{ props.beforeAttachment }
+					else if props.beforeAttachment
+						span #{ props.beforeAttachment }
+
+				.c-form-field__input
+					block
+
+				.c-form-field__attachment-after
+					if isAfterAttachmentLabel
+						label(for=idInput) #{ props.afterAttachment }
+					else if props.afterAttachment
+						span #{ props.afterAttachment }
+
+			if !props.isConfirm
+				.c-form-field__description
+					span #{ props.description }
+				.c-form-field__error-message
+					span #{ props.errorMessage }
diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-fieldset.css b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-fieldset.css
new file mode 100644
index 00000000..89ee7824
--- /dev/null
+++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-fieldset.css
@@ -0,0 +1,64 @@
+.c-form-fieldset {
+	display: block flow;
+}
+
+.c-form-fieldset__grid {
+	display: grid;
+	grid-template:
+		'heading' auto
+		'.' 0.5rem
+		'attention' auto
+		'.' 0.5rem
+		'field' auto
+		/ 1fr auto;
+
+	> :where(.c-form-fieldset__heading) {
+		grid-area: heading;
+	}
+
+	> :where(.c-form-fieldset__attention) {
+		grid-area: attention;
+	}
+
+	> :where(.c-form-fieldset__field) {
+		grid-area: field;
+	}
+}
+
+.c-form-fieldset__heading {
+	> :where(*) {
+		display: inline flow;
+	}
+
+	> :where(:not(:first-child)) {
+		margin-inline: 0.5rem 0;
+	}
+}
+
+.c-form-fieldset__field {
+	> :where(:not(:first-child)) {
+		margin-block-start: 1rem;
+	}
+}
+
+.c-form-fieldset__heading-main {
+	&:where(label) {
+		cursor: pointer;
+	}
+}
+
+.c-form-fieldset__heading-badge {
+	/* 必須・任意バッジのスタイルを記述 */
+
+	&:where([data-kind='required']) {
+		/* 必須バッジのスタイルを記述 */
+	}
+
+	&:where([data-kind='optional']) {
+		/* 任意バッジのスタイルを記述 */
+	}
+}
+
+.c-form-fieldset__attention {
+	/* 注意書きのスタイルを記述 */
+}
diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-fieldset.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-fieldset.pug
new file mode 100644
index 00000000..fee2176b
--- /dev/null
+++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-fieldset.pug
@@ -0,0 +1,37 @@
+//- name/key のどちらを渡すかで fieldset/legend（isGrouped）か div/label かを自動判定する:
+	- name: 単一 input に label-for で紐付けられる場合（text/select/textarea/file の単一フィールド）
+	- key: 単一 input に紐付けられない場合（複数フィールドをまとめる、または checkbox/radio は
+	CMS要件により単一フィールドでも fieldset/legend にする）を、意味のわかる短い語で渡す
+mixin cFormFieldset(params = {})
+	-
+		const props = Object.assign({ heading: "", name: null, key: null, isRequired: false, attention: "" }, params);
+		const badgeKind = props.isRequired ? "required" : "optional";
+		const badgeLabel = props.isRequired ? "必須" : "任意";
+		const isGrouped = Boolean(props.key);
+		// c-form-field.pug の idInput と同じ計算式（name/key から MailMessage+PascalCase のidを導出）
+		const toPascalCase = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+		const groupSource = props.key || props.name;
+		const id = groupSource ? `GroupMailMessage${toPascalCase(groupSource)}` : null;
+		const labelFor = !isGrouped && props.name ? `MailMessage${toPascalCase(props.name)}` : null;
+	.c-form-fieldset(id=id)
+		if isGrouped
+			fieldset.c-form-fieldset__grid
+				legend.c-form-fieldset__heading
+					span.c-form-fieldset__heading-main #{ props.heading }
+					span.c-form-fieldset__heading-badge(data-kind=badgeKind) #{ badgeLabel }
+				.c-form-fieldset__attention
+					span #{ props.attention }
+				.c-form-fieldset__field
+					block
+		else
+			.c-form-fieldset__grid
+				.c-form-fieldset__heading
+					if labelFor
+						label.c-form-fieldset__heading-main(for=labelFor) #{ props.heading }
+					else
+						span.c-form-fieldset__heading-main #{ props.heading }
+					span.c-form-fieldset__heading-badge(data-kind=badgeKind) #{ badgeLabel }
+				.c-form-fieldset__attention
+					span #{ props.attention }
+				.c-form-fieldset__field
+					block
diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input-confirm.css b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input-confirm.css
new file mode 100644
index 00000000..e5b61b3b
--- /dev/null
+++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input-confirm.css
@@ -0,0 +1,18 @@
+/* stylelint-disable-next-line @d-zero/component */
+.c-form-input-confirm-text {
+	display: block flow;
+}
+
+/* stylelint-disable-next-line @d-zero/component */
+.c-form-input-confirm-multi {
+	display: block flow;
+
+	:where(ul li) {
+		list-style: disc;
+	}
+}
+
+/* stylelint-disable-next-line @d-zero/component */
+.c-form-input-confirm-textarea {
+	display: block flow;
+}
diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input-confirm.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input-confirm.pug
new file mode 100644
index 00000000..071e0a9d
--- /dev/null
+++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input-confirm.pug
@@ -0,0 +1,19 @@
+mixin cFormInputConfirmText(params = {})
+	-
+		const props = Object.assign({ value: "__入力内容__" }, params);
+	.c-form-input-confirm-text
+		span #{ props.value }
+
+mixin cFormInputConfirmMulti(params = {})
+	-
+		const props = Object.assign({ value: ["__選択項目1__", "__選択項目2__"] }, params);
+	.c-form-input-confirm-multi
+		ul
+			each value in props.value
+				li #{ value }
+
+mixin cFormInputConfirmTextarea(params = {})
+	-
+		const props = Object.assign({ value: "__選択項目__" }, params);
+	.c-form-input-confirm-textarea
+		p #{ props.value }
diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input.css b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input.css
new file mode 100644
index 00000000..bae18e10
--- /dev/null
+++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input.css
@@ -0,0 +1,42 @@
+/* stylelint-disable-next-line @d-zero/component */
+.c-form-input-text {
+	max-inline-size: 100%;
+
+	&:not([size]) {
+		inline-size: 100%;
+	}
+}
+
+/* stylelint-disable-next-line @d-zero/component */
+.c-form-input-select {
+	padding-block: 0.5rem;
+	padding-inline: 0.5rem calc(0.5rem + 24px + 2px);
+	appearance: none;
+	background-image: url('/img/bg-arrow.svg');
+	background-repeat: no-repeat;
+	background-position: right calc(0.2rem + 2px) top calc(100% / 2 + 2px);
+	border: 1px solid var(--border-color);
+	border-radius: 0.2rem;
+}
+
+/* stylelint-disable-next-line @d-zero/component */
+.c-form-input-checkbox {
+	/* チェックボックスのスタイルを記述 */
+}
+
+/* stylelint-disable-next-line @d-zero/component */
+.c-form-input-radio {
+	/* ラジオボタンのスタイルを記述 */
+}
+
+/* stylelint-disable-next-line @d-zero/component */
+.c-form-input-textarea {
+	&:not([cols]) {
+		inline-size: 100%;
+	}
+}
+
+/* stylelint-disable-next-line @d-zero/component */
+.c-form-input-file {
+	/* ファイル選択のスタイルを記述 */
+}
diff --git a/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input.pug b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input.pug
new file mode 100644
index 00000000..81fb94ad
--- /dev/null
+++ b/packages/@d-zero/scaffold/__assets/_libs/component/form/c-form-input.pug
@@ -0,0 +1,75 @@
+mixin cFormInputText(params = {})
+	-
+		const props = Object.assign({ name: "field1", maxlength: null, size: null, isRequired: true }, params);
+		const inputName = `data[MailMessage][${props.name}]`;
+		const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`;
+	input.c-form-input-text(
+		type="text"
+		name=inputName
+		maxlength=props.maxlength
+		size=props.size
+		required=props.isRequired
+		id=idInput)
+
+mixin cFormInputSelect(params = {})
+	-
+		const props = Object.assign({ name: "address1", options: [{value: "", label: "選択してください"}], isRequired: true }, params);
+		const inputName = `data[MailMessage][${props.name}]`;
+		const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`;
+	select.c-form-input-select(name=inputName required=props.isRequired id=idInput)
+		each option in props.options
+			option(value=option.value)= option.label
+
+//- checkbox には required を出力しない（各 input に付くと「全項目チェック必須」の挙動になるため。
+	「1つ以上選択必須」の検証はサーバー側の責務）
+mixin cFormInputCheckbox(params = {})
+	-
+		const props = Object.assign({ name: "category", options: [{value: "Item1", label: "項目1"}] }, params);
+		const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`;
+		const hiddenName = `data[MailMessage][${props.name}]`;
+		const inputName = `data[MailMessage][${props.name}][]`;
+	//- 未選択時にもキーが送信されるようにするための hidden（CMS 仕様）
+	.c-form-input-checkbox
+		input.c-form-input-checkbox__hidden(type="hidden" name=hiddenName value id=idInput)
+		each option in props.options
+			-
+				const id = idInput + option.value;
+			.c-form-input-checkbox__item
+				input(type="checkbox" name=inputName value=option.value id=id)
+				label(for=id) #{ option.label }
+
+mixin cFormInputRadio(params = {})
+	-
+		const props = Object.assign({ name: "sex", options: [{value: "1", label: "男性"}, {value: "2", label: "女性"}], isRequired: true }, params);
+		const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`;
+		const inputName = `data[MailMessage][${props.name}]`;
+		const idHidden = `${idInput}_`;
+	//- 未選択時にもキーが送信されるようにするための hidden（CMS 仕様）
+	.c-form-input-radio
+		input.c-form-input-radio__hidden(type="hidden" name=inputName value id=idHidden)
+		each option in props.options
+			-
+				const id = idInput + option.value;
+			.c-form-input-radio__item
+				span
+					input(type="radio" name=inputName required=props.isRequired value=option.value id=id)
+					label(for=id) #{ option.label }
+
+mixin cFormInputTextarea(params = {})
+	-
+		const props = Object.assign({ name: "message", rows: null, cols: null, isRequired: true }, params);
+		const inputName = `data[MailMessage][${props.name}]`;
+		const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`;
+	textarea.c-form-input-textarea(
+		name=inputName
+		rows=props.rows
+		cols=props.cols
+		required=props.isRequired
+		id=idInput)
+
+mixin cFormInputFile(params = {})
+	-
+		const props = Object.assign({ name: "file", isRequired: true }, params);
+		const inputName = `data[MailMessage][${props.name}]`;
+		const idInput = `MailMessage${props.name.charAt(0).toUpperCase() + props.name.slice(1)}`;
+	input.c-form-input-file(name=inputName type="file" required=props.isRequired id=idInput)
diff --git a/packages/@d-zero/scaffold/__assets/_libs/data/data.yml b/packages/@d-zero/scaffold/__assets/_libs/data/data.yml
index e6d2cfdb..a8943ebc 100644
--- a/packages/@d-zero/scaffold/__assets/_libs/data/data.yml
+++ b/packages/@d-zero/scaffold/__assets/_libs/data/data.yml
@@ -25,3 +25,291 @@ articles:
       - 甘い
       - 酸っぱい
       - オレンジ
+
+prefectureOptions:
+  - value: '北海道'
+    label: '北海道'
+  - value: '青森県'
+    label: '青森県'
+  - value: '岩手県'
+    label: '岩手県'
+  - value: '宮城県'
+    label: '宮城県'
+  - value: '秋田県'
+    label: '秋田県'
+  - value: '山形県'
+    label: '山形県'
+  - value: '福島県'
+    label: '福島県'
+  - value: '茨城県'
+    label: '茨城県'
+  - value: '栃木県'
+    label: '栃木県'
+  - value: '群馬県'
+    label: '群馬県'
+  - value: '埼玉県'
+    label: '埼玉県'
+  - value: '千葉県'
+    label: '千葉県'
+  - value: '東京都'
+    label: '東京都'
+  - value: '神奈川県'
+    label: '神奈川県'
+  - value: '新潟県'
+    label: '新潟県'
+  - value: '富山県'
+    label: '富山県'
+  - value: '石川県'
+    label: '石川県'
+  - value: '福井県'
+    label: '福井県'
+  - value: '山梨県'
+    label: '山梨県'
+  - value: '長野県'
+    label: '長野県'
+  - value: '岐阜県'
+    label: '岐阜県'
+  - value: '静岡県'
+    label: '静岡県'
+  - value: '愛知県'
+    label: '愛知県'
+  - value: '三重県'
+    label: '三重県'
+  - value: '滋賀県'
+    label: '滋賀県'
+  - value: '京都府'
+    label: '京都府'
+  - value: '大阪府'
+    label: '大阪府'
+  - value: '兵庫県'
+    label: '兵庫県'
+  - value: '奈良県'
+    label: '奈良県'
+  - value: '和歌山県'
+    label: '和歌山県'
+  - value: '鳥取県'
+    label: '鳥取県'
+  - value: '島根県'
+    label: '島根県'
+  - value: '岡山県'
+    label: '岡山県'
+  - value: '広島県'
+    label: '広島県'
+  - value: '山口県'
+    label: '山口県'
+  - value: '徳島県'
+    label: '徳島県'
+  - value: '香川県'
+    label: '香川県'
+  - value: '愛媛県'
+    label: '愛媛県'
+  - value: '高知県'
+    label: '高知県'
+  - value: '福岡県'
+    label: '福岡県'
+  - value: '佐賀県'
+    label: '佐賀県'
+  - value: '長崎県'
+    label: '長崎県'
+  - value: '熊本県'
+    label: '熊本県'
+  - value: '大分県'
+    label: '大分県'
+  - value: '宮崎県'
+    label: '宮崎県'
+  - value: '鹿児島県'
+    label: '鹿児島県'
+  - value: '沖縄県'
+    label: '沖縄県'
+
+birthYearOptions:
+  - value: '1'
+    label: '1923年'
+  - value: '2'
+    label: '1924年'
+  - value: '3'
+    label: '1925年'
+  - value: '4'
+    label: '1926年'
+  - value: '5'
+    label: '1927年'
+  - value: '6'
+    label: '1928年'
+  - value: '7'
+    label: '1929年'
+  - value: '8'
+    label: '1930年'
+  - value: '9'
+    label: '1931年'
+  - value: '10'
+    label: '1932年'
+  - value: '11'
+    label: '1933年'
+  - value: '12'
+    label: '1934年'
+  - value: '13'
+    label: '1935年'
+  - value: '14'
+    label: '1936年'
+  - value: '15'
+    label: '1937年'
+  - value: '16'
+    label: '1938年'
+  - value: '17'
+    label: '1939年'
+  - value: '18'
+    label: '1940年'
+  - value: '19'
+    label: '1941年'
+  - value: '20'
+    label: '1942年'
+  - value: '21'
+    label: '1943年'
+  - value: '22'
+    label: '1944年'
+  - value: '23'
+    label: '1945年'
+  - value: '24'
+    label: '1946年'
+  - value: '25'
+    label: '1947年'
+  - value: '26'
+    label: '1948年'
+  - value: '27'
+    label: '1949年'
+  - value: '28'
+    label: '1950年'
+  - value: '29'
+    label: '1951年'
+  - value: '30'
+    label: '1952年'
+  - value: '31'
+    label: '1953年'
+  - value: '32'
+    label: '1954年'
+  - value: '33'
+    label: '1955年'
+  - value: '34'
+    label: '1956年'
+  - value: '35'
+    label: '1957年'
+  - value: '36'
+    label: '1958年'
+  - value: '37'
+    label: '1959年'
+  - value: '38'
+    label: '1960年'
+  - value: '39'
+    label: '1961年'
+  - value: '40'
+    label: '1962年'
+  - value: '41'
+    label: '1963年'
+  - value: '42'
+    label: '1964年'
+  - value: '43'
+    label: '1965年'
+  - value: '44'
+    label: '1966年'
+  - value: '45'
+    label: '1967年'
+  - value: '46'
+    label: '1968年'
+  - value: '47'
+    label: '1969年'
+  - value: '48'
+    label: '1970年'
+  - value: '49'
+    label: '1971年'
+  - value: '50'
+    label: '1972年'
+  - value: '51'
+    label: '1973年'
+  - value: '52'
+    label: '1974年'
+  - value: '53'
+    label: '1975年'
+  - value: '54'
+    label: '1976年'
+  - value: '55'
+    label: '1977年'
+  - value: '56'
+    label: '1978年'
+  - value: '57'
+    label: '1979年'
+  - value: '58'
+    label: '1980年'
+  - value: '59'
+    label: '1981年'
+  - value: '60'
+    label: '1982年'
+  - value: '61'
+    label: '1983年'
+  - value: '62'
+    label: '1984年'
+  - value: '63'
+    label: '1985年'
+  - value: '64'
+    label: '1986年'
+  - value: '65'
+    label: '1987年'
+  - value: '66'
+    label: '1988年'
+  - value: '67'
+    label: '1989年'
+  - value: '68'
+    label: '1990年'
+  - value: '69'
+    label: '1991年'
+  - value: '70'
+    label: '1992年'
+  - value: '71'
+    label: '1993年'
+  - value: '72'
+    label: '1994年'
+  - value: '73'
+    label: '1995年'
+  - value: '74'
+    label: '1996年'
+  - value: '75'
+    label: '1997年'
+  - value: '76'
+    label: '1998年'
+  - value: '77'
+    label: '1999年'
+  - value: '78'
+    label: '2000年'
+  - value: '79'
+    label: '2001年'
+  - value: '80'
+    label: '2002年'
+  - value: '81'
+    label: '2003年'
+  - value: '82'
+    label: '2004年'
+  - value: '83'
+    label: '2005年'
+  - value: '84'
+    label: '2006年'
+  - value: '85'
+    label: '2007年'
+  - value: '86'
+    label: '2008年'
+  - value: '87'
+    label: '2009年'
+  - value: '88'
+    label: '2010年'
+  - value: '89'
+    label: '2011年'
+  - value: '90'
+    label: '2012年'
+  - value: '91'
+    label: '2013年'
+  - value: '92'
+    label: '2014年'
+  - value: '93'
+    label: '2015年'
+  - value: '94'
+    label: '2016年'
+  - value: '95'
+    label: '2017年'
diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input_v2.json b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input_v2.json
new file mode 100644
index 00000000..a4350d35
--- /dev/null
+++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input_v2.json
@@ -0,0 +1,4 @@
+{
+	"layout": "sub.pug",
+	"title": "メールフォーム入力ページ（新デザイン）"
+}
diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input_v2.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input_v2.pug
new file mode 100644
index 00000000..2e054049
--- /dev/null
+++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/300_form_input_v2.pug
@@ -0,0 +1,114 @@
+include /component/form/c-form-fieldset.pug
+include /component/form/c-form-field.pug
+include /component/form/c-form-input.pug
+
+.c-content-main
+	// CMS要件: メールフォーム概要
+	.cc-form-description
+		p こちらのフォームよりご応募ください。記入いただいた内容を検討の上、弊社人事担当者よりメールにてご返信いたします。
+	// CMS要件: メールフォーム概要ここまで
+
+	form#MailMessageIndexForm.cc-form(
+		action="__PATH_TO__"
+		enctype="multipart/form-data"
+		method="post"
+		accept-charset="utf-8"
+		novalidate)
+		input(type="hidden" name="_method" value="POST")
+		input#Token__TOKEN__(type="hidden" name="data[_Token][key]" value="__TOKEN__")
+		input#MailMessageMode(type="hidden" name="data[MailMessage][mode]")
+		.cc-form-field-list
+			+cFormFieldset({ key: "field1", heading: "フィールドグループ名", isRequired: true, attention: "注意書き" })
+				+cFormField({ type: "text", name: "field1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true })
+					+cFormInputText({ name: "field1", maxlength: 255, isRequired: true })
+				+cFormField({ type: "text", name: "field2", beforeAttachment: "", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: true })
+					+cFormInputText({ name: "field2", maxlength: 255, isRequired: true })
+			+cFormFieldset({ heading: "単体フィールド名", name: "field3", isRequired: true, attention: "注意書き" })
+				+cFormField({ type: "text", name: "field3", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "説明文", errorMessage: "エラーメッセージ", isGrouped: false })
+					+cFormInputText({ name: "field3", maxlength: 255, isRequired: true })
+			+cFormFieldset({ key: "name", heading: "氏名", isRequired: true })
+				+cFormField({ type: "text", name: "lastName", beforeAttachment: "姓", afterAttachment: "", description: "", errorMessage: "", isGrouped: true })
+					+cFormInputText({ name: "lastName", isRequired: true })
+				+cFormField({ type: "text", name: "firstName", beforeAttachment: "名", afterAttachment: "", description: "", errorMessage: "", isGrouped: true })
+					+cFormInputText({ name: "firstName", isRequired: true })
+			+cFormFieldset({ key: "nameKana1", heading: "フリガナ", isRequired: false, attention: "カタカナで入力してください" })
+				+cFormField({ type: "text", name: "lastNameKana", beforeAttachment: "セイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true })
+					+cFormInputText({ name: "lastNameKana", isRequired: true })
+				+cFormField({ type: "text", name: "firstNameKana", beforeAttachment: "メイ", afterAttachment: "", description: "", errorMessage: "", isGrouped: true })
+					+cFormInputText({ name: "firstNameKana", isRequired: true })
+			+cFormFieldset({ key: "zip", heading: "住所", isRequired: false })
+				+cFormField({ type: "text", name: "zip", beforeAttachment: "〒", afterAttachment: "", description: "ハイフンを除く半角数字で入力してください", errorMessage: "", isGrouped: true })
+					+cFormInputText({ name: "zip", maxlength: 8, size: 10, isRequired: false })
+				+cFormField({ type: "select", name: "address1", beforeAttachment: "都道府県", afterAttachment: "", description: "", errorMessage: "", isGrouped: true })
+					+cFormInputSelect({ name: "address1", options: [{ value: "", label: "選択してください" }, ...data.prefectureOptions], isRequired: false })
+				+cFormField({ type: "text", name: "address2", beforeAttachment: "市区町村", afterAttachment: "", description: "", errorMessage: "", isGrouped: true })
+					+cFormInputText({ name: "address2", maxlength: 200, size: 30, isRequired: false })
+				+cFormField({ type: "text", name: "address3", beforeAttachment: "番地", afterAttachment: "", description: "", errorMessage: "", isGrouped: true })
+					+cFormInputText({ name: "address3", maxlength: 200, size: 30, isRequired: false })
+			// CMS要件: グループ化していない場合でも チェックボックスでは fieldset/legend の構造
+			+cFormFieldset({ key: "category", heading: "チェックボックス単体", isRequired: true })
+				+cFormField({ type: "checkbox", name: "category", beforeAttachment: "チェックボックス前見出し", afterAttachment: "チェックボックス後見出し", description: "", errorMessage: "" })
+					+cFormInputCheckbox({
+	name: "category",
+	options: [
+		{ value: "Item1", label: "項目1" },
+		{ value: "Item2", label: "項目2" },
+		{ value: "Item3", label: "項目3" },
+	],
+})
+			+cFormFieldset({ key: "contents", heading: "チェックボックス", isRequired: true, attention: "注意書き" })
+				+cFormField({ type: "checkbox", name: "contents", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "" })
+					+cFormInputCheckbox({
+	name: "contents",
+	options: [
+		{ value: "1", label: "生麦生米生卵" },
+		{ value: "2", label: "赤パジャマ黄パジャマ茶パジャマ" },
+		{ value: "3", label: "青巻紙赤巻紙黄巻紙" },
+		{ value: "4", label: "隣の客はよく柿食う客だ" },
+		{ value: "5", label: "かえるぴょこぴょこ3ぴょこぴょこ あわせてぴょこぴょこ6ぴょこぴょこ" },
+		{ value: "6", label: "東京特許許可局許可局長" },
+		{ value: "7", label: "その他" },
+	],
+})
+				+cFormField({ type: "text", name: "contentsOther", beforeAttachment: "その他", afterAttachment: "後見出し", description: "その他を選択された場合は内容をご入力ください。", errorMessage: "", isGrouped: true })
+					+cFormInputText({ name: "contentsOther", maxlength: 255, size: 30, isRequired: false })
+			+cFormFieldset({ heading: "電話番号", name: "tel", isRequired: false, attention: "注意書き" })
+				+cFormField({ type: "text", name: "tel", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false })
+					+cFormInputText({ name: "tel", maxlength: 13, size: 15, isRequired: false })
+			+cFormFieldset({ heading: "メールアドレス", name: "email1", isRequired: true, attention: "注意書き" })
+				+cFormField({ type: "text", name: "email1", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false })
+					+cFormInputText({ name: "email1", maxlength: 255, size: 30, isRequired: false })
+			+cFormFieldset({ heading: "生まれ年", name: "birth", isRequired: true, attention: "注意書き" })
+				+cFormField({ type: "select", name: "birth", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false })
+					+cFormInputSelect({ name: "birth", options: [{ value: "", label: "選択してください" }, ...data.birthYearOptions], isRequired: false })
+			+cFormFieldset({ key: "sex", heading: "性別", isRequired: false, attention: "注意書き" })
+				+cFormField({ type: "radio", name: "sex", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "" })
+					+cFormInputRadio({
+	name: "sex",
+	options: [
+		{ value: "1", label: "男性" },
+		{ value: "2", label: "女性" },
+	],
+	isRequired: false,
+})
+			+cFormFieldset({ heading: "テキストエリア", name: "message", isRequired: false, attention: "注意書き" })
+				+cFormField({ type: "textarea", name: "message", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false })
+					+cFormInputTextarea({ name: "message", rows: 10, cols: null, isRequired: false })
+			+cFormFieldset({ heading: "テキストエリア", name: "message2", isRequired: false, attention: "注意書き" })
+				+cFormField({ type: "textarea", name: "message2", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false })
+					+cFormInputTextarea({ name: "message2", rows: 10, cols: 20, isRequired: false })
+			+cFormFieldset({ heading: "ファイル添付", name: "file", isRequired: false, attention: "注意書き" })
+				+cFormField({ type: "file", name: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", description: "", errorMessage: "", isGrouped: false })
+					+cFormInputFile({ name: "file", isRequired: false })
+		.cc-form-agreement
+			p
+				| 送信前に
+				a(href="__PATH_TO__") 個人情報保護方針
+				| をご確認ください。
+		.cc-form-submit
+			button#BtnMessageConfirm(type="submit"): span 送信内容を確認
+		input#TokenFields__TOKEN(type="hidden" name="data[_Token][fields]" value="__TOKEN__")
+		input#TokenUnlocked__TOKEN(
+			type="hidden"
+			name="data[_Token][unlocked]"
+			value="__TOKEN__")
diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm_v2.json b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm_v2.json
new file mode 100644
index 00000000..dddd09c5
--- /dev/null
+++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm_v2.json
@@ -0,0 +1,4 @@
+{
+	"layout": "sub.pug",
+	"title": "メールフォーム確認ページ（新デザイン）"
+}
diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm_v2.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm_v2.pug
new file mode 100644
index 00000000..7b4fc6fd
--- /dev/null
+++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/301_form_confirm_v2.pug
@@ -0,0 +1,77 @@
+include /component/form/c-form-fieldset.pug
+include /component/form/c-form-field.pug
+include /component/form/c-form-input-confirm.pug
+
+.c-content-main
+	.cc-form-description
+		p 以下の内容を送信します。
+
+	form#MailMessageIndexForm.cc-form(
+		action="__PATH_TO__"
+		enctype="multipart/form-data"
+		method="post"
+		accept-charset="utf-8"
+		novalidate)
+		input(type="hidden" name="_method" value="POST")
+		input#Token__TOKEN__(type="hidden" name="data[_Token][key]" value="__TOKEN__")
+		input#MailMessageMode(type="hidden" name="data[MailMessage][mode]")
+		.cc-form-field-list
+			+cFormFieldset({ heading: "フィールドグループ名", isRequired: true })
+				+cFormField({ beforeAttachment: "前見出し", afterAttachment: "後見出し", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+				+cFormField({ beforeAttachment: "", afterAttachment: "後見出し", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+			+cFormFieldset({ heading: "単体フィールド名", isRequired: true })
+				+cFormField({ beforeAttachment: "前見出し", afterAttachment: "後見出し", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+			+cFormFieldset({ heading: "氏名", isRequired: true })
+				+cFormField({ beforeAttachment: "姓", afterAttachment: "", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+				+cFormField({ beforeAttachment: "名", afterAttachment: "", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+			+cFormFieldset({ heading: "フリガナ", isRequired: false })
+				+cFormField({ beforeAttachment: "セイ", afterAttachment: "", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+				+cFormField({ beforeAttachment: "メイ", afterAttachment: "", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+			+cFormFieldset({ heading: "住所", isRequired: false })
+				+cFormField({ beforeAttachment: "〒", afterAttachment: "", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+				+cFormField({ type: "select", beforeAttachment: "都道府県", afterAttachment: "", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+				+cFormField({ beforeAttachment: "市区町村", afterAttachment: "", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+				+cFormField({ beforeAttachment: "番地", afterAttachment: "", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+			+cFormFieldset({ heading: "チェックボックス単体", isRequired: true })
+				+cFormField({ type: "checkbox", beforeAttachment: "チェックボックス前見出し", isConfirm: true })
+					+cFormInputConfirmMulti({ value: ["__選択項目1__", "__選択項目2__"] })
+			+cFormFieldset({ heading: "チェックボックス", isRequired: true })
+				+cFormField({ type: "checkbox", isConfirm: true })
+					+cFormInputConfirmMulti({ value: ["__選択項目1__", "__選択項目2__"] })
+				+cFormField({ beforeAttachment: "その他", afterAttachment: "", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+			+cFormFieldset({ heading: "電話番号", isRequired: false })
+				+cFormField({ beforeAttachment: "", afterAttachment: "", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+			+cFormFieldset({ heading: "メールアドレス", isRequired: true })
+				+cFormField({ beforeAttachment: "", afterAttachment: "", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+			+cFormFieldset({ heading: "生まれ年", isRequired: true })
+				+cFormField({ type: "select", beforeAttachment: "", afterAttachment: "", isConfirm: true })
+					+cFormInputConfirmText({ value: "__入力内容__" })
+			+cFormFieldset({ heading: "性別", isRequired: false })
+				+cFormField({ type: "radio", beforeAttachment: "", afterAttachment: "", value: "__選択項目__", isConfirm: true })
+					+cFormInputConfirmText({ value: "__選択項目__" })
+			+cFormFieldset({ heading: "テキストエリア", isRequired: false, attention: "注意書き" })
+				+cFormField({ type: "textarea", beforeAttachment: "", afterAttachment: "", isConfirm: true })
+					+cFormInputConfirmTextarea({ value: "__入力内容__" })
+			+cFormFieldset({ heading: "テキストエリア", isRequired: false })
+				+cFormField({ type: "textarea", beforeAttachment: "前見出し", afterAttachment: "後見出し", isConfirm: true })
+					+cFormInputConfirmTextarea({ value: "__入力内容__" })
+			+cFormFieldset({ heading: "ファイル添付", isRequired: false })
+				+cFormField({ type: "file", beforeAttachment: "前見出し", afterAttachment: "後見出し", value: "__ファイル名__", isConfirm: true })
+					+cFormInputConfirmText({ value: "__ファイル名__" })
+		.cc-form-submit
+			button(type="submit"): span 入力画面に戻る
+			button(type="submit"): span 送信する
diff --git a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/index.pug b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/index.pug
index bd69d904..64ab307b 100644
--- a/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/index.pug
+++ b/packages/@d-zero/scaffold/__assets/htdocs/__tmpl/index.pug
@@ -57,6 +57,8 @@ html(lang="ja")
 					.list-group-item: a(href="300_form_input.html") メールフォーム入力ページ
 					.list-group-item: a(href="301_form_confirm.html") メールフォーム確認ページ
 					.list-group-item: a(href="302_form_complete.html") メールフォーム完了ページ
+					.list-group-item: a(href="300_form_input_v2.html") メールフォーム入力ページ（新デザイン）
+					.list-group-item: a(href="301_form_confirm_v2.html") メールフォーム確認ページ（新デザイン）
 					// その他は400番台
 
 				.list-group.mt-5
diff --git a/packages/@d-zero/scaffold/__assets/htdocs/css/style.css b/packages/@d-zero/scaffold/__assets/htdocs/css/style.css
index aaf08ce6..b9bff57e 100644
--- a/packages/@d-zero/scaffold/__assets/htdocs/css/style.css
+++ b/packages/@d-zero/scaffold/__assets/htdocs/css/style.css
@@ -18,6 +18,10 @@
 @import '@/component/c-media-list.css' layer(component);
 @import '@/component/c-media.css' layer(component);
 @import '@/component/c-content-index.css' layer(component);
+@import '@/component/form/c-form-fieldset.css' layer(component);
+@import '@/component/form/c-form-field.css' layer(component);
+@import '@/component/form/c-form-input.css' layer(component);
+@import '@/component/form/c-form-input-confirm.css' layer(component);
 @import '@burger-editor/css' layer(main-base);
 @import '@/component/c-content-main.css' layer(main);