@charset "utf-8";
/*==========================================
/
/ □→xhtmlReset.css
/ 0■GLOBAL RESET
/	1■header
/	2■horizonalNavi 上と下
/  ■keyVisual
/ 4■mainc
/	4-4■snsBox
/	6■linkBox
/	7□footer→footer.css
/
==========================================*/

/*-----------------------
=0■body
-----------------------*/
html { font-size: 62.5%; }

body {
	width: 100%;
	height: auto;
	color: #000;
	font-family: Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS P Gothic",Verdana,sans-serif;
	font-size: 12px; font-size: 1.2rem; /* =12px */
}
h1{ font-size: 34px; font-size: 3.4rem; color:#563b34; } /* =34px */
a{overflow:hidden;outline:none;}

#keyVisual,#mainc{
	font-family:"ヒラギノ角ゴ ProN", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, sans-serif;
}

/*-----------------------
=1■header
-----------------------*/
#header {
	position: relative;
	z-index: 100;
	width: 1000px;
	height: 90px;
	margin: 0 auto;
	line-height: 1.2;
}

#header .hgroup h1{
	font-weight: normal;
	font-size: 1.1rem; /* =11px */
	color: #582c00;
	position: relative;
	left: 0px;
	top: 5px;
	padding:0;
	margin:0 0 7px;
}

#header #bread{
	position:absolute;
	top:65px;
	left:0px;
	height:21px;
}

#header ul#subNavi{
	position: absolute;
	top: 0;
	right: 5px;
	width: 400px;
	list-style:none;
}
#header ul#subNavi .btn-close{
  display:none;
}
#header ul li{
	display: block;
	float: left;
	height: 30px;
	font-size: 12px;
	line-height: 2.5;
	color: #563b34;
}
#header ul li a{
	height: 30px;
	text-align: center;
  text-decoration: none;
  color: #512e2e;
  font-size: 12px;
	line-height: 2.5;
  font-family: Meiryo;
}
#header ul li.history{
	width: 100px;
	background: linear-gradient(#F9F9F9,#F1F1F1);
	border-top: 1px solid #E0E0E0;
	border-bottom: 1px solid #E0E0E0;
	border-left: 1px solid #E0E0E0;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	box-sizing: border-box;
}
#header ul li.history i{
	margin: 0 7px 0 16px;
  display: inline;
}
#header ul li.history:hover{
	background: linear-gradient(#DBDBDB,#E7E7E7);
	border-color: #d0caca;
}
#header ul li.list{
	width: 110px;
	background: linear-gradient(#F9F9F9,#F1F1F1);
	border-top: 1px solid #E0E0E0;
	border-bottom: 1px solid #E0E0E0;
	border-left: 1px solid #E0E0E0;
	box-sizing: border-box;
}
#header ul li.list i{
	margin: 0 5px 0 12px;
  display: inline;
}
#header ul li.list:hover{
	background: linear-gradient(#DBDBDB,#E7E7E7);
	border-color: #d0caca;
}
#header ul li.help{
	width: 80px;
	background: linear-gradient(#F9F9F9,#F1F1F1);
	border-top: 1px solid #E0E0E0;
	border-bottom: 1px solid #E0E0E0;
	border-left: 1px solid #E0E0E0;
	box-sizing: border-box;
}
#header ul li.help i{
	margin: 0 5px 0 14px;
	font-size: 14px;
  display: inline;
}
#header ul li.help:hover{
	background: linear-gradient(#DBDBDB,#E7E7E7);
	border-color: #d0caca;
}
#header ul li.sitemap{
	width: 110px;
	background: linear-gradient(#F9F9F9,#F1F1F1);
	border: 1px solid #E0E0E0;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	box-sizing: border-box;
}
#header ul li.sitemap i{
	margin: 0 5px 0 10px;
  display: inline;
}
#header ul li.sitemap:hover{
	background: linear-gradient(#DBDBDB,#E7E7E7);
	border-color: #d0caca;
}

/*-----------------------
=2■carooseli
-----------------------*/

#caroosel{
	width: 712px;
	height: 108px;
	margin: 0 auto;
	position: relative;
	top: 29px;
	z-index: 5;
}




/*-----------------------
=2■horizonalNavi
-----------------------*/

#hNall{
	width: 1010px;
	height:90px;
	position: relative;
	margin: 0px auto;
}
#mainc>.arrow{
	width: 472px;
	height: 169px;
	background: url(../img/point1.png) 0 0 no-repeat;
	background-size: 472px 169px;
	position: relative;
	margin: 15px auto 20px;
	top:0px;
	text-indent:-9999px;
}

#bottomhN.point2{
	position: relative;
	margin: 0px auto;
}
#bottomhN.point3{
	position: relative;
	margin: 0px auto;
}
#bottomhN.point4{
	position: relative;
	margin: 0px auto;
}

#hNall .horizonalNavi{
	width: 970px;
	height:90px;
	margin: 0 auto 10px;
}

#bottomhN .horizonalNavi{
	margin: 0 auto 25px;
}

.point2 .horizonalNavi .arrow{
	background: url(../img/point2.png) 0 0 no-repeat;
}
.point3 .horizonalNavi .arrow{
	background: url(../img/point3.png) 0 0 no-repeat;
}
.point4 .horizonalNavi .arrow{
	background: url(../img/point4.png) 0 0 no-repeat;
}

.point2 .horizonalNavi .arrow,
.point3 .horizonalNavi .arrow,
.point4 .horizonalNavi .arrow{
	width: 472px;
	height: 169px;
	background-size: 472px 169px;
	position: relative;
	margin: 24px auto 8px;
	top:0px;
	text-indent:-9999px;
}
.horizonalNavi ul.btnArea{
	list-style-type: none;
	width: 1000px;
	height: 78px;
	margin: 0 auto;
	padding-left: 0px;
	background: url(../img/nav.png) 0 0 no-repeat;
}

.horizonalNavi ul.btnArea li{
	text-indent: -9999px;
	float: left;
	width: 135px;
	height: 40px;
}
.horizonalNavi ul.btnArea li.btn01{
	text-indent: -9999px;
	float: left;
	width: 158px;
	height: 78px;
}
.horizonalNavi ul.btnArea li.btn02{
	text-indent: -9999px;
	float: left;
	width: 145px;
	height: 78px;
}
.horizonalNavi ul.btnArea li.btn03{
	text-indent: -9999px;
	float: left;
	width: 140px;
	height: 78px;
}
.horizonalNavi ul.btnArea li.btn04{
	text-indent: -9999px;
	float: left;
	width: 138px;
	height: 78px;
}
.horizonalNavi ul.btnArea li.btn05{
	text-indent: -9999px;
	float: left;
	width: 138px;
	height: 78px;
}
.horizonalNavi ul.btnArea li.btn06{
	text-indent: -9999px;
	float: left;
	width: 138px;
	height: 78px;
}
.horizonalNavi ul.btnArea li.btn07{
	text-indent: -9999px;
	float: left;
	width: 138px;
	height: 72px;
}

.horizonalNavi ul.btnArea li.btn01 a{
	display: block;
	width: 158px;
	height: 78px;
	text-indent: -9999px;
	overflow: hidden;

	}
.horizonalNavi ul.btnArea li.btn02 a{
	display: block;
	width: 145px;
	height: 78px;
	text-indent: -9999px;
	overflow: hidden;

	}
.horizonalNavi ul.btnArea li.btn03 a{
	display: block;
	width: 138px;
	height: 78px;
	text-indent: -9999px;
	overflow: hidden;

	}
.horizonalNavi ul.btnArea li.btn04 a{
	display: block;
	width: 138px;
	height: 78px;
	text-indent: -9999px;
	overflow: hidden;

	}
.horizonalNavi ul.btnArea li.btn05 a{
	display: block;
	width: 138px;
	height: 78px;
	text-indent: -9999px;
	overflow: hidden;

	}
.horizonalNavi ul.btnArea li.btn06 a{
	display: block;
	width: 138px;
	height: 78px;
	text-indent: -9999px;
	overflow: hidden;

	}
.horizonalNavi ul.btnArea li.btn07 a{
	display: block;
	width: 138px;
	height: 78px;
	text-indent: -9999px;
	overflow: hidden;

	}

.horizonalNavi ul.btnArea li a:hover{
	opacity:0.7;
	}


/*-----------------------
=3■keyVisual
-----------------------*/
#keyVisual{
	position: relative;
	width: 1000px;
	height: 383px;
	margin: 0px auto;
	background: url(../img/main.jpg) 0 0 no-repeat;
	background-size: 1000px auto;
}
#keyVisual .keyVisual_txt{
	text-align: center;
	padding-top: 30px;
}
#keyVisual h2{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url(../img/h2.png) center 25px no-repeat;
	background-size: 359px 157px;
	width: 359px;
	height: 184px;
	margin: 0 auto 20px;
}

#keyVisual p{
	font-size: 21px;
	font-weight: bold;
	color: #2c6b83;
	line-height: 1.4em;
}

/*-----------------------
=0■mainc
-----------------------*/

#mainc{
	width: 1000px;
	height: auto;
	margin: 0px auto;
}

#main01{
	position: relative;
	background: url(../img/txt_01.jpg) 0 0 no-repeat;
	width: 996px;
	height: 905px;
	margin: 5px auto;
	top:0px;
	left:0px;
	font-size:16px;
	line-height: 1.8em;
	border:1px solid #985420;
}

#main01 h3,
#main03 h3,
#main04 h3{
	margin:  0;
	text-align: center;
	color: #8d501e;
	font-size: 28px;
	font-weight: bold;
	background-color: #f2eef0;
	padding:  15px;
}
	
#main01 h4.txt01{
	position: absolute;
	height:30px;
	top:128px;
	left:252px;
	font-weight: bold;
}

#main01 p.title01{
	position: absolute;
	top: 80px;
	left: 252px;
	font-size: 22px;
	color: #8d501e;
	border-bottom: solid 2px;
    padding-bottom:  5px;
	width: 73%;
}

/* 見出しデザイン */
#main01 p.title01:before,
#main01 p.title02:before {
   content:  '';
    width: 50px;
    height: 2px;
    background-color: #42a6ff;
    display:  block;
    position:  absolute;
    left:  0;
    bottom: -2px;
}

#main01 p.title02{
	position: absolute;
	top:510px;
	left:13px;
	font-size: 22px;
	color: #8d501e;
	border-bottom: solid 2px;
	padding-bottom: 5px;
	width: 73%;
}

#main01 p.txt01{
	position: absolute;
	width: 730px;
	top: 156px;
	left: 252px;
	padding:0;
	margin:0;
	color:#000;
	height: 302px;
}

#main01 img.img01{
	position: absolute;
	width: 352px;
	height: 251px;
	top: 58px;
	left: 580px;

}

#main01 h4.txt02{
	position: absolute;
	width: 582px;
	height: 38px;
	top: 558px;
	left: 13px;
	font-weight: bold;

}
#main01 p.title{
	font-size:16px;
	font-weight:bold;
	display:block;
	padding-bottom:10px;
}




#main01 img{
	margin:15px 0px;
}
#main01 p.txt02{
	position: absolute;
	width: 738px;
	top: 588px;
	left: 14px;
	padding:0;
	margin:0;
	color:#000;
}

#main02{
	position: relative;
	background: url(../img/txt_02.jpg) 0 0 no-repeat;
	width: 970px;
	height: 370px;
	margin: 0 auto;
	top: 10px;
}

#main03{
	position: relative;
	width: 996px;
	height:400px;
	margin: 0 auto 5px;
	border:1px solid #985420;
	font-size:16px;
	line-height:1.9em;
	background: url(../img/main03.jpg) no-repeat;
}
#main03 h3{
	margin-bottom:15px;
}
#main03 h4{
	position:absolute;
	top:75px;
	left:365px;
	display:block;
	width:500px;
	font-weight: bold;
}
#main03 p{
	width:620px;
	margin-right:20px;
	display:block;
	position:absolute;
	top:100px;
	left:356px;
}
#main03 p,
#main04 p{
	margin:10px;
}

#main04{
	position:relative;
	width: 996px;
	height:400px;
	border:1px solid #985420;
	font-size:16px;
	top:0px;
	margin: 0 auto 5px;
	line-height:1.9em;
	background: url(../img/main04.jpg) no-repeat;
}
#main04 h3{
	/*margin-top:15px;*/
	margin-bottom:15px;
}
#main04 h4{
	position:absolute;
	top:77px;
	left:18px;
	display:block;
	width:500px;
	font-weight: bold;
}
#main04 p{
	width:620px;
	top:102px;
	position:absolute;
	left:8px;
	display:block;
}

/*--------------------------------------
■grouplink　マチジョブ移植対応で追加
--------------------------------------*/
#grouplink{
	width: 1000px;
	margin: 0 auto 20px;
    height: 102px;
    border: #8d501e 1px solid;
}

#grouplink h3{
	background-color: #8d501e;
    height: 24px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    padding-top: 6px;
    letter-spacing: 0.1em;
}

#grouplink ul{
  margin: 10px auto 0;
	width:90%;
}

#grouplink ul li{
	float: left;
    padding: 6px 10px 6px 0;
    letter-spacing: 0.1em;
}

#grouplink li a {
    color:#000;
}

#grouplink li a:hover{
	color:#000;
}



/*-----------------------
=6■snsBox
-----------------------*/
/*#snsBox{
	position: relative;
	margin: 0 auto;
	width: 400px;
	height: 40px;
	top: 0;
	left: 0;
	background: url(../img/bgSns.png);
	margin: 0 auto 20px;
	border-radius:30px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	box-shadow:0px -1px 3px 0 rgba(150,150,150, 0.1);
	-moz-box-shadow:0px 1px 3px 0 rgba(50,50, 50, 0.5) inset;
	-webkit-box-shadow:0px 1px 5px 0 rgba(0,0, 0, 0.5) inset;
	border: 1px solid #dddddd;
	z-index: 30;
}
#snsBox .hb{
	position: absolute;
	display:block;
	width: 20px;
	height: 20px;
	overflow: hidden;
	top: 10px;
	left:25px;
	z-index: 70;
}
#snsBox .mc{
	position: absolute;
	display:block;
	width: 60px;
	height: 60px;
	overflow: hidden;
	top: 10px;
	left:60px;
	z-index: 60;
}
#snsBox .tt{
	position: absolute;
	display:block;
	width: 80px;
	height: 30px;
	overflow: hidden;
	top: 10px;
	left:135px;
	z-index: 50;
}

#snsBox .fb{
	position: absolute;
	display:block;
	width: 72px;
	height: 24px;
	overflow: hidden;
	top: 8px;
	left: 230px;
	z-index: 40;
}
#snsBox .gp{
	position: absolute;
	width: 50px;
	height: 20px;
	top: 10px;
	left: 315px;
	z-index: 30;
}*/


/*-----------------------
=6■linkBox
-----------------------*/
#linkBox{
	clear: both;
	position: relative;
	width: 940px;
	height: 60px;
	margin: 10px auto;
}

#linkBox p.uniq{
	font-size: 10px;
	color: #888888;
	margin-bottom: 20px;
	text-align:center;
}

#linkBox p.backtoTop{float: left;	width: 200px;	height: auto;}
#linkBox p.gotoTop{float: right;	width: 200px;	height: auto;}
#linkBox p.nowtoTop{float: left; width: 250px;	height: auto; margin-left:160px;}
#linkBox p a{
	display: block;
	width: auto;
	height: auto;
	font-size: 10px; font-size: 1.0rem;  /* =10px */
	color: #000;
	text-indent: 15px;
	line-height: 1.4;
}

#linkBox p a:hover{
	color: #0000ff;
}

#linkBox p.backtoTop a{background: url(../img/item01.png) left bottom no-repeat;}
#linkBox p.gotoTop a{text-align: right; text-indent:15px; padding-right: 15px; background: url(../img/item02.png) right bottom no-repeat;}