/* お知らせ一覧。旧 info_list.php 相当。
 * 本番実測: サイドバーなし・ページングなしのフル幅 1 カラム。
 * 行高 40px / 下線 1px solid rgb(158,158,158) / 文字 14.4px /
 * 日付は内容幅 96px + 左右 padding 8px (content-box)・色 rgb(153,126,93) /
 * **タイトルは幅指定を持たず内容幅** — TOP と違い省略しない。ここが 2 画面の唯一の違い。
 * パンくずは review.css / feature.css の *-breadcrumb パターンに合わせる。 */

.info-breadcrumb {
    padding-block: 10px;
    margin-bottom: 24px;
    font-size: 0.8rem;
    color: var(--shop-muted);
    background: var(--shop-head-bg);
}

.info-breadcrumb-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.info-breadcrumb-item {
    color: var(--shop-muted);
    text-decoration: none;
}

a.info-breadcrumb-item:hover {
    color: var(--genre-color);
    text-decoration: underline;
}

.info-breadcrumb-item[aria-current="page"] {
    font-weight: 700;
    color: var(--shop-text);
}

.info-breadcrumb-sep {
    color: var(--shop-muted);
}

.info-content {
    margin-bottom: 48px;
}

/* 見出し「お知らせ / Information」。旧は h2 24px rgb(67,67,67) 中央 + 英字ラベル。 */
.info-section-title {
    margin-bottom: 24px;
    text-align: center;
}

.info-section-title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #434343;
}

.info-section-title-en {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--shop-muted);
}

.information-page .info-list {
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid #9e9e9e;
}

.information-page .info-row {
    border-bottom: 1px solid #9e9e9e;
}

.information-page .info-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 0;
    font-size: 0.9rem;
    text-align: left;
}

.information-page .info-date {
    box-sizing: content-box;
    flex-shrink: 0;
    width: 96px;
    padding: 0 8px;
    color: #997e5d;
}

/* 旧はここに幅指定が無く、タイトルは内容幅のまま全文が出る (省略しない)。 */
.information-page .info-title {
    box-sizing: content-box;
    padding: 0 8px;
}

.info-empty {
    padding: 24px 0;
    color: var(--shop-muted);
    text-align: center;
}

/* SP は日付を上・タイトルを下の 2 段にして、長いタイトルを折り返す
 * (旧は SP でも 1 行 40px のままだが、幅 390px では日付 112px を引くと 1 行に収まらない)。 */
@media (width < 1000px) {
    .information-page .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 8px;
    }

    .information-page .info-date,
    .information-page .info-title {
        width: auto;
        padding: 0;
    }
}