@charset "UTF-8";
/* CSS Document */

.TabMenu {
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  width: 400px;
}

.Tabs {
  width: 100%;
  display: flex;
}

.Tab {
  margin-right: 10px;
  border-radius: 5px 5px 0 0;
  width: 60px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c0deff;
  opacity: 0.5; /* 最初は半透明 */
  cursor: pointer;
}

.Tab__isActive {
  opacity: 1;　/* アクティブなものだけ強調 */
}

.Contents {
  width: 100%;
}

.Content {
  display: none;　/* 最初は非表示 */
  width: 100%;
  height: 300px;
  padding: 16px;
  background-color: #c0deff;
}

.Content__isActive {
  display: block; /* アクティブなものだけ表示 */
}