@charset "UTF-8";

#page-fv.type-page {
    &::before {
        background-color: #FFDBE5;
    }
}

#flow {
    padding-top: 13.9rem;
    padding-bottom: 16.9rem;

    @media screen and (max-width: 767px) {
        padding-top: 5.7rem;
        padding-bottom: 8rem;
    }

    .title {
        margin-bottom: 8rem;

        @media screen and (max-width: 767px) {
            margin-bottom: 4.3rem;
        }
    }

    .contents {

        .content {
            display: flex;
            gap: 5.7rem;

            @media screen and (max-width: 767px) {
                flex-direction: column;
                gap: 3.2rem;
            }

            &:not(:last-child) {
                position: relative;
                margin-bottom: 21.3rem;

                &::after {
                    content: "";
                    position: absolute;
                    bottom: -12.3rem;
                    left: 0;
                    right: 0;
                    display: block;
                    height: 3.3rem;
                    background-image: url("../../img/page/studies/studies-detsil.png");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
            }

            @media screen and (max-width: 767px) {
                &:not(:last-child) {
                    margin-bottom: 9.8rem;

                    &::after {
                        bottom: -7.5rem;
                        left: 0;
                        right: 0;
                        height: 3.3rem;
                        background-image: url("../../img/page/studies/sp-studies-detsil.png");
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }
            }

            .text {
                flex-grow: 1;

                .step-wrapper {
                    display: flex;
                    align-items: center;
                    gap: 2.4rem;
                    margin-bottom: 3.4rem;

                    @media screen and (max-width: 767px) {
                        gap: 1.5rem;
                        margin-bottom: 1.8rem;
                    }

                    .step {
                        flex-shrink: 0;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        padding-top: 1rem;
                        width: 10.8rem;
                        height: 10.8rem;
                        border-radius: 50%;
                        background-color: #F76891;

                        @media screen and (max-width: 767px) {
                            padding-top: 0.6rem;
                            width: 6.6rem;
                            height: 6.6rem;
                        }

                        .eng {
                            font-family: 'Alexandria';
                            font-style: normal;
                            font-weight: 400;
                            font-size: 1.8rem;
                            line-height: 1.8rem;
                            text-align: center;
                            letter-spacing: 0.05em;
                            color: #FFFFFF;

                            @media screen and (max-width: 767px) {
                                font-size: 1rem;
                                line-height: 1.2rem;
                            }
                        }

                        .no {
                            font-family: 'Alexandria';
                            font-style: normal;
                            font-weight: 400;
                            font-size: 4.2rem;
                            line-height: 4.2rem;
                            text-align: center;
                            letter-spacing: 0.05em;
                            color: #FFFFFF;

                            @media screen and (max-width: 767px) {
                                font-size: 2.4rem;
                                line-height: 2.4rem;
                            }
                        }
                    }

                    .main {
                        font-style: normal;
                        font-weight: 600;
                        font-size: 2.6rem;
                        line-height: 160%;
                        letter-spacing: 0.1em;
                        color: #000000;

                        @media screen and (max-width: 767px) {
                            font-size: 1.6rem;
                        }
                    }
                }

                .sub {
                    font-style: normal;
                    font-weight: 400;
                    font-size: 1.8rem;
                    line-height: 200%;
                    letter-spacing: 0.05em;
                    color: #000000;

                    @media screen and (max-width: 767px) {
                        font-size: 1.4rem;
                    }

                    & a {
                        display: inline;
                        text-decoration: underline;

                        @media (hover: hover) and (pointer: fine) {
                            &:hover {
                                text-decoration: none;
                            }
                        }

                        &[target="_blank"] {

                            &::after {
                                content: "";
                                display: inline-block;
                                margin-left: 0.3rem;
                                margin-bottom: -0.5rem;
                                width: 2.4rem;
                                height: 2.4rem;
                                background-image: url("../../common/img/parts/out-link.svg");
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                            }

                            @media screen and (max-width: 767px) {
                                &::after {
                                    width: 2rem;
                                    height: 2rem;
                                }
                            }
                        }

                        &.link {
                            &::after {
                                content: "";
                                display: inline-block;
                                margin-left: 0.3rem;
                                margin-bottom: -0.5rem;
                                width: 2.4rem;
                                height: 2.4rem;
                                background-image: url("../../common/img/parts/arrow-up-s-line.svg");
                                background-size: 100% 100%;
                                background-repeat: no-repeat;
                                transform: rotate(-90deg);
                            }

                            @media screen and (max-width: 767px) {
                                &::after {
                                    width: 2rem;
                                    height: 2rem;
                                }
                            }
                        }
                    }
                }
            }


            .img {
                flex-shrink: 0;
                width: 72rem;
                border-radius: 3rem;
                overflow: hidden;

                @media screen and (max-width: 767px) {
                    width: 100%;
                    border-radius: 1.5rem;
                }
            }
        }
    }
}