/* history.css */
.history-section { padding: 80px 0; }
.timeline { position: relative; max-width: 900px; margin: 0 auto; }
.timeline::after { content: ''; position: absolute; width: 3px; background: linear-gradient(to bottom, rgba(204, 204, 204, 0), #ccc 10%, #ccc 90%, rgba(204, 204, 204, 0)); top: 0; bottom: 0; left: 50%; margin-left: -1.5px; }

.timeline-item { padding: 10px 40px; position: relative; width: 50%; z-index: 1; opacity: 0; transform: translateY(50px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.timeline-item.is-visible { opacity: 1; transform: translateY(0); }

/* 奇数番目のアイテムを左側に配置 */
.timeline-item:nth-child(odd) { left: 0; padding-right: 30px; text-align: right; }

/* 偶数番目のアイテムを右側に配置 */
.timeline-item:nth-child(even) { left: 50%; padding-left: 30px; }

.timeline-item::after { content: ''; position: absolute; width: 16px; height: 16px; background-color: var(--color-dark); border-radius: 50%; top: 25px; z-index: 1; box-shadow: 0 0 0 4px #fff, 0 0 10px rgba(0, 0, 0, 0.1); transform: scale(0); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; }
.timeline-item.is-visible::after { transform: scale(1); }

/* 奇数番目のアイテムのドットを右側に配置 */
.timeline-item:nth-child(odd)::after { right: -8px; }

/* 偶数番目のアイテムのドットを左側に配置 */
.timeline-item:nth-child(even)::after { left: -8px; }

.timeline-content { padding: 20px; background-color: var(--color-light-gray); border-radius: 6px; text-align: left; /* コンテンツ内のテキストは左揃えに戻す */ }
.timeline-year { font-size: 24px; font-weight: bold; color: var(--color-dark); margin-bottom: 10px; }
.timeline-title { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.timeline-text { font-size: 14px; line-height: 1.7; }
.timeline-image { margin-top: 15px; }

@media (max-width: 768px) {
    .history-section { padding: 40px 0; }
    .timeline::after { left: 20px; }
    .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        width: 100%;
        padding-left: 50px;
        padding-right: 15px;
        left: 0;
        text-align: left; /* スマホ表示ではテキストを左揃えに */
    }
    .timeline-item::after,
    .timeline-item:nth-child(odd)::after,
    .timeline-item:nth-child(even)::after {
        left: 12px;
        right: auto; /* rightプロパティをリセット */
    }
}