@CHARSET "UTF-8";
/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
/* コンテンツ・リスト表示用枠(共通) */
.items_list,
.contents_list {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-content: space-around;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0;
}
.items_list::after,
.contents_list::after {
	content: "";
	clear: both;
	display: block;
}
@media screen and (max-width: 1080px) {
	.items_list,
	.contents_list {
		max-width: 800px;
	}
}
@media screen and (max-width: 800px) {
	.items_list,
	.contents_list {
		max-width: 360px;
	}
}
/* グリッド表示 */
.items_list > .inner {
	width: 100%;
	max-width: 1080px;
	display: grid;
	#grid-template-columns: repeat(auto-fill, 340px);
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	justify-content: center;
	gap: 8px;
	padding: 0 0 0 5px;
	#border: solid 1px #f00;
}
/* フレックス表示 */
.contents_list > .inner {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	#border: solid 1px #f00;
}
/*==================================================================*/
/* 画像ブロック */
.img_block {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 0 0 8px 0;
	padding: 0;
	border: solid 1px #CCC;
}
.img_block::after {
	content: "";
	clear: both;
	display: block;
}
.items_list .img_block {
	width: 340px;
}
.contents_list .img_block {
	width: auto;
}
@media screen and (max-width: 800px) {
	.img_block {
		margin: 0;
		padding: 0;
		width: 100%;
	}
}
/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
/* 画像表示・上下中央揃え */
.img_block .img_view {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;  /* 上下中央 */
	flex-wrap: nowrap;
	height: 180px;
	width: 160px;
	margin: 0;
	padding: 5px;
	overflow: hidden;
	#border: solid 1px #CFC;
}
@media screen and (max-width: 800px) {
	.img_block .img_view {
		padding: 0;
		max-height: 180px; /* 高さの上限 */
		max-width: 160px;
	}
}
/*-------------------------------------*/
/* 画面本体 */
.img_block .img_view img {
	position: relative;
	display: block;
	padding: 0;
	margin: 0 auto;  /* 左右中央 */
	max-height: 160px; /* heightにしない:素材サイズ優先 */
	max-width: 160px; /* widthにしない:素材サイズ優先 */
	#border: solid 1px #CCC;
}
@media screen and (max-width: 800px) {
	.img_block .img_view img {
		max-height: 160px;
		max-width: 160px;
	}
}
/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
/* 情報表示 */
.img_block .info_view {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;  /* 上下中央 */
	flex-wrap: nowrap;
	height: auto;
	width: 160px;
	margin: 0;
	padding: 5px;
	font-family: -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	overflow: hidden;
	#border: solid 1px #FCC;
}
@media screen and (max-width: 800px) {
	.img_block .info_view {
		max-width: 160px;
		font-size: 13px;
	}
}
/*-------------------------------------*/
a.tooltip {
	position: relative;
	display: inline-block;
	padding: 0;
	margin: 0 auto;
	text-decoration: none;
	background: transparent;
	border: none;
}
a.tooltip:hover {
	text-decoration: none;
	background: transparent;
	border: none;
}
a.tooltip .descs {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0;
	margin: 0;
	color: #000;
	background: #ffffff;
	opacity: 0;
	transition: opacity .2s;
	border: none;
	overflow: normal;
}
a.tooltip:hover .descs {
	opacity: 1.0;
}
/*-------------------------------------*/
.img_block .info_view .infos {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	flex-wrap: nowrap;
	height: auto;
	width: 100%;
	margin: 0;
	padding: 0;
	#border: solid 1px #CCF;
}
.img_block .info_view .infos p {
	font-size: 13px;
	#border: solid 1px #CCF;
}
.img_block .info_view .icons {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: nowrap;
	width: 100%;
	margin: 5px 0 0 0;
	padding: 0;
	#border: solid 1px #CCF;
}
.img_block .info_view .icons div {
	flex: 1 1 auto;
	text-align: center;
	margin: 0;
	padding: 0;
	background: transparent;
}
/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
/* 詳細表示 */
.img_block .desc_view {
	display: block;
	position: relative;
	min-height: 160px;
	width: 160px;
	margin:  0;
	padding: 0;
	font-family: -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	overflow: hidden;
	#border: solid 1px #FCC;
}
@media screen and (max-width: 800px) {
	.img_block .desc_view {
		max-height: 160px;
		max-width: 160px;
		font-size: 13px;
	}
}
.img_block .desc_view .descriptions {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	flex-wrap: nowrap;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	#border: solid 1px #FCC;
}
.img_block .desc_view .descriptions p {
	margin: 0;
	padding: 5px 10px;
}
/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
/* 操作表示(共通) */
.img_block .form_view {
	display: block;
	position: relative;
	height: auto;
	width: 160px;
	margin: 0;
	padding: 5px;
	#border: solid 1px #CCF;
}
/*------------------------------------------------*/
/* カート合計表示 */
.img_block .sum_view {
	height: 60px;
}
/*------------------------------------------------*/
/* 並び形式の操作ボタン cart,upld */
.img_block .form_view .buttons {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center ;
	flex-wrap: nowrap;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.img_block .form_view .buttons .bt_action {
	display: block;
	width: 140px;
	height: 34px;
	margin: 10px 0;
	padding: 0;
	text-align: center;
	font-family: -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 2.0;
	font-size: 16px;
	background: #2f4f4f;
	color: #FFF;
	border-radius: 5px;
}
.img_block .form_view .buttons .bt_red {
	background: #833;
}
.img_block .form_view .buttons .bt_blue {
	background: #55A;
}
.img_block .form_view .buttons .bt_green {
	background: #383;
}
.img_block .form_view .buttons .bt_magenta {
	background: #A38;
}
.img_block .form_view .buttons .bt_action:hover {
	color: #FFF;
	opacity: 0.7;
}
.img_block .form_view .buttons .bt_action:disabled {
	background: #BBB;
	color: #EEE;
}
/*=====================================*/
/* END */