/*--------------------------------------------
index.css
2020.11.18 Toshiaki Kyo
--------------------------------------------*/

/*sp*/
@media screen and (max-width: 480px) {
	#title-image{
		background-image: url(../images/topsp.png);
		background-repeat: no-repeat;
		width: 100vw;
		height:400px;
	}
	.service-wrap{
		margin-top: 30px;
		margin-bottom: 50px;
	}
	.service-wrap-box{
	    margin-bottom: 50px;
	}
	.service-title{
	    font-size: 1.1em;
	    height: 50px;
	}
	.service{
		
	}
	.service-wrap-box ul{
		padding: 0px 0px 10px 30px;
	}
	.service-wrap-box ul li{
		list-style: disc;
	}
	.service-wrap-flow{
	    display: flex;
	    flex-direction: column;
	}
	.service-wrap-flow-inner{
	    padding: 10px;
	    text-align: center;
	}
	.service-wrap-flow-inner img{
	    width: 100%;
	    object-fit: cover;
	    /* height: 200px; */
	}
	.service-wrap-flow-inner-txt{
	    height: 50px;
	}
	.service-setubi{
	    display: flex;
	    margin-bottom: 50px;
	    flex-direction: column;
	}
	.service-setubi-img{}
	.service-setubi-img img{
	    width: 100%;
	    /* border-radius: 10%; */
	}
	.service-setubi-txt{
	    padding: 10px;
	}
	.service-setubi-txt-title{
		font-size: 1.2em;
		height: 50px;
	}
	.flowimg{
		/* width: 497px; */
		margin: auto;
		/* display: flex; */
		/* align-content: center; */
		/* height: 300px; */
		margin-top: 30px;
		/* padding: 10px; */
	}
	.flowimg img{
		/* width: 100% !important; */
		height: auto !important;
	}

 } 
 
/*tablet*/
@media screen and (min-width: 481px) and ( max-width:980px){
	#title-image{
		background-image: url(../images/topsp.png);
		background-repeat: no-repeat;
		width: 100vw;
		height:400px;
	}
	.service-wrap{
		margin-top: 30px;
		margin-bottom: 50px;
	}
	.service-wrap-box{
	    margin-bottom: 50px;
	}
	.service-title{
	    font-size: 1.1em;
	    height: 50px;
	}
	.service{
		
	}
	.service-wrap-box ul{
		padding: 0px 0px 10px 30px;
	}
	.service-wrap-box ul li{
		list-style: disc;
	}
	.service-wrap-flow{
	    display: flex;
	    flex-direction: column;
	}
	.service-wrap-flow-inner{
	    padding: 10px;
	    text-align: center;
	}
	.service-wrap-flow-inner img{
	    width: 100%;
	    object-fit: cover;
	    /* height: 200px; */
	}
	.service-wrap-flow-inner-txt{
	    height: 50px;
	}
	.service-setubi{
	    display: flex;
	    margin-bottom: 50px;
	    flex-direction: column;
	}
	.service-setubi-img{}
	.service-setubi-img img{
	    width: 100%;
	    /* border-radius: 10%; */
	}
	.service-setubi-txt{
	    padding: 10px;
	}
	.service-setubi-txt-title{
		font-size: 1.2em;
		height: 50px;
	}
	.flowimg{
		width: 497px;
		margin: auto;
		/* display: flex; */
		/* align-content: center; */
		/* height: 300px; */
		margin-top: 30px;
	}
	.flowimg img{
		/* width: 100% !important; */
		height: auto !important;
	}
}

/*PC*/
@media screen and (min-width: 981px) { 
	#title-image{
		background-image: url(../images/top.png);
		background-repeat: no-repeat;
		width: 100vw;
		height:400px;
	}
	.service-wrap{
		margin-top: 30px;
		margin-bottom: 50px;
	}
	.service-wrap-box{
	    margin-bottom: 50px;
	}
	.service-title{
	    font-size: 1.1em;
	    height: 50px;
	}
	.service{
		
	}
	.service-wrap-box ul{
		padding: 0px 0px 10px 30px;
	}
	.service-wrap-box ul li{
		list-style: disc;
	}
	.service-wrap-flow{
	    display: flex;
	    /* flex-direction: column; */
	}
	.service-wrap-flow-inner{
	    padding: 10px;
	    text-align: center;
	}
	.service-wrap-flow-inner img{
	    width: 100%;
	    /* object-fit: cover; */
	    height: 200px;
	}
	.service-wrap-flow-inner-txt{
	    height: 50px;
	}
	.service-setubi{
	    display: flex;
	    margin-bottom: 50px;
	    /* flex-direction: column; */
	}
	.service-setubi-img{}
	.service-setubi-img img{
	    width: 410px;
	    /* border-radius: 10%; */
	    object-fit: cover;
	    height: 310px;
	}
	.service-setubi-txt{
	    padding: 10px;
	}
	.service-setubi-txt-title{
		font-size: 1.2em;
		height: 50px;
	}
	.flowimg{
		width: 497px;
		margin: auto;
		/* display: flex; */
		/* align-content: center; */
		/* height: 300px; */
		margin-top: 30px;
	}
	.flowimg img{
		/* width: 100% !important; */
		height: auto !important;
	}
	
	
}