@charset "UTF-8";

/* procedure */

.sec-procedure {

    .content-box {
        display: flex;
        flex-direction: column;
        gap: 7rem;

        @media screen and (max-width: 767px) {
          gap: 4rem;
        }


        .content-item {

            & h3 {
                margin-bottom: 2rem;
                line-height: 1.3;
            }

            .button-box {
                margin-top: 3rem;

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

                & a {
                    width: 38rem;
                    height: 7.5rem;
                    border-radius: 60px;

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

        }
    }
}

/* flow */

.sec-flow {

    .content-box {

        .img-box {
            width: 95rem;
            margin: 0 auto;
            margin-bottom: 7rem;

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

            & img {
                width: 100%;
            }

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

        & p {

            & a {
                text-decoration: underline;
                color: var(--primary-color);
            }
        }

        .button-box {
            margin-top: 3rem;

            & a {
                @media screen and (max-width: 767px) {
                  width: 80%;
                  margin: 0 auto;
                }
            }
        }
    }
}