@charset "utf-8";

/*navi 関連*/
#navi
{
	margin: 0;
	padding: 5px 0 0;
}
#navi img
{
	margin: 0 5px;
	padding: 0;
}
#navi ul
{
	margin: 0;
	padding: 0;
	white-space: nowrap;
	
	font-size: 12px;
}
#headerMenu
{
	height: 92px;
	
	/*IE6でウィンドウ幅を狭めた時にメニューが崩れないようにする*/
	width: 800px;
}

.twoColumn #headerMenu
{
	/*IE6で不要な背景画像が表示されないようにする*/
	background-image: none !important;
}
.oneColumn #headerMenu
{
	padding-left: 38px;
	background: url(../../image/g2/navi/bg/bg-navi2_04.gif) no-repeat scroll 20px 13px;
}

#navi li
{
	list-style-type: none;
	float:left;
	padding: 4px 0 0;
	background: url(../../image/g2/navi/bg/bg-navi2_02.gif) repeat-x scroll left 13px;
	font-size: 12px;
	width: 72px;
	height: 88px;
}

#navi li:hover
{
	background-image: url(../../image/g2/navi/bg/bg-navi2_02_hover.gif);
}

/*SpryMenuBarHorizontal.cssの設定値を上書き*/
#navi ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	height: auto;
	overflow: visible;
	background-color: #ffffff;
	
	/*Safariでwidth:auto にすると、メニューが崩れる*/
	width: 178px;
}
#navi ul.MenuBarHorizontal ul li
{
	background: none;
	margin: 0;
	padding: 0;
	color: #cc0033;
	border-bottom: solid 1px #ffffff;
	width: 174px;
	line-height: 18px;
	font-weight: bold;
	height: auto;
}
#navi ul.MenuBarHorizontal ul ul {
	margin: -5% 0 0 95%;
}
/* solve EXTRA_WHITESPACE_IN_LIST_LINKS */
#navi ul.MenuBarHorizontal a {
	display: inline-block;
}
#navi ul.MenuBarHorizontal a {
	display: block;
	padding: 0 0 3px;
	background-color: transparent;
}
#navi ul.MenuBarHorizontal ul a {
	color: #2d9d7a;
	background-color: #fff;
	padding: 0 0 0 4px;
	height: auto;
}
#navi ul.MenuBarHorizontal ul a:hover,
#navi ul.MenuBarHorizontal ul a:focus {
	color: #ff0066;
	background-color: #E2F7DF;
}
#navi ul.MenuBarHorizontal ul a.MenuBarItemHover,
#navi ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover,
#navi ul.MenuBarHorizontal ul a.MenuBarSubmenuVisible
{
	color: #ff0066;
	background-color: #E2F7DF;
}
#navi ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: none;
}
#navi ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(../../SpryAssets/SpryMenuBarRight.gif);
	background-position: 95% 50%;
}
#navi ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(../../SpryAssets/SpryMenuBarDownHover.gif);
	background-position: 50% 100%;
}
#navi ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(../../SpryAssets/SpryMenuBarRightHover.gif);
	background-position: 95% 50%;
}


.twoColumn #navi .menu-site,
.twoColumn #navi .menu-site:hover
{
	padding: 0 29px 0 21px;
	background: url(../../image/g2/navi/bg/bg-navi2_01.gif) no-repeat scroll 6px 13px;
	width: 112px;
}
#navi .menu-site
{
	display: none;
	height: 92px;
	overflow: hidden;
}
.twoColumn.product #site-product,
.twoColumn.discount #site-discount,
.twoColumn.ftp #site-ftp,
.twoColumn.schedule #site-schedule,
.twoColumn.guide #site-guide,
.twoColumn.howto #site-howto,
.twoColumn.download #site-download
{
	display: block;
}
.twoColumn #visit,
.twoColumn.product #menu-product,
.twoColumn.discount #menu-discount,
.twoColumn.ftp #menu-download,
.twoColumn.schedule #menu-schedule,
.twoColumn.guide #menu-guide,
.twoColumn.howto #menu-howto,
.twoColumn.download #menu-download
{
	display: none;
}
#navi #menu-home
{
	padding: 0 19px 0 10px;
	background: url(../../image/g2/navi/bg/bg-navi2_03.gif) no-repeat scroll right 13px;
	width: 161px;
	height: 92px;
}


#navi img.over {
	display: none;
}
#navi a:hover img,
#navi a:active img,
#navi a.MenuBarItemHover img,
#navi a.MenuBarItemSubmenuHover img,
#navi a.MenuBarSubmenuVisible img {
	display: none;
}
#navi a:hover img.over,
#navi a:active img.over,
#navi a.MenuBarItemHover img.over,
#navi a.MenuBarItemSubmenuHover img.over,
#navi a.MenuBarSubmenuVisible img.over,
#navi li.menu-site img,
#navi #menu-home img {
	display: block;
}


/*Mac Safariでaの下側に不要なpaddingが付く問題への対処*/
#navi a
{
	margin: 0;
	height: 79px;
	overflow: hidden;
}

#navi .menu-site a,
#navi #menu-home a
{
	height: 92px;
	overflow: hidden;
	padding: 0;
}

#navi #menu-home a
{
	background: url(../../image/g2/navi/bg/homepage.gif) no-repeat scroll 5px top;
}
#navi #menu-home a:hover
{
	background-image: url(../../image/g2/navi/bg/homepage-over.gif);
}

/*sidebar 関連*/
#sidebar
{
	clear: both;
	width: 166px;
	float: left;
	background: url(../../image/g2/sidebar/bg/bg-sidebar2-top.jpg) no-repeat scroll right 12px;
}
.oneColumn #sidebar
{
	float: none;
	display: none;
}
#sidebar-top
{
	padding: 0 22px 10px 26px;
	background: url(../../image/g2/navi/bg/bg-navi2_05.gif) no-repeat scroll 6px top;
	height: 42px;
	overflow: hidden;
}

#localnavi
{
	padding: 0 10px 0 4px;
	background: white url(../../image/g2/sidebar/bg/bg-sidebar-right.gif) repeat-y scroll right top;
}

#localnavi ul {
	margin: 0;
	padding: 0;
}

#localnavi li
{
	padding: 0 0 0 4px;
	margin: 0;
	color: #cc0033;
	border-bottom: solid 1px #ffffff;
	list-style: none;
	font-weight: bold;
	background-color: white;
	line-height: 18px;
	font-size: 12px;
}

/*SpryMenuBarVertical.cssの設定値を上書き*/
#localnavi ul.MenuBarVertical {
	font-size: 12px;
	width: 152px;
	border: none;
}
#localnavi ul.MenuBarVertical ul {
	border: solid 1px #ccc;
	width: auto;
	margin: -5% 0 0 95%;
}
#localnavi ul.MenuBarVertical li {
	width: 148px;
}
#localnavi ul.MenuBarVertical ul.MenuBarSubmenuVisible {
	left: 0;
}
#localnavi ul.MenuBarVertical ul li {
	width: 174px;
}
#localnavi ul.MenuBarVertical a {
	padding: 0;
	color: #2d9d7a;
	background-color: #fff;
}
#localnavi ul.MenuBarVertical a:hover, 
#localnavi ul.MenuBarVertical a:focus {
	color: #ff0066;
	background-color: #E2F7DF;
}
#localnavi ul.MenuBarVertical a.MenuBarItemHover, 
#localnavi ul.MenuBarVertical a.MenuBarItemSubmenuHover, 
#localnavi ul.MenuBarVertical a.MenuBarSubmenuVisible {
	color: #ff0066;
	background-color: #E2F7DF;
}
#localnavi ul.MenuBarVertical a.MenuBarItemSubmenu,
#localnavi ul.MenuBarVertical a.MenuBarItemSubmenuHover {
	background-position: 95% 50%;
}

/*sidebar-bottom関連*/
#sidebar-bottom
{
	background: #ffffcc url(../../image/g2/sidebar/bg/bg-sidebar2-bottom.jpg) no-repeat scroll right top;
	text-align: left;
	padding: 25px 0 10px 6px;
}
#sidebar-bottom ul
{
	margin: 0 2px;
	padding: 0;
}
#sidebar-bottom li
{
	list-style-type: none;
	clear: left;
	margin: 0 0 2px 2px;
}
#sidebar-bottom li.nakapanda {
	margin-left: 6px;
}

/*feedback関連*/
#feedback {
	margin: 0 2px;
}
#feedback ul {
	margin: 0;
	padding: 0;
}

#feedback li {
	float: left;
	clear: none;
	margin: 4px 0 0;
	list-style-type: none;
	background: url(../../image/g2/sidebar/bg/feedbackbutton-shadow.gif) no-repeat scroll left top;
}

#feedback li a {
	width: 70px;
	height: 80px;
	display: block;
	text-decoration: none;
	background: no-repeat scroll left top;
}
#feedback li a:active {
	background-position: 1px 1px;
}
#feedback li.inquire a {
	background-image: url(../../image/g2/sidebar/mailbutton.gif);
}
#feedback li.inquire a:hover,
#feedback li.inquire a:active {
	background-image: url(../../image/g2/sidebar/mailbutton-over.gif);
}
#feedback li.catalog a {
	background-image: url(../../image/g2/sidebar/catalogbutton.gif);
}
#feedback li.catalog a:hover,
#feedback li.catalog a:active{
	background-image: url(../../image/g2/sidebar/catalogbutton-over.gif);
}
#feedback .hidden {
	display: none;
}


/*mainContent 関連*/
.twoColumn #breadcrumbs,
.twoColumn #mainContent
{
	margin: 0 20px 0 170px;
}
.oneColumn #breadcrumbs,
.oneColumn #mainContent
{
	margin: 0 20px;
	clear: both;
} 

/*twoColumnAnonym関連*/
.twoColumnAnonym #headerMenu
{
	padding-left: 28px;
	background: url(../../image/g2/navi/bg/bg-navi2_04.gif) no-repeat scroll 10px 13px;
}
.twoColumnAnonym #sidebar
{
	background-position: right -28px;
}
.twoColumnAnonym #sidebar-top
{
	background: none;
	height: 6px;
	padding-bottom: 6px;
}
.twoColumnAnonym #sidebar-bottom
{
	padding-left: 5px;
}
.twoColumnAnonym #breadcrumbs,
.twoColumnAnonym #mainContent
{
	margin: 0 20px 0 169px;
}


/*generation1 style*/
.g1 #navi
{
	padding: 10px 0 0;
}
.oneColumn.g1 #headerMenu,
.twoColumnAnonym.g1 #headerMenu
{
	background-image: url(../../image/bg/bg-navi2-n.gif);
}
.g1 #navi li
{
	background: url(../../image/bg/bg-navi2a_02.gif) repeat-x scroll left 13px;
}
.g1 #navi li:hover
{
	background-image: url(../../image/bg/bg-navi2a_02.gif);
}
.twoColumn.g1 #navi .menu-site
{
	background: url(../../image/bg/bg-navi2a_01_g2.gif) no-repeat scroll 6px 13px;
}
.g1 #navi #menu-home
{
	padding: 0 19px 0 0px;
	background: url(../../image/bg/bg-navi2a_03.gif) no-repeat scroll left 13px;
}
.g1 #navi #menu-home img
{
	visibility: hidden;
}
.g1 #navi #menu-home a,
.g1 #navi #menu-home a:hover
{
	background: url(../../image//navi/navi-homepage_legacy.gif) no-repeat scroll left top;
}
.twoColumn.g1 #sidebar-top
{
	background: url(../../image/bg/bg-navi2a_05.gif) no-repeat scroll 6px -6px;
}
.g1.twoColumnAnonym #sidebar-top
{
	background:none;
}


.g1 #sidebar-bottom {
	padding-left: 10px;
}
.g1 #sidebar-bottom ul {
	margin: 0 4px;
}
.g1 #sidebar-bottom li {
	margin-left: 0;
}
.g1 #sidebar-bottom li.nakapanda {
	margin-left: 0;
}
.g1 #feedback {
	margin: 0;
}
.g1 #feedback li {
	float: left;
	clear: none;
	margin: 0 2px 2px;
	background-image: none;
}
.g1 #feedback li a {
	width: 58px;
	height: 71px;
	display: block;
	text-decoration: none;
	background: no-repeat scroll left top;
}
.g1 #feedback li a:active {
	background-position: left top;
}
.g1 #feedback li.inquire a,
.g1 #feedback li.inquire a:hover,
.g1 #feedback li.inquire a:active {
	background-image: url(../../image/g2/sidebar/btn_email.gif);
}
.g1 #feedback li.catalog a,
.g1 #feedback li.catalog a:hover,
.g1 #feedback li.catalog a:active {
	background-image: url(../../image/g2/sidebar/btn_manual.gif);
}

.g1 #navi a:hover img,
.g1 #navi a:active img {
	display: block;
}
.g1 #navi a:hover img.over,
.g1 #navi a:active img.over {
	display: none;
}
