/* 役員 */
.officer-table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.officer-table th, 
.officer-table td {
    padding: 15px;
    text-align: left;
    vertical-align: top;
}

.officer-table th {
    width: 150px;
    color: var(--main-color);
    font-weight: bold;
}

@media (max-width: 768px) {
    .officer-table th, 
    .officer-table td {
        display: block;
        width: 100%;
        padding: 5px 0;
    }
    .officer-table th {
        border-bottom: none;
        margin-top: 15px;
    }
}


/* 会の歴史 */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 40px auto;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 115px;
    top: -15px;
    width: 2px;
    height: 100%;
    background: var(--accent-color);
}

.timeline-item {
    position: relative;
     margin-bottom: 30px;
    display: flex;
}

.timeline-date {
    position: relative;
    width: 112px;
    font-weight: bold;
    color: var(--main-color);
    flex-shrink: 0;
}

.timeline-date::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 8px;
    width: 12px;
    height: 12px;
    background-color: var(--accent-color);
    border-radius: 50%;
    z-index: 1;
}

.timeline-content {
    margin-left: 40px;
    padding-bottom: 20px;
}

.timeline-content h3 {
    margin-top: 0;
    font-size: 1.1rem;
}

/* スマホ対応 (ここを修正) */
@media (max-width: 768px) {
    .timeline { padding-left: 22px; }
    
    /* 線を左端へ移動 */
    .timeline::before { left: 15px; }

    /* アイテム内を調整 */
    .timeline-item { flex-direction: column; }
    
    /* 日付とポチを左端に強制移動 */
    .timeline-date { width: 100%; padding-left: 20px;}
    .timeline-date::after { 
        right: auto; 
        left: -12px; /* 線の位置(25px)と合わせて調整 */
    }
    
    .timeline-content { margin-left: 30px; padding-top: 5px; }
}