@charset "UTF-8";

/*
*	Title: オレンジブック.Com - トップページ用CSS
*	URI: 
*	Last Modified: 2009-08-04
*	Description: トップページにのみ適用する要素を定義する
*	
*	透過pngを使用している箇所があるので注意!!
*	IE6対応で filter を使用しているが、絶対パスによる指定になるので、アップする際に必ずパスを確認すること!!
*/

/*========================================
	1. ヘッダー要素
========================================*/
#top #header {
	height: 303px;
	background: url(../images/bg_topHeader.png) repeat-x left top;
}

#top #header #headerDecoration {
	position: absolute;
	right: 0;
	top: 71px;
	width: 67px;
	height: 158px;
	background: url(../images/bg_headerDecoration.png) no-repeat left top;
	z-index: 9;
}

*html #top #header #headerDecoration {
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/trusco/common/images/bg_headerDecoration.png);
}


/*========================================
	2. メインビジュアル（Flash） 要素
========================================*/
#top #topMainVisual {
	position: relative;
	margin: -201px 0 20px;
	width: 100%;
	height: 325px;
	z-index: 10;
}

#top #topMainVisual .JSError {
	margin: 0 auto;
	width: 530px;
	padding-top: 86px;
	display: block;
	visibility: visible;
}

#top #topMainVisual .JSError {
	margin: 0 auto;
	width: 530px;
	padding-top: 114px;
	display: block;
}

#top #topMainVisualScreen {
	position: absolute;
	left: 0;
	top: 102px;
	width: 100%;
	height: 325px;
	outline: none;
	z-index: 11;
}

#top #topMainVisual .flashError {
	margin: 0 auto;
	width: 620px;
	padding-top: 114px;
	display: none;
}



/*--------------------------------------
	2-1. iPad用メインメニュー
---------------------------------------*/
#top #topMainVisualJS {
	position: relative;
	margin: -201px 0 20px;
	width: 100%;
	height: 335px;
	z-index: 10;
	overflow: hidden;
	display: none;
}

#top #topMainVisualJS div#topNavi ul {
	width: 978px;
	height: 43px;
	background: url(../../images/navi_bg.png) left top no-repeat;
	z-index: 10;
}

#top #topMainVisualJS div#topNavi ul:after {
	content:".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}

#top #topMainVisualJS div#topNavi ul li {
	float: left;
}

#top #topMainVisualJS div#topNavi ul li img.activeMenu {
	display: none;
}

#top #topMainVisualJS div.contentMenu {
	text-align: center;
	width: 966px;
	z-index: 0;
}

#top #topMainVisualJS div.contentMenu ul {
	margin: 10px auto 0;
	text-align:center;
	display: table;
}

#top #topMainVisualJS div.contentMenu ul:after {
	content:".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}

#top #topMainVisualJS div.contentMenu ul li {
	position: relative;
	float: left;
	width: 138px;
	height: 135px;
	text-align:center;
	opacity: 0;
	-webkit-transition: all 400ms ease-out 10ms;
}

#top #topMainVisualJS div.contentMenu ul li img {
	position: absolute;
	top: 0;
	-webkit-transition: all 250ms ease-out 10ms;
}

#top #topMainVisualJS div.contentMenu .singleColumn {
	margin-top: 65px;
}

#top #topMainVisualJS div.contentMenu .minimalMargin li {
	margin: 0 8px;
}

#top #topMainVisualJS div.contentMenu .shortMargin li {
	margin: 0 18px;
}

#top #topMainVisualJS div.contentMenu .middleMargin {
	margin-left: 66px;
}

#top #topMainVisualJS div.contentMenu .middleMargin li {
	margin: 0 36px;
}

#top #topMainVisualJS div.contentMenu .largeMargin li {
	margin: 0 54px;
}

.productsImage {
	position: absolute;
	left: 0;
	-webkit-transition: all 250ms ease-out 10ms;
}

.shadowImage {
	position: absolute;
	left: 0;
	-webkit-transition: all 250ms ease-out 10ms;
}

.listAnimation {
	animation: 'anime1' 1s ease-in-out;
}

@-moz-keyframes 'anime1' {
	0% {opacity: 0; top: 0;}
	100% {opacity: 1; top: 50px;}
}

/*========================================
	3. コンテンツ領域（メイン領域）
========================================*/
#top #main {
	float: left;
	width: 740px;
}


/*--------------------------------------
	3-1. 商品を探す 要素
---------------------------------------*/
#top #main #topKeywordSearch {
	position: relative;
	margin-bottom: 12px;
	width: 740px;
	height: 89px;
}

#top #main #topKeywordSearch h2 {
	position: absolute;
	left: 0;
	top: 0;
	width: 740px;
	height: 74px;
	z-index: 20;
}

#top #main #topKeywordSearch #topKeywordFlash {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 740px;
	height: 21px;
	z-index: 21;
}

#top #main #topKeywordSearch form {
}

#top #main #topKeywordSearch p {
	position: absolute;
	left: 233px;
	top: 21px;
	width: 403px;
	height: 30px;
	background: transparent url(../images/bg_topSearchKeywordField.gif) no-repeat left center;
	z-index: 21;
}

#top #main #topKeywordSearch .text {
	position: absolute;
	left: 0;
	top: 7px;
	border: 1px solid #ffffff;
	width: 400px;
	max-height: 24px;
	padding: 0;
	font-size: 100%;
	z-index: 22;
	opacity: 0.01;
	filter: alpha(opacity=1);
}

#top #main #topKeywordSearch .focus {
	opacity: 1.0;
	filter: alpha(opacity=100);
}

#top #main #topKeywordSearch .searchlBtn {
	position: absolute;
	left: 643px;
	top: 19px;
	z-index: 21;
}

#top #main #topKeywordSearch .detailBtn {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 21;
}


/*--------------------------------------
	3-2. 商品分類から探す 要素
---------------------------------------*/
#top #main #topCategorySearch {
	position: relative;
	margin-bottom: 20px;
	width: 734px;
	padding: 0 3px 3px;
	background: #cbcbcb url(../images/bg_topSearchCategoryBottom.gif) no-repeat left bottom;
}

#top #main #topCategorySearch h2 {
	margin: 0 -3px;
}

#top #main #topCategorySearch .btnMaker {
	position: absolute;
	right: 242px;
	top: 0;
}

#top #main #topCategorySearch .btnEco {
	position: absolute;
	right: 0;
	top: 0;
}

#top #main #topCategorySearch .frameTable {
	border-collapse: collapse;
	width: 734px;
}

#top #main #topCategorySearch .frameTable th {
	border: 0;
	width: 174px;
	padding: 0;
	background: url(../images/bg_topLargeCategory.gif) no-repeat right bottom;
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

#top #main #topCategorySearch .frameTable th a img {
	margin: 12px 0 0 0;
}

#top #main #topCategorySearch .frameTable td {
	border: 0;
	width: 560px;
	padding: 0;
	background: #ffffff url(../images/img_dotline.gif) repeat-x left bottom;
	text-align: left;
	vertical-align: top;
}

#top #main #topCategorySearch .frameTable .endLine td {
	border-bottom: 1px solid #cbcbcb;
	background-image: none;
}


#top #main #topCategorySearch .frameTable table {
	margin: 10px 0 8px 15px;
}

#top #main #topCategorySearch .frameTable table td {
	border: none !important;
	width: 172px;
	padding: 2px 0 2px 8px;
	background: url(../images/icon_arrowS.gif) no-repeat left 7px !important;
	line-height: 1.2;
}

#top #main #topCategorySearch .frameTable table td a {
	color: #333333;
}


/*--------------------------------------
	3-3. ニュースリリース 要素
---------------------------------------*/
#top #main #topNewsRelease {
	position: relative;
	width: 740px;
	padding: 0 0 28px;
	background: #cbcbcb url(../images/bg_topNewsReleaseBottom.gif) no-repeat left bottom;
	z-index: 20;
}

#top #main #topNewsRelease a {
	color: #333333;
}

/* ----- 表示切替用のタブ ----- */
#top #main #topNewsRelease .tabAll {
	position: absolute;
	left: 130px;
	top: 1px;
	z-index: 21;
}

#top #main #topNewsRelease .tabNews {
	position: absolute;
	left: 252px;
	top: 1px;
	z-index: 21;
}

#top #main #topNewsRelease .tabProduct {
	position: absolute;
	left: 374px;
	top: 1px;
	z-index: 21;
}

#top #main #topNewsRelease .tabCampaign {
	position: absolute;
	left: 496px;
	top: 1px;
	z-index: 21;
}

#top #main #topNewsRelease .tabPrice {
	position: absolute;
	left: 618px;
	top: 1px;
	z-index: 21;
}

/* ----- 過去のニュースリリース ボタン ----- */
#top #main #topNewsRelease .btnMore {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 21;
}

/* ----- ニュースリリース（共通） ----- */
#top #main #topNewsRelease .newsList {
	margin: 0 1px 0;
	padding: 13px 0 10px;
	background: #ffffff;
}

#top #main #topNewsRelease .newsList h3 {
	position: absolute;
	top: 1px;
	z-index: 22;
}

#top #main #topNewsRelease .newsList table {
	margin: 0 20px 0;
	width: 698px;
	background: url(../images/img_dotline.gif) repeat-x left bottom;
	line-height: 1.3;
}

#top #main #topNewsRelease .newsList table th {
	width: 80px;
	padding: 9px 0 6px 10px;
	background: url(../images/img_dotline.gif) repeat-x left top;
	font-weight: normal;
	vertical-align: top;
}

#top #main #topNewsRelease .newsList td {
	width: 598px;
	padding: 9px 0 6px 10px;
	background: url(../images/img_dotline.gif) repeat-x left top;
	vertical-align: top;
}

#top #main #topNewsRelease .newsList .nonNews {
	width: 698px;
	padding: 100px 0 101px;
	font-weight: bold;
	font-size: 114.3%;
	text-align: center;
}

/* ----- ニュースリリース（全て） ----- */
#top #main #topNewsRelease #topNewsListAll {
	Xdisplay: none;
}

#top #main #topNewsRelease #topNewsListAll h3 {
	left: 130px;
}

#top #main #topNewsRelease #topNewsListAll .icon {
	width: 142px;
	padding-top: 12px;
	padding-left: 0;
}

#top #main #topNewsRelease #topNewsListAll .title {
	width: 466px;
}

/* ----- ニュースリリース（News） ----- */
#top #main #topNewsRelease #topNewsListNews {
	display: none;
}

#top #main #topNewsRelease #topNewsListNews h3 {
	left: 252px;
}

#top #main #topNewsRelease #topNewsListNews .title a {
	margin-left: 17px;
}

#top #main #topNewsRelease #topNewsListNews .title a span{
	margin-left: -17px;
	display: inline-block;
	width: 17px;
	height: 10px;
	background: url(../images/img_topNewsIconNews.gif) no-repeat -134px top;
}

/* ----- ニュースリリース（モデルチェンジ・廃盤情報） ----- */
#top #main #topNewsRelease #topNewsListProduct {
	display: none;
}

#top #main #topNewsRelease #topNewsListProduct h3 {
	left: 374px;
}

#top #main #topNewsRelease #topNewsListProduct .title a {
	margin-left: 17px;
}

#top #main #topNewsRelease #topNewsListProduct .title a span{
	margin-left: -17px;
	display: inline-block;
	width: 17px;
	height: 10px;
	background: url(../images/img_topNewsIconProduct.gif) no-repeat -134px top;
}

/* ----- ニュースリリース（キャンペーン） ----- */
#top #main #topNewsRelease #topNewsListCampaign {
	display: none;
}

#top #main #topNewsRelease #topNewsListCampaign h3 {
	left: 496px;
}

#top #main #topNewsRelease #topNewsListCampaign .title a {
	margin-left: 17px;
}

#top #main #topNewsRelease #topNewsListCampaign .title a span{
	margin-left: -17px;
	display: inline-block;
	width: 17px;
	height: 10px;
	background: url(../images/img_topNewsIconCampaign.gif) no-repeat -134px top;
}

/* ----- ニュースリリース（価格変更） ----- */
#top #main #topNewsRelease #topNewsListPrice {
	display: none;
}

#top #main #topNewsRelease #topNewsListPrice h3 {
	left: 618px;
}

#top #main #topNewsRelease #topNewsListPrice .title a {
	margin-left: 17px;
}

#top #main #topNewsRelease #topNewsListPrice .title a span{
	margin-left: -17px;
	display: inline-block;
	width: 17px;
	height: 10px;
	background: url(../images/img_topNewsIconPrice.gif) no-repeat -134px top;
}


/*========================================
	4. コンテンツ領域（サイド領域）
========================================*/
#top #sidebar {
	float: right;
	width: 200px;
	padding-bottom: 20px;
}


/*--------------------------------------
	4-1. 新着情報 要素
---------------------------------------*/

#top #sidebar #topFlashBunner {
	margin: 0 0 10px;
}

#top #sidebar #topNews {
	margin: 0 0 10px;
	padding: 0;
	width: 200px;
	background: url(../../images/bg_topNews.png) left bottom no-repeat;
	display: none;
}

#top #sidebar h2.topNewsHead {
	padding: 2px 0 0 30px;
	line-height: 33px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	background: url(../../images/h_topNews.png) left top no-repeat;
}

#top #sidebar #topNews li {
	background: none;
}

#top #sidebar #topNews div.newsWrap {
	margin: 2px 2px 4px;
	padding: 0;
	width: 196px;
	height: 75px;
	background: #FFFFFF;
	overflow: hidden;
}

#top #sidebar #topNews ul.newsNavi li {
	float: left;
}

#top #sidebar #topNews ul.bannerList {
	padding: 0;
	background: none;
	height: 75px;
	display: block;
}

#top #sidebar #topNews ul.bannerList li {
	float: left;
}

#top #sidebar #topNews ul.newsNavi {
	margin: 2px 2px 0 4px;
	padding: 0 0 4px;
	height: 18px;
	display: block;
	background: none;
}

#top #sidebar #topNews ul.newsNavi:after {
	content:".";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
}

#top #sidebar #topNews ul.newsNavi li.leftBtn {
	width: 27px;
	cursor: pointer;
}

#top #sidebar #topNews ul.newsNavi li.newsNumber {
	margin: 0 4px;
	width: 131px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	background: url(../../images/bg_topNewsNumber.gif) left top no-repeat;
}

#top #sidebar #topNews ul.newsNavi li.rightBtn {
	width: 27px;
	cursor: pointer;
}


/*--------------------------------------
	4-2. 商品のご購買について 要素
---------------------------------------*/
#top #sidebar #topAboutBuy {
	position: relative;
	margin: 0 0 10px;
	width: 200px;
	z-index: 20;
}

#top #sidebar #topAboutBuy .btnHoujin{
	position: absolute;
	left: 9px;
	top: 23px;
	z-index: 20;
}

#top #sidebar #topAboutBuy .btnKojin{
	position: absolute;
	left: 9px;
	top: 56px;
	z-index: 20;
}


/*--------------------------------------
	4-3. バナー（自由設置） 要素
---------------------------------------*/
#top #sidebar #topFreeBunner {
	margin: 0 0 10px;
}

#top #sidebar #topFreeBunner a {
	display: block;
	margin: 5px 0;
	width: 200px;
	overflow: hidden;
}

#top #sidebar #topRakutenBunner {
	margin: -5px 0 10px;
}

#top #sidebar #topRakutenBunner a {
	display: block;
	margin: 0 0 5px;
	width: 200px;
	overflow: hidden;
}

/*--------------------------------------
	4-4. 人気商品アクセスランキング 要素
---------------------------------------*/
#top #sidebar #topAccessRanking {
	margin: 0 0 10px;
	padding: 0 1px 4px;
	background: #cbcbcb url(../images/bg_topAccessRankingBottom.jpg) no-repeat left bottom;
}

#top #sidebar #topAccessRanking h2 {
	margin: 0 -1px;
}

#top #sidebar .turn {
	padding: 8px 3px 7px;
	background: #ffffff;
	text-align: center;
	line-height: 1.2;
	font-size: 85.7%;
	word-break: break-all;
}

#top #sidebar .turn span {
	font-weight: bold;
}

#top #sidebar ul {
	padding: 0 8px;
	background: #ffffff;
}

#top #sidebar ul li {
	position: relative;
	background: url(../images/img_dotline.gif) repeat-x left top;
	font-size: 71.4%;
	z-index: 20;
}

#top #sidebar ul li p {
	float: right;
	width: 152px;
	padding: 11px 0 11px;
	line-height: 1.3;
}

#top #sidebar ul li a {
	text-decoration: underline;
	color: #333333;
}

#top #sidebar ul li .ranking {
	position: absolute;
	left: 4px;
	top: 9px;
	z-index: 21;
}

/* ----- 上位5位向けの調整 ----- */
#top #sidebar ul .rankingTop5 {
	min-height: 67px;
}
*html #top #sidebar ul .rankingTop5 {
	height: 67px;
}

#top #sidebar ul .rankingTop5 p {
	width: 91px;
}

#top #sidebar ul .rankingTop5 .ranking {
	left: 0;
	top: 17px;
}

#top #sidebar ul .rankingTop5 .productImg {
	position: absolute;
	left: 33px;
	top: 8px;
	z-index: 21;
}

/* ----- 子孫セレクタのfloatによる周りこみを回避 ----- */
#top #sidebar ul li:after {
	content: ".";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
}

#top #sidebar ul li {
	display: inline-block;
}

/* Hides from IE-mac \*/
*html #top #sidebar ul li {
	height: 1%;
}
#top #sidebar ul li {
	display: block;
}
/* End hide from IE-mac */


/*--------------------------------------
	4-5. バナー（固定設置） 要素
---------------------------------------*/
#top #sidebar #topFixedBunner {
	margin: 0 0 10px;
}

#top #sidebar #topFixedBunner a {
	display: block;
	margin: 5px 0;
	width: 200px;
	overflow: hidden;
}