@charset "UTF-8";

/* =========================================
   Plant Section - プラントの施工内容と業界について
   ========================================= */

.plant {
    position: relative;
    padding-top: 14.8rem;  /* タイトル上の余白 */
    padding-bottom: 11.6rem;
    background-color: var(--c-text-white);
    overflow: hidden;
}

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

/* =========================================
   Background decorative text "Plant"
   背景装飾文字の位置調整
   ----------------------------------------
   【調整方法】
   - top: 数値を小さくすると上に移動、大きくすると下に移動
   - left: 数値を小さく（またはマイナス）にすると左に移動
   ========================================= */
.plant__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;
}

/* 上部の背景文字 "Plant" 位置
   - top: 上からの距離（小さくすると上へ）
   - left: 左からの距離（マイナス値で左へはみ出す）*/
.plant__bg-text--top {
    top: -6rem;      /* ← 上に移動したい場合はこの値を小さくする */
    left: -10rem;    /* ← 左に移動したい場合はこの値を小さくする（マイナス可） */
}

/* 下部の背景文字 "Plant" - 非表示 */
.plant__bg-text--bottom {
    display: none;  /* 下部の背景文字は非表示 */
}

/* Section Title */
.plant__title {
    font-family: var(--font-base);
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
    color: var(--c-text-main);
    margin-bottom: 6rem;
    position: relative;
    z-index: 1;
    text-align: left;  /* 左揃え */
}

/* Red Box Container */
.plant__box {
    background-color: var(--c-primary);
    border-radius: var(--radius-sm);
    padding: 6.8rem 6rem 7.1rem;
    position: relative;
    z-index: 1;
}

/* Content Block (Upper & Lower) */
.plant__block {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 7rem;
}

.plant__block--upper {
    margin-bottom: 0;
}

.plant__block--lower {
    margin-top: 0;
}

/* Text Content Area */
.plant__content {
    flex: 1;
}

/* Block Heading */
.plant__heading {
    font-family: var(--font-base);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    color: var(--c-text-white);
    margin-bottom: 3.3rem;
}

.plant__block--lower .plant__heading {
    margin-bottom: 4.1rem;
}

/* Block Description */
.plant__desc {
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.05em;
    color: var(--c-text-white);
}

/* Image Container */
.plant__image {
    flex-shrink: 0;
}

.plant__image--upper {
    width: 22.2rem;
    margin-right: 0.7rem;
}

.plant__image--lower {
    width: 16rem;
    margin-left: -1.4rem;
    margin-right: -1rem;
}

.plant__image img {
    width: 100%;
    height: auto;
}

.plant__triangle {
    width: 20rem;
    height: 5.6rem;
    background-color: var(--c-text-white);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    margin: 4.9rem auto 5rem;
}


/* =========================================
   SP (Tablet & Mobile) - 768px以下
   ========================================= */
@media (max-width: 768px) {
    .plant {
        padding-top: 6.6rem;
        padding-bottom: 3.9rem;
    }

    .plant__inner {
        padding: 0 1.5rem;  /* 左右の余白 */
    }

    .plant__bg-text {
        font-size: 7.7rem;
    }

    .plant__bg-text--top {
        top: -2rem;       /* ← 上に移動したい場合はこの値を小さくする */
        left: -0.2rem;    /* ← 左右位置の調整 */
    }

    .plant__bg-text--bottom {
        display: none;  /* SP版も下部の背景文字は非表示 */
    }

    /* Section Title - SP */
    .plant__title {
        font-size: 2.6rem;   /* テキストサイズ調整（元22px → 26px） */
        line-height: 1.4;
        margin-bottom: 2.3rem;
    }

    /* Red Box Container - SP
       赤囲いボックス：左右に15pxの余白を確保 */
    .plant__box {
        width: 100%;       /* 親要素の幅いっぱい */
        margin-left: 0;
        margin-right: 0;
        padding: 2.7rem 2rem 3.5rem;
        border-radius: 0.5rem;
    }

    /* Content Block - SP (Vertical Layout) */
    .plant__block {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .plant__block--upper {
        margin-bottom: 0;
    }

    .plant__block--lower {
        margin-top: 0;
    }

    /* Image - SP (Order change for upper block) */
    .plant__block--upper .plant__image {
        order: -1;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 3rem;
        margin-right: 0;
    }

    .plant__block--upper .plant__image img {
        width: 17rem;
        height: auto;
    }

    .plant__block--lower .plant__image {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 3rem;
        margin-left: 0;
        margin-right: 0;
    }

    .plant__block--lower .plant__image img {
        width: 17rem;
        height: auto;
    }

    /* Text Content - SP */
    .plant__content {
        width: 100%;
    }

    /* Block Heading - SP
       テキストサイズ調整（元20px → 22px） */
    .plant__heading {
        font-size: 2.2rem;
        line-height: 1.5;
        margin-bottom: 2.2rem;
    }

    .plant__block--lower .plant__heading {
        margin-bottom: 2.7rem;
    }

    /* Block Description - SP
       テキストサイズ調整（元14px → 16px） */
    .plant__desc {
        font-size: 1.6rem;
        line-height: 1.7;
    }

    /* Triangle Divider - SP */
    .plant__triangle {
        width: 15rem;
        height: 4.2rem;
        margin: 3.6rem auto 3.2rem;
    }
}

/* =========================================
   Plant Lower Heading Fix (375px or less)
   ========================================= */
@media (max-width: 376px) {
    /* 下段の見出し：「ソルテックは、統合技術力で～」 */
    .plant__block--lower .plant__heading {
        font-size: 2.0rem;       /* 2.2rem -> 2.0rem に少し縮小 */
        letter-spacing: 0.02em;  /* 文字間を詰めて1行に入る文字数を増やす */
        line-height: 1.6;        /* 行間を微調整 */
        
        /* 単語の区切りに関わらず改行させて右の余白を埋める */
        word-break: break-all;   
    }
}

/* =========================================
   Plant Section Adjustments (320px or less)
   ========================================= */
@media (max-width: 321px) {
    .plant__title {
        font-size: 2.2rem; /* 2.6rem -> 2.2rem に少し小さく */
        letter-spacing: 0.05em; /* 文字間も少し詰めて収まりを良くする */
    }

    .plant__block--lower .plant__heading {
        font-size: 1.8rem;       /* 2.2rem -> 2.0rem に少し縮小 */
        letter-spacing: 0.02em;  /* 文字間を詰めて1行に入る文字数を増やす */
        line-height: 1.6;        /* 行間を微調整 */
        
        /* 単語の区切りに関わらず改行させて右の余白を埋める */
        word-break: break-all;   
    }
}


@media screen and (min-width: 819px) and (max-width: 1024px) {
    .plant__bg-text--top {
        /* 元の -10rem から数値を大きくして右にずらす */
        left: 0rem !important; 
    }
}