@charset "utf-8";
/* CSS Document */


/* 共通 */
html{
    font-size:62.5%;
}

a{
    text-decoration:none;
    color:#333;
}

body{
    width:100%;
    font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
    color:#333;
    font-size:14px;
    font-size:1.4rem;
    line-height:1.5em;
}

header{
    width:100%;
    background:#000000;
    padding:15px 0 0 0;
}

#headarea{
    width:90%;
    margin:0 auto;
    padding-left:3%;
    position:absolute;
}

#headarea img{
    width:60%;
}

#menuarea{
    background:#ffffff;
}

#menubutton{
    width:10%;
    padding:10px 0 10px 0;
    cursor:pointer;
    position:relative;
    left:87%;
    top:-5px;
}
#menubutton img{
    width:90%;
}
#servicem,#recuritm,
#ftservicem,#ftrecuritm{
    width:100%;
}
#servicemh,
#recuritmh,
#aboutmh,
#ftservicemh,
#ftrecuritmh,
#ftaboutmh{
    padding:10px 0 10px 0;
    background:url(../img/menu_hbg.png) repeat;
}

#servicemh p,#recuritmh p,#aboutmh p,
#ftservicemh p,#ftrecuritmh p,#ftaboutmh p{
    margin-left:2%;
    color:#FFFFFF;
}
#aboutm .goods,
#ftaboutm .goods{
    padding:5px;
    background-color: #ccc;
    width:100%;
    box-sizing:border-box;
}
#aboutm .goods a,
footer .goods a{
    width:100%;
    display: block;
}
#aboutm .goods a img,
#ftaboutm .goods a img{
    width:100%;
    vertical-align: bottom;
}
#servicemd,#aboutmd,
#ftservicemd,#ftaboutmd{
    background:#FFFFFF;
}
#servicemd table,
#aboutmd table,
#recuritmd table,
#ftrecuritmd table,
#ftservicemd table,
#ftaboutmd table{
  width:100%;
}


#servicemd td,
#aboutmd td,
#ftservicemd td,
#ftaboutmd td{
    width:32.9%;
    text-align:center;
    border:1px solid #CCCCCC;
    padding:20px 0 20px 0;
    vertical-align:middle;
}

#recuritmd td,
#ftrecuritmd td{
    width:24.57%;
    text-align:center;
    border:1px solid #cccccc;
    background:#FFFFFF;
    padding:20px 0 20px 0;
    vertical-align:middle;

}


#hdmenuclose,
#ftmenuclose{
    width:90%;
    margin:0 auto;
    background:#ffffff;
    margin-top:20px;
    padding-bottom:20px;
    cursor:pointer;
}

#hdmenuclose img,
#ftmenuclose img{
    width:100%;

}
#goods_bn{
    width:100%;
    display: block;
}
#goods_bn a{
    width:100%;
    display: block;
}
#goods_bn img{
    width:100%;
    vertical-align: bottom;
}
#tab{
    width:100%;
}


#tabclickarea{
    width:100%;
    font-size:10px;
    font-size:1.0rem;
    border-top:1px solid #EEEEEE;
}

#tabclickarea li{
    width:33%;
    text-align:center;
    cursor:pointer;
    border-bottom:2px solid #000000;
    padding:10px 0 10px 0;
    float:left;
    font-size:13px;
    font-size:1.3rem;
    line-height:1.0em;
}

#tabclickarea li:last-child{
    width:34%;
}


.tabim{
    color:#000000;
    background:#ffffff;
}

.tabactive{
    color:#ffffff;
    background:#000000;
}

#tabdataarea{
    width:95%;
    margin:0 auto;
    padding-top:10px;
}

#tabdataarea li{
    padding:1.5px 1% 1.5px 1%;
    width:48%;
    float:left;
}

#tabdataarea img{
    width:100%;
}

#servicemenu{
    width:100%;
    padding:20px 0 10px 0;

}

#servicemenu img{
    width:100%;
}

#servicemenubtn{
    width:95%;
    height:65px;
    margin:0 auto;
    background:url(../img/service_close.png) no-repeat;
    background-size:100%;
    cursor:pointer;

}

#servicemenubtn.opened{
    width:95%;
    height:65px;
    margin:0 auto;
    background:url(../img/service_open.png) no-repeat;
    background-size:100%;
    cursor:pointer;

}

#fotcomlogo{
    width:95%;
    margin:0 auto;
}

#fotcomlogo img{
    width:100%;
}

/*
#servicemenubtn{
    padding-bottom:20px;
}
*/
#servicemenudata{
    width:95%;
    margin:0 auto;
    margin-bottom:10px;
}

#servicemenudata table{
    width:100%;
}

#servicemenudata td{
    width:49%;
    background:url(../img/arrow.png) 90% no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.0, #F1F1F1));
    background:url(../img/arrow.png) 90% no-repeat, -moz-linear-gradient(top,#FFFFFF,#F1F1F1);
    background:url(../img/arrow.png) 90% no-repeat, linear-gradient(top,#FFFFFF,#F1F1F1);
    background-size:10% ,100% 100%;
    border:1px solid #CCCCCC;
    vertical-align:middle;
    padding:15px 0 15px 0;
}

#servicemenudata td img{
    width:50%;
    display:block;
    margin:0 auto;
}

#servicemenudata td.w30 img{
    width:30%;
    display:block;
    margin:0 auto;
}

#servicemenudata td.w25 img{
    width:25%;
    display:block;
    margin:0 auto;
}


#servicemenudata td.tmauto{
    text-align:center;
}




footer{
    width:100%;

}

#fotmenu{
    width:100%;
}

#fotmenubtn{
    width:100%;
    cursor:pointer;
    background-color:#CCCCCC;
    background:url(../img/arrow_black.png) 95% no-repeat,#CCCCCC;
    background-size:5%;
    padding:20px 0 20px 0;

}


#fotmenubtn.opened{
    width:100%;
    cursor:pointer;
    background-color:#CCCCCC;
    background:url(../img/arrow_close.png) 95% no-repeat,#CCCCCC;
    background-size:5%;
    padding:20px 0 20px 0;
}


#fotmenubtn p{
    font-size:14px;
    font-size:1.4rem;
    text-align:center;
}



#fotcompany{
    margin-top:10px;
}

#copyright{
    padding:10px 0 10px 0;
    text-align:center;
    background:#000000;
    color:#FFFFFF;
    font-size:8px;
    font-size:0.8rem;
}

/*　設定-------------------------------- */

/*  <div style="clear:both"></div>はこれ↓ */

.cf:after {    content: '.'; height: 0; line-height: 0; visibility: hidden; display: block; clear: both}
.cf { display: block }


/* float */

.fl{float:left !important}
.fr{float:right !important}

/* hover */
.hv:hover{
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;

}

.wmax{
    width:100%;
}

.headh{

    height:100px;

}


.bgg{

    background:#f3f3f3;
}
.headw{
    width:960px;
    margin:0 auto;
}

.headtext{
    padding:33px 0 33px 0;
    font-size:30px;
}

.pantext{
    margin:80px 0 0 0;
}


.textbl{
    color:#333333;
}

.textbl2{
    color:#555555;
}

/* フッターテキストサイズ */
.fts{
    font-size:12px;
}

.ftp{

    padding:8px 0 0 0;
}


.navim{
    width:192px;
    height:40px;
}

.gm{

    margin:0 0 0 18px;
}

.txce{
    text-align:center;
}

.txmini{
    font-size:8px;
    color:#333333;

}

.txmini,  x:-moz-any-link {
    font-size:10px;
    color:#333333;

}

.tx6{font-size:6px;
      font-size:0.6rem;}
.tx7{font-size:7px;
      font-size:0.7rem !important;}


.tx8{font-size:8px;
      font-size:0.8rem;}
.tx9{font-size:9px;
      font-size:0.9rem;}

.tx10{font-size:10px;
      font-size:1.0rem;}

.tx11{font-size:11px;
      font-size:1.1rem;}

.tx12{font-size:12px;
      font-size:1.2rem;}
.tx13{font-size:13px;
      font-size:1.3rem;}
.tx14{font-size:14px;
      font-size:1.4rem;}
.tx15{font-size:15px;
      font-size:1.5rem;}
.tx16{font-size:16px;
      font-size:1.6rem}
.tx17{font-size:17px;
      font-size:1.7rem}
.tx18{font-size:18px;
      font-size:1.8rem;}
.tx20{font-size:20px;
      font-size:2.0rem;}
.tx22{font-size:22px;
      font-size:2.2rem;}

.tx24{font-size:24px;
      font-size:2.4rem;}
.tx28{font-size:28px;
      font-size:2.8rem;}
.tx30{font-size:30px;
      font-size:3.0rem;}

.tx32{font-size:32px;
      font-size:3.2rem;}


.ls1{letter-spacing:1.2px}
.ls2{letter-spacing:1.4px}
.ls3{letter-spacing:1.6px}
.ls4{letter-spacing:1.8px}


.lh06{line-height:0.6em}
.lh08{line-height:0.8em}
.lh10{line-height:1.0em}
.lh1{line-height:1.2em}
.lh2{line-height:1.4em}
.lh13{line-height:1.3em;}
.lh3{line-height:1.6em}
.lh4{line-height:1.8em}
.lh5{line-height:2.0em}
.lh6{line-height:2.2em}
.lh7{line-height:2.4em}





.pdt5{padding-top:5px;}
.pdt10{padding-top:10px;}
.pdt15{padding-top:15px;}
.pdt20{padding-top:20px;}
.pdt30{padding-top:30px;}
.pdt40{padding-top:40px;}

.pdb5{padding-bottom:5px;}
.pdb10{padding-bottom:10px;}
.pdb15{padding-bottom:15px;}
.pdb20{padding-bottom:20px;}
.pdb30{padding-bottom:30px;}
.pdb40{padding-bottom:40px;}

.pdtb5{padding:5px 0 5px 0;}
.pdtb10{padding:10px 0 10px 0;}
.pdtb15{padding:15px 0 15px 0;}
.pdtb20{padding:20px 0 20px 0;}
.pdtb25{padding:25px 0 25px 0;}
.pdtb30{padding:30px 0 30px 0;}
.pdtb35{padding:35px 0 35px 0;}
.pdtb40{padding:40px 0 40px 0;}


.pdr5{padding:0 0 0 10px;}

.blm{vertical-align:middle;}

.bold{font-weight:bold;}

.red{color:#e54e49;}

.tleft{text-align:left;}
.tright{text-align:right;}

.pdl5{padding-left:5px;}
.pdl10{padding-left:10px;}
.pdl15{padding-left:15px;}
.pdl20{padding-left:20px;}
.pdl25{padding-left:25px;}

.pdl30{padding-left:30px;}
.pdl40{padding-left:40px;}



/* page-top
---------------------------------------------------------------------------- */
#page-top {
    position: fixed;
    bottom: 0px;
    right:0px;
    z-index: 800;
    }

#page-top a {
    display: block;
    background: url(../img/pagetop01.png) no-repeat;
    background-size:55px 55px;
    width: 55px;
    height: 55px;
    }


/*
#page-top a:hover {
    background: url(../img/pagetop02.png) no-repeat;
    height: 120px;
    }
*/