/* ------------------------------------------------
PAGE:社会貢献活動ページ - csr -
------------------------------------------------ */
/* KV,Catchはparts.cssに記載 */

.btn-arrow .arrow{
    color: white;
}
.arrow::before{
    color: white;
}

/* セクション共通スタイル -------- */
.harmony,
.club,
.knowledge {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    --min-size: 20;
    --max-size: 67;
    gap: 1em var(--clamp-size);
    margin-bottom: var(--space-3xl);
    padding-inline: var(--space-lg);
}

.harmony__image,
.club__image,
.knowledge__image {
    flex: 4.5;
    overflow: hidden;
}

.harmony__image img,
.club__image img,
.knowledge__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.harmony__content,
.club__content,
.knowledge__content {
    flex: 5.5;
}

.harmony__content p {
    margin-bottom: 1.5em;
    line-height: var(--lineHeight-180);
}

.club__text,
.knowledge__text {
    margin-bottom: 1.5em;
    line-height: var(--lineHeight-150);
}

/* ハーモニーセクション（NPO法人連携） -------- */
/* 基本スタイルのみ（共通スタイルで十分） */

/* ロータリークラブセクション -------- */
.club {
    margin-bottom: 0;
}
.club__text{
line-height: var(--lineHeight-150);
}
.club__note {
    font-size: var(--fontSize-sm);
    color: #A5A5A5;
}

/* 知識貢献活動セクション -------- */
/* 20250623:全文削除によりコメントアウト */
/* .knowledge {
    flex-direction: row-reverse;
    margin-bottom: 0;
}

.knowledge ul {
    background-color: #F4F4F4;
    padding: 1em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1em;
}

.knowledge li {
    font-size: var(--fontSize-sm);
    margin-left: 0.5em;
}

.knowledge li::marker {
    font-size: 0.8em;
} */

/* 主な活動内容（グレーボックス） -------- */
.activity-box {
    background: #F7F7F7;
    padding: clamp(34px, 3.2vw, 45px) clamp(1px, 5vw, 54px);
    display: flex;
    flex-direction: column;
    --min-size: 54;
    --max-size: 72;
    row-gap: var(--clamp-size);
    margin-bottom: var(--space-4xl);
}

.activity-box__item {
    display: flex;
    gap: 1em var(--space-2xl);
    align-items: stretch;
}

.activity-box__item:nth-child(even) {
    flex-direction: row-reverse;
}

.activity-box__image {
    flex: 4;
    display: flex;
    height: 200px;
    overflow: hidden;
}

.activity-box__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-box__content {
    flex: 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.activity-box__title {
    font-size: var(--fontSize-xl);
    font-weight: var(--fontWeight-medium);
    margin-bottom: var(--space-md);
}

.activity-box__text {
    line-height: var(--lineHeight-150);
    margin-bottom: var(--space-lg);
}

/* レスポンシブ対応 -------- */
@media (width < 768px) {
    /* セクション共通のモバイル対応 */
    .harmony,
    .club,
    .knowledge {
        flex-direction: column;
        gap: var(--space-lg);
        padding-inline: 0;
    }

    .harmony__image,
    .club__image,
    .knowledge__image {
        aspect-ratio: 16/9;
        width: 100%;
        height: auto;
        order: -1;
    }

    .harmony__content,
    .club__content,
    .knowledge__content {
        width: 100%;
    }

    /* 知識貢献活動の個別対応 */
    .knowledge {
        flex-direction: column;
    }

    .knowledge ul {
        grid-template-columns: 1fr;
        gap: 0.5em;
    }

    /* 活動ボックスのモバイル対応 */
    .activity-box {
        padding: var(--space-xl) var(--space-md);
    }

    .activity-box__item {
        flex-direction: column !important;
        gap: var(--space-lg);
    }

    .activity-box__image {
        aspect-ratio: 16/9;
        width: 100%;
        height: auto;
    }

    .activity-box__content {
        width: 100%;
    }
}