@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{
	/*width:320px;*/
	width:auto;
	height:auto;
	text-align:center;
	margin:72px auto 360px;
}

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

#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_アイテムページ小画面用＆共通スタイル指定 =============== */


/* ===== カテゴリー共通仕様 ===== */

/* === 製品詳細リストページ共通 === */
section.trans{
	overflow:visible;
	background-color:transparent;
	box-shadow:none;
}
.item_content{ /* 製品メインimageの入るボックス全体の指定 */
	width:100%;
	max-width:1080px;
	height:auto;
	padding:0 0 0;
	margin:0 auto 48px;
	background:#fff;
	box-shadow: 3px 3px 4px 2px rgba(51,51,51,0.4);
}
.item_content p{ /* 製品メインimageの入るボックスでのキャッチコピー指定 */
	box-sizing:border-box;
	padding:0 3% 0;
	/*margin:0 auto 0;*/
}

/* ===== 特徴リストのflex設定 ===== */

ul.shousai_list{
	width:100%;
	orverflow:hidden;
	
	/* FLexの指定、各ベンダー毎 */
	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;
	
	/* FLexBoxの指定 ベンダー毎 */
	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.shousai_list::after{ /* flexboxのspacepbetweenで最終行に端数が出た時の処理 */
content:" ";
display:block;
width:32%;
height:0;
  }

ul.shousai_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.shousai_list li a{
	display:block;
	width:100%;
}
ul.shousai_list li p{
	width:100%;
	height:auto;
	box-sizing:border-box;
	margin-bottom:12px;
}
ul.shousai_list li span{
	display:block;
	padding:12px 6% 12px;
}

/* 各特徴内のキャッチコピー指定。色は別指定 */
ul.shousai_list li span.catch2 {
	width:90%;
	 font-size:118.75%;/* 18px 行間を開けるため24pxより小さく設定 */
      line-height:1.33333333;/* 1L=24px */
	  text-align:center;
	  padding:0 3% 0;
	  margin:12px 0 12px;
}

/* shousai_list内の画像だけセンター配置にする */
ul.shousai_list li p picture img{
	display:block;
	width:auto;
	height:auto;
	margin:0 auto 0;
}


/* shousai_list内の特殊幅をリセット設定 */
ul.shousai_list li.w2{
	width:100%;
	flex-grow:0;
	margin:	0 0 24px 0;
}
ul.shousai_list li.w3{
	width:100%;
	flex-grow:0;
	margin:	0 0 24px 0;
}



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


picture.product_main img{
	display:block;
	max-width:95%;
	padding-bottom:24px;
	margin:0 auto 0;
	text-align:center;
}

/* === キャッチコピー共通設定=== */
span.catch_le,
span.catch_ri,
.new span.catch2{
	display:block;
	font-size:106.25%; /* 17px 行間を開けるため24pxより小さく設定 */
	/*font-size:118.75%;*/ /* 18px 行間を開けるため24pxより小さく設定 */
	font-weight:bold;
	line-height:1.41176471; /* 1L=24 */
	/*line-height:1.33333333;*/ /* 1L=24px */
	margin:0 0 12px 1em;
}
	
span.catch_le{
	text-align:left;
}
span.catch_ri{
	text-align:right;
}

/* === キャッチコピー色=== */
.new span.catch_le, 
.new span.catch_ri,
.new span.catch2{
	color:#438;
}
.sen span.catch_le, 
.sen span.catch_ri,
.sen span.catch2{
	color:#438;
}
.han span.catch_le, 
.han span.catch_ri,
.han span.catch2{
	color:#09F;
}
.kan span.catch_le, 
.kan span.catch_ri,
.kan span.catch2{
	color:#C00;
}
.sho span.catch_le,
.sho span.catch_ri,
.sho span.catch2{
	color:#438;
}
.oth span.catch_le,
.oth span.catch_ri,
.oth span.catch2{
	color:#438;
}
.sta span.catch_le,
.sta span.catch_ri,
.sta span.catch2{
	color:#438;
}


/* ===== カテゴリ別 ページイメージ 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);
	}



/* ===== 各カテゴリ共通h3h4のサイズ ===== */

.item_content h3{/* 各製品名 */
	box-sizing:border-box;
	font-size:150%; /* 24px イレギュラーサイズ */
	line-height:1.5; /* L=36px イレギュラーピッチ */
	font-weight:500;
	color:#fff;
	margin-bottom:24px;
}
.item_content H4{/* font-size：125%=20px 各特徴番号*/
	box-sizing:border-box;
	font-weight:500;
	color:#fff;
	width:100%;
	padding:4px
	/*line-height:1.2;*/
}

/* ===== 長い製品名の時の長体設定 ===== */

-moz-.item_content h3.longv1{
transform: scale(0.9, 1);
width:111.111111%;
margin-left:-5.555555%;
margin-bottom:24px;
}
-webkit-.item_content h3.longv1{
transform: scale(0.9, 1);
width:111.111111%;
margin-left:-5.555555%;
margin-bottom:24px;
}
-ms-.item_content h3.longv1{
transform: scale(0.9, 1);
width:111.111111%;
margin-left:-5.555555%;
margin-bottom:24px;
}
.item_content h3.longv1{
transform: scale(0.9, 1);
width:111.111111%;
margin-left:-5.555555%;
margin-bottom:24px;
}


-moz-.item_content h3.longv2{
transform: scale(0.8, 1);
width:125%;
margin-left:-12.5%;
margin-bottom:24px;
}
-webkit-.item_content h3.longv2{
transform: scale(0.8, 1);
width:125%;
margin-left:-12.5%;
margin-bottom:24px;
}
-ms-.item_content h3.longv2{
transform: scale(0.8, 1);
width:125%;
margin-left:-12.5%;
margin-bottom:24px;
}
.item_content h3.longv2{
transform: scale(0.8, 1);
width:125%;
margin-left:-12.5%;
margin-bottom:24px;
}


-moz-.item_content h3.longv3{
transform: scale(0.7, 1);
width:142.857%;
margin-left:-21.4285%;
margin-bottom:24px;
}
-webkit-.item_content h3.longv3{
transform: scale(0.7, 1);
width:142.857%;
margin-left:-21.4285%;
margin-bottom:24px;
}
-ms-.item_content h3.longv3{
transform: scale(0.7, 1);
width:142.857%;
margin-left:-21.4285%;
margin-bottom:24px;
}
.item_content h3.longv3{
transform: scale(0.7, 1);
width:142.857%;
}


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

.new h3{
	background-color:#fa4b55;
	border-bottom:solid 3px #fa4b55; /* テキスト上下位置調整用 */
}
.new h4{
	background-color: #fa4b55;
}

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

.sen h3{
	background-color:#4cc8ff;
	border-bottom:solid 3px #4cc8ff; /* テキスト上下位置調整用 */
}
.sen h4{
	background-color: #4cc8ff;
}

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

.han h3{
	background-color:#24648c;
	border-bottom:solid 3px #24648c; /* テキスト上下位置調整用 */
}
.han h4{
	background-color: #24648c;
}

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

.kan h3{
	background-color:#ec781e;
	border-bottom:solid 3px #ec781e; /* テキスト上下位置調整用 */
}
.kan h4{
	background-color: #ec781e;
}

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

.sho h3{
	background-color:#735a96;
	border-bottom:solid 3px #735a96; /* テキスト上下位置調整用 */
}
.sho h4{
	background-color: #735a96;
}

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

.oth h3{
	background-color:#f4a210;
	border-bottom:solid 3px #f4a210;
}
.oth h4{
	background-color: #f4a210;
}

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

.sta h3{
	background-color:#786e50;
	border-bottom:solid 3px #786e50;
}
.sta h4{
	background-color: #786e50;
}
/* ============= end 記事ボックス::カテゴリ別スタイル指定 ============= */




/* ============= youtube <iframe>周りのレスポンシブ指定  =========== */

h4.movie {
	margin-bottom:0;
}

.movie-filler {
	box-sizing:border-box;
	width:100%;
	height:auto;
	padding:0 5% 5%;
}

.movie-wrap {
	/*display:block;*/
     position: relative;
     padding-bottom: 56.25%; /* 41.8125%=アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
	 right:0;
	 /*bottom:0;*/
	 margin:auto;
     width:100%;
     height:100%;
}

/* ========== end youtube <iframe>周りのレスポンシブ指定 ============ */


@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);
	}



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

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

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

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

/* shousai_list内の特殊幅をリセット設定 */
ul.shousai_list li.w2{
	width:48.5%;
	flex-grow:0;
	margin:	0 0 24px 0;
}
ul.shousai_list li.w3{
	width:100%;
	flex-grow:0;
	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);
	}



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

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



/* shousai_list内の特殊幅をリセット設定 */
ul.shousai_list li.w2{
	width:48.5%;
	flex-grow:0;
	margin:	0 0 24px 0;
}
ul.shousai_list li.w3{
	width:100%;
	flex-grow:0;
	margin:	0 0 24px 0;
}

}