/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* 全体レイアウト */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  display: flex;        /* コンテナをflexボックスに */
  height: 100vh;        /* 高さをビューポートに合わせる */
  margin-left: 250px;   /* サイドメニュー分のスペース */
}

/* サイドメニューのスタイル */
.sidebar {
  width: 250px;
  height: 100vh; /* サイドメニューの高さをビューポートに合わせる */
  background-color: #9acd32;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right: 2px solid #ccc;
}

.sidebar iframe {
  width: 100%;
  height: 100%; /* iframeをサイドメニューの高さに合わせる */
  border: none;
}

.content {
  flex: 1; /* 残りのスペースを占める */
  display: flex;        /* 中身をflexで中央配置 */
  justify-content: center;   /* 水平方向に中央揃え */
  align-items: center;   /* 垂直方向に中央揃え */
  background-color: #ffbf7f;     /* 背景色 */
}

.content iframe {
  width: 99%;            /* 幅を80%に設定 */
  height: 99vh;          /* 高さをビューポートに設定 */
  border: none;          /* ボーダーを消す */
  background-color: #ffbf7f;     /* 背景色 */
}