@charset "utf-8";
/* CSS Document */


/*===================== 　メインレイアウト　 ===================　*/

/* --- body -------------------------------------------- */
body{
    width:100%;
    min-width: 960px;
    height:auto;
    font-family: Verdana , "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size:14px;
    color:#333;
}
h1,h2,h3,h4,.fonttype01{
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana , "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


.logo{
    text-align:center;
}



.container{
    padding-top:80px;
    width:100%;
    margin-bottom:80px;
}
.wrapper{
    width:960px;
    margin:0 auto;
}

.contents{
    margin-bottom:70px;
}

#works{
    margin-top:25px;
    padding-top:85px;
}

/* --- header -------------------------------------------*/
header{
    position:relative;
    width:100%;


}
.header{
    position:relative;
    background:#fff;

    /*box-shadow: 0px 7px 5px -5px rgba(0,0,0,0.3);    */
}
.homeposition{
    top:65px !important;
}
.moveposition{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
}
.topheader{
    padding:15px 0 1px 0;
    background:#fff;
    position:relative;
    z-index:5000;
    width:100%;

}
.moveArea{
    position:absolute;

    top:65px;
    left:0;
    z-index:4000;
    background:#f00;
    width:100%;

}
nav.navi_area{
        padding-top:20px;
        background:#fff;

}

li.site-ht{
    margin-top:0px !important;
}

header ul.header_nav{
    width:960px;
    margin:0 auto;
}
    header .header_nav>li{
        float:left;
        z-index:2000;
    }
        header .borderbox{
            border-left:1px dotted #bdbab0;

        }

        header .borderbox a{
            display:block;
            height:100%;
            width:100%;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
            padding:12px 40px;
        }
        header .borderbox a:hover{
            background:url(../images/bg-stripe1.png);
        }
        header .borderoff{
            border:0 !important;
        }

    .down{
        height:100%;
        padding:0 0 15px 0;
    }

    /* === サブメニュー ====================================== */
        header .tab{
            background:#4d4c49;
            position:absolute;
            top:20px;
            left:0;
            padding:20px 0 20px;
            width:100%;
            opacity:0;
            z-index:-1;
            box-shadow: 0px 7px 5px -5px rgba(0,0,0,0.3);
        }
            .submenuList .submenuBox{
                float:left;
                font-size:14px;
                padding: 0 8px;
                border-right:1px solid #363532;
                box-shadow:1px 0 0 #5f5e5b;
            }.submenuList li:first-child.submenuBox{ /* 最左ボーダー*/
                border-left:1px solid #5f5e5b;
                box-shadow:1px 0 0 #5f5e5b,-1px 0 0 #363532;
            }
                .submenuList .submenuBox ul{
                    display:table-cell;
                    vertical-align:middle;
                }
                    .submenuList .submenuBox li{
                        position: relative;
                        line-height:150%;
                        margin-top: 3px;
                        width:100%;
                    }
                    .submenuList .submenuBox li:first-child{
                        margin-top: 0;
                    }
                    .submenuList .submenuBox .arrow-w{
/*                        padding-left: 11px;
                        margin-left: .5em;
*/                        margin-top: 0;

                    }

                    .submenuList .submenuBox .arrow-w + li{
                        margin-top: 6px;
                    }
                    .submenuList .submenuBox .arrow-w:before{
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                        .submenuList .submenuBox li a{
                            display: block;
                        }
                        .submenuList .submenuBox li a:hover{
                            display: block;
                            background:#333;
                            color:#FFF;
                        }
                    .submenuBox span.icon{
                        display:block;
                        height:100%;
                        font-size:50px;
                        padding:30px 0;
                        margin-right:16px;
                        color:#bcdb34;
                        text-align: center;
                    }
                    .submenuBox span.icon-game:after{
                        content:"Consumer";
                        font-size:11px;
                        font-family:"ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, sans-serif;
                        display:block;
                        text-align:center;
                        /*margin-left:-5px;*/
                    }
                    .submenuBox span.icon-social:after{
                        content:"Mobile";
                        font-size:11px;
                        font-family:"ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, sans-serif;
                        display:block;
                        text-align:center;
                        margin-top:5px;
                    }
                    .submenuBox span.icon-web:after{
                        content:"Web";
                        font-size:11px;
                        font-family:"ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, sans-serif;
                        display:block;
                        text-align:center;
                        margin-top:5px;
                    }
                    .submenuList .submenuBox div{
                      height: 90px;
                      display:table;
                    }

                    .submenuBox ul.g-over li{
                        width:210px;
                    }
                    .submenuBox ul.g-over a{
                        width:100%;
                        display:block;
                    }

                        .iconBox{
                            position:relative;
                        }
                        .submenuList span.jobname{
                            font-size:11px;
                            display:block;
                            width:70px;
                            text-align:center;
                            color:#fff;
                        }



/* === コンテンツ内メニュー ========================================================*/
/* 部門について（サブナビゲーション） */
.inner-navi{
    position:relative;
    margin-bottom:20px;
}

.inner-navi ul{
    width: 100%;
    clear: both;
    padding:0 0px 0 15px;;
    margin:30px 0px 50px 0px;
    border-left:solid 1px #bcdb34;
    overflow:hidden;
}

    .inner-navi ul li{
        float: left;
        margin-right: 15px;
        line-height:40px;
        text-align:center;
    }
    .inner-navi ul li.active{
        background: #bcdb34;
        margin-left: 0px;
        padding:0px 10px;
    }
    .inner-navi ul li a{
        display:block;
        height:100%;
        padding:0px 10px;
        background: #fff;
        text-align:center;

    }
    /*　リンクカラー  */
    .inner-navi ul li a:link,.inner-navi ul li a:visited
    ,.inner-navi ul li a:active {
        color:#333;
        text-decoration:none;
    }
    .inner-navi ul li a:hover {
        text-decoration:none;
        color:#fff;
        background: #bcdb34;

    }



/* === footer ===================================================*/
.visibleArea{
    height:680px;
    width:100%;
    overflow:hidden;
    position:relative;
}
.f_moveArea{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    min-width: 960px;
    display:none;
}
footer.footer{
    width:100%;
    position:relative;
    margin-top:30px;

}

/* トップへ戻る */
div.gotopBox{
    position:relative;
    cursor:pointer;
}
div.gotop{
    position:absolute;
    top:-35px;
    right:0;
    display:inline-block;
    width:40px;
    height:45px;
    padding-top:10px;
    text-align:center;
    background:#232323;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index:1;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2);

    -webkit-transition: background-color .2s ease 0s;
     transition: background-color .2s ease 0s;
}
div.gotop:hover{
    background:#bcdb34;
}

/* 言語 */
div.langSel{
  position: relative;
}
div.langSel div.langPos{
  position: absolute;
  top: -35px;
  right: 80px;
  color: #333;
  z-index: 1;
  display: inline-block;
}
div.langSel div.langPos a{
  padding: 5px;
  display: inline-block;
}
div.langSel div.langPos a:hover{
  background-color: #a8cc89;
  border-radius: 5px;
  color : #fff;
}
div.langSel .selected{
  padding: 5px;
  display: inline-block;
  background-color: #7bac51;
  border-radius: 5px;
  color : #fff;
}

/* パンクズ*/

.footer .pankuzu{
    padding:7px 0;
    box-shadow:inset 0px -7px 5px -5px rgba(0,0,0,0.3);
    position:relative;
    z-index:0;
    font-size:12px;
}
    ol#topicPath {
    padding: 0;
    font-size: 100%;
    list-style: none;
}

ol.topicPath li {
    float: left;
    color: #000;
    padding-right: 7px;
    padding-left: 10px;
    background: url(../images/pan-allow.gif) no-repeat 0 50%;

}
ol.topicPath li.home{
    background:none;
    padding-left:0;re
}
.icon-home{
    color: #666;
    padding-right:3px;
}

ol.topicPath li a:link,
ol.topicPath li a:visited {
    color: #666666;
    text-decoration: none;
}

ol.topicPath li a:hover,
ol.topicPath li a:active {
    color: #aaa;
    text-decoration: none;
}

ol.topicPath li em {
    font-style: normal;
    font-weight: bold;
}

/* peakboxバナー */
footer .peakArea{
    padding:15px 0;

}
.peakAreaBg{
    background:url(../images/bg-stripe1.png);
    position:relative;
    z-index:2;

}
footer .peaklogo{
    width:80%;
    float:left;
    overflow:hidden;
}
footer .peaklogo img{
    float:left;
    margin-right:15px;
}
footer .peaklogo p{
    margin-top:6px;
}
footer .bannerlist{
    width:20%;
        float:right;
        text-align:right;
}

footer .peakArea li{
    display:inline-block;
    margin-left:20px;
}

footer .peakArea li a{
    display: block;

}

.footer_menu{
    width:960px;
}
footer .socialbtn{
    position:relative;
}
footer .topic{
    position:absolute;
    top:-30px;
    left:-30px;
    padding:3px;
    width:80px;
    text-align:center;
    background:url(../images/bg-stripe1.png);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow:1px 1px 1px #666;

}
/* menulist */
.menulist-in{
    font-size:12px;
}

/* リンクカラー変更速度 */
.f_naviblock h4>a,.menulist-in li>a{
    -webkit-transition: color .2s ease 0s;
      transition: color .2s ease 0s;

}
/*　リンクカラー  */
.f_naviblock h4 a:link,.f_naviblock h4 a:visited
,f_naviblock h4 a:active {
    color:#333;
    text-decoration:none;
}
.f_naviblock h4 a:hover {
    text-decoration:none;
    color:#fff;

}

/* リンクカラー小ページ */
.menulist-in li>a:link,.menulist-in li>a:visited
,.menulist-in li>a:active {
    color:#3f3f3f;
    text-decoration:none;
}
.menulist-in li>a:hover {
    color:#fff;
    text-decoration:none;
}

/* fmenu_area */

#fmenu_area{
    padding: 0px 0px 0px;
    border-top: solid 1px #476400;
    background:#d5d2ca;
    overflow:hidden;
    height:450px;
    top:118px;
    width:100%;


}
#footer_menu{
    display: block;
    width: 960px;
    height: auto;
    margin: 10px auto;
    font-size: 1em;
}
#footer_menu:after{
    display: block;
    content: "";
    clear: both;
}

.f_naviblock{
    float:left;
    border-right:1px solid #b1ada4;
    box-shadow:1px 0 0 #e6e1d3;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:25%;
    height:390px;
    padding:0 6px;
}.f_naviblock:first-child{ /* 最左ボーダー*/
    border-left:1px solid #e6e1d3;
    box-shadow:1px 0 0 #e6e1d3,-1px 0 0 #b1ada4;
}

.f_naviblock h4{
    background:#9c9991;
    padding:5px;
    //text-align:center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width:215px;
    margin:30px 0 10px;
    font-size:14px;
    text-align:center;

}
.f_naviblock .menulist{
    margin-left:1em;
}
h5.f-category{
    margin-top:10px;
}

.menulist li{
    line-height:135%;
}
.f_naviblock section{
    height:71px;

}
.indext li{
    margin-left:1em;
}
.menulist-in li{
    line-height:160% !important;
}


/* address */
.addressBg{
    background:#4d4c49;
}
footer address{
    font-size: 0.8em;
    font-style: normal;
    padding: 20px 0px 30px 0px;
    background: url(../images/footer_bg.png) no-repeat right 18px;
    line-height: 1.3em;
    color:#fff;
}
footer #copyright{ margin: 8px 0px 0px 0px;}

#hoverArea{
    width:100%;
}



/*===================== 　共通タグ設定　 ===================　*/

/* 大見出し*/
.headlineArea{
    height:83px;
}

.headlineContents{
    position:relative;
}
.headlineArea h2{
    padding:24px 10px;
    font-size:28px;
    color:#fff;
}
.headlineArea.game{
        background:#ff9c00;
}
.headlineArea.social{
    background:#00a2ff;
}
.headlineArea.web{
    background:#ed557d;
}
.headlineArea.recruit,.headlineArea.company,.headlineArea.privacy-policy{
    background:#87d236;
}
.headlineArea.config{
    background: #4d4c49;
}


/*　部署別カラー　*/
.g-color{
    color:    #ff9c00;
}
.s-color{
    color:    #00a2ff;
}
.w-color{
    color:    #ed557d;
}


/*----------------- 　リンク　 ------------------　*/

/*　リンクカラー  */
a:link {
    color:#333;
    text-decoration:none;
}
a:visited {
    color:#333;
    text-decoration:none;
}
a:hover {
    color:#aaa;
    text-decoration:none;
}
a:active {
    color:#333;
}
/*-----------------------------------　*/


img {
    //max-width:100%;
}

p{
    line-height:150%;
}





/*===================== 　共通スタイル設定　 ===================　*/
/* リンクカラー変更速度 */
.smoothColor{
    -webkit-transition: background .3s ease 0s;
    transition: background .3s ease 0s;
}
/*　リンクカラー　設定  */
a.black:link {
    color:#333;
    text-decoration:none;
}

a.black:hover {
    color:#aaa;
}

a.linkwhite2{
    padding-left:13px;
}

a.linkwhite:link,a.linkwhite:visited,a.linkwhite:active {
    color:#fff;
    text-decoration:none;
}

a.linkwhite:hover {
    color:#aaa;
}

.linkcolor0 a:link,.linkcolor1 a:visited,.linkcolor1 a:active{
    color:#333;
}
.linkcolor0 a:hover{
    color:#333;
}
a.green:link,a.green:visited,a.green:active {
     color:#81b258 !important;
    text-decoration:none !important;
}a.green:hover{
    color:#99cc66 !important;
}


/* font */
.text10 { font-size:77%; }
.text11 { font-size:85%; }
.text12 { font-size:93%; }
.text13 { font-size:100%; }
.text14 { font-size:108%; }
.text15 { font-size:116%; }
.text16 { font-size:123.1%; }
.text17 { font-size:131%; }
.text18 { font-size:138.5%; }
.text19 { font-size:146.5%; }
.text20 { font-size:153.9%; }
.text21 { font-size:161.6%; }
.text22 { font-size:167%; }
.text23 { font-size:174%; }
.text24 { font-size:182%; }
.text25 { font-size:189%; }
.text26 { font-size:197%; }
.text34 { font-size:261.5%; }

.header_nav>li,.menulist>li{
    font-family:"ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, sans-serif;
}


/*　レイアウト　*/
.t-center{
    text-align:center;
}
.m-center{
    margin:0 auto;
}

.split1of3{
    width: 33.33%;
    float:left;
}



/* margin */
.mr0{
    margin-right:0px !important;
}


/*----  ボタン  ---------------*/
.link-btn1 a{
    display:block;
    padding:8px 15px;
    background:#292929;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow:1px 1px 3px rgba(0,0,0, .3);
    -webkit-transition: background-color .3s ease 0s,color .3s ease 0s;
    transition: background-color .3s ease 0s,color .3s ease 0s;
    color:#fff;
}.link-btn1 a:hover{
    background:#bcdb34 !important;
    color:#000;
}
.link-btn2 a{
    display:block;
    padding:8px 15px;
    background:#999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow:1px 1px 3px rgba(0,0,0, .3);
    -webkit-transition: background-color .3s ease 0s,color .3s ease 0s;
    transition: background-color .3s ease 0s,color .3s ease 0s;
    color:#fff;
}.link-btn2 a:hover{
    background:#bcdb34 !important;
    color:#000;
}
.link-btn3 a{
    display:block;
    padding:8px 15px;
    background:#292929;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow:1px 1px 3px rgba(0,0,0, .3);
    -webkit-transition: background-color .3s ease 0s,color .3s ease 0s;
    transition: background-color .3s ease 0s,color .3s ease 0s;
    color:#fff;
}.link-btn3 a:hover{
    background:#bcdb34 !important;
    color:#000;
}
.link-btn4 a{
    display:block;
    padding:8px 15px;
    background:#f2f2f2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow:1px 1px 3px rgba(0,0,0, .3);
    -webkit-transition: background-color .3s ease 0s,color .3s ease 0s;
    transition: background-color .3s ease 0s,color .3s ease 0s;
    color:#333;
    line-height:60%;
}
.link-btn4 a:hover{
    background:#63beed !important;
    color:#fff !important;
    line-height:60%;
}

.hoverBtn{
    transition: all 0.3s;
    opacity:1;
}
.hoverBtn:hover{
    opacity:0.7;
}

/* 矢印*/
.arrow-f{
    margin-bottom:3px;
}
.arrow-f:before{
    content:url(../images/arrow-f.png);
    margin-right:5px;
}
.arrow-w:before{
    content:url(../images/arrow-w.png);
    margin-right:5px;
}

.urgent{
  color: #EA3232;
}
