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

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

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

/******************************************************************************
 * TOP CONTENTS
 *****************************************************************************/
#top-contents { width: 732px; margin: 9px; padding: 5px; border: solid 1px #cccccc; font-size: 12px; clear: both; }

/******************************************************************************
 * TOP LINKS
 *****************************************************************************/
#toplink { float: left; width: 332px; }
	#to-map { width: 332px; margin-bottom: 10px; }
	#to-fee { width: 332px; }

/******************************************************************************
 * FREEWORD
 *****************************************************************************/
#freeword { float: right; width: 385px; }
	#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 p#freeword_search_btn { float: right; width: 100px; padding: 5px 0px; text-align: right; }
	p#sample_keyword{	padding-top:15px;	line-height:1.7;}
#header-top           { width: 960px; }
	#header-top table { width: 960px; }

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

/******************************************************************************
 * AREA
 *****************************************************************************/
#main .contents { width: 748px; margin: 9px; padding: 0px; border: solid 1px #cccccc; font-size: 12px; clear: both; }
#main .frame    { width: 730px; margin: 1px 15px; font-size: 12px; background-color:#FFFFFF; }
	#main .frame .subframe  { float: left;  width: 364px; margin: 0px; }
	#main .frame .subframe2 { float: right; width: 365px; margin: 0px; }
		#yokohama { height: 84px; background: url(/images/top/bk-yokohama.jpg) no-repeat right bottom; color: #6e6e6e; }
		#minato   { padding: 5px; height: 74px; background: url(/images/top/bk-minato.jpg)   no-repeat right top ;   color: #6e6e6e; }
		#kawasaki { padding: 5px; height: 74px; background: url(/images/top/bk-kawasaki.jpg) no-repeat right top ;   color: #6e6e6e; }
		#kannai   { height: 84px; background: url(/images/top/bk-kannai.jpg)   no-repeat right bottom; color: #6e6e6e; }
		#shinyoko { padding: 5px; height: 74px; background: url(/images/top/bk-shinyoko.jpg) no-repeat right top ;   color: #6e6e6e; }
		#allyoko  { padding: 5px; height: 74px; background: url(/images/top/bk-allyoko.jpg)  no-repeat right top ;   color: #6e6e6e; }
#main .continaer { padding: 0px 0px 5px 0px; height: 200px; }
	#main #title { margin: 0px 0px 10px 0px; padding: 0px; }
	#main .cell { float: left; padding-right: 20px;}
	#main .area    { padding-left: 20px; line-height: 24px; background: url(/images/top/arrow_area.jpg) no-repeat center left; }
	#main .subarea { padding-left: 20px; margin-left: 0px; line-height: 20px; background: url(/images/top/arrow_subarea.gif) no-repeat center left; }
#main .h2  { height: 24px; font-size: 12px; color: #ffffff; background-color: #70a9f3; line-height: 24px; text-align: center; }
			#main .h2 a { color: #ffffff; font-weight: bold; text-decoration: underline; }
		#main .h3  { float: left; text-align: center; width: 101px; height: 42px; background-color: #BFD2F3; line-height: 28px; font-size: 12px; }
			#main .h3 a { color: #005585; }
	#main .h4      { float: left; width: 253px; height: 32px; padding: 5px; font-size: 12px; color: #636363; text-align:left; /*background: url(/images/area_small_station.gif);*/ }
	#main .h4ex    { float: left; width: 344px; height: 32px; padding: 5px 10px; font-size: 12px; color: #6e6e6e; text-align:left; background: url(/images/area_small_station.gif); }
	#main #bannerL{ padding-top:20px;}
	#main .arealist_title{ text-align:center;}


/******************************************************************************
 * 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;
		}

/******************************************************************************
 * ABOUT US
 *****************************************************************************/
#aboutus { width: 547px; margin: 5px; border: solid 1px #c9c9c9; background-color: #eeeeee; padding: 5px 100px; }