/* メインコンテンツの幅を調整するスタイル */

/* ページレイアウト調整 */
.page-layout {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  overflow-x: hidden; /* 横方向のオーバーフローを隠す */
}

/* メインコンテンツエリアの幅を広げる */
@media (min-width: 1024px) {
  .main-content {
    width: calc(100% - 70px); /* バナー幅(60px) + 余白(10px) */
    overflow-x: hidden; /* 横方向のオーバーフローを隠す */
    max-width: 100%; /* 最大幅を設定 */
  }
  
  /* ニュースグリッドを調整 */
  .news-grid {
    width: 100%;
    overflow-x: hidden; /* 横方向のオーバーフローを隠す */
    word-wrap: break-word; /* 長い単語を折り返す */
    word-break: break-word; /* 必要に応じて単語の途中で折り返す */
  }
}

/* グリッドレイアウトの調整 */
@media (min-width: 1200px) {
  .news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3カラムレイアウト */
    gap: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2カラムレイアウト */
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .news-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1カラムレイアウト */
    gap: 20px;
  }
}

/* ブレッドクラム（パンくずリスト）のスタイル調整 */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap; /* 長い場合は折り返し */
  margin-bottom: 15px;
  font-size: 0.9rem;
  overflow: hidden; /* はみ出す内容を隠す */
  max-width: 100%; /* 最大幅を設定 */
}

.breadcrumbs span {
  display: inline-block;
  margin-right: 5px;
  max-width: 100%; /* 最大幅を設定 */
  overflow: hidden; /* はみ出す内容を隠す */
  text-overflow: ellipsis; /* 省略記号で表示 */
  white-space: nowrap; /* 改行しない */
}

.breadcrumbs a {
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* モバイル用の調整 */
@media (max-width: 480px) {
  .breadcrumbs {
    font-size: 0.8rem;
    margin-bottom: 10px;
  }
  
  /* ブレッドクラム内の要素を簡素化 */
  .breadcrumbs span[itemprop="itemListElement"] {
    max-width: 150px; /* 小さい画面での幅制限 */
  }
}
