@charset "UTF-8";

.clHero {
    background-color: aquamarine;
    display: flex;
    align-items: center;
    justify-content: center;
    width:200px;
    height:200px;

}

.clContents {
    background-color: yellowgreen;
    display: flex;
    justify-content: space-between;
}

.clMain {
    background-color: blue;
    width:200px;
    height:200px;
}

.clSide {
    background-color: yellow;
    width:200px;
    height:200px;
}

.clTool {
    background-color: blue;
    display: flex;
    justify-content: space-between;
}

.clMemo {
    background-color: yellow;
}

.clMemo {
    background-color: red;
}

.clRoMemo {
    background-color: red;
}

.clEventMemo {
    background-color: green;
}

article.top {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;         /* ウィンドウの高さに合わせる */
  overflow: hidden;      /* はみ出し防止 */
}

article.top img {
  max-width: 80vw;       /* 横幅の最大値を制限 */
  max-height: 80vh;      /* 縦幅の最大値も制限 */
  width: auto;
  height: auto;
}


@media (min-width: 600px) {



}