// コンテナ
#container {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 1fr auto;
  display: -ms-grid;
  -ms-grid-rows: auto 1fr auto;

  header {
    grid-row: 1 / 2;
    -ms-grid-row: 1;
  }

  #content {
    grid-row: 2 / 3;
    -ms-grid-row: 2;
  }

  #menu {
    grid-row: 2 / 3;
    -ms-grid-row: 2;
  }

  footer {
    grid-row: 3 / 4;
    -ms-grid-row: 3;
  }

  @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;

    margin: 0 auto;
    min-height: 100vh;

    header {
      border-bottom: $border-default;
      grid-column: 1 / 3;
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
    }

    #content {
      grid-column: 1 / 2;
      -ms-grid-column: 1;
    }

    #menu {
      border-left: $border-default;
      grid-column: 2 / 3;
      -ms-grid-column: 2;
    }

    footer {
      grid-column: 1 / 3;
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
    }
  }

  @include media-mobile {
    margin: 0;
    width: 100vw;

    header {
      border-bottom: $border-default;
    }

    #menu {
      display: none;
    }
  }
}