@charset "UTF-8";

/* =========================================
   Manufacturing Section - モノづくり紹介
   ========================================= */

/* Container */
.manufacturing {
    position: relative;
    width: 100%;
    height: 32.4rem;
    background-image: url('../images/bg-manufacturing-pc.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Inner container for content positioning */
.manufacturing__inner {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Background decorative text "Manufacturing" - 非表示 */
.manufacturing__bg-text {
    display: none;
}

/* Content wrapper */
.manufacturing__content {
    position: relative;
    padding-top: 11rem;
    padding-left: 66.6rem;
    z-index: 1;
}

/* Section title */
.manufacturing__title {
    font-family: var(--font-base);
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.15em;
    color: var(--c-text-white);
}

/* SP only line break */
.manufacturing__title .sp-only {
    display: none;
}


/* =========================================
   SP Version (max-width: 768px)
   ========================================= */

@media (max-width: 76.8rem) {
    /* Manufacturing Section - SP */
    .manufacturing {
        height: auto;
        min-height: 17.4rem;
        background-image: url('../images/bg-manufacturing-sp.jpg');
        background-position: center;
    }
    
    /* Background decorative text - SP - 非表示を継続 */
    .manufacturing__bg-text {
        display: none;
    }
    
    /* Content wrapper - SP (右にずらす) */
    .manufacturing__content {
        padding-top: 2.8rem;
        padding-left: 22rem; /* 180px → 220px に増加して右にずらす */
        padding-right: 2rem;
        padding-bottom: 2.3rem;
    }
    
    /* Section title - SP */
    .manufacturing__title {
        font-size: 2.3rem;
        line-height: 1.45;
        letter-spacing: 0.15em;
        text-align: left;
    }
    
    /* SP only line break - show on SP */
    .manufacturing__title .sp-only {
        display: inline !important;
    }
    
    /* PC only line break - hide on SP */
    .manufacturing__title .pc-only {
        display: none !important;
    }
}

/* =========================================
   Manufacturing Section Adjustments (390px or less)
   ========================================= */
@media (max-width: 391px) {
    .manufacturing__content {
        /* 左の余白を減らしてテキストエリアを広げる */
        /* 元の 22rem (220px) から 16rem (160px) に変更 */
        padding-left: 22rem; 
        
        /* 右の余白も少し詰めてさらに幅を確保 */
        padding-right: 1rem;
    }
    
    .manufacturing__title {
        /* 幅に合わせて文字サイズも微調整し、意図しない改行を防ぐ */
        font-size: 2.0rem;
        letter-spacing: 0.1em;
    }
}

@media (max-width: 361px) {
    .manufacturing__content {
        padding-left: 21rem; 
    }
    
    .manufacturing__title {
        font-size: 1.9rem;
    }
}

@media (max-width: 321px) {
    .manufacturing__content {
        padding-left: 18rem; 
    }
    
    .manufacturing__title {
        font-size: 1.8rem;
    }
}

/* =========================================
   Tablet Adjustments (767px - 1024px)
   文章ブロックを右端の方にずらす ＋ 背景の高さを広げる
   ========================================= */
@media screen and (min-width: 767px) and (max-width: 1024px) {
    
    /* ▼ 修正：背景画像のエリアの高さを少し狭める */
    .manufacturing {
        height: 35rem !important; /* 先ほどの 40rem から 36rem に減らしました */
    }
    
    .manufacturing__content {
        padding-left: 0 !important;
        width: fit-content !important;
        margin-left: auto !important;
        padding-right: 4rem !important; 
        padding-top: 4rem !important;
		padding-bottom: 7rem !important;
    }
    
    .manufacturing__title {
        font-size: 3.2rem !important; 
    }
}

/* =========================================
   376px以下 (極小スマホ) 専用レイアウト調整
   ========================================= */
@media screen and (max-width: 376px) {

    /* ----------------------------------------------------
       1. 直近3年間の工事実績 / 2. モデル年収
       ---------------------------------------------------- */
.env-card--large {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 3.5rem 1.5rem !important; 
    }

    /* タイトル（さらに大きく） */
    .env-card--large .env-card__title {
        font-size: 2.4rem !important; /* 2.2remから拡大 */
        margin-bottom: 2.5rem !important;
        text-align: center !important;
        width: 100% !important;
    }

/* 【修正箇所】モデル年収：文字全体をさらに拡大し、間隔を調整 */
    .env-salary__row {
        flex-direction: column !important;
        align-items: flex-start !important; /* ラベルと数値の左端を揃える */
        margin-bottom: 4rem !important; /* 行間を少し広げる */
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
        min-width: 28rem !important; /* 横幅を確保して重なりを防止 */
    }
    .env-achievement__amount-num, 
    .env-achievement__count-num {
        font-size: 3.4rem !important; /* 数字を大幅に拡大 */
        line-height: 1 !important;
    }
    .env-achievement__amount-unit, 
    .env-achievement__count-unit {
        font-size: 1.8rem !important; /* 単位も比率を合わせて拡大 */
    }
	
.env-salary__label {
        font-size: 2.2rem !important; /* 監督・職人ラベルを拡大 */
        margin-bottom: 1.2rem !important;
    }

.env-salary__value {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* 改行させずに横に並べる */
        justify-content: flex-start !important;
        gap: 0 2.5rem !important; /* 左右の数値の間隔をしっかり空ける（重なり解消） */
        width: 100% !important;
    }

.env-salary__value-num {
        font-size: 3.0rem !important; /* 金額をさらに拡大 */
        white-space: nowrap !important;
    }

.env-salary__value-unit,
    .env-salary__value-more {
        font-size: 1.6rem !important; /* 単位も拡大 */
    }
	
    /* ----------------------------------------------------
       3. 現場稼働状況
       (左画像・右文字、行間を極限までタイトに、改行なし)
       ---------------------------------------------------- */
    .env-stats > *:nth-last-child(3) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: grid !important;
        /* 左側に画像、右側にテキストエリアを確保 */
        grid-template-columns: auto 1fr !important;
        align-items: center !important;
        column-gap: 1.5rem !important;
        padding: 2.5rem 1.5rem !important;
    }

    /* 画像を左側に配置 */
    .env-stats > *:nth-last-child(3) .env-card__icon {
        grid-row: span 2 !important; /* 右側の2行（タイトルと数値）に対して左側に並ぶ */
        margin: 0 !important;
    }
    .env-stats > *:nth-last-child(3) .env-card__icon img {
        max-width: 10rem !important;
        height: auto;
    }

    /* 「現場稼働状況」タイトル：すぐ下に数値を置くため余白をゼロに */
    .env-stats > *:nth-last-child(3) .env-card__title {
        font-size: 1.9rem !important;
        margin-bottom: -1.5rem !important;
        padding-bottom: 0 !important;
        text-align: left !important;
        line-height: 1.0 !important;
    }

    /* 「300~400名/日」数値：タイトルのすぐ下に配置し、改行を禁止 */
    .env-stats > *:nth-last-child(3) .env-card__value-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: baseline !important;
        white-space: nowrap !important; /* 絶対に改行させない */
        margin-top: -1.5rem !important; /* さらに上に引き上げて間隔を詰める */
        padding-top: 0 !important;
    }
    
    .env-stats > *:nth-last-child(3) .env-card__number {
        font-size: 3.2rem !important;
        white-space: nowrap !important;
    }
    .env-stats > *:nth-last-child(3) .env-card__unit {
        font-size: 1.6rem !important;
        margin-left: 0.4rem !important;
        white-space: nowrap !important;
    }

    /* ----------------------------------------------------
       4. 賞与 / 5. 年間休日数 (2カラム拡大維持)
       ---------------------------------------------------- */
    .env-stats > *:nth-last-child(2),
    .env-stats > *:nth-last-child(1) {
        grid-column: span 1 !important;
        width: calc(50% - 0.75rem) !important;
        padding: 2.5rem 0.5rem !important;
    }
    .env-stats > *:nth-last-child(2) .js-counter-number,
    .env-stats > *:nth-last-child(1) .js-counter-number {
        font-size: 3.2rem !important;
    }
}

/* ----------------------------------------------------
       その他、様々な制度を導入しています（1行表示・サイズ縮小）
       ---------------------------------------------------- */
@media screen and (max-width: 1025px) {
.env-benefits-title {
        font-size: 1.6rem !important; /* 1行に収まるようサイズを小さく */
        white-space: nowrap !important; /* 自動改行を禁止 */
        text-align: center !important;
        width: 100% !important;
    }

    /* HTML内の<br>タグ（改行）を強制的に非表示にする */
    .env-benefits-title br {
        display: none !important;
    }
 }