@charset "shift_jis";



body {
	font-family: "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 75%;
	line-height:140%;
	color: #333333;
	margin: 0px;
	padding: 0px;
	text-align: center;
	background: #ffffff;
}

textarea {
	font-size: 11px;
}

h1,h2,h3,p,ul,li{
	margin: 0px;
	padding: 0px;
}

a {
	color: #333333;
}
a:hover {
	color: #1D9A02;
}
img {
	border: none;
}
.look {
	background: #efefef;
}




/*コンテナー
---------------------------------------------------------------------------------------*/
#container {
	text-align: left;
	width: 100%;
	margin:0;
	padding:0;
}

/*トップヘッダー
---------------------------------------------------------------------------------------*/
#topheader {
	background:url(../images/top_header_bg.gif);
	height: 122px;
}

/*トップ（右側）コンテンツ
---------------------------------------------------------------------------------------*/
#topmain {
	float: right;
	width: 430px;
	display: inline;
	margin-right:0px;
	padding-top:0;
	padding-bottom:0;
}
#topmain h2 {
	font-size: 100%;
	background: #FF8400 url(images/h2_bg.gif) no-repeat;	/*h2の背景画像設定*/
	color: #FFFFFF;		/*h2の文字色（ここでは白）*/
	text-align: center;	/*h2の文字のセンタリング（中央よせ）。もし左よせがよければこの１行を削除する。*/
	line-height: 28px;
}
#topmain p {
	padding: 0.5em 20px 1em;	/*メインコンテンツ内の段落タグ<p>設定*/
}

/*トップサイド（左側）コンテンツ
---------------------------------------------------------------------------------------*/
#topside {
	float: left;
	width: 265px;
	padding:0;
	margin:0;
}
#topside h3 {
	font-size: 100%;
	background: #1D9A02 url(../images/h3_bg.gif);	/*h3の背景画像設定*/
	color: #FFFFFF;			/*h3の文字色（ここでは白）*/
	letter-spacing: 0.2em;	/*文字間隔をほんの気持ち広げる設定。通常にしたいなら、この１行を削除する。*/
	text-align: center;		/*h3の文字のセンタリング（中央よせ）。もし左よせがよければこの１行を削除する。*/
}
#topside p {
	padding: 0px 10px 1em;	/*サイドコンテンツ内の段落タグ<p>設定*/
}

/*トップ新着
---------------------------------------------------------------------------------------*/
#topnews {
	width: 420px;
	padding:5px;
	background:#e1f2ff;
}

#topnews_msg {
	width: 550px;
	padding:0px;
	margin:10px auto;
	border:1px solid #3463FF;
	text-align:left;
}

#topnews_msg h2{
color:#4C47A5;
font-weight:bold;
margin:10px 0 10px 20px;
margin-top:10px;
margin-bottom:10px;
font-size:12px;
}

#topnews_msg p{
margin:2px 0 2px 20px;
}



/*ヘッダー
---------------------------------------------------------------------------------------*/
#header{
	background: url(../images/header/headertopbg.gif) no-repeat;
	height: 59px;
}
#header h1{
padding:17px 0 0 0;

}

/*右上のナビメニュー
-------------------------------------------------------------------------------------*/
#nav{
	float: right;
margin:17px 0px 0px 5px;
}
ul#nav li{
	float: left;

}
ul#nav li a{
	padding-right: 5px;
	margin-right:5px;
	float: left;

}


/*メインメニュー
---------------------------------------------------------------------------------------
■画像なのでdisplay:inlineでもいいんですが、ビルダー編集画面で縦に並ぶので今回はfloat処理
---------------------------------------------------------------------------------------*/
#menu{
background: url(../images/header/headermenubg.gif) no-repeat;
height:25px;
}

#menu ul{
list-style-type: none;
background:#000077;
width:100%;
	margin:0;
	padding:0;
}
#menu ul li{
	float: left;
}
#menu ul img{
	vertical-align: bottom;
}

/*コンテンツ
---------------------------------------------------------------------------------------*/
#contents {
	clear: left;	/*メニューのfloat処理をここでクリア*/
	width: 700px;
	margin:0;
	padding:0;
}

/* --- リストエリア --- */
.topicPath {
margin: 10px 0 0 0;
padding: 0;
list-style-type: none;
}

/* --- リスト項目 --- */
.topicPath li {
display: inline;
}

/* --- リンク --- */
.topicPath li a {
padding-right: 12px; /* リンクエリアの右パディング */
background: url(../images/path.gif) no-repeat right; /* 区切りの記号 */
}


/*メイン（右側）コンテンツ
---------------------------------------------------------------------------------------*/
#main {
	float: right;
	width: 640px;
	display: inline;
	margin:0;
	padding:0;
}

#main h1{
	margin:20px auto;
	padding:0;
}

#main h2{
background:#B8E6E6;
color:#000066;
font-size:14px;
font-weight:bold;
padding:5px;
margin-bottom:10px;
}

#main p{
margin-bottom:10px;
}
/*ページトップ
---------------------------------------------------------------------------------------*/
#main .pagetop{
margin-top:30px;
margin-bottom:20px;
text-align:right;
}


/*サイド（左側）コンテンツ
---------------------------------------------------------------------------------------*/
#side {
	float: left;
	width: 60px;
	margin:0;
	padding:0;
}



/*
---------------------------------------------------------------------------------------*/
.box{
margin:0 0 0 30px;
padding:5px;
}

.box p{
font-size:130%;
line-height:120%;

}

.section{
margin:0px;
padding:0px;
}

/*Service // List of Port Facilities
---------------------------------------------------------------------------------------*/
.portfacilities{
width:100%;
margin:0;
padding:0;
font-size:10px;
}

.portfacilities table{
margin:0 auto;
border-collapse:collapse; 
width:100%; 
border:1px solid #333333;
background:#ffffff;
}

.portfacilities td{
border:1px solid #333333; 
padding:2px;
background:#ffffff;
text-align:left;
}

.portfacilities th{
border:1px solid #333333; 
padding:2px;
background:#ECFBCC;
text-align:center;
font-weight:bold;
}

.portfacilities td.color1{
background:#B8E6E6;
text-align:left;
}

.portfacilities td.color2{
background:#DAF3F3;
text-align:left;
}

.portfacilities td.color3{
background:#ffffff;
text-align:center;
}
.portfacilities td.color4{
background:#fffff3;
text-align:center;
}

/*Service // Charges
---------------------------------------------------------------------------------------*/
.charges{
width:100%;
margin:0;
padding:0;
font-size:12px;
}

.chargesbox{
width:620px;
border:1px solid #333333;
background:#fffff3;
margin:10px auto;
padding:5px;
font-size:12px;
}

.chargesboxA{
float:left;
width:310px;
margin:0;
padding:0;
}

.chargesboxB{
float:right;
width:310px;
margin:0;
padding:0;
}

.chargesboxC{
width:620px;
margin:10px 0 0 0;
padding:5px;
background:#000066;
color:#ffffff;
font-size:14px;
font-weight:bold;
}

.chargesboxD{
width:620px;
margin:0 0 10px 0;
padding:5px;
background:#f3f3f3;
font-size:12px;
font-weight:bold;
}
.chargesbox h3{
font-weight:bold;
text-align:center;
font-size:12px;
}

.chargesbox h4{
font-weight:bold;
text-align:left;
font-size:12px;
color:#000066;
margin-top:5px;
}

.chargesbox ul{
list-style-type: disc;
margin-left:20px;
}

.chargesbox ul li{
margin-top:2px;
}


.charges table{
margin:0 auto;
border-collapse:collapse; 
width:100%; 
border:1px solid #333333;
}

.charges td{
border:1px solid #333333; 
padding:2px;
background:#fffff3;
text-align:left;
}

.charges th{
border:1px solid #333333; 
padding:2px;
background:#ccccff;
text-align:center;
font-weight:bold;
}

.charges .price{
padding:2px;
background:#fffff3;
text-align:right;
}

#main .charges .pagetop{
margin-top:10px;
margin-bottom:10px;
text-align:right;
}

#contact ul{
list-style-type: disc;
margin-left:20px;
}

#contact ul li{
margin-top:2px;
}

/*performance
---------------------------------------------------------------------------------------*/
#performance{
margin:0;
padding:0;
}

.performancebox{
margin:0 0 10px 0;
padding:10px;
background:#fffff3;
border:1px solid #cccccc;
}

.boxA{
margin:0;
padding:10px;
text-align:center;
}

.boxmenu{
margin:20px 0 0 0;
padding:5px;
text-align:center;
background:#ccccff;
}

.boxgraph{
margin:0;
padding:5px;
border:1px solid #cccccc;
text-align:center;
}

.boxgraph p{
margin:0;
padding:5px;
background:#ffff99;
font-weight:bold;
}

.boxdata{
margin:10px 0;
}

.boxdata table{
margin:0 auto;
border-collapse:collapse; 
width:100%; 
border:1px solid #A3A3CC;
}

.boxdata td{
border:1px solid #A3A3CC; 
padding:1px;
background:#ccccff;
text-align:left;
}

.boxdata td.num{
border:1px solid #A3A3CC; 
padding:1px;
background:#fffff3;
text-align:right;
}


.boxdata th{
border:1px solid #A3A3CC; 
padding:1px;
background:#ccccff;
text-align:center;
font-weight:normal;
}

#performance h3{
margin:0 0 10px 0;
padding:5px;
background:#ccccff;
font-weight:bold;
font-size:14px;
}

#main #performance .pagetop{
margin-top:10px;
margin-bottom:10px;
text-align:right;
}


.boxroutes table{
margin:0 auto;
border-collapse:collapse; 
width:100%; 
border:1px solid #333333;
}

.boxroutes td{
border:1px solid #333333; 
padding:1px;
background:#fffff3;
text-align:left;
}

.boxroutes th{
border:1px solid #333333; 
padding:1px;
background:#ccffff;
text-align:left;
}


/*Links
---------------------------------------------------------------------------------------*/
#links table{
margin:0 auto;
border-collapse:collapse; 
width:100%; 
border:1px solid #CCCCCC;
}

#links td{
border:1px solid #CCCCCC; 
padding:4px;
background:#F6F6F6;
text-align:left;
}

#links th{
border:1px solid #CCCCCC; 
padding:4px;
background:#E1F0FF;
text-align:left;
font-weight:bold;
color:000066;
}


/*フッター
---------------------------------------------------------------------------------------*/
#footer {
margin-top:20px;
padding:10px;
border-top:1px solid #999999;
	clear: both;			/*mainとsideのフロート処理解除*/
	width: 100%;
	text-align: center;		/*文字のセンタリング*/
	color: #333333;			/*文字色*/
}
#footer a {
	color: #333333;
}

.footerbox{
width:400px;
margin:0 auto;
text-align:center;
}

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

	Clear

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

#nav,
#menu,
#topic-path,
#maintop,
#main,
#sidetop,
#side,
.fboxA,
.fboxB,
.floorph,
.chargesbox,
.charges,
.section,
#footer,
{
    zoom:1;
	overflow:hidden;
}


#nav:after,
#menu:after,
#topic-path:after,
#maintop:after,
#main:after,
#sidetop:after,
#side:after,
.fboxA:after,
.fboxB:after,
.floorph:after,
.chargesbox:after,
.charges:after,
.section:after,
#footer:after{
    content: "";
    display: block;
    clear: both;
    height: 0px;
    overflow: hidden;
}


* html #nav,
* html #menu,
* html #topic-path,
* html #maintop,
* html #main,
* html #sidetop,
* html #side,
* html .fboxA,
* html .fboxB,
* html .floorph,
* html .chargesbox,
* html .charges,
* html .section,
* html #footer{
    height: 1em;
    overflow: visible;
}

/* or */
.clear,
.unit-totop{
	clear:both;
}