@charset "utf-8";

/*
 *
 *	top style
 *
 */

body {background: rgba(0,0,0,.2);}

/*======================================
	gHeader
======================================*/
.gHeader.scrolled {
	height: 51px;
	background: rgba(129, 81, 28, .5);
}
.gHeader h1 {display: none;}



/*======================================
	pageH
======================================*/
.pageH {
	display: flex;
	align-items: center;
	height: 80vh;
	background: url(../images/tit-bg_sp.png) center repeat-x;
	background-size: auto 100%;
}

.pageH .txt {
	position: relative;
	width: 100%;
	padding: 0 10px;
}
.pageH .txt h1 {
	position: absolute;
	top: 0;
	left: 50%;
	width: 262px;
	margin-left: -131px;
	padding-top: 9px;
		-moz-transition: width .4s, margin .4s;
		-webkit-transition: width .4s, margin .4s;
		-ms-transition: width .4s, margin .4s;
    transition: width .4s, margin .4s;
}
.pageH .txt h1.scrolled {
	position: fixed;
	top: 0;
	left: 50%;
	width: 109px;
	margin-left: -54px;
	z-index: 7050;
}
.pageH .txt p {
	width: 90%;
	max-width: 700px;
	line-height: 1.9;
	margin: 0 auto;
	padding-top: 140px;
	text-align: center;
	letter-spacing: .05em;
	color: #fff;
}

/****** scroll ******/
.pageH .scroll {
	position: absolute;
	bottom: 1.5em;
	left: 50%;
	margin-left: -50px;
}



/*======================================
	pageNav
======================================*/
.pageNav {position: relative;}
.pageNav a {
	position: absolute;
	top: 21%;
	width: 100%;
	display: block;
	color: #fff;
	z-index: 10;
}
.pageNav h1 {
	margin-bottom: 30px;
	text-align: center;
}
.pageNav h1 span {
	display: inline-block;
	margin-right: 1em;
	padding: 1em 1em 1em 0;
	border-right: #fff solid 2px;
	letter-spacing: .025em;
	font-size: .8em;
}
.pageNav h2 {
	margin-bottom: 50px;
	text-align: center;
}
.pageNav .view {
	position: relative;
	display: block;
	width: 80px;
	height: 20px;
	line-height: 17px;
	margin: 0 auto;
	border: #fff solid 1px;
	text-align: center;
	letter-spacing: .1em;
	font-size: .727em;
}
.pageNav .view:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 100%;
	bottom: 0;
	background: #fff;
	z-index: -1;
		-moz-transition: right .4s;
		-webkit-transition: right .4s;
		-ms-transition: right .4s;
    transition: right .4s;
}
.pageNav a:hover .view {color: #000;}
.pageNav a:hover .view:before {right: 0;}

.pageNav figure {
	position: relative;
	overflow: hidden;
	z-index: 0;
}
.pageNav figure img {
	width: 170%;
	max-width: 170%;
	margin-left: -35%;
}

/* zengarden */
.pageNav.zengarden {z-index: 20;}
/* enamel */
.pageNav.enamel {margin-top: -28%; z-index: 19;}
.pageNav.enamel a {top: 25%;}
/* shippo_enamel */
.pageNav.shippo_enamel {margin-top: -37%; z-index: 18;}
.pageNav.shippo_enamel a {top: 25%;}
.pageNav.shippo_enamel figure img {
	width: 100%;
	margin-left: 0;
}
/* urushi */
.pageNav.urushi {margin-top: -42%; z-index: 17;}
.pageNav.urushi a {top: 33%;}
.pageNav.urushi figure img {
	width: 100%;
	margin-left: 0;
}
/* urushi sp */
@media screen and (max-width:639px) {
	.pageNav.urushi h1 img{
		max-height: 17px;
		width: auto;
	}
}
@media screen and (max-width:355px) {
	.pageNav.urushi a {top: 21%;}
}

/* cocktail */
.pageNav.cocktail {margin-top: -20%; z-index: 16;}
.pageNav.cocktail a {top: 33%;}
.pageNav.cocktail figure img {
	width: 100%;
	margin-left: 0;
}
@media screen and (max-width:900px) {
	.pageNav.cocktail a {top: 25%;}
}
/* cocktail sp */
@media screen and (max-width:355px) {
	.pageNav.cocktail a {top: 23%;}
}


/* arita */
.pageNav.arita {margin-top: -18%; z-index: 16;}
.pageNav.arita a {top: 38%;}
.pageNav.arita figure img {
	width: 100%;
	margin-left: 0;
}
@media screen and (max-width:900px) {
	.pageNav.arita a {top: 27%;}
}

/* arita sp */
@media screen and (max-width:375px) {
	.pageNav.arita a {top: 22%;}
}




/****** cs ******/
.cs {
	padding: 28.26% 10px 41.33%;
	text-align: center;
	letter-spacing: .025em;
	font-size: 1.091em;
	color: #fff;
}



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

	responsive

============================================================================*/
@media screen and (min-width:640px) {
	.gHeader.scrolled {height: 124px;}

	/*======================================
		pageH
	======================================*/
	.pageH {background-image: url(../images/tit-bg_pc.png);}

	.pageH .txt h1 {
		width: 480px;
		margin-left: -240px;
		padding-top: 29px;
	}
	.pageH .txt h1.scrolled {
		width: 218px;
		margin-left: -109px;
	}
	.pageH .txt p {padding-top: 240px;}



	/*======================================
		pageNav
	======================================*/
	.pageNav a {
		top: 17%;
		width: 70%;
		left: 15%;
	}
	.pageNav h1 {margin-bottom: 5%;}
	.pageNav h2 {margin-bottom: 10%;}
	.pageNav .view {
		width: 160px;
		height: 40px;
		line-height: 35px;
		border-width: 2px;
	}
	.pageNav h1 img,
	.pageNav h2 img {width: auto;}

	.pageNav figure img {
		width: 100%;
		margin-left: 0;
	}

	/* enamel */
	.pageNav.enamel {margin-top: -18.5%;}
	.pageNav.enamel a {top: 26%;}
	/* shippo_enamel */
	.pageNav.shippo_enamel {margin-top: -50%;}
	.pageNav.shippo_enamel a {top: 45%;}
	/* urushi */
	.pageNav.urushi h1 img{
		max-height: initial;
		width: auto;
	}


	/****** cs ******/
	.cs {
		padding: 16.64% 10px 24.375%;
		font-size: 1.1em;
	}

}