@charset "utf-8";



#main_box { line-height: 2.0; }



/* side_menu ----------------- */



#side_box .side_menu li.btn04 a { background-color: #fef7dc; }

#side_box .side_menu li.btn04 a div.bgt { background-position: -240px -215px; }





/* contents ---- */

#main_box .box02{ width:660px;position:relative;}



#main_box .box02 ul { width:676px;}



#main_box .box02 ul li {

	width:318px;

	height:199px;

	margin:0px 16px 20px 0px;

	float:left;

	display:block;

	cursor:pointer;

}



#main_box .box02 li.box_btn{ border:2px solid;}

#main_box .box02 li.box_btn div.box_ttl{

	background-image:url(/corporate/field/images/box_ttl.png?ud=180827);

	background-repeat:no-repeat;

	width:318px;

	height:58px;

	border-bottom:2px solid;

	display:block;

	text-indent:-9999px;

	overflow:hidden;}

#main_box .box02 li.box_btn div.box_text{ padding:20px; font-size: 14px;}



#main_box .box02 li.box_btn.btn01 div.box_ttl{ background-color:#fef7dc; border-color:#f7af0d; background-position: 0px 0px;}

#main_box .box02 li.box_btn.btn02 div.box_ttl{ background-color:#f7ffe5; border-color:#8fb957; background-position: 0px -60px;}

#main_box .box02 li.box_btn.btn03 div.box_ttl{ background-color:#ebf5f8; border-color:#79d1d9; background-position: 0px -120px;}

#main_box .box02 li.box_btn.btn04 div.box_ttl{ background-color:#fcefed; border-color:#e57663; background-position: 0px -180px;}



#main_box .box02 li.box_btn.btn01:hover div.box_ttl{ background-color:#f7af0d; background-position: -318px 0px;}

#main_box .box02 li.box_btn.btn02:hover div.box_ttl{ background-color:#8fb957; background-position: -318px -60px;}

#main_box .box02 li.box_btn.btn03:hover div.box_ttl{ background-color:#79d1d9; background-position: -318px -120px;}

#main_box .box02 li.box_btn.btn04:hover div.box_ttl{ background-color:#e57663; background-position: -318px -180px;}



#main_box .box02 li.box_btn.btn01 .hover_box{

	width:180px; 

	height:205px;

	position:absolute; 

	top:-224px; 

	left:66px;

	display:none; 

	background-color:#f4f4f4; 

	box-shadow: 1px 1px 1px #ccc;

	border-radius:10px;

	border:#dfdfdf 1px solid;

	padding:9px; }



#main_box .box02 li.box_btn.btn01 .hover_box:after { /* 三角形を作成 */

	position: absolute;

	content: "";

	width: 0;

	height: 0;

	top: 220px; /* 三角形の高さを２倍した値 */

	left: 80px;

	border: 16px solid transparent;

	border-top: 16px solid #f4f4f4;

}



#main_box .box02 li.box_btn.btn02 .hover_box02{

	width:180px; 

	height:80px;

	position:absolute; 

	top:-100px; 

	left:402px;

	display:none; 

	background-color:#f4f4f4; 

	box-shadow: 1px 1px 1px #ccc;

	border-radius:10px;

	border:#dfdfdf 1px solid;

	padding:9px; }



#main_box .box02 li.box_btn.btn02 .hover_box02:after { /* 三角形を作成 */

	position: absolute;

	content: "";

	width: 0;

	height: 0;

	top: 98px; /* 三角形の高さを２倍した値 */

	left:80px;

	border: 16px solid transparent;

	border-top: 16px solid #f4f4f4;

}



#main_box .box02 li.box_btn.btn03 .hover_box03{

	width:180px; 

	height:156px;

	position:absolute; 

	top:47px; 

	left:66px;

	display:none; 

	background-color:#f4f4f4; 

	box-shadow: 1px 1px 1px #ccc;

	border-radius:10px;

	border:#dfdfdf 1px solid;

	padding:9px; }



#main_box .box02 li.box_btn.btn03 .hover_box03:after { /* 三角形を作成 */

	position: absolute;

	content: "";

	width: 0;

	height: 0;

	top: 174px; /* 三角形の高さを２倍した値 */

	left: 80px;

	border: 16px solid transparent;

	border-top: 16px solid #f4f4f4;

}



#main_box .box02 li.box_btn.btn04 .hover_box04{

	width:180px; 

	height:162px;

	position:absolute; 

	top:41px; 

	left:402px;

	display:none; 

	background-color:#f4f4f4; 

	box-shadow: 1px 1px 1px #ccc;

	border-radius:10px;

	border:#dfdfdf 1px solid;

	padding:9px;  }



#main_box .box02 li.box_btn.btn04 .hover_box04:after { /* 三角形を作成 */

	position: absolute;

	content: "";

	width: 0;

	height: 0;

	top: 180px; /* 三角形の高さを２倍した値 */

	left:80px;

	border: 16px solid transparent;

	border-top: 16px solid #f4f4f4;

}



#main_box .box02 li.box_btn.btn01{ border-color:#f7af0d;}

#main_box .box02 li.box_btn.btn02{ border-color:#8fb957;}

#main_box .box02 li.box_btn.btn03{ border-color:#79d1d9;}

#main_box .box02 li.box_btn.btn04{ border-color:#e57663;}

#main_box .box02 li.box_btn.btn01:hover .hover_box{ display:block;}

#main_box .box02 li.box_btn.btn02:hover .hover_box02{ display:block;}

#main_box .box02 li.box_btn.btn03:hover .hover_box03{ display:block;}

#main_box .box02 li.box_btn.btn04:hover .hover_box04{ display:block;}



.hover_box_inner{ width:156px; display:block; background-color:#ffffff; padding:5px 12px;font-size:14px; margin-bottom:4px;}

.hover_box_inner p{

	background-image:url(/corporate/field/images/icon_mark.png);

	background-repeat:no-repeat;

	display:block; background-position-y:11px;}

.hover_box_inner p a{ display:block; margin-left:14px;}

.hover_box_inner img{ margin:3px auto 10px; display:block;}

.hover_box_inner img.target_img{ margin:1px 0; display: inline-block; width:12px;}

.hover_box_inner p.corp_name{ font-size:12px; line-height:1.4; background-position-y:6px;}

