@charset "utf-8";

/* ----------------------------------------------------------------------------------------------- */
/* ホシザキco.jpサイト トップページ バナー部スタイル */
/* ----------------------------------------------------------------------------------------------- */
/* 2011.12.18	H.HISHIDA */

/* ----------------------------------------------------------------------------------------------- */
/* バナーエリアのラッパー */
/* ----------------------------------------------------------------------------------------------- */
#top_banner_area{
	width:100%;
	height:355px;
	margin:0;
	padding:0 0 15px;
	background:transparent url("/images/top_banners/bg.gif") left top repeat-x;
	overflow:hidden;
	border-top:1px solid #c8c8c8;
}
/* ----------------------------------------------------------------------------------------------- */
/* クリップ領域 */
/* ----------------------------------------------------------------------------------------------- */
#top_banner_clip{
	position:relative;
	width:1200px;
	height:250px;
	margin:0 auto;
	overflow:hidden;
}
/* クリップ両端のマスク */
#top_mask_r,
#top_mask_l{
	display:block;
	position:absolute;
	width:120px;
	height:250px;
	top:0;
	z-index:40;
}
#top_mask_r{right:0;}
#top_mask_l{left:0;}

/* ----------------------------------------------------------------------------------------------- */
/* スライダー */
/* ----------------------------------------------------------------------------------------------- */
#top_slider{
	position:absolute;
	width:2761px;
	height:250px;
	left:-1681px;
}

/* ----------------------------------------------------------------------------------------------- */
/* 個別領域 */
/* ----------------------------------------------------------------------------------------------- */
#top_slider div{
	position:relative;
	display:inline;
	float:left;
	width:450px;
	height:250px;
	background-color:transparent;
	background-position:left top;
	background-repeat:no-repeat;
	margin:0 110px 0 0;
	padding:0;
}
.copy_main,
.copy_sub{
	display:none;
	position:absolute;
	margin:0;
	padding:0;
	z-index:20;
}
.notes{display:block;float:none;}
.notes img{position:absolute;display:none;z-index:10;}
#top_p01{background-image:url("/images/top_banners/photo01.jpg");}
#top_p02{background-image:url("/images/top_banners/photo02.jpg");}
#top_p03{background-image:url("/images/top_banners/photo03.jpg");width:571px!important;}
#top_p01 .copy_main{left:305px;top:92px;width:95px;height:28px;}
#top_p02 .copy_main{left:318px;top:92px;width:120px;height:28px;}
#top_p03 .copy_main{left:390px;top:94px;width:181px;height:24px;}
#top_p01 .copy_sub{left:309px;top:123px;width:107px;height:16px;}
#top_p02 .copy_sub{left:322px;top:123px;width:112px;height:16px;}
#top_p03 .copy_sub{left:391px;top:122px;width:135px;height:14px;}

#top_main img{display:none;position:absolute;}
#top_main{background-image:url("/images/top_banners/main_bg.gif");width:960px!important;margin:0!important;}
#top_main .copy_main{left:649px;top:76px;width:213px;height:48px;}
#top_main .copy_sub{left:620px;top:173px;width:273px;height:35px;}
#top_product01{left:43px;top:39px;width:118px;height:211px;}
#top_product02{left:184px;top:87px;width:74px;height:163px;}
#top_product03{left:265px;top:144px;width:41px;height:106px;}
#top_product04{left:327px;top:84px;width:44px;height:166px;}
#top_product05{left:388px;top:105px;width:41px;height:48px;}
#top_product06{left:434px;top:160px;width:75px;height:90px;}

/* ----------------------------------------------------------------------------------------------- */
/* 中・小バナー領域 */
/* ----------------------------------------------------------------------------------------------- */
#top_mid{
	position:relative;
	width:960px;
	margin:0 auto;
	padding:0;
}
#top_mid ul{margin:0;padding:0;list-style:none;}
#top_mid ul a{display:block;overflow:hidden;text-indent:-999px;}
#top_mid ul a:hover{background-position:left top;}

/* ----------------------------------------------------------------------------------------------- */
/* 中バナー */
/* ----------------------------------------------------------------------------------------------- */
#top_mid_about,#top_mid_products{
	position:absolute;
	display:block;
	width:230px;
	height:66px;
	background-color:transparent;
	background-position:left bottom;
	background-repeat:no-repeat;
}
#top_mid_about{left:0;top:8px;background-image:url("/images/top_banners/btn_mid_outlines.gif");}
#top_mid_products{left:240px;top:8px;background-image:url("/images/top_banners/btn_mid_products.gif");}

/* ----------------------------------------------------------------------------------------------- */
/* 小バナー */
/* ----------------------------------------------------------------------------------------------- */
#top_sbanner{
	position:absolute;
	right:0px;
	top:14px;
	width:470px;
	height:60px;
	background:transparent url("/images/top_banners/sbanners_bg.gif") left top no-repeat;
}
#top_sbanner div{
	position:relative;
	width:420px;
	height:35px;
	margin:-14px auto 0;
	padding:26px 0 12px;
	overflow:hidden;
}
#top_sbanner ul{position:absolute;width:560px;height:35px;}
#top_sbanner ul li{float:left;display:inline;margin:0 2px 0;padding:0;}
#top_sbanner ul li a{width:66px;height:35px;background-position:left bottom;background-repeat:no-repeat;}
#top_sbanner ul li a:hover{background-position:left top;}

#sbanner01{background-image:url("/images/top_banners/sbanner_zseries.gif");}
#sbanner02{background-image:url("/images/top_banners/sbanner_cookeverio.gif");}
#sbanner03{background-image:url("/images/top_banners/sbanner_wox.gif");}
#sbanner04{background-image:url("/images/top_banners/sbanner_prefab.gif");}
#sbanner05{background-image:url("/images/top_banners/sbanner_kitchenplus.gif");}
#sbanner06{background-image:url("/images/top_banners/sbanner_teatimeplus.gif");}
#sbanner07{background-image:url("/images/top_banners/sbanner_penguinisland.gif");}
#sbanner08{background-image:url("/images/top_banners/sbanner_chainstore.gif");}
#sbanner09{background-image:url("/images/top_banners/sbanner_setsuden.gif");}

#sbanner_arrow_l,
#sbanner_arrow_r{
	position:absolute;
	display:block;
	overflow:hidden;
	text-indent:-999px;
	width:13px;
	height:60px;
	top:0px;
	background-color:transparent;
	background-position:left center;
	background-repeat:no-repeat;
}
#sbanner_arrow_l:hover,#sbanner_arrow_r:hover{opacity:0.5;filter:alpha(opacity=50);}
#sbanner_arrow_l{
	background-image:url("/images/top_banners/sbanner_arrow_l.gif");
	left:4px;
}
#sbanner_arrow_r{
	background-image:url("/images/top_banners/sbanner_arrow_r.gif");
	right:4px;
}

/* ----------------------------------------------------------------------------------------------- */
/* ポップアップバナー */
/* ----------------------------------------------------------------------------------------------- */
#top_pbanner{
	display:none;
	position:absolute;
	left:518px;
	/*top:-220px;*/
	top:0;
	width:415px;
	height:220px;
	overflow:hidden;
}
#top_pbanner ul{
	position:absolute;
	left:0;
	/*top:0;*/
	top:220px;
	width:415px;
	height:220px;
	background:transparent url(/images/top_banners/pbanner_bg.gif) left top no-repeat;
	z-index:60;
}
#top_pbanner ul li{}
#top_pbanner ul li a{
	position:absolute;
	display:block;
	left:5px;
	top:5px;
	width:405px;
	height:190px;
	overflow:hidden;
	text-indent:-999px;
	background-color:transparent;
	background-position:left top;
	background-repeat:no-repeat;
	z-index:61;
}
#top_pbanner ul li a:hover{opacity:0.8;filter:alpha(opacity=80);}

#pbanner01{background-image:url("/images/top_banners/pbanner01.jpg");}
#pbanner02{background-image:url("/images/top_banners/pbanner02.jpg");}
#pbanner03{background-image:url("/images/top_banners/pbanner03.jpg");}
#pbanner04{background-image:url("/images/top_banners/pbanner04.jpg");}
#pbanner05{background-image:url("/images/top_banners/pbanner05.jpg");}
#pbanner06{background-image:url("/images/top_banners/pbanner06.jpg");}
#pbanner07{background-image:url("/images/top_banners/pbanner07.jpg");}
#pbanner08{background-image:url("/images/top_banners/pbanner08.jpg");}
#pbanner09{background-image:url("/images/top_banners/pbanner09.jpg");}

#pbanner_closer{
	position:absolute;
	right:0;
	top:0;
	display:block;
	width:100px;
	height:30px;
	overflow:hidden;
	text-indent:-999px;
	z-index:65;
}

/* ----------------------------------------------------------------------------------------------- */
/* ウインドウ幅が狭い場合 */
/* ----------------------------------------------------------------------------------------------- */
@media screen and (max-width:1024px){
	#top_banner_clip{width:960px;}
	#top_slider{left:-1800px;}
}