@charset "UTF-8";



/*---------------------------------------------------------
 Flow
---------------------------------------------------------*/
.flow {
    counter-reset: myCounter;
}
.flow-ttl {
	position: relative;
	font: var(--font-min);
	font-size: min(3vw,205%);
	line-height: 1.6;
	letter-spacing: .16em;
    padding: .6em 0 .6em 9%;
	margin-bottom: 1.6em;
	border-top: 2px solid var(--color-taq);
	border-bottom: 2px solid var(--color-taq);

    .c-no {
        position: absolute;
		background: linear-gradient(to right, #8ae3c4, #79b6e3);
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        left: 0;
        top: 56%;
        translate: 0 -50%;
    }
}
.flow-item {
    position: relative;
    padding-bottom: 5.5%;
    margin-bottom: 9.5%;

    &::before {
        position: absolute;
        content: "";
        background: linear-gradient(to bottom, var(--color-bei), transparent);
        width: 100vw;
        height: 110px;
        inset: 100% 0 auto 0;
        margin-inline: calc(50% - 50vw);
        z-index: -1;
    }
    &::after {
        position: absolute;
        content: "";
        background: linear-gradient(to right, #8ae3c4, #79b6e3);
        width: 20%;
        max-width: 168px;
        aspect-ratio: 168/40;
        clip-path: var(--clip-arrow);
        opacity: 0.5;
        inset: 100% 0 auto 0;
        margin: auto;
    }
    .c-flt {
        .c-hdg--bld {
            color: var(--color-taq);
            font-size: min(2.6vw,176%);
        }
    }

    &:last-child {
        padding-bottom: 0;
        margin-bottom: 0;

        &::before,
        &::after {
            display: none;
        }
    }

    .c-box--s {
        background-color: var(--color-yel);

        > .c-hdg--min {
            text-align: center;
            margin-bottom: 1.2em;
        }
        .l-boxlist {
            row-gap: 2em;
            
            .c-txt--bld {
                font-size: min(2.2vw,147%);
            }
        }
        
    }
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.flow-item {
	.c-cat-list {
        flex-wrap: wrap;
        gap: 3em 2.8%;
        margin-top: 3%;
        
		.c-cat-bnr {
			width: 48.6%;
		}
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.flow-ttl {
	font-size: 130%;
	letter-spacing: .1em;
    padding-left: 16%;
	margin-bottom: 1.6em;
    border-width: 1px;
}
.flow-item {
    padding-bottom: 10%;
    margin-bottom: 14%;

    &::after {
        width: 25%;
    }
    .c-bg-grd {
        height: 10vw;
    }
    .c-flt {
        .c-hdg--bld {
            text-align: center;
            font-size: 120%;
        }
    }

    .c-box--s {
        .l-boxlist {
            justify-content: space-between;
            grid-template-columns: repeat(2,48%);
            row-gap: 6vw;

            .l-boxlist__img {
                width: 100%;
                margin-bottom: 6%;
            }
            .c-txt--bld {
                font-size: 105%;
                line-height: 1.4;
            }
        }
        
    }
	.c-cat-list {
        margin-top: 6%;
	}
}
}


/*---------------------------------------------------------

---------------------------------------------------------*/

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {


}