@charset "shift-JIS";
/*Lacrima shop PC・タブレット・スマホ共通設定
/*商品一覧ページ用ボックス
---------------------------------------------------------------------------*/
/*商品一覧ページ用ボックス
---------------------------------------------------------------------------*/

/*各ボックスの設定*/
#main section.list {
float: left;
margin: 0px 25px 5px;	/*上、左右、下へあけるスペース*/
line-height: 1.6;
width: 250px;	/*幅*/
height: 320px;	/*高さ*/
position: relative;
overflow: hidden;
}
#main section.list a {
text-decoration: none;
display: block;
overflow: hidden;
}
/*１カラム使用時の各ボックスの設定*/
.c1 #main section.list {
margin: 0px 0px 5px 10px;	/*上、右、下、左へあけるスペース*/
}
/*ボックス内の段落タグ設定*/
#main section.list p {
padding: 0px;
font-size: 11px;	/*文字サイズ*/
-webkit-text-size-adjust: none;
}
/*ボックス内の写真設定*/
#main section.list a figure img {
width: auto;	/*写真の幅*/
height: 250px;	/*写真の高さ*/
padding: 5px;	/*写真と境界線との隙間のサイズ*/
border: 1px solid #ccc;	/*境界線の幅、線種、色*/
margin-bottom: 5px;
}
/*マウスオン時の写真の境界線の設定*/
#main section.list a:hover figure img {
border: 1px solid #C7d8c8;	/*枠線の幅、線種、色*/
}
/*ボックス内のh4タグ設定*/
#main section.list h4 {
font-size: 12px;	/*文字サイズ*/
}

/* ------------------------------------------ */

/*説明文が短いメニュー用の設定　section.list2*/
/*画像はすべてXSサイズ　縦横200　を指定する*/
/*各ボックスの設定*/

#main section.list2 {
	float: left;
	margin: 0px 25px 5px;	/*上、左右、下へあけるスペース*/
	line-height: 1.6;
	width: 250px;	/*幅*/
	height: 250px;	/*高さ*/
	position: relative;
	overflow: hidden;
}
#main section.list2 a {
	text-decoration: none;
	display: block;
	overflow: hidden;
}
/*１カラム使用時の各ボックスの設定*/
/*.c1 #main section.list2
 {
	margin: 0px 0px 5px 10px;	/*上、右、下、左へあけるスペース*/
	float: right;
}
*/
/*ボックス内の段落タグ設定*/
#main section.list2 p {
	padding: 0px;
	font-size: 11px;	/*文字サイズ*/
	color: #FFF;
	-webkit-text-size-adjust: none;
}
/*ボックス内の写真設定*/
#main section.list2 a figure img {
	width: auto;	/*写真の幅*/
	height: 200px;	/*写真の高さ*/
	padding: 5px;	/*写真と境界線との隙間のサイズ*/
	border: 1px solid #ccc;	/*境界線の幅、線種、色*/
	margin-bottom: 5px;
}
/*マウスオン時の写真の境界線の設定*/
#main section.list2 a:hover figure img {
	border: 1px solid #C7d8c8;	/*枠線の幅、線種、色*/
}



/*ここからタブレット用（600px〜900px）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (min-width:899px) and (max-width:900px){

/*商品一覧ページ用ボックス
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main section.list,
.c1 #main section.list {
margin: 0px 1.5% 15px;
width: 30%;
height: 350px;
}
/*ボックス内の写真設定*/
#main section.list a figure img {
width: auto;
height: 180;
padding: 3%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}


/*ここからスマホ用（599px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (max-width : 898px){


/*商品一覧ページ用ボックス
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main section.list {
float: none;
margin: 0px !important;
width: 100%;
height: auto;
border-bottom: 1px solid #ccc;
line-height: normal;
padding: 10px 0;
}
/*ボックス内の段落タグ設定*/
#main section.list p {
font-size: 14px;
}
/*ボックス内の写真設定*/
#main section.list a figure img {
padding: 0;
border: none;
}
#main section.list a figure {
float: left;
margin-right: 10px;
}
/*マウスオン時の写真の境界線の設定*/
#main section.list a:hover figure img {
border: none;
}
/*ボックス内のh4タグ設定*/
#main section.list h4 {
font-size: 14px;
}