@charset "UTF-8";

/*
  ナビゲーションコンテナーCSS
*/


/***********************************************************
#1 コンテナー
***********************************************************/
#c-navigation {
  color: #fff;
  background: #007BBB;
}
#c-navigation-inner {
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  font-size: 90%;
}




/***********************************************************
#1 ナビゲーション
***********************************************************/
#c-navigation h3 {
  display: table-cell;
  vertical-align: middle;
  font-weight: normal;
  float: left;
  padding-top: 0.7em;
  margin-right: 1.0em;
}

#c-navigation ul {
  display: table;
  line-height: 120%;
  width: 100%;
  max-width: 100%;
}
#c-navigation ul li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-right: 1.0em;
  width: 11.1111111%;
  border-left: solid 1px #0067B6;
  border-right: solid 1px #0067B6;
}

/* リンク */
#c-navigation ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 1.2em 0 1.2em 1.2em ;
}
#c-navigation ul li a:hover,
#c-navigation ul li a:active {
  text-decoration:underline;
}

/*//////////////////
#4 レスポンシブ（タブレット用）
//////////////////*/
@media screen and (max-width: 768px) {

#c-navigation ul li {
  font-size: 0.8em;
  line-height: 1.1em;
}

}


/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {
#c-navigation #nav-drawer {
  position: relative;
  text-align: left;
}

/*チェックボックス等は非表示に*/
#c-navigation .nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#c-navigation #nav-open {
    display: inline-block;
    width: 30px;
    height: 18px;
    vertical-align: middle;
	margin: 0.6em 0 0.4em 1.2em;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#c-navigation #nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 2px;/*線の太さ*/
    width: 20px;/*長さ*/
    border-radius: 3px;
    background: #fff;
    display: block;
    content: '';
    cursor: pointer;
}
#c-navigation #nav-open span:before {
    bottom: -6px;
}
#c-navigation #nav-open span:after {
    bottom: -12px;
}

/*閉じる用の薄黒カバー*/
#c-navigation #nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

/*中身*/
#c-navigation #nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;/*最前面に*/
    width: 90%;/*右側に隙間を作る*/
    max-width: 330px;/*最大幅*/
    height: 100%;
    background: #fff;/*背景色*/
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#c-navigation #nav-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
    opacity: .5;
}

#c-navigation #nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}


/***********************************************************
#1 ナビゲーション 要素
***********************************************************/

#c-navigation h3 {
  display: block;
  vertical-align: middle;
  font-weight: normal;
  float: none;
  padding: 0;
  margin:0; 
  line-height: 120%;
  margin: 0.5em auto 0;
  padding: 0.6em 0 0.6em 1.0em ;
  border-bottom: 1px #333 solid;
}



#c-navigation ul {
  line-height: 120%;
  margin: 0;
  padding: 0 0 1.0em 0 ;
  width: 100%;
  max-width: 100%;
}
#c-navigation ul li {
  display: block;
  width: 50%;
  text-align: left;
  padding:  0 0 0.2em 0.5em;
  margin: 0;
  font-size: 0.9em;
  border: none;
  border-right: solid 1px #ccc ;
  border-bottom: solid 1px #ccc ;
  list-style:  none;
  float: left;
}

#c-navigation .menu-list01 {
  margin: 0;
}

#c-navigation .menu-list01 ul {
  margin: 0;
  padding: 0.5em 0;
  line-height: 0.5em;
}
#c-navigation .menu-list01 ul li {
  display: block;
  list-style:none;
  margin: 0 0 0 0.8em ; 
  padding: 0 0.5em ;
  float: left;
  background: url("../images/mark_header_navi.png") left no-repeat;
  width: auto;
  border: none;
  font-size: 1.0em;
  line-height: 0.5em;
}

#c-navigation .menu-list02 {
  margin: 0;
}

#c-navigation .menu-list02 ul {
  margin: 0;
  padding: 0.5em 0;
  line-height: 0.5em;
}
#c-navigation .menu-list02 ul li {
  display: block;
  list-style:none;
  margin: 0 0 0 0.8em ; 
  padding: 0 0.5em ;
  float: left;
  background: url("../images/header_navi_bg_etc.gif") left no-repeat;
  width: auto;
  border: none;
  font-size: 1.0em;
  line-height: 0.5em;
}
	
	
/* リンク */
#c-navigation ul li a {
  color: #333;
  text-decoration: none;
}
#c-navigation ul li a:hover {
  text-decoration: underline;
}

#c-navigation ul li a:active {
  text-decoration: none;
}

#c-navigation hr {
  margin: 0.5em ;
  padding: 0;
  max-width: 96%;
  border-bottom: dotted 1px #ccc;
}

	
	
}