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

a:link,a:visited{
  color:#006655; /* サイトによって標準色を設定のこと */
  
}
a:link,a:hover{
	color:#00a094;
}
/*a:hover{
  color:#0CF;
}*/


div.header_box,
div.low{/* タイトルとナビが入るボックス */
  background-image:none;/* プロダクトページでの白画像を消去 */
}

p#h1 > a{
  color:#fff;/* 表示直後のh1の色 */
    }

p#h1 > a.low{
  color:#fff;/* スクロールして縮小時のh1の色 */
}



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

section.main_copy{
	/* box-sizing:border-box; *//* style.cssに記述あり */
	width:90%;
	margin:144px auto 96px;
	color:#fff;
}


.hdgroup{
	width:100%;
	height:auto;
	margin:0 0 24px 0;
}

.main_copy h2{
	font-size:156.25%;/* 25px */
	width:100%;
	margin:0;
	padding:0;
}
.main_copy h2,
.main_copy aside{
	font-family: 'Noto Serif JP', serif;
	font-weight:900;
}

.main_copy p{
	font-family: 'Noto Serif JP', serif;
	font-weight:500;
	width:100%;
	margin-left:0px;
	overflow:visible;
}
.main_copy p span.keycopy{
	font-size:125%;/* 20px */
	line-height:1.8;/* 行間を1L＝36px */
	display:inline-block;
	width:100%;
	/*text-align:center;*/
	text-indent:1.5em;
	margin:0 auto;
}


/* ===== end キャッチフレーズ周りの指定 =====*/



/* ===== 小画面用：背景画像ボックス周り ===== */

div#top_image_box{/* ページの最初の背景表示用のボックス */
	background-image:url(../img/top_bg_top_01sml_2x.jpg);
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-position:center top;
	background-color:#16130b;/* 画像の両端のカラーに合わせる */
	}/* ボックスの基本仕様はstyle.cssに記述 */


		
/* ===== 小画面用：各背景画像ボックスの指定 ===== */

/* 背景画像ボックスの基本仕様はsryle.cssに記述 */

#bg_01{/* paralaxの為のセクションごとのボックス。上から#bg_01〜 */
width:100%;
  /* height:auto;*/
  background:url(../img/bg_01.jpg) repeat scroll center 0; /* 2段目の画像 */
}
#bg_02{
	width:100%;
  background:url(../img/bg_02.jpg) repeat scroll center 0; /* 2段目の画像 */
}
#bg_03{
  background:url(../img/bg_01.jpg) repeat scroll center 0; /* 3段目の画像 */
}
#bg_04{
  background:url(../img/bg_04.jpg) repeat scroll center 0; /* 4段目の画像 */
}
	

/* ===============小画面用　新着情報 =============== */
 
.news_box{
	box-sizing:border-box;
	overflow:hidden;
}

 
 .news_box ul{
	 width:100%;
	 max-width:1080px;
	 overflow:hidden;
	 margin:0 0 24px;
	 padding:8px 0 0;
	 border-bottom:solid 3px #00a094;
 }
  .news_box li{
	  display:block;
	  box-sizing:border-box;
	  padding:0 0 12px;
	  margin:0 0 24px;
	 border-bottom:solid 1px #00a094;
  }
  .news_box li:last-child{
	  border-bottom:none;
  }
  
  .news_head li time{
	  display:block;
	  margin:0 0 24px;
	float:none;
}
  .news_box li span{
	  width:100%;
	  float:none;
  }
  
 .news_box aside{
	 display:block;
	 float:right;
	 margin-bottom:24px;
 }
 
/* ===============新着情報用 アイコン ================= */

.news_head li time::after{
	position:relative;
	top:0;
	padding:8px 4px;
	margin:0 16px;
	color:#fff;
}

.news_head li.sen time::after{
	content:'洗浄機器';
	background-color:#4cc8ff;
}
.news_head li.han time::after{
	content:'炊飯盛付';
	background-color:#24648c;
}
.news_head li.kan time::after{
	content:'加熱機器';
	background-color:#ec781e;
}
.news_head li.sho time::after{
	content:'消毒保管庫';
	font-size:80%;
	background-color:#735a96;
}
.news_head li.oth time::after{
	content:'その他機器';
	font-size:80%;
	background-color:#f4a210;
}
.news_head li.sta time::after{
	content:'ステン特注';
	font-size:80%;
	background-color:#786e50;
}
.news_head li.basic time::after{
	content:'最新情報';
	background-color:#006655; /* #00a094 */
}
 
 /* ===== 最新情報 細部スタイル ===== */
 
 section.news_box a:link,
 section.news_box a:visited{
	 color:#006655;
 }
section.news_box a:hover{
	color:#65cc00;
}
 
.news_box  li span.news_br_after{
	 width:100%;
	 height:auto;
	 text-indent:12em;
 }
 span.tel{
	 box-sizing:border-box;
	 display:block;
	 width:85%;
	 height:auto;
	 text-align:left;
	 float:right;
 }

/* =============小画面用：八木厨房について =============== */
#bg_02 p{
	margin-bottom:24px;
}
div#bg_02 section.content_box h3,
div#bg_03 section.content_box h3{
      font-size: 118.75%;/*  118.75% = 20px 行間を開けるため24pxより小さく設定 */
     /*  line-height:1.2;行間でピッチを修正 1L=24px */
}

#bg_02 address{
	box-sizing:border-box;
	width:90%;
	padding:0 0 0 1em;
	margin-bottom:48px;
}


a.bunchu_link{
	display:block;
	color:#00a94;
}
a.bunchu_link:link{
	color:#00a094;
}
a.binchu_link:visited{
	color:#00a94;
}


/* =============小画面用：自由設計とは =============== */


#bg_03 section.content_box{
	padding-bottom:24px;
}
#bg_03 p{
	width:100%;
	float:none;
}
#bg_03 figure{
	box-sizing:border-box;
	width:100%;
	float:none;
	padding:0 0 0 0;
}
#bg_03 figure img{
	display:block;
	box-sizing: inherit;
	width:96%;
	margin:0 auro;
}



@media screen and (min-width:760px){
 
 /* ===== 中画面用キャッチフレーズ周りの指定 =====*/

section.main_copy{
	width:640px;
	margin:168px auto 120px;
	padding:0;
}

.main_copy>p{
	width:100%;
	margin:0 0 0 24px;
}
/* ===== end キャッチフレーズ周りの指定 =====*/
 
 
 
/* ===== 中画面用：背景画像ボックス周り ===== */

div#top_image_box{
	background-image:url(../img/top_bg_top_02mdl_1x.jpg);
	background-color:#1a2119;/* 画像の両端のカラーに合わせる */
	}/* ボックスの基本仕様はstyle.cssに記述 */


/* ===== 中画面用：各背景画像ボックスの指定 ===== */

#bg_01{/* paralaxの為のセクションごとのボックス。上から#bg_01〜 */
  background:url(../img/bg_01.jpg) repeat scroll center 0; /* 2段目の画像 */
}
#bg_02{
  background:url(../img/bg_02.jpg) repeat scroll center 0; /* 2段目の画像 */
}
#bg_03{
  background:url(../img/bg_01.jpg) repeat scroll center 0; /* 3段目の画像 */
}
#bg_04{
  background:url(../img/bg_04.jpg) repeat scroll center 0; /* 4段目の画像 */
}
/* ===== end 各背景画像ボックスの指定 ===== */


/* ===== 中画面用：各背景画像ボックスの個別指定 ===== */

#bg_03 p{
	width:64.2105%;
	float:left;
}
#bg_03 figure{
	width:35.7894%;
	float:left;
	padding:0 0 0 16px;
}
div#bg_03 a{
	text-decoration:underline;
}
div#bg_03 a:link,
div#bg_03 a:visited{
	color:#06787e; /* Darkgreen rgba(6,120,120,1) */
}
div#bg_03 a:hover{
	color:#99cc33;
}
	
 /* =============== 中画面用　新着情報 =============== */
  
 .news_box ul{
	 max-width:760px;
	 padding:0 0 0;
 }
  .news_box li{ /* 各項目間のアキ調整 */
	  padding:0 0 12px;
	  margin:0 0 24px;
  }
  
 
/* ===============中画面用新着情報用 アイコン ================= */

.news_head li time::after{
	top:4px;
}

/* =============中画面用：八木厨房について =============== */
#bg_02 p{
	margin-bottom:24px;
}
div#bg_02 section.content_box h3,
div#bg_03 section.content_box h3{
      font-size: 156.25%;/* 156.25% = 25px 行間を詰めるため40pxより小さく設定 */
}
/* =============中画面用：自由設計とは =============== */



}


	




@media screen and (min-width:1024px){
 
 /* ===== PC用キャッチフレーズ周りの指定 =====*/

section.main_copy h2{
	font-size:200%;
}

section.main_copy{
	/*max-width:1080px;*/
	width:700px;
	margin:144px auto 168px;
}

.main_copy p{
	width:100%;
	/*margin:0 0 0px ;*/
}


/* ===== end キャッチフレーズ周りの指定 =====*/


 
 /* ===== PC画面用：背景画像ボックス周り ===== */

div#top_image_box{
	background-image:url(../img/top_bg_top_03lag_1x.jpg); /* w1800x1400 */
	background-color:#1a2119;/* 画像の両端のカラーに合わせる */
	}/* ボックスの基本仕様はstyle.cssに記述 */
 

 /* ===== PC画面用：各背景画像ボックスの指定 ===== */

#bg_01{/* paralaxの為のセクションごとのボックス。上から#bg_01〜 */
  background:url(../img/bg_01.jpg) repeat scroll center 0; /* 2段目の画像 */
}
#bg_02{
  background:url(../img/bg_02.jpg) repeat scroll center 0; /* 2段目の画像 */
}
#bg_03{
  background:url(../img/bg_01.jpg) repeat scroll center 0; /* 3段目の画像 */
}
#bg_04{
  background:url(../img/bg_04.jpg) repeat scroll center 0; /* 4段目の画像 */
}
 
 
 /* =============== PC画面用　新着情報 =============== */
 
 .news_box ul{
	 max-width:1080px;
 }
  .news_box li{/* 各項目間のアキ調整 */
	  padding:0 0 12px;
	  margin:0 0 24px;
  }
  .news_head li time{
	float:left;
}
  .news_box li span{
	  width:74.5%;
	  float:left;
  }
  
 
/* ===============PC画面用新着情報用 アイコン ================= */


}