@charset "utf-8";

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

/* ----------------------------------------------------------------------------------------------- */
/* バナーエリアのラッパー */
/* ----------------------------------------------------------------------------------------------- */
#top_banner_area{
	width:100%;
	height:340px;
	margin:0 0 25px;
	padding:0;
	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{
	width:960px;
	height:66px;
	margin:0 auto;
	padding:8px 0 0;
	list-style:none;
}
#top_mid li{float:left;height:66px;}
#top_mid a{
	display:block;
	overflow:hidden;
	width:230px;
	height:66px;
	margin-right:13px;
	background-color:transparent;
	background-position:left bottom;
	background-repeat:no-repeat;
}
#top_mid a img{
	opacity:1;
	-webkit-transition:opacity 0.2s ease-in-out;
	-moz-transition:opacity 0.2s ease-in-out;
	transition:opacity 0.2s ease-in-out;
}
#top_mid a:hover img,
#top_mid a.selected img{
	filter:alpha(opacity=0);
	opacity:0;
}
#top_mid_about{background-image:url("../../images/top_banners02/btn_mid_about.png");}
#top_mid_product{background-image:url("../../images/top_banners02/btn_mid_product.png");margin-right:14px!important;}
#top_mid_special{background-image:url("../../images/top_banners02/btn_mid_special.png");}
#top_mid_edu{background-image: url("../../images/top_banners02/btn_mid_edu.png");margin-right:0!important;}

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

/* ----------------------------------------------------------------------------------------------------------- */
/* 2013.04.16 更新分 */
/* カテゴリ中バナーのロールオーバーで表示されるバナー、ボタン群 */
/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */
/* 製品情報 */
/* ----------------------------------------------------------------------------------------------------------- */
#top01{
	display:none;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-480px;
	width:960px;
	height:250px;
	background:transparent url('../../images//top_banners02/top_bg.png');
	z-index:999;
}
#top01 ul{
	margin:0 auto;
	list-style:none;
	width:875px;
	height:245px;
	padding-top:5px;
}
#top01 ul li{float:left;margin:0;}
#top01 ul li.mid{margin:0 10px;}
#top01 a{
	display:block;
	width:265px;
	height:220px;
	padding:20px 0 0 20px;
	background:transparent url('../../images//top_banners02/top01_panel_bg.png') left top no-repeat;
}
#top01 .top_arrow{position:absolute;left:345px;bottom:-11px;}

/* ----------------------------------------------------------------------------------------------------------- */
/* スペシャルサイト */
/* ----------------------------------------------------------------------------------------------------------- */
#top02{
	display:none;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-480px;
	width:960px;
	height:250px;
	background:transparent url('../../images//top_banners02/top_bg.png');
	z-index:999;
}
#top02 ul{margin:0;list-style:none;}
#top02 .panels{position:absolute;left:120px;top:5px;width:514px;height:245px;}
#top02 .panels li{position:absolute;left:0;top:0;display:none;}
#top02 .panels li:first-child{display:block;}
#top02 .panels a{
	display:block;
	width:496px;
	height:216px;
	padding:18px 0 0 18px;
	background:transparent url('../../images//top_banners02/top02_panel_bg.png') left top no-repeat;
}
#top02 .buttons{
	left:634px;
}
#top02 .top_arrow{position:absolute;left:590px;bottom:-11px;}

/* ----------------------------------------------------------------------------------------------------------- */
/* エデュテインメント */
/* ----------------------------------------------------------------------------------------------------------- */
#top03{
	display:none;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-480px;
	width:960px;
	height:250px;
	background:transparent url("../../images//top_banners02/top03_bg.jpg");
	z-index:999;
}
#top03 ul{margin:0;list-style:none;}
#top03 .panels{position:absolute;left:467px;top:5px;z-index:99;}
#top03 .panels li{position:absolute;left:0;top:0;display:none;}
#top03 .panels li:first-child{display:block;}/*表示テスト用*/
#top03 .panels a{
	display:block;
	width:289px;/*307px*/
	height:222px;/*240px*/
	padding:18px 0 0 18px;
	background:transparent url("../../images//top_banners02/top03_panel_bg.png") left top no-repeat;
}
#top03 .buttons{
	right:0;
	width:680px;
	padding:0;
	background:transparent url("../../images/top_banners02/btn_arrow02.png") 184px 23px no-repeat;
}
#top03 .buttons li{float:left;}
#top03 .top_arrow{position:absolute;left:830px;bottom:-11px;}

/* パネル内画像のロールオーバー */
.panels li a img{
	opacity:1;
	-webkit-transition:opacity .2s ease-in-out;
	-moz-transition:opacity .2s ease-in-out;
	transition:opacity .2s ease-in-out;
}
.panels li a:hover img{opacity:.75;filter:alpha(opacity=75);}

/* ----------------------------------------------------------------------------------------------------------- */
/* ボタン（小バナー）リスト */
/* ----------------------------------------------------------------------------------------------------------- */
.buttons{
	position:absolute;
	padding-left:9px;
	top:13px;
	background:transparent url("../../images/top_banners02/btn_arrow.png") left 23px no-repeat;
}

/* ボタン単体 */
.buttons a{
	display:block;
	width:177px;
	height:49px;
	padding:7px 0 0 7px;
	background:transparent url("../../images//top_banners02/btn_bg.png") left bottom no-repeat;
}
.buttons a:hover,
.buttons a.selected{background-position:left top;}
.buttons a:hover img{opacity:1;}

/* 左上、左下、右列の背景差替 */
.buttons a.top{background-image:url("../../images//top_banners02/btn_bg_top.png");}
.buttons a.bottom{background-image:url("../../images//top_banners02/btn_bg_bottom.png");}
.buttons a.left{margin-right:312px;}
.buttons a.top.left{background-image:url("../../images/top_banners02/btn_bg02_top.png");}
.buttons a.bottom.left{background-image:url("../../images/top_banners02/btn_bg02_bottom.png");}

/* ----------------------------------------------------------------------------------------------------------- */
/* サイト更新情報 */
/* ----------------------------------------------------------------------------------------------------------- */
#siteinfo a{
	padding-left:135px;
	background-image:url('../../images/top_banners02/info_hoshizaki.png');
	background-color:transparent;
	background-position:112px 5px;
	background-repeat: no-repeat;
}
#siteinfo a.setsuden{background-image:url('../../images/top_banners02/info_setsuden.png');}
#siteinfo a.kitchen{background-image:url('../../images/top_banners02/info_kitchen.png');}
#siteinfo a.penguin{background-image:url('../../images/top_banners02/info_penguin.png');}
#siteinfo a.product{background-image:url('../../images/top_banners02/info_product.png');}
#siteinfo a.event{background-image:url('../../images/top_banners02/info_event.png');}
#siteinfo a.teatime{background-image:url('../../images/top_banners02/info_teatime.png');}

#siteinfo span{
	padding-right:15px;
	background:transparent url('../images/bg_news-list_off.gif') right center no-repeat;
}