/*------------------------------------------------
* Version：1.1
* Date:：2025.11.11
-------------------------------------------------*/

/* ===== Information List Styles (日付タイプ) ===== */

/* お知らせリスト全体 */
.info-list {
  border-top: 1px solid #eee; /* 上部の区切り線 */
}

/* お知らせの各行（リンク） */
.info-item {
  display: flex; /* Flexboxを有効化 */
  align-items: baseline; /* テキストのベースライン（下端）を揃える */
  padding: 12px 0; /* 上下の余白 */
  color: #0D1D2B; /* (tx-black) */
  text-decoration: none;
  border-bottom: 1px solid #eee; /* 各行の区切り線 */
  transition: color 0.2s ease;
}

.info-item:hover {
  color: #3b82f6; /* (tx-blue) ホバー時の色 */
}

/* リンクなし（日付タイプ） */
.info-item-nolink {
  display: flex;
  align-items: baseline;
  padding: 12px 0;
  color: #0D1D2B;
  border-bottom: 1px solid #eee;
}


/* 日付部分 */
.info-date {
  /* 要件1: 文章の頭を揃える */
  flex-shrink: 0; /* 幅が縮まないように設定 */
  width: 105px; /* 日付用に一定の幅を確保 (日付が長くてもこの幅) */
  font-size: 0.9rem; /* (tx-09-5) */
  color: #5F6772; /* (tx-black-6) */
  padding-right: 1rem; /* 日付と文章の間の余白 */
  box-sizing: border-box;
}

/* 文章部分 */
.info-text {
  flex-grow: 1; /* 残りの幅をすべて使用 */
  line-height: 1.6; /* 行間を少し広げる */
  /* この設定により、文章が折り返しても日付の下には回り込みません */
}

/* ===== Responsive Styles (日付タイプ) ===== */
/* Bootstrapのブレークポイント md (768px) 未満に適用 */
@media (max-width: 767.98px) {
  
  .info-item,
  .info-item-nolink {
    display: block; /* Flexboxを解除し、縦積みに */
    padding: 10px 0;
  }
  
  .info-date {
    /* スマホでは日付の固定幅を解除 */
    width: auto;
    font-size: 0.9rem;
    padding-right: 0;
    display: block; /* 日付をブロック要素に */
    margin-bottom: 0px; /* 日付と文章の間に少し余白 */
  }
  
  .info-text {
    line-height: 1.6;
    /* width: 100%; (display: block; により不要) */
  }
}


/* ===== Dot List Styles (ドットタイプ・追記) ===== */

/* ドットリスト全体 */
.info-list-dot {
  /* border-top: 1px solid #eee; */ /* ★上部の区切り線を削除 */
}

/* ドットリストの各行 (日付タイプの .info-item から flex 関連をリセット) */
.info-list-dot .info-item,
.info-list-dot .info-item-nolink {
  display: block; /* flexを解除 */
  position: relative;
  /* ★行間を狭く調整 */
  padding: 5px 0 5px 1.2em; /* 上下余白を 12px -> 5px に、左にドット用余白 */
  color: #0D1D2B; 
  text-decoration: none;
  /* ★各行の区切り線を明示的に削除 */
  border-bottom: none;
}

/* リンクありホバー (ドットタイプ) */
.info-list-dot .info-item {
  transition: color 0.2s ease;
}
.info-list-dot .info-item:hover {
  color: #3b82f6; /* (tx-blue) ホバー時の色 */
}

/* リンクなし (ドットタイプ) */
.info-list-dot .info-item-nolink {
   color: #0D1D2B;
}

/* ドット（・）のスタイル ★bi-circle に変更★ */
.info-list-dot .info-item::before,
.info-list-dot .info-item-nolink::before {
  /* content: "・"; */ /* 以前のドット */
  font-family: 'bootstrap-icons' !important; /* Bootstrap Iconフォントを指定 */
  content: "\F28A"; /* ★bi-circle のUnicodeに変更 (F517 -> F28A) */
  position: absolute;
  left: 0;
  /* ★padding-top に合わせて調整 */
  top: 5px; /* 12px -> 5px */
  color: #5F6772; /* (tx-black-6) 日付と同じ色 */
  line-height: 1.6; /* .info-text の line-height と合わせる */
  font-size: 0.65em; /* アイコンのサイズを少し小さく調整 */
  transform: translateY(5px); /* 縦位置を微調整 */
}

/* スマホ対応 (ドットタイプ) */
@media (max-width: 767.98px) {
  .info-list-dot .info-item,
  .info-list-dot .info-item-nolink {
     padding: 5px 0 5px 1.2em; /* スマホでは少し行間をあける */
  }
  
  .info-list-dot .info-item::before,
  .info-list-dot .info-item-nolink::before {
    top: 4.5px; /* スマホでの位置調整 */
    transform: translateY(5px); /* 縦位置の微調整を維持 */
  }
}