.main-content {
  display: flex; /* 2カラムレイアウトを作成 */
  justify-content: space-around; /* 中央揃え */
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.container {
  flex: 0 0 50%; /* 幅を60%に設定 */
  max-width: 50%;
  margin: 0;
  margin-left: 12.5%;
  background-color: white;
  padding: 1rem;
}

.side {
  flex: 0 0 20%; /* 幅を20%に設定 */
  max-width: 20%;
  background-color: #faf3e9; /* サイドの背景色 */
  margin-right: 12.5%;
}

.white {
  background-color: white;
  padding: 1rem;
}





/* 人気　新着 */

.button-container {
  display: flex;
  gap: 20px; /* ボタン間のスペース */
  justify-content: center; /* ボタンを中央揃え */
  margin-top: 5px; /* 上部の余白 */
  width: 100%; /* コンテナの幅を100%に設定 */
  max-width: 100%; /* 最大幅を100%に設定 */
  box-sizing: border-box; /* パディングを含めた幅計算を行う */
}



.topic-button {
  position: relative;
  flex-grow: 1; /* ボタンを均等に広げる */
  padding: 5px 10px; /* ボタンの上下と左右に余白を追加して大きく見せる */
  border: none;
  border-radius: 2px;
  background-color: #e0f4ff;
  color: #a4cbe0;
  font-size: 1.2rem; /* ボタン内のテキストを大きくする */
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}

.topic-button.latest {
  background-color: #aed7ed; /* アクティブなボタンの背景色 */
  color: #ffffff; /* アクティブなボタンの文字色 */
}

.topic-button.popular {
  background-color: #A1D6B2; /* アクティブなボタンの背景色 */
  color: #ffffff; /* アクティブなボタンの文字色 */
}

.topic-button.latest.active {
  background-color: #aed7ed;
}

.topic-button.popular.active {
  background-color: #A1D6B2;
}


.topic-button.latest.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #aed7ed transparent transparent transparent; /* アクティブボタンの下に小さな吹き出し */
}


.topic-button.popular.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #A1D6B2 transparent transparent transparent; /* アクティブボタンの下に小さな吹き出し */
}



.topic-button:hover {
  opacity: 0.7;
}




.thread-search-form {
  width: 90%;
  margin: 0 auto; /* 中央に配置 */
  margin-top: 1rem;
}


.search-form {
  text-align: center;
  margin: 0;
}

.search-container {
  position: relative;
  display: flex;
  width: 100%;
  margin: auto;
  /* border-radius: 5px;
  border: 1px solid #ccc; */
  justify-content: space-between;
}

.search-input {
  padding: 10px 10px 10px 10px;
  font-size: 1rem;
  min-width: 90%;
  border: none;
  border-radius: 5px;
  border: 1px solid #ccc;
  /* max-width: 400px; */
  /* margin-right: 10px; */
}

.search-button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px;
  background: none;
  border: none;
  color: #A8B7F5;
  cursor: pointer;
  font-size: 1.2rem;
  width: 2rem;
}




.form-control {
  flex: 1; /* フレックスで親の残りのスペースを埋める */
  box-sizing: border-box; /* パディングやボーダーを含めて幅を計算 */
}





.thread-list {
  list-style: none;
  padding: 0;
}

.thread-item {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 0.3rem 0;
  /* margin-bottom: 1rem; */
  /* border: 1px solid #ced4da;
  border-radius: 4px; */
  border-bottom: 1px solid #ced4da;
  width: 100%;
  margin: auto;
}

.thread-item:hover {
  opacity: 0.6;
}

a.thread-link {
  text-decoration: none;
}


.thread-link {
  display: flex;
  text-decoration: none; /* 下線を削除 */
  color: inherit; /* テキストの色を継承 */
  align-items: center; /* アイテムを垂直方向に中央揃え */
  /* padding: 10px; */
  transition: background-color 0.3s; /* ホバー時のスムーズな背景色変更 */
}

.thread-link:hover {
  opacity: 0.6; /* ホバー時の背景色 */
}

.thread-rank {
  margin-right: 1rem;
}

.rank-number {
  background-color: #dc3545;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: bold;
}

.thread-image img {
  width: 4rem;
  height: 4rem;
  border-radius: 4px;
  margin-right: 1rem;
  object-fit: cover;
  object-position: center;
}

.thread-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 0.75rem;
}

.thread-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #00ACC3;
  text-decoration: none;
}

.thread-title:hover {
  text-decoration: none;
}

.thread-meta {
  font-size: 0.875rem;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.thread-date {
  margin-left: 1rem;
} 


.thread-category {

  font-size: 0.9rem;
  font-weight: bold;
  color: #FFC0C1;
  /* margin-top: 5px; */
  margin: 0;
  margin-right: 0.5rem;
}



.thread-comments {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem; /* アイコンとコメント数の間にスペースを追加 */
  font-size: 0.85rem;
  color: #6c757d; /* コメント数の文字色を設定 */
}




.no-threads {
  text-align: center;
  color: #6c757d;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.pagination .step-links {
  display: flex;
  gap: 10px;
  font-size: 1rem;
  color: white;
}

.pagination a {
  padding: 8px 16px;
  background-color: #A1D6B2;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
}

.pagination a:hover {
  background-color: #8bc59b;
}

.pagination .current {
  padding: 8px 16px;
  background-color: white;
  color: #A1D6B2;
  border-radius: 5px;
  font-weight: bold;
  line-height: 1.5; /* 文字をボックスの中央に配置 */
}

.pagination a:disabled {
  pointer-events: none;
  background-color: #eeeeee;
  color: #888888;
}







/* btn-primaryを緑色に変更 */
.btn-primary {
  background-color: #A1D6B2; /* 緑色 */
  border-color: #A1D6B2;     /* 緑色 */
  color: #ffffff;            /* テキストを白に */
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #8bc59b; /* 少し濃い緑色 */
  border-color: #8bc59b;     /* 少し濃い緑色 */
  color: #ffffff;            /* テキストを白に */
}

/* デフォルトのボタンのスタイルを無効にする */
.btn-primary:active,
.btn-primary.active {
  background-image: none;
}

.btn-primary.disabled, 
.btn-primary:disabled {
  background-color: #A1D6B2;
  border-color: #A1D6B2;
}









/* sidebar */
.create-thread-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* ボタンをサイドバーの幅いっぱいに */
  padding: 10px 40px;
  background-color: #A1D6B2; /* ボタンの背景色 */
  color: #ffffff; /* テキストの色 */
  border: none;
  border-radius: 2px; /* 角を丸める */
  font-size: 1.1rem; /* テキストの大きさ */
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 20px; /* ボタンの下の余白 */
}

.create-thread-button i {
  margin-right: 10px; /* アイコンとテキストの間のスペース */
  font-size: 1.2rem; /* アイコンのサイズ */
}

.create-thread-button:hover { 
  opacity: 0.7;
}


.create-thread-link {
  text-decoration: none !important;
}








/* 週間ランキングセクション */
/* .weekly-ranking-section {
  margin-top: 20px;
} */

.weekly-ranking-section h3 {
  font-size: 1.1rem;
  color: #A1D6B2;
  margin: 0;
}

.weekly-ranking-list {
  list-style: none;
  padding: 0; /* Add padding for alignment */
  margin: 0;
}

.weekly-ranking-item {
  padding-bottom: 8px;
  padding-top: 8px;
}

.weekly-ranking-link {
  text-decoration: none;
  color: #6c757d; /* Standard color for links */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.weekly-ranking-link:hover {
  text-decoration: underline; /* Underline on hover */
}

.weekly-ranking-image {
  width: 4rem;
  height: 4rem;
  margin-right: 10px; /* Add spacing between image and text */
}

.weekly-ranking-image img {
  width: 4rem;
  height: 4rem;
  border-radius: 4px; /* Rounded corners for images */
}

.weekly-ranking-texts {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.weekly-ranking-title {
  margin: 0;
  font-size: 1rem; /* Color for the titles */
}

.ranking-comments {
  font-size: 0.8rem;
  color: #6c757d; /* Comment count color */
  justify-self: flex-start;
  align-self: flex-start;
}





/* タグ */
.popular-tags {
  margin-top: 2rem;
}

.popular-tags h3 {
  font-size: 1.1rem;
  color: #A1D6B2;
  margin: 0;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.tag-item {
  display: inline-block;
  padding: 5px 10px;
  background-color: #A1D6B2; /* 緑のテーマカラー */
  color: #ffffff;
  border-radius: 3px;
  font-size: 0.75rem;
  transition: background-color 0.3s ease;
}

.tag-item a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

.tag-item:hover {
  background-color: #8bc59b; /* ホバー時の色を少し濃い緑色に変更 */
}






/* カテゴリー */
.category-list {
  margin-top: 2rem;
}

.category-list h3 {
  font-size: 1.1rem;
  color: #A1D6B2;
  margin-bottom: 10px;
}

.category-container {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-item {
  margin: 5px 0; /* 各アイテムに均等な間隔を設定 */
}

.category-item a {
  display: inline-block;
  padding: 3px 0; /* 内側の余白を設定 */
  text-decoration: none;
  color: #6c757d;
  font-size: 14px;
}

.category-item a:hover {
  opacity: 0.7;
}


/* モバイルタグ */
.mobile-popular-tags {
  max-width: 90vw;
  margin: auto;
  margin-bottom: 5vw;
  display: none;
}


.mobile-popular-tags h3 {
  font-size: 1.1rem;
  color: #A1D6B2;
  margin-bottom: 10px;
}



/* モバイルカテゴリー */
.mobile-category-list {
  margin-top: 40px;
  max-width: 90vw;
  margin: auto;
  margin-bottom: 5vw;
  display: none;
}

.mobile-category-list h3 {
  font-size: 1.1rem;
  color: #A1D6B2;
  margin-bottom: 10px;
}








@media (max-width: 800px) {
  .main-content {
    margin: 0;
  }

  .side {
    display: none;
  }

  .container {
    min-width: 100vw;
    max-width: 100vw;
    margin: 0 0;
    box-sizing: border-box;
  }

  .thread-search-form {
    max-width: 90vw;
    margin: 0 auto; /* フォームを中央揃えに */
  }

  .thread-image img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    margin-right: 0.75rem;
  }


  .thread-category {

    font-size: 0.9rem;
    font-weight: bold;
    color: #FFC0C1;
    margin: 0;
    margin-right: 0.5rem;
  }
  

  .topic-button {
    font-size: 1rem; /* ボタン内のテキストを大きくする */
  }


  .thread-title {
    font-size: 1rem;
  }

  .mobile-category-list {
    display: block;
  } 



  /* .mobile-popular-tags {
    display: block;
  }


  .mobile-category-list {
    display: block;
  } */
}