@charset "UTF-8";
body {
  margin: 0;
}

/* 画面サイズ(768px~) */
@media screen and (min-width: 768px) {
.container {
  display: grid;   /* グリッドコンテナを作る */
  width: 100%;
  height: 100vh;
  grid-template-rows: 100px 1fr 50px;
  grid-template-columns: 3fr 1fr;
  grid-template-areas: 'header header'
                       'main   sidebar'
                       'footer footer';
}
}

/* 画面サイズ(~767px) */
@media screen and (max-width: 767px) {
.container {
  display: grid;   /* グリッドコンテナを作る */
  width: 100%;
  height: 100vh;
  grid-template-rows: 50px 1fr 1fr 50px;
  grid-template-columns: 1fr;
  grid-template-areas: 'header'
                       'main'
                       'sidebar'
                       'footer';
}
}

/* ヘッダー */
header {
  grid-area: header;
  background-color: #fcc993;
}

/* メイン */
main {
  grid-area: main;
  background-color: #ffff93;   
}

/* サイドバー */
aside {
  grid-area: sidebar;
  background-color: #93ffc9;
}

/* フッター */
footer {
  grid-area: footer;
  background-color: #c9ff93;
}