@charset "utf-8";
/* --------------------------------------------

#header

---------------------------------------------- */ 


/* --------------------------------------------
						トップページ
---------------------------------------------- */ 

.indexHd { display: block; width: 97%; margin: 0 auto; padding: .5em 0; }
.indexHd h1 { width: 125px; float: left;}
.indexHd h1 img { width: 100%; }

.indexHd ul { width: 500px; text-align: right; margin-top: 1em; float: right;}
.indexHd ul li { font-size: 15px; font-size: 1.5rem; display: inline-block; margin-right: 6%; transition: .3s;}
.indexHd ul li a { transition: .3s; }
.indexHd ul li a:hover { color: #AAA5A5; }
.indexHd ul .blackback a { color: #fff; transition: .5s;}
.indexHd ul .blackback { margin: 0; padding: .25em 3.8%; background: #000;}
.indexHd ul .blackback:hover { background-color: #fff;  }
.indexHd ul .blackback:hover a { color: #000;}

@media screen and (max-width:768px){
.indexHd ul { width: 400px; margin-top: 1em;}
	}
@media screen and (max-width:599px){
.indexHd { display: none; }
	}


/* ============  ハンバーガー　TOP  ============ */
.navtop { display: none; z-index: 10000;}

@media screen and (max-width:599px){
	.navtop { display: block; position: fixed; width: 100%; top:0; padding: 1em 0 0; background: #fff; }
	.navtop h1 { width: 100px;  float: left; margin-left: 15px;}
	.navtop h1 img { width: 100%; vertical-align: top; }

	/*ナビメニューのスタイルを指定*/
	.NavMenu {
	margin-top: -20em;
	transition: .5s;
	background: #ebf1f5;
	}
	.NavMenu ul{
	display: block;
	margin: 0 auto; padding: 2em 0;
	text-align: center;
	max-width: 380px;
	width: 100%;
	}
	.NavMenu ul li{
	padding: 0 ; margin: 0 5%;
	display: inline-block;
	}
	.NavMenu ul li:last-child{
	padding-bottom: 0;
	}
	.NavMenu ul li a{
	display: block; 
	color: #000;
	letter-spacing: 2px;
	}
	.NavMenu .blackback { 
	width: 30%;
	background: #000;
	padding: .5em auto; margin: 1.25em 2% 0; 
	}
	.NavMenu .tel { 
	width: 50%;
	}
	.NavMenu .blackback a{
	display: block;
	color: #fff;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 2.5;
	}


	/*トグルボタンが押されたときに付与するクラス*/
	.NavMenu.active{
	margin-top: 4em;
	transition: .5s;
	}

	.Toggle {
	display: block;
	position: fixed;  
	right: 13px;
	top: 12px;
	width: 42px;
	height: 42px;
	cursor: pointer;
	z-index: 10;
	color: #fff;
	}
	.Toggle span {
	display: block;
	position: absolute;
	width: 30px;
	border-bottom: solid 2px #000;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;	
	transition: .35s ease-in-out;	
	left: 6px;
	}
	.Toggle span:nth-child(1) {
	top: 9px;
	}
	.Toggle span:nth-child(2) {
	top: 18px;
	}
	.Toggle span:nth-child(3) {
	top: 27px;
	}
	/* 最初のspanをマイナス45度に */
	.Toggle.active span:nth-child(1) {
	top: 18px;
	left: 6px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
	}
	/* 2番目と3番目のspanを45度に */
	.Toggle.active span:nth-child(2),
	.Toggle.active span:nth-child(3) {
	top: 18px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	}
	}




/* --------------------------------------------
						中ページ
---------------------------------------------- */ 

/* ----- #headerInner header ----- */
header { display: block; width: 97%; margin: 0 auto; }
#headerInner header h1 { min-width: 420px; float: left;}
#headerInner header h1 img { max-width: 125px; margin: .1em 0 .5em 2%; display: inline-block;}
#headerInner header h1 span { font-size: 12px; font-size: 1.2rem; padding: 0 0 2em 3%; display: inline-block;}
#headerInner header h1 span br { display: none; }

#headerInner header ul { width: 390px; float: right; padding-top: .75em; text-align: right;}
#headerInner header ul .tel { display: inline-block; padding: 0 10px .2em 0; font-size: 28px; font-size: 2.8rem; vertical-align: middle;}
#headerInner header ul .tel span { font-size: 14px; font-size: 1.4rem; margin-right: 8px; }
#headerInner header ul .blackback { display: inline-block; padding: .25em 5%; background-color: #000; border: solid 1px; transition: .3s; }
#headerInner header ul .blackback a { color: #fff; font-size: 14px; font-size: 1.4rem;}
#headerInner header ul .blackback:hover { background-color: #fff;  }
#headerInner header ul .blackback:hover a { color: #000;  }

#headerInner header .showPc { display: block;}
#headerInner header .showSp { display: none;}

@media screen and (max-width:840px){
	#headerInner header h1 { min-width: 370px; margin: -.2em 0 .2em; padding: 0; }
	#headerInner header h1 img { width: 85px; vertical-align: middle; margin: 0;}
	#headerInner header h1 span { padding-top: 1em; line-height: 0; vertical-align: bottom;}
	#headerInner header ul { width: 350px; padding-top: 0.5em;}
	#headerInner header ul .tel { font-size: 22px; font-size: 2.2rem; }
	#headerInner header ul .blackback { padding: .1em 5% .18em;}
}
@media screen and (max-width:768px){
	#headerInner header h1 { min-width: 330px; }
	#headerInner header ul { width: 300px; }
	}
@media screen and (max-width:660px){
	#headerInner header h1 { min-width: 220px;}
	#headerInner header ul { width: 280px; }
	#headerInner header ul .tel { color: #fff; padding: .72em 3.5%; margin-right: 2%; vertical-align: top; line-height: 0; background: #000;}
	#headerInner header ul .tel a { color: #fff; font-size: 16px; font-size: 1.6rem; vertical-align: middle; }
	#headerInner header ul .blackback { }
	#headerInner header .showPc { display: none;}
	#headerInner header .showSp { display: block;}
	#headerInner header h1 span { padding: 0 0 0em 1%; line-height: 1.5; vertical-align: middle; text-align: left;}
	#headerInner header h1 span br { display: block;}
	}
@media screen and (max-width:520px){
	#headerInner header h1 { display: block; float: none; text-align: center; margin-top: .35em; }
	#headerInner header h1 img { max-width: 130px; width: 100%; margin: 0 0 0 2%; }
	#headerInner header h1 span { margin-top: -.4em;}
	#headerInner header ul { display: flex; justify-content: space-between; float: none; padding-top: 0; margin: 1em auto 1.5em; max-width: 300px; width: 90%; text-align: center;}
	}


 /*----- #headerInner nav -----*/
#headerInner nav { margin-bottom: 5em; padding: .8em 2%; background: #ebf1f5; font-size: 14px; font-size: 1.4rem; }
#headerInner nav ul {}
#headerInner nav  ul li a { transition: .3s; }
#headerInner nav  ul li a:hover { transition: .3s; color: #a1a1b3; }
#headerInner nav .navPstn { float: left;}
#headerInner nav .navPstn ul { width: 200px; }
#headerInner nav .navPstn ul li { display: inline-block; margin-right: 15px; }

#headerInner nav .navGaide { float: right;}
#headerInner nav .navGaide ul { text-align: right;}
#headerInner nav .navGaide ul li { display: inline-block; padding-left: 30px; vertical-align: middle; }
#headerInner nav .navGaide ul li:first-child { pading-left: 0;}

@media screen and (max-width:520px){
	#headerInner nav { }
	#headerInner nav .navPstn { float: none; display: none;}
	#headerInner nav .navGaide { float: none; }
	#headerInner nav .navGaide ul { text-align: center;}
	#headerInner nav .navGaide ul li { display: inline-block; padding-left: 0; margin: 0 4.5%;}
	}