@charset "UTF-8";
@media screen and (min-width: 768px),print {
#flow {
    max-width: 1830px;
    width: 100%;
    margin-inline: auto;
    position: relative;
}
#flow::before {
    position: absolute;
    content: "";
    background: #F2F0EB;
    width: 100%;
    height: 8%;
    bottom: 0;
    left: 0;
}
/* mv
-------------------------------------*/
.mv {
    background: #F2F0EB;
}
.mv .inner {
    width: min(95%, 1080px);
    margin-inline: auto;
    position: relative;
    padding: 74px 0 43px;
    text-align: center;
}
.mv .inner::before {
    position: absolute;
    content: "";
    background: url(../images/flow/mv-human.png)no-repeat;
    background-size: contain;
    width: 230px;
    height: 359px;
    top: 49%;
    left: 45px;
    transform: translateY(-50%);
}
.mv .inner::after {
    position: absolute;
    content: "";
    background: url(../images/flow/mv-human02.png)no-repeat;
    background-size: contain;
    width: 190px;
    height: 392px;
    top: 49%;
    right: 52px;
    transform: translateY(-50%);
}
.mv .main-ttl {margin-bottom: 14px;position: relative;z-index: 2;}

/* flow
-------------------------------------*/
.flow .en-deco img {
    width: 100%;
    height: auto;
}

.flow .nagare {
    width: 2826px;
    height: 80px;
    overflow: hidden;
    margin-bottom: 4px;
}

.flow element {
    backface-visibility: visible;
    backface-visibility: hidden;
}

.flow .nagare img {
    backface-visibility: hidden;
}

.flow .inner{
    width: min(95%, 1040px);
    margin-inline: auto;
    padding: 63px 0 0;
}
.flow .list {
    display: grid;
    gap: 62px;
}
.flow .list li{
    display: grid;
    grid-template-columns: 48.0769% 49.0384%;
    gap: 30px;
    position: relative;
}
.flow .list li:not(:last-child)::after {
    position: absolute;
    content: "";
    background: url(../images/flow/list-arrow.svg)no-repeat;
    background-size: contain;
    width: 46px;
    height: 25px;
    bottom: -55px;
    left: 50%;
    transform: translateX(-50%);
}
.flow .list li .txt-box {
    position: relative;
}
.flow .list li .txt-box::after {
    position: absolute;
    content: "";
    background: #252525;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
}
.flow .list li .num {
    font-family: "Outfit", sans-serif;
    font-weight: bold;
    font-size: 26px;
    letter-spacing: 0.05em;
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin-bottom: 5px;
}
.flow .list li:first-child .num {
    margin-bottom: 16px;
}
.flow .list02 li:first-child .num {
    margin-bottom: 7px;
}
.flow .list li .num span {
    font-weight: bold;
    font-size: 52px;
    color: #0249ad;
    letter-spacing: 0;
}
.flow .list li .ttl {
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 0.05em;
    line-height: 1.375;
    margin-bottom: 21px;
}
.flow .list li:nth-child(3) .ttl {margin-bottom: 30px;}
.flow .list02 li:first-child .ttl {margin-bottom: 27px;}
.flow .list02 li:nth-child(3) .ttl {margin-bottom: 19px;}
.flow .list li .txt {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2;
    margin-bottom: 32px;
}
.flow .list li .txt:last-of-type {
    margin-bottom: 0;
}
.flow .list li .photo {
    margin: 13px 0 -8px;
}

.flow .attention-box {
    border-radius: 10px;
    background: #f2f0eb;
    padding: 34px 0 55px;
    text-align: center;
    margin: 60px 0 62px;
    position: relative;
}
.flow .attention-box::after {
    position: absolute;
    content: "";
    background: url(../images/flow/list-arrow.svg)no-repeat;
    background-size: contain;
    width: 46px;
    height: 25px;
    bottom: -55px;
    left: 50%;
    transform: translateX(-50%);
}
.flow .attention-box .icon{
    margin-bottom: 1px;
}
.flow .attention-box .ttl{
    font-weight: 900;
    font-size: 36px;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    background: #0249ad;
    display: inline-block;
    margin-bottom: 21px;
    padding: 0px 6px 4px;
}
.flow .attention-box .txt{
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2;
}

/* bottom-sec
-------------------------------------*/
.bottom-sec {
    width: min(95%, 1160px);
    margin-inline: auto;
    margin-bottom: -184px;
}
.bottom-sec .inner {
    display: inline-grid;
    grid-template-columns: 51.7241% 50.88%;
    padding: 120px 0 187px;
    align-items: center;
}
.bottom-sec .txt-box {
    border-radius: 50px;
    background: #fff;
    border: 1.2px solid #252525;
    box-shadow: 17px 17px 23px rgba(0, 0, 0, 0.1);
    padding: 60px 0 60px 38px;
    position: relative;
    left: -1px;
    z-index: 2;
    top: 0px;
}
.bottom-sec .txt-box .ttl {
    font-weight: 900;
    font-size: 46px;
    line-height: 1.4347826;
    letter-spacing: 0;
    margin-bottom: 15px;
    position: relative;
}
.bottom-sec .txt-box .ttl::before {
    position: absolute;
    content: "";
    background: url(../images/common/bottom-sec-deco.png)no-repeat;
    background-size: contain;
    width: 56px;
    height: 65px;
    top: -78px;
    left: 20px;
}
.bottom-sec .txt-box .subt {
    font-weight: 900;
    font-size: 28px;
    letter-spacing: 0;
}
.bottom-sec .txt-box .txt {
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 1.777777;
    position: relative;
    top: 5px;
}
.bottom-sec .photo {
    position: relative;
    left: -30px;
}
.bottom-sec .photo img {
    width: 100%;
    height: auto;
}


}
@media screen and (max-width: 767px) {
#flow {
    margin-top: 7vw;
    position: relative;
}
#flow::before {
    position: absolute;
    content: "";
    background: #F2F0EB;
    width: 100%;
    height: 99.3vw;
    bottom: 8vw;
    left: 0;
}
/* mv
-------------------------------------*/
.mv {
    background: #F2F0EB;
}
.mv .inner {
    width: 83.82vw;
    margin-inline: auto;
    position: relative;
    padding: 8.5vw 0 31vw;
    text-align: center;
}
.mv .inner::before {
    position: absolute;
    content: "";
    background: url(../images/flow/mv-human_sp.png)no-repeat;
    background-size: contain;
    width: 22.95vw;
    height: 35.8vw;
    bottom: 8.5vw;
    left: 20.5vw;
}
.mv .inner::after {
    position: absolute;
    content: "";
    background: url(../images/flow/mv-human02_sp.png)no-repeat;
    background-size: contain;
    width: 16.67vw;
    height: 39.133vw;
    bottom: 5.4vw;
    right: 17.6vw;
}
.mv .main-ttl {margin-bottom: 20.5vw;position: relative;z-index: 2;}
.mv .subt {position: relative;z-index: 2;top: -68px;}

/* flow
-------------------------------------*/
.flow .nagare {
    width: 123.43vw;
    height: 11.353vw;
    overflow: hidden;
    margin-bottom: 5.072vw;
}

.flow element {
    backface-visibility: visible;
    backface-visibility: hidden;
}

.flow .nagare img {
    backface-visibility: hidden;
}


.flow .inner{
    width: 86.96vw;
    margin-inline: auto;
    padding: 4.8vw 0 0;
}
.flow .list {
    display: grid;
    gap: 14.7vw;
}
.flow .list li{
    display: grid;
    position: relative;
}
.flow .list li:not(:last-child)::after {
    position: absolute;
    content: "";
    background: url(../images/flow/list-arrow.svg)no-repeat;
    background-size: contain;
    width: 8.7vw;
    height: 4.6vw;
    bottom: -9vw;
    left: 50%;
    transform: translateX(-50%);
}
.flow .list li .txt-box {
    display: contents;
}
.flow .list li .num {
    font-family: "Outfit", sans-serif;
    font-weight: bold;
    font-size:4.589vw;
    letter-spacing: 0.05em;
    display: flex;
    gap: 1vw;
    align-items: baseline;
    margin-bottom: 3vw;
    order: 1;
    justify-content: center;
}
.flow .list li .num span {
    font-weight: bold;
    font-size:10.87vw;
    color: #0249ad;
    letter-spacing: 0;
    position: relative;
    top: 1vw;
}
.flow .list li .ttl {
    font-weight: 900;
    font-size:5.797vw;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin-bottom: 4.7vw;
    order: 2;
    text-align: center;
}
.flow .list li .txt {
    font-weight: 500;
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2;
    order: 4;
}
.flow .list li .txt:last-of-type {
    margin-bottom: 0;
}
.flow .list li .photo {
    order: 3;
    margin-bottom: 1.5vw;
}

.flow .attention-box {
    border-radius: 2.42vw;
    background: #f2f0eb;
    padding: 5vw 7.2vw 6.04vw;
    text-align: center;
    margin: 14.49vw 0 11.7vw;
    position: relative;
}
.flow .attention-box::after {
    position: absolute;
    content: "";
    background: url(../images/flow/list-arrow.svg)no-repeat;
    background-size: contain;
    width: 8.7vw;
    height: 4.6vw;
    bottom: -7vw;
    left: 50%;
    transform: translateX(-50%);
}
.flow .attention-box .icon{
    margin-bottom: 0.5vw;
}
.flow .attention-box .icon img {
    width: 10.2vw;
    height: auto;
}
.flow .attention-box .ttl{
    font-weight: 900;
    font-size:5.314vw;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    background: #0249ad;
    display: inline-block;
    margin-bottom: 3vw;
    padding: 0 1.45vw 0.97vw;
}
.flow .attention-box .txt{
    font-weight: bold;
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 1.875;
    text-align: left;
}

/* bottom-sec
-------------------------------------*/
.bottom-sec {
    /* margin-bottom: -57vw; */
}
.bottom-sec .inner {
    display: grid;
    padding: 17vw 0;
}   
.bottom-sec .txt-box {
    order: 2;
    border-radius: 7.3vw;
    background: #fff;
    border: 0.2vw solid #252525;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
    padding: 12vw 0 8.5vw;
    position: relative;
    z-index: 2;
    top: -10vw;
    width: 87vw;
    left: 49%;
    transform: translateX(-50%);
}
.bottom-sec .txt-box .ttl {
    font-weight: 900;
    font-size:6.763vw;
    line-height: 1.53571428;
    letter-spacing: 0;
    margin-bottom: 3.6vw;
    position: relative;
    text-align: center;
}
.bottom-sec .txt-box .ttl::before {
    position: absolute;
    content: "";
    background: url(../images/common/bottom-sec-deco.png)no-repeat;
    background-size: contain;
    width: 11.114vw;
    height: 12.08vw;
    top: -15vw;
    left: 48%;
    transform: translateX(-50%);
}
.bottom-sec .txt-box .subt {
    font-weight: 900;
    font-size: 5.314vw;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 4vw;
}
.bottom-sec .txt-box .txt {
    font-weight: bold;
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: center;
}
.bottom-sec .photo {
    order: 1;
}


}