main {
    max-width: 960px; /* 例: レイアウト幅 */
    margin: 30px auto;
    padding: 0 20px;
    background-color: #fff; /* コンテンツ背景色 */
}
.works_container ul {
    line-height: 1.3;
}

.works_container ul li {
    margin-bottom: 8px;
    font-size: 14px;
    color: #555; /* リストアイテム色 */
}

.hp_cm{
    display: grid; /* グリッドレイアウトを使用 */
    grid-template-columns: 70px 1fr; /* 左右の幅を明示的に設定 */
    align-items: baseline;
}

.works_container ul li strong {
    text-align: left; /* 日付部分を左揃え */
}

.works_container ul li span {
    padding-left: 10px; /* 日付とテキストの間に余白を設定 */
    text-align: left; /* テキストを左揃え */
}

.other {
    grid-column: 2 / 3; /* 「他」をテキスト部分に揃える */
    text-align: left; /* 左揃え */
    margin-top: 10px; /* 上に余白を追加 */
    font-style: italic; 
    position: relative; /* 相対位置を設定 */
    left: calc(70px + 10px + 43ch); /* 日付の幅 + 余白 + 約27文字分の幅 */
}

.works_container ul li a {
    color: #555;
	border-bottom: 1px solid #555;
}

.works_container ul li a:hover {
    color: #8fa3b0; /* ホバー時に色を変更 */
	border-bottom: 1px solid #8fa3b0;
}

.works_container{
    margin-bottom: 50px;
}