@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;
	width:100%;
	height:auto;
	overflow:hidden;
}

 
 .news_box ul{
	 width:100%;
	 max-width:1080px;
	 overflow:hidden;
	 margin:0 0 36px;
	 padding:8px 0 0 0;
	 border-bottom:solid 3px #00a094;
 }
  .news_box li{
	  display:block;
	  box-sizing:border-box;
	  padding:0 0 24px;
	  margin:0 0 24px;
	 border-bottom:solid 1px #00a094;
  }
  .news_box li:last-child{
	  border-bottom:none;
  }
  
  /* === 最新情報の各項目設定 === */
  
  .news_head li span.post_time{
	  display:block;
	  box-sizing:border-box;
	  width:100%;
	  height:auto;
  }
    .news_head li span.post{
	  display:block;
	  box-sizing:border-box;
	  width:100%;
	  height:auto;
	  font-size:93.75%; /* 15px */
	  line-height:1.5;
	}
	b{
  font-weight:bold;/*または600などで設定*/
}

.center  { text-align: center; } /* ←中央寄せ */

  .news_head li time{
	  display:block;
	  margin:0 0 24px;
	float:none;
}
  .news_box li span.post{
	  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 3px;
	margin:0 8px 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%;
	overflow:hidden;
	padding:0 0 0 1em;
	margin-bottom:36px;
}


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_head li time::after{
	padding:8px 4px;
	margin:0 0px 0 8px;
	color:#fff;
}


 /* =============== 中画面用　新着情報 =============== */
  
 .news_box ul{
	 width:96%;
	 /*max-width:760px;*/
	 height:auto;
	 margin:0 auto 36px;
 }
  .news_box li{ /* 各項目間のアキ調整 */
  	width:100%;
  	height:auto;
	padding:0 0 12px;
	margin:0 0 24px;
  }
 
/* ===中画面用新着情報用 アイコン === */

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

  /* === 最新情報の各項目設定 === */
  
  .news_head li span.post_time{
	  display:block;
	  box-sizing:border-box;
	  width:auto;
	  /* min-width:184px;  */
	  height:auto;
	  float:left;
  }
    .news_head li span.post{
	  display:block;
	  box-sizing:border-box;
	  width:73%;
	  height:auto;
	  padding:0 0 0 16px;
	  font-size:100%; /* 16px */
	  line-height:1.5;
	  float:right;
  }




/* =============中画面用：八木厨房について =============== */
#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;
  }
  
 /* === 最新情報の各項目設定 === */
  
  .news_head li span.post_time{
	  display:block;
	  box-sizing:border-box;
	  width:auto;
	  /* min-width:184px;  */
	  height:auto;
	  float:left;
  }
    .news_head li span.post{
	  display:block;
	  box-sizing:border-box;
	  width:80%;
	  height:auto;
	  padding:0 0 0 16px;
	  font-size:100%; /* 16px */
	  line-height:1.5;
	  float:right;
  }
 
 
/* ===============PC画面用新着情報用 アイコン ================= */

/* ボタン001 */
.button001 a {
    background: #eee;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 280px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
	text-decoration: none!important;
}
.button001 a:hover {
    background: #00a094;
    color: #FFF !important;
}
.button001 a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button001 a:hover:after {
    border-color: #FFF !important;
}	
	

}