@import url(base.css);

/* DEFAULT==============================*/
hr {border: 1px solid #999 ;}
a:link, a:visited {color: #7d6441 ;}
a:hover, a:active {color: #9a6723 ;}

/* LAYOUT==============================*/
body {color: #555 ;background: #e2eafa ;}
#container { background : #fff ;}
#header {background: url("/images/header.png") no-repeat ;}
#footer {background: #00076d url("/images/footer.png") repeat-x left top ; color : #fff ;}
#sidenavi1 { float : right ; }
#center { float : left ; background : url("/images/title.png") no-repeat ; }
#index #center {  }

/* HEADER==============================*/
#header * {color: #e4e4e4 ; font-size : 10px ;}

#header h1 {color: #fff ; left : 21px ; top :125px ; z-index : 1 ; height : 36px ; line-height : 36px ; font-size : 1.6em ; font-weight : bold ; }


#index #header h1 { line-height : normal ;color: #555 ; left : 140px ; top : 80px ; z-index : 1 ; font-size : 1em ; font-weight : normal ;}

/* SIDE==============================*/
/*top cat*/
#sidemenu ul{}
#sidemenu li {}
#sidemenu li a, #sidemenu li span  {color: #fff ;background: #fff url("/images/navi.png") no-repeat 0px bottom ; font-size : 1.3em ; font-weight : bold ;}
#sidemenu li a:hover {background: url("/images/navi.png") no-repeat -200px bottom ;}
/*sub cat*/
#sidemenu ul ul {}
#sidemenu li li, #sidemenu ul.sitemap li   { border-bottom : 1px solid #ccc ;}
#sidemenu li li a,#sidemenu ul.sitemap li a  { border: 0 ;color: #333 ;background: #eee url("/images/subnavi.png") no-repeat 0px center ;font-size : 1.2em ; font-weight : normal ;}
#sidemenu li li a:hover ,#sidemenu ul.sitemap li a:hover  {border: 0 ;color: #333 ;background: #eee url("/images/subnavi.png") no-repeat -200px center ;font-size : 1.2em ; font-weight : normal ;}

/* CENTER==============================*/
#center h3 {background : url("/images/hl.png") no-repeat left center;}
#center h3 a {color: #555 ;}
.content table.sample th {border: solid 1px #ececec ;color: #000 ;background: #f7f7f7 ;}
.content table.sample td {border: solid 1px #ececec ;color: #000 ;background: #fff ;}

/* FOOTER==============================*/

#footer * {color: #fff ;	font-size : 10px ;}

/* FOOTER NAVI==============================*/
#footerNavi li a {border-left: 3px solid #fdbb2c ;}

/* INDEX==============================*/
.contentsWrap {background: #f0f0f0 ;}
.whats p { margin-left : 10px ;}
#indexBox2 {color: #333 ;background: #E9E7E3 ;}
#sidenavi1 .couponWrap {}

#index h4 { padding : 0 ;padding-left  : 85px; position : relative ;background : url("/images/top_h4.png") no-repeat ; height : 55px ; line-height : 55px ; margin : 0px ;  } 
#index h4 span { font-size : 14px ;color : #fff ; position : absolute ; left : 0px ; width : 72px ; text-align : center ; top : 0px ; padding : 0 ;} 

#hNavi { border : 10px solid red ;position : absolute ; left : 13px; top : 277px ; border : none ;  padding : 0px  ; width : 680px ; z-index : 10 ; }
#hNavi ul { overflow : hidden ;height : 36px ; }
#hNavi ul li { width : 131px ; float : left ; }
#hNavi ul li a { height : 36px ;display : block ;background : url("images/navi_h.png") no-repeat ; line-height : 120px ;}

#hNavi ul li.m01 a { background-position : 0px 0px ; }
#hNavi ul li.m02 a { background-position : -131px 0px ; }
#hNavi ul li.m03 a { background-position : -262px 0px ; }
#hNavi ul li.m04 a { background-position : -393px 0px ; }
#hNavi ul li.m05 a { background-position : -524px 0px ; }

#hNavi ul li.m01 a:hover { background-position : 0px -36px ; }
#hNavi ul li.m02 a:hover { background-position : -131px -36px ; }
#hNavi ul li.m03 a:hover { background-position : -262px -36px ; }
#hNavi ul li.m04 a:hover { background-position : -393px -36px ; }
#hNavi ul li.m05 a:hover { background-position : -524px -36px ; }


#fontSize {border-bottom: 3px solid #003399 ;}
#fontSize p {color : #322620 ;}
#fontSize li a.off {border: 1px solid #003399 ;color: #003399;background: #fff ;}
#fontSize li a.on {border: 1px solid #fff ;color: #fff ;background: #003399 ;}

#index .indexContent {	width : 680px ;background :url("/images/reason.png") no-repeat top center ; padding-top : 40px ; z-index: 3 ; height : 1% ; overflow : hidden ; margin-left :3px ; }

#index #center { padding-top : 210px ; position :relative ; z-index : 1 ;}

#index .inner{ padding-left : 10px ; }


#index #index_top { position : absolute ; width : 680px ; left : -0px ; top : 0px ; }

#index #center h3 { background : url("/images/top_h3.png") no-repeat ; padding : 0 ; padding-left : 20px ; height : 36px ; line-height : 36px ;  }
#index #center h5 { background : url("/images/top_h5.png") no-repeat ; padding : 0 ; padding-left : 10px ; height : 32px ; line-height : 32px ;  }


#center div.funcBox { font-size : 0.9em ;width : 324px ; float : left ;  border-top : 1px solid #e5e5e5 ; margin-right : 10px ; padding-bottom : 10px ;}
#center div.funcBox div.funcBox-inner { padding : 5px ;}

#center div.funcBox * { margin : 0 ; padding : 0 ; text-align : left ;}

#center div.funcBox p { padding : 10px ;}

#center div.funcBox ul.ico { float : left ; width : 170px ; margin-left : 10px ; display : inline ; height : 14em ; }
#center div.funcBox ul.ico li {text-align : left !important ;position : relative ; padding-left : 40px ; line-height : 1 ; margin-bottom : 5px ; list-style-position:outside;}
#center div.funcBox ul.ico li small {}
#center div.funcBox ul.ico li p {padding : 0 !important ;line-height : 1.5!important ; height : auto ;}

#center div.funcBox ul.ico img { position : absolute ; left : -40px ; top : 0px ; }
html>body #center div.funcBox ul.ico img { position : absolute ; left : 0px ; top : 0px ; }

#center div.funcBox ul.bnr { clear : both ; position : relative ; }
#center div.funcBox ul.bnr li { float : left ;  margin : 5px ; }

#center div.funcBox h4 { background : #0047ad ; color : #fff ; padding : 3px ; }

#center div.funcBox .funcBox-inner p {height : 8em ;}

funcBox .funcBoxThumb { margin-bottom : 10em ; float : right ;border-bottom : 10em solid #999 ;}

/* funcBox2*/
#center div.funcBox2 { font-size : 0.9em ;width : 324px ; float : left ;  border-top : 1px solid #e5e5e5 ; margin-right : 10px ; padding-bottom : 10px ;}
#center div.funcBox2 div.funcBox2-inner { padding : 5px ;}

#center div.funcBox2 * { margin : 0 ; padding : 0 ; text-align : left ;}

#center div.funcBox2 p { padding : 10px ;}

#center div.funcBox2 ul.ico { float : left ; width : 170px ; margin-left : 10px ; display : inline ; height : 14em ; }
#center div.funcBox2 ul.ico li {text-align : left !important ;position : relative ; padding-left : 40px ; line-height : 1 ; margin-bottom : 5px ; list-style-position:outside;}
#center div.funcBox2 ul.ico li small {}
#center div.funcBox2 ul.ico li p {padding : 0 !important ;line-height : 1.5!important ; height : auto ;}

#center div.funcBox2 ul.ico img { position : absolute ; left : -40px ; top : 0px ; }
html>body #center div.funcBox2 ul.ico img { position : absolute ; left : 0px ; top : 0px ; }

#center div.funcBox2 ul.bnr { clear : both ; position : relative ; }
#center div.funcBox2 ul.bnr li { float : left ;  margin : 5px ; }

#center div.funcBox2 h4 { background : #993366 ; color : #fff ; padding : 3px ; }

#center div.funcBox2 .funcBox2-inner p {height : 8em ;}

funcBox2 .funcBox2Thumb { margin-bottom : 10em ; float : right ;border-bottom : 10em solid #999 ;}

.funcBox2Wrapper { width : 700px ; background : url("/images/function/box_border.png") left bottom no-repeat; overflow : hidden ; padding : 0 ; margin :0 5px 10px ; }


/* product detail*/
.L { float : left ; display : inline ; }
.R { float : right ;display : inline ; }
#center .productDetail { margin : 0 7px ; }
#center .productDetail .funcBox h4{ clear : both ; background : #001f85 ; color : #fff ;}

#center .productDetail img { margin : 0 ; }
#center .productDetail .topBox { border:1px solid #e5e5e5;padding : 1px ; overflow : hidden ; height : 1% ; clear : both ; margin-bottom : 1em ; }
#center .productDetail .topBox .L { width : 310px; }
#center .productDetail .topBox .L img { width : 310px; }
#center .productDetail .topBox .R { width : 342px; }
#center .productDetail .topBox .btnFunc { text-align : center ;}
#center .productDetail .topBox .btnFunc li { display : inline ;}
#center .productDetail .topBox .btnFunc li img { margin : 0 ;}
#center .productDetail .topBox .buttonWrapper { display : inline ; padding-left : 7px ; text-align : right ;}
#center .productDetail .topBox .buttonWrapper { display : inline ; padding-left : 7px ; text-align : right ;}
#center .productDetail .btnFunc { clear : both ; }

/* PC-Time */
#center .productDetail .topBox2 { border:1px solid #e5e5e5;padding : 1px ; overflow : hidden ; height : 1% ; clear : both ; margin-bottom : 1em ; }
#center .productDetail .topBox2 .L { width : 290px; }
#center .productDetail .topBox2 .L img { width : 290px; }
#center .productDetail .topBox2 .R { width : 362px; }
#center .productDetail .topBox2 .btnFunc { text-align : center ;}
#center .productDetail .topBox2 .btnFunc li { display : inline ;}
#center .productDetail .topBox2 .btnFunc li img { margin : 0 ;}
#center .productDetail .topBox2 .buttonWrapper { display : inline ; padding-left : 0px ; text-align : right ;}
#center .productDetail .topBox2 .buttonWrapper { display : inline ; padding-left : 0px ; text-align : right ;}
#center .productDetail .topBox2 .btnFunc { clear : both ; }


#center .productDetail .explainBox { margin-bottom : 1em ;}
#center .productDetail .explainBox dt { color : #003399 ; font-weight : bold ;}
#center .productDetail .explainBox dd { padding-bottom : 0.5em ;}

#center .productDetail .manage { white-space : nowrap ; clear : both ; padding-top : 20px ;}
#center .productDetail .manage li { display : inline; margin-right :0px ;  }

#center .productDetail .buttonWrapper { text-align : center ; }
#center .productDetail .buttonWrapper img { margin : 15px ; }

#center .productDetail .imgBox { overflow : hidden ; margin-bottom : 10px ; clear : both ;}


/* list*/
.tableWrapper {  }

.timeStamp table { font-size : 0.8em ; border : 0 ; border-collapse : collapse ; margin : 5px ;}
.timeStamp table th, .timeStamp table td { border : 1px solid #e5e5e5 ; text-align : center ; font-family :'ＭＳ Ｐゴシック'; }
.timeStamp table th { white-space : nowrap ; background : #eeeeee ; font-weight : normal ;}

/* styles table */
.timeStamp th, .timeStamp td{padding : 0.25em ;}

table th.typeSoft { background : #99ccff ;}
table th.typeSenyou { background : #ffcccc ;}
table th.typeBrowser { background : #ceefcb ; }
table th.typeMobile { background : #ffcc99 ; }



.howToBox {margin-bottom : 1em ;}

.howToBox ol.step {list-style-type:decimal; margin-left: 30px ;}

.howToBox ol.step li {list-style-type:decimal; }

#center .productDetail .howToBox dt,
#center .productDetail .explainBox h4, 
#center .productDetail .producerBox h4,
.faq h4,
.kentai h4,
.kentaiweb h4,
.system h4,
.realtime h4{ background : url("/images/function/h4.png") no-repeat left center !important ; color : #fff ; font-weight : bold ; line-height : 54px ; color : #039 ; padding : 0 0 0 15px ; margin-bottom : 10px ; height : 1% ; font-size : 1.2em ; }

.funcBoxWrapper { width : 700px ; background : url("/images/function/box_border.png") left bottom no-repeat; overflow : hidden ; padding : 0 ; margin :0 5px 10px ; }

.producerBox { overflow : hidden ; height : 1% ; }
.producerBox dt { color :#039 ; font-weight :bold ;}
.producerBox img { border : 1px solid #e5e5e5 ; }


.faq dl { padding-bottom : 2em ;}
.faq * { margin : 0 ; padding : 0 ;}

.faq h5 { color : #003399 ; margin : 0 ; padding : 0 ; font-size : 1em ;}
.faq h5 span { color : #ff6600 ; }
.faq dt { position : relative ;background : #eee ; border : 1px solid #ccc ; height : 1% ;padding : 0.25em ; color : #0063c9 ; font-weight : bold ; margin-bottom : 0.5em ;padding-left : 2.5em ;}
.faq dd { position :relative ; padding-left : 2.5em ; padding-bottom : 1.5em ;height : 1% ; }
.faq dt span { position : absolute ; left : 0.5em ; top : 0.25em ; }
.faq dd span { position : absolute ; left : 0.5em ; top : 0px ; font-weight : bold ;}

.kentai { font-size : 0.85em; }

.kentai p { overflow : hidden ; padding-bottom : 1.5em ;  }
  
.kentai h5 { background : #eee ; border : 1px solid #ccc ; padding : 0.5em ; color : #039 ; clear : both  ; font-size : 1.2em ;  }
.kentai h6 { font-size : 1.2em ; border-bottom : 1px dotted #ccc ; padding : 0.25em ; margin-bottom : 0.5em ;  }

.kentai table { border-collapse : collapse ; border : 0 ; margin : 5px ; font-size : 1em ; }
.kentai table th { border: 1px solid #ccc ; background : #eee ; text-align : right ; white-space : nowrap ; padding : 0.5em ;}
.kentai table td { border: 1px solid #ccc ;padding : 0.5em ; }

.kentai p.related {text-align : center ; clear : none ;}
.kentai p.related img {margin : 1px ;}

.kentai dl.L { float : left ; display : inline ; margin : 5px ;width : 48% ; clear : both ;}
.kentai dl.R { float : right ; display : inline ;margin : 5px ;width : 48% ;}
.kentai dl dt {border: 1px solid #ccc ; background : #eee ;padding : 0.5em ;}
.kentai dl dd { border: 1px solid #ccc ;padding : 0.5em ; border-top : none ;}


.kentaiList { width : 324px ; display : inline ; float : left ; font-size : 0.75em ;margin-right : 10px ; margin-bottom : 1.5em ;  }
.kentaiList-inner { border : 1px solid #ccc ; position : relative ;overflow : hidden ; padding-bottom : 30px ; height : 1% ;}
.kentaiList p { width : 100% ;color :#fff ;padding : 0.5em 0 ;text-align : center ;margin-bottom : 0.5em ;}
.kentaiList small {font-size : 1em ; line-height : 1.2em ; padding : 0px 5px; display : block ; margin-bottom : 1em ;}



.kentaiList h5{ border : 0 ; background : 0 ; padding : 0 ;  font-size : 1.8em ; font-weight : bold ; margin : 0px 5px ;}
.kentaiList dl { width : 196px ; float : left ;  margin-left : 5px;}
.kt3{clear : both ; }

.kentaiList dl.feature { width : 196px ; float : left ; }
.kentaiList dl.option {float : inherit ;}

.kentaiList dl.feature dt { padding-left : 0.5em ; height : 1em; line-height : 1em ; font-size : 1.4em ; font-weight : bold ; margin-bottom : 0.5em ; }

.kentaiList dl.feature dd {background : url("/images/kentai/arrow_feature.png") no-repeat 0px 3px ; padding-left : 10px ;}
.kentaiList dl.option dt {font-size : 1.2em ; font-weight : bold ;}

.kentaiList dl.option dd {background : url("/images/kentai/arrow_option.png") no-repeat left center ; padding-left : 10px ;}


.kentaiList a.detail{ z-index : 100;display : block ; width : 140px ; height : 23px ; background :url("/images/kentai/btn_detail.png") no-repeat ; line-height : 60px ; overflow : hidden ; position : absolute ; left : 10px; bottom : 10px ; clear : both ;}  
.kentaiList img.ktimg{ margin-top : 1.5em ;float : right ; display : block ; margin-bottom : 5em ;}  


/* color */


.kt1 h5 { color : #0033cc ;  }
.kt1 dl.feature dt  { border-left : 5px solid #03c ; }
.kt1 p {background : #0033cc ;}

.kt2 h5 { color : #ff3300 ;  }
.kt2 dl.feature dt  { border-left : 5px solid #ff3300 ; }
.kt2 p {background : #ff3300 ;}

.kt3 h5 { color : #333333 ;  }
.kt3 dl.feature dt  { border-left : 5px solid #333333 ; }
.kt3 p {background : #333333 ;}

.kt4 h5 { color : #ff3366 ;  }
.kt4 dl.feature dt  { border-left : 5px solid #ff3366 ; }
.kt4 p {background : #ff3366 ;}

p.related img { margin : 1px ; }

.system h4, .kentaiweb h4, .realtime h4 { background : url("/images/function/h4.png") no-repeat left center !important ; color : #fff ; font-weight : bold ; line-height : 54px ; color : #039 ; padding : 0 0 0 15px ; margin-bottom : 10px ; height : 1% ; font-size : 1.2em ; }

.system h5, .kentaiweb h5, .realtime h5 { background : #eee ; border : 1px solid #ccc ; padding : 0.5em ; font-size : 1em ;}

.system h6, .kentaiweb h6, .realtime h6 { font-size : 1.2em ; border-bottom : 1px dotted #ccc ; padding : 0.25em ; margin-bottom : 0.5em ;  }




h4 { background : url("/images/function/h4.png") no-repeat left center ; color : #fff ; font-weight : bold ; line-height : 54px ; color : #039 ; padding : 0 0 0 15px ; margin-bottom : 10px ; height : 1% ; font-size : 1.2em ; }

h5 { background : #eee ; border : 1px solid #ccc ; padding : 0.5em ; font-size : 1em ; clear : both ;}
 
h6 { font-size : 1.2em ; border-bottom : 1px dotted #ccc ; padding : 0.25em ; margin-bottom : 0.5em ;}


.kentai img {}

.kentai table { clear : both ;  }

p.pagetop { text-align : right ; clear :both ;}

.kentai .innerBox { padding : 1em ; }


.functionList table {font-size : 0.9em ;border : 0 ; border-collapse : collapse ; margin : 5px ; margin-bottom : 2em ;}
.functionList table img {margin : 2px ;}

.functionList table th, .functionList table td { border : 1px solid #e5e5e5 ; text-align : center ; }
.functionList table th { white-space : nowrap ; background : #eeeeee ; font-weight : normal ;}

.functionList li { background : #eee ; float : left ; text-align : center ; margin : 0 1px 2em ;}   
.functionList li p { padding : 5px ;}   

.functionList li img {margin : 0 ;} 

p.btn_layout  { text-align : right; }  

div.corpCase { width : 95%; margin:0 0 0 20px; }
div.corpCase p.corpComment { background-color:#eeeeff; padding : 5px; margin : 10px 0 10px 0; }



/* 勤怠サービスの画像アンカー */
.kentaiTopImg { position :relative ; }

.kentaiTopImg ul { position : absolute ;left : 0px ;top : 0px ;}

.kentaiTopImg ul li { position : absolute ; width : 170px ; height : 177px ; overflow : hidden ;}
.kentaiTopImg ul li.li1  {left : 11px  ;top :49px ;}
.kentaiTopImg ul li.li2  {left : 481px ;top :49px ; }
.kentaiTopImg ul li.li3  {left : 11px ;top: 237px ; }
.kentaiTopImg ul li.li4  {left : 481px ;top :237px ; }

.kentaiTopImg ul li a { display : block ; padding-top : 600px ; background : url("/images/spacer.gif") ;}

.clear { clear :both ; }