@charset "utf-8";
/* CSS Document */



/*
========================================================
月別アーカイブ PC用（リストを本の目次のような見た目にする）
========================================================
*/


/* 月別アーカイブ（目次＝Table of Contents）ul */
.toc { 
  padding-left: 0;
  margin-left: 0;
  max-width: 620px; /* 全体の最大横幅 */
  width: 100%;      /* 画面幅に合わせて伸縮可能にする */
}

/* リスト基本設定 */
.toc li {
  display: flex;
  align-items: flex-end; /* PCでは下揃えにして点線と文字の高さを合わせる */
  margin-bottom: 12px;
}

/* タイトル側（.item）の縮む設定を許可し、1行死守を有効化 */
.item {
  flex-shrink: 1;       /* 長いタイトルが来たら、日付を押し出さずに自分が縮む */
  min-width: 0;         /* Flexbox内でテキスト省略（...）を機能させるための必須宣言 */
  white-space: nowrap;  /* 文字を絶対に改行させない */
  overflow: hidden;     /* 溢れた文字を隠す */
  text-overflow: ellipsis; /* 末尾を「...」に変換 */
}

/* 日付側（.page）は絶対に縮ませない */
.page {
  flex-shrink: 0;
  width: 24%;          /* 24%の幅を維持 */
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;            /* 日付とアイコンの間の余白 */
}

/* 記事タイトルのリンク色調整 */
.item a {
  text-decoration: none;
  color: #333333; 
  transition: color 0.2s ease;
}

.item a:hover {
  color: #20c997; /* ホバー時にエメラルドグリーン */
  text-decoration: none;
}

/* 真ん中のドット線を左右いっぱいに広げる */
.leader {
  flex-grow: 1; 
  flex-shrink: 0;       /* ドット線が完全に潰れるのを防ぐ */
  min-width: 30px;      /* PC版では最低でも30pxのドット線を維持 */
  border-bottom: 2px dotted #999999; 
  margin: 0 0 0 10px; 
  position: relative;
  top: -17px; 
}


/* カテゴリのアイコン表示とフレッシュポップ配色 */
.toc-cat-icons {
  display: inline-flex;
  gap: 4px; /* 複数カテゴリがある場合のアイコン同士の隙間 */
  align-items: center;
}

/* アイコン全体の基本スタイル（ブラウザに強制的にFont Awesome Freeとして処理させる防壁） */
.toc-cat-icons i {
  font-family: "Font Awesome 7 Free" !important; 
  font-weight: 900 !important;                  /* solid系アイコンの表示に必須 */
  font-style: normal !important;
  font-size: 0.95rem; 
  width: 1.2em;       /* 横幅を均一化してガタつきを防止 */
  text-align: center; 
  display: inline-block !important;
}

/* ―― カテゴリ別のフレッシュポップ配色 ―― */
/* 意見（opinion）: 明るく鮮やかなエメラルドグリーン */
.toc-cat-icons .cat-opinion {
  color: #20c997 !important;
}

/* 日記（diary）: 華やかなベリーピンク */
.toc-cat-icons .cat-diary {
  color: #e83e8c !important;
}


/*
========================================================
月別アーカイブの設定　スマホ用（@media (max-width: 768px)
========================================================
*/

@media (max-width: 768px) {
  .toc li {
    align-items: baseline; /* スマホでは文字のベースライン（下端）で揃える */
    margin-bottom: 14px;  /* タップ領域確保のため余白を拡張 */
  }

  .item {
    flex-shrink: 1;       /* タイトルが長い場合は縮むことを許可 */
    min-width: 0;         /* Flexbox内でテキスト省略（...）を機能させるための必須宣言 */
    white-space: nowrap;  /* 文字を絶対に改行させない */
    overflow: hidden;     /* 溢れた文字を隠す */
    text-overflow: ellipsis; /* 1行を維持（...） */
  }

  .leader {
    flex-shrink: 0;       /* ドット線が完全に潰れるのを防ぐ */
    min-width: 20px;      /* どんなにタイトルが長くても最低20pxのドット線を維持 */
    margin: 0 8px;        /* 左右の余白を少し詰めてスペース確保 */
    top: -4px;            /* スマホのフォントサイズ・行高に合わせた1px単位の高さ微調整 */
  }

  .page {
    width: auto;          /* 幅24%の固定を解除し、中身に合わせる */
    flex-shrink: 0;       /* 日付とアイコンは絶対に縮ませない */
    white-space: nowrap;  /* 日付の改行を防ぐ */
    font-size: 0.85rem;   /* 画面幅の圧迫を防ぐため、文字サイズを僅かに縮小 */
    gap: 6px;             /* スマホでは日付とアイコンの隙間を少し詰める */
  }
}