@import url(reset.css);
@import url(base.css);


/* header
--------------------------------------------------------------------*/

#header {
	position: relative;
}

#header .bg img {
	width: 100%;
}

#header .logo {
	position: absolute;
	top: 3%;
	left: 3%;
}

#header .txt {
	position: absolute;
	left: 10%;
	bottom: 30%;
}


/* container
--------------------------------------------------------------------*/

#container {
	background: url("../jintannow/image/cont_bg.png") repeat-x #fbf2d6;
	padding: 100px 0 60px;
}

#container .inner {
	width: 1200px;
	margin: 0 auto;
}

.cat_wrap {
	text-align: center;
	margin: 0 0 50px;
}


.cat_wrap .catbox {
	display: inline-block;
	padding: 10px 10px;
	position: relative;
	background: #fff;
	min-width: 75%;
}

.cat_wrap .catbox:before {
	background: url("../jintannow/image/arrow_left.png") left top no-repeat;
	width: 21px;
	height: 100%;
	background-size: cover;
	content: '';
	position: absolute;
	top: 0;
	left: -20px;
}

.cat_wrap .catbox:after {
	background: url("../jintannow/image/arrow_right.png") right top no-repeat;
	width: 21px;
	height: 100%;
	background-size: cover;
	content: '';
	position: absolute;
	top: 0;
	right: -20px;
}


.cat_wrap .catbox .icon01 {
	position: absolute;
	top: -25px;
	left: 0;
}

.cat_wrap .catbox .icon02 {
	position: absolute;
	top: -25px;
	right: 0;
}

.simplefilter {
	text-align: center;
}

.simplefilter li {
	display: inline-block;
	text-align: center;
	line-height: 1.0;
	margin-right: 2%;
	cursor: pointer;
}


/* itembox */


#itembox {
	overflow: hidden;
	zoom:1;
}

.filtr-container {
	display: block;
}

#itembox li.filtr-item {
	width: 19%;
	min-height: 230px;
	padding: 0 0.5% 0 0;
}



#itembox li img {
	max-width: 100%;
}

#itembox li .inwrap {
	position: relative;
	background: #fff;
}


#itembox li .inwrap a {
	display: block;
	text-decoration: none;
}


#itembox li .inwrap a:hover {
	text-decoration: none;
}

#itembox li .inwrap dt {
	height: 150px;
	overflow: hidden;
}


#itembox li .inwrap dd {
	padding: 10px 3%;
	font-size: 12px;
	line-height: 1.6;
}


#itembox li .inwrap.green {
	border: 4px solid #54b184;
}
#itembox li .inwrap.orange {
	border: 4px solid #f18e1d;
}
#itembox li .inwrap.pink {
	border: 4px solid #ed7c9c;
}
#itembox li .inwrap.purple {
	border: 4px solid #a59aca;
}

#itembox li .inwrap.green:after {
	border-style: solid;
	border-width: 0 0 15px 15px;
	border-color: transparent transparent #54b184 transparent;
	position: absolute;
	bottom: 0;
	right: 0;
	content: '';
}
#itembox li .inwrap.orange:after {
	border-style: solid;
	border-width: 0 0 15px 15px;
	border-color: transparent transparent #f18e1d transparent;
	position: absolute;
	bottom: 0;
	right: 0;
	content: '';
}
#itembox li .inwrap.pink:after {
	border-style: solid;
	border-width: 0 0 15px 15px;
	border-color: transparent transparent #ed7c9c transparent;
	position: absolute;
	bottom: 0;
	right: 0;
	content: '';
}
#itembox li .inwrap.purple:after {
	border-style: solid;
	border-width: 0 0 15px 15px;
	border-color: transparent transparent #a59aca transparent;
	position: absolute;
	bottom: 0;
	right: 0;
	content: '';
}



/* clorbox用 */
#cbarea,
.cbarea {
	display: none;
}


/* backbtn */

#container .backbtn {
	text-align: center;
	margin: 50px 0 0;
}

#container .backbtn a {
	display: inline-block;
	line-height: 1.0;
	border: 1px solid #595757;
	color: #595757;
	text-decoration: none;
	position: relative;
	padding: 15px 0;
	width: 225px;
	background: url("../image/common/arrow01.png") 95% center no-repeat #fff;
	font-size: 1.4em;
}


#container .backbtn a:hover {
	opacity: 0.7;
}



/* footer
--------------------------------------------------------------------*/

#footer {
	background: #fff;
	padding: 30px 0;
}


#footer .footer {
	width: 1000px;
	margin: 0 auto;
}

#footer .footer .logo {
	margin: 0 0 20px;
}


#footer .footer .texts {
	margin: 0 0 20px;
	font-size: 1.4em;
}


#footer .footer address {
	font-size: 1.2em;
}




/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px){
	#container .inner {
		width: 94%;
		margin: 0 auto;
	}
	
	
	#footer .footer {
		width: 90%;
		margin: 0 auto;
	}

	
}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	#header {
		position: relative;
		background: url("../jintannow/image/main_spbg.jpg") center center no-repeat;
		background-size: cover;
		height: 500px;
	}

	#header .bg {
		display: none;
	}

	#header .logo {
		position: static;
		padding: 3% 3% 0;
	}

	#header .txt {
		display: none;
	}
	
	#container {
		padding: 70px 0 20px;
	}
	
	
	
	.cat_wrap .catbox {
		margin: 0 0 -50px;
	}
	
	.cat_wrap .catbox {
		display: inline-block;
		padding: 10px 0;
		position: relative;
		background: #fff;
		min-width: inherit;
		width: 90%;
	}


	.cat_wrap .catbox:before,
	.cat_wrap .catbox:after {
		display: none;
	}


	.cat_wrap .catbox .icon01 {
		position: absolute;
		top: -25px;
		left: 0;
	}

	.cat_wrap .catbox .icon02 {
		position: absolute;
		top: -25px;
		right: 0;
	}

	.simplefilter {
		text-align: center;
	}

	.simplefilter li {
		display: block;
		text-align: center;
		line-height: 1.0;
		margin:0 0 10px;
		cursor: pointer;
	}
	
	.simplefilter li:last-child {
		margin:0;
	}
	
	
	
	#itembox li.filtr-item {
		width: 47%;
		float: none;
		min-height: 230px;
		padding: 0 .5% 0 0;
	}
	
	
	

}

/*===============================================
  画面の横幅が380px以下に適用
===============================================*/
@media screen and (max-width: 380px){
}