@charset "utf-8";
/* ===================================================================
CSS information

 file name  :cases.css
 author     :PCBrain
 style info :相談事例ページ用
=================================================================== */


#contentTtl {
	background: url(../img/cases/h1_bg.png) no-repeat center center;
}

#contentTtl h1 {
	background-image: url(../img/cases/h1.png);
}

#main .txtBox {
	overflow:hidden;
	margin-bottom:20px;
}

#cases #main h3 {
	clear: both;
}

#cases #main h4 {
	border-bottom: #bcbcbc dotted 1px;
	border-left: none;
	clear: both;
	font-size: 18px;
	padding-left: 0;
	color: #333;
}


#cases #main h4 span {
	background-color: #d50000;
	border-radius: 5px;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
	float: left;
	padding: 0 10px;
	margin: 2px 9px 0 0;
}

#main ul.areaList {
	overflow: hidden; /*floatの解除、ここがポイント*/
	zoom:1; /*IE6でレイアウト崩れを防ぐためのものです。*/
	margin-bottom:20px;
}

#main ul.areaList li a{
	background: url(../img/cases/catlist_bg.png) no-repeat center center;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	float: left;
	height: 38px;
	margin-right: 7px;
	padding-top: 13px;
	width: 136px;
	text-align: center;
	text-decoration:none;
}

#main ul.areaList li a:hover {
	opacity:0.7;
	transition:0.7s;
}

#main ul.areaList li:nth-child(5n) a {
	margin-right: 0;
}


#main .caseList li {
	background: #fff url(../img/cases/case_li_bg.gif) no-repeat center bottom; 
	border: #c2c2c2 solid 1px;
	font-size: 12px;
	float: left;
	margin: 0 14px 20px 0;
	width:165px;
	line-height: 1.5;
}

#main .caseList li:nth-child(4n) {
	margin-right: 0;
}

#main .caseList li span {
	display: block;
	margin: 5px 10px;
	height:38px;
}

#main .caseList li a {
	color: #333;
	text-decoration: none;
}

#main .caseList li a:hover {
	color:#ff9933;
	transition:0.7s;
	text-decoration:underline;
}

#main table.normal {
	width: 450px;
	float:right;
	margin-bottom: 20px;
	clear: none;
}

#main .answerArea ul {
	margin-bottom: 10px;
}

#main .answerArea ul li {
	background: url(../img/common/arrow_red.png) no-repeat left 8px;
	padding-left: 12px;
}

#main .contactBox {
	background: #fff;
	border: #fff solid 3px;
	border-radius:5px;
	box-shadow:rgba(167, 167, 167, 0.2) 0px 0px 50px 50px inset;
	padding: 14px;
	text-align: center;
}

#main .contactBox .telBox,
#main .contactBox .mailBox{
	width: 330px;
	display: inline-block;
}

#main .contactBox .telBox {
	margin-right: 11px;
	text-align: left;
}

#main .contactBox .telBox h4,
#main .contactBox .mailBox h4{
	height:21px;
	text-indent: -9999px;
	margin-bottom: 10px;
}

#main .contactBox .telBox h4{
	background: url(../img/cases/cotact_ttl01.png) no-repeat center center;
}

#main .contactBox .mailBox h4{
	background: url(../img/cases/cotact_ttl02.png) no-repeat center center;
}

#main .contactBox .telBox p.tel {
	font-size: 12px;
}

#main .contactBox .telBox p.tel span {
	padding: 0 0 0 47px;
	background: url(../img/common/ico_freedial04.png) no-repeat left center;
	display: block;
	font-size: 34px;
	margin-bottom: 5px;
}


#main .singlenav{
	overflow:hidden;
	margin-bottom:30px;
	font-size: 14px;
	color: #fff;
}

#main .singlenav li {
	
}

#main .singlenav li a {
	border-radius: 5px;
	background-color:#12a73b;
	color:#fff;
	text-decoration: none;
	position:relative;
}

#main .singlenav li:hover {
	opacity:0.7;
	transition:0.7s;
	text-decoration: none;	
}

#main .singlenav li.nav_left{
	float:left;
	text-align:left;
}

#main .singlenav li.nav_left a:before {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 5px solid transparent;
	border-right-color: #fff;
	left: 0;
	top: 28%;
}

#main .singlenav li.nav_left a{
	padding:0 15px 0 25px;
	display:block;
}

#main .singlenav li.nav_right{
	float:right;
	text-align:right;
}

#main .singlenav li.nav_right a:after {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 5px solid transparent;
	border-left-color: #fff;
	right: 0;
	top: 28%;
}

#main .singlenav li.nav_right a{
	padding:0 25px 0 15px;
	display:block;
}