@charset "UTF-8";

/* =========================================
   Environment Section - 会社環境
   ========================================= */

.environment {
    background-color: var(--c-bg-pink);
    padding-top: 20.5rem;
    padding-bottom: 15.6rem;
    position: relative;
    overflow: hidden;
}

.environment__inner {
    max-width: var(--w-content);
    margin: 0 auto;
    width: 100%;
    padding: 0 2rem;
    position: relative;
}

/* Background decorative text */
.environment__bg-text {
    font-family: var(--font-decorative);
    font-size: 16.4rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: var(--c-bg-pink-text);
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    top: 13rem;
    left: 50%;
    margin-left: -63rem;
}

/* Section title */
.environment__title {
    font-family: var(--font-base);
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: var(--c-text-main);
    margin-bottom: 4.1rem;
    position: relative;
    z-index: 1;
}

/* Description text */
.environment__description {
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.8125;
    letter-spacing: 0.1em;
    color: var(--c-text-main);
    margin-bottom: 7.4rem;
    position: relative;
    z-index: 1;
}

/* =========================================
   Stats Grid - 統計カードグリッド
   ========================================= */

.env-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2.9rem;
    margin-bottom: 8.7rem;
    position: relative;
    z-index: 1;
}

/* Card base styles */
.env-card {
    border: 2px solid var(--c-primary);
    border-radius: 2rem;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    box-sizing: border-box;
}

/* 数字と単位の行ラッパー */
.env-card__value-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: nowrap; /* PCでは改行させない */
    white-space: nowrap; /* 強制的に改行禁止 */
    gap: 0.2rem;
    width: 100%;
}

/* Small card (3 per row) */
.env-card--small {
    width: calc((100% - 5.8rem) / 3);
    height: 42rem;
}

/* Medium card (2 per row) */
.env-card--medium {
    width: calc((100% - 2.9rem) / 2);
    min-height: 43.3rem;
}

/* Large card for row 3 */
.env-card--large {
    width: calc((100% - 2.9rem) / 2);
    min-height: 55.5rem;
}

/* Card icon container */
.env-card__icon {
    margin-bottom: 2rem;
}

.env-card__icon img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Card title */
.env-card__title {
    font-family: var(--font-base);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: var(--c-primary);
    text-align: center;
    margin-bottom: 1rem;
}

/* Card big number */
.env-card__number {
    font-family: var(--font-base);
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--c-primary);
    text-align: center;
}

/* Card unit text */
.env-card__unit {
    font-family: var(--font-base);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: var(--c-primary);
    text-align: center;
}

/* Sub text (smaller) */
.env-card__subtext {
    font-family: var(--font-base);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--c-primary);
    text-align: center;
}

/* Note text (smallest) */
.env-card__note {
    font-family: var(--font-base);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: var(--c-primary);
    text-align: left;
}

/* =========================================
   Chart Styles - グラフスタイル
   ========================================= */

.env-chart {
    width: 100%;
    padding: 2rem;
}

.env-chart__section {
    margin-bottom: 2.5rem;
}

.env-chart__section:last-child {
    margin-bottom: 0;
}

.env-chart__title {
    font-family: var(--font-base);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: var(--c-primary);
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Bar chart container */
.env-chart__bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

/* Vertical line adjustment (PC) */
.env-chart__bars::before {
    content: '';
    position: absolute;
    left: 9.5rem; /* ラベル80px + gap15px */
    top: 0;
    width: 4px;
    height: 100%;
    background-color: #231915;
    /* 修正: z-indexを上げてグラフより最前面に */
    z-index: 10;
}

/* Individual bar row */
.env-chart__bar-row {
    display: flex;
    align-items: center;
    gap: 1.5rem; 
}

/* Label style */
.env-chart__bar-label {
    font-family: var(--font-base);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.2;
    letter-spacing: 0;
    color: var(--c-primary);
    width: 8rem;
    min-width: 8rem;
    text-align: center;
}

.env-chart__bar {
    height: 3.2rem;
    background-color: var(--c-primary);
    border-radius: 0;
    position: relative;
    z-index: 1;
}

.env-chart__bar-value {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    position: relative;
    top: -0.3rem; 
}

.env-chart__bar-number {
    font-family: var(--font-base);
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--c-primary);
}

.env-chart__bar-unit {
    font-family: var(--font-base);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--c-primary);
}

/* Revenue chart specific */
.env-chart--revenue .env-chart__bars::before {
    height: 100%; 
}

.env-chart--revenue .env-chart__bar {
    height: 2.9rem;
}

.env-chart--revenue .env-chart__bar-value {
    font-family: var(--font-base);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--c-primary);
}

.env-chart--revenue .env-chart__bar-value .env-chart__bar-prefix,
.env-chart--revenue .env-chart__bar-value .env-chart__bar-unit {
    font-size: 2.8rem;
    position: relative;
    top: -0.3rem;
}

/* =========================================
   Achievement Card Styles - 工事実績カード
   ========================================= */

.env-achievement {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.env-achievement__content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.env-achievement__row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2rem;
}

.env-achievement__amount {
    display: flex;
    align-items: baseline;
}

.env-achievement__amount-num {
    font-family: var(--font-base);
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--c-primary);
}

.env-achievement__amount-unit {
    font-family: var(--font-base);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--c-primary);
    position: relative;
    top: -0.3rem;
}

.env-achievement__count {
    display: flex;
    align-items: baseline;
}

.env-achievement__count-prefix {
    font-family: var(--font-base);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.15em;
    color: var(--c-primary);
    position: relative;
    top: -0.3rem;
}

.env-achievement__count-num {
    font-family: var(--font-base);
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--c-primary);
}

.env-achievement__count-unit {
    font-family: var(--font-base);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.15em;
    color: var(--c-primary);
    position: relative;
    top: -0.3rem;
}

/* =========================================
   Salary Card Styles - モデル年収カード
   ========================================= */

.env-salary {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.env-salary__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    padding: 0 2rem;
}

.env-salary__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.env-salary__label {
    font-family: var(--font-base);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: var(--c-primary);
}

.env-salary__value {
    display: flex;
    align-items: baseline;
}

.env-salary__value-num {
    font-family: var(--font-base);
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--c-primary);
}

.env-salary__value-unit {
    font-family: var(--font-base);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--c-primary);
}

/* =========================================
   Benefits Section - 福利厚生
   ========================================= */

.env-benefits-title {
    font-family: var(--font-base);
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: var(--c-primary);
    text-align: center;
    margin-bottom: 5rem;
    position: relative;
    z-index: 1;
}

.env-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.6rem 2.9rem;
    position: relative;
    z-index: 1;
}

/* Benefit card */
.benefit-card {
    width: 33.4rem;
    height: 24.4rem;
    background-color: var(--c-primary);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    box-sizing: border-box;
}

.benefit-card__icon {
    width: 6.5rem;
    height: 6.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-card__icon img {
    max-width: 100%;
    max-height: 100%;
}

.benefit-card__title {
    font-family: var(--font-base);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: var(--c-text-white);
    text-align: center;
    margin-bottom: 1rem;
}

.benefit-card__description {
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.8125;
    letter-spacing: 0.1em;
    color: var(--c-text-white);
    text-align: center;
}

/* =========================================
   SP Responsive Styles
   ========================================= */

@media (max-width: 768px) {
    .environment {
        padding-top: 8.4rem;
        padding-bottom: 3.1rem;
    }

    .environment__inner {
        padding: 0 1rem;
    }

    .environment__bg-text {
        font-size: 7.7rem;
        top: 4.5rem;
        left: 0;
        /* ▼ SP修正: PC用のマージンをリセット */
        margin-left: 0;
    }

    .environment__title {
        font-size: 2.2rem;
        margin-bottom: 2.1rem;
    }

    .environment__description {
        font-size: 1.4rem;
        line-height: 1.5;
        letter-spacing: 0.1em;
        margin-bottom: 2.6rem;
    }

    /* Stats Grid SP */
    .env-stats {
        gap: 0.9rem;
        margin-bottom: 4rem;
    }

    .env-card {
        border-width: 1px;
        border-radius: 1rem;
        padding: 1.5rem 1rem;
    }
    
    /* SP用：20~25とヶ所を改行させる */
    .env-card__value-row--break-sp {
        flex-direction: column;
        align-items: center;
        line-height: 1.1;
    }

    /* Row 1: 3 small cards (SP) */
    .env-card--small {
        width: calc((100% - 1.8rem) / 3);
        height: auto;
        min-height: 17.8rem;
    }

    /* Row 2: 2 medium cards (SP) */
    .env-card--medium {
        width: calc((100% - 0.9rem) / 2);
        min-height: 18.1rem;
    }

    /* Row 3 & 4: Achievement & Salary (SP) 
       修正: 1段1囲いにするため width: 100%
    */
    .env-card--large {
        width: 100%; 
        min-height: auto;
        flex-direction: row; 
        /* 修正: 全体を中央揃えにしつつ、上下も中央揃え */
        align-items: center;
        justify-content: center;
        text-align: left;
        padding: 2rem 1.5rem;
        gap: 2.5rem;
        height: auto;
    }

    /* 修正: アイコン画像をさらに大きく (120px) */
    .env-card--large .env-card__icon {
        margin-bottom: 0;
        flex-shrink: 0;
        width: 12rem; 
        height: auto;
    }

    .env-card--large .env-card__content {
        /* 修正: width: autoにして中身に合わせて縮ませ、親のcenterを効かせる */
        flex: 0 1 auto;
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .env-card--large .env-card__title {
        text-align: left;
        margin-bottom: 0.5rem;
    }
    .env-card--large .env-card__note {
        text-align: left;
    }
    
    .env-achievement {
        align-items: flex-start;
    }
    .env-achievement__content {
        gap: 0.8rem;
        align-items: flex-start;
    }
    
    .env-salary {
        align-items: flex-start;
    }
    .env-salary__content {
        padding: 0;
        gap: 0.8rem;
        align-items: flex-start;
    }

    /* SP icon sizes */
    .env-card__icon img {
        width: 100%;
        height: auto;
    }

    /* Icon size adjustments for small cards */
    .env-card--small .env-card__icon {
        width: 7rem;
        height: 5.9rem;
    }

    .env-card__title {
        font-size: 1.3rem;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
    }

    .env-card__number {
        font-size: 2.2rem;
    }

    .env-card__unit {
        font-size: 1.3rem;
    }

    .env-card__subtext {
        font-size: 1.3rem;
    }

    .env-card__note {
        font-size: 0.8rem;
    }

    /* Chart styles SP */
    .env-chart {
        padding: 1rem;
    }

    .env-chart__section {
        margin-bottom: 1.5rem;
    }

    .env-chart__title {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    /* グラフ調整 SP */
    .env-chart__bars::before {
        width: 2px;
        left: 3.9rem; 
    }

    .env-chart__bar-row {
        gap: 0.5rem;
    }

    .env-chart__bar-label {
        font-size: 0.8rem;
        line-height: 1.5;
        width: 3.4rem;
        min-width: 3.4rem;
    }

    .env-chart__bar {
        height: 1.2rem;
    }

    .env-chart__bar-number {
        font-size: 2.2rem;
    }

    .env-chart__bar-unit {
        font-size: 1.3rem;
    }

    .env-chart--revenue .env-chart__bar {
        height: 1.3rem;
    }

    .env-chart--revenue .env-chart__bar-value {
        font-size: 1.3rem;
    }

    .env-chart--revenue .env-chart__bar-value .env-chart__bar-prefix,
    .env-chart--revenue .env-chart__bar-value .env-chart__bar-unit {
        font-size: 1.3rem;
    }

    /* Achievement card SP adjustments */
    .env-achievement__row {
        /* 修正: 余白をもっと広く (15px -> 35px) */
        gap: 3.5rem; 
        flex-wrap: wrap; 
        justify-content: flex-start;
    }

    .env-achievement__amount-num {
        font-size: 2.4rem;
    }

    .env-achievement__amount-unit {
        font-size: 1.4rem;
    }

    .env-achievement__count-prefix {
        font-size: 1.4rem;
    }

    .env-achievement__count-num {
        font-size: 2.4rem;
    }

    .env-achievement__count-unit {
        font-size: 1.4rem;
    }
    
    /* Salary card SP adjustments */
    .env-salary__row {
        align-items: flex-start;
    }

    .env-salary__label {
        font-size: 1.4rem;
        text-align: left;
    }

    .env-salary__value-num {
        font-size: 2.4rem;
    }

    .env-salary__value-unit {
        font-size: 1.4rem;
    }

    /* Benefits section SP */
    .env-benefits-title {
        font-size: 2.2rem;
        line-height: 1.4;
        margin-bottom: 2.3rem;
    }

    .env-benefits {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem 1.4rem;
    }

    .benefit-card {
        width: 100%;
        height: auto;
        min-height: 17.8rem;
        padding: 2rem 1.5rem;
    }

    .benefit-card__icon {
        width: 3.8rem;
        height: 3.8rem;
        margin-bottom: 1rem;
    }

    .benefit-card__title {
        font-size: 2.2rem;
        margin-bottom: 0.8rem;
    }

    .benefit-card__description {
        font-size: 1.4rem;
        line-height: 1.4;
    }

    .benefit-card--condolence .benefit-card__title {
        font-size: 1.9rem;
    }

    .benefit-card--condolence .benefit-card__description {
        font-size: 1.2rem;
        line-height: 1.3;
    }
}

@media (max-width: 441px) {
    
/* -----------------------------------------
       1. 現場稼働状況 (8番目のカード)
       ----------------------------------------- */
    .env-stats > div:nth-child(8) .env-card__value-row {
        flex-direction: column;
        align-items: center;
        gap: 0;
        line-height: 1.2;
    }

    /* -----------------------------------------
       2. アイコンサイズ調整 (6番目・7番目のカード)
       ----------------------------------------- */
    /* 工事実績 */
    .env-stats > div:nth-child(6) .env-card__icon { width: 9rem; }

    /* -----------------------------------------
       3. 工事実績の余白調整
       ----------------------------------------- */
    .env-achievement__row {
        gap: 1.5rem;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    /* -----------------------------------------
       4. 男女・国籍比率 (4番目のカード)
       ----------------------------------------- */
    /* 男女比率 */
    .env-stats > div:nth-child(4) .env-chart__section:first-child .env-chart__bar-row:nth-child(1) .env-chart__bar { width: 10.5rem !important; } /* 男性 */
    .env-stats > div:nth-child(4) .env-chart__section:first-child .env-chart__bar-row:nth-child(2) .env-chart__bar { width: 1.5rem !important; }  /* 女性 */
    
    /* 国籍比率 */
    .env-stats > div:nth-child(4) .env-chart__section:nth-child(2) .env-chart__bar-row:nth-child(1) .env-chart__bar { width: 6.0rem !important; } /* 日本人 */
    .env-stats > div:nth-child(4) .env-chart__section:nth-child(2) .env-chart__bar-row:nth-child(2) .env-chart__bar { width: 5.8rem !important; } /* 外国人 */

    /* -----------------------------------------
       5. 売上高グラフ (5番目のカード - 場所指定で確実に)
       ----------------------------------------- */
    /* 2025年 (77億) */
    .env-stats > div:nth-child(5) .env-chart__bar-row:nth-child(1) .env-chart__bar { width: 11.5rem !important; }
    /* 2024年 (73億) */
    .env-stats > div:nth-child(5) .env-chart__bar-row:nth-child(2) .env-chart__bar { width: 11.0rem !important; }
    /* 2023年 (65億) */
    .env-stats > div:nth-child(5) .env-chart__bar-row:nth-child(3) .env-chart__bar { width: 9.8rem !important; }
    /* 2022年 (44億) */
    .env-stats > div:nth-child(5) .env-chart__bar-row:nth-child(4) .env-chart__bar { width: 6.6rem !important; }
    /* 2021年 (46億) */
    .env-stats > div:nth-child(5) .env-chart__bar-row:nth-child(5) .env-chart__bar { width: 6.9rem !important; }
}

/* =========================================
   Small Mobile (375px or less)
   ========================================= */
@media (max-width: 376px) {
    .env-achievement__amount-num { font-size: 2.2rem; }
    .env-achievement__amount-unit { font-size: 1.3rem; }
    .env-achievement__count-num { font-size: 2.2rem; }
    .env-achievement__count-prefix,
    .env-achievement__count-unit { font-size: 1.3rem; }
    
    .env-achievement__row {
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;
    }
}

/* =========================================
   Extra Small Mobile (320px or less)
   ========================================= */
@media (max-width: 321px) {
    
    /* 1. グラフサイズ縮小 (320px対応) */
    
    /* 男女 (4番目のカード) */
    .env-stats > div:nth-child(4) .env-chart__section:first-child .env-chart__bar-row:nth-child(1) .env-chart__bar { width: 9.0rem !important; }
    .env-stats > div:nth-child(4) .env-chart__section:first-child .env-chart__bar-row:nth-child(2) .env-chart__bar { width: 1.2rem !important; }
    
    /* 国籍 (4番目のカード) */
    .env-stats > div:nth-child(4) .env-chart__section:nth-child(2) .env-chart__bar-row:nth-child(1) .env-chart__bar { width: 5.2rem !important; }
    .env-stats > div:nth-child(4) .env-chart__section:nth-child(2) .env-chart__bar-row:nth-child(2) .env-chart__bar { width: 5.0rem !important; }

    /* 売上高 (5番目のカード) */
    /* 2025年 */
    .env-stats > div:nth-child(5) .env-chart__bar-row:nth-child(1) .env-chart__bar { width: 9.5rem !important; }
    /* 2024年 */
    .env-stats > div:nth-child(5) .env-chart__bar-row:nth-child(2) .env-chart__bar { width: 9.0rem !important; }
    /* 2023年 */
    .env-stats > div:nth-child(5) .env-chart__bar-row:nth-child(3) .env-chart__bar { width: 8.0rem !important; }
    /* 2022年 */
    .env-stats > div:nth-child(5) .env-chart__bar-row:nth-child(4) .env-chart__bar { width: 5.4rem !important; }
    /* 2021年 */
    .env-stats > div:nth-child(5) .env-chart__bar-row:nth-child(5) .env-chart__bar { width: 5.6rem !important; }

    /* その他調整 */
    .env-chart__bar-label { font-size: 0.7rem; width: 3rem; min-width: 3rem; }
    .env-chart__bars::before { left: 3.4rem; } 
    
    /* 2. アイコンサイズ縮小 */
    .env-stats > div:nth-child(6) .env-card__icon { width: 7rem; }
    .env-stats > div:nth-child(7) .env-card__icon { width: 8rem; }
    
    /* 3. 文字サイズ */
    .env-achievement__amount-num { font-size: 2.0rem; }
    .env-achievement__count-num { font-size: 2.0rem; }
}

/* =========================================
   モデル年収カード 追加・上書きスタイルまとめ
   ========================================= */

/* --- 枠内の左右余白 --- */
.env-salary__content {
    padding: 0 1rem; /* 左右の余白を少し狭くして広く使う */
}

/* --- 数字とテキストの並び・上の余白 --- */
.env-salary__value {
    display: flex;
    align-items: baseline;
    margin-top: 2.5rem; /* 上にルビが収まるスペースを確保 */
}

/* --- 数字 --- */
.env-salary__value-num {
    font-family: var(--font-base);
    font-size: 4.2rem; /* ★ 4.6remから4.2remへ少し小さく調整 */
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em; /* 文字間を少し詰める */
    color: var(--c-primary);
}

/* ルビの配置基準（※これがないとルビが消えます） */
.env-salary__value-num.has-ruby {
    position: relative;
}

/* --- ルビ（《監督見習》など） --- */
.env-salary__ruby {
    position: absolute;
    bottom: 100%;
    left: 0;
    font-family: var(--font-base);
    font-size: 1.4rem; 
    font-weight: 700;
    font-style: normal; /* 斜体を解除 */
    color: var(--c-primary);
    white-space: nowrap;
    line-height: 1;
    margin-bottom: 0.5rem;
}

/* --- 「万円」 --- */
.env-salary__value-unit {
    font-size: 2.4rem !important; /* 少し小さく */
}

/* --- 「以上多数」 --- */
.env-salary__value-more {
    font-family: var(--font-base);
    font-size: 2.8rem !important; /* 「万円」より少し大きく */
    font-weight: 500; /* 太字を解除 */
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--c-primary) !important; 
    margin-left: 0.4rem;
}


/* =========================================
   モデル年収カード スマホ用調整（768px以下）
   ========================================= */
@media (max-width: 768px) {
    /* カード全体の左右余白を狭める */
    .env-card--large {
        padding: 2rem 1rem;
    }

    .env-salary__value {
        margin-top: 2rem;
    }
    
    .env-salary__value-num {
        font-size: 2.1rem; /* ★ 2.3remから2.1remへ少し小さく調整 */
    }
    
    .env-salary__ruby {
        font-size: 1.1rem; 
        margin-bottom: 0.3rem;
    }

    .env-salary__value-unit {
        font-size: 1.2rem !important;
    }
    
    .env-salary__value-more {
        font-size: 1.4rem !important; 
        margin-left: 0.2rem;
    }
}

/* =========================================
   縦棒 ＋ 折れ線グラフ (売上高用)
   ========================================= */

.env-chart__vertical-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* 共通カラム設定（5等分） */
.env-chart__v-row-values,
.env-chart__v-bars-container,
.env-chart__v-row-labels {
    display: flex;
    width: 100%;
}
.env-chart__v-col {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* --- 上部：数値行 --- */
.env-chart__v-row-values {
    margin-bottom: 0.5rem;
}
.env-chart__v-row-values .env-chart__v-col {
    align-items: baseline;
    color: var(--c-primary);
}
.env-chart__v-num {
    font-family: var(--font-base);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}
.env-chart__v-unit {
    font-family: var(--font-base);
    font-size: 1.2rem;
    font-weight: 700;
    margin-left: 0.1rem;
}

/* --- 中間：グラフエリア --- */
.env-chart__v-row-graph {
    position: relative;
    width: 100%;
    height: 16rem; /* ★元の横棒グラフとほぼ同じ高さを確保 */
    border-bottom: 2px solid #231915; /* 底辺の黒線 */
    margin-bottom: 0.8rem;
}

/* 折れ線 SVG */
.env-chart__line-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* 縦棒コンテナ */
.env-chart__v-bars-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1;
}
.env-chart__v-bars-container .env-chart__v-col {
    align-items: flex-end; /* 下から伸びるように配置 */
}

/* 縦棒 */
.env-chart__v-bar {
    width: 3.6rem;
    background-color: var(--c-bg-pink-text); /* 線を目立たせるため薄いピンク */
    position: relative;
    
    /* 下から上に伸びるアニメーション */
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* アニメーション発火 */
.is-animated .env-chart__v-bar,
.env-chart__v-bar.is-animated {
    transform: scaleY(1);
}

/* 棒グラフの遅延 */
.env-chart__v-bars-container .env-chart__v-col:nth-child(1) .env-chart__v-bar { transition-delay: 0.1s; }
.env-chart__v-bars-container .env-chart__v-col:nth-child(2) .env-chart__v-bar { transition-delay: 0.2s; }
.env-chart__v-bars-container .env-chart__v-col:nth-child(3) .env-chart__v-bar { transition-delay: 0.3s; }
.env-chart__v-bars-container .env-chart__v-col:nth-child(4) .env-chart__v-bar { transition-delay: 0.4s; }
.env-chart__v-bars-container .env-chart__v-col:nth-child(5) .env-chart__v-bar { transition-delay: 0.5s; }

/* 折れ線の頂点（ドット） */
.env-chart__v-dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); /* 棒の真上中央に配置 */
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--c-text-white);
    border: 2px solid var(--c-primary);
    border-radius: 50%;
    z-index: 3;
}

/* --- 下部：ラベル行 --- */
.env-chart__v-row-labels .env-chart__v-col {
    font-family: var(--font-base);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--c-primary);
}


/* =========================================
   レスポンシブ (スマホ用サイズ調整)
   ========================================= */
@media (max-width: 768px) {
    /* スマホでも枠の大きさを崩さないよう内部を縮小 */
    .env-chart__v-row-graph { height: 10rem; }
    .env-chart__v-num { font-size: 1.6rem; }
    .env-chart__v-unit { font-size: 1.0rem; }
    .env-chart__v-bar { width: 2.2rem; }
    .env-chart__v-row-labels .env-chart__v-col { font-size: 1.0rem; }
    .env-chart__v-dot { width: 0.9rem; height: 0.9rem; border-width: 1.5px; }
}

@media (max-width: 441px) {
    .env-chart__v-bar { width: 1.8rem; }
    .env-chart__v-num { font-size: 1.4rem; }
    .env-chart__v-row-labels .env-chart__v-col { font-size: 0.9rem; }
}

@media (max-width: 321px) {
    .env-chart__v-bar { width: 1.4rem; }
    .env-chart__v-num { font-size: 1.1rem; }
    .env-chart__v-unit { font-size: 0.8rem; }
    .env-chart__v-row-labels .env-chart__v-col { font-size: 0.75rem; }
    .env-chart__v-dot { width: 0.7rem; height: 0.7rem; border-width: 1px; }
}

/* =========================================
   Tablet Adjustments (819px - 1024px)
   ========================================= */
@media screen and (min-width: 819px) and (max-width: 1024px) {

   .business {
        padding-bottom: 8rem !important; 
        margin-bottom:0px !important;
    }
	
    /* 1. 背景の "Environment" 文字を右にずらす */
    .environment__bg-text {
        margin-left: -40rem !important; 
    }

    /* 2. エリア最上部の余白（高さ）を狭める */
    .environment {
        padding-top: 0rem !important;
		margin-top: -6rem !important;
		padding-bottom: 10rem;
    }
	
    /* 3. 現場稼働状況（8番目のカード）の「300~400」と「名/日」を改行させる */
    .env-stats > div:nth-child(8) .env-card__value-row {
        flex-direction: column !important; /* 縦並びに変更 */
        align-items: center !important;    /* 中央揃え */
        line-height: 1.2 !important;
        gap: 0.5rem !important;            /* 数字と単位の隙間 */
    }

    /* 4. 「その他、様々な制度を」で改行する（スマホ用の改行タグをタブレットでも作動させる） */
    .env-benefits-title .sp-only {
        display: inline !important; /* 非表示になっていた <br> を有効化して意図した場所で改行 */
    }
    
    /* 念のため、文字が大きすぎて意図しない場所で自然改行されるのを防ぐ微調整 */
    .env-benefits-title {
        font-size: 4.2rem !important; /* 元の 4.8rem から少しだけ縮小 */
    }
	
.env-salary__value-num {
    font-size: 3.6rem !important; /* 数字（元 4.2rem） */
}

.env-salary__ruby {
    font-size: 1.2rem !important; /* ルビ（元 1.4rem） */
}

.env-salary__value-unit {
    font-size: 1.7rrem !important; /* 万円（元 2.4rem） */
}

.env-salary__value-more {
    font-size: 2.0rem !important; /* 以上多数（元 2.8rem） */
}	

.env-benefits {
    grid-template-columns: repeat(2, 1fr) !important; /* 3列から2列に変更 */
    gap: 3rem 2rem !important; /* 上下の余白3rem、左右の余白2rem */
    justify-items: center !important; /* カードを中央に配置 */
}

.benefit-card {
    width: 100% !important; /* 固定幅を解除して画面内に収める */
    max-width: 38rem !important; /* 横に広がりすぎるのを防ぐ */
    height: auto !important; /* 文字数によって高さが伸びるようにする */
    min-height: 24.4rem !important; /* PC版の元の高さは最低限キープ */
}
}

/* =========================================
   サイト全体の Z-index（重なり順）ルール
   ※数値が大きいほど「手前（お客様側）」に表示されます
   ========================================= */

/* 1層目：ビジネスエリア（一番奥のベース） */
.business {
    position: relative !important;
    z-index: 2 !important;
}

/* 2層目：会社環境エリア（ビジネスエリアの少し手前） */
.environment {
    position: relative !important;
    z-index: 1 !important;
}

/* 3層目：ヘッダー（スクロールしてもコンテンツが下に潜り込むようにする） */
/* ※ クラス名が .header ではない場合は、実際のクラス名（#headerなど）に変更してください */
.header {
    position: relative !important; /* 固定(fixed)にしている場合は fixed !important のままでOKです */
    z-index: 50 !important;        /* エリア群より確実に手前に持ってくる */
}

/* 4層目：フローティングボタン（一番手前の特等席） */
.floating-btn {
    z-index: 100 !important;       /* ヘッダーよりもさらに手前にするなら一番大きな数値を */
}


/* =========================================
   Line Chart Styles - 新・売上高折れ線グラフ
   ========================================= */

.env-line-graph {
    width: 100%;
    height: 28rem; 
    display: flex;
    flex-direction: column;
    margin-top: 3.5rem; 
}

.env-line-graph__plot-area {
    position: relative;
    flex: 1; 
    width: 100%;
    margin-bottom: 0.5rem;
}

/* 横の黒線 (X軸) - 太さを 2px -> 4px に変更 */
.env-line-graph__axis-x {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #231915; 
    z-index: 1;
}

.env-line-graph__svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: visible;
    clip-path: inset(-20% 100% -20% -10%);
    transition: clip-path 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.env-line-graph__svg.is-animated {
    clip-path: inset(-20% -10% -20% -10%);
}

.env-line-graph__path {
    fill: none;
    stroke: var(--c-primary);
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.env-line-graph__point {
    position: absolute;
    transform: translateX(-50%) translateY(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.env-line-graph__point.is-animated {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.env-line-graph__dot {
    position: absolute;
    bottom: 0;
    transform: translateY(50%); 
    width: 1.4rem;
    height: 1.4rem;
    background-color: var(--c-text-white);
    border: 3px solid var(--c-primary);
    border-radius: 50%;
}

/* 数値と単位 */
.env-line-graph__val {
    display: flex;
    align-items: baseline;
    color: var(--c-primary);
    /* ▼ グラフと文字が被らないよう、余白を広くしました (1.2rem -> 1.6rem) */
    margin-bottom: 1.6rem; 
    white-space: nowrap;
}

/* ▼ 文字サイズを比率を保ったまま大きくしました */
.env-line-graph__val .num {
    font-family: var(--font-base);
    font-size: 3.5rem; /* 2.8rem -> 3.5rem */
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

.env-line-graph__val .unit {
    font-family: var(--font-base);
    font-size: 2.0rem; /* 1.6rem -> 2.0rem */
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    margin-left: 0.2rem;
}

/* 下部の年度ラベル */
.env-line-graph__labels {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

/* ▼ 色を赤(--c-primary)にし、文字サイズを大きくしました */
.env-line-graph__label {
    flex: 1;
    text-align: center;
    font-family: var(--font-base);
    font-size: 1.5rem; /* 1.3rem -> 1.5rem */
    font-weight: 700;
    color: var(--c-primary); 
    letter-spacing: 0;
}


/* --- レスポンシブ調整（スマホ・極小スマホ） --- */
@media (max-width: 768px) {
    .env-line-graph {
        height: 18rem;
        margin-top: 2rem;
    }
    .env-line-graph__path {
        stroke-width: 3px;
    }
    .env-line-graph__val {
        margin-bottom: 1.0rem;
    }
    /* SP用も比率に合わせて大きく */
    .env-line-graph__val .num {
        font-size: 2.2rem; 
    }
    .env-line-graph__val .unit {
        font-size: 1.3rem;
    }
    .env-line-graph__dot {
        width: 1.1rem;
        height: 1.1rem;
        border-width: 2.5px;
    }
    .env-line-graph__label {
        font-size: 1.1rem;
    }
}

@media (max-width: 441px) {
    .env-line-graph__val .num {
        font-size: 2.0rem;
    }
    .env-line-graph__val .unit {
        font-size: 1.2rem;
    }
    .env-line-graph__label {
        font-size: 1.0rem;
    }
}

@media (max-width: 321px) {
    .env-line-graph__val {
        margin-bottom: 0.8rem;
    }
    .env-line-graph__val .num {
        font-size: 1.6rem;
    }
    .env-line-graph__val .unit {
        font-size: 1.0rem;
    }
    .env-line-graph__dot {
        width: 0.9rem;
        height: 0.9rem;
        border-width: 2px;
    }
    .env-line-graph__label {
        font-size: 0.85rem;
        letter-spacing: -0.05em; 
    }
}

/* =========================================
   Tablet Adjustments (819px - 1024px)
   ========================================= */
@media screen and (min-width: 819px) and (max-width: 1024px) {
    
    /* 数字と「億」を、比率を保ったまま少し小さく（3.5rem/2.0rem → 2.8rem/1.6rem） */
    .env-line-graph__val .num {
        font-size: 2.8rem !important;
    }
    .env-line-graph__val .unit {
        font-size: 1.6rem !important;
    }

    /* 折れ線グラフ（線とドット）全体を少し下にずらす */
    .env-line-graph__svg {
        transform: translateY(1.5rem); /* 1.5rem(約15px) 下へ */
    }
    .env-line-graph__point.is-animated {
        transform: translateX(-50%) translateY(1.5rem) !important;
    }
}

/* =========================================
   Small Tablet / Large SP (767px - 818px)
   ========================================= */
@media screen and (min-width: 767px) and (max-width: 818px) {
    
    /* 44億のテキストのみ少し下に下げる */
    /* ※HTMLに直書きした margin-bottom: 4.0rem を上書きして減らします */
    .env-line-graph__point:nth-of-type(2) .env-line-graph__val {
        margin-bottom: 2.5rem !important; /* 4.0remから減らして下へ近づける */
    }
}

/* =========================================
   スマホ表示：数字のみ縮小・「億」は維持
   ========================================= */

@media (max-width: 766px) {
    /* 数字のみ少し小さく（元 2.2rem → 1.9rem） */
    .env-line-graph__val .num {
        font-size: 1.9rem !important; 
    }
    /* 「億」はそのまま維持 */
    .env-line-graph__val .unit {
        font-size: 1.3rem !important;
    }
}

@media (max-width: 441px) {
    /* 数字のみ少し小さく（元 2.0rem → 1.7rem） */
    .env-line-graph__val .num {
        font-size: 1.7rem !important;
    }
    /* 「億」はそのまま維持 */
    .env-line-graph__val .unit {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 321px) {
    /* 数字のみ少し小さく（元 1.6rem → 1.4rem） */
    .env-line-graph__val .num {
        font-size: 1.4rem !important;
    }
    /* 「億」はそのまま維持 */
    .env-line-graph__val .unit {
        font-size: 1.0rem !important;
    }
}

/* =========================================
   スマホ表示（768px以下）：特定年度の上下位置調整
   ========================================= */

@media (max-width: 766px) {
    
    /* 44億（左から2番目）を少し下げる */
    /* ※PC用に設定した 4.0rem を減らして線に近づけます */
    .env-line-graph__plot-area div.env-line-graph__point:nth-of-type(3) .env-line-graph__val {
        margin-bottom: 2.7rem !important; 
    }

    /* 77億（左から5番目）を少し上に上げる */
    /* ※下方向の余白を増やして上に押し上げます */
    .env-line-graph__plot-area div.env-line-graph__point:nth-of-type(6) .env-line-graph__val {
        margin-bottom: 2.2rem !important; 
    }
	
/* 65億（左から3番目）を少し上に上げる */
    .env-line-graph__plot-area div.env-line-graph__point:nth-of-type(4) .env-line-graph__val {
        margin-bottom: 1.95rem !important; 
    }

    /* 73億（左から4番目）を少し上に上げる */
    .env-line-graph__plot-area div.env-line-graph__point:nth-of-type(5) .env-line-graph__val {
        margin-bottom: 2.3rem !important; 
    }
	
/* 折れ線（線そのもの）を下にずらす */
    .env-line-graph__svg {
        transform: translateY(1.0rem); /* 1.0rem（約10px）下に移動 */
    }

    /* 線上の「ドット（丸）」も同じだけ下にずらす */
    /* ※元々の translateY(50%) に 1.0rem を足して位置を合わせます */
    .env-line-graph__dot {
        transform: translateY(calc(50% + 1.0rem)) !important;
    }
	
}