@charset "utf-8";

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

	style
	 
----------------------------------------------------
*
		main
		productCategory
		pickup
*
================================================= */

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

		main

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

#main {
	position: relative;
	background-color: #333;
}
#main #main02,
#main #main03 {
	display: none;
}

#main .mainBlk {
	position: relative;
}
#main .mainBlk .mainImg {
	position: relative;
}


/*	txt / copyright
---------------------------------------------- */

#main .mainBlk p {
	position: absolute;
}

#main .mainBlk .txt {
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
	animation: fadeIn 2s ease 0s 1 normal;
}
#main01 .txt,
#main02 .txt {
	width: 560px;
	width: 29.78723404255319%;
	min-width: 300px;
}
#main01 .txt {
	left: 20px;
	left: 1.063829787234043%;
	top: 415px;
	top: 41.5%;
	top: 47vh;
}
#main02 .txt {
	left: 78px;
	left: 4.148936170212766%;
	top: 197px;
	top: 19.7%;
}
#main03 .txt {
	left: 55px;
	left: 2.925531914893617%;
	top: 62px;
	top: 6.2%;
	width: 288px;
	width: 15.31914893617021%;
	min-width: 200px;
}

#main .mainBlk .copyright {
	bottom: 25px;
	bottom: 2.5%;
	width: 240px;
	width: 12.76595744680851%;
}
#main01 .copyright {
	right: 150px;
	right: 7.978723404255319%;
}
#main03 .copyright,
#main02 .copyright {
	right: 30px;
	right: 1.595744680851064%;
}


/* JPEG original size */
@media screen and (max-width: 1880px){

#main .mainBlk .mainImg img {
	width: 1880px;
	height: auto;
}
}


/* sp size */
@media screen and (max-width: 750px){

#main01 .txt,
#main02 .txt {
	width: 70%;
	max-width: 300px;
	min-width: 0px;
	min-width: none;
	min-width: auto;
	min-width: initial;
}
#main03 .txt {
	width: 100%;
	max-width: 200px;
	min-width: 0px;
	min-width: none;
	min-width: auto;
	min-width: initial;
	padding-right: 50px;
}

#main .mainBlk .copyright {
	width: 40%;
	max-width: 96px;
}
}








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

		productCategory

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

#productCategory {
	background: url(../img/product_category_bg.jpg) right top no-repeat;
	background-size: cover;
}

#productCategory .readArea {
	margin: 12px 0 62px;
	text-align: center;
}


/* ----------------------------------------------
		nav
---------------------------------------------- */

#productCategory nav {
	width: 800px;
	width: 83.33333333333333%;
}

#productCategory nav ul li {
	width: 580px;
	width: 72.5%;
	margin-top: 30px;
	background-color: #333;
}
#productCategory nav ul li:nth-of-type(1) {
	margin-top: 0px;
}
#productCategory nav ul li:nth-of-type(even) {
	margin-left: 220px;
	margin-left: 27.5%;
}

#productCategory nav ul li a {
	display: block;
	position: relative;
	text-decoration: none;
	color: #fff;
}
#productCategory nav ul li a img {
	position: relative;
	z-index: 1;
	display: block;
	opacity: 0.3;
}
#productCategory nav ul li a h2 {
	position: absolute;
	z-index: 2;
	right: 20px;
	bottom: 15px;
	text-align: right;
	font-family: 'Domine', serif;
	font-weight: normal;
	font-size: 24px;
	font-size: 171%;
	line-height: 1.2;
}

#productCategory nav ul li a:hover {
	opacity: 1;
}
#productCategory nav ul li a:hover img {
	opacity: 0.8;
}
#productCategory nav ul li a:hover h2 {
	-moz-text-shadow: 0px 0px 1px #777, 0px 0px 2px #888, 0px 0px 3px #999;
	-webkit-text-shadow: 0px 0px 1px #777, 0px 0px 2px #888, 0px 0px 3px #999;
	-ms-text-shadow: 0px 0px 1px #777, 0px 0px 2px #888, 0px 0px 3px #999;
	text-shadow: 0px 0px 1px #777, 0px 0px 2px #888, 0px 0px 3px #999;
}


@media screen and (max-width: 750px) {

#productCategory nav {
	width: 100%;
}

#productCategory nav ul li {
	width: 100%;
	margin-top: 30px;
}
#productCategory nav ul li:nth-of-type(even) {
	margin-left: 0%;
}

#productCategory nav ul li a {
	overflow: hidden;
}
#productCategory nav ul li a img {
	width: 140%;
	margin-left: -20%;
}
}








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

		pickup

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

#pickup .inrTB {
	-moz-box-shadow: 0px 0px 10px 0px #333;
	-webkit-box-shadow: 0px 0px 10px 0px #333;
	box-shadow: 0px 0px 10px 0px #333;
}



/* ----------------------------------------------
		nav
---------------------------------------------- */

@media screen and (max-width: 750px) {

#pickup .listProduct ul li:nth-child(1)::before {
	display: inline-block;
}
	
#pickup .listProduct ul li:nth-child(1) a {
	margin-top: 60px;
}
}


@media screen and (max-width: 420px) {
	
#pickup .listProduct ul li:nth-child(1)::before {
	display: inline-block;
}
	
#pickup .listProduct ul li:nth-child(1) a {
	margin-top: 50px;
}
}