/* ヘッダー（ツールナビ・ブロック定義） */
/*===============================================================*/

#uNav {
  width: 100%;
  padding: 0;
  margin: 0;
  background: #333333;
  height: 40px;
}

#uNav:before, #uNav:after,
#aNav:before, #aNav:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}

#uNav:after,
#aNav:after {
	clear: both;
}

.uNavwrap {
  display: block;
  float: right;
  padding: 0 10px;
  margin: 0;
}

@media screen and (max-width: 767px) {
  #uNav,
  #aNav{
    display: none;
  }
}

#hNav {
  width: 1200px;
  margin: 10px auto;
  display: table;
}

/* ヘッダー（ツールナビ・パーツ） */
/*===============================================================*/

nav#accnav a{
	color : #FFF;
}

nav#accnav #nocssread {
	display: inline-block;
	color: #FFF;
	margin-right: 10px;
}

nav#accnav #size {
	padding-left: 10px;
	white-space: nowrap;
	display: inline-block;
}
#pageSkip{
    position: absolute;
    top: 4px;
    left: 10px;
}


#info,
#multi{
	margin-right: 14px;
}

#ss-voice,
#ss-kana,
#size {
	display: inline-block;
	padding: 0 5px;
	margin: 1.5px;
	color: #FFF;
}

.icon-pencil2:before,
.icon-volume-medium:before {
	color: #FFF;
}

#ss-voice span,
#ss-kana span{
	color : #FFF;
	margin-right: 2px;
}

#ss-voice a,
#ss-kana a{
	text-decoration: none;
	color: #FFF;
}

nav #size span.button {
	border: 1px solid #c5cdd6;
	background-color: white;
	display: inline-block;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-decoration: none;
	padding: 3px 5px;
	margin: 0 2px;
	color: black;
}

span.button a {
	color: black !important;
}

#ss-small {
	margin-left: 10px !important;
}

#ss-large {
  	margin-right: 0 !important;
}

div#theme {
	display: inline-block;
	margin-left:10px;
	white-space:nowrap;
	color: #FFF;
}

#ss-theme a {
	background-color: white;
	padding: 3px 6px 3px 6px;
	webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	position: relative;
	left: 4px;
	border: 1px solid #c5cdd6;
	margin-right: 5px;
	text-decoration: none;
	display: inline-block;
}
/*
.body--kankou #ss-theme a,
.body--iju #ss-theme a {
  padding: 6px;
}
*/
#ss-theme a.white{
	border-color : #c5cdd6;
	background-color: #fff;
	color: #000;
}

#ss-theme a.blue{
	border-color : #2679c4;
	background-color: #2679c4;
	color: #fff;
}

#ss-theme a.black{
	border-color : #000;
	background-color: #000;
	color: #fff;
}

#ss-theme a.yellow{
	border-color : #fff000;
	background-color: #fff000;
	color: #000;
}

#ss-voice-controller{
	position: absolute;
	z-index: 9999;
}

#ss-preview {
    /* display: none; */
}

#spBtn {
	display: none;
}

body:lang(en) #ss-kana,
body:lang(en) #ss-voice,
body:lang(en) .tools .icon-pencil2,
body:lang(en) .tools .icon-volume-medium{display: none;}

body:lang(zh-cn) #ss-kana,
body:lang(zh-cn) #ss-voice,
body:lang(zh-cn) .tools .icon-pencil2,
body:lang(zh-cn) .tools .icon-volume-medium{display: none;}

body:lang(zh-tw) #ss-kana,
body:lang(zh-tw) #ss-voice,
body:lang(zh-tw) .tools .icon-pencil2,
body:lang(zh-tw) .tools .icon-volume-medium{display: none;}

body:lang(ko) #ss-kana,
body:lang(ko) #ss-voice,
body:lang(ko) .tools .icon-pencil2,
body:lang(ko) .tools .icon-volume-medium{display: none;}

body:lang(pt) #ss-kana,
body:lang(pt) #ss-voice,
body:lang(pt) .tools .icon-pencil2,
body:lang(pt) .tools .icon-volume-medium{display: none;}

body:lang(es) #ss-kana,
body:lang(es) #ss-voice,
body:lang(es) .tools .icon-pencil2,
body:lang(es) .tools .icon-volume-medium{display: none;}

#hNav .Logo {
  width: 250px;
  display: table-cell;
  margin: 0;
  vertical-align: middle;
}

#hNav .CatchTxt {
  width: 400px;
  display: table-cell;
  margin: 0;
  vertical-align: middle;
}

#hNav .SiteMenu {
  width: 440px;
  display: table-cell;
  margin: 0;
  vertical-align: middle;
}

#gNav {
  width: 1200px;
  padding: 10px 0;
  margin: 0 auto;
}

.CatchTxt h1,
.CatchTxt p,
.CatchTxt span {
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.8em;
  line-height: 2em;
  letter-spacing: 2px;
  font-weight: 500;
  vertical-align: middle;
}

.Logo a {
  display: inline-block;
  text-indent: -9800px;
  width: 215px;
  height: 55px;
  background: url(/img/citizen/LogoMark.png) 0 0 no-repeat;
}

#hNav .CatchEco {
  display: table-cell;
  vertical-align: middle;
}

#hNav .CatchEco a {
  text-indent: -9800px;
  display: block;
  width: 80px;
  height: 80px;
  vertical-align: middle;
  background: url(/img/header_brlogoc.png) center center no-repeat;
  background-size: contain;
}

#hNav .SiteMenu {
    display: block!important;
}

.SiteMenu ul {
  display: table;
  padding: 0;
}

.SiteMenu ul {
	display: table;
	padding: 0;
}
.SiteMenu.SiteMenuNew ul {
	margin: 0 0 0 auto;
}

.SiteMenu ul li {
	display: table-cell;
	list-style: none;
	vertical-align: middle;
	text-align: center;
}

.SiteMenu ul li a {
	display: block;
	width: 90px;
	height: 70px;
	margin: 0 5px;
	padding: 5px;
	border: 1px solid #CCC;
	border-radius: 5px;
	box-sizing: border-box;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}
.SiteMenu.SiteMenuNew ul li a {
  	width: 90px;
  	height: 70px;
}
.SiteMenu ul li.hdrBtnKids a {border: 1px solid #F78989;}
.SiteMenu ul li.hdrBtnKankou a {border: 1px solid #70C0A6;}
.SiteMenu ul li.hdrBtnIjyu a {border: 1px solid #6BB2D9;}
.SiteMenu ul li.hdrBtnMap a {border: 1px solid #A986A2;}
.SiteMenu ul li.hdrBtnPromo a {border: 1px solid #D6A569;}


.SiteMenu .icon {
	font-size: 32px;
}

.hdrSNTxt {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.8em;
  line-height: 1.8em;	
  font-weight: 500;
}

.hdrBtnPromo.hdrBiz .hdrSNTxt {
  font-size: 0.8em;
  letter-spacing: -1px;
}

a .hdrSNTxt {
	color: #000;
}

.SiteMenu {
	position: relative;
}

.SiteMenu ul li a .icon-ijyu:before {	color: #6BB2D9;	}
.SiteMenu ul li a .icon-kankou:before {	color: #70C0A6;	}
.SiteMenu ul li a .icon-facimap:before {	color: #A986A2;	}
.SiteMenu ul li a .icon-kosodate:before {	color: #F78989;	}
.SiteMenu ul li a .icon-volume-medium:before {	color: #D6A569;	}
.SiteMenu ul li a .icon-billding:before {	color: #D6A569;	}

.SiteMenu ul li.hdrBtnIjyu a:hover {	background: #6BB2D9;	}
.SiteMenu ul li.hdrBtnKankou a:hover {	background: #70C0A6;	}
.SiteMenu ul li.hdrBtnMap a:hover {	background: #A986A2;	}
.SiteMenu ul li.hdrBtnKids a:hover {	background: #F78989;	}
.SiteMenu ul li.hdrBtnPromo a:hover {	background: #D6A569;	}


.SiteMenu ul li a:hover .icon-ijyu:before {	color: #FFF;	}
.SiteMenu ul li a:hover .icon-kankou:before {	color: #FFF;	}
.SiteMenu ul li a:hover .icon-facimap:before {	color: #FFF;	}
.SiteMenu ul li a:hover .icon-kosodate:before {	color: #FFF;	}
.SiteMenu ul li a:hover .icon-volume-medium:before {	color: #FFF;	}
.SiteMenu ul li a:hover .icon-billding:before {	color: #FFF;	}

a:hover .hdrSNTxt {
	color: #FFF;
}