/* スマートフォン用 */
@media (max-width: 767px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #b4b4b4;
    padding: 2px;
    box-sizing: border-box;
    z-index: 100; /* サイドバーを最前面に表示 */
  }
  .sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
  }
  .sidebar li a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 2px;
  }
  .content {
    /* スマートフォンではサイドバーが上部に固定されるため、その高さ分の余白を設ける */
    /* サイドバーの高さに合わせてmargin-topを調整してください */
    margin-top: 150px; /* 仮の値。サイドバーの実際の高さに合わせて調整が必要です。 */
　margin-left: 10px; 
  }

  /* もし.moji4などの高さによってサイドバー全体の高さが変わる場合は、 */
  /* .sidebarの実際の高さをデベロッパーツールなどで確認し、contentのmargin-topを調整してください。 */
  /* あるいは、サイドバーの高さを固定してoverflow-y: auto; を使うなどの方法もあります。 */
}

/* タブレット用 */
@media (min-width: 768px) and (max-width: 1199px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: #b4b4b4;
    padding: 20px;
    box-sizing: border-box;
    z-index: 100; /* サイドバーを最前面に表示 */
  }
  .sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .sidebar li a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 10px;
  }
  .content {
    margin-left: 220px; /* サイドバーの幅分だけ余白を設ける (sidebar-width + padding) */
  }
}

/* PC用 */
@media (min-width: 1200px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 230px;
    height: 100%;
    background-color: #b4b4b4;
    padding: 20px;
    box-sizing: border-box;
    z-index: 100; /* サイドバーを最前面に表示 */
  }
  .sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .sidebar li a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 10px;
  }
  .content {
    margin-left: 290px; /* サイドバーの幅分だけ余白を設ける (sidebar-width + padding) */
    margin-right: 80px; /* サイドバーの幅分だけ余白を設ける (sidebar-width + padding) */
    /* PC版のpaddingが20pxなので、230 + 20*2 = 270px としました */
    /* タブレット版のmargin-leftも同様に計算すると 200 + 20*2 = 240px がより正確かもしれません。 */
    /* margin-left: 270px;  */
  }
}

/* HTMLには含まれていませんでしたが、mainコンテンツ用のスタイルも考慮しておくと良いです */
/* 例えば、以下のようなクラスをmainコンテンツのラッパー要素に適用することを想定しています */
/*
.content {
    padding: 20px; // コンテンツ自体の内側の余白
}
*/

/* その他のクラス（.moji4, .sen2, .moji3）のスタイルは提供されていませんが、 */
/* 必要に応じてz-indexを調整する必要があるかもしれません。 */
/* 通常のテキストやリスト項目であればz-indexの調整は不要な場合が多いです。 */