@charset "utf-8";

/*
		service_kyotaku
	 1. contentsBox
	 2. flowchart
	 3. ul

———————————————————- */
.container{
	padding: 25px;
}

/* contentsBox */

.contentsBox>h4{
	font-size: 19px;
}

.contentsBox>.title{
	font-size: 19px;
	color: #43B7A0;
	border-bottom: 1px solid #9E9E9E;
	padding: 10px 0;
}

.contentsBox>.body{
	padding: 10px 25px;
}

.contentsBox>.body>p{
	font-size: 14px;
}

.contentsBox>.body>.img{
	width: 190px;
	display:inline-block;
}

.contentsBox>.body>.rText{
	width: 650px;
	display:inline-block;
}

.contentsBox>.body>.right{
	text-align: right;
	font-weight: bold;
}

.contentsBox>.body>.right>a{
	color: red;
}

/* flowchart */

.flowchart{
	padding: 30px;
}

.flowchart dl{
	display:-webkit-box;
	display:box;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-wrap:wrap;
    flex-wrap:wrap;
	box-pack:justify;
    flex-pack:justify;
    -webkit-justify-content:space-between;
    justify-content:space-between;
	position: relative;
	margin-bottom: 40px;
}

.flowchart dl:before{
	position: absolute;
	font-family:'FontAwesome';
	content:'\f0dd';
	width: 80px;
	height: 80px;
	font-size: 60px;
	bottom: -60px;
	left: 12.5%;
	color: #FDC4CC;
	margin-bottom: 20px;
}

.flowchart dl:last-child:before{
	display: none;
}

.flowchart dl>dt{
	text-align: center;
	width: 30%;
	background: #EA4F64;
	font-size: 18px;
	color: #FFF;
	position: relative;
	padding-top: 25px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.flowchart dl>dd{
	padding: .5em;
	min-height: 80px;
	font-size: 14px;
	width: 70%;
	background: #EFEFEF;
}

/* ul */

.contentsBox>p{
	font-size: 14px;
	padding: 20px;
}

.contentsBox>ul{
	width: 100%;
}

.contentsBox>ul>li{
	border-bottom: 1px solid #CCC;
}

.contentsBox>ul>li:last-child{
	border: none;
}

.contentsBox>ul>li>div:first-child{
	font-size: 17px;
	color: #43B7A0;
	font-weight: bold;
	width: 35%;
	padding: 25px 0 0 25px;
}

.contentsBox>ul>li>div:nth-child(2){
	font-size: 14px;
	font-weight: bold;
	width: 55%;
	padding: 20px 0;
}

.contentsBox>ul>li>div:last-child{
	width: 10%;
	text-align:center;
	padding-top: 10px;
}

.contentsBox>ul>li>div>a{
	font-size: 17px;
	font-weight: bold;
	color: #FFF;
	background: #43B7A0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 15px 25px;
}

@media screen and (max-width: 1000px) {
	.container{
		padding: 5px;
	}
	
	.contentsBox>.title,
	.contentsBox>h4{
		font-size: 16px;
	}
	
	.contentsBox>.body{
		padding: 5px;
	}
	
	.flowchart{
		padding: 10px 0;
	}
	
	.contentsBox>p{
		padding: 5px;
	}
	
	.contentsBox>ul>li{
		padding: 10px 0;
	}

}

/* 縦長の場合 */
@media only screen and (max-width: 1000px) and (orientation : portrait) {

	.contentsBox>.body>.rText,
	.contentsBox>.body>.img{
		width: 100%;
		margin-bottom: 5px;
	}
	
	.contentsBox>.body>.img>img{
		margin:0 auto;
	}
	
	.flowchart dl:before{
		left: 45%;
	}
	
	.flowchart dl>dt{
		padding-top: 5px;
		width: 100%;
	}
	
	.flowchart dl>dd{
		width: 100%;
	}
	
	.contentsBox>ul>li>div:first-child{
		padding: 5px;
		width: 100%;
	}
	
	.contentsBox>ul>li>div:nth-child(2){
		width: 100%;
		padding: 5px;
	}
	
	
	.contentsBox>ul>li>div:last-child{
		width: 100%;
	}
	
	.contentsBox>ul>li>div>a{
		width: 80%;
		display:block;
		margin:5px auto;
		padding: 5px;
	}
}

/* 横長の場合 */
@media only screen and (max-width: 1000px) and (orientation : landscape) {

}