Base setting

sp.css

@media screen and (max-width:480px){/* 480pxまではスマホ表示。ここは760pxでも良いと思います */
  *{ max-width: 100%; } /* 手抜きのおまじない */
  html,body{
    width: 100vw;       /* bodyの横幅を画面横幅に指定 */
    max-width: 100vw;   /* bodyの最大横幅も画面横幅に指定 */
    overflow-x: hidden; /* 横にはみ出す部分を非表示に設定 */
    font-size: 4vw ;    /* お好みで基本文字サイズを設定 */
  }
  #header,
  #container,
  #footer_wrap,
  #footer,
  #copyright,
  #leftcolumn,
  #one_maincolumn,
  #two_maincolumn,
  #three_maincolumn,
  #rightcolumn
  {
    width: 100%;        /* 横幅を固定で指定しているものをリセット */
  }
  #container{           /* メインエリアの上部にヘッダー分の余白をとる */
    margin-top: 70px;
  }
  #header_wrap{         /* ヘッダーが常に表示されるように */
    height: 70px;
    min-height: 70px;
    max-height: 70px;
    position: fixed;
    top:0;
  }
  #leftcolumn {         /* サイドバーをドロワーメニューに */
      background-color: #EEE;
      position: fixed;
      top: 70px;
      width: 100vw;
      height: 100vh;
      overflow-y: scroll;
      z-index: 999;
      /* ハンバーガーメニューアイコンをクリックした時のアニメーション設定 */
      transition: transform 0.2s ease-in;
      transform: translate3d( -100%,0,0);
  }
  #leftcolumn.open{
    transform: translate3d( 0,0,0);
  }
}