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



/* =============== 背景画像ボックス指定 =============== */

/* ===== 背景画像ボックス共通仕様 ===== */

div#image_box{/* トップページの最初の背景表示用のボックス */
	/*padding:72px 0 0; #header_boxの高さ＋アキを逃げる。小画面用 */
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-position:center 0;
	}


/* ===== 小画面用キャッチフレーズ周りの指定 =====*/

section.main_copy{
	box-sizing:border-box;
	width:100%;/* 400px */
	height:auto;
	text-align:center;
	margin:72px auto 360px;
}
/*section.main_copy div.hdgroup{
	padding-left:5%;
}*/

	
/* ===== 小画面用：各背景画像ボックスの指定 ===== */
/* paralaxの為のセクションごとのボックス。上から#bg_01〜 */
#bg_01,#bg_02,#bg_03,#bg_04,#bg_05,#bg_06{
	box-sizing:border-box;
	width:100%;
	height:auto;
	overflow:hidden;
}

#bg_01{
  background:url(../img/bg_lg_paper.gif) repeat scroll center 0; 
}
#bg_02{
  background:url(../img/bg_02.jpg) repeat scroll center 0; 
}
#bg_03{
  background:url(../img/bg_01.jpg) repeat scroll center 0;
}
#bg_04{
  background:url(../img/bg_04.jpg) repeat scroll center 0; 
}



/* =============== p_アイテムページ小画面用＆共通スタイル指定 =============== */


/* ===== カテゴリー共通仕様 ===== */
div#bg_01 ul.item_list li section a:link,
div#bg_01 ul.item_list li section a:visited{
  color:#555; /* サイトによって標準色を設定のこと */  
}

/*a:hover{
  color:#555;
}*/

/* === 製品リストページ共通 === */
.trans{
	overflow:visible;
	background-color:transparent;
	box-shadow:none;
}
.item_content{
	padding:0 0 0;
}
ul.shousai_list,
ul.item_list {
	width:100%;
	overflow:hidden;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
	
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
	
	justify-content:space-between;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
ul.item_list::after{ /* flexboxのspacepbetweenで最終行に端数が出た時の処理 */
content:" ";
display:block;
width:32%;
height:0;
  }

ul.item_list li{
	box-sizing:border-box;
	display:block;
	width:100%;/* 幅指定で一行の表示アイテム数を変化させる ||ここは小画面用 */
	background:#fff;
	margin:	0 0 24px 0;
	box-shadow: 3px 3px 4px 2px rgba(51,51,51,0.4);
}
ul.item_list li a{
	display:block;
	width:100%;
	
	font-size:100%; /* 見出しの為の基準値指定　100%=16px */
	line-heigtht:1.5;

}
ul.item_list li p{
	box-sizing:border-box;
	margin-bottom:0;
}
ul.item_list li p span{
	display:block;
	padding:12px 6% 12px;
}

ul.item_list li p img{
	width:100%;
	height:auto;
}



/* === 各見出しの文字サイズ設定 === */

.item_list li a h4{
	font-size:125%; /* 20px */
}


/* ======= カテゴリーごとの仕様 ======= */

/* ===== カテゴリ別 ページイメージ 01:: new=新製品 ===== */
div.new{
	background-color:#fa4b55;
	background-image:url(../img/cate_01new_top_01sml_2x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 02:: sen=洗浄機器 ===== */
div.sen{
	background-color:#4cc8ff;
	background-image:url(../img/cate_02sen_top_01sml_2x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 03:: han=炊飯盛付機器 ===== */
div.han{
	background-color:#24648c;
	background-image:url(../img/cate_03han_top_1sml_2x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 04::kan=加熱機器 ===== */
div.kan{
	background-color:#ec781e;
	background-image:url(../img/cate_04kan_top_1sml_2x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 05:: sho=消毒保管庫 ===== */
div.sho{
	background-color:#735a96;
	background-image:url(../img/cate_05sho_top_1sml_2x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 06::oth=その他機器 ===== */
div.oth{
	background-color:#f4a210;
	background-image:url(../img/cate_06oth_top_1sml_2x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 07:: sta=ステンレス特注品 ===== */
div.sta{
	background-color:#786e50;
	background-image:url(../img/cate_07sta_top_1sml_2x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 00:: basic=通常ベージ用 ===== */
div.basic{
	background-color:#4cc8ff;
	background-image:url(../img/thanks_bg_top_01sml_2x.jpg);
	}


/* ===== カテゴリ別 記事ボックス 01:: new=新製品 ===== */

.new h3{/* font-size：156.25%=25px */
	color:#fa4b55;
	font-weight:500;
	border-bottom:solid 3px #fa4b55;
	margin-bottom:24px;
}
.new h4{/* font-size：125%=20px  各製品名*/
	box-sizing:border-box;
	background-color: #fa4b55;
	color:#fff;
	width:100%;
	line-height:1.8;
}


/* ===== 記事ボックス  02:: sen=洗浄機器 ===== */

.sen h3{/* font-size：156.25%=25px */
	color:#4cc8ff;
	font-weight:500;
	border-bottom:solid 3px #4cc8ff;
	margin-bottom:24px;
}
.sen h4{/* font-size：125%=20px  各製品名*/
	box-sizing:border-box;
	background-color: #4cc8ff;
	color:#fff;
	width:100%;
	line-height:1.8;
}


/* =====  記事ボックス  03:: han=炊飯盛付け機器 ===== */

.han h3{/* font-size：156.25%=25px */
	color:#24648c;
	font-weight:500;
	border-bottom:solid 3px #24648c;
	margin-bottom:24px;
}
.han h4{/* font-size：125%=20px  各製品名*/
	box-sizing:border-box;
	background-color: #24648c;
	color:#fff;
	width:100%;
	line-height:1.8;
}


/* ===== 記事ボックス  04:: kan=加熱機器 ===== */

.kan h3{/* font-size：156.25%=25px */
	color:#ec781e;
	font-weight:500;
	border-bottom:solid 3px #ec781e;
	margin-bottom:24px;
}
.kan h4{/* font-size：125%=20px  各製品名*/
	box-sizing:border-box;
	background-color: #ec781e;
	color:#fff;
	width:100%;
	line-height:1.8;
}


/* ===== 記事ボックス 05 :: sho=消毒保管庫 ===== */

.sho h3{/* font-size：156.25%=25px */
	color:#735a96;
	font-weight:500;
	border-bottom:solid 3px #735a96;
	margin-bottom:24px;
}
.sho h4{/* font-size：125%=20px  各製品名*/
	box-sizing:border-box;
	background-color: #735a96;
	color:#fff;
	width:100%;
	line-height:1.8;
}


/* ===== 記事ボックス 06 :: oth=その他機器 ===== */

.oth h3{/* font-size：156.25%=25px */
	color:#f4a210;
	font-weight:500;
	border-bottom:solid 3px #f4a210;
	margin-bottom:24px;
}
.oth h4{/* font-size：125%=20px  各製品名*/
	box-sizing:border-box;
	background-color: #f4a210;
	color:#fff;
	width:100%;
	line-height:1.8;
}


/* ===== 記事ボックス 07 :: sta=ステンレス特注品 ===== */

.sta h3{/* font-size：156.25%=25px */
	color:#786e50;
	font-weight:500;
	border-bottom:solid 3px #786e50;
	margin-bottom:24px;
}
.sta h4{/* font-size：125%=20px  各製品名*/
	box-sizing:border-box;
	background-color: #786e50;
	color:#fff;
	width:100%;
	line-height:1.8;
}




/* ============= end 記事ボックス::カテゴリ別スタイル指定 ============= */





@media screen and (min-width:760px){


/* ===== 中画面用キャッチフレーズ周りの指定 =====*/

section.main_copy{
/*	width:auto;
	height:auto;
	text-align:center; */
	margin:96px auto 72px;
}

/* ======= カテゴリーごとの仕様 ======= */

/* ===== カテゴリ別 ページイメージ 01:: new=新製品 ===== */
div.new{
	background-color:#fa4b55;
	background-image:url(../img/cate_01new_top_02mdl_1x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 02:: sen=洗浄機器 ===== */
div.sen{
	background-color:#4cc8ff;
	background-image:url(../img/cate_02sen_top_02mdl_1x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 03:: han=炊飯盛付機器 ===== */
div.han{
	background-color:#24648c;
	background-image:url(../img/cate_03han_top_2mdl_1x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 04::kan=加熱機器 ===== */
div.kan{
	background-color:#ec781e;
	background-image:url(../img/cate_04kan_top_2mdl_1x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 05:: sho=消毒保管庫 ===== */
div.sho{
	background-color:#735a96;
	background-image:url(../img/cate_05sho_top_2mdl_1x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 06::oth=その他機器 ===== */
div.oth{
	background-color:#f4a210;
	background-image:url(../img/cate_06oth_top_2mdl_1x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 07:: sta=ステンレス特注品 ===== */
div.sta{
	background-color:#786e50;
	background-image:url(../img/cate_07sta_top_2mdl_1x.jpg);
	}
	/* ===== カテゴリ別 ページイメージ 00:: basic=通常ベージ用 ===== */
div.basic{
	background-color:#4cc8ff;
	background-image:url(../img/thanks_bg_top_02mdl_1x.jpg);
	}



/* =====中画面・PC画面用カテゴリーナビ、アイコン ===== */

/* 中画面用カテナビ背景ボックス：画面に現れるので背景に色を指定 */
/*nav#cate_navbox{
	background:rgba(102,102,102,0.8);
}*/

div#image_box{/* トップページの最初の背景表示用のボックス */
	padding:120px 0 0;/* #header_boxの高さ＋アキを逃げる。小画面用 */
}

ul.item_list li{
	width:48.5%;/* 幅指定で一行の表示アイテム数を変化させる ||ここは中画面用 */
	margin:	0 0 24px 0;
}



}



@media screen and (min-width:1024px){

/* ===== PC画面用キャッチフレーズ周りの指定 =====*/

section.main_copy{
/*	width:auto;
	height:auto;
	text-align:center; */
	margin:96px auto 136px;
}

/* ======= カテゴリーごとの仕様 ======= */

/* ===== カテゴリ別 ページイメージ 01:: new=新製品 ===== */
div.new{
	background-color:#fa4b55;
	background-image:url(../img/cate_01new_top_03lag_1x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 02:: sen=洗浄機器 ===== */
div.sen{
	background-color:#4cc8ff;
	background-image:url(../img/cate_02sen_top_03lag_1x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 03:: han=炊飯盛付機器 ===== */
div.han{
	background-color:#24648c;
	background-image:url(../img/cate_03han_top_3lag_1x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 04::kan=加熱機器 ===== */
div.kan{
	background-color:#ec781e;
	background-image:url(../img/cate_04kan_top_3lag_1x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 05:: sho=消毒保管庫 ===== */
div.sho{
	background-color:#735a96;
	background-image:url(../img/cate_05sho_top_3lag_1x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 06::oth=その他機器 ===== */
div.oth{
	background-color:#f4a210;
	background-image:url(../img/cate_06oth_top_3lag_1x.jpg);
	}
/* ===== カテゴリ別 ページイメージ 07:: sta=ステンレス特注品 ===== */
div.sta{
	background-color:#786e50;
	background-image:url(../img/cate_07sta_top_3lag_1x.jpg);
	}
	/* ===== カテゴリ別 ページイメージ 00:: basic=通常ベージ用 ===== */
div.basic{
	background-color:#4cc8ff;
	background-image:url(../img/thanks_bg_top_03lag_1x.jpg);
	}



div#image_box{/* トップページの最初の背景表示用のボックス */
	padding:120px 0 0;/* #header_boxの高さ＋アキを逃げる。小画面用 */
	}

ul.item_list li{
	width:32%;/* 幅指定で一行の表示アイテム数を変化させる ||ここはPC画面用 */
}


}