section.flow {
    background: #D6F2FC;
    padding-top: clamp(14px, 1.97vw, 27px);
    padding-bottom: clamp(40px, 5.85vw, 80px);
}

.flow-Box {
    width: min(1166px, calc(100% - clamp(60px, 14.65vw, 200px)));
    margin: auto;
    background: #FBFBFB;
    border-radius: 10px;
}

.breadcrumbBox {
    width: min(1166px, calc(100% - clamp(60px, 14.65vw, 200px)));
    margin: auto;
}

.flow-container {
    width: clamp(420px, 68vw, 805px);
    margin: auto;
    padding: clamp(20px, 2.93vw, 40px) 0;
}

.flow-title {
    font-family: "Zen Maru Gothic", sans-serif;
    text-align: center;
    font-size: clamp(22px, 2.93vw, 40px);
    font-weight: bold;
    margin-bottom: clamp(60px, 12.44vw, 170px);
    color: #504947;
}

.flow {
    background: #FFF6DF;
    padding: 0 0 clamp(16px, 2.34vw, 32px);
}

.flow-inner {
    padding: 0 clamp(20px, 2.93vw, 40px);
    position: relative;
}

.flow-bubble {
    position: absolute;
    left: clamp(-50px, -3.66vw, -30px);
    top: clamp(-140px, -10.25vw, -90px);
    width: clamp(180px, 21.38vw, 292px);
}

.flow-bubble img {
    width: 100%;
    height: auto;
    display: block;
}

.flow-bubble-text {
    position: absolute;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #504947;
    line-height: normal;
    text-align: center;
    letter-spacing: 0.03em;
    font-size: clamp(14px, 1.76vw, 24px);
    font-family: "Zen Maru Gothic", sans-serif;
    width: 100%;
}

.flow-chara {
    position: absolute;
    top: clamp(-70px, -5.12vw, -74px);
    left: clamp(200px, 24.16vw, 330px);
    transform: translateX(-50%);
    margin: 0;
    z-index: 2;
}

.flow-chara img {
    width: clamp(80px, 9.22vw, 126px);
    height: auto;
}

.flow-grid {
    display: flex;
    justify-content: space-between;
    gap: clamp(30px, 4.39vw, 60px);
}

.flow-col {
    flex: 1;
}

.flow-col:first-child {
    margin-top: clamp(70px, 9.96vw, 136px);

}

.flow-col:nth-of-type(2) {
    margin-top: clamp(25px, 3.73vw, 51px);
}

.flow-step {
    display: flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 0 #504947;
    border: 2px solid #504947;
    margin-bottom: clamp(3px, 0.37vw, 5px);
}

.flow-step span {
    display: inline-block;
    min-width: clamp(60px, 6.59vw, 90px);
    padding: clamp(10px, 1.1vw, 15px);
    font-weight: bold;
    color: #fff;
    text-align: center;
    font-family: "Roboto", sans-serif;
}

.step-label {
    font-size: clamp(12px, 1.17vw, 16px);
    font-weight: bold;
}

.step-label strong {
    font-size: clamp(14px, 1.46vw, 20px);
    letter-spacing: 0.03em;
}

.flow-step p {
    flex: 1;
    padding: clamp(10px, 1.1vw, 15px) 0 clamp(10px, 1.1vw, 15px) clamp(10px, 1.1vw, 15px);
    background: #fff;
    margin: 0;
    font-weight: bold;
    color: #504947;
    line-height: 1.4;
    font-size: clamp(12px, 1.17vw, 16px);
}

.flow-arrow {
    position: relative;
    width: 2px;
    height: clamp(10px, 1.1vw, 15px);
    background: #504947;
    margin: clamp(6px, 0.73vw, 10px) auto;
}

.flow-arrow::after {
    content: "";
    position: absolute;
    bottom: clamp(-6px, -0.44vw, -4px);
    left: 50%;
    transform: translateX(-50%);
    border-left: clamp(4px, 0.44vw, 6px) solid transparent;
    border-right: clamp(4px, 0.44vw, 6px) solid transparent;
    border-top: clamp(5px, 0.59vw, 8px) solid #504947;
}

.step-blue span {
    background: #10CAF4;
}

.step-deepblue span {
    background: #005BFF;
}

.step-green span {
    background: #13CA4D;
}

.step-yellow span {
    background: #FFBB10;
}

.step-orange span {
    background: #FF6200;
}

.step-red span {
    background: #FF0004;
}

.step-pink span {
    background: #FF81D9;
}

@media (max-width:768px) {
    .flow-Box {
        width: calc(100% - 20px);
        border-radius: 8px;
    }

    .breadcrumbBox {
        width: calc(100% - 20px);
    }

    .flow-container {
        width: 100%;
        padding: 20px 15px 30px;
    }

    .flow-title {
        font-size: 24px;
        margin-bottom: 18px;
    }

    .flow-bubble {
        left: 10px;
        top: 0;
    }

    .flow-chara {
        top: 30px;
        left: 250px;

    }

    .flow-chara img {
        width: 115px;
    }

    .flow-col:first-child {
        margin-top: 150px;
    }

    .flow-grid {
        flex-direction: column;
        gap: 0;
    }

    .flow-inner {
        padding: 60px 20px;
    }

    .flow-bubble-text {
        font-size: 16px;
    }

    .flow-step {
        flex-direction: column;
    }

    .step-label {
        font-size: 16px;
    }

    .step-label strong {
        font-size: 18px;
    }

    .flow-step span {
        width: 100%;
    }

    .flow-step p {
        width: 100%;
        text-align: center;
        font-size: 16px;
    }

    .flow-col:nth-of-type(2) {
        margin-top: 0;
    }
}


.process-flow {
    padding: clamp(30px, 5.86vw, 80px) 0;
}

.process-flow__inner {
    width: min(800px, calc(100% - 40px));
    margin: auto;
}

.process-flow__card {
    display: flex;
    gap: clamp(30px, 5.86vw, 80px);
    border: 2px solid #504947;
    border-radius: 15px;
    padding: clamp(11px, 2.2vw, 30px) clamp(20px, 4.02vw, 55px);
    box-shadow: 0 4px 0 #504947;
    align-items: center;
}

.process-flow__icon img {
    width: clamp(30px, 5.86vw, 80px);
}

.process-flow__left {
    text-align: center;
    width: clamp(31px, 6.22vw, 85px);
    flex-shrink: 0;
}

.process-flow__step {
    font-weight: bold;
    line-height: normal;
}

.process-flow__step-text {
    font-size: clamp(6px, 1.17vw, 16px);
    font-family: "Zen Maru Gothic", sans-serif;
}

.process-flow__step-num {
    font-size: clamp(12px, 2.34vw, 32px);
    font-family: "Roboto", sans-serif;
}

.process-flow__right h3 {
    font-size: clamp(20px, 1.76vw, 24px);
    margin-bottom: clamp(5px, 1.02vw, 14px);
    color: #504947;
    font-weight: 600;
    line-height: 1.4;
}

.process-flow__right p {
    font-size: clamp(14px, 1.17vw, 16px);
    line-height: 1.6;
    font-family: "Zen Maru Gothic", sans-serif;
    color: #000;
}

.process-flow__arrow {
    width: 0;
    height: 0;
    border-left: clamp(5px, 1.1vw, 15px) solid transparent;
    border-right: clamp(5px, 1.1vw, 15px) solid transparent;
    border-top: clamp(5px, 1.1vw, 15px) solid #FFBB10;
    margin: clamp(7px, 1.46vw, 20px) auto;
}

.is-mizu {
    color: #10CAF4;
}

.is-blue {
    color: #005BFF;
}

.is-green {
    color: #13CA4D;
}

.is-yellow {
    color: #FFBB10;
}

.is-orange {
    color: #FF6200;
}

.is-red {
    color: #FF0004;
}

.is-pink {
    color: #FF81D9;
}

@media (max-width: 768px) {
    .process-flow__card {
        flex-direction: column;
    }

    .process-flow__right h3 {
        font-size: 18px;
    }

    .process-flow__left {
        width: auto;
    }

    .process-flow__icon img {
        width: 80px;
    }

    .process-flow__step-text {
        font-size: 16px;
    }

    .process-flow__step-num {
        font-size: 32px;
    }

    .process-flow__arrow {
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid #FFBB10;
        margin: 20px auto;
    }

    .process-flow__right {
        text-align: left;
        align-self: flex-start;
    }
}