.flow-item-wrapper {
    display: grid;
        grid-gap: 14px;
}
.flow-item {
    display: grid;
        grid-template-columns: min(16vw, 90px) 1fr;
        grid-gap: min(3vw, 38px);
    line-height: 1.6;
    position: relative;
}
.flow-arrow {
    position: absolute;
        top: 0;
        left: 0;
    width: min(16vw, 90px);
    height: 100%;
}
.flow-arrow::before {
    border-left: solid 3px #2A2929;
    /* border-left: solid 3px #f00; */
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        top: calc(min(16vw, 90px) - 2px);
        left: min(8vw, 45px);
    width: 0;
    height: 0;
}
.flow-item.show .flow-arrow::before {
    animation: flow_arrow-1 2s 2s ease-out forwards;
}
@keyframes flow_arrow-1 {
    to {
        height: calc(100% - min(16vw, 90px) + 2px);
    }
}
.flow-arrow::after {
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 33 18"><path fill="%232a2929" d="M16.51,18c-.4,0-.78-.16-1.06-.44L.44,2.56c-.59-.59-.59-1.54,0-2.12.59-.59,1.54-.59,2.12,0l13.94,13.94L30.44.44c.59-.59,1.54-.59,2.12,0,.59.59.59,1.54,0,2.12l-14.99,15c-.28.28-.66.44-1.06.44Z" /></svg>') no-repeat center / contain;
    content: '';
    display: block;
    margin: auto;
    opacity: 0;
    position: absolute;
        top: calc(min(13vw, 75px));
        left: calc(50% - min(2.7vw, 14px));
    width: min(5.8vw, 31px);
    height: min(30vw, 15px);
}
.flow-item.show .flow-arrow::after {
    animation: flow_arrow-2 2s 2s ease-out forwards;
}
@keyframes flow_arrow-2 {
    to {
        opacity: 1;
        top: calc(100% - min(3vw, 15px) + 2px);
    }
}

.flow-circle {
    position: absolute;
        top: 0;
        left: 0;
    width: min(16vw, 90px);
    height: min(16vw, 90px);
}
.flow-circle::after {
    background: #fff;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        top: min(8vw, 45px);
        left: calc(min(8vw, 45px) + 2.5px);
    width: min(5vw, 28px);
    height: min(8vw, 45px);
}
.circle-animation {
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
    transform: rotate(80deg) scale(1, -1);
    transform-origin: 50% 50%;
}
.flow-item.show .circle-animation {
    animation: dash 2s ease-in forwards;
}
@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

.flow-no {
    display: flex;
        align-items: center;
        justify-content: center;
    font-size: min(9vw, 5rem);
    position: relative;
    text-shadow: 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black);
    width: min(16vw, 90px);
    height: min(16vw, 90px);
}

.flow-item:nth-child(1) .flow-arrow {
    opacity: .2;
}
.flow-item:nth-child(1) .flow-no {
    color: #FFF6A2;
}
.flow-item:nth-child(2) .flow-arrow {
    opacity: .4;
}
.flow-item:nth-child(2) .flow-no {
    color: #FCDE90;
}
.flow-item:nth-child(3) .flow-arrow {
    opacity: .6;
}
.flow-item:nth-child(3) .flow-no {
    color: #F8BF7A;
}
.flow-item:nth-child(4) .flow-arrow {
    opacity: .8;
}
.flow-item:nth-child(4) .flow-no {
    color: #F5AA6A;
}
.flow-item:nth-child(5) .flow-no {
    color: #F28D55;
}

.flow-item:last-child .flow-arrow::before,
.flow-item:last-child .flow-arrow::after,
.flow-item:last-child .flow-circle::after {
    display: none;
}

.flow-text dt {
    font-size: min(5vw, 1.5em);
    line-height: 1.4;
    margin-top: min(3vw, 16px);
}
.flow-text dd {
    display: grid;
        align-items: start;
    margin-top: .8em;
    padding-bottom: 1em;
}
.flow-point {
    background: rgba(254, 230, 9, .15);
    border-radius: min(2vw, 10px);
    font-size: .9em;
    margin-top: 2em;
    padding: 1em 1.2em;
}
.flow-point .title {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 120 5"><path fill="%23000000" d="M1.45,4.63c-.47-.03-.89-.29-1.12-.7C0,3.42-.09,2.96.1,2.66c.29-.34.73-.5,1.16-.45.75,0,1.52.04,2.26.08,1.03.08,2.06.11,3.1.08,3.67-.18,7.34-.38,11.02-.6l.27-.02c3.05-.17,6.11-.35,9.16-.51,7.48-.38,14.92-.71,22.08-1,11.09-.45,22.19-.2,32.54.13,1.74.06,3.48.11,5.22.16,3.79.11,7.71.21,11.58.4,3.36.17,6.83.43,9.9.66,1.61.12,3.22.24,4.83.35.7.05,1.4.09,2.1.13,1.14.06,2.18.12,3.21.21.5.04.96.31,1.23.75.27.41.31.94.09,1.38-.15.41-.57.66-1,.59-2.04-.61-4.13-1-6.25-1.18-1.33-.13-2.66-.22-3.98-.3l-1.1-.07c-5.7-.37-10.94-.64-16.01-.82-7.38-.27-13.96-.44-20.11-.52-5.43-.07-11.25-.11-17.04.06-9.43.29-18.96.73-27.84,1.17-3.2.16-6.41.38-9.51.59-2.42.17-4.83.33-7.25.47-1.56.09-3.15.12-4.7.16h-.18c-1.03.03-2.06.05-3.09.09-.12,0-.23,0-.35,0" /></svg>') no-repeat center bottom / contain;
    margin: auto;
    padding-bottom: .2em;
    position: absolute;
        top: -1em;
        left: -1em;
    transform: rotate(-5deg);
}
.flow-data-wrapper {
    display: grid;
        grid-gap: min(1.5vw, 15px);
    margin-top: 1.5em;
}
.flow-data {
    border: solid 1px var(--d_gray);
    border-radius: 5px;
    /* overflow: hidden; */
}
.flow-data .title {
    font-weight: 700;
    padding: .8em 1em .4em;
    position: relative;
}
.flow-data .title::after {
    background: #fff;
    border: solid var(--d_gray);
    border-width: 1px 1px 1px 0;
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        bottom: 0;
        left: -1px;
    width: 70%;
    height: 2px;
}
.flow-data > ul {
    display: grid;
        grid-gap: 1em min(3vw, 1.5em);
    padding: 1em min(3vw, 2em);
}
.flow-data .img .coverImg {
    padding-top: 45%;
}
.flow-data .text .btn_wrap {
    justify-content: flex-start;
}

#flow-1 .flow-data-wrapper {
    display: grid;
}
#flow-1 .flow-data .title::after {
    width: 7em;
}
#flow-1 .flow-data ul {
    grid-template-columns: min(15%, 150px) 1fr;
}
#flow-1 .flow-data .coverImg {
    padding-top: 80%;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    #flow-1 .flow-data ul {
        grid-template-columns: min(15vw, 150px) 1fr;
    }
    #flow-1 .flow-data .text {
        font-size: .9em;
    }
}
@media screen and (max-width: 960px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}
@media print, screen and (min-width: 960px) {
    .flow-text .flow-data-wrapper {
        display: flex;
            align-items: stretch;
    }
    .flow-data {
        flex: 1;
    }

}
@media print, screen and (min-width: 1700px) {
}

@media (hover: hover) {}


/*====================================================
////id |  contact
====================================================*/
.contactArea-link {
    display: flex;
        align-items: center;
        grid-gap: min(3vw, 20px) min(5vw, 40px);
        justify-content: center;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
    .contactArea-link {
        flex-direction: column;
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}

@media (hover: hover) {}