/****** 全ページ共通 ******/
* {
    margin: 0;
    padding: 0;
}
root {
    display: block;
}
a {
    color: #000000;
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}
body {
    font-size: 15px;
    line-height: 170%;
    font-family: "メイリオ","ＭＳ Ｐゴシック", Sans-serif;
    letter-spacing: 0.05em;
    background-color: #FFFFFF;
}
html{
    height: 100%;
}
img{
    border: none;
    vertical-align: bottom;
}
div.left,div.right{
    float: left;
}
.clear{
    clear:both;
}
.clear hr{
    display:none;
}

/**************   PC   **************/
/****** エントリーエリア ******/
div#entryarea{
    padding: 0;
}
div#entryarea_in{
    max-width: 1000px;
    margin: 0 auto;
}
div#entryarea_in div#toplist{
    width: 30%;
    float: right;
}
div#toplist ul{
    margin: 0;
    padding: 0;
}
div#toplist ul li{
    float: left;
    width: 50%;
    line-height: 300%;
    list-style-type: none;
    font-size: 1em;
    text-align: center;
}
div#toplist ul li#nEntry{
    background-color: #FF3333;
}
div#toplist ul li#cEntry{
    background-color: #5384DC;
}
div#toplist ul li#nEntry:hover{
    background-color: #cc0000;
}
div#toplist ul li#cEntry:hover{
    background-color: #003f8e;
}
div#toplist ul li a{
    display:block;
    color:#FFFFFF;
}


/**************   tablet   **************/
/****** エントリーエリア ******/
@media only screen and (min-width:541px) and (max-width: 768px){
    div#entryarea{
        padding: 0;
    }
    div#entryarea_in{
        max-width: 768px;
    }
    div#entryarea_in div#toplist{
        width: 41%;
    }
    div#toplist ul li{
        list-style-type: none;
        font-size: 13px;
    }
}
/**************   smartphone   **************/
@media only screen and (max-width: 540px){
    /****** エントリーエリア ******/
    div#entryarea_in{
        max-width: 540px;
        margin: 0 auto;
    }
    div#entryarea_in div#toplist{
        width: 100%;
        float: none;
    }
    div#toplist ul li{
        border-right: none;
        line-height: 250%;
        font-size: 14px;
    }
}


/**************   PC   **************/
/****** ヘッダ ******/

div#main-nav-wide {
    display: inherit;
}
div#main-nav-thin {
    display: none;
}
div#mobile-bar {
    display: none;
}
div#header{
    border-bottom: 4px solid #009999;
}
div#header_in{
    max-width: 1000px;
    margin: 0 auto 1%;
}
div#header_in #leftpane{
    float: left;
    width: 30%;
}
div#header_in #leftpane #logo{
    width: 85%;
}
div#header_in #leftpane #logo img{
    width: 100%;
    height: auto;
}
div#header_in #rightpane{
    float: right;
    width: 69%;
    border-left: 1px dotted #737373;
    margin-top: 3.4%;
}
div#header_in #rightpane div#main-nav-wide{
    width: 100%;
}
div#main-nav-wide ul, div#main-nav-thin ul {
    margin: 0;
    padding: 0;
}
div#main-nav-wide ul li, div#main-nav-thin ul li{
    float:left;
    width: 19.80%;
    line-height: 300%;
    display: block;
    position: relative;
    text-align: center;
    list-style-type: none;
    border-right: 1px dotted #737373;
    border-bottom: 4px solid #FFFFFF;
}
div#main-nav-wide ul li:hover, div#main-nav-thin ul li:hover {
    border-bottom: 4px solid #08233E;
}
div#main-nav-wide ul li a, div#main-nav-thin ul li a{
    display:block;
    color:#000000;
}
div#main-nav-wide ul li a:hover, div#main-nav-thin ul li a:hover{
    color: #08233E;
}


/**************   tablet   **************/
@media only screen and (min-width:541px) and (max-width: 768px){
    /****** メニュー ******/
    div#main-nav-wide {
        display: inherit;
    }
    div#main-nav-thin {
        display: none;
    }
    div#mobile-bar {
        display: none;
    }
    div#header_in{
        max-width: 768px;
    }
    div#header_in #leftpane{
        margin-left: 0.2%;
    }
    div#header_in #leftpane #logo{
        margin-top: 0.5%;
    }
    div#header_in #rightpane{
        margin-top: 3%;
    }
    div#header_in #rightpane div#main-nav-wide ul li{
        width: 19.5%;
        font-size: 13px;
        line-height: 280%;
    }
}
/**************   smartphone   **************/
@media only screen and (max-width: 540px){
    /****** メニュー ******/
    div#main-nav-wide {
        display: none;
    }
    div#main-nav-thin {
        display: inherit;
    }
    div#mobile-bar {
        display: inherit;
    }
    div#header{
        border-bottom: 2px solid #009999;
    }
    div#header_in{
        width: 94%;
        margin: 0 auto 3%;
    }
    div#header_in #leftpane{
        margin-left: 0;
        padding-left: 0;
        width: 60%;
    }
    div#header_in #leftpane #logo{
        margin-top: 6%;

    }
    div#header_in #leftpane #logo img{
        width: 110%;
        height: auto;
    }
    div#header_in #rightpane{
        margin-top: 6%;
        width: 15%;
        text-align: center;
        border-left: none;
        background-color: #08233E;
        float: right;
    }
    div#header_in #rightpane img{
        width: 100%;
        height: auto;
    }
}


/**************   PC   **************/
/****** メイン画像 ******/
div#topimage{
    margin-top: 1.25%;
    margin-bottom: 1.25%;
}
div#topimage_in{
    margin: 0 auto;
    max-width: 1000px;
}
div#topimage_in img{
    width: 100%;
    height: auto;
}
/**************   tablet   **************/
@media only screen and (min-width:541px) and (max-width: 768px){
    div#topimage{
        margin-top: 1.5%;
        margin-bottom: 1.5%;
    }
}

/**************   smartphone   **************/
@media only screen and (max-width: 540px){
    /****** メイン画像 ******/
    div#topimage{
        border-bottom: 1px solid #C8C8C8;
        margin-top: 0;
        margin-bottom: 0;
    }
    div#topimage_in{
        width: 94%;
        margin: 3% auto;
    }
}


/**************   PC   **************/
/****** top contents ******/
div#topContents{
    width: 100%;
}
div#work_in,div#message_in,div#company_in,div#recruit_in,div#product_in{
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}
/****** top contents 左 ******/
div#topContents div.left,div#topContents div.left_btm{
    width: 40%;
}
div#topContents div.left h2,div#topContents div.left_btm h2{
    width: 100%;
    font-size: 2.2em;
    margin: 3.5% 0 0 4%;
    font-weight: normal;
    text-indent: 15px;
    line-height: 140%;
    padding-top: 1%;
}
div#topContents div.left a:hover{
    color: #B7B7B7;
}
div#work_in h2{
    border-left: 10px solid #8E57A0;
}
div#message_in h2{
    border-left: 10px solid #E16254;
}
div#company_in h2{
    border-left: 10px solid #144E98;
}
div#recruit_in h2{
    border-left: 10px solid #ED8343;
}
div#product_in h2{
    border-left: 10px solid #79D1B0;
}
/****** top contents 右 ******/
div#topContents div.right{
    width: 60%;
}
div#topContents div.right ul:after{
    clear: both;
}
div#topContents div.right table{
    margin-top: 2.8%;
}
div#topContents div.right table tr td.pic{
    border: 1px solid #333333;
}
div#topContents div.right table tr td.pic img:hover{
    filter: alpha(opacity=70);
    -ms-filter: alpha(opacity=70);
    opacity: 0.7;
}
div#topContents div.right table tr td.name{
    text-align: center;
    padding-top: 1%;
    padding-bottom: 2%;
    font-size: 0.9em;
    line-height: 140%;
}
div#topContents div.right table tr td a:hover{
    color: #B7B7B7;
}

/****** 3カラムtable ******/
div#topContents div.right table.three_clm{
    width: 100%;
}
div#topContents div.right table.three_clm tr td.pic img{
    width: 100%;
    height: auto;
}
div#topContents div.right table.three_clm tr td.space{
    width: 5%;
}
/****** 2カラムtable ******/
div#topContents div.right table.two_clm{
    width: 65%;
}
div#topContents div.right table.two_clm tr td.pic img{
    width: 100%;
    height: auto;
}
div#topContents div.right table.two_clm tr td.space{
    width: 7%;
}

/****** 仕事紹介 ******/
div#topContents div#work{
    border-top: 1px solid #C8C8C8;
    border-bottom: 1px solid #C8C8C8;
    background-color: #F1F0EE;
}
/****** メッセージ ******/
div#topContents div#message{
    background-color: #FFFFFF;
}
/****** 会社情報 ******/
div#topContents div#company{
    border-top: 1px solid #C8C8C8;
    border-bottom: 1px solid #C8C8C8;
    background-color: #F1F0EE;
}
/****** 採用情報 ******/
div#topContents div#recruit{
    background-color: #FFFFFF;
}
/****** 製品情報 ******/
div#topContents div#product{
    display: none;
}
/**************   tablet   **************/
@media only screen and (min-width:541px) and (max-width: 768px){
    /****** top contents ******/
    div#topContents div.left,div#topContents div.left_btm{
        width: 35%;
    }
    div#topContents div.left h2,div#topContents div.left_btm h2{
        width: 100%;
        font-size: 1.8em;
        margin: 5% 0 0 4%;
        font-weight: normal;
        text-indent: 3%;
        line-height: 125%;
        padding-top: 1%;
    }
    div#work_in h2{
        border-left: 9px solid #8E57A0;
    }
    div#message_in h2{
        border-left: 9px solid #E16254;
    }
    div#company_in h2{
        border-left: 9px solid #144E98;
    }
    div#recruit_in h2{
        border-left: 9px solid #ED8343;
    }
    div#product_in h2{
        border-left: 9px solid #79D1B0;
    }
    div#topContents div.right{
        width: 65%;
    }
    div#topContents div.right table.two_clm{
        width: 63.8%;
    }
    div#topContents div.right table.three_clm{
        width: 98%;
    }
    div#topContents div.right table.two_clm tr td.space{
        width: 7.2%;
    }
    div#topContents div.right table tr td.name{
        padding-top: 1%;
        padding-bottom: 2%;
        font-size: 0.7em;
        line-height: 130%;
    }

}
/**************   smartphone   **************/
@media only screen and (max-width: 540px){
    /****** top contents ******/
    div#topContents{
        width: 93%;
        margin: 0 auto 2%;
        padding-top: 2%;
        padding-bottom: 2%;
    }
    div#topContents div#work,div#topContents div#company{
        background-color: #FFFFFF;
    }
    div#topContents div.left{
        width: 90%;
        max-width: 100%;
        margin: 0 auto 1.8%;
        border: 1px solid #BFBFBF;
        padding: 1.6% 5.2%;
    }
    div#topContents div.left a:hover{
        color: #000000;
    }
    div#topContents div.left:hover,div#topContents div.left_btm:hover{
        border: 1px solid #08233E;
    }
    div#topContents div.left_btm{
        width: 90%;
        max-width: 100%;
        margin: 0 auto;
        border: 1px solid #BFBFBF;
        padding: 1.6% 5.2%;
    }
    div#topContents div.left h2,div#topContents div.left_btm h2{
        font-size: 1.3em;
        margin: 0;
        font-weight: normal;
        text-indent: 3%;
        line-height: 150%;
        padding-top: 1.5%;
        background-color: #FFFFFF;
    }
    div#topContents div.left img,div#topContents div.left_btm img{
        margin-top: 0;
    }
    div#topContents div#work{
        border-top: none;
        border-bottom: none;
    }
    div#topContents div#company{
        border-top: none;
        border-bottom: none;
    }
    div#topContents div.right{
        display: none;
    }
    div#topContents div#product{
        display: inline;
    }
}


/**************   PC   **************/
/****** フッター ******/
#footer{
    background-color: #08233E;
    width: 100%;
}
#footerarea{
    padding: 2% 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
#footerarea ul.bottomframe{
    padding: 0;
    margin: 0;
}
#footerarea ul.bottomframe span.index a{
    font-size: 1.2em;
}
#footerarea ul.bottomframe ul{
    width: 100%;
}
#footerarea ul.bottomframe ul.listTop{
    padding-top: 1.2em;
}
#footerarea ul.bottomframe li{
    list-style-type: none;
    font-size: 0.95em;
    line-height: 130%;
    margin-bottom: 0.6em;
}
#footerarea ul.bottomframe li.bottom{
    margin-bottom: 0;
}
#footerarea ul.bottomframe li a{
    color: #FFFFFF;
    text-decoration: underline;
}
#footerarea ul.bottomframe li a:hover{
    color: #B7B7B7;
}
#footerarea ul.bottomframe li#bottominner_work{
    float: left;
    width: 15%;
    padding-left: 2%;
}
#footerarea ul.bottomframe li#bottominner_message{
    float: left;
    width: 22%;
    padding: 0 11% 0 12%;
}
#footerarea ul.bottomframe li#bottominner_company{
    float: left;
    width: 10%;
    padding-right: 11%;
}
#footerarea ul.bottomframe li#bottominner_recruit{
    float: left;
    width: 16%;
}
/**************   tablet   **************/
@media only screen and (min-width:541px) and (max-width: 768px){
    /****** フッター ******/
    #footerarea{
        max-width: 730px;
        padding: 3.2% 0;
    }    
    #footerarea ul.bottomframe{
        width: 100%;
    }
    #footerarea ul.bottomframe span.index a{
        font-size: 1.15em;
    }
    #footerarea ul.bottomframe ul.listTop{
        padding-top: 0.8em;
    }
    #footerarea ul.bottomframe li{
        list-style-type: none;
        font-size: 0.93em;
        line-height: 130%;
        margin-bottom: 0.3em;
    }
    #footerarea ul.bottomframe li#bottominner_work{
        width: 18%;
        padding-left: 2%;
    }
    #footerarea ul.bottomframe li#bottominner_message{
        width: 24%;
        padding: 0 7% 0 6%;
    }
    #footerarea ul.bottomframe li#bottominner_company{
        width: 13%;
        padding-right: 7%;
    }
    #footerarea ul.bottomframe li#bottominner_recruit{
        width: 20%;
    }

}
/**************   smartphone   **************/
@media only screen and (max-width: 540px){
    /****** フッター ******/
    #footer{
        display: none;
    }
}




/**************   PC   **************/
/****** コピーライト ******/
#copylight{
    width: 100%;
    background-color: #FFFFFF;
}
#copylightarea{
    max-width: 1000px;
    margin: 0 auto;
}
#copylightarea div#leftcopylight {
    float: left;
    width: 78%;
    padding-top: 1.3%;
    padding-bottom: 1.2%;
    font-size: 0.95em;
}
#copylightarea div#leftcopylight a{
    text-decoration: underline;
}
#copylightarea div#leftcopylight a:hover{
    color: #B7B7B7; 
}
#copylightarea div#leftcopylight ul{
    width: 100%;
    padding: 0;
    margin: 0;
}
#copylightarea div#leftcopylight ul li{
    list-style-type: none;
    margin: 0 5% 0.1% 0;
    float: left;
}
#copylightarea div#leftcopylight ul li.bottom{
    margin-right: 0;
}
#copylightarea div#leftcopylight p {
    margin: 0;
    padding: 0;
    line-height: 120%;
}
#copylightarea div#rightcopylight {
    float: right;
    width: 20%;
    margin-top: 1.1%;
}
#copylightarea div#rightcopylight div#logocopylight{
    width: 100%;
}
#copylightarea div#rightcopylight div#logocopylight img{
    width: 100%;
    height: auto;
}
/**************   tablet   **************/
/****** コピーライト ******/
@media only screen and (min-width:541px) and (max-width: 768px){
    #copylightarea div#leftcopylight {
        float: left;
        width: 77%;
        padding-top: 1.3%;
        padding-bottom: 1.1%;
        font-size: 0.8em;
    }
    #copylightarea div#leftcopylight ul li{
        list-style-type: none;
        margin: 0 5% 0 0;
        float: left;
    }
    #copylightarea div#rightcopylight {
        width: 23%;
        margin-top: 1.2%;
    }
}
/**************   smartphone   **************/
/****** コピーライト ******/
@media only screen and (max-width: 540px){
    #copylightarea div#leftcopylight{
        float: none;
        width: 100%;
        background-color: #08233E;
    }
    #copylightarea div#leftcopylight div#cl_list{
        width: 92%;
        margin: 2.5% auto 3%;
    }
    #copylightarea div#leftcopylight div#cl_list ul li{
        width: 100%;
        float: none;
        font-size: 15px;
        line-height: 240%;
        padding-top: 1.5%;
        border-bottom: 1px dotted #FFFFFF;
    }
    #copylightarea div#leftcopylight div#cl_list ul li:hover{
        color: #F4F4F2;
    }
    #copylightarea div#leftcopylight div#cl_list ul li a{
        text-decoration: none;
        display: block;
        color: #FFFFFF;
    }
    #copylightarea div#leftcopylight ul li.bottom{
        margin-bottom: 0;
    }
    #copylightarea div#leftcopylight p{
        width: 92%;
        font-size: 14px;
        margin: 2% auto;
        text-align: center;
        color: #FFFFFF;
    }
    #copylightarea div#leftcopylight p a{
        color: #FFFFFF;
    }
    #copylightarea div#rightcopylight{
        display: none;
    }
    span.hid_sp{
        display: none;
    }
}


/**************　コンテンツページ　**************/


/**************   PC   **************/
/****** メイン画像 ******/
#mainimage{
    margin-top: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
    background-color: #C8C8C8;
    border-top: 1px solid #B7B7B7;
    border-bottom: 1px solid #B7B7B7;
}
#img_message{
    background-color: #E16254;
}
#mainimage_in{
    margin: 0 auto;
    max-width: 1000px;
}
#mainimage_in img{
    width: 100%;
    height: auto;
    margin: 0 auto;
}
/**************   smartphone   **************/
@media only screen and (max-width: 540px){
    /****** メイン画像 ******/
    #mainimage{
        padding-top: 15px;
        padding-bottom: 15px;
    }
}


/**************   PC   **************/
/****** パンくずリスト ******/
#breadcrumb{
    padding-top: 0.6%;
    padding-bottom: 0.6%;
    border-bottom: 1px solid #C8C8C8;
}
#breadcrumb_in{
    margin: 0 auto;
    max-width: 1000px;
}
#breadcrumb_in a{
    text-decoration: underline;
}
#breadcrumb_in a:hover{
    color: #B7B7B7;
}
/**************   tablet   **************/
@media only screen and (min-width:541px) and (max-width: 768px){
    /****** パンくずリスト ******/
    #breadcrumb_in{
        font-size: 13px;
        width: 97%;
    }
}
/**************   smartphone   **************/
@media only screen and (max-width: 540px){
    /****** パンくずリスト ******/
    #breadcrumb{
        margin-top: 10px;
        margin-bottom: 10px;
        border-bottom: none;
        padding-top: 0;
        padding-bottom: 0;
    }
    #breadcrumb_in{
        width: 91%;
        font-size: 0.8em;
    }
}


/**************   PC   **************/
/****** コンテンツページ全体 ******/
#maincontents{
    background-color: #F1F0EE;
}
#maincontents_in{
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
}
/**************   tablet   **************/
@media only screen and (min-width:541px) and (max-width: 768px){
    /****** コンテンツページ全体 ******/
    #maincontents_in{
        width: 98.5%;
    }
}
/**************   smartphone   **************/
@media only screen and (max-width: 540px){
    /****** コンテンツページ全体 ******/
    #maincontents{
        border-top: 1px solid #C8C8C8;
        background-color: #F5F5F5;
    }
    #maincontents_in{
        width: 100%;
    }
}


/**************   PC   **************/
/****** ページトップボタン(pc用) ******/
p#page-top {
    position: fixed;
    bottom: 2%;
    right: 1.5%;
}
p#page-top a {
    display: block;
}
#page-top a:hover {
    text-decoration: none;
    filter: alpha(opacity=75);
    -moz-opacity:0.75;
    opacity:0.75;
}
/**************   smartphone   **************/
/****** ページトップボタン(pc用) ******/
@media only screen and (max-width: 540px){
    p#page-top{
        display: none;
    }
}




/**************   PC   **************/
/****** ページトップボタン(スマホ用) ******/
div#ptop_sp{
    display: none;
}
div.ptop_sp{
    display: none;
}
/**************   smartphone   **************/
@media only screen and (max-width: 540px){
    /****** ページトップボタン(スマホ用) ******/
    div.ptop_sp{
        display: inline;
    }
    div.ptop_sp p{
        width: 100%;
        text-align: center;
    }
    div#ptop_sp{
        display: inline;
    }
    div#ptop_sp p{
        width: 100%;
        margin: 0 auto;
        text-align: center;
        font-size: 16px;
        background-color: #26AE90;
        line-height: 300%;
    }
    div#ptop_sp p a{
        color: #FFFFFF;
        display: block;
    }
}

/**************   PC   **************/
/****** メンテナンスﾍページ ******/
#maintanance{
    height: 100%;
    background-color: #eeeeee;
}
div.maintanance-now{
    position: absolute;
    left: 50%;
    top: 30%;
    margin-left: -300px;
    width: 600px;
    border: 2px solid #666;
    padding: 64px 32px;
    box-sizing: border-box;
    background: #fff;
    text-align: center;
}
div.maintanance-now h1{
    font-size: 28px;
    font-weight: bold;
    margin-bottom:30px;
}
div.maintanance-now p{
    margin-bottom:30px;
}

/**************   smartphone   **************/
/****** メンテナンスﾍページ ******/
@media only screen and (max-width: 540px){
    div.maintanance-now{
        padding: 64px 32px;
        background: #fff;
        text-align: center;
        border: none;
        top: 0%;
    }       
}