/* 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 {
  background-color: white;
  color: black;
  font-family: Verdana;
}

body {
   font-family:'Noto Sans JP',sans-serif;
   background-color:#f6f5f4;
}

box-sizing: border-box;
body {
  margin: 0;
  padding: 20px;
  font-family: sans-serif;
}

/* 2カラムを横並びにする親コンテナ */
.container {
  display: flex;
  gap: 20px; /* カラム間の隙間 */
  max-width: 1200px;
  margin: 0 auto;
}

/* 左側：サイドバー（メニュー） */
.sidebar {
  width: 250px; /* メニューの横幅 */
  flex-shrink: 0; /* 幅を固定して縮ませない */
  background-color: #f4f4f4;
  padding: 20px;
  border-radius: 8px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-bottom: 12px;
}

.sidebar a {
  text-decoration: none;
  color: #333;
}

.sidebar a:hover {
  color: #007bff;
}

/* 右側：メインコンテンツ */
.main-content {
  flex-grow: 1; /* 残りの幅をすべて使う */
  background-color: #f4f4f4;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* 📱 スマホ対応（画面幅が768px以下になったら縦並びにする） */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 縦並びに変更 */
  }
  
  .sidebar {
    width: 100%; /* 横幅いっぱいに広げる */
  }
}