/* =================
   NEW 会社実績グラフ（棒グラフ）
================= */
.our-growth-section {
    position: relative;
    min-height: 100vh;
/*    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);*/
    padding: 120px 0;
    overflow: hidden;
    background-color: #FBFCFD;
}

/* 有機的な緑の背景パターン */
.organic-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.organic-shape {
    position: absolute;
    background: linear-gradient(45deg, #7CB342, #8BC34A, #9CCC65);
    border-radius: 50%;
    opacity: 0.1; /* 透明度を微調整 */
}

.shape-1 {
    width: 600px;
    height: 400px;
    top: -100px;
    left: -200px;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.shape-2 {
    width: 500px;
    height: 350px;
    top: 60%;
    right: -150px;
    border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%;
}

.shape-3 {
    width: 400px;
    height: 300px;
    bottom: -80px;
    left: 10%;
    border-radius: 70% 30% 40% 60% / 30% 70% 60% 40%;
}

.shape-4 {
    width: 300px;
    height: 250px;
    top: 30%;
    right: 5%;
    border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
}
.growth-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
    align-items: start;
}

/* 売上・従業員数推移グラフ */
.revenue-chart {
    background: rgba(255, 255, 255, 0.98);
    padding: 56px;
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.chart-title {
    font-size: 32px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 24px;
    text-align: center;
    letter-spacing: 0.03em;
}

.chart-description {
    font-size: 16px;
    color: #666;
    margin-bottom: 56px;
    line-height: 1.7;
    text-align: center;
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

.chart-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #666;
    margin-bottom: 8px;
    text-align: left;
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 56px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.legend-employee { 
    background: #1976D2;
}
.legend-revenue { background: linear-gradient(45deg, #F44336, #D32F2F); }

.chart-container {
    position: relative;
    height: 520px;
    margin-bottom: 40px;
}

.y-axis { display: none; }

.chart-bars {
    margin-left: 0;
    display: flex;
    align-items: end;
    height: 440px;
    padding: 32px 0;
    gap: 32px;
    position: relative;
}

.grid-lines {
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    height: 376px;
}

.grid-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
}
.grid-line:nth-child(1) { top: 0; }
.grid-line:nth-child(2) { top: 25%; }
.grid-line:nth-child(3) { top: 50%; }
.grid-line:nth-child(4) { top: 75%; }
.grid-line:nth-child(5) { top: 100%; }

.bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
}

.double-bar-container {
    position: relative;
    width: 100%;
    height: 376px;
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 8px;
}

.revenue-bar-container, .employee-bar-container {
    position: relative;
    width: 35px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
}

.bar-segment {
    width: 100%;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    position: relative;
}

.bar-segment:hover {
    transform: translateY(-4px);
    filter: brightness(1.15);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.revenue-segment {
    background: linear-gradient(45deg, #F44336, #D32F2F);
}

.employee-segment {
    background: linear-gradient(45deg, #1976D2, #42A5F5);
}

/* --- グラフの高さ定義 --- */
/* 売上: 200,000万円 = 376px */
.revenue-segment-2019 { height: 14px; }
.revenue-segment-2020 { height: 41px; }
.revenue-segment-2021 { height: 67px; }
.revenue-segment-2022 { height: 102px; }
.revenue-segment-2023 { height: 181px; }
.revenue-segment-2024 { height: 211px; }
.revenue-segment-2025 { height: 267px; }
.revenue-segment-2026 { height: 376px; }

/* 従業員数: 200名 = 376px */
.employee-segment-2019 { height: 8px; }
.employee-segment-2020 { height: 9px; }
.employee-segment-2021 { height: 23px; }
.employee-segment-2022 { height: 36px; }
.employee-segment-2023 { height: 45px; }
.employee-segment-2024 { height: 88px; }
.employee-segment-2025 { height: 134px; }
.employee-segment-2026 { height: 190px; }

/* --- 数値ラベル --- */
.revenue-value, .employee-value {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.revenue-value { color: #D32F2F; }
.employee-value { color: #1976D2; }

/* モバイル用タップ表示ツールチップ */
.mobile-tooltip {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 250, 0.98));
    padding: 16px 20px;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    z-index: 20;
    min-width: 140px;
    text-align: center;
}

/* (ツールチップ位置のメディアクエリは変更なし) */
@media (max-width: 768px) {
    .bar-group:nth-child(1) .mobile-tooltip { top: -56px; }
    .bar-group:nth-child(2) .mobile-tooltip { top: -72px; }
    .bar-group:nth-child(3) .mobile-tooltip { top: -86px; }
    .bar-group:nth-child(4) .mobile-tooltip { top: -106px; }
    .bar-group:nth-child(5) .mobile-tooltip { top: -152px; }
    .bar-group:nth-child(6) .mobile-tooltip { top: -169px; }
    .bar-group:nth-child(7) .mobile-tooltip { top: -202px; }
    .bar-group:nth-child(8) .mobile-tooltip { top: -264px; }
}

@media (max-width: 480px) {
    .bar-group:nth-child(1) .mobile-tooltip { top: -55px; }
    .bar-group:nth-child(2) .mobile-tooltip { top: -68px; }
    .bar-group:nth-child(3) .mobile-tooltip { top: -80px; }
    .bar-group:nth-child(4) .mobile-tooltip { top: -97px; }
    .bar-group:nth-child(5) .mobile-tooltip { top: -135px; }
    .bar-group:nth-child(6) .mobile-tooltip { top: -149px; }
    .bar-group:nth-child(7) .mobile-tooltip { top: -176px; }
    .bar-group:nth-child(8) .mobile-tooltip { top: -228px; }
}


.mobile-tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.98);
    border-right: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

.mobile-tooltip.active {
    display: block;
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.tooltip-revenue {
    font-size: 14px;
    font-weight: 700;
    color: #D32F2F;
    margin-bottom: 8px;
}

.tooltip-employee {
    font-size: 13px;
    font-weight: 600;
    color: #1976D2;
}

.bar-label {
    position: absolute;
    bottom: -56px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-align: center;
    line-height: 1.3;
}

/* CO2削減量グラフ */
.co2-chart {
    background: rgba(255, 255, 255, 0.98);
    padding: 56px;
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.co2-title {
    font-size: 28px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 24px;
    text-align: center;
    letter-spacing: 0.03em;
}

.co2-description {
    font-size: 16px;
    color: #666;
    margin-bottom: 56px;
    line-height: 1.7;
    text-align: center;
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

.co2-chart-container {
    height: 440px;
    position: relative;
}

.co2-y-axis { display: none; }

.co2-bars {
    margin-left: 0;
    display: flex;
    align-items: end;
    height: 360px;
    gap: 24px;
    padding: 32px 0;
    position: relative;
}

.co2-grid-lines {
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    height: 296px;
}

.co2-grid-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(123, 179, 66, 0.15);
}
.co2-grid-line:nth-child(1) { top: 0; }
.co2-grid-line:nth-child(2) { top: 25%; }
.co2-grid-line:nth-child(3) { top: 50%; }
.co2-grid-line:nth-child(4) { top: 75%; }
.co2-grid-line:nth-child(5) { top: 100%; }

.co2-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    justify-content: flex-end;
}

.co2-bar {
    width: 52px;
    background: linear-gradient(45deg, #7CB342, #8BC34A);
    border-radius: 0; /* 角丸は調整可 */
    position: relative; /* ラベルの基準点 */
    bottom: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(123, 179, 66, 0.25);
}

.co2-bar:hover {
    transform: translateY(-4px);
    filter: brightness(1.1);
    box-shadow: 0 12px 32px rgba(123, 179, 66, 0.35);
}

.co2-2019 { height: 17px; }
.co2-2020 { height: 46px; }
.co2-2021 { height: 75px; }
.co2-2022 { height: 129px; }
.co2-2023 { height: 165px; }
.co2-2024 { height: 177px; }
.co2-2025 { height: 234px; }
.co2-2026 { height: 296px; }

.co2-value {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #6A9F38;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.co2-label {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 500;
    color: #666;
    text-align: center;
    line-height: 1.3;
}

.co2-unit {
    text-align: center;
    margin-top: 32px;
    font-size: 16px;
    color: #7CB342;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* --- レスポンシブデザイン --- 
@media (max-width: 1024px) {
    .our-growth-section { padding: 96px 0; }
    .container { padding: 0 24px; }
    .section-title { font-size: 52px; }
    .revenue-chart, .co2-chart { padding: 48px; }
    .chart-container { height: 440px; }
    .co2-chart-container { height: 380px; }
    .chart-bars { height: 360px; gap: 24px; }
    .co2-bars { height: 240px; gap: 20px; }
    .double-bar-container { gap: 6px; height: 296px; }
    .revenue-bar-container, .employee-bar-container { width: 30px; }
    .bar-group { max-width: 100px; }
    .co2-bar { width: 44px; }
    .revenue-value, .employee-value, .co2-value { font-size: 13px; }

    .revenue-segment-2019 { height: 11px; }
    .revenue-segment-2020 { height: 32px; }
    .revenue-segment-2021 { height: 53px; }
    .revenue-segment-2022 { height: 80px; }
    .revenue-segment-2023 { height: 142px; }
    .revenue-segment-2024 { height: 166px; }
    .revenue-segment-2025 { height: 210px; }
    .revenue-segment-2026 { height: 296px; }

    .employee-segment-2019 { height: 6px; }
    .employee-segment-2020 { height: 7px; }
    .employee-segment-2021 { height: 18px; }
    .employee-segment-2022 { height: 28px; }
    .employee-segment-2023 { height: 36px; }
    .employee-segment-2024 { height: 70px; }
    .employee-segment-2025 { height: 105px; }
    .employee-segment-2026 { height: 149px; }

    .co2-2019 { height: 13px; }
    .co2-2020 { height: 37px; }
    .co2-2021 { height: 60px; }
    .co2-2022 { height: 102px; }
    .co2-2023 { height: 131px; }
    .co2-2024 { height: 140px; }
    .co2-2025 { height: 186px; }
    .co2-2026 { height: 240px; }
}

@media (max-width: 768px) {
    .our-growth-section { padding: 80px 0; }
    .container { padding: 0 20px; }
    .section-header { margin-bottom: 64px; }
    .section-title { font-size: 44px; }
    .growth-content { gap: 56px; }
    .revenue-chart, .co2-chart { padding: 40px; border-radius: 24px; }
    .chart-title { font-size: 26px; }
    .co2-title { font-size: 22px; }
    .chart-legend { gap: 32px; margin-bottom: 40px; }
    .chart-container { height: 360px; }
    .co2-chart-container { height: 320px; }
    .chart-bars { height: 280px; gap: 16px; }
    .co2-bars { height: 240px; gap: 16px; }
    .double-bar-container { gap: 4px; height: 216px; }
    .revenue-bar-container, .employee-bar-container { width: 25px; }
    .bar-group { max-width: 80px; }
    .co2-bar { width: 36px; }

    .revenue-value, .employee-value { display: none; }

    .revenue-segment-2019 { height: 8px; }
    .revenue-segment-2020 { height: 24px; }
    .revenue-segment-2021 { height: 38px; }
    .revenue-segment-2022 { height: 58px; }
    .revenue-segment-2023 { height: 104px; }
    .revenue-segment-2024 { height: 121px; }
    .revenue-segment-2025 { height: 154px; }
    .revenue-segment-2026 { height: 216px; }

    .employee-segment-2019 { height: 4px; }
    .employee-segment-2020 { height: 5px; }
    .employee-segment-2021 { height: 13px; }
    .employee-segment-2022 { height: 21px; }
    .employee-segment-2023 { height: 26px; }
    .employee-segment-2024 { height: 51px; }
    .employee-segment-2025 { height: 77px; }
    .employee-segment-2026 { height: 109px; }

    .co2-2019 { height: 10px; }
    .co2-2020 { height: 28px; }
    .co2-2021 { height: 46px; }
    .co2-2022 { height: 78px; }
    .co2-2023 { height: 100px; }
    .co2-2024 { height: 107px; }
    .co2-2025 { height: 142px; }
    .co2-2026 { height: 180px; }
}

@media (max-width: 480px) {
    .section-title { font-size: 36px; }
    .revenue-chart, .co2-chart { padding: 32px; border-radius: 20px; }
    .chart-title { font-size: 22px; }
    .co2-title { font-size: 20px; }
    .chart-legend { flex-direction: column; gap: 20px; align-items: center; }
    .chart-bars, .co2-bars { gap: 12px; margin-left: 0; }
    .double-bar-container { gap: 3px; height: 180px; }
    .revenue-bar-container, .employee-bar-container { width: 20px; }
    .bar-group { max-width: 64px; }
    .co2-bar { width: 28px; }

    .revenue-segment-2019 { height: 7px; }
    .revenue-segment-2020 { height: 20px; }
    .revenue-segment-2021 { height: 32px; }
    .revenue-segment-2022 { height: 49px; }
    .revenue-segment-2023 { height: 87px; }
    .revenue-segment-2024 { height: 101px; }
    .revenue-segment-2025 { height: 128px; }
    .revenue-segment-2026 { height: 180px; }

    .employee-segment-2019 { height: 7px; }
    .employee-segment-2020 { height: 9px; }
    .employee-segment-2021 { height: 21px; }
    .employee-segment-2022 { height: 34px; }
    .employee-segment-2023 { height: 43px; }
    .employee-segment-2024 { height: 84px; }
    .employee-segment-2025 { height: 127px; }
    .employee-segment-2026 { height: 180px; }
    
    .co2-value { font-size: 11px; }
    .bar-label, .co2-label { font-size: 11px; }
    .mobile-tooltip { min-width: 120px; padding: 12px 16px; }
    .tooltip-revenue { font-size: 12px; }
    .tooltip-employee { font-size: 11px; }
}*/