@charset "utf-8";

/*
 *
 *	common style
 *
 */

/*======================================
	common
======================================*/
*, *:before, *:after {
		-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-size: .938rem;
	font-family: "Yu Gothic", "游ゴシック", "YuGothic", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", sans-serif;
	color: #221815;
		-webkit-text-size-adjust: 100%;
}


/****** selection ******/
::selection {
	background: #ff0;
	color: #221815;
}
::-moz-selection {
	background: #ff0;
	color: #221815;
}


/****** a Link ******/



a, a:visited, a img, a:before, a:after,
.hoverBtn {
	color:  black;
	text-decoration: none;
		-moz-transition: opacity .4s ease;
		-webkit-transition: opacity .4s ease;
		-ms-transition: opacity .4s ease;
    transition: opacity .4s ease;
	cursor: pointer;
}
a:hover,
hoverBtn:hover {
	opacity: .6;
}

/****** images ******/
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}


/****** common ******/
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.pc {display: inline;}
.sp {display: none;}
.pcImg {display: inline;}
.spImg {display: none;}



/*======================================
	gHeader
======================================*/
.gHeader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 18px;
	border-top: #ff0 solid 15px;
	background:  #fff;
	z-index: 10000;
}
.gHeader .wrapper {
	max-width: 980px;
	margin: 0 auto;
	padding-left: 20px;
}

.gHeader .logo {
	float: left;
	margin-bottom: 20px;
}


/****** gNav ******/
.gHeader .gNav {
	float: right;
}
.gHeader .gNav ul li {
	float: left;
	margin-left: 70px;
	padding-bottom: 17px;
}
.gHeader .gNav ul li:first-child {margin-left: 0;}
.gHeader .gNav ul li.current {
	background: url(../images/nav-current.png) bottom center no-repeat;
	background-size: 28px 9px;
}
.gHeader .gNav ul li img {
	height: 10px;
	width: auto;
}


/****** navToggle ******/
.gHeader .navToggle {
	display: none;
}



/*======================================
	gFooter
======================================*/
.gFooter {
	background: #fff;
	padding: 24px 30px;
}




/*============================================================================

	responsive

============================================================================*/
@media screen and (max-width:640px) {
	body {
		font-size: .75rem;
	}


	/****** common ******/
	.pc {display: none;}
	.sp {display: block;}
	.pcImg {display: none;}
	.spImg {display: inline;}



	/*======================================
		gHeader
	======================================*/
	.gHeader {
		padding-top: 16px;
		border-top: none;
	}
	.gHeader .wrapper {
		padding-left: 15px;
	}
	
	.gHeader h1 {
		width: 167px;
		margin-bottom: 11px;
	}

	
	/****** navToggle ******/
	.gHeader .navToggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 44px;
		height: 44px;
		background: #ff0;
		cursor: pointer;
	}
	.gHeader .navToggle:before,
	.gHeader .navToggle:after {
		content: '';
		display: block;
		position: absolute;
		top: 21px;
		left: 10px;
		width: 25px;
		height: 3px;
		background: #fff;
	}
	.gHeader .navToggle:before {
		box-shadow: #fff 0 -8px 0;
	}
	.gHeader .navToggle:after {
		box-shadow: #fff 0 8px 0;
	}
	.gHeader .navToggle.close:before {
		box-shadow: none;
			-webkit-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.gHeader .navToggle.close:after {
		box-shadow: none;
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	/****** gNav ******/
	.gHeader .gNav {
		display: none;
		float:  none;
		clear:  both;
		margin-left: -15px;
	}
	.gHeader .gNav ul li {
		float: none;
		margin-left: 0;
		padding: 0;
		background: #ff0;
		border-bottom: #fff solid 1px;
	}
	.gHeader .gNav ul li:last-child {
		border-bottom: none;
	}
	.gHeader .gNav ul li.current {background: #ff0;}
	.gHeader .gNav ul li a {
		display: block;
		padding: 1em;
		text-align: center;
	}



	/*======================================
		gFooter
	======================================*/
	.gFooter {
		padding: 15px;
	}

}