diff --git a/inc/theme_support.php b/inc/theme_support.php
index 6b0c771..93ee882 100644
--- a/inc/theme_support.php
+++ b/inc/theme_support.php
@@ -33,9 +33,6 @@ function setup_theme() {
 	add_theme_support( 'automatic-feed-links' );
 	// Gutenberg用
 	add_theme_support( 'align-wide' ); // 画像の全幅表示などを可能に
-	add_theme_support( 'custom-line-height' );
-	add_theme_support( 'custom-units', 'px', 'rem', 'em', '%', 'vw', 'vh' );
-	add_theme_support( 'custom-spacing' );
 	remove_theme_support( 'core-block-patterns' );
 
 	// html5サポート
diff --git a/src/scss/object/utility/_alignwide.scss b/src/scss/object/utility/_alignwide.scss
index 488e9e7..cea893f 100644
--- a/src/scss/object/utility/_alignwide.scss
+++ b/src/scss/object/utility/_alignwide.scss
@@ -3,7 +3,7 @@
 .alignwide {
 	position: relative;
 	left: calc(var(--ark-alignwide_ex_width) * -1);
-	width: calc(100% + var(--ark-alignwide_ex_width) * 2);
+	width: var(--wp--style--global--wide-size);
 	max-width: unset !important; // embedなどのmax100%のものを上書き
 
 	// div中の全幅は、内部に収まるように。（ネスト内でも広げたいケースはそれぞれにrevertで0を打ち消す）
diff --git a/src/scss/object/utility/_font-size.scss b/src/scss/object/utility/_font-size.scss
index 463891f..75fa616 100644
--- a/src/scss/object/utility/_font-size.scss
+++ b/src/scss/object/utility/_font-size.scss
@@ -1,17 +1,14 @@
 
-.u-fz-xs,
-.has-xsmall-font-size {
+.u-fz-xs {
 	font-size: var(--ark-fz--xs, .75em) !important;
 
 }
 
-.u-fz-s,
-.has-small-font-size {
+.u-fz-s {
 	font-size: var(--ark-fz--s, .9em) !important;
 }
 
-.u-fz-n,
-.has-normal-font-size {
+.u-fz-n {
 	font-size: var(--ark-fz--n, 1rem) !important;
 }
 
@@ -19,21 +16,14 @@
 	font-size: var(--ark-fz--m, 1.1em) !important;
 }
 
-.u-fz-l,
-.has-large-font-size {
+.u-fz-l {
 	font-size: var(--ark-fz--l, 1.25em) !important;
 }
 
-.u-fz-xl,
-.has-xlarge-font-size {
+.u-fz-xl {
 	font-size: var(--ark-fz--xl, 1.5em) !important;
 }
 
-.u-fz-xxl,
-.has-xxlarge-font-size {
+.u-fz-xxl {
 	font-size: var(--ark-fz--xxl, 2em) !important;
 }
-
-.has-huge-font-size {
-	font-size: var(--ark-fz--huge, 2.75em) !important;
-}
diff --git a/src/scss/post_content/_editor.scss b/src/scss/post_content/_editor.scss
index 9f09bd7..4ed1333 100644
--- a/src/scss/post_content/_editor.scss
+++ b/src/scss/post_content/_editor.scss
@@ -3,6 +3,11 @@
 .mce-content-body,
 .editor-styles-wrapper {
 
+	// theme.json を入れた事で消えるpaddingを追加
+	&.editor-styles-wrapper {
+		padding: 8px;
+	}
+
 	@import "./post_content";
 
 	// エディターではどちらも表示させる（編集できるように）
diff --git a/src/scss/post_content/common/utility/_colors.scss b/src/scss/post_content/common/utility/_colors.scss
deleted file mode 100644
index 77d287c..0000000
--- a/src/scss/post_content/common/utility/_colors.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-
-
-/*
-  テキストカラー
- */
-.has-ark-main-color {
-	color: var(--ark-color--main) !important;
-}
-
-.has-ark-text-color {
-	color: var(--ark-color--text) !important;
-}
-
-.has-ark-link-color {
-	color: var(--ark-color--link) !important;
-}
-
-.has-ark-bg-color {
-	color: var(--ark-color--bg) !important;
-}
-
-.has-ark-gray-color {
-	color: var(--ark-color--gray) !important;
-}
-
-
-/*
-  背景カラー
- */
-.has-ark-main-background-color {
-	background-color: var(--ark-color--main) !important;
-}
-
-.has-ark-text-background-color {
-	background-color: var(--ark-color--text) !important;
-}
-
-.has-ark-link-background-color {
-	background-color: var(--ark-color--link) !important;
-}
-
-.has-ark-bg-background-color {
-	background-color: var(--ark-color--bg) !important;
-}
-
-.has-ark-gray-background-color {
-	background-color: var(--ark-color--gray) !important;
-}
diff --git a/theme.json b/theme.json
new file mode 100644
index 0000000..2680e5d
--- /dev/null
+++ b/theme.json
@@ -0,0 +1,40 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/theme.json",
+	"version": 2,
+	"settings": {
+		"layout": {
+			"contentSize": "var(--ark-block_width)",
+			"wideSize": "calc(100% + var(--ark-alignwide_ex_width)*2)"
+		},
+		"typography": {
+			"lineHeight": true
+		},
+		"spacing": {
+			"padding": true,
+			"margin": true,
+			"spacingSizes": [
+				{
+					"name": "Small",
+					"slug": "s",
+					"size": "var(--ark-mt--s)"
+				},
+				{
+					"name": "Normal",
+					"slug": "normal",
+					"size": "var(--ark-mt)"
+				},
+				{
+					"name": "Normal",
+					"slug": "h",
+					"size": "var(--ark-h-mt--h)"
+				}
+			]
+		},
+		"border": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		}
+	}
+}