/* ************************************************ 
 *	共通設定
 * ************************************************ */

* {
margin: 0px;
padding: 0px;
}

#container {
position: relative;
min-height: 100%;
height: auto;
}

html{
height:100%;
margin:0;
}

html.scroll-prevent {
position: fixed;
z-index: -1;
width: 100%;
height: 100%;
}

body {
color: #333;
font-size: 12px;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
line-height: 1.5em;
background-image: url(../img/page_back.jpg);
background-repeat: repeat-x;
text-align: center;
height: 100%;
margin: 0px auto;
}

img {
border: 0;
}

.font11red {
font-family: "ＭＳ Ｐゴシック", "Osaka";
font-size: 11px;
color: red;
}

.font12black {
font-family: "ＭＳ Ｐゴシック", "Osaka";
font-size: 12px;
color: #000000;
}

.font12red {
font-family: "ＭＳ Ｐゴシック", "Osaka";
font-size: 12px;
color: #FF0000;
}


.font13black {
font-family: "ＭＳ Ｐゴシック", "Osaka";
font-size: 13px;
color: #000000;
}

.font20black {
font-family: "ＭＳ Ｐゴシック", "Osaka";
font-size: 20px;
color: #000000;
}

.font25white a{
font-family: "ＭＳ Ｐゴシック", "Osaka";
font-size: 25px;
color: #FFFFFF !important;
line-height: 1.5em;
text-decoration: none;
}

h2 {
background-image: url(../img/h2_back.gif);
background-color: #E3E3E3;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
margin-bottom: 10px;
text-align: left;
font-size: 13px;
color: #555;
padding: 6px 8px 6px 8px;
border-left: 5px solid #39C;
}

h3 {
padding-bottom: 5px;
}

/*ページ全体の幅、レイアウト */
#page {
max-width: 800px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
background-color: #FFF;
}

#header {
height: 110px;
text-align: left;
background-color: #FFF;
padding-top: 10px;
padding-bottom: 10px;
border-top: solid 10px #EEE;
border-bottom: solid 1px #CCC;
}

#logo {
float: left;
text-align: left;
}

#menu {
max-width: 800px;
float: right;
text-align: right;
margin-top: 30px;
font-family: 'ＭＳ Ｐゴシック',sans-serif;
}

#menu_inside {
vertical-align: middle;
margin-left:-20px;
font-size: 11px;
}

#menu_inside img {
vertical-align: middle;
}

#menu img {
border: 0;
}

#main {
font-size: 12px;
margin: 0px auto;
text-align: left;
padding-top: 10px;
}

#top_img {
margin-bottom: 10px;
}

#left_block,
.left_block {
float: left;
text-align: left;
width: 250px;
margin-right: 10px;
}

#left_block_top,
.left_block_top {
height: 20px;
width: 250px;
color: #FFF;
font-weight: bold;
font-size: 14px;
padding: 10px 0 5px 0;
text-align: center;
background-color: #008B42;
-webkit-border-radius: 7px 7px 0 0;
-moz-border-radius: 7px 7px 0 0;
border-bottom: solid 5px #CCC;
}
#left_block_inside,
.left_block_inside {
padding: 10px 15px 10px 15px;
background-color: #EEE;
border-bottom: solid 5px #CCC;
max-height: 120px;
}
#left_banner,
.left_banner {
text-align: center;
background-color: #FFF;
padding: 7px;
border: dotted 1px #555;
}

#banner_txt {
text-align: center;
font-size: 11px;
padding-top: 5px;
line-height: 14px;
}
#right_block,
.right_block {
float: left;
text-align: left;
margin-left: 10px;
max-width: 510px;
}

#link_block {
padding: 15px 0 15px 0;
margin: 15px auto auto;
border-top: solid 5px #036;
text-align: center;
}

#link_block img {
padding: 2px;
}

#TopMain img,
#recruit_map img {
max-width: 100%;
}

/* NEWS表示部分 */
#iframe_news {
max-width: 510px;
height: 490px;
border: dotted 1px #CCC;
overflow: auto;
padding: 10px;
margin: 5px 0 10px 0;
}

table#tb_news {
    max-width: 495px;
    border: 1px #E3E3E3 solid;
    border-collapse: collapse;
    border-spacing: 0;
}

table#tb_news th {
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    font-weight: normal;
    line-height: 120%;
    text-align: center;
    font-size: 11px;
    color: #555;
}

table#tb_news td {
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    text-align: left;
    font-size: 12px;
    line-height: 17px;
}

table#tb_news h3 {
    font-size: 12px;
    margin-bottom: 3px;
    padding-bottom: 0;
    color: #008699;
}

table#tb_news .red_text {
    color: #F00;
}

/********トレンドマイクロニュース*******/
table#tm_news {
    max-width: 495px;
    border: 1px #E3E3E3 solid;
    border-collapse: collapse;
    border-spacing: 0;
}

table#tm_news th {
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    font-weight: normal;
    line-height: 120%;
    text-align: center;
    font-size: 11px;
    color: #555;
}

table#tm_news td {
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    text-align: left;
    font-size: 12px;
    line-height: 17px;
}

table#tm_news h3 {
    font-size: 12px;
    margin-bottom: 3px;
    padding-bottom: 0;
    color: #008699;
}

table#tm_news .red_text {
    color: #F00;
}
/*****************/

#footer {
border-top: solid 5px #CCC;
padding: 20px 0 70px 0;
background-color: #E4E4E4;

        width: 100%;
        position: absolute;
        bottom: 0px;
}

#footer_inside {
margin: 0px auto;
max-width: 800px;
height: 50px;
color: #444;
font-size: 12px;
text-align: right;
line-height: 22px;
}

#footer_inside a {
color: #036;
text-decoration: none;
}

#footer_inside a:hover {
color: #C00;
}

#footer_inside img {
margin-left:10px;
}

table.t1 {
border-collapse: collapse;
border-spacing: 0;
background-color: #FFF;
empty-cells: show;
line-height: 22px;
margin-top: 10px;
margin-left: 25px;
margin-bottom: 35px;
}

table.t1 th{
font-weight: normal;
font-size: 12px;
padding-right: 20px;
color: #333;
text-align: right;
}

table.t1 td{
font-size: 12px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
/*border-left: 1px dotted #999;*/
}

/****事業概要の表****/
table.worktable {
margin-left: auto;
 	margin-right: auto;
}

table.worktable th{
text-align: center;
vertical-align: middle;
height: 60px;
}

table.worktable td{
text-align: left;
vertical-align: middle;
height: 50px;
}
/*********************/


#shinsai_ttl {
font-size: 14px;
font-weight: bold;
color: #D00;
width: 500px
padding-top: 10px;
padding-bottom: 5px;
margin-top: 10px;
}

#shinsai_news {
width: 500px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 13px;
line-height: 19px;
background-color: #EEE;
border: double  7px #D00;
}

.shinsai_news_ttl {
color: #113;
font-weight: bold;
padding-top: 2px;
padding-bottom: 3px;
}

#shinsai_news a {
color: #008699;
font-weight: bold;
text-decoration : underline;
}

#shinsai_news a:hover {
color: #D00;
font-weight: bold;
text-decoration : underline;
}

#shinsai_banner {
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
background-color: #FFF;
}

#rss_news {
width: 490px;
margin-top: 10px;
font-size: 10px;
}

.contents {
margin-left: 50px;
max-width: 700px;
}


/****会社組織図****/
#chart img {
max-width: 100%;
}

@media screen and (max-width: 599px) {
  .chart_big {
    display: none;
  }
  .chart_mini img {
    max-width: 100%;
  }
}

@media screen and (min-width: 600px) {
  .chart_mini {
    display: none;
  }
  .chart_big img {
    max-width: 100%;
  }
}

/*****************************************
 * clearfix用(floatの回り込みを解除する) *
 *****************************************/

.cfx:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

.cfx {
min-height: 1px;
}

* html .cfx {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

/********** Basic code - don't modify ********/
 
 #nav { display: block; margin: 0; padding: 0; position: relative; font-size: 12px; font-weight: normal; }
  #nav li { display: block; list-style: none; margin: 0; padding: 0; float: left; position: relative; width: 115px; text-align: center; }
  #nav a { display: block; text-decoration: none; }
  #nav ul { display: none; position: absolute; left: 0; margin: 0; padding: 0; font-size: 12px; }
  * html #nav ul { line-height: 0; } /* IE6 "fix" */
  	#nav ul a { zoom: 1; } /* IE6/7 fix */
    #nav ul li { float: none; }
    #nav ul ul { top: 0; }
    
/* Essentials - configure this */

#nav ul { width: 115px; }
#nav ul ul { left: 115px; }

/* Everything else is theming */
 
/* #nav { background-color: #30A8C3; height: 24px; } */
#nav *:hover { background-color: none; }
#nav a { color: #555; line-height: 1; }
  #nav li.hover a { background-color: #777; color: #FFF; }
  #nav ul { top: 40px; }
    #nav ul li a { padding: 7px; background-color: #777; color: #FFF; }
      #nav ul a.hover { background-color: #008B42; }
   #nav ul a { border-top: 1px solid #FFF; border-right: none; opacity: 0.9; filter: alpha(opacity=90); }
/* #nav ul a { border-bottom: none; } - I also needed this for IE6/7 */



/*****************************************
 * マウスオーバー処理 *
 *****************************************/

/**ホーム**/
#img_home{
color:orange;
background:url(../img/m_home_02.jpg) no-repeat;
}

#img_home a{
display:block;
width:115px;
color:#F0027F;
background:url(../img/m_home_01.jpg) no-repeat;
height:40px;
line-height:40px;
text-decoration:none;
text-align:center;
}

#img_home a:hover {
background:url(../img/m_home_02.jpg) no-repeat;
}
/**会社概要**/
#img_company{
color:orange;
background:url(../img/m_company_02.jpg) no-repeat;
}

#img_company a{
display:block;
width:115px;
color:#F0027F;
background:url(../img/m_company_01.jpg) no-repeat;
height:40px;
line-height:40px;
text-decoration:none;
text-align:center;
}

#img_company a:hover {
background:url(../img/m_company_02.jpg) no-repeat;
}

/**事業概要**/
#img_work{
color:orange;
background:url(../img/m_work_02.jpg) no-repeat;
}

#img_work a{
display:block;
width:115px;
color:#F0027F;
background:url(../img/m_work_01.jpg) no-repeat;
height:40px;
line-height:40px;
text-decoration:none;
text-align:center;
}

#img_work a:hover {
background:url(../img/m_work_02.jpg) no-repeat;
}
/**求人情報**/
#img_recruit{
color:orange;
background:url(../img/m_recruit_02.jpg) no-repeat;
}

#img_recruit a{
display:block;
width:115px;
color:#F0027F;
background:url(../img/m_recruit_01.jpg) no-repeat;
height:40px;
line-height:40px;
text-decoration:none;
text-align:center;
}

#img_recruit a:hover {
background:url(../img/m_recruit_02.jpg) no-repeat;
}
/**お問い合わせ**/
#img_contact{
color:orange;
background:url(../img/m_contact_02.jpg) no-repeat;
}

#img_contact a{
display:block;
width:115px;
color:#F0027F;
background:url(../img/m_contact_01.jpg) no-repeat;
height:40px;
line-height:40px;
text-decoration:none;
text-align:center;
}

#img_contact a:hover {
background:url(../img/m_contact_02.jpg) no-repeat;
}

/*****************************************
 * レスポンシブ対応 *
 *****************************************/
.mini-menu {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  .logo {
    font-size: 20px;
  }
}
.nav-button {
  display: none;
  margin-left: auto;
}
.nav {
  a {
    text-decoration: none;
    font-size: 20px;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
}
.nav-wrap.open {
  display: block;
}

.nav-wrap.close {
  display: none;
}

@media screen and (min-width: 1025px) {
  .nav-wrap {
    display: block !important;
  }
  .mini-menu {
    display:none;
  }
}
.content {
  padding: 20px;
}

@media screen and (max-width: 1024px) {
  .nav-button {
    display: block;
    cursor: pointer;
  }
  .big-menu {
    display:none;
  }
  .mini-menu {
    margin-top: 50px;
  }
  .nav-wrap {
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 50px;
    margin-bottom: 50px;
    .nav {
      height: 100%;
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
    }
    li {
      display: block;
      margin: 2em;
      a {
        color: #fff;
        font-size: 200%;
      }
    }
  }
  /*メニューボタンのエフェクト*/
  .nav-button,
  .nav-button span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
  }
  .nav-button {
    z-index: 20;
    position: relative;
    width: 40px;
    height: 36px;
  }
  .nav-button span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
  }
  .nav-button span:nth-of-type(1) {
    top: 0;
  }
  .nav-button span:nth-of-type(2) {
    top: 16px;
  }
  .nav-button span:nth-of-type(3) {
    bottom: 0;
  }
  .nav-button.active span:nth-of-type(1) {
    -webkit-transform: translateY(16px) rotate(-45deg);
    transform: translateY(16px) rotate(-45deg);
    background-color: #fff;
  }
  .nav-button.active span:nth-of-type(2) {
    opacity: 0;
  }
  .nav-button.active span:nth-of-type(3) {
    -webkit-transform: translateY(-16px) rotate(45deg);
    transform: translateY(-16px) rotate(45deg);
    background-color: #fff;
  }
}