@charset "UTF-8";
/* CSS Document */
/* ========================================
ヘッダー　  Flex （市章、名称、メニュー）
========================================= */
header {
  /* headerを画面上部に固定する */
  position: fixed;
	display: flex;
	align-items: center;
  top: 0;
  left: 0;
  width: 100%;
	height: 70px;
  /* スクロールしても他のコンテンツの下にならないようにする */
  z-index: 10;
  /* 背景色を黒にする */
  background: #ffffff;
  /* コンテンツの背景に影をつける */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  /* headerに余白を作る */
  padding: 0px 3% 0px 3%;/*右
  box-sizing: border-box;
  /* アニメーションの変化時間 */
  transition: 0.5s;
}
.header_wrap {
	width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: solid 0px;
}
.header_left, .header_right {
  border: solid 0px;
}
/* 左側（市章　美濃加茂市入札・契約情報）
-------------------------------------------------------------------------*/
.header_left {
  display: flex;
  align-items: center; 
  border: solid 0px;
}

.header_logo img { /*市章*/
  width: 100%;
  max-width: 30px;
  margin-right: 6px;
  vertical-align: bottom;
  border: solid 0px;
}
.logo_txt_flex {
	  display: flex;
  align-items: center;
	/*margin-top: 4px;*//*文字位置調整*/
 font-size: 24px;
 /* line-height: 36px;*/
  font-weight: 700;
  border: solid 0px;
}
	/*文字　美濃加茂市*/
	.logo_txt_flex .txt01{
		margin-right: 10px;
}
@media (max-width: 450px) {
	.header_logo img {
		margin-top: 6px;/*位置調整*/
	}
.logo_txt_flex{
	flex-direction: column;
	align-items: flex-start;
	margin-top: 0;
	font-size: 20px;
	 border: solid 0px;
}
	/*文字　美濃加茂市*/
	.logo_txt_flex .txt01{
	font-size: 14px;
		margin-bottom: 3px;
}
}
/* 右側（メニュー）業者のページ直接リンク
-------------------------------------------------------------------------*/
/*aタグ無修正にする*/
.header_right .gyousylogin_link{
    text-decoration: none;
}
/*リンクボタン*/
.header_right .gyousylogin_link_btn{
    width: 100px;
     margin: 0 0 10px auto;
    text-align: center;
    color:#000000;
    font-size: 12px;
    border: solid 1px #44A01B;
    padding:2px 6px;
    box-sizing: border-box;
    background-color: #D7EBCE;
}
.header_right .gyousylogin_link_btn:hover{
    background-color: #81B66A;
    color: #ffffff;
    
}
/* 右側（メニュー）
-------------------------------------------------------------------------*/
.header_right ul {
  /*border-radius: 5px;*/
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  margin-right: 0;
  border: solid 0px;
}
.header_right ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style-type: none !important;
}
/*メニュー　ホーバでアンダーライン
---------------------------------------*/
.header_right li a {
  font-size: 12px;
  line-height: 14px;
  color: #2F2D2D;
  font-weight: 600;
  margin-left: 12px;
  margin-top: 4px; /*ライン分上を開ける　調整*/
  text-decoration: none;
  letter-spacing: 1.5px;
}
/*アンダーライン */
.header_right .underline {
  display: inline-block;
  padding-bottom: 6px;
  position: relative;
}
.header_right .underline::after {
  background-color: #EE2343;
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  position: absolute;
  -webkit-transition: .8s all;
  transition: .8s all;
  width: 0;
}
.header_right .underline:hover:after {
  width: 100%;
}
.header_right .center::after { /*center*/
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
/* ========================================
スクロールして「scroll-navクラス」がついたときのヘッダーデザイン
ドロワーボタンはzdo_drawer_menu.css記載
========================================= */
停止header.scroll-nav {
  /* 余白を狭くする */
  padding: 10px 7% 10px 3%; 
  box-sizing: border-box; 
  /* 背景をブルーにする */
  background: #5F84E8; 
  /* コンテンツの背景に影をつける */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); 
}
/*市章と名称
--------------------------------------*/
/* ロゴのデザイン */
停止header.scroll-nav .logo {
  width: 100%;
  max-width: 20px;
  margin-right: 6px;
  /* アニメーションの変化時間 */
  transition: 0.5s;
}
/* 文字とメニューを白くする */
停止header.scroll-nav .logo_txt {
  height: 24px;
  font-size: 16px;
  line-height: 22px;
  color: #ffffff;
  border: solid 0px;
}
停止header.scroll-nav ul li a {
  color: #ffffff;
}
/*header.scroll-nav ul li a:hover{
	color: #D36932;
}*/
/* ディバイスサイズ設定
============================================= */
/* タブレット用以下 */
@media (max-width: 1139px) {
	  /*ナビゲーション */
  .header_right {
    display: none;
	    }
	
  停止header {
    /* 余白を狭くする */
    padding: 10px 7% 10px 3%; /*scroll-navと同じにする*/
    box-sizing: border-box;
    /* 背景をブルーにする */
    background: #5F84E8;
    /* コンテンツの背景に影をつける */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  }
  /* ロゴのデザイン */
  停止.header_left .header_logo {
    /*width: 100%;*/
    max-width: 20px;
    margin-right: 6px;
    /* アニメーションの変化時間 */
    transition: 0.5s;
  }
  /* 文字とメニューを白くする */
  停止.header_left .logo_text {
    font-size: 14px;
    color: #ffffff;
  }


}
/* デスクトップ用------------------------------- */
@media (min-width: 1140px) {
	.zdo_drawer_menu{
	display: none;	
	}}