/**********************************************
	ヘッダー
**********************************************/
#header {
	position:fixed;
	width:100%;
	height:80px;
	top:0;
	left:0;
}

#headerLogo {
	display:none;
	position:fixed;
	z-index:201;
	top:12px;
	left:8px;
}

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

	#headerLogo {
	top:11px;
	}

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

#viewCart a {
	position:fixed;
	z-index:999;
	top:10px;
	right:75px;
	width:40px;
	text-align:center;
	font-size:32px;
	cursor:pointer;
	color:#fff;
}

#naviToggle {
	position:fixed;
	z-index:999;
	padding:0 5px;
	top:10px;
	right:10px;
	width:30px;
	height:46px;
	cursor:pointer;
}

#naviToggle div {
	position:relative;
}

#naviToggle div span {
	position:absolute;
	display:block;
	width:100%;
	height:3px;
	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:10px;
}

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

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

#naviToggleMenu {
	position:absolute;
	top:34px;
	width:30px;
	text-align:center;
	font-size:10px;
	color:#fff;
}

#globalMenu {
	display:none;
	position:fixed;
	overflow-y:auto;
	z-index:900;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(34,34,34,0.98);
	opacity:0;
}

/* #naviToggle 切り替えアニメーション */
.open #viewCart {
	color:#fff;
}

.open #naviToggleMenu {
	color:#fff;
}

.open #naviToggle div span:nth-child(1) {
	width:80%;
	top:18px;
	left:10%;
	background-color:#fff;
	-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:18px;
	left:10%;
	background-color:#fff;
	-webkit-transform:rotate(-315deg);
	-moz-transform:rotate(-315deg);
	transform:rotate(-315deg);
}

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

@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;
	}
}

/**********************************************
	メインメニューとサブメニュー
**********************************************/
#menuInLogo {
	margin-top:80px;
	text-align:center;
}

#menuInMenu {
	margin:80px 0 40px 0;
	text-align:center;
	font-size:20px;
	font-weight:bold;
	color:#fff;
}

#mainMenu {
	margin:0 auto;
	padding:20px 0;
	max-width:600px;
}

#mainMenu li {
	float:left;
	margin:0 4%;
	width:42%;
}

#mainMenu i {
	display:inline-block;
	width:34px;
	text-align:center;
	color:#999;
}

#mainMenu li a {
	display:block;
	margin:10px;
	padding:5px 0;
	font-size:95%;
	color:#fff;
	border-bottom:1px solid #999;
}

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

#subMenu {
	clear:both;
	margin:0 auto;
	padding:20px 0;
	max-width:600px;
}

#subMenu li {
	text-align:center;
}

#subMenu li a {
	display:block;
	margin:10px;
	padding:5px 0;
	font-size:90%;
	color:#fff;
}

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

@media screen and (max-width:768px) {
	#menuInLogo {
		margin-top:80px;
	}

	#menuInMenu {
		margin:40px 0 0 0;
	}

	#mainMenu li {
		margin:0 1%;
		width:48%;
	}
}

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

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

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

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

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

#footerInner {
	margin:0 auto;
	padding:0 10px;
	padding-bottom:50px;
	max-width:calc(1024px - 20px);
}

#corpTelBox {
	margin:20px 30px;
	padding:5px 10px;
	text-align:center;
	background-color:#2e2e2e;
	color:#fff;
	border-radius:5px;
}

.footerTel {
	font-weight:bold;
	font-size:28px;
}

.footerTel a {
	color:#fff !important;
}

#footerCorp {
	margin:20px 0;
}

#footerCorpText {
	font-size:14px;
	color:#2e2e2e;
}

#footerCorpLogo {
	font-size:32px;
	font-weight:bold;
	color:#2e2e2e;
}

.footerText {
	color:#2e2e2e;
}

.footerText a {
	color:#2e2e2e !important;
}

.corpText i {
	font-size:145%;
}

.corpInfo {
	font-size:90%;
}

.corpTel {
	font-size:125%;
}

@media screen and (max-width:768px) {
	#footerCorp , .footerText {
		text-align:center;
	}

	#footerCorpLogo {
		font-size:24px;
	}
}