@charset "UTF-8";
/*////////////////////////////////////////////////////////////
Tokyo Life - base.css
Update: 2013.5.22.
------------------------------------------------------------

[Reset]
	0. Yahoo UI Library: Reset CSS, Fonts CSS
	1. HTML, Body, Anchor
	2. Heading, Form
	99. Others
		99-1. Inline-level Elements
		99-2. Block-level Elements
		99-3. For IE - Page Zoom
[Main Layout]
	1. Container
	2. Header
	3. Content
	4. Footer
	10. Liquid Layout
[Header]
	1. Site Name
	2. Nav
[Footer]
	1. Site Info
	2. World Nav
[Common Page]
	1. Site Announcement(404,system maintenance)
	2. Noscript Message
[Clearfix]
[Other]

////////////////////////////////////////////////////////////*/

/* ################################################################################
	[Reset] Resetting HTML elements styles
   ################################################################################ */
/* ------------------------------------------------------------
	0. Yahoo UI Library: Reset CSS, Fonts CSS
   ------------------------------------------------------------ */
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}del,ins{text-decoration:none;}
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

/* ------------------------------------------------------------
	1. HTML, Body, Anchor
   ------------------------------------------------------------ */
html {
	width:100%;
	height: 100%;
	overflow-y: scroll;
}

body {
	width:100%;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	line-height: 1.2;
	text-align: center;
	background:url(../imgJP/common/bg-line.gif) #f2f2f2 top left repeat-x;
}
/* IE7 */
*:first-child+html body{
	font-family: 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
}
/* IE6 */
* html body{
	font-family: 'ＭＳ Ｐゴシック', sans-serif;
}

a:link,
a:visited { color: #000; text-decoration: none; }

a:hover,
a:active  { color: #000; text-decoration: underline; }

/* ------------------------------------------------------------
	2. Heading, Form
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 { line-height: 1; }

legend { display: none; }
label { cursor: pointer; }

/* ------------------------------------------------------------
	3. Others
   ------------------------------------------------------------ */

/*  3-1. Inline-level Elements
   ------------------------------------------------- */
img {
	vertical-align: top;
}
a { outline: none; }
object { outline: none; }
strong { font-weight: bold; }

input,
select,
textarea {
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	outline:none;
	ime-mode:active;
}
/* IE7 */
*:first-child+html input{font-family:'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;}
*:first-child+html select{font-family:'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;}
*:first-child+html textarea{font-family:'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;}
/* IE6 */
* html input{font-family:'ＭＳ Ｐゴシック', sans-serif;}
* html select{font-family:'ＭＳ Ｐゴシック', sans-serif;}
* html textarea{font-family:'ＭＳ Ｐゴシック', sans-serif;}
input.text {border-color:#aaa #ccc #ccc #aaa;border-width:1px;border-style:solid;padding:2px 0 2px 2px;}
select { border-color:#aaa #ccc #ccc #aaa;border-width:1px;border-style:solid;padding:2px;}
textarea { border-color:#aaa #ccc #ccc #aaa;border-width:1px;border-style:solid;}

/*  3-2. Block-level Elements
   ------------------------------------------------- */
hr { display: none; }

/*  3-3. Tool
   ------------------------------------------------- */
.clear {
	clear:both;
	font-size:0%;
	line-height:0%;
	visibility:none;
}
.hide {display:none;}
.black {color:#000;}
.blue {color:#003399;}
.red {color:#ff0000;}
.grey {color:#666;}
.big {font-size:18px; padding:0 5px;}
.strong {font-weight:bold;}
input.inact {ime-mode:inactive;}
.alert { background:#ffe5e5;}

/*  3-4. For IE
   ------------------------------------------------- */
/* For IE7 Page Zoom */
*:first-child+html body,
*:first-child+html br { letter-spacing: 0; }

/* ################################################################################
	[Main Layout] Setting main structure layout
   ################################################################################ */

/* ------------------------------------------------------------
	1. Wrapper
   ------------------------------------------------------------ */
div#wrapper {
	width: 960px;
	margin: 0 auto;
	background-color:#fff;
	text-align: left;
}
div#pop-wrapper {
	width: 550px;
	margin: 0 auto;
	text-align: left;
	position:relative;
	min-height:500px;
	padding-top:10px;
}

/* ------------------------------------------------------------
	2. Header
   ------------------------------------------------------------ */
div#header {
	position: relative;
	z-index: 10; /* front of div#globalNav,div#content */
	height: 80px;
	padding:10px 0;
	width:960px;
	background-color:#fff;
}
div#globalNav {
	width:958px;
	height:30px;
	overflow:hidden;
	margin:0 1px;
	background-color:#000;

}
div#topicPath {
	width:930px;
	padding:3px 15px 2px;
	font-size:10px;
	color:#666;
	border-top:1px solid #ccc;
}
div#topicPath a:link , div#topicPath a:active, div#topicPath a:visited {color:#666;text-decoration:none;}
div#topicPath a:hover {color:blue;text-decoration:underline;}

ul#topicPath {
	width:930px;
	overflow:hidden;
	padding:3px 15px 2px;
	font-size:10px;
	color:#666;
	border-top:1px solid #ccc;
}
ul#topicPath li { float:left; }
ul#topicPath li a:link , ul#topicPath li a:active, ul#topicPath li a:visited {color:#666;text-decoration:none;}
ul#topicPath li a:hover {color:blue;text-decoration:underline;}

/* ------------------------------------------------------------
	3. Content
   ------------------------------------------------------------ */
div#content {
	position:relative;
	min-height:500px;
	width: 100%;
}

div#feature {
	width: 958px;
	padding:10px 1px 15px;
	background-color:#fff;
}

	
div#main {
	width: 768px;
	float:left;
}
div#inner {
	float: left;
	width: 576px;
}
div#menu {
	width:192px;
	float:left;
}
div#sub {
	width: 192px;
	float:right;
}
*html div#sub {
	width: 190px;
}

div#subWide {
	width: 274px;
	float:right;
}

#main .facebook {
	width: 738px;
	height: 490px;
	margin:0 0 15px;
	padding:0 16px;
}

*html #main .facebook {
	padding:0 8px;
}

#sub .facebook {
	width: 186px;
	height: 230px;
	margin: 5px 0;
	padding: 0 3px;
	border: 0;
	clear: both;
}

#sub #twitbox {
	margin: 0 auto;
	width:185px;
	border-bottom:1px solid #CCC;
	padding: 15px 0;
	position:relative;
	
}

#sub .twitter {
	width: 170px;
	padding: 0 11px;
	
}

#feature .gaiyo {
	width: 900px;
	height: auto;
	margin: 15px 0 30px 25px;
	border: 0;
	clear: left;
}
.clearboth {
	clear: both;
}

#feature .gaiyo h2 {
	font-weight: bold;
	font-size: 1.2em;
	margin: 0 0 15px 0;
	padding: 0 0 10px 0;
	display: block;
	background: url(../company/img/bar.gif) left bottom no-repeat;
	height: 25px;
	width: 900px;
}
#feature .gaiyo h3 {
	font-weight: bold;
	font-size: 1.1em;
	margin: 20px 0 10px 0;
	padding: 0;
	border:0;
}

#feature .gaiyo table {
	margin: 15px 0;
	width: 900px;
	text-align: left;
}

#feature .gaiyo table th{
	font-weight: bolder;
	width: 70px;
	padding: 2px 5px;
	color: #000;
}
#feature .gaiyo table td{
	padding: 4px 3px;
	line-height: 1.5;
}

#feature .gaiyo .map {
	width: 425px;
	float: left;
	border: 0;
	margin: 0 20px 20px 0;
}
#feature .gaiyo ul {
	margin: 0;
	line-height: 1.5;
	border: 0;
}

/* ------------------------------------------------------------
	4. Footer
   ------------------------------------------------------------ */
div#footer {
	clear:both;
	position: relative;
	height:auto;
	width: 940px;
	background: #666;
	color:#fff;
	padding: 8px 10px;
}

/* ################################################################################
	[Header] Setting header styles
   ################################################################################ */
/* ------------------------------------------------------------
	1. Site Name
   ------------------------------------------------------------ */
div#header .siteName { /*sum266px*/
	width:265px;
	height:80px;
	overflow:hidden;
	padding-left:1px;
	margin:0;
}

/* ------------------------------------------------------------
	2. Utility Nav
   ------------------------------------------------------------ */
/*  3-2. About TOKYOlife,contact
   ------------------------------------------------- */

div#header .head-banner{
	position:absolute;
	top: 10px; left: 265px; width:480px; height:80px; float:left;
	overflow:hidden;}
   
div#header ul.utilityNav01 { /*sum228px*/
	position:absolute;
	top:3px;
	left:285px;
	width: 228px;
}
div#header ul.utilityNav01 li { float: left; height: 19px; margin-right:10px;}
* html div#header ul.utilityNav01 li { line-height:0; vertical-align:bottom; font-size:0;}

/*  3-2. Search
   ------------------------------------------------- */
div#header div.functions {
}
div#header div.functions table { height:20px; margin-bottom:3px;}
div#header div.functions td { height:20px; vertical-align:middle; }
div#header div.functions input.search {
	width:159px;/*btn34px*/
	height:18px;
	font-size:10px;
	color:#7f7f7f;
	background:url(../images/common/btn_search_bg.gif) top left no-repeat;
	border:0;
	padding-left: 5px;
	ime-mode:active;
}
* html div#header div.functions input.search {
	height:14px;
	padding: 2px 0 0 2px;
}

/*  3-2. Shopguide,Sitemap
   ------------------------------------------------- */
div#header ul.utilityNav02 {
	position:absolute;
	left:531px;
	top:29px;
	width:175px;
}
div#header ul.utilityNav02 li { height: 16px;}
* html div#header ul.utilityNav02 li { line-height:0; vertical-align:bottom; font-size:0;}
div#header ul.utilityNav02 li.unavi_guide { float:left;}
div#header ul.utilityNav02 li.unavi_map { float:right;}

/*  3-2. Cart,login
   ------------------------------------------------- */
div#header div.utilityNav03 {/*sum221px*/
	position:absolute;
	top:10px;
	left:758px;
	width:200px;
	height:90px;
	background-color:#fff;
	overflow:hidden;
}
div#header div.utilityNav03 ul li { float:left; color:#666; height:18px; overflow:hidden; padding:0 5px 0 0px;
	vertical-align:middle;
	font-size:10px;
	line-height: 22px;}
div#header div.utilityNav03 ul li a { color:#000; }

div#header div.utilityNav03 ul.guide li{ height:24px;}
div#header div.utilityNav03 ul.guide li a{ width:92px; height:24px; display:block; text-indent:-999px;}
div#header div.utilityNav03 ul.guide li.sg a{ background:url(../imgJP/common/btn_shopguide.gif) top left no-repeat; padding-right:5px;}
div#header div.utilityNav03 ul.guide li.sg a:hover{ background:url(../imgJP/common/btn_shopguide-on.gif) top left no-repeat;}
div#header div.utilityNav03 ul.guide li.qn a{ background:url(../imgJP/common/btn_quicknavi.gif) top left no-repeat;}
div#header div.utilityNav03 ul.guide li.qn a:hover{ background:url(../imgJP/common/btn_quicknavi-on.gif) top left no-repeat;}

div#header div.utilityNav03 ul li.log { float:right;}
div#header div.utilityNav03 ul li.cart { background:url(../imgJP/common/cart.gif) no-repeat left bottom; padding-left:20px;}

/* ################################################################################
	[Navigation] Setting Navigation styles
   ################################################################################ */
/* ------------------------------------------------------------
	1. Global Navi
   ------------------------------------------------------------ */
div#globalNav ul li { float:left; height:30px; padding-right:3px;}
div#globalNav ul li a {display:block; height:30px; text-indent:-9999px;}

div#globalNav ul li.top a span{width:58px; background:url(../imgJP/common/gnavi_top.gif) no-repeat 0 0;}
div#globalNav ul li.mens a span{width:94px; background:url(../imgJP/common/gnavi_keaton.gif) no-repeat 0 0;}
div#globalNav ul li.bike a span{width:110px; background:url(../imgJP/common/gnavi_tw.gif) no-repeat 0 0;}
div#globalNav ul li.motorist a span{width:111px; background:url(../imgJP/common/gnavi_tm.gif) no-repeat 0 0;}
div#globalNav ul li.humidit a span{width:94px; background:url(../imgJP/common/gnavi_humidit.gif) no-repeat 0 0;}
div#globalNav ul li.crea a span{width:119px; background:url(../imgJP/common/gnavi_creaws.gif) no-repeat 0 0;}
div#globalNav ul li.ladies a span{width:78px; background:url(../imgJP/common/gnavi_couleur.gif) no-repeat 0 0;}
/*
div#globalNav ul li.zakka a span{width:61px; background:url(../imgJP/common/gnavi_arika.gif) no-repeat 0 0;}
*/
div#globalNav ul li.blog a span{ width:71px; background:url(../imgJP/common/gnavi_blogs.gif) no-repeat 0 0;}


div#globalNav ul li a .ja {
	background-position: 0 100% !important;
}

#globalNav ul li a span{
	display: block;
	position: relative;
	top: 0;
	padding: 0 ; 
	text-align: center;
	height: 30px;
	overflow:hidden;

	transition: 0.2s cubic-bezier(0, 0, 0.3, 1.0);
	-webkit-transition: 0.2s cubic-bezier(0, 0, 0.3, 1.0);
	-moz-transition: 0.2s cubic-bezier(0, 0, 0.3, 1.0);
	position:relative;            /* PIEを */
    behavior: url( /ecjs/PIE.htc ) ;  /* CSS3 PIE */
}
#globalNav ul li a:hover span{
	top: -30px;
}

*:first-child+html  div#globalNav ul li.top a {width:58px; background:url(../imgJP/common/gnavi_top.gif) no-repeat 0 0;}
*:first-child+html  div#globalNav ul li.mens a {width:94px; background:url(../imgJP/common/gnavi_keaton.gif) no-repeat 0 0;}
*:first-child+html  div#globalNav ul li.bike a {width:110px; background:url(../imgJP/common/gnavi_tw.gif) no-repeat 0 0;}
*:first-child+html  div#globalNav ul li.motorist a {width:111px; background:url(../imgJP/common/gnavi_tm.gif) no-repeat 0 0;}
*:first-child+html  div#globalNav ul li.humidit a {width:94px; background:url(../imgJP/common/gnavi_humidit.gif) no-repeat 0 0;}
*:first-child+html  div#globalNav ul li.crea a {width:119px; background:url(../imgJP/common/gnavi_creaws.gif) no-repeat 0 0;}
*:first-child+html  div#globalNav ul li.ladies a {width:78px; background:url(../imgJP/common/gnavi_couleur.gif) no-repeat 0 0;}
*:first-child+html  div#globalNav ul li.zakka a {width:61px; background:url(../imgJP/common/gnavi_arika.gif) no-repeat 0 0;}
*:first-child+html  div#globalNav ul li.blog a { width:71px; background:url(../imgJP/common/gnavi_blogs.gif) no-repeat 0 0;}

*:first-child+html  div#globalNav ul li.top a:hover {width:58px; background:url(../imgJP/common/gnavi_top.gif) no-repeat 0 -30px;}
*:first-child+html  div#globalNav ul li.mens a:hover {width:94px; background:url(../imgJP/common/gnavi_keaton.gif) no-repeat 0 -30px;}
*:first-child+html  div#globalNav ul li.bike a:hover {width:110px; background:url(../imgJP/common/gnavi_tw.gif) no-repeat 0 -30px;}
*:first-child+html  div#globalNav ul li.motorist a:hover {width:111px; background:url(../imgJP/common/gnavi_tm.gif) no-repeat 0 -30px;}
*:first-child+html  div#globalNav ul li.humidit a:hover {width:94px; background:url(../imgJP/common/gnavi_humidit.gif) no-repeat 0 -30px;}
*:first-child+html  div#globalNav ul li.crea a:hover {width:119px; background:url(../imgJP/common/gnavi_creaws.gif) no-repeat 0 -30px;}
*:first-child+html  div#globalNav ul li.ladies a:hover {width:78px; background:url(../imgJP/common/gnavi_couleur.gif) no-repeat 0 -30px;}
*:first-child+html  div#globalNav ul li.zakka a:hover {width:61px; background:url(../imgJP/common/gnavi_arika.gif) no-repeat 0 -30px;}
*:first-child+html  div#globalNav ul li.blog a:hover { width:70px; background:url(../imgJP/common/gnavi_blogs.gif) no-repeat 0 -30px;}

div#globalNav ul li.top_act a {width:58px; background:url(../imgJP/common/gnavi_top.gif) no-repeat 0 -30px;}
div#globalNav ul li.mens_act a {width:94px; background:url(../imgJP/common/gnavi_keaton.gif) no-repeat 0 -30px;}
div#globalNav ul li.bike_act a {width:110px; background:url(../imgJP/common/gnavi_tw.gif) no-repeat 0 -30px;}
div#globalNav ul li.motorist_act a {width:111px; background:url(../imgJP/common/gnavi_tm.gif) no-repeat 0 -30px;}
div#globalNav ul li.crea_act a {width:119px; background:url(../imgJP/common/gnavi_creaws.gif) no-repeat 0 -30px;}
div#globalNav ul li.humidit_act a {width:94px; background:url(../imgJP/common/gnavi_humidit.gif) no-repeat 0 -30px;}
div#globalNav ul li.ladies_act a {width:78px; background:url(../imgJP/common/gnavi_couleur.gif) no-repeat 0 -30px;}
/*
div#globalNav ul li.surfin_act a {width:90px; background:url(../imgJP/common/gnavi_zensurf.gif) no-repeat 0 -30px;}
div#globalNav ul li.zakka_act a {width:61px; background:url(../imgJP/common/gnavi_arika.gif) no-repeat 0 -30px;}
*/
div#globalNav ul li.blog_act a {width:70px; background:url(../imgJP/common/gnavi_blogs.gif) no-repeat 0 -30px;}


/* ------------------------------------------------------------
	outlet
   ------------------------------------------------------------ */
 div#globalNav ul li.outlet,div#globalNav ul li.outlet_act{ float:right; padding-right:0;}   
 div#globalNav ul li.outlet a span{ width:140px; background:url(../imgJP/common/gnavi_outlet.gif) no-repeat 0 0;}
 div#globalNav ul li.outlet a:hover span{ width:140px; background:url(../imgJP/common/gnavi_outlet.gif) no-repeat 0 -30px;}
div#globalNav ul li.outlet_act a {width:140px; background:url(../imgJP/common/gnavi_outlet.gif) no-repeat 0 -30px;}


/* ------------------------------------------------------------
	2. Local Navi
   ------------------------------------------------------------ */
div#localNav {
	width:958px;
	margin:0 1px 2px;
	height:30px;
	overflow:hidden;
	font-size: 11px;
	background: url(../imgJP/common/bg_lnavi.gif) top left repeat-x;
}
div#localNav ul.right{
	width:160px;
	text-align:right;
	float: right;
}
					 
div#localNav li {
	float:left;
	height:30px;
	vertical-align:middle;
}
div#localNav li a {
	display:block;
	height:30px;
	padding-top:10px;
	font-weight:bold;
	padding-left: 20px;
	vertical-align:middle;
}

/*#localNav li.logo*/
body#keaton div#localNav ul li.logo a { display:block;width:122px; background:url(../imgJP/common/lnavi_logo_keaton.jpg) no-repeat 0 0; text-indent:-9999px;}
body#wheels div#localNav ul li.logo a {width:126px; background:url(../images/channel/lnavi_logo_bike.gif) no-repeat 0 0; text-indent:-9999px;}

body#motorist div#localNav ul li.logo a {width:126px; background:url(../images/channel/lnavi_logo_motorist.gif) no-repeat 0 0; text-indent:-9999px;}

body#humidit div#localNav ul li.logo a {width:126px; background:url(../images/channel/lnavi_logo_humidit.gif) no-repeat 0 0;  text-indent:-9999px;}

body#couleur div#localNav ul li.logo a {width:126px; background:url(../images/channel/lnavi_logo_ladies.gif) no-repeat 0 0;  text-indent:-9999px;}
body#crea div#localNav ul li.logo a {width:126px; background:url(../images/channel/lnavi_logo_crea.png) no-repeat 0 0; text-indent:-9999px;}

body#keaton div#localNav li a {color:#036;}
body#wheels div#localNav li a {color:#360;}
body#motorist div#localNav li a {color:#000;}
body#humidit div#localNav li a {color:#666;}
body#couleur div#localNav li a {color:#903;}
/*
body#liquid div#localNav li a {color:#ff8a00;}
body#arika div#localNav li a {color:#9f8155;}
*/
body#wheels div#localNav li.tw_shop a { margin-left:15px; background:url(../imgCMS/channel/tw_shop_icon.gif) 0 8px no-repeat; padding-left:19px;}



/* ------ CREA ----- */
body#crea div#localNav {
	width:958px;
	margin:0 1px 2px;
	height:60px;
	overflow:hidden;
	font-size: 11px;
	background: url(../imgJP/common/bg_lnavi_crea.png) top left repeat-x;
}
body#crea div#localNav ul.right{
	width:auto;
	padding-top:15px;
	padding-right:15px;
	float: right;
}
					 
body#crea div#localNav li {
	float:left;
	height:60px;
	vertical-align:middle;
}
body#crea div#localNav li a {
	display:block;
	height:60px;
	padding-top:10px;
	font-weight:bold;
	padding-left: 20px;
	vertical-align:middle;
}

body#crea div#localNav li a {color:#000;}

/* ------------------------------------------------------------
	3. Special Obi
   ------------------------------------------------------------ */
div#specialobi{width:958px; height:30px; margin:0 1px;}
   

/* ################################################################################
	[Content] Setting Content styles
   ################################################################################ */
/* ------------------------------------------------------------
	1. PageNavi
   ------------------------------------------------------------ */
div#content .pagedNav {
	width:auto;
	text-align:center;
	padding: 0 15px 40px;
}
div#content .pagedNav table.navBox {
	width:auto;
	text-align:center;
	margin:0 auto;
	vertical-align: top;
	font-size:11px;
}
div#content .pagedNav table.navBox td.prev {width:45px;}
div#content .pagedNav table.navBox td.pageNum {width:auto;padding:0 10px;}
div#content .pagedNav table.navBox td.next {width:45px;}
div#content .pagedNav table.navBox td.prev a,
div#content .pagedNav table.navBox td.next a {display:block;width:45px;height:17px;text-indent:-9999px;}
div#content .pagedNav table.navBox td.prev a:link,
div#content .pagedNav table.navBox td.prev a:visited {
	background:url(../images/common/btn_prev.gif) no-repeat 0 0;
}
div#content .pagedNav table.navBox td.prev a:hover,
div#content .pagedNav table.navBox td.prev a:active {
	background:url(../images/common/btn_prev.gif) no-repeat 0 -17px;
}
div#content .pagedNav table.navBox td.next a:link,
div#content .pagedNav table.navBox td.next a:visited {
	background:url(../images/common/btn_next.gif) no-repeat 0 0;
}
div#content .pagedNav table.navBox td.next a:hover,
div#content .pagedNav table.navBox td.next a:active {
	background:url(../images/common/btn_next.gif) no-repeat 0 -17px;
}
div#content .pagedNav table.navBox td.pageNum ol li {float:left;margin:0 3px;}
* html div#content .pagedNav table.navBox td.pageNum ol li {width:10px;}
div#content .pagedNav table.navBox td.pageNum ol li a {
	height:15px;
	line-height:15px;
	display:block;
	vertical-align:middle;
	text-align:center;
	padding:0 4px;
}
div#content .pagedNav table.navBox td.pageNum ol li a:link,
div#content .pagedNav table.navBox td.pageNum ol li a:visited {
	border:1px solid #DFDFDF;
	color:#999999;
	text-decoration:none;
}
div#content .pagedNav table.navBox td.pageNum ol li a:hover,
div#content .pagedNav table.navBox td.pageNum ol li a:active {
	border:1px solid #000000;
	color:#ffffff;
	background:#000000;
	text-decoration:none;
}
div#content .pagedNav table.navBox td.pageNum ol li span {
	height:17px;
	line-height:17px;
	display:block;
	vertical-align:middle;
	text-align:center;
	padding:0 4px;
}


/* ################################################################################
	[Side] Setting Sub, Menu Module styles
   ################################################################################ */
/* ------------------------------------------------------------
	3. Banner
   ------------------------------------------------------------ */
div#sub div.bnr {
	width:180px;
	padding: 10px 6px 0;
}
/* ------------------------------------------------------------
	4. Side InfoList
   ------------------------------------------------------------ */
/*  4-1. Base Elements
   ------------------------------------------------- */
div#menu dl.infoList,
div#sub dl.infoList {width:192px;border-bottom:1px solid #ccc;}
div#sub .infoList {width:192px;border-bottom:1px solid #ccc;}
div#sub .infoList h2 {width:172px;padding:10px 10px 10px;}
div#menu dl.infoList dt,
div#sub dl.infoList dt {width:172px;padding:10px 10px 10px;}
div#sub dl.infoList dt.channelFirst img{ margin-top: -10px;}
div#menu dl.bbnone,
div#sub dl.bbnone {border-bottom:none;}
div#menu dl.infoList dd p.more,
div#sub dl.infoList dd p.more {
	font-size:11px;
	text-align:right;
	padding:0 0 8px 5px;
	background:url(../images/common/marker_triangle.gif) no-repeat 0 3px;
	float:right;
}
*:first-child+html div#menu dl.infoList dd p.more,
*:first-child+html div#sub dl.infoList dd p.more {
	background:url(../images/common/marker_triangle.gif) no-repeat 0 3px;
}
* html div#menu dl.infoList dd p.more,
* html div#sub dl.infoList dd p.more {
	background:url(../images/common/marker_triangle.gif) no-repeat 0 3px;
}
div#sub .infoList .decorative p.more {
	font-size:11px;
	text-align:right;
	padding:0 0 8px 5px;
	background:url(../images/common/marker_triangle.gif) no-repeat 0 3px;
	float:right;
}
*:first-child+html div#sub .infoList .decorative p.more {
	background:url(../images/common/marker_triangle.gif) no-repeat 0 3px;
}
* html div#sub .infoList .decorative p.more {
	background:url(../images/common/marker_triangle.gif) no-repeat 0 3px;
}

/*  4-2. Plane(News,Item...)
   ------------------------------------------------- */
div#menu dl.infoList dd.plane,
div#sub dl.infoList dd.plane {
	width:172px;
	padding:0 10px 10px;
}
div#menu dl.infoList dd.plane ul,
div#sub dl.infoList dd.plane ul {padding-bottom:10px;}
div#menu dl.infoList dd.plane li,
div#sub dl.infoList dd.plane li {
	font-size:12px;
	background:url(../images/common/marker_point.gif) no-repeat 5px 8px;
	padding:3px 10px 2px 15px;
}
div#menu dl.infoList dd.plane ul.smallTxt li,
div#sub dl.infoList dd.plane ul.smallTxt li {
	font-size:10px;
	background:url(../images/common/marker_point.gif) no-repeat 5px 7px;
	padding:2px 10px 1px 15px;
}
* html div#menu dl.infoList dd.plane ul.smallTxt li,
* html div#sub dl.infoList dd.plane ul.smallTxt li {
	background:url(../images/common/marker_point.gif) no-repeat 5px 8px;
}

/*  4-2. Decorative(News,Item...)
   ------------------------------------------------- */
div#menu dl.infoList dd.decorative,
div#sub dl.infoList dd.decorative {width:172px;padding:0 10px 10px;}
div#menu dl.infoList dd.decorative div.infoUnit,
div#sub dl.infoList dd.decorative div.infoUnit {clear:both;}
div#menu dl.infoList dd.decorative .photo,
div#sub dl.infoList dd.decorative .photo {
	width:60px;
	float:left;
	margin-right:10px;
	padding-bottom:10px;
	text-align: center;
}
div#menu dl.infoList dd.decorative .photo img,
div#sub dl.infoList dd.decorative .photo img {border:1px solid #ccc;}
div#menu dl.infoList dd.decorative .photo a:hover img,
div#sub dl.infoList dd.decorative .photo a:hover img,
div#menu dl.infoList dd.decorative .photo a:active img,
div#sub dl.infoList dd.decorative .photo a:active img {border:1px solid #cfc300;}
div#menu dl.infoList dd.decorative .photo p.rank,
div#sub dl.infoList dd.decorative .photo p.rank {font-size:12px;padding-top: 3px;}
div#menu dl.infoList dd.decorative ul.text,
div#sub dl.infoList dd.decorative ul.text {width:102px;float:left;padding-bottom:15px;}
div#menu dl.infoList dd.decorative li.copy,
div#sub dl.infoList dd.decorative li.copy { font-size:12px;padding-bottom:3px; }
div#menu dl.infoList dd.decorative li.digest,
div#sub dl.infoList dd.decorative li.digest { font-size:10px;padding-bottom:2px;}
div#menu dl.infoList dd.decorative li.date,
div#sub dl.infoList dd.decorative li.date {font-size:10px;}
div#menu dl.infoList dd.decorative li.date span.new,
div#sub dl.infoList dd.decorative li.date span.new {
	font-size:0;
	line-height:0;
	vertical-align:bottom;
	padding:0 0 0 4px;
}
div#menu dl.infoList dd.decorative li.date span.new img,
div#sub dl.infoList dd.decorative li.date span.new img {padding-top:1px;}
*:first-child+html div#menu dl.infoList dd.decorative li.date span.new img,
*:first-child+html div#sub dl.infoList dd.decorative li.date span.new img {padding-top:4px;}
* html div#menu dl.infoList dd.decorative li.date span.new img,
* html div#sub dl.infoList dd.decorative li.date span.new img {padding-top:3px;}
div#menu dl.infoList dd.decorative li.attribute,
div#sub dl.infoList dd.decorative li.attribute {
	font-size:10px;
	text-align:right;
	padding:2px 0 0 8px;
	background:url(../images/common/marker_triangle.gif) no-repeat 0 6px;
	float:right;
}
*:first-child+html div#menu dl.infoList dd.decorative li.attribute,
*:first-child+html div#sub dl.infoList dd.decorative li.attribute {
	background:url(../images/common/marker_triangle.gif) no-repeat 0 5px;
}
* html div#menu dl.infoList dd.decorative li.attribute,
* html div#sub dl.infoList dd.decorative li.attribute {
	background:url(../images/common/marker_triangle.gif) no-repeat 0 5px;
}
div#menu dl.infoList dd.decorative li.author,
div#sub dl.infoList dd.decorative li.author { font-size:10px;padding-top:2px;}
div#menu dl.infoList dd.decorative li.brand,
div#sub dl.infoList dd.decorative li.brand { font-size:10px;padding-bottom:3px; }
div#menu dl.infoList dd.decorative li.itemname,
div#sub dl.infoList dd.decorative li.itemname { font-size:10px;padding-bottom:3px;}
div#menu dl.infoList dd.decorative li.price,
div#sub dl.infoList dd.decorative li.price { font-size:10px;}
div#menu dl.infoList dd.decorative li.price span.line,
div#sub dl.infoList dd.decorative li.price span.line { text-decoration:line-through;}
div#menu dl.infoList dd.decorative li.sale,
div#sub dl.infoList dd.decorative li.sale { color:#ff0000; font-size:10px;}


div#sub .infoList .decorative {width:172px;padding:0 10px 10px;}
div#sub .infoList .decorative .infoUnit {clear:both;}
div#sub .infoList .decorative .photo {
	width:60px;
	float:left;
	margin-right:10px;
	padding-bottom:10px;
	text-align: center;
}
div#sub .infoList .decorative .photo img {border:1px solid #ccc;}
div#sub .infoList .decorative .photo a:hover img,
div#sub .infoList .decorative .photo a:active img {border:1px solid #cfc300;}
div#sub .infoList .decorative .photo p.rank {font-size:12px;padding-top: 3px;}
div#sub .infoList .decorative ul.text {width:102px;float:left;padding-bottom:15px;}
div#sub .infoList .decorative li.copy { font-size:12px;padding-bottom:3px; }
div#sub .infoList .decorative li.digest { font-size:10px;padding-bottom:2px;}
div#sub .infoList .decorative li.date {font-size:10px;}
div#sub .infoList .decorative li.date span.new {
	font-size:0;
	line-height:0;
	vertical-align:bottom;
	padding:0 0 0 4px;
}
div#sub .infoList .decorative li.date span.new img {padding-top:1px;}
*:first-child+html div#sub .infoList .decorative li.date span.new img {padding-top:4px;}
* html div#sub .infoList .decorative li.date span.new img {padding-top:3px;}
div#sub .infoList .decorative li.attribute {
	font-size:10px;
	text-align:right;
	padding:2px 0 0 8px;
	background:url(../images/common/marker_triangle.gif) no-repeat 0 6px;
	float:right;
}
*:first-child+html div#sub .infoList .decorative li.attribute {
	background:url(../images/common/marker_triangle.gif) no-repeat 0 5px;
}
* html div#sub .infoList .decorative li.attribute {
	background:url(../images/common/marker_triangle.gif) no-repeat 0 5px;
}
div#sub .infoList .decorative li.author { font-size:10px;padding-top:2px;}
div#sub .infoList .decorative li.brand { font-size:10px;padding-bottom:3px; }
div#sub .infoList .decorative li.itemname { font-size:10px;padding-bottom:3px;}
div#sub .infoList .decorative li.price { font-size:10px;}
div#sub .infoList .decorative li.price span.line { text-decoration:line-through;}
div#sub .infoList .decorative li.sale { color:#ff0000; font-size:10px;}
div#sub .infoList .plane {
	width:172px;
	padding:0 10px 10px;
}
div#sub .infoList .plane ul {padding-bottom:10px;}
div#sub .infoList .plane li {
	font-size:12px;
	background:url(../images/common/marker_point.gif) no-repeat 5px 8px;
	padding:3px 10px 2px 15px;
}
div#sub .infoList .plane ul.smallTxt li {
	font-size:10px;
	background:url(../images/common/marker_point.gif) no-repeat 5px 7px;
	padding:2px 10px 1px 15px;
}
* html div#sub .infoList .plane ul.smallTxt li {
	background:url(../images/common/marker_point.gif) no-repeat 5px 8px;
}

/* ------------------------------------------------------------
	1. MenuLogo
   ------------------------------------------------------------ */
div#menu ul.menuLogo {
	width:152px;
	padding:20px;
	text-align:center;
	font-size:85%; /*11px*/
	border-bottom:1px solid #ccc;

}
div#menu ul.menuLogo li.logoImg {
	width:152px;
	margin-bottom:8px;
}
div#menu ul.menuLogo li.logoImg table {
	border:1px solid #ccc;
	margin:0 auto;
}
div#menu ul.menuLogo li.logoImg table td {
	text-align:center;
	vertical-align:middle;
}

/* ------------------------------------------------------------
	1. menuNav
   ------------------------------------------------------------ */
div#menu dl.menuNav {
	width:191px;
	padding:15px 0 15px 1px;
	border-bottom:1px solid #ccc;
}
div#menu dl.menuNav dt {width:176px;padding:0 0 5px 15px;}
* html div#menu dl.menuNav dt {line-height:0; font-size:0; vertical-align:bottom;}
div#menu dl.menuNav dd {
	width:191px;
	font-size:12px;
}
div#menu dl.menuNav dd a {
	width:140px;
	display:block;
	padding:3px 20px 2px 31px;
	background:url(../images/common/marker_arrow01.gif) no-repeat 18px 7px;
	position:relative;
}
div#menu dl.menuNav dd a:hover {
	text-decoration:none;
	background:#fff100 url(/images/common/marker_arrow02.gif) no-repeat 18px 7px;
}
div#menu dl.menuNav dd.act a {
	text-decoration:none;
	background:#fff100 url(/images/common/marker_arrow02.gif) no-repeat 18px 7px;
}
div#menu dl.menuNav dd.ct a{
	background: url(/images/common/marker_arrow01.gif) no-repeat 35px 7px;
}
div#menu dl.menuNav dd.cct a:hover {
	text-decoration:none;
	background:#fff100 url(/images/common/marker_arrow02.gif) no-repeat 35px 7px;
}
div#menu dl.menuNav dd.cct a{
	background:#fff100 url(/images/common/marker_arrow01.gif) no-repeat 35px 7px;
}


div#menu dl.menuNav dd.act a .check {
	display:block;
	width:14px;
	height:14px;
	position:absolute;
	left:173px;
	top:3px;
	background:#fff100 url(/images/common/flag_check.gif) no-repeat 0 0;
	z-index:1;
}
div#menu dl.menuNav dd.cct a .check {
	display:block;
	width:14px;
	height:14px;
	position:absolute;
	left:173px;
	top:3px;
	background:#fff100 url(/images/common/flag_check.gif) no-repeat 0 0;
	z-index:1;
}
* html div#menu dl.menuNav dd.act a .check {
	line-height:0;
	font-size:0;
}

/* ------------------------------------------------------------
	1. menuBanner
   ------------------------------------------------------------ */
div#menu ul.menuBnr,
div#sub ul.menuBnr {
	width:191px;
	padding:10px 0 20px 1px;
}
div#menu ul.menuBnr li,
div#sub ul.menuBnr li {width:191px;text-align:center;padding-top:10px;}
* html div#menu ul.menuBnr li,
* html div#sub ul.menuBnr li {line-height:0; vertical-align:bottom; font-size:0;}

/* ################################################################################
	[SideWide] Setting SubWide Module styles
   ################################################################################ */
/* ------------------------------------------------------------
	1. menuNav
   ------------------------------------------------------------ */
div#subWide dl.menuNav {
	width:273px;
	padding:15px 1px 15px 0;
	border-bottom:1px solid #ccc;
}
div#subWide dl.menuNav dt {width:258px;padding:0 0 5px 15px;}
* html div#subWide dl.menuNav dt {line-height:0; font-size:0; vertical-align:bottom;}
div#subWide dl.menuNav dd {width:auto;font-size:12px;}
div#subWide dl.menuNav dd a {
	width:223px;
	display:block;
	padding:3px 20px 2px 30px;
	background:url(../images/common/marker_arrow01.gif) no-repeat 18px 7px;
	position:relative;
}
div#subWide dl.menuNav dd a:hover {
	text-decoration:none;
	background:#fff100 url(/images/common/marker_arrow02.gif) no-repeat 18px 7px;
}

/* ------------------------------------------------------------
	3. Banner
   ------------------------------------------------------------ */
div#subWide div.bnr {
	width:273px;
	padding:0 1px 9px 0;
	border-bottom:1px solid #ccc;
}
div#subWide div.bnr p.large {
	width:255px;
	padding:9px 9px 0;
}
div#subWide div.bnr ul.small {
	width:255px;
	padding:0 9px 0;
}
div#subWide div.bnr ul.small li {
	width:120px;
	height:120px;
	overflow:hidden;
	padding:15px 0 0;
}
div#subWide div.bnr ul.small li.left {float:left;}
div#subWide div.bnr ul.small li.right {float:right;}

/* ------------------------------------------------------------
	4. search
   ------------------------------------------------------------ */
div#subWide .search {
	width:273px;
	padding-right:1px;
	border-bottom: 1px solid #ccc;
}
div#subWide .search table {width:243px;margin:5px auto 20px;}
div#subWide .search td {vertical-align:middle; }
div#subWide .search input.search {
	width:184px;
	height:16px;
	font-size:10px;
	color:#7f7f7f;
	border:1px solid #ccc;
	padding-left: 2px;
	ime-mode:active;
}
* html div#subWide .search input.search {
	height:14px;
	padding: 2px 0 0 2px;
}

/* ------------------------------------------------------------
	2. Mailmagazine
   ------------------------------------------------------------ */
div#subWide div.mailmag {width:273px;padding:20px 1px 20px 0;border-bottom:1px solid #ccc;}
div#subWide div.mailmag p.btn {width:273px;height:20px;}
div#subWide div.mailmag p.btn a {
	width:273px;
	height:20px;
	display:block;
	background:url(/imgCMS/blog/btn_subwide_mailmag.gif) no-repeat 0 0;
	text-indent:-9999px;
}
div#subWide div.mailmag p.btn a:hover {	background:url(/imgCMS/blog/btn_subwide_mailmag.gif) no-repeat 0 -20px;}
div#subWide div.mailmag p.text {
	padding:5px 5px 0;
	font-size:77%;/*10px*/
}

/* ------------------------------------------------------------
	4. Side InfoList
   ------------------------------------------------------------ */
/*  4-1. Base Elements
   ------------------------------------------------- */
div#subWide .infoList {
	width:274px;
	border-bottom:1px solid #ccc;
}
div#subWide .bbnone {border-bottom:none;}
div#subWide dl.infoList dt {width:233px;padding:20px 20px 10px;}
div#subWide dl.infoList dd p.more {
	font-size:11px;
	text-align:right;
	padding:0 0 8px 8px;
	background:url(../images/common/marker_triangle.gif) no-repeat 0 5px;
	float:right;
}
*:first-child+html div#subWide dl.infoList dd p.more {
	background:url(../images/common/marker_triangle.gif) no-repeat 0 3px;
}
* html div#subWide dl.infoList dd p.more {
	background:url(../images/common/marker_triangle.gif) no-repeat 0 3px;
}

/*	5. Functions
   ------------------------------------------------- */
div#subWide .functions {width:274px;}
div#subWide .functions ul.tabNav {width:273px;padding-right:1px;}
div#subWide .functions ul.tabNav li {width:91px; height:25px; float:left;text-indent:-9999px;}
div#subWide .functions ul.tabNav li a {display:block;width:91px; height:25px;}
div#subWide .functions ul.tabNav li.head1 a {background:url(/imgCMS/blog/tab_lastposts.gif) no-repeat 0 0;}
div#subWide .functions ul.tabNav li.head2 a {background:url(/imgCMS/blog/tab_tags.gif) no-repeat 0 0;}
div#subWide .functions ul.tabNav li#head3 {background:url(/imgCMS/blog/tab_null.gif) no-repeat 0 0;}
div#subWide .functions ul.tabNav li.head1_on a {background:url(/imgCMS/blog/tab_lastposts.gif) no-repeat 0 -25px;}
div#subWide .functions ul.tabNav li.head2_on a {background:url(/imgCMS/blog/tab_tags.gif) no-repeat 0 -25px;}
div#subWide .functions .box {width:273px; padding-right:1px;}
div#subWide .functions .box table.lastposts {width:243px;margin:10px 15px;font-size:11px;}
div#subWide .functions .box table.lastposts td.date {width:63px;vertical-align:top;padding:5px 0;}
div#subWide .functions .box table.lastposts td.title {width:180px;vertical-align:top;padding:5px 0;}
div#subWide .functions .box ul.tags {width:253px;margin:10px;color:#003399;font-size:85%;/*11px*/} 
div#subWide .functions .box ul.tags li {display:inline; padding:0 3px;} 
div#subWide .functions .box ul.tags li a {color:#003399;} 
div#subWide .functions .box ul.tags li.tagLebel1 {font-size: 200%;}
div#subWide .functions .box ul.tags li.tagLebel2 {font-size: 180%;}
div#subWide .functions .box ul.tags li.tagLebel3 {font-size: 160%;}
div#subWide .functions .box ul.tags li.tagLebel4 {font-size: 140%;}
div#subWide .functions .box ul.tags li.tagLebel5 {font-size: 120%;}
div#subWide .functions .box ul.tags li.tagLebel6 {font-size: 100%;}

/*	5. Archives
   ------------------------------------------------- */
div#subWide dl.infoList dd.plane {width:234px;padding:0 20px 20px 8px;}
div#subWide dl.infoList dd.plane ul {padding:0 0 0 12px;}
div#subWide dl.infoList dd.plane li {
	font-size:10px;
	background:url(../images/common/marker_point.gif) no-repeat 5px 10px;
	padding:3px 10px 2px 15px;
}
*:first-child+html div#subWide dl.infoList dd.plane li {
	background:url(../images/common/marker_point.gif) no-repeat 5px 8px;
}
* html div#subWide dl.infoList dd.plane li {
	background:url(../images/common/marker_point.gif) no-repeat 5px 9px;
}
div#subWide dl.infoList dd.plane li.blogname {
	background:none;
	padding:11px 10px 4px 0;
}

/*	5. Mobile QRcode
   ------------------------------------------------- */
div#subWide dl.moblieInfo { text-align:center; background:url(../images/common/bg_sidemobile.gif) no-repeat 149px 57px;}
div#subWide dl.moblieInfo dd {
	width:110px;
	padding:0 144px 20px 20px;
}

/*	5. Direct Connect
   ------------------------------------------------- */
div#subWide dl.connectInfo {}
div#subWide dl.connectInfo dd {
	width:234px;
	padding:0 20px 10px;
}
div#subWide dl.connectInfo dd img {
	margin-right:5px;
}

/* ################################################################################
	[Footer] Setting footer styles
   ################################################################################ */

/* ------------------------------------------------------------
	1. Site Info
   ------------------------------------------------------------ */
div#footer div.footNav01 {height: 14px;margin: 0 0 6px;}
div#footer div.footNav01 ul { float:left; }
div#footer div.footNav01 li { float:left; }
* html div#footer div.footNav01 li { line-height:0;vertical-align:bottom;font-size:0; }

div#footer .footAnchor { float:right; text-align:right; }
* html div#footer .footAnchor { line-height:0;vertical-align:bottom;font-size:0; }

div#footer div.footNav02 { margin:0 0 6px; }
div#footer div.footNav02 ul { float:right; }
div#footer div.footNav02 li { float:left; }
* html div#footer div.footNav02 li { line-height:0;vertical-align:bottom;font-size:0; }

div#footer .copyright {	text-align:right; font-family:Arial, Helvetica, sans-serif; font-size:10px; }

/* ################################################################################
	[Clearfix] Clearfix CSS Hack
   ################################################################################ */
div#globalNav:after,
div#localNav:after,
div#topicPath:after,
ul#topicPath:after,
div#content:after,
.clearfix:after {content:".";display:block;clear:both;height:0;visibility:hidden;}

.clearfix {
	*zoom: 1;
}

div#globalNav,
div#localNav,
div#topicPath,
ul#topicPath,
div#content,
.clearfix {display:inline-block;}

/* exclude MacIE5 [start] \*/
* html div#globalNav,
* html div#localNav,
* html div#topicPath,
* html ul#topicPath,
* html div#content,
* html .clearfix {height:1%;}

div#globalNav,
div#localNav,
div#topicPath,
ul#topicPath,
div#content,
.clearfix {display:block;}
/* exclude MacIE5 [end] */