/*
 * アプリケーションタイトル
 *
 */
#header_line1{
	width:      		100%;
	height:     		60px;
    background: 		rgba(255,255,255,1.0);
    border-bottom: 		1px solid #ccc;
   	z-index:			100;
   	position: 			-webkit-sticky;
	position:			sticky;
	left:       		0px;
	/*
	box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .5);
	*/
}

#header_line1_contents {
	width:				calc(100vw - 17px);
	height:				100%;
	display:    		flex;
    justify-content: 	space-between;
    position: 			-webkit-sticky;
	position:			sticky;
	left:       		0px;
	padding:            5px 0px 5px;
}

/*
 * タイトルラベル
 */
#header_line1 .title_label,
#header_line2 .title_label{
	color:			#666;
	font-weight:	bold;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

#header_line1 .title_label {
	display:none;
	font-size:		12pt;
	padding-top:	5px;
	margin-left:	14px;
}

#header_line2 .title_label {
	font-size:	16pt;
	padding-top:10px;
	margin-left:20px;
}

#header_line1 #logo_panel {
	display: flex;
    justify-content: space-between;
}

#header_line1 img {
	display: 		inline-block;
	height: 		50px;
    margin: 		   0;
    margin-left:	 5px;
    
}

#header_line1 .uncefact_label{
	display: 		inline-block;
	font-size:		6pt;
	font-weight:	bold;
	color:			#180D01;
	height:			50px;
	padding-top:    26px;
}



#header_line1 #accountpanel {
	padding:		5px 0 5px;
	margin-right:	20px;
}

#header_line1 #accountpanel .accountlabel,
#header_line1 #accountpanel .account {
	margin-top:		5px;
	color:			#666;
	font-size:		0.7em;
	white-space:	nowrap;
	line-height:	20px;
}
#header_line1 #accountpanel .accountlabel{
	text-align:right;
}
#header_line1 #accountpanel .account{
	text-align:left;
}

#gnavi_container{
	display:	none;
	position: 	fixed;
	top:		0;
	left:		0;
	width:		100vw;
	height:		100vh;
	background:	rgb(0,0,0,0.3);
	z-index:	101;
	
	user-select:	none;
}

#gnavi_container.active{
	display:	block;
}

#header_line2 {
	white-space: nowrap
}

/*
 * ナビゲーションメニュー
 *
 * ※画面サイズに応じてスライドメニューに変化
 */
#header_line2 {
	width:      		100%;
	height:				40px;
	
	background-color: 	rgba(255,255,255,1.0);
	border-bottom: 		1px solid #ccc;

	z-index:300;
	
	position: 			-webkit-sticky;
	position:			sticky;
	top:				0px;
	left:       		0px;
	//background: 		#f00;
	
	user-select:		none;
}

#header_line2_contents {
	width:				calc(100vw - 17px);
	height:				100%;
	padding-right:		20px;
	display:    		flex;
    justify-content: 	space-between;
	position: 			-webkit-sticky;
	position:			sticky;
	top:				0px;
	left:       		0px;
	
	
}

/*
 * ナビゲーションメニュー項目の基本
 */
#header_line2 ul li{
	list-style: 		none;
	//width:				120px;
	float: 				left;
	margin-top:			3px;
}

/*
 * ナビゲーションメニュー個別
 */
#header_line2 ul li#return{
	width:				110px;
}

/*
 * ナビゲーションメニュー個別
 */
#header_line2 ul li#home{
	width:				130px;
}

/*
 * ナビゲーションメニュー個別
 */
#header_line2 ul li#setting{
	width:				80px;
}

/*
 * ナビゲーションメニュー個別
 */
#header_line2 ul li#logout{
	width:				100px;
}


#header_line2 ul li a {
	color: 				#333333;
	text-decoration: 	none;
	line-height: 		35px;
	font-size: 			0.8em;
	display: 			flex;
  	align-items: 		center;
}

#header_line2 ul li a:hover {
	color:orange;
}

#header_line2 Ul li a img{
	height:			24px;
	padding: 		0px 0 2px 0;
	margin-right:   5px;
}

/*
 * ログアウトアイコンのみデザインの都合で若干上寄りに見えるため調整
 */
#header_line2 Ul li a img.logout{
	margin-top:2px;
}

/*
 * スマホ用のアイコンは非表示とする
 */
#header_line2 ul li a img.sp{
	display:none;
}

/*
 * プロセスのタイトルおよび表示件数変更
 *
 */
 




//ハンバーガーアイコンは確実に消しておく
#btn-gnavi {
	display:			none;
}
#btn-gnavi span:nth-child(4){
	display:none;
}



/*
 * PC向けの場合
 *
 */
@media screen and (min-width: 701px) {

	#gnavi_container{
		display:			none;
		background:			rgb(255,255,255,0.0);
	}

	#header_line2 .menu_child {
		box-sizing: 		border-box;
		display:			block;
		visibility: 		hidden;
		opacity: 			0;
		position: 			absolute;
		margin-left: 	   -100px;
		width:	 			220px;
		padding: 			10px 50px 10px 20px;
		background-color: 	#FFF;
		border: 			1px solid 	#000;
	}
	
	#header_line2 .menu_child li{
		width:	 			180px;
		
	}

	#header_line2 .menu_parent:hover .menu_child {
		visibility: 		visible;
		opacity: 			1;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, .5);
	}
}

/*
 * モバイル向けの場合、ハンバーガーメニューへ切り替える
 *
 *
 */
@media screen and (max-width: 700px){

	#header_line1{
		position: 	-webkit-sticky;
		position:	sticky;
		top:		0px;
	}
	
	#header_line1 #logo_panel {
		display: block;
	    justify-content: start;
	}

	#header_line1 img {
		display:	block;
		height:25px;
		margin-left:15px;
	}
	
	#header_line1 .uncefact_label{
		display:	none;
	}

	#header_line1 #accountpanel {
		margin-right:70px;
	}
	
	#header_line1 #accountpanel .accountlabel{
		display:none;
	}
	#header_line1 .title_label {
		display:block;
	}

	#header_line2 .title_label {
		display:none;
	}
	

	#menu-panel {
		padding:10px 10px 10px 30px;
	}

	#header_line2 {
		margin:0;
		z-index:105;
		padding-right:		0px;
	}
	
	#header_line2 li{
		width:200px;
	}
	
	/*
	 * PC用のアイコンを非表示にする
	 */
	#header_line2 ul li a img.pc{
		display:none;
	}
	
	/*
	 * スマホ用のアイコンを表示する
	 */
	#header_line2 ul li a img.sp{
		display:block;
	}
	
	#header_line2 .menu_child li a{
		padding-left:50px;
	}
	
	/** ID指定でサイズ変更しているので、揃える場合もID指定が必要 **/
	#header_line2 #return{
		width:200px;
	}	

	#header_line2 ul{
		display: block;
	}
	
	#gnavi_container{
		z-index:			101;
	}

	/**レスポンシブにした時のナビの見せ方**/
	#header_line2{
		position: fixed;
		width: 300px;
		top: 0;
		left:auto;
		right: -300px;
		background-color: rgba(33,33,33,0.9);
		height: 100%;
		padding-top: 60px;
		padding-left:0px;
		border-top:none;
		border-bottom:none;
	}
	
	#header_line2	#header_line2_contents {
		overflow-y:	scroll;
		overflow-x: hidden;
	}
	
	/*
	 * ナビゲーションメニュー個別
	 * ※不要な改行を防ぐため幅いっぱいにする
	 */
	#header_line2 ul li#home,
	#header_line2 ul li#setting,
	#header_line2 ul li#logout{
		width:		100%;
	}	

	#header_line2 ul li{
		width: 100%;
		border-bottom: 1px solid #666;
	}

	#header_line2 ul li a{
		color: #ffffff;
		padding-left: 20px;
		font-size: 1.0em;
		line-height: 50px;
		width:100%;
		height:100%;
		
	}

	/*
	 * ハンバーガーアイコン
	 *
	 */
	#btn-gnavi{
		display:			block;
		position: 			fixed;
		top: 				15px;
		right: 				10px;
		width: 				30px;
		height: 			24px;
		z-index:		 	110;
		cursor: 			pointer;
		-webkit-transition:	all 100ms;
		transition: 		all 100ms;
	}
	
	/*
	 * ハンバーガーアイコン（線描画１本あたり）
	 *
	 */
	#btn-gnavi span {
		position: 			absolute;
		width: 				20px;
		height: 			2px;
		background: 		#666;
		border-radius: 		2px;
		-webkit-transition: all 100ms;
		transition: 		all 100ms
	}

	/*
	 * ハンバーガーアイコン（通常時）
	 *
	 */
	#btn-gnavi span:nth-child(1){
		left:2px;
		top: 0;
	}

	#btn-gnavi span:nth-child(2){
		left:2px;
		top: 7px;
	}

	#btn-gnavi span:nth-child(3){
		left:2px;
		top: 14px;
	}
	
	#btn-gnavi span:nth-child(4){
		display:block;
		top: 20px;
		left:1px;
		font-size:8px;
		background: #fff;
		text-align:center;
	}

	/*
	 * ハンバーガーアイコン（オープン時）
	 *
	 */
	#btn-gnavi.hb-open span{
		background: #fff;
	}
	
	#btn-gnavi.hb-open{
		transform: rotate(180deg);
		-webkit-transform:rotate(180deg);
	}

	#btn-gnavi.hb-open span:nth-child(1){
		transform: translate(6px,14px) rotate(45deg);
		-webkit-transform: translate(6px,14px) rotate(45deg);
	}
	
	#btn-gnavi.hb-open span:nth-child(2){
		display:none;
	}

	#btn-gnavi.hb-open span:nth-child(3){
		transform: translate(6px,0px) rotate(-45deg);
		-webkit-transform: translate(6px,0px) rotate(-45deg);
	}
	
	#btn-gnavi.hb-open span:nth-child(4){
		display:none;
	}
}

@media screen and (max-width: 480px){


}

