@charset "UTF-8";

/* 
------------------------------------*/
.flowLayout .h2_wrap h2::after {
    content: "FLOW";
}
.flowLayout .cassette_wrap {
    counter-reset: num;
    color: #707070;
}
.flowLayout .cassette_wrap .w_box {
    counter-increment: num;
    position: relative;
}
.flowLayout .cassette_wrap .w_box:not(:last-child) {
    margin-bottom: 70px;
}
.flowLayout .cassette_wrap .w_box:not(:last-child)::after {
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    bottom: -45px;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 20px solid #EE5324;
}
.flowLayout .cassette_wrap .w_box .ttl {
    position: relative;
    padding-left: 50px;
    color: #EE5324;
    font-weight: bold;
    font-size: 1.6rem;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 20px;
}
.flowLayout .cassette_wrap .w_box .ttl::before, .flowLayout .cassette_wrap .w_box .ttl::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.flowLayout .cassette_wrap .w_box .ttl::before {
    content: "";
    background-color: #EE5324;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    left: 0;
}
.flowLayout .cassette_wrap .w_box .ttl::after {
    content: counter(num);
    font-family: "Zen Maru Gothic", serif;
    left: 15px;
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem;
    top: 49%;
    transform: translateY(-51%);
}
.flowLayout .cassette_wrap .w_box > div {
    padding-left: 50px;
}



            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
                .flowLayout .cassette_wrap .w_box .ttl {
                    padding-left: 90px;
                    font-size: 2rem;
                }
                .flowLayout .cassette_wrap .w_box .ttl::before {
                    width: 60px;
                    height: 60px;
                }
                .flowLayout .cassette_wrap .w_box .ttl::after {
                    left: 25px;
                    font-size: 1.6rem;
                }
                .flowLayout .cassette_wrap .w_box > div {
                    padding-left: 90px;
                }
                .flowLayout .cassette_wrap .w_box:not(:last-child) {
                    margin-bottom: 110px;
                }
                .flowLayout .cassette_wrap .w_box:not(:last-child)::after {
                    bottom: -75px;
                    border-left: 45px solid transparent;
                    border-right: 45px solid transparent;
                    border-top: 35px solid #EE5324;
                }
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 960px) {
                .flowLayout .cassette_wrap .w_box {
                    padding: 60px 80px;
                }
            }





/* 
------------------------------------*/
.flowLayout .tel_box {
    margin-top: 30px;
}
.flowLayout .btn02 {
    color: #604C3F;
}
.flowLayout .btn02 .num {
    position: relative;
    padding-left: 40px;
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 1.2;
}
.flowLayout .btn02 .num::before {
    position: absolute;
    content: "";
    background: url("../common/img/common_icon01.png")no-repeat center center/cover;
    width: 35px;
    height: 25px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.flowLayout .f_b01 {
    display: block;
    text-align: center;
    padding: 15px 0;
    background-color: #F7AC03;
    border-radius: 80px;
    color: #fff;
    font-weight: 500;
    font-size: 1.1rem;
    border: 11px solid #FFE5AA;
    line-height: 1.5;
}
.flowLayout .f_b01 span {
    position: relative;
    display: inline-block;
    padding-left: 40px;
}
.flowLayout .f_b01 span::before {
    position: absolute;
    content: "";
    background: url("../common/img/common_icon02b.png")no-repeat center center/cover;
    width: 30px;
    height: 30px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}




            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
                .flowLayout .tel_box {
                    align-items: center;
                }
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 960px) {
                .flowLayout .btn02 .num {
                    font-size: 2rem;
                }
                .flowLayout .f_b01 {
                    font-size: 1.5rem;
                }
            }