@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_00{
	background:url(../../img/bg_lg_paper_w.gif) repeat scroll center 0; 
	text-align: center 
}
#bg_001{
	background:url(../../img/bg_lg_paper.gif) repeat scroll center 0; 
	text-align: center 
}
#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; 
}


li section div.yagishop_box{
	box-sizing:border-box;
	padding:0 3px 0;
}
li section p.yagishop{
	padding:12px 0 ;
	border-radius:5px;
	background-color:#ceebe6;
}
li section p.yagishop a{
	display:inline;
}
li section a.inline{
	display:inline;
}
/* =============== 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;
	color:#333;
	/*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;
	text-shadow:none;
}
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 6px;
}

/* 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;
}

/* shousai_list内の特殊幅 */

li section p.custom-margin {
	width: 90% !important;
    margin: auto;
}


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


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

/* === キャッチコピー共通設定=== */

.kaigyo_mini-non { display: inline-block; }

span.catch_le,
span.catch_ri,
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 */
	text-shadow:none;
}

span.catch_le{
	text-align:left;
}
span.catch_ri{
	text-align:right;
}
span.invis_mdl_pc_line,span.invis_sml_onl_line{
	font-weight:bold;
}
span.indent{
	display:block;
	margin-left:1em;
}
/* === キャッチコピー色=== */
.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;
}
#bg_01 .catch_le {
}
.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:#ff6050; /*#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のサイズ ===== */

div.backbox h3{ /* 各製品名 */
	box-sizing:border-box;
	font-size:150%; /* 24px イレギュラーサイズ */
	line-height:1.5; /* L=36px イレギュラーピッチ */
	font-weight:bold;
	color:#fff;
	/*margin-bottom:24px;*/
}

/* ===== 各カテゴリ共通事例テキストのサイズ ===== */

div.backbox j1{ /* 導入経緯タイトル */
	/*box-sizing:border-box;*/
	font-size:250%; /* 24px イレギュラーサイズ */
	line-height:50px; /* L=36px イレギュラーピッチ */
	font-weight:bold;
	color:#000;
	text-align: center
	display: inline-block;
}

div.backbox j2{ /* 導入経緯本文 */
	/*box-sizing:border-box;*/
	font-size:125%; /* 24px イレギュラーサイズ */
	line-height:2; /* L=36px イレギュラーピッチ */
	/*font-weight:bold;*/
	color:#000;
	text-align: center
}

div.backbox j3{ /* 導入経緯_相談タイトル */
	/*box-sizing:border-box;*/
	font-size:125%; /* 24px イレギュラーサイズ */
	line-height:2; /* L=36px イレギュラーピッチ */
	font-weight:bold;
	color:#000;
	text-align: center
}

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

div.backbox h3 span.text_short_25{
	display:inline;
	font-size:156.25%; /* 25px */
}

div.backbox h3 span.text_short_22{
	display:inline;
	font-size:137.5%; /* 22px */
	line-height:1.636364; /* L=36 */
}
div.backbox h3 span.text_short_22_lh24{
	display:block;
	font-size:87.5%; /* 14px */
	line-height:1.2; /* 行間でピッチを修正 1L=約24px */
	margin-bottom:0px;
}

div.backbox h3 span.text_short_20{
	display:inline;
	font-size:125%; /* 20px */
}
div.backbox h3 span.text_short_19{
	display:inline;
	font-size:118.75%; /* 19px */
}
div.backbox h3 span.text_short_18{
	display:inline;
	font-size:112.5%; /* 18px */
}

div.backbox h3 span.text_short_16{
	display:inline;
	font-size:100%; /* 16px */
}
div.backbox h3 span.text_short_16_lh22{
	display:block;
	font-size:100%; /* 16px */
	line-height:1.375;
}

div.backbox h3 span.text_short_15{
	display:inline;
	font-size:93.75%; /* 15px */
}
div.backbox h3 span.text_short_14{
	display:inline;
	font-size:87.5%; /* 14px */
}
div.backbox h3 span.text_short_14_lh14{
	display:block;
	font-size:87.5%; /* 14px */
	line-height:1.4;/* 行間でピッチを修正 1L=22px */
}

div.backbox h3 span.text_short_13{
	display:inline;
	font-size:81.25%; /* 13px */
	}

div.backbox h3 span.text_short_12{
	display:inline;
	font-size:75%; /* 12px */
}
div.backbox h3 span.text_short_12_lh12{
	display:inline;
	line-height:1.2;
	font-size:75%; /* 12px */
}



br.bs{
	display:inline-block;
	margin:0 0 24px;
}
br.ss{
	display:inline-block;
	margin:0 0 12px;
}





.item_content h3.lh_12{
	line-height:1.2;
}

.item_content h4{/* font-size：125%=20px 各特徴番号*/
	box-sizing:border-box;
	font-size:137.5% ; /* 22px 行間を開けるため24pxより小さく設定 */
	font-weight:500;
	color:#fff;
	width:100%;
	padding:4px
	/*line-height:1.2;*/
}

/* ＝＝＝ソーシャル系ボタンスタイル＝＝＝ */

/*section.fb{
	padding-right:6px;
}*/
.oth h3.with_fb{
	margin-bottom:12px;
}

div.fb-share-button{
	display:block;
	width:80px;
	/*padding-right :6px;*/
	/*position:absolute;
	right:24px;*/
	margin-bottom:6px;
	/*text-align:right;*/
	float:right;
}
div.fb-share-button iframe{
	right:12px;
}
div.tw-share-button{
	display:block;
	width:80px;
	margin:0 24px 0 24px;
	float:right;
}

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

.new h3{
	background-color:#ff6050; /*#fa4b55*/
	border-bottom:solid 3px #ff6050 ; /*#fa4b55 テキスト上下位置調整用 */
}
.new h4{
	background-color:#ff6050 ; /*#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%;
}
ul.sen04 li picture.t2{
	display:block;
	box-sizing:border-box;
	padding-top:36px;
}



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


@media screen and (min-width:760px){
	
	/* ===== 各カテゴリ共通h3h4のサイズ ===== */

.item_content h3{/* 各製品名 */
	box-sizing:border-box;
	font-size:156.25%; /* 25px イレギュラーサイズ */
	line-height:1.5; /* L=37.5px イレギュラーピッチ */
}
ul.shousai_list h4,
.item_content H4{
	box-sizing:border-box;
	font-size:137.5%;/* 22px 行間を開けるため24pxより小さく設定 */
	/*line-height:1.2;*/
}


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

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

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

/* ===== カテゴリ別 ページイメージ 01:: new=新製品 ===== */
div.new{
	background-color:#ff6050; /*#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;
}



/* 中画面用：八木庖丁店のショップへのリンクボックス */

li section div.yagishop_box{/*
	box-sizing:border-box;*/
	padding:0 48px 0;
}
li section p.yagishop{
	padding:12px 24px 12px ;
	/*border-radius:5px;
	background-color:#ceebe6;*/
}

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

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

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


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

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


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

/* ===== カテゴリ別 ページイメージ 01:: new=新製品 ===== */
div.new{
	background-color:#ff6050; /*#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;
}

}