@charset "utf-8";
@import "p_common.css";

/* ホシザキ製品情報トップページ用CSS */

/* -------------------------------------------------------------------------------------------------- */
/* ページ背景 */
/* -------------------------------------------------------------------------------------------------- */
body{
	background:transparent url("../images/top/bg.gif") left top repeat-x;
}

/* -------------------------------------------------------------------------------------------------- */
/* バナー部コントロール */
/* -------------------------------------------------------------------------------------------------- */
/* バナー表示領域 */
#panels{position:relative;padding-top:8px;width:100%;overflow:hidden;height:362px;}
/* スライダー領域 */
#slider{position:absolute;/*width:2150px;*/width:auto;height:360px;overflow:hidden;}
/* バナーセット */
#slider ul{display:block;float:left;min-width:2150px/*2150px*/;width:auto;height:360px;margin:0;padding:0;}
#slider ul li{float:left;margin:0;padding:0;}
#slider ul li a{
	display:block;
	width:187px;
	height:180px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:left bottom;
	overflow:hidden;
	text-indent:-999px;
	margin:0 4px 0;
}
#slider ul li a:hover{background-position:left top;}
#slider .vertical{height:360px;}
#slider .horizontal{width:384px;}
#slider .quad{width:381px;height:360px;}

/* 透明度のみでロールオーバー表現を行う場合の予備設定 */
/*#slider .vertical:hover,#slider .horizontal:hover,#slider .quad:hover{background-position:left bottom;opacity:.9;filter:alpha(opacity=90);}*/

#banner01{background-image:url("../images/top/banner01.jpg");}
#banner02{background-image:url("../images/top/banner02.jpg");}
#banner03{background-image:url("../images/top/banner03.jpg");}
#banner04{background-image:url("../images/top/banner04.jpg");}
#banner05{background-image:url("../images/top/banner05.jpg");}
#banner06{background-image:url("../images/top/banner06.jpg");}
#banner07{background-image:url("../images/top/banner07.jpg");}
#banner08{background-image:url("../images/top/banner08.jpg");}
#banner09{background-image:url("../images/top/banner09.jpg");display:inline;float:left;margin-right:10px!important;margin-right:6px;}
#banner10{background-image:url("../images/top/banner10.jpg");}
#banner11{background-image:url("../images/top/banner11.jpg");}
#banner12{background-image:url("../images/top/banner12.jpg");}
#banner13{background-image:url("../images/top/banner13.jpg");}
#banner14{background-image:url("../images/top/banner14.jpg");}
#banner15{background-image:url("../images/top/banner15.jpg");}
#banner16{background-image:url('../images/top/banner16.jpg');}
#banner17{background-image:url('../images/top/banner17.jpg');}

/* バナー部矢印 */
.banner_arrow{
	position:absolute;
	display:block;
	top:156px;
	width:55px;
	height:60px;
	background-color:transparent;
	background-position:left bottom;
	background-repeat:no-repeat;
	overflow:hidden;
	text-indent:-999px;
}
.banner_arrow:hover{background-position:left top;}
#banner_arrow_left{background-image:url("../images/top/banner_arrow_left.png");left:0;}
#banner_arrow_right{background-image:url("../images/top/banner_arrow_right.png");right:0;}


/* -------------------------------------------------------------------------------------------------- */
/* コンテンツ */
/* -------------------------------------------------------------------------------------------------- */
/* ラッパー */
#contents{
	padding:202px 0 12px;
}

/* 製品カテゴリ別ナビゲーション */
#p_navi{
	position:absolute;
	top:0;
	left:0;
	width:980px;
	height:auto;
	padding:0 0 15px;
	background:transparent url("../images/top/bg_category_bottom.png") left bottom no-repeat;
	z-index:10;
	}
#p_navi ul{
	background:transparent url("../images/top/bg_category.png") left top repeat-y;
	height:136px;
	margin:0;
	padding:0 0 0 10px;
}
#p_navi ul li{display:inline;float:left;margin:0;padding:0;}
#p_navi ul li a{
	display:block;
	width:106px;
	height:135px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:left bottom;
	overflow:hidden;
	text-indent:-999px;
}
#p_navi ul li a:hover{background-position:left top;}
#pnavi01{background-image:url("../images/top/cat01.gif");width:109px!important;}
#pnavi02{background-image:url("../images/top/cat02.gif");}
#pnavi03{background-image:url("../images/top/cat03.gif");}
#pnavi04{background-image:url("../images/top/cat04.gif");}
#pnavi05{background-image:url("../images/top/cat05.gif");}
#pnavi06{background-image:url("../images/top/cat06.gif");}
#pnavi07{background-image:url("../images/top/cat07.gif");}
#pnavi08{background-image:url("../images/top/cat08.gif");}
#pnavi09{background-image:url("../images/top/cat09.gif");width:109px!important;}

/* ドロップダウンメニュー */
#droparea{
	position:absolute;
	top:140px;
	left:0;
	width:980px;
	height:600px;
	overflow:hidden;
	z-index:1;
}
.dropdown{
	font-size:12px;
	line-height:18px;
	position:absolute;
	/*top:-410px;*/
	top:0;
	left:0;
	width:980px;
	background:transparent url("../images/top/bg_dropdown_bottom.png") left bottom no-repeat;
	padding:0 0 8px;
}
.dropdown .dropdown_close{
	position:absolute;
	right:18px;
	top:8px;
	width:64px;
	height:18px;
	background:transparent url("../images/top/tab_close.gif") center center no-repeat;
	overflow:hidden;
	text-indent:-999px;
	z-index:1;
}
.dropdown .dropdown_close:hover{
	opacity:0.8;
	filte:alpha(opacity=80);
}
.dropdown h3{
	position:absolute;
	bottom:-24px;
	width:170px;
	height:32px;
	background:transparent url("../images/top/bg_tab.png") left top no-repeat;
	margin:0;
	padding:0;
}
.dropdown h3 a{
	display:block;
	width:170px;
	height:28px;
	margin:0 auto;
	padding:4px 0 0;
	background:transparent url("../images/top/tab_arrow_down.gif") 140px 6px no-repeat;;
}
.dropdown h3 a:hover{opacity:0.8;filter:alpha(opacity=80);}
.dropdown h3.down a{background-image:url("../images/top/tab_arrow_up.gif");}
.dropdown h3 a img{display:block;margin:2px auto 0;}
.dropdown ul{
	background:transparent url("../images/top/bg_dropdown.png") left top repeat-y;
	padding:30px 0 10px 36px;
}
/*このliがカラム単位*/
.dropdown ul li{
	display:inline;
	float:left;
	width:210px;
	margin:0 15px 0 0;
}
.dropdown ul li.last{
	display:inline;
	float:left;
	width:240px;
	margin:0;
}
.dropdown ul ul{
	background:none;
	margin-bottom:6px;
	padding:0 0 8px;
}
.dropdown ul ul li{
	color:#fff;
	font-size:100%;
	line-height:130%;
	display:block;
	float:none;
	width:auto;
	background:transparent url("../images/top/bullet_tri_drop.gif") 5px 8px no-repeat;
	padding:4px 0 2px 18px;
}
.dropdown .bordered{border-bottom:2px groove #82A0AF;}
.dropdown .category{background:none;font-size:14px;padding-left:0;padding-bottom:6px;}
.dropdown .series{font-weight:bold;background:transparent url("../images/top/bullet_round_drop.gif") left center no-repeat;}
.dropdown ul ul ul{
	border:none;
	padding:0;
	margin:0;
	list-style:disc;
}
.dropdown ul ul ul li{
	background:transparent url("../images/top/bullet_dot_drop.gif") left center no-repeat;
	padding-left:6px;
	margin-left:0;
}
.dropdown ul a{color:#fff;/*-webkit-transition:background-color 0.1s;-moz-transition:background-color 0.1s;*/}
.dropdown ul a:hover{/*text-decoration:none;background-color:#82A0AF;*/}
#d_lineup{z-index:2;}
#d_eco{z-index:1;}
#d_lineup h3{left:16px;}
#d_eco h3{left:186px;}

/* パン屑リスト */
#breadcrumbs{
	position:absolute;
	right:12px;
	left:auto;
	top:170px;
	width:400px;
	font-size:12px;
	line-height:16px;
	text-align:right;
	z-index:3;
}

/* コンテンツ下部インフォメーション */
#left{
	position:relative;
	display:inline-block;
	float:left;
	width:700px;
	margin:0 40px 0 0;
	padding-left:10px;
}
#left h2{
	font-size:14px;
	width:142px;
	height:35px;
	overflow:hidden;
	text-indent:-999px;
	background:transparent url("../images/top/h2_info.gif") left top no-repeat;
	margin:0 0 10px;
	padding:0;
}
/* 記事一覧ボタン */
#btn_newslist{
	display:block;
	position:absolute;
	right:0;
	top:5px;
	width:100px;
	height:25px;
	overflow:hidden;
	text-indent:-999px;
	background:transparent url("../images/top/btn_list.gif") left bottom no-repeat;
}
#btn_newslist:hover{background-position:left top;}

/* 東日本大震災に関する情報 */
#btn_disaster{
	display:block;
	position:absolute;
	right:0;
	top:3px;
	width:185px;
	height:30px;
	overflow:hidden;
	text-indent:-999px;
	background:transparent url("../images/top/btn_disaster.gif") left bottom no-repeat;
}
#btn_disaster:hover{background-position:left top;}

/* インフォメーション記事　*/
#information{
	position:relative;
	width:672px;
	/* height:480px; */
	height:580px;
	border:1px solid #c6c6c6;
	overflow:auto;
	padding:14px;
}
#information li{
	position:relative;
	display:block;
	min-height:72px;
	padding:0 0 8px;
	margin:0 0 12px;
	border-bottom:1px dashed #cecece;
}
#information li img{
	display:block;
	float:left;
	width:120px;
	height:76px;
	margin-top:0;
	margin-right:8px;
}
#information li a{
	display:inline-block;
	line-height:16px;
	background-color:transparent;
	margin-bottom:4px;
}
#information li:last-child{margin-bottom:0;border-bottom:0;padding-bottom:0;}
#information li div{
	position:relative;
	display:block;
	margin-left:128px;
	width:auto;
	padding:4px;
	-webkit-transition:0.3s;
	-moz-transition:0.3s;
}
.info_product a.update-new{background:url("../images/info/badge_newproduct.gif") no-repeat left top;text-indent:64px;}
.info_news a{background-image:url("../images/info/badge_whatsnew.gif");}
#information li p{font-size:93%;margin:0;}

/* コンテンツ下部右 */
#right{display:block;}
#right div{margin-bottom:10px;}
#right h3{
	width:220px;
	height:35px;
	overflow:hidden;
	text-indent:-999px;
	margin:0 0 16px;
	padding:0;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:left top;
}
#btn_notice{
	display:block;
	width:220px;
	height:34px;
	overflow:hidden;
	text-indent:-999px;
	background:transparent url("../images/top/btn_notice.gif") left top no-repeat;
}
#btn_notice:hover{opacity:0.8;filter:alpha(opacity=80);}

#right_support ul{margin:18px 0 23px;}
#right_support ul li{font-size:11px;line-height:18px;margin:5px 0 5px;}
#right_support ul li a{
	display:inline-block;
	padding-left:16px;
	line-height:16px;
	height:16px;
	background:transparent url("../images/common/bullet_round.gif") left top no-repeat;
}
#right_support h3{background-image:url("../images/top/h3_support.gif");}
#right_network h3{background-image:url("../images/top/h3_network.gif");}
#right_network a{display:block;
	width:220px;
	height:74px;
	overflow:hidden;
	text-indent:-999px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:left bottom;
	margin:0 0 14px;
}
#right_network a:hover{opacity:0.8;filter:alpha(opacity=80);}
#btn_showroom{background-image:url("../images/top/btn_showroom.gif");}
#btn_office{background-image:url("../images/top/btn_office.gif");}

/* -------------------------------------------------------------------------------------------------- */
/* 重要なお知らせ */
/* -------------------------------------------------------------------------------------------------- */
#information_layer_base{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:999;
	background:transparent url("../images/common/matte.png") left top;
	cursor:pointer;
}
#information_layer{
	position:absolute;
	left:221px;
	top:26px;
	width:500px;
	height:260px;
	background:#fff;
	border:2px solid #969696;
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	box-shadow:0 3px 15px rgba(0,0,0,.75);
	-webkit-box-shadow:0 3px 15px rgba(0,0,0,.75);
	-mos-box-shadow:0 3px 15px rgba(0,0,0,.75);
	/*filter:progid:DXImageTransform.Microsoft.Glow(Strength=5,Color='#999999');zoom:1;*/
	cursor:default;
	margin:0;
	padding:24px;
}
#information_layer h2{
	font-size:12px;
	line-height:150%;
	width:100%;
	height:34px;
	background:transparent url("../images/top/btn_notice.gif") center center no-repeat;
	margin:0 auto 48px;
	padding:0;
	overflow:hidden;
	text-indent:-999px;
}
#information_layer p{
	text-align:center;
}
#btn_info_close {
	display:block;
	position:absolute;
	right:-18px;
	top:-18px;
	width:40px;
	height:40px;
	background:transparent url("../images/common/btn_close.png") center center no-repeat;
	overflow:hidden;
	text-indent:-999px;
	z-index:1000;
}
#btn_info_close:hover{opacity:0.8;}