.flow-label {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    width: 100%;
    box-sizing: border-box;

    margin-top: 120px;
    padding: 100px 5% 150px;

    background-color: rgb(11, 40, 74);
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 40px);

    flex-wrap: wrap;
    /* ★ 追加：中間サイズで窮屈になった時の保険（gapと併用） */
    gap: 40px;
    /* ★ 追加：折り返した際にテキストと画像がくっつかないように */
}


/* ==========================================
左側テキスト
========================================== */

.flow-text-group {
    width: 50%;
    min-width: 320px;
    max-width: 560px;
    box-sizing: border-box;
    flex: 0 1 500px;
    /* ★ grow:1 → 0、basisを420→500pxに変更。max-widthまで無限に伸びて
       画像との間が間延びするのを防ぎ、内容量に近いサイズで留める */

    /* margin-top: clamp(-90px, -9vw, -20px); ← 削除
       広い画面でマイナス幅が足りず、タイトルと本文が重なる原因でした */
}



/* ==========================================
FLOWタイトル
========================================== */

.flow-title {
    position: relative;
    font-family: 'Impact';
    letter-spacing: 5px;
    font-size: clamp(55px, 6vw, 100px);
    font-weight: 500;
    color: rgb(250, 250, 250);
    margin: 0;
    line-height: 1;
    /* ★ 追加：フォント自体の余分な行間を詰めることで、
                          マイナスマージンに頼らず自然に密着させられます */

    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 1.2s ease-out,
        transform 1.2s ease-out;
}

.flow-title.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================
下線
========================================== */

.section-line-flow-under {
    width: min(33%, 200px);

    margin: 16px 0 20px;
    /* ★ マイナス値 → 小さいプラス値に変更。
                               line-height:1にしたことで自然な間隔になり、
                               安全なプラスの数値でも十分近づきます */

    border: none;
    border-top: 4px solid rgb(243, 243, 243);

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s ease-out;
}

.section-line-flow-under.is-visible {
    transform: scaleX(1);
}


/* ==========================================
FLOW日本語タイトル
========================================== */

.flow-title-theme {
    text-align: left;
    letter-spacing: clamp(3px, 0.5vw, 8px);
    font-size: clamp(26px, 3vw, 45px);
    line-height: 1.3;
    font-family: "BIZ UDPMincho", serif;
    font-weight: 700;
    color: aliceblue;

    margin: 0 0 20px;
    /* ★ マイナス値 → 0からのプラス値に変更 */

    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 1.2s ease-out 0.4s,
        transform 1.2s ease-out 0.4s;
}

.flow-title-theme.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.flow-title-theme p {
    margin: 0;
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 1s ease-out,
        transform 1s ease-out;
}

.flow-title-theme.is-visible p {
    opacity: 1;
    transform: translateY(0);
}



/* ==========================================
説明文
========================================== */

.flow-ex {
    text-align: left;
    letter-spacing: clamp(2px, 0.5vw, 8px);
    font-size: clamp(14px, 1.5vw, 20px);
    line-height: 1.6;
    font-family: "Shippori Mincho", serif;
    color: aliceblue;
    font-weight: 900;

    margin: 0;
    /* ★ マイナス値 → 0に変更 */

    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 1.2s ease-out 0.4s,
        transform 1.2s ease-out 0.4s;
}

.flow-ex.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.flow-ex p {
    margin: 0 0 10px;
}


/* ==========================================
施工フロー画像
========================================== */

.flow-group-phot {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    width: 50%;
    min-width: 320px;
    /* ★ 追加：下限を設定 */
    max-width: 650px;
    box-sizing: border-box;
    flex: 1 1 380px;
    /* ★ 追加：自然に折り返せるように */

    margin-top: 20px;
}


/* 画像 */

.flow-group-phot img {
    position: relative;

    display: block;

    width: min(100%, 650px);

    height: auto;

    padding-top: 0;

    right: auto;

    z-index: 1;

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 1s ease-out,
        transform 1s ease-out;
}

.flow-group-phot.is-visible img {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================
画像背景の図形
========================================== */

.flow-group-phot::before {
    content: "";

    position: absolute;

    top: 24px;
    left: 24px;

    width: 100%;
    height: 100%;

    background-color: #c9a227;
    /* ★ 薄いグレー半透明 → サイトのゴールドカラー（不透明）に変更。
       紺色の背景・白い画像カードのどちらと並んでも視認できる濃さに */

    z-index: 0;

    opacity: 0;
    /* スクロールで表示されるフェードイン演出はそのまま維持 */

    transform: translate(-24px, -24px);

    transition:
        opacity 1s ease-out,
        transform 1s ease-out;
}

.flow-group-phot.is-visible::before {
    opacity: 1;

    transform: translate(0, 0);
}




/* ==========================================
中間サイズ（タブレット・小型ノートPC）対応
========================================== */

@media (max-width: 1000px) {
    .flow-label {
        padding: 90px 5% 130px;
    }

    .flow-text-group,
    .flow-group-phot {
        flex: 1 1 100%;
        /* ★ この幅域では縦並びに切り替え、窮屈さを回避 */
        max-width: 600px;
    }

    .flow-group-phot {
        margin-top: 50px;
    }
}


/* ==========================================
スマートフォン対応
========================================== */

@media (max-width: 768px) {

    .flow-label {
        flex-direction: column;

        padding: 80px 20px 100px;
    }

    .flow-text-group {
        width: 100%;
        max-width: 600px;
        min-width: 0;
        /* ★ 追加：min-widthがスマホ幅を超えないように解除 */

        padding-left: 0;
    }

    .flow-title {
        font-size: clamp(50px, 15vw, 80px);
    }

    .flow-title-theme {
        font-size: clamp(24px, 7vw, 36px);

        margin-bottom: 25px;
    }

    .flow-ex {
        font-size: 15px;

        letter-spacing: 2px;
    }

    .flow-group-phot {
        width: calc(100% - 24px);
        min-width: 0;
        /* ★ 修正：margin-rightだけでは箱自体の右端(border-box)は動かず、
           右に24pxはみ出す仕様の金色の縁取り(::before)が画面端で
           切れたままだったため、幅そのものを縮めて箱ごと左に
           寄せる方式に変更。これで縁取りも含めて右側に余白ができます */

        margin-top: 50px;
    }

    .flow-group-phot img {
        width: 100%;
        max-width: 600px;
    }
    /* ★ .flow-group-phot::before の90%×80%上書きを削除。
       画像より小さく内側にオフセットしていたため、画像の下に
       完全に隠れて見えなくなっていました。PCと同じ100%×100%のまま
       右下にはみ出させることで視認できるようにしています */
}