ヘッダの高さの計算を修正

_includes/style.scss

@@ -26,6 +26,7 @@ $selection-font-color: #fff;
 
 // コンテナ
 $container-box-shadow: 0 0 10px 0 #ddd;
+$container-padding-top-mobile: 1em;
 $container-width: 80vw;
 
 // ヘッダ

_sass/_article.scss

@@ -4,11 +4,8 @@
   padding: 0 1em 1em 1em;
 
   @include media-mobile {
-    $line-height: ($font-size * 20 / 14);
-    $line-height-mobile: ($line-height * 1.1);
-    $top-padding: ($line-height-mobile * 3 - $font-size-mobile);
-
-    padding-top: $top-padding;
+    $top-padding: calc(#{$header-height} - #{$font-size-mobile});
+    $top-padding-minus: calc(#{$top-padding} * -1);
 
     h1[id]::before,
     h2[id]::before,
@@ -19,7 +16,7 @@
       content: "";
       display: block;
       height: $top-padding;
-      margin: -$top-padding 0 0;
+      margin-top: $top-padding-minus;
     }
   }
 

_sass/_container.scss

@@ -67,5 +67,9 @@
     #menu {
       display: none;
     }
+
+    #content {
+      padding-top: calc(#{$header-height} - #{$font-size-mobile} + #{$container-padding-top-mobile});
+    }
   }
 }