@charset "utf-8";

/*shopのcss*/

.container,
.contents,
.wrapping,
.cover {
    display: flex;
    flex-flow: column wrap;
    /*border: 1px solid #ecf117;*/
}

.color {
    color: #3F3F3F;
}
.point {
    font-size: 1.6rem;
    margin: 1rem;
    /*text-align: center;*/
    /*border: 1px solid #f10b48;*/
}
img {
    max-width: 100%;
    /*border: 1px solid #2c1cf1;*/
}
p {
    text-align: left;
}



.cover_nav{
    height: fit-content;
    align-items: center;
    padding: 0;
    margin: 0 0 0 0;
    /*border: 1px solid #1b1ff1;*/
}
.point_nav {
    display: flex;
    flex-flow: column wrap;
    text-align: left;
    font-size: 1.0rem;
    margin: 2rem auto -6rem auto;
    width: calc(50% - 0.1rem);
    /*border: 1px solid #1bf194;*/
}

.nav_step_01,
.nav_step_03,
.nav_step_04 {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    color: #a1a1a1;
    line-height: 1rem;
    margin: 0 auto -0.5rem 0;
}
.nav_step_02 {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    color: #3F3F3F;
    line-height: 1rem;
    margin: 0 auto -0.5rem 0;
}



.arrow_01,
.arrow_03 {
    text-align: center;
    font-size: 1.0rem;
    line-height: 1rem;
    list-style: none;
    margin: 0 auto 0 auto;
    color: #a1a1a1;
}

.arrow_02 {
    text-align: center;
    font-size: 1.0rem;
    line-height: 1rem;
    list-style: none;
    margin: 0 auto 0 auto;
    color: #3F3F3F;
}


.step_01_top,
.step_03_top,
.step_04_top {
    display: none;
}

.step_02_top {
    display: block;
}


.mgr-01,
.mgr-03,
.mgr-04 {
    margin-right: 5rem;
}
.mgr-02{
    margin-right: 0.3rem;
}



.step_01,
.step_02,
.step_03,
.step_04 {
    display: none;
}










.guide_nav {
    text-align: left;
    margin: 2rem auto 2rem 0;
    /*border: 1px solid #0bbcdb;*/
}



.point_customer{
    margin: 2rem 0 0 0;
    /*border: 1px solid #1bf194;*/
}

.message{
    margin: 2rem 0 0 0;
}


.form-control {
    height: calc(1.0rem * 15);
    line-height: 1.6;
}





.guide_top {
    text-align: left;
    margin: 2rem auto 2rem 0;
    /*border: 1px solid #0bbcdb;*/
}
.guide_step {
    font-size: 2.0rem;
    /*border: 1px solid #db0b7d;*/
}

.guide_mark {
    font-size: 2.0rem;
    /*border: 1px solid #db0b7d;*/
}

.btn{
    display: flex;
    /*flex-flow: row wrap;*/
    -webkit-justify-content: center;
    justify-content: center;

    margin: 2rem 0 2rem 0;
}


/*.btn-success{
    border: 1px solid #0bf1d6;
}*/

/*.btn-secondary {
    max-width: 10rem;
    margin: 0 auto 0 auto;
    border: 1px solid #f18a0b;
}*/


.btn_arrange{
    display: flex;
    flex-flow: row wrap;
    /*-webkit-justify-content: space-evenly;*/
    justify-content: space-evenly;
    width: 80%;
    align-items: baseline;
    margin: 0 auto 0 auto;
    /*border: 1px solid #c70bf1;*/
}

.btn.btn-success{
    display: inline;
    width: calc(100% - 0.1rem);
    background-color: black;
    font-size: 1.6rem;
    padding: 0 2em;
    margin: 0 ;
    text-transform: none;

    /*margin: 0 auto 0 40%;*/
}
.btn.btn-secondary{
    display: inline;
    font-size: 1.4rem;
    background-color: transparent;
    color: black;
    border-color: black;
    padding: 0 1.5rem;
    text-transform: none;
    /*margin: 0 auto 0 auto;*/
}
.sec{
    /*border: 1px solid #f1e60b;*/
}
.suc{
    /*border: 1px solid #0bf1bb;*/
}



.button.button-black.button-clear,
.button.button-black.button-outline {
    background-color: transparent;
    color: black;
    font-size: .8rem;
    height: 2.8rem;
    line-height: 2.8rem;
    padding: 0 1.5rem;
}





@media screen and (min-width: 40rem) {
    .contents {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        width: calc(100% - 0.1rem);
        margin: 0 1rem 0 1rem;
    }

    .wrapping {
        display: flex;
        flex-flow: column wrap;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        width: calc(100% - 0.1rem);
        margin: 3rem 0 0 0;
    }

    .cover {
        display: flex;
        flex-flow: column wrap;
        -webkit-justify-content: center;
        justify-content: center;
        width: calc(100% - 0.1rem);
        margin-bottom: 0;
        /*align-items: stretch;*/
        /*border: 1px solid #a03b26;*/
    }



    .cover_nav {
        text-align: left;
        width: calc(100% - 0.1rem);
        /*align-items: flex-start;*/
        /*border: 1px solid #ca1bf1;*/
    }

    .point_nav {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        font-size: 1.0rem;
        width: calc(100% - 0.1rem);
        margin: 2rem 0 2rem 0;
        /*border: 1px solid #1bf194;*/
    }

    .nav_step_01,
    .nav_step_03,
    .nav_step_04 {
        display: flex;
        flex-flow: column wrap;
        line-height: 0.5rem;
        color: #a1a1a1;
        margin: 0;
    }
    .nav_step_02 {
        display: flex;
        flex-flow: column wrap;
        line-height: 0.5rem;
        color: #3F3F3F;
        margin: 0;
    }


    .step_01_top,
    .step_03_top,
    .step_04_top {
        display: none
    }
    .step_02_top {
        display: block;
    }


    .step_01_top_n,
    .step_03_top_n,
    .step_04_top_n {
        display: block;
    }
    .step_02_top_n {
        display: none;
    }

    .step_01,
    .step_02,
    .step_03,
    .step_04 {
        display: block;
    }

    .arrow_01,
    .arrow_02,
    .arrow_03,
    .arrow_04 {
        display: none;
    }












    .guide_nav {
        text-align: left;
        margin: 2rem auto 2rem 0;
        /*border: 1px solid #0bbcdb;*/
    }

    .guide_step {
        font-size: 2.0rem;
        /*border: 1px solid #db0b7d;*/
    }




    .cover_work {
        display: flex;
        flex-flow: row wrap;
        -webkit-justify-content: flex-start;
        justify-content: left;
        width: calc(100% - 0.1rem);
        margin-bottom: 0;
        /*align-items: stretch;*/
        /*border: 1px solid #2640a0;*/
    }

    .point_img {
        width: calc(10% - 0.1rem);
        /*width: 10rem ;*/
        text-align: left;
        align-items: flex-start;
        /*border: 1px solid #2df11b;*/
    }
    .point_work {
        text-align: left;
        /*width: calc(100% - 0.1rem);
        align-items: flex-start;*/
        /*border: 1px solid #ca1bf1;*/
    }


    .form-group{
        height: auto;
        margin: 2rem 0 2rem 0;
    }
    .point_customer{
        margin: 2rem 0 0 0 ;
        /*border: 1px solid #0931a7;*/
    }

    .guide_top {
        text-align: left;
        margin: 0 auto 2rem 0;
        /*border: 1px solid #0bbcdb;*/
    }
    .guide_mark {
        font-size: 1.8rem;
        /*border: 1px solid #db0b7d;*/
    }

    .list {
        display: flex;
        flex-flow: row nowrap;
    }

    dl{
        margin-bottom: 1rem;
    }




    .name{
        margin-right: 15rem;
    }
    .code{
        margin-right: 13.5rem;
    }
    .address{
        margin-right: 15rem;
    }
    .tel{
        margin-right: 12rem;
    }
    .email{
        margin-right: 9rem;
    }



    .message{
        margin: 2rem 0 0 0;
        /*border: 1px solid #bf0bf1;*/
    }

    .form-control{
        height: calc( 1.0rem * 15 );
        line-height: 1.6;
    }



    /*.btn{
        display: flex;
        flex-flow: row wrap;
        -webkit-justify-content: flex-start;
        justify-content: left;
        margin-bottom: 2rem;
        border: 1px solid #f10b48;
    }*/

    .btn_group{
        display: flex;
        flex-flow: column wrap;
        -webkit-justify-content: center;
        justify-content: center;
        /*border: 1px solid #0b45f1;*/
    }

    /*.btn-success{
        border: 1px solid #0bf1d6;
    }*/

    /*.btn-secondary{
        max-width: 10rem;
        margin: 0 auto 0 auto;
        border: 1px solid #f18a0b;
    }*/

    .btn_arrange{
        display: flex;
        flex-flow: row wrap;
        align-items: baseline;
        /*-webkit-justify-content: space-evenly;*/
        justify-content: space-evenly;
        width: 40%;
        margin: 0 auto 4rem auto;
        /*border: 1px solid #c70bf1;*/
    }

    .btn.btn-success{
        display: inline;
        background-color: black;
        font-size: 1.6rem;
        width: calc(100% - 0.1rem);
        margin: 0 0 -2rem 0;
        text-transform: none;
    }
    .btn.btn-secondary{
        display: inline;
        font-size: 1.5rem;
        background-color: transparent;
        color: black;
        border-color: black;
        padding: 0 1.5rem;
        margin: 0 0 0 0;
        text-transform: none;
    }

.sec{
    /*border: 1px solid #f1e60b;*/
}
.suc{
    /*border: 1px solid #0bf1bb;*/
}


    /*.order.button.button-black.button-outline {
        background-color: transparent;
        color: black;
        font-size: 2rem;
        height: 4.8rem;
        line-height: 2.8rem;
        padding: 0 8rem;
    }*/

}