@charset "UTF-8";
@import "/css/common.css";
@import "/css/recommend.css";

#main { padding: 0px; width: 760px; border: 0px; overflow: hidden; }

/******************************************************************************
 * TOP LINKS
 *****************************************************************************/
#toplink { width: 340px; padding: 5px; clear: both;float:left;}
	#toplink .cell { float: left; width: 332px; padding: 5px 0 5px 4px;}

/******************************************************************************
 * FREEWORD
 *****************************************************************************/
#freeword { width: 388px; padding: 10px 6px 5px 0; float:right; }
	#freeword_box { border: 1px solid #999999; height:124px;	padding:10px; width:363px;}
	#freeword #txt_keyword { width: 357px; margin: 15px auto 5px auto; display: block; }
	#freeword #freeword_search_btn { padding: 5px 0px; text-align:right; float: right; width: 100px; }
	#freeword #sample_keyword      { padding-top: 15px; line-height: 1.7; }
div#header-top           { width: 960px; }
	div#header-top table { width: 960px; }


/******************************************************************************
 * INFOBAR
 *****************************************************************************/

div#infobar { width: 760px; height: 33px; color: #000000; background-image:url(/images/top/infobar_back.gif); background-repeat:no-repeat; }
	div#ticker { float: left; width: 590px; height: 33px; }
		div#ticker ul#topics { margin: 0px; padding: 0px 10px; }
			div#ticker ul#topics li { margin: 0px; padding: 2px; }
	div#last   { float: right; width: 160px; height: 33px; line-height: 36px; text-align: right; padding-right:5px; }

div.catchcopy { font-size: 16px; font-weight: bold; color: #000066; text-align: center; padding: 10px 0px; }

/******************************************************************************
 * AREA
 *****************************************************************************/

div#area { width: 748px; font-size: 12px; margin:10px 5px 5px 5px; padding: 0px; border: solid 1px #cccccc; clear: both; }
	div#area h2{text-align:center; font-weight:bold; margin:5px 0;}
	div#area .chiyoda a{ background-image:url(/images/top/area/chiyoda.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .chiyoda a:hover{ background-image:url(/images/top/area/chiyoda-over.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .chuo a{ background-image:url(/images/top/area/chuo.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .chuo a:hover{ background-image:url(/images/top/area/chuo-over.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .minato a{ background-image:url(/images/top/area/minato.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .minato a:hover{ background-image:url(/images/top/area/minato-over.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .shinjuku a{ background-image:url(/images/top/area/shinjuku.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .shinjuku a:hover{ background-image:url(/images/top/area/shinjuku-over.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .shibuya a{ background-image:url(/images/top/area/shibuya.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .shibuya a:hover{ background-image:url(/images/top/area/shibuya-over.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .taito a{ background-image:url(/images/top/area/taito.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .taito a:hover{ background-image:url(/images/top/area/taito-over.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .hinagawa a{ background-image:url(/images/top/area/hinagawa.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .hinagawa a:hover{ background-image:url(/images/top/area/hinagawa-over.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .meguro a{ background-image:url(/images/top/area/meguro.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .meguro a:hover{ background-image:url(/images/top/area/meguro-over.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .toshima a{ background-image:url(/images/top/area/toshima.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .toshima a:hover{ background-image:url(/images/top/area/toshima-over.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .bunkyo a{ background-image:url(/images/top/area/bunkyo.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }
	div#area .bunkyo a:hover{ background-image:url(/images/top/area/bunkyo-over.gif); background-repeat:no-repeat; height:23px; display:block; text-indent:-9999px; }

	div#area div.arealist { margin: 0px 4px; }
	* html div#area div.arealist { margin:0; }
		div#area p.arealist_title{ text-align:center;}
		div#area div.arealist .cell1 { float: left; width:238px; margin:5px 0 5px 5px; text-align: left; border:solid 1px #C5C5C7; height:210px;  }
		div#area div.arealist .cell2 { float: left; width:238px; margin:5px 0 5px 5px; text-align: left; border:solid 1px #C5C5C7; height:150px;  }
		div#area div.arealist .cell3 { float: left; width:238px; margin:5px 0 5px 5px; text-align: left; border:solid 1px #C5C5C7; height:130px;  }
		div#area div.arealist .cell4 { float: left; width:238px; margin:5px 0 5px 5px; text-align: left; border:solid 1px #C5C5C7; height:119px;  }
		div#area div.arealist .cell4-b { float: left; width:483px; margin:5px 0 5px 5px; text-align: left; border:solid 1px #C5C5C7; height:119px;  }
		div#area div.arealist .area    {}
		div#area div.arealist .subarea { margin-left: 5px; }
			div#area div.arealist .subarea .item { padding-left: 20px; line-height: 20px; background: url(/images/top/arrow.gif) no-repeat center left; }



/******************************************************************************
 * TYPE
 *****************************************************************************/

div#type { width: 748px; margin: 5px; border: solid 1px #cccccc; }
	div#type div.title { width: auto; }
	div#type div.question { width: 400px; margin: 20px auto; }
	div#type div#tokoton { float: left; width: 360px; margin-left: 5px;  margin-bottom:5px;border: solid 1px #cccccc; }
		div#type div#tokoton div.guide { padding: 5px; font-size: 12px; color: #333333; }
			div#type div#tokoton div.guide p.catch    { font-size: 12px; line-height: 1.5em; color: #A51801; font-weight: bold; }
			div#type div#tokoton div.guide div.button { margin-top: 20px; text-align: center; }
div#type div#osusume     { float: left; width: 360px; margin-left: 5px; margin-bottom:5px;border: solid 1px #cccccc; }
		div#type div#osusume div.guide { padding: 5px; font-size: 12px; color: #333333; }
			div#type div#osusume div.guide p.catch    { font-size: 12px; line-height: 1.5em; color: #295502; font-weight: bold; }
			div#type div#osusume div.guide div.button { margin-top: 20px; text-align: center; }


/******************************************************************************
 * NEWS TICKER
 *****************************************************************************/

div#ticker div.title { float: left; width:  87px; height: 33px; }
div#ticker #keyword  { float: left; width: 493px; height: 33px; overflow: hidden; padding:0px 5px; line-height: 23px;}
#keyword a{ color : #000000; }
#keyword div {height:20px:}

div#ticker ul        { margin: 0px; padding: 0px; }
div#ticker li        { float: left; margin: 0px; padding-top: 4px; list-style: none; }
		.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
			position: relative;
			left: 10px;
			width: 450px;
			overflow: hidden;
		}
		ul.newsticker { /* that's your list */

			position: relative;
			left: 420px;
			font-size: 12px;
			list-style-type: none;
			margin: 0;
			margin-top: 4px;
			padding: 0;
			overflow: hidden;

		}
		ul.newsticker li {
			float: left; /* important: display inline gives incorrect results when you check for elem's width */
			margin: 0;
			padding: 0;
			color: #2CF364;
		}
		ul.newsticker a {
			white-space: nowrap;
			padding: 0;
			color: #2CF364;
			margin: 0 50px 0 0;
		}
		ul.newsticker span {
			margin: 0 10px 0 0;
		}

/******************************************************************************
 * ABOUTUS
 *****************************************************************************/
div#aboutus { width: 748px; font-size: 12px; margin: 5px; padding: 0px; border: solid 1px #cccccc; }
div#aboutus h3{margin: 10px 0px -5px 70px; font-size:11px; }
div#aboutus p{padding: 10px 0 10px 70px; font-size:11px; }