@charset "utf-8";

/*
 *
 *	common style
 *
 */

/*======================================
	common
======================================*/
*, *:before, *:after {
		-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	background: #fff;
	font-size: .875em;
	font-family: -apple-system,BlinkMacSystemFont,'Helvetica Neue','Helvetica','Arial','Segoe UI','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,'MS PGothic',sans-serif;
	color: #000;
		-webkit-text-size-adjust: 100%;
}


/****** selection ******/
::selection {
	background: #E0E0E0;
	text-shadow: #fff 1px 1px 0;
	color: #000;
}
::-moz-selection {
	background: #E0E0E0;
	text-shadow: #fff 1px 1px 0;
	color: #000;
}


/****** a Link ******/
a, a:visited, a img, a:after, a:before,
.hoverBtn {
	color: #000;
	text-decoration: none;
		-moz-transition: all .4s ease;
		-webkit-transition: all .4s ease;
		-ms-transition: all .4s ease;
    transition: all .4s ease;
}
a:hover,
.hoverBtn:hover {
	opacity: .6;
}


/****** images ******/
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
.pc,
img.pcImg {display: none;}

.clearfix:after{content:"";display:block;clear:both;}



/*======================================
	gHeader
======================================*/
.gHeader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 9px 0;
	z-index: 7050;
}
.gHeader h1 {text-align: center;}
.gHeader h2 {
	position: absolute;
	top: 19px;
	left: 14px;
}
.gHeader .navToggle {
	position: absolute;
	top: 19px;
	right: 20px;
	width: 16px;
	height: 11px;
	cursor: pointer;
}
.gHeader .navToggle:before,
.gHeader .navToggle:after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: #fff;
}
.gHeader .navToggle:before {box-shadow: #fff 0 -4px 0;}
.gHeader .navToggle:after {box-shadow: #fff 0 4px 0;}



/*======================================
	gNav
======================================*/
.gNav {
	display: none;
	position: fixed;
	overflow-y: auto;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 9px 0;
	background: #000;
	z-index: 8000;
}

.gNav h1 {
	margin-bottom: 25px;
	text-align: center;
}

.gNav ul {
	max-width: 660px;
	margin: 0 auto;
	padding: 0 10px;
}
.gNav ul li {
	margin-bottom: 20px;
}
.gNav ul li a {
	display: flex;
	align-items: center;
	color: #fff;
}
.gNav ul li a figure {
	flex-basis: 90px;
	padding-right: 15px;
}
.gNav ul li a p {
	flex: 1;
}
.gNav ul li a p span {
	display: inline-block;
	margin-right: 1em;
	padding: 1em 1em 1em 0;
	font-size: .8em;
	border-right: #fff solid 2px;
}

/* urushi sp */
@media screen and (max-width:639px) {
	.gNav .navurushi{
		max-height: 14px;
		width: auto;
	}
}


/****** navClose ******/
.gNav .navClose {
	display: block;
	position: absolute;
	top: 19px;
	right: 20px;
	width: 16px;
	height: 16px;
	cursor: pointer;
}
.gNav .navClose:before,
.gNav .navClose:after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: #fff;
}
.gNav .navClose:before {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.gNav .navClose:after {
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}



/*======================================
	gFooter
======================================*/
.gFooter {
	position: relative;
	padding: 27px 22px 12px;
	background: #000;
	color: #fff;
}

/****** snsLink ******/
.gFooter .snsLink {
	margin-bottom: 23px;
	text-align: center;
	letter-spacing: -.5em;
}
.gFooter .snsLink li {
	display: inline-block;
	margin: 0 10px;
	letter-spacing: normal;
}

/****** logo ******/
.gFooter .logo {float: left;}
.gFooter .logo h1 {margin-bottom: .75em;}
.gFooter .logo p {letter-spacing: .05em; font-size:.786em;}

.gFooter h2 {float: right;}

/****** pageTop ******/
.gFooter .pageTop {
	display: none;
	position: fixed;
	bottom: 15px;
	right: 20px;
	width: 30px;
	height: 30px;
	background: #000;
	cursor: pointer;
	z-index: 7050;
}
.gFooter .pageTop.bottom {
	position: absolute;
	top: -45px;
	bottom: auto;
}
.gFooter .pageTop:before {
	content: '';
	display: block;
	position: absolute;
	top: 10px;
	left: 9px;
	width: 12px;
	height: 1px;
	background: #fff;
}
.gFooter .pageTop:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 5px;
	left: 50%;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border: #fff solid;
	border-width: 1px 0 0 1px;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}



/*======================================
	pageH
======================================*/
.pageH {position: relative;}

.pageH .scroll {
	display: block;
	position: relative;
	width: 100px;
	margin: 1em auto 0;
	padding-top: 30px;
	text-align: center;
	letter-spacing: .1em;
	font-size: .727em;
	color: #fff;
}
.pageH .scroll span {
	display: block;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 25px;
	background: rgba(255,255,255,.3);
}
.pageH .scroll span:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
		-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
		-webkit-animation: topScrollAttention 2s ease infinite;
	animation: topScrollAttention 2s ease infinite;
}
@-webkit-keyframes topScrollAttention {
	from {-webkit-transform: translateY(-100%); transform: translateY(-100%);}
	to {-webkit-transform: translateY(100%); transform: translateY(100%);}
}
@keyframes topScrollAttention {
	from {-webkit-transform: translateY(-100%); transform: translateY(-100%);}
	to {-webkit-transform: translateY(100%); transform: translateY(100%);}
}





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

	responsive

============================================================================*/
@media screen and (min-width:640px) {
	body {font-size: 1.25em;}
	
	.pc {display: block;}
	img.pcImg {display: inline;}
	.sp,
	img.spImg {display: none;}
	
	/*======================================
		gHeader
	======================================*/
	.gHeader {padding: 29px 0;}
	.gHeader h1 img {width: 218px;}
	.gHeader h2 {
		top: 40px;
		left: 40px;
	}
	.gHeader h2 img {width: 122px;}
	.gHeader .navToggle {
		top: 38px;
		right: 30px;
		width: 60px;
		height: 47px;
	}
	.gHeader .navToggle:before,
	.gHeader .navToggle:after {height: 3px;}
	.gHeader .navToggle:before {box-shadow: #fff 0 -22px 0;}
	.gHeader .navToggle:after {box-shadow: #fff 0 22px 0;}



	/*======================================
		gNav
	======================================*/
	.gNav {padding: 29px 0;}
	
	.gNav h1 {margin-bottom: 108px;}
	.gNav h1 img {width: 218px;}
	
	.gNav ul li {margin-bottom: 40px;}
	.gNav ul li a figure {
		flex-basis: 180px;
		padding-right: 30px;
	}
	.gNav ul li a p img {width: auto;}
	.gNav ul li a p span {
		margin-right: 1.5em;
		padding: 1.5em 1em 1.5em 0;
	}
	/* urushi */
	.gNav .navurushi{
		max-height: initial;
	}

	/****** navClose ******/
	.gNav .navClose {
		top: 38px;
		right: 30px;
		width: 48px;
		height: 48px;
	}
	.gNav .navClose:before,
	.gNav .navClose:after {height: 3px;}



	/*======================================
		gFooter
	======================================*/
	.gFooter {padding: 70px 60px 60px;}
	.gFooter > * {max-width: 33.333%;}

	/****** snsLink ******/
	.gFooter .snsLink {
		float: right;
		margin-bottom: 0;
	}
	.gFooter .snsLink li {
		display: block;
		float: left;
	}
	.gFooter .snsLink li img {width: 60px;}

	/****** logo ******/
	.gFooter .logo h1 img {width: 157px;}
	.gFooter .logo p {font-size: .7em;}

	.gFooter h2 {
		float: none;
		margin: 0 auto;
		text-align: center;
	}
	.gFooter h2 img {width: 181px;}

	/****** pageTop ******/
	.gFooter .pageTop {
		bottom: 40px;
		right: 40px;
		width: 44px;
		height: 44px;
	}
	.gFooter .pageTop.bottom {top: -84px;}
	.gFooter .pageTop:before {
		top: 15px;
		left: 13px;
		width: 18px;
	}
	.gFooter .pageTop:after {
		bottom: 8px;
		width: 12px;
		height: 12px;
		margin-left: -6px;
	}



	/*======================================
		pageH
	======================================*/
	.pageH .scroll {padding-top: 60px;}
	.pageH .scroll span {
		width: 2px;
		height: 50px;
	}

}