@charset "utf-8";
/* ================================================================
 住まいの千里
 admin  : Masako Yoshimoto
 Author: Graphics Drive Inc.
 Author URI: http://www.graphics-drive.com/
 update : 2018/05/23
 
 ナビゲーションcss / PC 960px以上で表示 / tb,sp 768px以下で表示
================================================================ */

@media(min-width: 960px){
	
#humberger,#nbox{ display: none; }

}

#nbox{
	position: fixed;
	top: 0;
	height: 130px; /* 会社名、キャッチコピー挿入分  */
	width: 100%;
	background-color: #000;
	text-align: center;
	font-size: 1.6em;
	font-weight: bold;
	color: #FFF;
	line-height: 2.4em;
	z-index: 7;
}

/* #nbox img{ width: 50px; height: auto; margin-right: auto; margin-left: auto; display: block; float: left; }  */

#nbox h1{ font-size: 18px; color: #FFF; line-height: 2em; }
#nbox h2{ font-size: 14px; color: #098EC1; line-height: 1.8em; }
#nbox p{ font-size: 11px; font-weight: normal; color: #FFF; margin: 0px; padding: 0px; }
#nbox br { display: inline-block; }

/* ------------------------------------------------------------
　　Global Navi / PC
------------------------------------------------------------ */	
@media(min-width: 960px){

#gnav{ width:100%; background: #000; }

#gnav ul{ width: 1024px; margin-right: auto; margin-left: auto; box-sizing: border-box; clear: both; }

/* 8分割  */

#gnav li.sp{display: none;}

#gnav li{ 
	position: relative; 
	display: block; 
	float: left; 
	width: 12.5%; 
	box-sizing: border-box; 
	font-size: 11px; 
	line-height: 2em; 
	padding: 5px 0px; 
}

#gnav li a{
	display: block;
	color: #fff;
	text-align: center;
	text-decoration: none;
	padding:0;
	display: block;
	margin: 0px auto;
	background-color: #000;
}

#gnav li a:hover{
	color: #fff;
	background-color: #D90000; /* メインnavロールオーバーの色 */
	width: 100%;
	margin: 0px auto;
}

/* Child list サブメニュー（プルダウンメニュー） */

#gnav li ul{
	position: absolute;
	top: 32px; /* サブメニュー表示位置 */
	width: 100%;
	z-index: 100;
}

/* サブメニュー非表示 */
#gnav li ul li{
	visibility: hidden;
	overflow: hidden;
	width: 100%;
	height: 0;
	padding-bottom: 0!important;
}

/* サブメニュー表示 */
#gnav li ul li a{
	  color: #333;
	  padding:5px 0px 5px 0px;
	  background-color: #EEE; /* プルダウン背景色 */
}

#gnav li ul li a:hover{ 
	background-color: #D90000; /* プルダウンロールオーバー時の背景色 */ 
	color: #fff; /* ロールオーバーの文字の色 */ 
	width: 100%;
	padding:5px 0px 5px 0px; 
}

#gnav li:hover ul li, #gnav li a:hover ul li{
	visibility: visible;
	overflow: visible;
	height: auto;
	z-index: 10;
	background-color: #EEE;
	
	filter: alpha(opacity=90);
	-moz-opacity:0.9;
	opacity:0.9;
}

/* サブメニューボーダー */
#gnav li ul li, #gnav li ul li:first-child{ 
	border-top: 1px solid #FFFFFF; 
	border-left: none; 
	border-right: none; 
	margin: 0px; 
	padding: 0px; 
}

/* アニメーション
#gnav *{
	-webkit-transition: 0.2s ease-in-out;
	   -moz-transition: 0.2s ease-in-out;
	     -o-transition: 0.2s ease-in-out;
	        transition: 0.2s ease-in-out;
} */ 
}

/* ------------------------------------------------------------
　　Global Navi / tb / sp
------------------------------------------------------------ */	

@media(max-width: 960px){

#gnav li.sp{display: block;}

#gnav{
	position: fixed;
	top: 0;
	right: -240px;
	width: 240px;
	height: 100%;
	background: #098EC1; /* ブルー */
	z-index: 5;
	padding-top: 130px; /* 会社名、キャッチコピー挿入分  */
	
	-webkit-transition: all 400ms ease-in-out 0s;
	-moz-transition: all 400ms ease-in-out 0s;
	-o-transition: all 400ms ease-in-out 0s;
	transition: all 400ms ease-in-out 0s;
	-ms-transition: all 400ms ease-in-out 0s;
}

#gnav ul li{
	float: none;
	font-size: 13px;
	letter-spacing: 0.1em;
}

#gnav li strong:only-of-type{ font-size: 11px; font-weight: normal; letter-spacing: 0em;} /* <strong></strong>が付いたメニューだけ文字を小さくする  */

#gnav ul li a:hover{ color: #fff; background-color: #067097; }/* 濃ブルー */


/* 矢印 */
#gnav ul li a{ 
	position: relative; 
	display: block; color: #fff; 
	letter-spacing: 0; 
	display: block; 
	padding: 10px;
	text-decoration: none; margin-left: 10px; 
	}

#gnav ul li a:before{ 
	display: block; 
	content: ""; 
	position: absolute; 
	width: 4px; 
	height: 4px; 
	left: 0; 
	top: 40%;
	border-top: 1px solid #fff; 
	border-right: 1px solid #fff; 
	-webkit-transform: rotate(45deg); transform: rotate(45deg); 
	}

/* Child list サブメニュー（プルダウンメニュー） */

	/* サブメニュー非表示 */
	#gnav ul li ul li{
		visibility: hidden;
		overflow: hidden;
		height: 0;
	}
	
	/* サブメニュー表示 */
	#gnav li:hover ul li, #gnav li a:hover ul li{ 
	visibility: visible; 
	overflow: visible; 
	z-index: 10; 
	height: 20px; 
	transition: all .2s ease-out; 
	padding-bottom: 10px; 	
	}

	#gnav ul li ul{ padding-left: 10px; }
	#gnav ul li br{ display: none; }
	#gnav ul li ul li a{ font-size: 12px; color: #fff; display: block; text-decoration: none; padding-left: 10px; 	}
}

/* ------------------------------------------------------------
　　ハンバーガーメニュー / トグルメニュー
------------------------------------------------------------ */	
/* ハンバーガーメニュー */
#humberger{
	position: fixed;
	top: 0;
	right: 0;
	z-index: 8;
	width: 45px;
	cursor: pointer;
	padding: 17px 10px 10px;
}

	.icon-bar{
	height: 2px;
	background-color: #FFF;
	display: block;
	margin-bottom: 6px;

	-webkit-transition: all 400ms ease-in-out 0s;
	-moz-transition: all 400ms ease-in-out 0s;
	-o-transition: all 400ms ease-in-out 0s;
	transition: all 400ms ease-in-out 0s;
	-ms-transition: all 400ms ease-in-out 0s;
}
		
.fixed-content{
	right: inherit;
	width: 100%;
	z-index: 2;

	-webkit-transition: all 400ms ease-in-out 0s;
	-moz-transition: all 400ms ease-in-out 0s;
	-o-transition: all 400ms ease-in-out 0s;
	transition: all 400ms ease-in-out 0s; 
	-ms-transition: all 400ms ease-in-out 0s;
}
	

#overlay{
	z-index: -1;
	opacity: 0; 
	background: #000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	/* 表示アニメーション */
	-webkit-transition: all 400ms ease-in-out 0s;
	-moz-transition: all 400ms ease-in-out 0s;
	-o-transition: all 400ms ease-in-out 0s;
	transition: all 400ms ease-in-out 0s;
	-ms-transition: all 400ms ease-in-out 0s;
}
		

/* ------------------------------------------------------------
	　ドロワーが開いた時のスタイル（.opened）980px以下
------------------------------------------------------------ */
@media(max-width: 960px){
		
body.opened .fixed-content{
	left: -240px;
}
		
body.opened #gnav{
	right: 0;
}
		
body.opened #humberger .icon-bar{
	background: #fff;
}

body.opened #humberger :nth-child(1){
	transform:translate(0,8px) rotate(45deg); 
	-webkit-transform:translate(0,8px) rotate(45deg);
}
		
body.opened #humberger :nth-child(2){
	transform:translate(-20px ,0); 
	-webkit-transform:translate(-20px ,0);
	opacity:0;
}
		
body.opened #humberger :nth-child(3){
	transform:translate(0,-8px) rotate(-45deg);
	-webkit-transform:translate(0,-8px) rotate(-45deg);
}
/* ------------------------------------------------------------ */	

	
body.opened #overlay{
	z-index: 5;
	opacity: 0.3;
	left: -240px;
}

}