/**********************************************
	ヘッダー
**********************************************/
#header {
	z-index:900;
	width:100%;
	height:110px;
	background-color:#fff;
}

#headerInner {
	position:relative;
	margin:0 auto;
	max-width:1024px;
}

#headerLogo {
	position:absolute;
	z-index:1000;
	top:0;
	left:0;
}

#headerLogo img {
	width:140px;
	height:auto;
}

#globalMenu {
	float:left;
	margin-left:160px;
	border-bottom:1px solid #fff;
}

#naviToggle {
	display:none;
	position:fixed;
	z-index:1100;
	padding:0 5px;
	top:12px;
	right:12px;
	width:72px;
	height:45px;
	cursor:pointer;
	background-color:rgba(0,0,0,0.4);
}

#naviToggle div {
	position:relative;
	width:36px;
	height:45px;
}

#naviToggle div span {
	position:absolute;
	display:block;
	margin:0;
	padding:0;
	width:100%;
	height:1px;
	left:0;
	background-color:#fff;
	-webkit-transition:.3s ease-in-out;
	-moz-transition:.3s ease-in-out;
	transition:.3s ease-in-out;
}

#naviToggle span:nth-child(1) {
	top:14px;
}

#naviToggle span:nth-child(2) {
	top:22px;
}

#naviToggle span:nth-child(3) {
	top:30px;
}

#naviToggleMenu {
	position:absolute;
	top:0;
	right:5px;
	line-height:45px;
	font-size:10px;
	color:#fff;
}

/* #naviToggle 切り替えアニメーション */
.open #naviToggle div span:nth-child(1) {
	width:80%;
	top:22px;
	left:10%;
	-webkit-transform:rotate(315deg);
	-moz-transform:rotate(315deg);
	transform:rotate(315deg);
}

.open #naviToggle div span:nth-child(2) {
	width:0;
	left:50%;
}

.open #naviToggle div span:nth-child(3) {
	width:80%;
	top:22px;
	left:10%;
	-webkit-transform:rotate(-315deg);
	-moz-transform:rotate(-315deg);
	transform:rotate(-315deg);
}

.open #globalMenu {
	display:block;
	opacity:1;
	-webkit-animation-duration:0.5s;
	-webkit-animation-name:fade-in;
	-moz-animation-duration:0.5s;
	-moz-animation-name:fade-in;
	animation-duration:0.5s;
	animation-name:fade-in;
}

@media screen and (max-width:1024px) {
	#header {
		height:0;
	}

	#headerLogo {
		top:12px;
		left:12px;
	}

	#headerLogo img {
		width:22vw;
		height:auto;
	}

	#naviToggle {
		display:block;
	}

	#globalMenu {
		display:none;
		position:fixed;
		overflow-y:auto;
		z-index:1000;
		margin:0;
		padding:0;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background-color:rgba(0,0,0,0.9);
		border-bottom:none;
		opacity:0;
	}
}

@keyframes fade-in {
	0% {
		display:none;
		opacity:0;
	}

	1% {
		display:block;
		opacity:0;
	}

	100% {
		display:block;
		opacity:1;
	}
}

@-moz-keyframes fade-in {
	0% {
		display:none;
		opacity:0;
	}

	1% {
		display:block;
		opacity:0;
	}

	100% {
		display:block;
		opacity:1;
	}
}

@-webkit-keyframes fade-in {
	0% {
		display:none;
		opacity:0;
	}

	1% {
		display:block;
		opacity:0;
	}

	100% {
		display:block;
		opacity:1;
	}
}

/**********************************************
	メインメニューとサブメニュー
**********************************************/
#mainMenu {
	margin:15px 0;
}

#mainMenu li {
	float:left;
}

#mainMenu li a {
	display:block;
	margin:0 10px;
	padding:10px 10px;
	line-height:20px;
	font-size:95%;
	font-family:"Sawarabi Mincho";
	color:#222;
}

#mainMenu li a:hover {
	text-decoration:none;
}

#menuInCorp {
	display:none;
}

#menuInAddress {
	display:none;
}

@media screen and (max-width:1024px) {
	#mainMenu {
		margin:0 auto;
		padding:40px 5% 20px 5%;
	}

	#mainMenu li {
		float:none;
		height:auto;
	}

	#mainMenu li a {
		display:block;
		margin:0;
		padding:20px 0;
		line-height:20px;
		font-size:115%;
		text-align:center;
		color:#fff;
		border-bottom:1px solid #666;
	}

	#mainMenu li a:hover {
		text-decoration:none;
		color:#999;
	}

	#menuInCorp {
		display:block;
		margin-top:20px;
		text-align:center;
		font-size:115%;
		color:#fff;
	}

	#menuInAddress {
		display:block;
		margin-top:10px;
		text-align:center;
		color:#a0a0a0;
	}

}

/**********************************************
	ページトップ
**********************************************/
#pageTop {
	position:fixed;
	z-index:800;
	bottom:10px;
	right:10px;
}

#pageTop img {
	width:50px;
	height:auto;
}

#pageTop a:hover {
	text-decoration:none;
	color:#666 !important;
}

@media screen and (max-width:1024px) {
	#pageTop img {
		width:40px;
		height:auto;
	}
}

/**********************************************
	フッター
**********************************************/
#footer {
	clear:both;
	padding-top:20px;
	width:100%;
	background-color:#600624;
}

#footerInner {
	margin:0 auto;
	padding:0 2vw;
	padding-bottom:20px;
	max-width:calc(1024px - 4vw);
	text-align:center;
	color:#c9c9c9;
}

#footerLogo {
	margin:2vh auto;
}

#footerLogo img {
	width:20vw;
	height:auto;
}

.corpInfo {
	margin:0.25em 0;
	font-size:90%;
}

.corpTel {
	font-weight:bold;
}

@media screen and (max-width:1024px) {
	#footerLogo img {
		width:45vw;
	}
}
