@charset "utf-8";

h2 span{
    margin-left: 3px;
    font-size: 1.2em;
    font-weight: bold;
}
p em{
    font-weight: bold;
    color: #cc0000;
}
section#search{
    background-color: #dbeff0;
}
section#published ol{
    margin-bottom: 20px;
}
#mokuji p{
    margin-bottom: 20px;
}
.flow-list a{
    display: block;
    padding: 8px 15px 11px;
    background-color: #2d3e3f;
    border-radius: 5px;
    box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset;
    text-align: center;
    text-decoration: none;
    color: #FFF;
}
.flow-list a img{
    width: 26px;
    margin-right: 8px;
    vertical-align: -6px;
}
.flow-list a span{
    margin-left: 5px;
    font-size: 1.4em;
    font-weight: bold;
}
.flow li{
    position: relative;
    padding: 10px 20px 20px;
    background-color: #FFF;
    background-image: url(/image/help/guide/step-bkg.png);
    background-size: auto 20px;
    background-position: center top;
    background-repeat: no-repeat;
    border: 1px solid #bcd8d9;
    border-radius: 5px;
    text-align: center;
}
.flow .step{
    width: 72px;
    height: 72px;
    margin: 0 auto;
    padding-top: 20px;
    background-color: #FFF;
    background-image: url(/image/help/guide/step.png);
    background-size: 50%;
    background-position: center 10px;
    background-repeat: no-repeat;
    border-radius: 50%;
    font-size: 1.3em;
    font-weight: bold;
    color: #739393;
    text-align: center;
}
section#published.flow li,
section#published.flow .step{
    background-color: #edf7f7;
}
.flow p{
    text-align: left;
}
.flow .hd{
    margin: -10px 0 5px;
    padding-bottom: 70px;
    background-position: center 38px;
    background-repeat: no-repeat;
    background-size: 80px auto;
    font-size: 1.15em;
    font-weight: bold;
    text-align: center;
}
.flow .flow01 .hd{
    background-image: url(/image/help/guide/step01.png);
}
.flow .flow02 .hd{
    background-image: url(/image/help/guide/step02.png);
}
.flow .flow03 .hd{
    background-image: url(/image/help/guide/step03.png);
}
.flow .flow04 .hd{
    background-image: url(/image/help/guide/step04.png);
}
.flow .flow2-01 .hd{
    background-image: url(/image/help/guide/step05.png);
}
.flow .flow2-02 .hd{
    background-image: url(/image/help/guide/step03.png);
}
.flow .flow2-03 .hd{
    background-image: url(/image/help/guide/step06.png);
}

/*--Large screens--*/
@media print, screen and (min-width: 768px){
    .flow-list li{
        float: left;
        width: calc((100% - 40px) / 2);
        margin-right: 40px;
    }
    .flow-list li:last-child{
        margin-right: 0;
    }
    .flow li{
        float: left;
        width: calc((100% - 120px) / 4);
        margin-right: 40px;
    }
    .flow li:last-child{
        margin-right: 0;
    }
    #published.flow li{
        float: left;
        width: calc((100% - 80px) / 3);
    }
}
/*--Medium screens--*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .flow li{
        width: calc((100% - 60px) / 4);
        margin-right: 20px;
    }
    #published.flow li{
        float: left;
        width: calc((100% - 40px) / 3);
    }
    .flow .hd{
        padding-bottom: 60px;
        background-position: center 35px;
        background-size: 70px auto;
    }
}
/*--Small screens--*/
@media only screen and (max-width: 767px){
    .flow-list li{
        margin-bottom: 10px;
    }
    .flow-list li:last-child{
        margin-bottom: 0;
    }
    .flow-list a{
        font-size: 0.8em;
    }
    .flow-list a img{
        width: 23px;
        margin-right: 8px;
        vertical-align: -6px;
    }
    .flow-list a span{
        margin-left: 3px;
        font-size: 1.3em;
        font-weight: bold;
    }
    .flow li{
        margin-bottom: 10px;
    }
    .flow li:last-child{
        margin-bottom: 0;
    }
}

/*-----------------------------------
clear
-----------------------------------*/
ul.flow-list,
.flow ol{
    display: block;
    min-height: 1%;
}
ul.flow-list:after,
.flow ol:after{
    clear: both;
    content:".";
    display: block;
    height: 0;
    visibility: hidden;
}