/*
 * グローバルレイアウト補強。
 * thanks ページなどコンテンツ高が viewport より小さい場合に、
 * フッターが中段で止まって下に白余白ができてしまうのを防ぐ。
 *
 * 構造: <body> > <div class="wrapper"> > <header> + <main> + <div class="top"> + <footer>
 * 共に flex column にして main を伸縮させ、フッターを下端に固定する。
 */

html {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.wrapper > main {
  flex: 1 0 auto;
}
