@charset "UTF-8";

#main .pagenation {
	margin-bottom : 40px;
}
#main .pagenation:last-of-type {
	margin-bottom : 0;
}

main#pageBody {
	background-color : #f3f3f3;
}

/* category */
#category {
	margin-bottom : 60px;
}
#category .count {
	display : flex;
	display : none;
	justify-content : space-between;
	align-items : center;
	padding : 1em;
	color : #ffffff;
	background-color : #222222;
}
#category .count span {
	font-size : 2.4em;
}

#category .catSelector {
	padding : 12px;
	border-bottom : 1px solid #cccccc;
	background-color : #ffffff;
}
#category .catSelector > p {
	font-size : 1.2em;
	font-weight : bold;
	margin-bottom : 0.75em;
	padding-top : 0.75em;
	border-top : 3px solid #000000;
}
#category .catSelector > select {
	font-size : 1.1em;
	font-weight : bold;
	width : 100%;
	margin-bottom : 0.5em;
	padding : 0.725em 0.5em;
	border-radius : 4px;
}
#category .catList {
	display : block;
}
#category .catList {
	border-radius : 4px;
	background-color : #f3f3f3;
}
#category .catList > li:not(:last-child) {
	margin-bottom : 12px ;
	border-bottom : 1px solid #dddddd;
}
#category .catList > li > ul > li {
	border-bottom : 1px dotted #ffffff;
}
#category .catList > li > ul > li label {
	display : block;
	font-weight : bold;
	padding : 0.5em 1em;
	cursor : pointer;
}
#category .catList > li > ul > li label:hover {
	background-color : #eeeeee;
}
#category .catList > li > ul > li input {
	display : none;
}
#category .catList > li > ul > li input:checked + label {
	color : #ffffff;
	background-color : #2483b2;
}
#category .catList > li > div {
	font-size : 0.875em;
	font-weight : bold;
	padding : 0.625em  1.125em;
	color : #c21b1b;
}
#category .buttons {
	padding : 1em;
	text-align : center;
	color : #ffffff;
	background-color : #222222;
}
#category .buttons > *:not(:last-child) {
	margin-bottom : 0.5em;
}
#category .buttons .resultNum {
	text-align : center;
	background-color : #222222;
}
#category .buttons .resultNum span {
	font-size : 2.4em;
}
#category .buttons .removeAll {
	display : none;
}
#category .buttons .submit {
	display : block;
	width : 100%;
	padding : 0.5em 1em;
	cursor : pointer;
	text-align : center;
	background-color : #ffffff;
}
#category .buttons .submit:hover {
	border-radius : 4px;
	background-color : #f3f3f3;
}

/*  */
#main h2 {
	font-size : 2.2em;
	margin-bottom : 0.5em;
}
#main .conditions {
	margin-bottom : 24px;
	padding : 1em;
	background-color : #ffffff;
}
#main .conditions span {
	margin-right : 1em;
}

#loading {
	visibility : hidden;
	display : none;
	transition : opacity 0.5s;
	opacity : 0;
}
#loading::before {
	display : block;
	position : relative;
	width : 40px;
	height : 40px;
	margin : 0 auto;
	content : "";
	animation : loading 700ms linear 0ms infinite normal both;
	border : 8px solid #e0e0e0;
	border-top : 7px solid #aaaaaa;
	border-radius : 50px;
}
@keyframes loading {
	0% {
		transform : rotate( 0deg );
	}
	100% {
		transform : rotate( 360deg );
	}
}
#loading.show {
	visibility : visible;
	display : flex;
	justify-content : center;
	align-items : center;
	height : 300px;
	opacity : 1;
}
#searchResult {
	visibility : hidden;
	height : 0;
	transition : opacity 0.5s, height 0s;
	opacity : 0;
}
#searchResult.show {
	visibility : visible;
	height : auto;
	opacity : 1;
}

#itemList {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr;
	grid-gap : 16px;
}
#itemList > li {
	background-color : #ffffff;
}
#itemList > li > a {
	display : flex;
	flex-direction : column;
	height : 100%;
	padding : 16px;
	text-decoration : none;
}
#itemList > li > a {
	transition : all 0.3s ease-out;
}
#itemList > li > a:hover {
	background-color : #e1e1e1;
}

#pageBody #main #itemList .img {
	display : flex;
	justify-content : center;
	align-items : center;
	height : 120px;
	margin-bottom : 16px;
	background-color : #ffffff;
}
#itemList .img img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}
#itemList .name {
	font-size : 1.2em;
	margin-bottom : 0.25em;
}
#itemList .comment {
	flex-grow : 1;
	margin-bottom : 0.25em;
	color : #2483b2;
}
#itemList .price {
	font-size : 1.2em;
	font-weight : bold;
	color : #000000;
}
#itemList .price span {
	font-size : 0.6em;
	font-weight : normal;
}
#itemList .next {
	position : absolute;
	top : 50%;
	right : 20px;
	cursor : pointer;
	transform : translateY(-50%);
}
#itemList .prev {
	position : absolute;
	top : 50%;
	left : 20px;
	cursor : pointer;
	transform : translateY(-50%);
}

#itemList > li.link a {
	display : flex;
	font-size : 1.1em;
	flex-direction : column;
	justify-content : center;
	align-items : center;
	padding : 40px 16px;
	color : #2483b2;
	background-color : #e3e3e3;
}
#itemList > li.link a:hover {
	background-color : #cccccc;
}
#itemList > li.link a::before {
	display : block;
	font-family : "Material Icons";
	font-size : 120px;
	content : "\e145";
	color : #ffffff;
}

#itemList > .inner > .link {
	display : flex;
	justify-content : center;
}
#itemList > .inner > .link a {
	width : 100%;
	max-width : 300px;
}
@media screen and (min-width: 768px) and (max-width: 1380px) {
	#itemList {
		grid-template-columns : 1fr 1fr;
	}
}
@media screen and (max-width: 767px) {
	#itemList {
		grid-template-columns : 1fr;
	}
}