:root {
    --color-white: rgb(255, 255, 255);
    --color-black: rgb(51, 51, 51);
    --color-border-main: rgb(192, 195, 202);
    --color-border-sub: rgb(223, 226, 233);
    --color-background-gray: rgb(247, 247, 247);
    --color-primary-dark: rgb(0, 83, 181);
    --color-primary-medium: rgb(11, 136, 227);
    --color-primary-light: rgb(103, 191, 255);
    --color-gray-700: rgb(44, 47, 53);
    --color-gray-600: rgb(65, 69, 78);
    --color-gray-500: rgb(99, 105, 119);
    --color-gray-400: rgb(158, 164, 177);
    --color-gray-300: rgb(196, 201, 210);
    --color-gray-200: rgb(235, 237, 241);
    --color-gray-100: rgb(246, 247, 248);
}

/* l-flow を削除し、ブロックのラッパー要素で処理するため */
.l-flow {
    padding: 120px 130px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    background-color: var(--color-white); /* 背景色はsupportsで設定可能 */
}

.c-section_header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%; /* Ensure header takes full width */
}

.c-section_header__label {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-primary-medium);
    letter-spacing: 3px;
    line-height: 1.5;
}

.c-section_header__title {
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: var(--color-black);
    margin: 0;
}

.c-section_header__subtitle {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.7;
    color: var(--color-black);
    margin-top: 8px;
    max-width: 600px; /* Limit subtitle width */
}

.c-flow_steps {
    display: grid;
    gap: 24px;
    width: 100%;
    align-items: start;
}

/* ステップ数に応じたグリッド設定 */
.c-flow_steps--1 { grid-template-columns: 1fr; }
.c-flow_steps--2 { grid-template-columns: repeat(2, 1fr); }
.c-flow_steps--3 { grid-template-columns: repeat(3, 1fr); }
.c-flow_steps--4 { grid-template-columns: repeat(4, 1fr); }
.c-flow_steps--5 { grid-template-columns: repeat(5, 1fr); }
.c-flow_steps--6 { grid-template-columns: repeat(6, 1fr); }

.c-flow_step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.c-flow_step__label {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-primary-medium);
    letter-spacing: 3px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.c-flow_step__icon_wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.c-flow_step__icon {
    font-size: 36px;
    color: var(--color-primary-medium);
}

.c-flow_step__title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: var(--color-primary-medium);
    margin: 0 0 16px 0;
    min-height: 3em;
}

.c-flow_step__description {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.7;
    color: var(--color-gray-600);
    text-align: left;
    /* max-width: 200px; */ /* Removed to allow flexibility */
}

.c-info_box {
    border: 1px solid #e8e8e8;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 24px 32px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 900px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.c-info_box__icon {
    margin-top: 6px;
    font-size: 24px;
    color: var(--color-primary-medium);
    flex-shrink: 0;
}

.c-info_box__text_wrapper {
     display: flex;
     align-items: center;
     gap: 0.1em;
     flex-wrap: wrap;
     justify-content: center;
     flex-direction: column;
}

.c-info_box__main_text {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.7;
    color: var(--color-primary-medium);
}

.c-info_box__sub_text {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.7;
    color: #666;
}

@media (max-width: 1200px) {
     .l-flow {
        padding: 80px 40px;
    }
    .c-flow_steps {
        /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
        /* Fit logic is complex, rely on specific counts for now */
        gap: 48px 32px;
    }
    /* Adjust grid for fewer columns on smaller screens if needed */
    .c-flow_steps--6, .c-flow_steps--5, .c-flow_steps--4 {
         grid-template-columns: repeat(2, 1fr);
    }
     .c-flow_steps--3 {
         grid-template-columns: repeat(3, 1fr); /* Keep 3 columns if possible */
     }
     .c-flow_step__description {
         /* max-width: none; */ /* Keep it flexible */
     }
    .c-info_box {
        max-width: 90%;
    }
}


@media (max-width: 768px) {
    .c-section_header {
        margin-bottom: 2em!important;
    }
    .l-flow {
        padding: 60px 20px;
        gap: 48px;
    }
     .c-section_header__title {
        font-size: 24px !important;
        /* letter-spacing: 0.1em; */ /* Adjusted for better mobile readability */
        line-height: 1.4;
    }
    .c-section_header__subtitle {
        font-size: 14px;
        /* letter-spacing: 0.05em; */
        line-height: 1.6;
    }
    /* Force single column on smallest screens */
    .c-flow_steps--6, .c-flow_steps--5, .c-flow_steps--4, .c-flow_steps--3, .c-flow_steps--2, .c-flow_steps--1 {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .c-flow_step {
         align-items: center;
    }
     .c-flow_step__description {
         text-align: center;
         max-width: 320px;
         margin-left: auto;
         margin-right: auto;
     }
     .c-info_box {
         padding: 20px;
         flex-direction: column;
         text-align: center;
         gap: 12px;
     }
     .c-info_box__text_wrapper {
          flex-direction: column;
          gap: 4px;
          align-items: center;
     }

     .c-info_box__main_text {
        font-size: 18px;
     }
     .c-info_box {
        align-items: center;
     }
}