@charset "utf-8";

/*===================================================

    FLOW common

===================================================*/
/*  contents
---------------------------------------------------*/
.category{
    margin-bottom:68px;
    background:url(../images/flow/category.jpg) no-repeat center top;
    background-size:auto 100%;
    }




/*===================================================

    for PC

===================================================*/
@media(min-width:769px){
#flow02, #flow04{
    background:#F1EDE9 url(../images/flow/arrow01.jpg) no-repeat center top;
    }
#flow03{
    background:url(../images/flow/arrow02.jpg) no-repeat center top;
    }
.contents .wrapper{
    width:1160px;
    margin:0 auto;
    padding-top:150px;
    }
#flow01 .wrapper{
    padding-top:0px;
    }
#flow03 .wrapper{
    padding-bottom:4em;
    }
.itemHd{
    margin-bottom:3.4em;
    }
.itemHd h1{
    margin-bottom:1.4em;
    font-size:4rem;
    }
.itemHd .num{
    display:block;
    margin-bottom:0.3em;
    color:#EB7D2C;
    font-size:5rem;
    font-family:'Playball', cursive;
    }
.itemHd p{
    font-size:1.5rem;
    line-height:180%;
    }
#flow01 .itemHd{
    margin-bottom:2.3em;
    }
#flow01 ul{
    margin:0 0 2.6em -25px;
    text-align:left;
    }
#flow01 ul li{
    position:relative;
    float:left;
    width:370px;
    margin:0 0 25px 25px;
    background:#E1DBD7;
    }
#flow01 ul li:nth-child(4), #flow01 ul li:nth-child(5), #flow01 ul li:nth-child(6){
    float:right;
    }
#flow01 h2{
    padding:20px 20px 0.5em;
    font-size:2.2rem;
    font-weight:bold;
    }
#flow01 p{
    padding:0 20px 20px;
    line-height:160%;
    }
#flow01 .arw01, #flow01 .arw02{
    position:absolute;
    top:171px;
    right:-25px;
    width:25px;
    height:60px;
    }
#flow01 .arw03{
    position:absolute;
    bottom:-25px;
    width:100%;
    text-align:center;
    }
#flow01 .arw03 img{
    width:60px;
    height:25px;
    }
#flow01 .arw04, #flow01 .arw05{
    position:absolute;
    top:180px;
    left:-25px;
    width:25px;
    height:60px;
    }
#flow02 ul li{
    float:left;
    width:370px;
    margin:0 0 3em 25px;
    line-height:160%;
    text-align:left;
    }
#flow02 ul li:first-child{
    margin:0;
    }
#flow03 .wrapper > p{
    float:left;
    width:540px;
    line-height:180%;
    text-align:left;
    }
#flow03 .flwFig{
    float:right;
    width:540px;
    }
#flow04 .flImg01{
    float:left;
    width:570px;
    margin-bottom:6em;
    }
#flow04 .flImg02{
    float:right;
    width:570px;
    margin-bottom:6em;
    }

}


/*===================================================

    for SP

===================================================*/
@media(max-width:768px){
.contents .wrapper{
    margin:0 4%;
    }
.itemHd{
    margin-bottom:1.5em;
    }
.itemHd h1{
    margin-bottom:0.6em;
    font-size:2.8rem;
    line-height:140%;
    }
.itemHd .num{
    display:block;
    margin-bottom:0.1em;
    color:#EB7D2C;
    font-size:5rem;
    font-family:'Playball', cursive;
    }
.itemHd p{
    line-height:180%;
    text-align:left;
    }
#flow01{
    margin-top:-3em;
    }
#flow01 ul li{
    position:relative;
    min-height:10em;
    margin-bottom:2em;
    padding:20px 4%;
    background:#E1DBD7;
    text-align:left;
    }
#flow01 ul li:after{
    position:absolute;
    bottom:-30px;
    z-index:10;
    display:block;
    width:100%;
    content:"▼";
    color:#E1DBD7;
    font-size:4rem;
    text-align:center;
    }
#flow01 ul li:last-child:after{
    display:none;
    content:"";
    }
#flow01 ul img{
    float:left;
    width:40%;
    margin:0 20px 0 0;
    }
#flow01 h2{
    margin-bottom:0.6em;
    color:#EB7D2C;
    font-size:2rem;
    font-weight:bold;
    line-height:130%;
    }
#flow01 ul p{
    line-height:160%;
    }
#flow01 .arw01, #flow01 .arw02, #flow01 .arw03, #flow01 .arw04, #flow01 .arw05{
    display:none;
    }
#flow02, #flow04{
    background:#F1EDE9;
    }
#flow02 .wrapper, #flow04 .wrapper{
    padding:3em 0;
    }
#flow02 ul li{
    margin:0 0 2em;
    line-height:180%;
    text-align:left;
    }
#flow02 .pic{
    display:block;
    margin-bottom:0.6em;
    padding:20px;
    border:1px solid #C8BDB7;
    line-height:0.1em;
    }
#flow03 .wrapper{
    padding:3em 0;
    }
#flow03 .wrapper > p{
    margin-bottom:0.6em;
    line-height:180%;
    text-align:left;
    }
#flow04 .flImg01{
    float:left;
    width:49%;
    }
#flow04 .flImg02{
    float:right;
    width:49%;
    }
}


/*===================================================

    for vertical SP

===================================================*/
@media(max-width:480px) {

}