@charset "utf-8";
/* CSS Document */

#karibody {
	width: 800px;
	margin:0 auto;
}
#kari_body img {
	width: 100%;
}
/*---------------
PC
-------------------*/
@media screen and (min-width: 769px) {
.pc {
	display: block;
}
.sp {
	display: none;
}
/* ------------------------------------- 
   アイテムソート箇所
 ------------------------------------- */
#sortArea {
	width: 100%;
	margin: 0 auto;
	font-size: 1.0rem;
}
#sort {
	margin: 15px 0;
	overflow: hidden;
}
#sort:after {
	display : table;
	clear : both;
	content : '';
}
#sort ul {
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	justify-content: center;
}
#sort li {
	display: table-cell;
	font-size: 1.0rem;
	margin: 4px 3px;
	padding: 5px 20px;
	width: auto;
	cursor: pointer;
	list-style: none;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
	/*border: #666 solid 1px;*/
	color: #333333;
	border-radius: 3px;
	background-color: #ffffff;
}
#sort li:hover {
/*	border: #666 solid 1px;*/
	color: #FFFFFF;
	border-radius: 3px;
	background-color: #999;
}
#sort li.active {
/*	border: #666 solid 1px;*/
	color: #333333;
	border-radius: 3px;
	background-color: #cccccc;
	cursor: default;
}
#itemList {
	width: 90%;
	margin: auto;
	padding: 0;
	list-style: none;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content:space-around;
}
#itemList div.itemtable {
	width: 25%;
	padding: 1%;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	position: relative;
}
.s_r {
	width: 100%;
}
.s_r ul {
	width: 100%;
	list-style: none;
	margin: 1% 0 0;
	padding: 0;
	text-align: left;
}
.s_r li {
	display: inline;
}
.r_l {
	width: 50%;
	height: auto;
	vertical-align: text-top;
}
.r_l img {
	width: 50%;
}
.r_r {
	width: 50%;
	height: auto;
	margin-left: 0.6rem;
	font-size: 0.75rem;
	vertical-align: bottom;
	color: #999;
}
}
/*---------------
タブレット
-------------------*/
@media screen and (max-width: 768px) {
.pc {
	display: block;
}
.sp {
	display: none;
}
#karibody {
	width: 98%;
}
/* ------------------------------------- 
   アイテムソート箇所
 ------------------------------------- */
#sortArea {
	width: 100%;
	margin: 0 auto;
	font-size: 1.0rem;
}
#sort {
	margin: 15px 0;
	overflow: hidden;
}
#sort:after {
	display : table;
	clear : both;
	content : '';
}
#sort ul {
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	justify-content: center;
}
#sort li {
	display: table-cell;
	font-size: 1.0rem;
	margin: 4px 6px;
	padding: 6px 10px;
	width: auto;
	cursor: pointer;
	list-style: none;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
	color: #333333;
	border-radius: 3px;
	background-color: #ffffff;
}
#sort li:hover {
	color: #FFFFFF;
	border-radius: 3px;
	background-color: #999;
}
#sort li.active {
	color: #333333;
	border-radius: 3px;
	background-color: #cccccc;
	cursor: default;
}
#itemList {
	width: 99%;
	margin: auto;
	padding: 0;
	list-style: none;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#itemList div.itemtable {
	width: 33.3%;
	padding: 1.5%;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	position: relative;
}
.s_r {
	width: 100%;
}
.s_r ul {
	width: 100%;
	list-style: none;
	margin: 0 2% 3%;
	padding: 0;
	text-align: left;
}
.s_r li {
	display: inline;
}
.r_l {
	width: 50%;
	height: auto;
	vertical-align: middle;
}
.r_l img {
	width: 50%;
}
.r_r {
	width: 50%;
	height: auto;
	margin-left: 0.8rem;
	font-size: 0.9rem;
	vertical-align: middle;
	color: #999;
}
}
/*---------------
スマホ
-------------------*/
@media screen and (max-width: 479px) {
.pc {
	display: none;
}
.sp {
	display: block;
}
/* ------------------------------------- 
   アイテムソート箇所
 ------------------------------------- */
#sortArea {
	width: 100%;
	margin: 0 auto;
	font-size: 1.0rem;
}
#sort {
	margin: 15px 0;
	overflow: hidden;
}
#sort:after {
	display : table;
	clear : both;
	content : '';
}
#sort ul {
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	justify-content: center;
	padding: 0;
}
#sort li {
	display: table-cell;
	font-size: 0.8rem;
	margin: 4px 6px;
	padding: 6px 16px;
	width: auto;
	cursor: pointer;
	list-style: none;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
	color: #333333;
	border-radius: 3px;
	background-color: #ffffff;
}
#sort li:hover {
	color: #FFFFFF;
	border-radius: 3px;
	background-color: #999;
}
#sort li.active {
	color: #333333;
	border-radius: 3px;
	background-color: #cccccc;
	cursor: default;
}
#itemList {
	width: 100%;
	margin: auto;
	padding: 0;
	list-style: none;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#itemList div.itemtable {
	width: 33.3%;
	padding: 1.5%;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	position: relative;
}
.s_r {
	width: 100%;
}
.s_r ul {
	width: 100%;
	list-style: none;
	margin: 0 2% 6%;
	padding: 0;
	text-align: left;
}
.s_r li {
	display: inline;
}
.r_l {
	width: 50%;
	height: auto;
	vertical-align: middle;
}
.r_l img {
	width: 50%;
}
.r_r {
	width: 50%;
	height: auto;
	margin-left: 0.5rem;
	font-size: 0.8rem;
	vertical-align: middle;
	color: #999;
}
}