.complaints {
    padding: 0 1em 1rem;

    li {
        display: flex;
        flex-wrap: wrap;
    }

    .date {
        width: 12em;
        flex-shrink: none;
        &::before {
            content: "●";
            margin-right: 0.5em;
        }
    }

    .title {
        flex-grow: 1;
        flex-basis: 360px;
        a {
            text-decoration: none;
        }
    }


/* ==========================================
   ファイルリンク自動アイコン表示（Font Awesome 7 / Regular）
   ========================================== */

/* 1. 共通設定（Regularスタイル用の設定） */
a[href$=".pdf" i]::after,
a[href$=".doc" i]::after,
a[href$=".docx" i]::after,
a[href$=".xls" i]::after,
a[href$=".xlsx" i]::after,
a[href$=".zip" i]::after {
  font-family: "Font Awesome 7 Free";
  font-weight: 400;                   /* ★ Regular（線画）は 400 を指定 */
  display: inline-block;
  margin-left: 0.5em;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
}

/* 2. ファイル別 アイコン設定 */
a[href$=".pdf" i]::after {
  content: "\f1c1"; /* PDF */
  color: #e74c3c;
}

a[href$=".doc" i]::after,
a[href$=".docx" i]::after {
  content: "\f1c2"; /* Word */
  color: #2b579a;
}

a[href$=".xls" i]::after,
a[href$=".xlsx" i]::after {
  content: "\f1c3"; /* Excel */
  color: #217346;
}

a[href$=".zip" i]::after {
  content: "\f1c6"; /* ZIP */
  color: #f39c12;
}

}