@charset "utf-8";

.flow-box {
    width: 100%;
    float: left;
    margin: 40px auto 0;
}

ul.flow-list li {
    width: 100%;
    float: left;
	margin: 0 auto 20px;
	position: relative;
}

ul.flow-list .number {
    width: 100%;
    float: left;
    font-size: 35px;
    color: #fff;
    font-family: 'Passion One', cursive;
    letter-spacing: 3px;
    position: relative;
    margin: 0 auto 20px;
}

ul.flow-list .number:after {
        content: "";
        margin: 0 0 0 10px;
        display: inline-block;
        width: 94%;
        height: 5px;
        background: #fff;
        vertical-align: middle;
}

.flow-list h1 {
    font-size: 30px;
    color: #292929;
}

.flow-list .half02 p,.flow-list .half01 p{
    text-align: left;
}

.flow-t {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.half02.flow-t {
    right: 0;
}

img.sche-top {
    float: right;
}

.work-type {
    width: 100%;
    float: left;
    margin: 0 auto 20px;
}

.work-type h2 {
    font-size: 24px;
    width: 24%;
    float: left;
}

ul.work-list {
    width: 76%;
    float: left;
    padding: 0 0 0 20px;
}

ul.work-list li {
    width: 34%;
    float: left;
    list-style-type: circle;
	font-weight: bold;
    color: #353535;
}

h2.w01 {
    color: #abd05e;
}

h2.w02 {
    color: #e8b900;
}

h2.w03 {
    color: #d098f4;
}

h2.w04 {
    color: #ed85a4;
}

h2.w05 {
    color: #41bcd7;
}

h2.w06 {
    color: #f2984f;
}

.work-type h2:before {
    content: "■";
}




@media (max-width: 1055px){
.work-type h2 {
    width: 30%;
}

ul.work-list {
    width: 70%;
}

ul.work-list li {
    width: 100%;
}

}

@media (max-width: 1023px){


}

@media (max-width: 991px){
  ul.flow-list .number:after {
    width: 90%;
 }
 
 .work-table{
  width: 100%;
  float: left;
  overflow-x: scroll;
}

.work-table img{
  width: 952px;
  max-width: none;
  margin: 0 auto 10px;
}
 
}

@media (max-width: 767px){
.flow-t {
    position: relative;
    top: auto;
    transform: none;
    right: auto;
}

.half01.flow-t{
  margin: 30px auto 0;
}

img.sche-top {
    width: 50.4%;
}

.work-type h2 {
    width: 100%;
    margin: 0 auto 10px;
}

ul.flow-list .number:after {
    width: 83%;
}

.flow-list h1 {
    font-size: 24px;
}

.work-type h2 {
    font-size: 21px;
}

}