@charset "UTF-8";
/****************************************
	service
****************************************/


section#service {
	position:relative;
	width:100%;
	padding:0px 5% 60px;
}

section#service .features {
	position:relative;
	padding:50px 0px 0px;
}

section#service .features .s-area {
	position:relative;
	width:33.333%;
	padding:10px;
}

section#service .features .s-area .s-a-img {
	position:relative;
	text-align:center;
}

section#service .features .s-area .s-a-img span {
	position:absolute;
	top:0;
	left:0;
	display:inline-block;
	background:#d00304;
	color:#fff;
	border:1px solid #d00304;
	padding:7px;
}

section#service .features .s-area .s-a-img img {
	width:100%;
	border:1px solid #d0d0d0;
}

section#service .features .s-area .s-a-title {
	padding:10px 10px 5px;
	font-size:18px;
	font-weight:500;
}

section#service .features .s-area .s-a-detail {
	padding:5px 10px 10px;
	font-size:14px;
}

section#service .features .s-area .s-a-detail a {
	color:#000;
	transition:0.4s;
}

section#service .features .s-area .s-a-detail a:hover {
	text-decoration:none;
	color:#888;
	transition:0.4s;
}

section#service .features .s-area .s-a-illustration {
	position:absolute;
	top:50%;
	left:50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

section#service .introduction {
	position:relative;
	padding:90px 0px 0px;
}

section#service .introduction dl {
	margin:20px auto;
	max-width:700px;
}

section#service .introduction dt {
	position:relative;
	width:100%;
	background:#d00304;
	font-weight:500;
	color:#fff;
	padding:10px 45px 10px 10px;
	cursor:pointer;
	box-shadow:3px 3px 3px #555;
}

section#service .introduction dt::after {
	content:"▼";
	margin:auto;
	position:absolute;
	top:7px;
	right:12px;
	border:2px solid #fff;
	border-radius:50%;
	padding:1px 4px;
}

section#service .introduction dd {
	display:none;
	width:100%;
	border:1px solid #d00304;
	padding:10px 20px;
	box-shadow:3px 3px 3px #555;
}

@media screen and (max-width:768px){

	section#service .features .s-area {
		width:50%;
	}

}


@media screen and (max-width:480px){

	section#service {
		padding:0px 5% 20px;
	}

	section#service .features {
		padding:50px 5% 0px;
	}

	section#service .features .s-area {
		width:100%;
	}

	section#service .introduction {
		position:relative;
		padding:50px 0px 0px;
	}
	

}


/****************************************
	price
****************************************/


section#price {
	position:relative;
	width:100%;
	padding:0px 5% 60px;
}

section#price .content{
	max-width:750px;
}


section#price .price-list {
	position:relative;
	padding:50px 0px 0px;
}


section#price .price-list h3 {
	margin:50px 0px 0px;
}

section#price .price-list h4 {
	margin:25px 0px 10px;
}

section#price .price-list table {
	width:100%;
}

section#price .price-list th {
	width:40%;
	padding:10px;
	background:#fddfdf;
	border:1px solid #d00304;
}

section#price .price-list td {
	width:60%;
	padding:10px;
	border:1px solid #d00304;
	text-align:right;
}


section#price .qa {
	position:relative;
	padding:90px 0px 0px;
}

section#price .qa .q-illustration {
	position:relative;
}

section#price .qa .q-illustration img {
	position:absolute;
	bottom:0;
	right:0;
}


section#price .qa dl {
	margin:20px auto;
	max-width:700px;
}

section#price .qa dt {
	position:relative;
	width:100%;
	background:#d00304;
	font-weight:500;
	color:#fff;
	padding:10px;
	box-shadow:3px 3px 3px #555;
}

section#price .qa dd {
	width:100%;
	border:1px solid #d00304;
	padding:10px 20px;
	box-shadow:3px 3px 3px #555;
}









@media screen and (max-width:768px){



}

@media screen and (max-width:480px){

	section#service .features .s-area .s-a-illustration {
		position:relative;
		top:auto;
		left:auto;
		transform:none;
		text-align:center;
	}

	section#service .features .s-area .s-a-illustration img {
		width:80px;
	}


	section#price {
		padding:0px 5% 20px;
	}

	section#price .price-list {
		padding:50px 5% 0px;
	}

	section#price .price-list th {
		display:block;
		width:100%;
		border-bottom:none;
	}
	
	section#price .price-list td {
		display:block;
		width:100%;
	}
	
	section#price .qa {
		position:relative;
		padding:50px 0px 0px;
	}

	section#price .qa .q-illustration img {
		width:90px;
	}
	

}