diff --git a/_includes/style.scss b/_includes/style.scss
index a7b07e2..4ab3cbf 100644
--- a/_includes/style.scss
+++ b/_includes/style.scss
@@ -1,92 +1,101 @@
-// ブレークポイント
+:root {
+  --border-common: 1px solid #ccc;
+
+  --bg: url({{ site.url }}/{{ site.wiki.img_dir }}/background.png);
+  --color: #333;
+  --color-link: #588f3d;
+  --color-link-visited: #456336;
+  --font-family: "Hiragino Kaku Gothic ProN", "Helvetica Neue", "meiryo", "arial", "sans-serif";
+  --font-size: 17px;
+  --font-size-mobile: 14px;
+  --letter-spacing: 0.005rem;
+  --line-height: 1.5;
+  --selection-bg: #659b4b;
+  --selection-color: #fff;
+
+  // コンテナ
+  --container-bg: #f5f5f5;
+  --container-shadow: 0 0 10px 0 #ddd;
+  --container-columns: 21% 79%;
+  --container-padding-top-mobile: 1em;
+  --container-max-width: 1280px;
+
+  // ヘッダ
+  --header-bg: none;
+  --header-height: 3rem;
+  --header-color: #694;
+  --header-font-size: 1.25em;
+  --header-font-weight: 500;
+  --header-icon-vertical-adjustment: -.4em;
+
+  // メニュー
+  --menu-bg: none;
+
+  // メインコンテンツ
+  --main-bg: #fff;
+  --main-border-topleft: var(--border-common);
+  --main-border-radius: 10px 0 0 0;
+
+  // 本文 (右メニュー含む)
+  --article-padding: 0 1.25em 1em 1.25em;
+  --article-padding-mobile: 0 1em 1em 1em;
+
+  --article-dd-bg: #fcfcfc;
+  --article-dd-border-radius: 10px;
+
+  // 本文 - 見出し
+  --article-h2-border-bottom: 1px solid #ddd;
+  --article-h2-font-size: 1.5em;
+  --article-h3-border-bottom: 1px dotted #ddd;
+  --article-h3-font-size: 1.25em;
+  --article-h4-border-bottom: 1px dashed #ddd;
+  --article-h4-font-size: 1em;
+  --article-h5-border-bottom: none;
+  --article-h5-font-size: 1em;
+  --article-h6-border-bottom: none;
+  --article-h6-font-size: 1em;
+
+  // 本文 - ソースコード
+  --article-code-bg: #fefefe;
+  --article-code-border: 1px solid #ccc;
+  --article-code-border-radius: 10px;
+  --article-code-color: #333;
+  --article-code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  --article-pre-code-padding: 9.5px;
+
+  // 本文 - 目次
+  --toc-bg: #fcfcfc;
+  --toc-border: 1px solid #ccc;
+  --toc-border-radius: 10px;
+
+  // フッタ
+  --footer-bg: #333;
+  --footer-color: #fff;
+
+  // Modなどのスクリーンショット
+  --screenshot-max-height: 250px;
+  --screenshot-max-width: 500px;
+}
+
 @mixin media-desktop {
-    @media {{ site.media-desktop }} {
-        @content;
-    }
+  @media {{ site.media-desktop }} {
+    @content;
+  }
 }
+
 @mixin media-mobile {
-    @media {{ site.media-mobile }} {
-        @content;
-    }
+  @media {{ site.media-mobile }} {
+    @content;
+  }
 }
 
-// 共通
-$border-default: 1px solid #ccc;
-
-// 基本設定
-$background: url({{ site.url }}/{{ site.wiki.img_dir }}/background.png);
-$font-color: #333;
-$font-family: "Hiragino Kaku Gothic ProN", "Helvetica Neue", "meiryo", "arial", "sans-serif";
-$font-size: 18px;
-$font-size-mobile: 14px;
-$letter-spacing: 0.005em;
-$line-height: 1.5;
-$selection-background: #659b4b;
-$selection-font-color: #fff;
-
-// コンテナ
-$container-box-shadow: 0 0 10px 0 #ddd;
-$container-columns: 80% 20%;
-$container-padding-top-mobile: 1em;
-$container-max-width: 1280px;
-
-// ヘッダ
-$header-background: #fff;
-$header-height: 3em;
-$header-link-color: #694;
-$header-mobile-box-shadow: 0 0 5px 2px rgba(0,0,0,0.3);
-$header-img-vertical-adjustment: -.4em;
-
-// 本文 (右メニュー含む)
-$article-background: #fff;
-$article-padding: 0 1em 1em 1em;
-$article-padding-mobile: 0 0.5em 1em 0.5em;
-$article-link-color: #588f3d;
-$article-link-color-visited: #456336;
-
-$article-dd-background: #fcfcfc;
-$article-dd-border-radius: 10px;
-
-// 本文 - 見出し
-$article-h2-border-bottom: 1px solid #ddd;
-$article-h2-font-size: 1.5em;
-$article-h3-border-bottom: 1px dotted #ddd;
-$article-h3-font-size: 1.25em;
-$article-h4-border-bottom: 1px dashed #ddd;
-$article-h4-font-size: 1em;
-$article-h5-border-bottom: none;
-$article-h5-font-size: 1em;
-$article-h6-border-bottom: none;
-$article-h6-font-size: 1em;
-
-// 本文 - ソースコード
-$article-code-background: #fcfcfc;
-$article-code-border: 1px solid #ccc;
-$article-code-border-radius: 10px;
-$article-code-color: #333;
-$article-code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-$article-pre-code-padding: 9.5px;
-
-// 本文 - 目次
-$toc-background: #fcfcfc;
-$toc-border: 1px solid #ccc;
-$toc-border-radius: 10px;
-
-// フッタ
-$footer-background: #333;
-$footer-text-color: #fff;
-
-// Modなどのスクリーンショット
-$screenshot-max-height: 250px;
-$screenshot-max-width: 500px;
-
-// ----- インポート ----- //
-
 @import "normalize";
 @import "scaffolding";
 @import "container";
 @import "header";
 @import "article";
+@import "menu";
+@import "main";
 @import "footer";
 
 @import "toc";
diff --git a/_layouts/default.html b/_layouts/default.html
index 5d0cc1c..a4bf31d 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -58,7 +58,12 @@ body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:non
         </a>
       </header>
 
-      <article class="container_content article">
+      <nav class="container_menu article menu">
+        <h1 class="title">メニュー</h1>
+        <div class="body">{{ menu }}</div>
+      </nav>
+
+      <article class="container_main article main">
         <h1 class="title">
           {{ page.title }}
           <a title="GitHubで編集" href="{{ site.github.repository_url }}/edit/gh-pages/{{ page.path }}">
@@ -70,11 +75,6 @@ body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:non
         <div class="body">{{ content }}</div>
       </article>
 
-      <nav class="container_menu article">
-        <h1 class="title">メニュー</h1>
-        <div class="body">{{ menu }}</div>
-      </nav>
-
       <footer class="container_footer">
         <div id="footer-menu" class="menu">{{ menu }}</div>
         <span>© {{ site.time | date: "%Y" }} <a href="https://minetest-jp.github.io">Minetest-JP Team</a></span>
diff --git a/_sass/_article.scss b/_sass/_article.scss
index 0e1a67c..85920b4 100644
--- a/_sass/_article.scss
+++ b/_sass/_article.scss
@@ -1,13 +1,12 @@
 // 本文
 .article {
-  background: $article-background;
-  padding: $article-padding;
+  padding: var(--article-padding);
   word-break: break-word;
 
   @include media-mobile {
-    padding: $article-padding-mobile;
+    padding: var(--article-padding-mobile);
 
-    $top-padding: calc(#{$header-height} - #{$font-size-mobile});
+    $top-padding: calc(var(--header-height) - var(--font-size-mobile));
     $top-padding-minus: calc(#{$top-padding} * -1);
 
     h1[id]::before,
@@ -18,8 +17,8 @@
     h6[id]::before {
       content: "";
       display: block;
-      height: $top-padding;
-      margin-top: $top-padding-minus;
+      height: var(--top-padding);
+      margin-top: var(--top-padding-minus);
     }
   }
 
@@ -30,21 +29,6 @@
   }
 
   > .body {
-    a {
-      text-decoration: underline;
-
-      &:link {
-        color: $article-link-color;
-      }
-
-      &:visited,
-      &:hover,
-      &:focus,
-      &:active {
-        color: $article-link-color-visited;
-      }
-    }
-
     dt {
       font-style: italic;
       font-weight: bold;
@@ -53,9 +37,9 @@
     }
 
     dd {
-      //background: $article-dd-background;
-      //border: $border-default;
-      //border-radius: $article-dd-border-radius;
+      //background: var(--article-dd-bg);
+      //border: var(--border-common);
+      //border-radius: var(--article-dd-border-radius);
       margin-left: 1.5em;
       //padding: 1em;
     }
@@ -71,28 +55,28 @@
     }
 
     h2 {
-      border-bottom: $article-h2-border-bottom;
-      font-size: $article-h2-font-size;
+      border-bottom: var(--article-h2-border-bottom);
+      font-size: var(--article-h2-font-size);
     }
 
     h3 {
-      border-bottom: $article-h3-border-bottom;
-      font-size: $article-h3-font-size;
+      border-bottom: var(--article-h3-border-bottom);
+      font-size: var(--article-h3-font-size);
     }
 
     h4 {
-      border-bottom: $article-h4-border-bottom;
-      font-size: $article-h4-font-size;
+      border-bottom: var(--article-h4-border-bottom);
+      font-size: var(--article-h4-font-size);
     }
 
     h5 {
-      border-bottom: $article-h5-border-bottom;
-      font-size: $article-h5-font-size;
+      border-bottom: var(--article-h5-border-bottom);
+      font-size: var(--article-h5-font-size);
     }
 
     h6 {
-      border-bottom: $article-h6-border-bottom;
-      font-size: $article-h6-font-size;
+      border-bottom: var(--article-h6-border-bottom);
+      font-size: var(--article-h6-font-size);
     }
 
     p {
@@ -102,25 +86,25 @@
 
     pre {
       overflow: auto;
-      white-space: pre;
+      white-space: pre-wrap;
     }
 
     table {
-      border: $border-default;
+      border: var(--border-common);
       border-collapse: collapse;
 
       td, th {
-        border: $border-default;
+        border: var(--border-common);
         padding: 0.5em;
       }
     }
 
     code {
-      background: $article-code-background;
-      border: $article-code-border;
-      border-radius: $article-code-border-radius;
-      color: $article-code-color;
-      font-family: $article-code-font-family;
+      background: var(--article-code-bg);
+      border: var(--article-code-border);
+      border-radius: var(--article-code-border-radius);
+      color: var(--article-code-color);
+      font-family: var(--article-code-font-family);
 
       line-height: 2;
       overflow: auto;
@@ -131,7 +115,7 @@
 
     pre code {
       display: block;
-      padding: $article-pre-code-padding;
+      padding: var(--article-pre-code-padding);
     }
 
     dl {
diff --git a/_sass/_container.scss b/_sass/_container.scss
index 85b1c54..d17f3a6 100644
--- a/_sass/_container.scss
+++ b/_sass/_container.scss
@@ -1,6 +1,6 @@
 // コンテナ
 .container {
-  box-sizing: border-box;
+  background: var(--container-bg);
   display: grid;
   grid-template-rows: auto 1fr auto;
   display: -ms-grid;
@@ -12,7 +12,7 @@
     -ms-grid-row: 1;
   }
 
-  .container_content {
+  .container_main {
     grid-row: 2 / 3;
     -ms-grid-row: 2;
   }
@@ -28,32 +28,28 @@
   }
 
   @include media-desktop {
-    border-left: $border-default;
-    border-right: $border-default;
-    box-shadow: $container-box-shadow;
-    grid-template-columns: $container-columns;
-    -ms-grid-columns: $container-columns;
-    max-width: $container-max-width;
+    box-shadow: var(--container-shadow);
+    grid-template-columns: var(--container-columns);
+    -ms-grid-columns: var(--container-columns);
+    max-width: var(--container-max-width);
 
     margin: 0 auto;
     min-height: 100vh;
 
     .container_header {
-      border-bottom: $border-default;
       grid-column: 1 / 3;
       -ms-grid-column: 1;
       -ms-grid-column-span: 2;
     }
 
-    .container_content {
+    .container_menu {
       grid-column: 1 / 2;
-      -ms-grid-column: 1;
+      -ms-grid-column: 2;
     }
 
-    .container_menu {
-      border-left: $border-default;
+    .container_main {
       grid-column: 2 / 3;
-      -ms-grid-column: 2;
+      -ms-grid-column: 1;
     }
 
     .container_footer {
@@ -68,7 +64,7 @@
     width: 100vw;
 
     .container_header {
-      border-bottom: $border-default;
+      border-bottom: var(--border-common);
     }
 
     .container_menu {
diff --git a/_sass/_footer.scss b/_sass/_footer.scss
index 710694f..fd67eb7 100644
--- a/_sass/_footer.scss
+++ b/_sass/_footer.scss
@@ -1,7 +1,7 @@
 // フッタ
 footer {
-  background: $footer-background;
-  color: $footer-text-color;
+  background: var(--footer-bg);
+  color: var(--footer-color);
   padding: 1em 0;
   text-align: center;
 
@@ -13,7 +13,7 @@ footer {
     &:hover,
     &:focus,
     &:active {
-      color: $footer-text-color;
+      color: var(--footer-color);
     }
   }
 
diff --git a/_sass/_header.scss b/_sass/_header.scss
index 530e0b4..6d47d67 100644
--- a/_sass/_header.scss
+++ b/_sass/_header.scss
@@ -1,13 +1,13 @@
 // ヘッダ
 .header {
-  background: $header-background;
-  box-sizing: border-box;
-  font-weight: bold;
-  height: $header-height;
-  line-height: $header-height;
+  background: var(--header-bg);
+  height: var(--header-height);
+  font-size: var(--header-font-size);
+  font-weight: var(--header-font-weight);
+  line-height: var(--header-height);
 
   @include media-desktop {
-    padding: 0 1em;
+    padding: 0 1rem;
   }
 
   @include media-mobile {
@@ -16,7 +16,8 @@
 }
 
 .header-icon {
-  margin-top: $header-img-vertical-adjustment;
+  margin-top: var(--header-icon-vertical-adjustment);
+  margin-right: 0.5rem;
   vertical-align: middle;
 }
 
@@ -28,7 +29,7 @@
   &:hover,
   &:focus,
   &:active {
-    color: $header-link-color;
+    color: var(--header-color);
   }
 }
 
@@ -37,12 +38,12 @@
   border: none;
   display: block;
   font-size: inherit;
-  height: $header-height;
+  height: var(--header-height);
   left: 0;
   object-fit: contain;
   position: absolute;
   top: 0;
-  width: $header-height;
+  width: var(--header-height);
 
   @include media-desktop {
     display: none;
diff --git a/_sass/_main.scss b/_sass/_main.scss
new file mode 100644
index 0000000..310f1f6
--- /dev/null
+++ b/_sass/_main.scss
@@ -0,0 +1,9 @@
+.main {
+	background: var(--main-bg);
+
+	@include media-desktop {
+	  border-top: var(--main-border-topleft);
+	  border-left: var(--main-border-topleft);
+	  border-radius: var(--main-border-radius);
+	}
+}
diff --git a/_sass/_menu.scss b/_sass/_menu.scss
new file mode 100644
index 0000000..c08a61c
--- /dev/null
+++ b/_sass/_menu.scss
@@ -0,0 +1,3 @@
+.menu {
+	background: var(--menu-bg);
+}
diff --git a/_sass/_scaffolding.scss b/_sass/_scaffolding.scss
index 517b44c..f37affc 100644
--- a/_sass/_scaffolding.scss
+++ b/_sass/_scaffolding.scss
@@ -1,26 +1,44 @@
-html body {
+html, body {
   box-sizing: border-box;
-  overflow-x: hidden;
   margin: 0;
   padding: 0;
 }
 
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
 body {
-  background: $background;
-  color: $font-color;
-  font-family: $font-family;
-  font-size: $font-size;
-  letter-spacing: $letter-spacing;
-  line-height: $line-height;
+  background: var(--bg);
+  color: var(--color);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  letter-spacing: var(--letter-spacing);
+  line-height: var(--line-height);
 
   font-feature-settings: "palt";
 
   @include media-mobile {
-    font-size: $font-size-mobile;
+    font-size: var(--font-size-mobile);
   }
 
   ::selection {
-    background-color: $selection-background;
-    color: $selection-font-color;
+    background-color: var(--selection-bg);
+    color: var(--selection-color);
+  }
+}
+
+a {
+  text-decoration: underline;
+
+  &:link {
+    color: var(--color-link);
+  }
+
+  &:visited,
+  &:hover,
+  &:focus,
+  &:active {
+    color: var(--color-link-visited);
   }
 }
diff --git a/_sass/_screenshot.scss b/_sass/_screenshot.scss
index 8234f16..005a482 100644
--- a/_sass/_screenshot.scss
+++ b/_sass/_screenshot.scss
@@ -1,7 +1,7 @@
 // スクリーンショット
 .screenshot {
-  max-height: $screenshot-max-height;
-  max-width: $screenshot-max-width;
+  max-height: var(--screenshot-max-height);
+  max-width: var(--screenshot-max-width);
 
   img {
     object-fit: contain;
diff --git a/_sass/_toc.scss b/_sass/_toc.scss
index 83ef513..c61e993 100644
--- a/_sass/_toc.scss
+++ b/_sass/_toc.scss
@@ -1,7 +1,7 @@
 #markdown-toc {
-  background: $toc-background;
-  border: $toc-border;
-  border-radius: $toc-border-radius;
+  background: var(--toc-bg);
+  border: var(--toc-border);
+  border-radius: var(--toc-border-radius);
   display: inline-block;
   padding-top: 1em;
   padding-right: 1em;