/*=======================================================================*/
/*
Common.css
汎用パーツ
*/
/*=======================================================================*/


/*=======================================================================*/
/* ヘッダー・フッター */
/*=======================================================================*/

/* ヘッダーブロック */
/*===============================================================*/

@media screen and (max-width: 767px) {

	.uNavwrap {
		display: block;
		float: none;
		padding: 0 10px;
		margin: 0;
		font-size: 0.9em;
	}

	.LogoArea {
		width: 550px;
		float: none;
		margin: 0;
	}

	.SiteMenu {
		width: 550px;
		float: none;
		margin: 0;
	}
	
	.SiteMenu {
		position: relative;
		display: block;
		width: 100%;
		padding: 5px 0;
		box-sizing: border-box;
		background: #FFF;
	}

	.SiteMenu:before, .SiteMenu:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}
	
	.SiteMenu:after {
		clear: both;
	}

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

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

}

/* ヘッダー（スマホ用ボタン・ナビ） */
/*===============================================================*/

@media screen and (max-width: 767px) {

	#spBtn {
		display: block;
		position: absolute;
		z-index: 1;
		right: 0;
		top: 7px;
		cursor: pointer;
	}

	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	
	.menu-trigger {
		position: relative;
		width: 40px;
		height: 40px;
		float: right;
		z-index: 1;
		margin: 0 10px 0 0;
	}
	
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 5px;
		background-color: #01579B;
		border-radius: 4px;
	}
	
	.menu-trigger span:nth-of-type(1) {
		top: 5px;
	}
	
	.menu-trigger span:nth-of-type(2) {
		top: 15px;
	}
	
	.menu-trigger span:nth-of-type(3) {
		top: 30px;
	}
	
	.menu-trigger span:nth-of-type(2) {
		top: 50%;
		left: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
	}
	
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(20px) rotate(-315deg) scale(.8);
		transform: translateY(13px) rotate(-315deg) scale(.7);
	}
	
	.menu-trigger.active span:nth-of-type(2) {
		width: 42px;
		height: 42px;
		background-color: transparent;
		border: 3px solid #01579B;
		border-radius: 50%;
	}
	
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-20px) rotate(315deg) scale(.8);
		transform: translateY(-12px) rotate(315deg) scale(.7);
	}
	
	.spmTxt {
		position: absolute;
		display: block;
		text-align: center;
		top: 40px;
		width: 40px;
		font-size: 0.4em;
	}

}

/* ヘッダー（サイトボタン） */
/*===============================================================*/

@media screen and (max-width: 767px) {

	.SiteMenu ul {
      display: flex;
      align-items: center;
      justify-content: stretch;   
      padding: 0;
	}

	.SiteMenu ul li {
		/*width: 47.5%;*/
        width: calc(100% / 5 - 5px);
		display: block;
		list-style: none;
		vertical-align: baseline;
		text-align: left;
		margin: 0 3px 5px 3px;
	}
	.SiteMenu.SiteMenuNew ul li {
		/*width: 47.5%;*/
        width: 18.0%;
		display: block;
		float: left;
		list-style: none;
		vertical-align: baseline;
		text-align: left;
		margin: 0 3px 5px 3px;
	}
 
    .SiteMenu.SiteMenuNew ul li a {
      width: 100%;
      height: 70px;
      padding: 5px 0;
    }

	.SiteMenu ul li a {
		display: block;
		width: 100%;
		margin: 0;
		padding: 1px;
		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;
        text-align: center;
	}
  .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 .icon {
		font-size: 2em;
      	display: block;
	}

  .hdrSNTxt {
    display: inline-block;
    font-family: "Noto Sans", "Noto Sans Japanese", sans-serif;
    font-size: 0.7em;
    letter-spacing: -1px;
    line-height: 1.8em;
    font-weight: 500;
  }

  .hdrBtnPromo.hdrBiz .hdrSNTxt {
    font-size: 0.7em;
  }

	a .hdrSNTxt {
		color: #000;
	}

	.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-potal: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.hdrBtnPortal 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-potal:before {	color: #FFF;	}

	a:hover .hdrSNTxt {
		color: #FFF;
	}
  	#SPmulti {
      text-align: right;
      clear: both;
      margin-bottom: 10px;
      margin-right: 10px;
    }
  	#SPmulti:after {
		clear: both;
	}
  	#SPmulti a {
      /*display: block; */
      background-color: #222;
      color: #fff;
      font-size: 0.9em;
      line-height: 1.8em;
      font-weight: 500;
      /* width: 50%; */
      /* margin: 0 auto; */
      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;
	}
  	#SPmulti a:hover {
      background: #333;
      color:#fff;
    }

}

/* ヘッダー（グローバルメニュー） */
/*===============================================================*/

@media screen and (max-width: 767px) {

	.SiteMenu {
		position: relative;
	}

	#gNav > ul {
		width: 98%;
		position: relative;
		margin: 0 auto 10px auto;
	}

	ul#mCat {
	    list-style: none;
	    width: 100%;
	    padding: 0;
	}
	
	
	ul#mCat:before, ul#mCat:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}
	
	ul#mCat:after {
		clear: both;
	}
	

	#gNav > ul > li {
		width: 47%;
		list-style: none;
		margin: 0 4px;
		display: block;
		float: left;
		border: none !important;
		box-sizing: border-box;
	}

	#gNav > ul > li:first-child {
		border: none !important;
	}

	#gNav > ul > li:last-child {
		border: none !important;
	}

	#gNav > ul > li > a {
		position: relative;
		display: block;
		width: 100%;
		margin: 0 0 5px 0;
		padding: 10px 0;
		text-align: center;
		font-family: "Noto Sans", "Noto Sans Japanese", sans-serif;
		font-size: 1em;
		font-weight: 600;
		color: #333333;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
		border: 2px solid #CCC;
		box-sizing: border-box;
	}

	#gNav > ul > li > a:hover,
	#gNav > ul > li > a.active {
		background: #EEEEEE;
		border-radius: 3px;
		box-sizing: border-box;
	}

	#gNav > ul > li >a.active:after {
		display: none;
	}

	#gNav > ul > li > ul {
		display: none !important;
		position: relative;
		width: 100%;
		margin: 0;
		background: #EEEEEE;
		box-sizing: border-box;
		padding: 10px;
		z-index: 10;
		top: 0;
	}

	.subMenuBlc {
		position: relative;
		display: block;
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		background: #FFF;
	}

	.subMenuBlc:before, .subMenuBlc:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}

	.subMenuBlc:after {
		clear: both;
	}

	.subMenuBlc > ul {
		position: relative;
		display: block !important;
		float: left;
		width: 380px;
		margin: 0;
		padding: 10px;
		box-sizing: border-box;
	}

	.subMenuBlc > ul > li {
		position: relative;
		margin: 0 0 10px 0;
	}

	.subMenuBlc > ul > li:before {
		content: "";
		position: absolute;
		top: 3px;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 7.5px 0 7.5px 10px;
		border-color: transparent transparent transparent #2C4F9E;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
		
	}

	.subMenuBlc > ul > li:hover::before {
		border-color: transparent transparent transparent #D6C55A;
	}

	.subMenuBlc > ul > li > a {
		width: 100%;
		display: block;
		color: #2C4F9E;
		padding: 0 0 0 15px;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	.subMenuBlc > ul > li > a:hover {
		color: #D6C55A;
	}

}

/* 検索ボタン */
/*===============================================================*/

@media screen and (max-width: 767px) {

	#SearchBtn {
		display: none;
	}

}

/* 検索ボックス */
/*===============================================================*/

@media screen and (max-width: 767px) {

	#SearchBox {
		display: none;
		position: relative;
		top: 0;
		left: 0;
		transform: translate(0, 0);
		width: 100%;
		height: auto;
		z-index: 0;
		cursor: pointer;
		padding: 0;
		margin: 0 auto 10px 0;
		background: #FFF;
	}

	#SearchBox .wrap {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
	}

	#SearchBox .closeBtn {
		display: none;
	}

	#SearchBox .inner {
		float: none;
		width: 100%;
		background: #FFF;
		border: 5px solid #D6C55A;
		padding: 10px;
		box-sizing: border-box;
	}

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

	#searchform:after {
		clear: both;
	}

	#searchform .gsc-control-cse {
		background-color: #FFF !important;
		border: none !important;
	}

	/* テキストボックスに文字入力したときに出る「×」マークの位置調整用の指定 */
	#searchform .gsc-search-box { position: relative; }

	/* テキストボックスとボタンを縦並びにするため
	テーブル内の要素をblock化する */
	#searchform .gsc-search-box tr,
	#searchform .gsc-search-box td { display: block; }

	#searchform .gsc-search-box td {
		vertical-align: middle;
	}

	#searchform .gsc-search-box .gsc-input {
		width: 75%;
		height: 40px;
		vertical-align: top;
		float: left;
	}

	#searchform .gsc-search-box td.gsc-search-button {
		width: 18%;
		float: right;
	}

	#searchform .gsc-search-box .gsib_a { padding: 0 !important; }

	#searchform .gsc-search-box td#gs_tti51 { margin-bottom: 5px; }

	#searchform .gsc-search-box td.gsc-search-button { height: 40px; }

	.cse .gsc-control-cse, .gsc-control-cse {
	    padding: 0.5em !important;
	    width: auto;
	}

	.gsc-input-box  input {
		border: 1px solid #CCC !important;
		padding: 10px 10px 12px 10px !important
	}


	/* テキストボックスに文字入力したときに出る「×」マークの位置調整 */
	#searchform .gsc-search-box .gsib_b {
		position: absolute;
		width: 20px;
		top: 5px;
		right: 10px;
	}

	/* テキストボックスのデザイン設定 */
	#searchform .gsc-search-box input#gsc-i-id2 {
		box-sizing: border-box;
		height: 50px;
		padding: 10px !important;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-webkit-box-shadow: 2px 2px 2px 0 rgba(200,200,200,0.4) inset;
		-moz-box-shadow: 2px 2px 2px 0 rgba(200,200,200,0.4) inset;
		box-shadow: 2px 2px 2px 0 rgba(200,200,200,0.4) inset;
		background-position: 5px center !important;
	}

	/* デフォルトで設定されている(疑似的な)テキストボックスの
	デザイン設定を解除 */
	#searchform .gsc-search-box .gsc-input-box,
	#searchform .gsc-search-box .gsc-input-box-hover,
	#searchform .gsc-search-box .gsc-input-box-focus {
		border: none !important;
		-webkit-box-shadow: none !important;
		-moz-box-shadow: none !important;
		box-shadow: none !important;
	}

	/* 検索ボタンの背景をボタンのように見せかける */
	#searchform .gsc-search-box .gsc-search-button {
		position: relative;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-o-border-radius: 5px;
		-ms-border-radius: 5px;
		border-top: 1px solid #D6C55A;
		border-left: 1px solid #D6C55A;
		border-right: 1px solid #D6C55A;
		border-bottom: 1px solid #D6C55A;
		background: #D6C55A;
		cursor: pointer;
	}

	/* 検索ボタンの背景部分にテキストを表示させる */
	#searchform .gsc-search-button:before {
		position: relative;
		content: '検索' !important;
		color: #333;
		font-size: 1.2em;
		line-height: 2.6em;
		text-align: center;
		margin-left: 12px;
	}

	/* 検索ボタンを透明化し背景のみを表示させる */
	#searchform .gsc-search-box input.gsc-search-button-v2,
	#searchform .gsc-search-box input.gsc-search-button {
		width: 100%;
		padding: 0 !important;
		opacity: 0;
	}

	#KWtitle h3 {
      font-size: 1em;
      letter-spacing: 3px;
      margin: 5px 0;
	}

	#KWArea a {
		display: inline-block;
		margin: 0 5px 5px 0;
		color: #0046B2;
		text-decoration: underline;
	}

	#KWArea a:hover {
		color: #333333;
		text-decoration: none;
	}

}

/* フッター */
/*===============================================================*/

/* メニュー */

@media screen and (max-width: 767px) {

	.fMenu {
		display: block;
		padding: 20px 0;
	}

	.fMenu:before, .fMenu:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}

	.fMenu:after {
		clear: both;
	}

	.fMenu ul {
		list-style: none;
	}

	.fMenu ul li {
		width: 100%;
		display: block;
		float: none;
		margin: 0;
	}

	.fMenu ul li:after {
		display: none;
	}

	.fMenu ul li:last-child:after {
		display: none;
	}

	.fMenu ul li a {
		display: block;
		width: 100%;
		color: #333333;
		margin: 0 0 5px 0;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
		padding: 5px 10px;
		box-sizing: border-box;
		border: 1px solid #E0E0E0;
	}

	.fMenu ul li a:hover {
		color: #B3A22D;
	}

}

/* ロゴ */

@media screen and (max-width: 767px) {

	.fLogo {
		display: block;
		padding: 0 0 20px 0;
	}

	.fLogo a {
		display: block;
		text-indent: -9800px;
		width: 100%;
		height: 50px;
		background: url(../../img/citizen/LogoMark.png) center 0 no-repeat;
      background-size: contain;
	}
  .fLogo a.ecoparkbanner {
	    margin-left: 0px;
    		height: 70px
	}

	/* 住所・連絡先 */

	.fAdd {
		font-size: 0.9em;
		padding: 0 0 20px 0;
	}

	.fAdd p {

	}

	.fAdd span {
		display: inline-block;
	}

	.faFax {
		margin: 0 0 0 10px;
	}

}

/*=======================================================================*/
/* 汎用パーツ */
/*=======================================================================*/


/* ページの先頭へ戻る */
/*=======================================================================*/

.page_top {
	position: fixed;
	bottom: 20px;
	right: 10px;
	padding: 0 0;
	color: #fff;
	font-size: 20px;
	text-decoration: none;
	width: 56px;
	height: 56px;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	z-index: 1000000;
}

  	@media screen and (max-width: 480px) {
		.SiteMenu.SiteMenuNew ul li {
	        width: calc(100% / 5 - 5px);
		}
  	}