/* CSS Document */


/* 基本構造 */

body{
    -webkit-animation: bodyload 1s linear both;
    animation: bodyload 1s linear both;
    font-family: 'Hiragino Kaku Gothic ProN',Meiryo,'MS PGothic',Sans-serif;
}
@-webkit-keyframes bodyload {0%{opacity:0;}100%{opacity:1;}}
@keyframes bodyload {0%{opacity:0;}100%{opacity:1;}}
header,
nav.header,
nav.pan,
section.maincontents,
nav.footer section,
footer address{width:1024px;margin:0 auto;}
a{cursor:pointer;}
header{
    width:100%;height:4.8em;
    position:fixed;top:0;left:0;z-index:10;
    background:#FFF;
}
header h1{
    display:block;height:100%;min-width:100px;width:5%;
    position:absolute;top:30%;
    background-repeat:no-repeat;
    background-image:url(../images/logo.jpg);
    background-size:contain;
    background-position:0 0;
    text-indent:-9999px;white-space:nowrap;
}
header h1 a{display:block;width:100px;height:64px;}
#sp-icon{display:none;}
#footer_menu{display:block;font-size:12px;line-height:2.0em;}
#footer_menu section{display:block;width:100%;max-width:1024px;margin:auto;cursor:pointer;}
#footer_menu section ul{display:inline-block;width:158px;vertical-align:top;cursor:pointer;}
#footer_menu section ul .category-title{font-size:14px;padding-top:15px;}
footer{text-align:center;padding-top:15px;font-size:10px;background-color:#060;color:#fff;}
#footer_menu a:hover{color:#02ff2c;cursor:pointer;}
#mainmenu {
    display:block;margin:auto;width:1024px;padding-top:3.4em;position:relative;font-size:16px;height:4em;margin-left:auto;margin-right:auto;
    text-align:center;font-weight:bold;color:#060;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#mainmenu p{display:inline-block;position:absolute;left:16%;top:24%;font-size:0.5em;color: #4b4b4b;font-weight: normal;}
#main{display:block;margin-left:117px;position:relative;text-align:left;white-space:nowrap;letter-spacing:-0.4em;}
.back{display: inline-block;background-color: #4b4b4b;color: #fff;padding: 5px 10px;margin: 30px 10px 20px 0;border-radius: 1px;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;/*transition: all .3s ease;*/cursor:pointer;}
.back:hover{background-color:#7d7c7f;}
.contents {font-size:14px;line-height:2.0em;color:#4b4b4b;}
.contents h3{font-size:18px;font-weight:bold;border-style:solid;border-color:#060;border-width:0 0 0 8px;padding:0 15px;margin:50px 0 30px 0;}
.title-area {position:absolute;bottom:0;background-color:#000;opacity:0.7;filter:alpha(opacity=0.7);width:100%;}

.sub{opacity:0.01;}
.sub.on{opacity:1;}    
.service-internet .pickup{
    display: inline-block;
    color: #ff0000;
    font-weight: 700;
    padding-right: 4px;
}

@media only screen and (min-width: 768px){
    .h-scroll{border-bottom:solid 2px #060;}
    .main{display:inline-block;width:144px;height:38px;text-indent:-9999px;position:relative;background-image:url(../images/menu/header_menu.jpg);}
    .main:hover{display:inline-block;width:144px;height:38px;text-indent:-9999px;background-image:url(../images/menu/header_menu_over.jpg);position:relative;}
    .block{display:inline-block;}
    .block:hover > .main{background-image:url(../images/menu/header_menu_over.jpg);}
    #main .main a{display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:2;}
    #main div.home   {background-position: 0 0;display:inline-block;}
    #main div.company{background-position: -144px 0;display:inline-block;}
    #main div.service{background-position: -288px 0;display:inline-block;}
    #main div.news   {background-position: -432px 0;display:inline-block;}
    #main div.recruit{background-position: -576px 0;display:inline-block;}
    #main div.contact{background-position: -720px 0;display:inline-block;}
    #mainmenu .selecter{display:block;width:144px;height:38px;position:absolute;top:0;left:0;border-bottom:solid 3px #060;opacity:0;filter:alpha(opacity=0.01);transition:all 1s;-webkit-transition:all 1s;z-index:1;}
    #mainmenu div:hover .selecter{opacity:1;filter:alpha(opacity=100);}
    .sub li{display: inline-block;vertical-align: top;height: 3em;line-height: 3em;overflow: hidden;padding:0 10px;font-size:16px;margin:0 20px;width:150px;cursor:pointer;}
    .sub li:hover{color:#7ff780;cursor:pointer;}
    .sub li a{display:inline-block;width:100%;}
    .sub.on{transform:scaleY(1);}
    #mainmenu .Security-logo a.isms{display:inline-block;width:90px;height:45px;position:absolute;top:15%;right:4%;background-repeat:no-repeat;background-image:url(../images/isms.jpg?20190527);text-indent:-9999px;white-space:nowrap;}
    #mainmenu .Security-logo span.s-action{display:inline-block;width:45px;height:45px;position:absolute;top:15%;right:0;background-repeat:no-repeat;background-image:url(../images/s-action.jpg);text-indent:-9999px;white-space:nowrap;}
    /* scrolltotop */
    #scrolltotop{display:none;}
    #scrolltotop.on{display:block;-webkit-animation: bodyload 1s linear both;animation: bodyload 1s linear both;position:fixed;bottom:1em;right:1em;cursor:pointer;z-index:2;width:50px;height:50px;background-color:#060;border-radius:4px;}
    #scrolltotop.on:before{content: "";display: block;position: absolute;top: 34%;left: 34%;background-image:url(../images/scrollicon.png);width:16px;height:10px;}
    .sub{background-color:#060;display:block;position: absolute;top:2.6em;left: 0;transform-origin: 0 0;transform: scaleY(0.01);text-align: center;z-index: 1;letter-spacing:0;color:#fff;margin: 0 -500%;padding: 0 500%;width: 100%;font-weight:normal;}
    .sub-bk{background-color: #060;color:#fff;width:100%;height:2em;position:absolute;top:96px;opacity: 0.01;/*transition: all .5s;*/transform-origin: 0 0;transform: scaleY(0.01);filter:alpha(opacity=0.01);text-align: center;z-index: 1;color: #fff;}
    /* 共通コンテンツトップ */
    .maincontents{padding-top:4.8em;}
    .container{position:relative;}
    .contents-title{width:1024px;margin:0 auto;}
    .contents{width:1024px;margin:0 auto;padding:40px 0;}
    .title-area h2{color:#fff;width:1024px;margin:0 auto;padding:5px 0;}
    .top-banner-center{
        display:block;
        margin: 0 auto;
        text-align: center;
        margin-top: 4rem;
    }
    #others-service{
        padding-top:90px;
        margin-top:-90px;
        z-index: 1;
    }
    .service-internet{
        z-index: 2;
    }
}
/* スマホ */
@media only screen and (max-width: 768px){
    header{width:100%;height:3.6em;position:absolute;top:0;left:0;z-index:10;background:#FFF;border-top: solid 4px #060;}	
    header h1{display:block;position:absolute;top:3px;left:8px;}
    #sp-icon{display:block;background:url(../images/menu/sp-menu-icon.png)no-repeat;background-position:50% 0;width:68px;height:68px;position:absolute;top:4px;right:260px;z-index:10;cursor: pointer;margin:0;padding:0;}
    #mainmenu .Security-logo{display:inline-block;position:absolute;top:10px;right:70px;}
    #mainmenu .Security-logo a.isms{display:inline-block;width:90px;height:45px;background-repeat:no-repeat;background-image:url(../images/isms.jpg?20170411);text-indent:-9999px;white-space:nowrap;}
    #mainmenu .Security-logo span.s-action{display:inline-block;width:45px;height:45px;background-repeat:no-repeat;background-image:url(../images/s-action.jpg);text-indent:-9999px;white-space:nowrap;}
    header h1{display:block;}
    #mainmenu{display:block;width:100%;padding-top:4.6em;}
    #mainmenu p{display:none;}
    .maincontents{padding-top:3.4em;}
    .contents-title{width:100%;margin:0 auto;}
    .contents{width:100%;margin:0 auto;padding:15px 5px;}
    .contents p{font-size:14px;line-height:1.8em;color:#4b4b4b;}
    .title-area h2{font-weight:bold;color:#fff;width:100%;text-align:center;}
    .sub.on{opacity:1;transform:scaleY(1);filter:alpha(opacity=0.01);}
    #mainmenu #main{display:block;padding:10px;position:absolute;top:0;right:0;background-color:#f1f0f6;letter-spacing: 0em;width:260px;height:100%;overflow-y: scroll;margin:0;z-index:12;}
    .sp-action01{-moz-transform: translateX(260px);-webkit-transform: translateX(260px);-o-transform: translateX(260px);-ms-transform: translateX(260px);transition: all .2s;}
    .sp-action02{-moz-transform: translateX(0px);-webkit-transform: translateX(0px);-o-transform: translateX(0px);-ms-transform: translateX(0px);transition: all .2s;}
    #menu-slide{display:block;position:fixed;top:0;right:0;letter-spacing: 0em;z-index:10;width:260px;height:100%;margin-right:auto;}
    .main{display:block;width:100%;height:38px;color:#4b4b4b;}
    #main .main a{display:block;width:100%;height:100%;z-index:2;}
    #main li{border-radius:4px;text-align:center;height:auto;display:block;padding:4px;line-height: 2.6em;}
    #main div {border-radius:4px;text-align:center;height:auto;display:block;line-height: 2.6em;}
    #main div li{border-radius:4px;text-align:center;height:auto;display:block;padding:4px;line-height: 2.6em;}
    #main div.home   {margin:8px 0;padding:4px;background-color:#fff;border:solid 1px #c8c5d8;}
    #main div.company{margin:8px 0;padding:4px;background-color:#fff;border:solid 1px #c8c5d8;}
    #main div.service{margin:8px 0;padding:4px;background-color:#fff;border:solid 1px #c8c5d8;}
    #main div.news   {margin:8px 0;padding:4px;background-color:#fff;border:solid 1px #c8c5d8;}
    #main div.recruit{margin:8px 0;padding:4px;background-color:#fff;border:solid 1px #c8c5d8;}
    #main div.contact{margin:8px 0;padding:4px;background-color:#fff;border:solid 1px #c8c5d8;}
    #main div a{display:block;}
    #mainmenu .selecter{display:none;}
    #mainmenu div:hover .selecter{opacity:1;}
    #scrolltotop{display:none;}
    #scrolltotop.on{display:block;-webkit-animation: bodyload 1s linear both;animation: bodyload 1s linear both;position:fixed;bottom:1em;right:1em;cursor:pointer;z-index:9;width:36px;height:36px;background-color:#060;border-radius:4px;}
    #scrolltotop.on:before{content: "";display: block;position: absolute;top: 28%;left: 28%;background-image:url(../images/scrollicon.png);width:16px;height:10px;}
    .sub li{float:left;width:100%;vertical-align: top;font-size:14px;background-color:#060;margin:6px 0;}
    .sub-bk{background-color: #060;color: #fff;width:100%;height:2em;position:absolute;top:96px;opacity: 0.01;transition: all .5s;transform-origin: 0 0;transform: scaleY(0.01);text-align: center;z-index: 1;color: #fff;}
    ul.sub{display:block;color:#fff;top:2.6em;left: 0;transition: all .5s;transform-origin: 0 0;text-align: center;z-index: 1;letter-spacing:0;width: 100%;font-weight:normal;}
    ul.sub:after{content:"";clear:both;display:block;color:#fff;top:2.6em;left: 0;transition: all .5s;transform-origin: 0 0;text-align: center;z-index: 1;letter-spacing:0;width: 100%;font-weight:normal;}
    #footer_menu{display:none;font-size:12px;line-height:2.0em;}
    #sp-back{position: fixed;top: 0;left: 0;z-index: 9999;display:none;width: 100%;height: 100%;background-color: #000;opacity: 0.5;z-index:9;}
    .top-banner-center{
        display:block;
        margin: 0 auto;
        text-align: center;
        margin-top: 4rem;
        width: 80%;
    }
    .top-banner-center a,.top-banner-center a img {
        display:block;
        margin: 0 auto;
        text-align: center;
        margin-top: 4rem;
        width: 100%;
        max-width: 500px;
    }
    #others-service{
        padding-top:10px;
        margin-top:-10px;
        z-index: 1;
    }
    .service-internet{
        z-index: 2;
    }
   
}
/* 印刷設定 */
@media only print{
    header{position:relative;}
    #mainmenu{position:relative;}
}