body {
  font-size: 1rem;
  width: 100%;
  max-width: 768px;
  margin: auto;
  padding: 5%;
}

h1, h1 a {
  text-align: center;
  color: black;
  text-decoration: none;
}

h2 {
  border-bottom: 3px solid #000;
}

.leadsentence {
  text-align: center;
}

.link-card {
  border-bottom: dashed silver;
  margin-bottom: 10px;
}

.link-card a {
  display: block;
  text-decoration: none;
  font-weight: bold; /* リンクのテキストを太字に設定 */
  word-break: break-word; /* リンクのテキストが長い場合に折り返す */
}

.bookmark-count {
  display: inline-block; /* 横並びにする */
  margin-left: 10px; /* リンクと間隔を空ける */
  font-size: 14px; /* サイズ調整 */
}

p.setsumei {
  color: black;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word; /* 説明のテキストが長い場合に折り返す */
  font-size: 0.875rem; /* 文字サイズを小さく設定 */
}

/* タグとサイトリンクを同じ行に並べ、左右に配置 */

.tags-site-link {
  display: flex;
  flex-direction: column; /* デフォルトは縦並び */
  gap: 8px; /* タグと公開日の間隔を設定 */
  margin-top: 10px;
}

.article-info {
  display: flex;
  justify-content: space-between; /* 左右に配置 */
  align-items: center; /* 縦方向に中央揃え */
  width: 100%; /* 横幅を全体に広げる */
}

/* 公開日のスタイル */
.article-date {
  font-size: 0.875rem; /* 文字サイズを小さく設定 */
  color: #333; /* 文字色を濃いグレーに設定 */
}

/* タグのスタイル */
.tags {
  display: flex;
  flex-wrap: wrap; /* タグを折り返し可能に設定 */
  gap: 8px;
}

/* サイトリンク（企業名）は右寄せ */
.site-link {
  font-size: 0.875rem; /* 文字サイズを小さく設定 */
  color: #007bff; /* リンクの色を青に設定 */
  text-decoration: none; /* 下線を削除 */
  font-weight: bold; /* 太字に設定 */
  margin-left: auto; /* 右端に寄せる */
}

/* 会社名のホバー時のスタイル */
.site-link:hover {
  color: darkblue; /* ホバー時の文字色を濃い青に設定 */
  text-decoration: underline; /* ホバー時に下線を追加 */
}

/* ホバー時のスタイル */
.tag-link:hover {
  background-color: #007bff;    /* ホバー時の背景色 */
  color: white;                 /* ホバー時の文字色 */
}

/* 不要なul.itiran_linkのスタイルを削除しました */
/* ul.itiran_link liのスタイルをそのまま残し、Flexboxを削除 */
ul.itiran_link li {
  padding: 8px 25px;
  border-bottom: 1px solid #000000;
}

/* "もっとみる" リンクを中央に寄せ、余白を追加 */
.more {
  display: flex;
  justify-content: center; /* 中央寄せ */
  margin-top: 20px; /* 上部に適切な余白 */
  margin-bottom: 50px; /* 下部に50pxの余白を追加 */
}

.more a {
  font-weight: bold; /* 太字にして目立たせる */
  color: #007bff; /* リンクの色 */
  text-decoration: none; /* 下線を削除 */
  padding: 10px 20px; /* 余白を追加 */
  border: 2px solid #007bff; /* リンクに境界線を追加 */
  border-radius: 5px; /* 角を丸く */
  transition: background-color 0.3s, color 0.3s; /* ホバー時に色が変わるように */
}

/* タグとサイトリンクを横並びに配置 */
.tags-site-link {
  display: flex;
  flex-direction: column; /* デフォルトは縦並び */
  gap: 8px; /* タグと公開日の間隔を設定 */
  margin-top: 10px;
}

.article-info {
  display: flex;
  justify-content: space-between; /* 左右に配置 */
  align-items: center; /* 縦方向に中央揃え */
  width: 100%; /* 横幅を全体に広げる */
}

/* タグのスタイル */
.tags {
  display: flex;
  gap: 8px; /* タグ間の間隔を設定 */
}

/* サイトリンク（企業名）は右寄せ */
.site-link {
  font-size: 0.875rem; /* 文字サイズを小さく設定 */
  color: #007bff; /* リンクの色を青に設定 */
  text-decoration: none; /* 下線を削除 */
  font-weight: bold; /* 太字に設定 */
  margin-left: auto; /* 右端に寄せる */
}

/* タグリンクのスタイル */
.tag-link {
  background-color: #f0f0f0; /* 背景色を薄いグレーに設定 */
  padding: 5px 10px; /* 内側の余白を設定 */
  border-radius: 5px; /* 角を丸く */
  text-decoration: none; /* 下線を削除 */
  color: #333; /* 文字色を濃いグレーに設定 */
}

/* タグリンクのホバー時のスタイル */
.tag-link:hover {
  background-color: #007bff; /* ホバー時の背景色を青に設定 */
  color: white; /* ホバー時の文字色を白に設定 */
}

/* ホバー時のスタイル */
.more a:hover {
  background-color: #007bff; /* 背景色を変更 */
  color: white; /* 文字色を白に */
}
/* フッター関連のスタイル */
.footer_top {
  text-align: center;
  margin: 30px;
}

.footer_top > a {
  text-decoration: none;
  font-weight: bold;
}

.shareSns {
  text-align: center;
  display: flex;
  flex-wrap: nowrap; /* 折り返しなし */
}

ul.shareSns {
  padding: 0;
  list-style: none;
  justify-content: center;
}

.sns-icon img {
  height: 40px;
  padding: 2px 5px 0 5px;
}

/* リンクのスタイルを統一 */
a {
  color: blue; /* リンクの色を青に設定 */
  text-decoration: none; /* リンクの下線を削除 */
}

a:hover {
  color: darkblue; /* ホバー時のリンクの色を濃い青に設定 */
  text-decoration: underline; /* ホバー時に下線を追加 */
}