.history-timeline {
    width: var(--full-inline-size);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-section);
}

/* 年グループ */
.history-timeline__year-group {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

/* 年見出し */
.history-timeline__year {
    font-family: var(--eng-font);
    font-size: var(--font-title);
    font-weight: var(--fw-bold);
    color: var(--text-navy);
    margin: 0;
    letter-spacing: 0.02em;
    padding-bottom: var(--space-sm);
    border-bottom: 3px solid var(--bg-navy);
}

/* タイムラインリスト */
.history-timeline__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: var(--space-lg);
    margin: 0;
    list-style: none;
}

/* 各項目 */
.history-timeline__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding: var(--space-md) 0;
}

.history-timeline__item:last-child {
    padding-block-end: 0;
}

/* アイテム間の罫線（2つ目以降の前に表示） */
.history-timeline__item + .history-timeline__item {
    background-image: linear-gradient(to right, var(--border-gray) 0, var(--border-gray) 100%);
    background-position: top;
    background-size: 100% 1px;
    background-repeat: no-repeat;
}

/* 継続項目（同じ月が連続する場合）は罫線を月表示+gap分だけ右にずらす */
.history-timeline__item + .history-timeline__item--continuation {
    background-image: linear-gradient(to right, transparent calc(2.75rem + var(--gap-md)), var(--border-gray) calc(2.75rem + var(--gap-md)));
}

/* ドット（タイムラインマーカー） */
.history-timeline__item::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-lg) + 0.1rem);
    top: calc(var(--space-md) + 0.5rem);
    width: 0.625rem;
    height: 0.625rem;
    background: var(--bg-navy);
    border-radius: 50%;
    z-index: 2;
}

/* 縦線（次のアイテムのドットまで）
   最後のアイテムでは線を引かない */
.history-timeline__item:not(:last-child)::after {
    content: "";
    position: absolute;
    /* ドットの中心位置に線の中心を合わせる */
    left: calc(-1 * var(--space-lg) + 0.1rem + 0.3125rem - 1px);
    /* ドットの中心から開始 */
    top: calc(var(--space-md) + 0.35rem + 0.3125rem);
    /* 次のアイテムのドット中心まで */
    height: calc(100% - var(--space-md) - 0.35rem - 0.3125rem + var(--space-md) + 0.35rem + 0.3125rem);
    width: 2px;
    background: var(--bg-light-blue);
    z-index: 1;
}

/* ハイライト項目（重要な出来事）のドット */
.history-timeline__item--highlight::before {
    width: 0.875rem;
    height: 0.875rem;
    left: calc(-1 * var(--space-lg) - 0.025rem);
    background: var(--bg-blue);
    box-shadow: 0 0 0 3px var(--bg-pale-blue);
}

/* 継続項目（同じ月が連続する場合の2つ目以降）のドットを非表示 */
.history-timeline__item--continuation::before {
    display: none;
}

/* 線を非表示にするクラス（特定の年のセクションに適用） */
.history-timeline__item--no-line:not(:last-child)::after {
    display: none;
}

/* ヘッダー（月＋テキスト） */
.history-timeline__header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gap-md);
    flex: 1;
    min-width: 0;
}

/* 月表示 */
.history-timeline__month {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    max-width: 3rem;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-navy);
    color: var(--text-white);
    font-size: var(--font-xs);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    white-space: nowrap;
}

/* 継続項目の月表示を非表示（スペースは確保） */
.history-timeline__item--continuation .history-timeline__month {
    visibility: hidden;
}

/* テキスト */
.history-timeline__text {
    margin: 0;
    font-size: var(--font-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-180);
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* 補足テキスト */
.history-timeline__note {
    display: block;
    font-size: var(--font-xs);
    font-weight: var(--fw-normal);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

/* メディア（画像）コンテナ
   テキストの開始位置に合わせるため、月表示幅+gap分のmargin-leftを追加 */
.history-timeline__media {
    margin: 0;
    margin-left: calc(2.75rem + var(--gap-md));
    padding: 0;
    flex-shrink: 0;
}

/* 画像がない場合は非表示 */
.history-timeline__media:empty {
    display: none;
}

/* 画像スタイル */
.history-timeline__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

/* ===== タブレット表示（768px以上） ===== */
@media (min-width: 768px) {
    .history-timeline__item {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--gap-md);
    }

    .history-timeline__header {
        flex: 1;
        min-width: 60%;
    }

    /* PC/タブレットでは横並びなのでmargin-leftをリセット */
    .history-timeline__media {
        margin-left: 0;
        width: clamp(8rem, 20vw, 10rem);
        max-width: 10rem;
    }

    .history-timeline__image {
        width: 100%;
        max-width: 10rem;
    }
}

/* ===== PC表示（960px以上） ===== */
@media (min-width: 960px) {
    .history-timeline {
        gap: var(--gap-section);
    }

    .history-timeline__year-group {
        gap: var(--gap-lg);
    }

    .history-timeline__year {
        font-size: var(--font-title);
        padding-bottom: var(--space-sm);
    }

    .history-timeline__list {
        padding-left: var(--space-xl);
    }

    .history-timeline__item {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--gap-lg);
        padding: var(--space-lg) 0;
    }

    .history-timeline__item::before {
        left: calc(-1 * var(--space-xl) + 0.125rem);
        top: calc(var(--space-lg) + 0.7rem);
        width: 0.75rem;
        height: 0.75rem;
    }

    /* PC：縦線（次のアイテムのドットまで） */
    .history-timeline__item:not(:last-child)::after {
        left: calc(-1 * var(--space-xl) + 0.125rem + 0.375rem - 7px);
        top: calc(var(--space-lg) + 0.7rem);
        height: calc(100% - var(--space-lg) - 0.5rem - 0.375rem + var(--space-lg) + 0.5rem + 0.375rem);
        width: 3px;
    }

    .history-timeline__item--highlight::before {
        width: 1rem;
        height: 1rem;
        left: calc(-1 * var(--space-xl));
    }

    .history-timeline__header {
        flex: 1;
        gap: var(--gap-lg);
        min-width: 0;
    }

    .history-timeline__month {
        min-width: 3rem;
        max-width: 3.5rem;
        padding: var(--space-xs) var(--space-md);
        font-size: var(--font-sm);
    }

    .history-timeline__text {
        font-size: var(--font-base);
        font-weight: var(--fw-semibold);
    }

    .history-timeline__note {
        font-size: var(--font-sm);
    }

    .history-timeline__media {
        width: 12rem;
        max-width: 12rem;
        flex-shrink: 0;
    }
}

/* ===== 大画面（1200px以上） ===== */
@media (min-width: 1200px) {
    .history-timeline__list {
        padding-left: var(--space-xxl);
    }
    .history-timeline__list::before {
        left: calc(0.25rem + 0.375rem - 1.5px);
    }

    .history-timeline__item::before {
        left: calc(-1 * var(--space-xxl) + 0.25rem);
    }

    .history-timeline__item--highlight::before {
        left: calc(-1 * var(--space-xxl) + 0.125rem);
    }

    .history-timeline__media {
        width: 12rem;
        max-width: 12rem;
    }
}