@charset "utf-8";
/* CSS Document */

.flow-box{
	height:350px;
	padding:24px;
	    line-height: 1.5em;
}


.box-line{
    border: dotted 2px #666;
}

.flow-ttl{
	font-size: 120%;
	font-weight:bold;
	line-height: 1.5em;
	
}

.color-w{
	color:#FFF;
}

.bg-1{
	background-image: url(../img/bg-img_01.png);
    background-repeat: no-repeat;
    background-position: 85% 89%;
    background-size: 46%;
}

.bg-2{
	background-image:url(../img/bg-img_02.png);
	background-repeat:no-repeat;
	background-position: -5% 110%;
    background-size: 50%;
}

.bg-3{
	background-image:url(../img/bg-img_03.png);
	background-repeat:no-repeat;
	background-position: 22% 92%;
    background-size: 67%;
}

.bg-4{
	background-image:url(../img/bg-img_04.png);
	background-repeat:no-repeat;
	background-position: 91% 98%;
    background-size: 38%;
}

.bg-5{
	background-image:url(../img/bg-img_05.png);
	background-repeat:no-repeat;
	background-position: 60% 89%;
    background-size: 79%;
}

.bg-6{
	background-image:url(../img/bg-img_06.png);
	background-repeat:no-repeat;
	background-position: center 92%;
    background-size: 16%;
}

.flow-arrow img{
	position:absolute;
	top: 43%;
    right: -13%;
}

.pd-top{ padding-top:48px;}

.text-s{
	font-size:77%;
	/* color:#999; */
	/* line-height:10px; */
}

.flow-line{
	position: relative;
	display:inline-block;
}

.flow-line::after {
    position: absolute;
    top: 108%;
    right: 15%;
    border: dotted #808080 2px;
    width: 69%;
}




.flow-table {
	max-width:800px;
	width:100%;
    margin: 0 auto;
}
.flow-table th, td {
    padding: 2%;
	color: #fff;
	width:33.3333%;
	}

.flow-table th img{
	width:100%;
	max-width:250px;
	}

.flow-table td {
    padding: 8px;
	color: #fff;
	}
.plan-1{
	background-color:#56aad1;
	}
.plan-2{
	background-color:#5294b2;
	}
.plan-3{
	background-color:#2e7da2;
	}
.flow-item-box{
	position:relative;
	height:150px;
	}
.flow-item{
	position:absolute;
	background: rgba(255,255,255,0.5);
	left:0;
	top:0;
	border-radius:10px;
	overflow:hidden;
	}
.flow-item-01{
	width:98%;
	}
.flow-item-02{
	width:212%;
	}


.flow-item-03{
	width:325%;
	}

.flow-item-img{
	width:100px;
	border-radius:50%;
	overflow:hidden;
	margin:0 auto;
	}
.flow-item-img img{
	width:100%;
	}

.flow-item-txt{
	display:inline-block;
	background:#FFF;
	padding:4px;
	font-weight:normal;
	font-size:18px;
	color:#666;
	padding:;
	}
	
.flow-hbt{
    height: 100px;
	}

/* 追記20170619 */

.flow-box-2{
	height:350px;
	padding:20px;
}

div.flow-box-2 p>a{
	text-decoration: underline;
}

.flow-arrow-2 img{
	width: 20%;
	position:absolute;
	top: 33%;
    right: -20%;
}

.box-line-2{
    border: solid 2px #92bef3;
}

div.flow-box-2 .text-s{
	font-size: 12px;
	color: #666;
	line-height: 1.5;
	text-shadow: 1px 1px 7px #fff;
}

.bg-7{
	background-image: url(../img/bg-img_07.png);
    background-repeat: no-repeat;
    background-position: 85% 140%;
    /*background-size: 46%;*/
}

.bg-8{
	background-image:url(../img/bg-img_08.png);
	background-repeat:no-repeat;
	background-position: -5% 110%;
    background-size: 50%;
}

.bg-9{
	background-image:url(../img/bg-img_09.png);
	background-repeat:no-repeat;
	background-position: 22% 184%;
    background-size: 313px;
}

.bg-10{
	background-image:url(../img/bg-img_10.png);
	background-repeat:no-repeat;
	background-position: 158% 152%;
    background-size: 260px;
}

.bg-11{
	background-image:url(../img/bg-img_11.png);
	background-repeat:no-repeat;
	background-position: 86% 160%;
   /* background-size: 79%; */
}

.bg-12{
	background-image:url(../img/bg-img_12.png);
	background-repeat:no-repeat;
	background-position: center 184%;
   /* background-size: 16%; */
}

@media (min-width: 768px) {

}

@media (min-width: 992px){


}

@media (max-width: 992px){
	

}