/* boyoferry Document */
/* ----------------------------------------- */
/*  共通レイアウト		                     */
/* ----------------------------------------- */

#header2 { height:auto !important; }

/* 運航状況（ヘッダー用） */
#operatingInfo {
	clear:left;
	width:850px !important;
	min-height:25px;
	margin:8px auto;
	/*background:url(../material/operatinginfo_image.gif) 0 0 no-repeat;*/
}
#operatingInfo h3 {
    width:10em;
    background:url("../material/img_ship-handle.png") 0 0 no-repeat;
    margin:0;
    padding:5px 0 0 30px;
    font-size:1.1em;
    color:#373f5f;
    color:#545d7f;
    line-height: 1.2;
    letter-spacing: 0;
}
#operatingInfo p {
	font-size:1.16em;
	font-weight:bold;
	margin:0;
	padding:3px 0 0 0;
	color:#0ACAED;
	text-align:left;
}
#operatingInfo a { /*color:#FF6;*/ color:#2257B7; }
#operatingInfo a:hover { color:#0ACAED; }
#InfoScr {
    width:650px;
    min-height:25px;
    margin-top:-25px;
    margin-left:180px;
}

/* トップイメージPHOTO */
#topImg {
	width:900px;
	height:243px;
}
#topImgBack {
	width:900px;
	height:243px;
	margin:0 auto;
	background:url(../material/top_image.png) 0 0 no-repeat;
}

/* キャラクターイメージ（左右に配置） */
#img_char1 {
	position:absolute;
	width:130px;
	height:150px;
	top:180px;
	left:2px;
	background:url(../material/img_char1.png) left top no-repeat;
}
#img_char2 {
	position:absolute;
	width:130px;
	height:150px;
	top:180px;
	left:830px;
	background:url(../material/img_char2.png) left top no-repeat;
}
#top #img_char1 {
	/*top:435px;*/ top:320px; z-index:10;
}
#top #img_char2 {
	/*top:435px;*/ top:320px; z-index:10;
}
#img_char1 a { /* メリ坊の紹介リンク */
	display:block;
	height:150px;
	background:url(../material/btn_meriboh.png) right bottom no-repeat;
}
#img_char1 a:hover {
	background:url(../material/btn_meriboh_on.png) right bottom no-repeat;
}
#img_char1 em  { 
	padding:130px 0 0 40px;
	/*display:block;*/
	display:none;
}

#msg_popup { /* ふきだし */
	z-index:100;
	width:120px;
	height:120px;
	display:none;
	position:absolute;
	top:75px;
	left:30px;
	padding:10px;
	font-size:90%;
	background:url(../material/img_fukidashi.png) 0 0 no-repeat;	
}
/* Topのふきだし位置  */
#top #msg_popup { /*top:340px;*/ top:230px;} 

/* オレンジライン予約センター */
#orangeCall { margin:25px 0 15px 0; }

/* キャンペーンバナー（ヘッダー用）naviに記述 */
#bn_campaign { margin-top:30px; }

/* 特設バナー（サイドエリア用） */
#bn_special { }
#bn_special img {
	margin:0 0 5px 0 !important;
}
#bn_special a img { border:none; }
#bn_special a:hover img {
	filter:alpha(opacity=75);
	opacity:0.75; white-space:nowrap;
}
#bn_special p { margin:0 0 5px 1px; font-size:86%; }
#bn_special a { letter-spacing:0; }

/* 特設バナー（フッター用） */
#bn_picup { height:110px; margin:0 0 0 35px; text-align: left; }
#bn_picup img { margin-right:10px; border:none; }
#bn_picup a:hover img {
	filter:alpha(opacity=75);
	opacity:0.75; white-space:nowrap;
}
/* ----------------------------------------- */
/*  コンテンツ部                             */
/* ----------------------------------------- */

#main { /* コンテンツ内容 */
	margin:0;
	padding:0 20px 20px 20px;
}

.img-box { /* 写真枠 */
	margin:15px 0 10px 0;
	padding:0;
}

.img-sp { /* 写真スペース */
	margin:0;
	padding:0 15px 0 0;
}

.checkLink {
	font-size:110%;
	background:url(../material/icon_arrow.gif) no-repeat scroll left top transparent;
	margin-top:10px;
	padding:0 15px 0 20px;
}

/* チェック・リンク */
.checkLink2 { text-align:right; padding:10px 0; }
.checkLink2 a {
	font-size:100%;
	padding:0 15px 0 20px;
	margin-left:15px;
	background:url(../material/icon_arrow.gif) left top no-repeat;	
	color:#F60;
}
/* チェック・リンク２ */
.checkLink2 a:hover { color:#F00; }
.checkLink2 img {
	vertical-align:middle;
	margin-left:10px;
}
.checkLink2 a:hover img {
	filter:alpha(opacity=75);
	opacity:0.75; white-space:nowrap;
}

/*  詳しくみるボタン */
.btn_lookup a { 
	display:block;
	width:160px;
	height:33px;
	margin:0;
	padding:0;
}
.btn_lookup a em { display:none; } 

.btn_lookup a { background:url(../material/btn_lookup.png) 0 0 no-repeat; }
.btn_lookup a:hover { background:url(../material/btn_lookup.png) 0 -33px no-repeat; }

/* ----------------------------------------- */
/*  コンテンツ装飾		                     */
/* ----------------------------------------- */
/* コンテンツインデックスメニュー ////////////// */
#index_box {
	width:654px;
	margin:0;
	padding:26px 0 0 10px;
}

#index_box ul {
	margin:0;
	padding:0;
}

#index_box li {
	list-style-type:none;
	float:left;
	padding:0;
	margin:0 26px 26px 0;
}
#index_box li em { display:none; }

#index_box li a {
	display:block;
	width:301px;
	height:115px;
}

/* のりば案内 */
.Imenu01 a{ background:url(../material/Imenu-port.jpg) 0 0 no-repeat; }
.Imenu01 a:hover{ background:url(../material/Imenu-port.jpg) -311px 0 no-repeat; }
.Imenu02 a{ background:url(../material/Imenu-port.jpg) 0 -125px no-repeat; }
.Imenu02 a:hover{ background:url(../material/Imenu-port.jpg) -311px -125px no-repeat; }
.Imenu03 a{ background:url(../material/Imenu-port.jpg) 0 -250px no-repeat; }
.Imenu03 a:hover{ background:url(../material/Imenu-port.jpg) -311px -250px no-repeat; }
.Imenu04 a{ background:url(../material/Imenu-port.jpg) 0 -375px no-repeat; }
.Imenu04 a:hover{ background:url(../material/Imenu-port.jpg) -311px -375px no-repeat; }
.Imenu05 a{ background:url(../material/Imenu-port.jpg) 0 -500px no-repeat; }
.Imenu05 a:hover{ background:url(../material/Imenu-port.jpg) -311px -500px no-repeat; }

/* 観光・イベント */
.Imenu_ev01 a{ background:url(../material/Imenu-event.jpg) 0 0 no-repeat; }
.Imenu_ev01 a:hover{ background:url(../material/Imenu-event.jpg) -311px 0 no-repeat; }
.Imenu_ev02 a{ background:url(../material/Imenu-event.jpg) 0 -125px no-repeat; }
.Imenu_ev02 a:hover{ background:url(../material/Imenu-event.jpg) -311px -125px no-repeat; }
.Imenu_ev03 a{ background:url(../material/Imenu-event.jpg) 0 -250px no-repeat; }
.Imenu_ev03 a:hover{ background:url(../material/Imenu-event.jpg) -311px -250px no-repeat; }
.Imenu_ev04 a{ background:url(../material/Imenu-event.jpg) 0 -375px no-repeat; }
.Imenu_ev04 a:hover{ background:url(../material/Imenu-event.jpg) -311px -375px no-repeat; }
.Imenu_ev05 a{ background:url(../material/Imenu-event.jpg) 0 -500px no-repeat; }
.Imenu_ev05 a:hover{ background:url(../material/Imenu-event.jpg) -311px -500px no-repeat; }

/* 観光ガイドメニュー */
.map-menu {
	width:325px;
	background:#494644;
	float:left;
	margin:25px 30px 0 0;
}

.map-menu img { margin:0; padding:0; }
.map-menu p {
	color:#FFF;
	margin:5px 10px;
	padding:0;
}
.map-menu a { color:#FF9; }
.map-menu a:hover { color:#F60; } 

/* 運行ダイヤ表,運賃表 ////////////////////////// */

#price1 td, #price2 td { /* 運賃テーブル(td) */
	letter-spacing:0;
	text-align:right;
	padding-right:5px;
}

.time_box { /* 時刻表枠 */
	width:330px;
	margin:0 15px 20px 0;
	padding:0;
	float:left;
}

.sp-r0 { margin-right:0; }

.time_box table.cont1 { /* 時刻表テーブル */
	margin:10px 0 0 0;
	padding:0;
}
.time_box table.cont1 td { 
	text-align:right !important;
    padding:5px 6px 5px 0;
}
/* Q&A */
.ans table.cont1 th, .ans table.cont1 td { 
    padding:4px 2px 4px 5px;
    font-size:0.9em;
}
.ans table.cont1 td span {
    *font-size: 95%;
    letter-spacing: 0 !important;
}
.ans table.cont1 td .txt_ms {
    font-size:0.95em;
    padding:0;
}
.ans ul li {
    color:#000;
    margin-left:5px;
}

.table_box {/* 割引案内テーブル枠 */
	width:320px;
	margin:0 15px 20px 0;
	float:left;
}
.table_box ul { margin-left: 0; }

th.title { background:#D3E4F2 url(../material/grad01.gif) left top repeat-x; }
th.title2 { background:#D3E4F2 url(../material/grad02.gif) left top repeat-x; }
td.deep { background:#eaf5fa; }

#price1 th.title { background:#D3E4F2 url(../material/grad01.gif) left top repeat-x; }
#price1 th.title2 { background:#D3E4F2 url(../material/grad02.gif) left top repeat-x; }
#price1 td.deep { background:#eaf5fa; }

#price2 th.title { background:#CDF3E9 url(../material/grad01g.gif) left top repeat-x; }
#price2 th.title2 { background:#CDF3E9 url(../material/grad02g.gif) left top repeat-x; }
#price2 td.deep { background:#eaf5fa; }

/* 乗船運賃 - キャンペーン割引へのリンク枠 */
#fare1-1,#fare1-2,#fare1-3 { position:relative; }
#fare2-1,#fare2-2,#fare2-3 { position:relative; }

/* キャンペーン右表記タイプ */
.campaignInfo_r {
	z-index:1;
	position:absolute;
    width:10px;
	text-align:center;
	vertical-align:middle;
	border-top:2px solid #F00;
	border-bottom:2px solid #F00;
	border-right:2px solid #F00;
}
.campaignInfo_r span { 
    display: block;
    width:10em;
    margin-left:25px;
    color:#f00;
    font-size:1.1em;
	font-weight:bold;
}
.campaignInfo_r span a{ color:#f00; }
.campaignInfo_r span a:hover { color:#060 !important; }
#fare1-1 .campaignInfo_r, #fare2-1 .campaignInfo_r {
    top: 76px;
    left: 440px;
    height: 75px;
    padding-top: 48px;
}

/* キャンペーン網掛けタイプ */
.campaignInfo {
	z-index:1;
	position:absolute;
	width:205px;
	height:68px;
	top:65px;
	left:130px;
	text-align:center;
	vertical-align:middle;
	background:#fff0f5;
	border:2px solid #F00;
	filter:alpha(opacity=70);
	opacity:0.7; white-space:nowrap;
}
.campaignInfo span { color:#f00; }
.campaignInfo a { 
	font-weight:bold;
	background:#fff;
}
.campaignInfo a:hover span { color:#060 !important; }

#fare1-1 .campaignInfo {
    width: 296px;
    height: 74px;
    top: 76px;
    left: 141px;
    padding: 48px 0 0 0;
}
#fare1-2 .campaignInfo {
	width:205px;
	height:21px;
	top:65px;
	left:130px;
	padding:17px 0;
}
#fare1-3 .campaignInfo {
	width:150px;
	height:111px;
	top:65px;
	left:185px;
	padding:66px 0 0 0;
}
#fare2-1 .campaignInfo {
    width: 310px;
    height: 75px;
    top: 76px;
    left: 126px;
    padding: 48px 0 0 0;
}
#fare2-2 .campaignInfo {
	width:165px;
	height:21px;
	top:65px;
	left:310px;
	padding:17px 0;
}
#fare2-3 .campaignInfo {
	width:150px;
	height:111px;
	top:65px;
	left:325px;
	padding:66px 0 0 0;
}

/* 柳井港、三津浜港発着運賃へのリンク */
.fare1-link {
	text-align:right;
	font-weight:bold;
}
/* 伊保田港発着運賃へのリンク */
.fare2-link {
	position:absolute;
	left:350px;
	bottom:0;
	font-weight:bold;
}
.fare-ihota a:hover span { color:#C30; }

/* キャンペーン割引運賃 */
.campaign_title { clear:both; text-align:center; }
.campaign_title h5 {
	font-size:1.3em;
	padding:2px 0;
	letter-spacing:5px;
}
.half { width:50%; }
.half2 { width:75%; }

/* キャンペーン割引後テーブル装飾 */
.campaign_fare table {
	border:2px solid #FF4684;
}
.campaign_fare td strong {
	color:#f36;
	font-size:108%;
}

/* 運航ダイヤ ////////////////////////////////// */
#searouteMap {
	width:680px;
	height:450px;
	margin-bottom:10px;
}

/* 航路と船舶 ////////////////////////////////// */

/* フェリー紹介 */
.ferry { 
	width:630px;
	height:140px;
	position:relative;
	margin:8px 0 5px 15px;
	padding:80px 5px 10px 5px;	
	vertical-align:bottom;
}

#ext1 { /* おれんじぐれいす */
	background: url(../material/ferry_ext_top1.jpg) left bottom no-repeat;
}
#ext2 { /* おれんじまーきゅりー */
	background: url(../material/ferry_ext_top2.jpg) left bottom no-repeat;
}
#ext3 { /* おれんじじゅぴたー */
	background: url(../material/ferry_ext_top3.jpg) left bottom no-repeat;
}
#ext4 { /* しらきさん */
	background: url(../material/ferry_ext_top4.jpg) left bottom no-repeat;
}

.ferry .btn_lookup { /* 詳しくみるボタンの位置 */
	position:absolute;
	right:20px;
	bottom:12px;
}
/* 乗船手順 //////////////////////////////////// */

#flow ul { margin-left:350px; font-size:90%; }

/* よくある質問（Q＆A） //////////////////////// */

.que { /* クエスチョン */
	font-size:120%;
	/*font-weight:bold;*/
	color:#C30;
	letter-spacing:1px;
	padding:8px 2px 4px 28px;
	margin:0;
	background: url(../material/qanda_que.gif) left 7px no-repeat;
}

.ans { /* アンサー */
	padding:8px 2px 4px 28px;
	background: url(../material/qanda_ans.gif) left 7px no-repeat;
}
.ans p { color:#336; margin:0 15px 12px 0; }
.ans ul { margin:0 10px; }
.ans li { color:#339; }

/* 観光ガイド ////////////////////////////////// */

#guide1, #guide2 {
	display:none; visibility:hidden; height:1em;
}
#guide1 p, #guide2 p {
	margin-left:0 !important;
}

/* 運賃シミュレーション //////////////////////// */

.noborder td { border:none; padding-left:0; }

/* オンライン乗船予約 ////////////////////////// */

table.cont-u1 { /* 下ライン付き(table) */
	margin:5px 0 10px 10px;
	border:none; 
	border-collapse: collapse;
}

.cont-u1 td { /* 下ライン付き(td) */
	vertical-align:top;
	border-bottom: 1px dotted #8b7d6b; 
	padding:8px 3px 5px 5px;
	font-family: monospace,"ＭＳ ゴシック","Osaka−等幅";
	letter-spacing:1px;
	line-height:1.6;
}

.cont-u1 th {
	vertical-align:top;
	text-align:left;
	padding:8px 10px 8px 5px;
	font-family: monospace,"ＭＳ ゴシック","Osaka−等幅";
	letter-spacing:1px;
	font-weight:bold;
	border-bottom: 1px dotted #8b7d6b;
}

.cont-u1 input, .cont-u1 select {
	font-size:120%;
	margin-bottom:5px;
}

.normal input, .normal select {
	font-size:120%;
	margin-bottom:5px;
}

/* テーブル見出し斜線 */
.slash {
    background-image: linear-gradient(to right top, transparent 50%, #333 50%, #333 51%, transparent 51%) !important;
}
.slash-r, .slash-l {
    display:block;
    letter-spacing:0.3em;
}
.slash-r {
    text-align:right;
    padding:0 5px 0 0;
}
.slash-l {
    text-align:left;
    padding:0 0 0 5px;
}

/* note */
.note dt {
    position: relative;
    margin:0;
    padding:0;
}
.note dt span {
    position: absolute;
    margin:0;
    padding:0;
    font-size:0.9em;
}
.note dd {
    margin:0 0 5px 0;
    padding:0;
    padding-left: 1.5em;
    font-size:0.9em;
}
.d_waku {
    margin:0 0 10px 15px;
    padding:10px 15px;
    border:1px solid #000;
}
.d_waku table {
    margin:0 0 10px 0;
}
.d_waku caption {
    text-align: center;
    margin:0;
    letter-spacing: 5px;
}
.d_waku caption:before {
    content: "";
    margin:0;
    padding:0;
}
.d_waku td {
    font-size:0.9em;
    text-align: left !important;
}

#chargeRevision {
	margin:10px 0;
	padding:5px 15px;
	font-size:120%;
}
#chargeRevision a,
#chargeRevision strong {
	margin:0 5px;
	padding:2px 5px;
	border:1px solid #03C;
}
#chargeRevision a {
	/*background:#03C;*/
	color:#03c;
}
#chargeRevision strong {
	background:#FFC;	
	color:#000;
	font-size:110%;
	border:2px solid #03C;	
}
#chargeRevision a:hover { color:#F00; }

.unkyu {
    border:2px solid red;
}
.unkyu td {
    background:#FBE0E1;
    color:red;
}

/* アンダーライン２重線 */
.u_line_w { 
    /*text-decoration:underline double red;*/
    border-bottom: double 4px red;
    padding-bottom:0;
}
p.notes_i {
	padding-left:1em;
	text-indent:-1em;
    margin:0;
}

/* 送信完了 */
#reserveSent {
    padding:0 0 10px 0;
    background:#FCE8EF;
}
#reserveSent h4 {
    font-size:1.4em;
    text-align: center;
    line-height: 1.8;
    background: #364e79;
}
#reserveSent p {
    margin:10px 23px;
}
#reserveSent p.notes_i {
	padding-left:1.5em;
	text-indent:-1.5em;
}
#reserveSent .kakomiwaku {
    border: 1px solid #333;
    padding:1px 3px;
}
#reserveSent .link-btn {
    font-size: 1.5em;
    padding:3px 15px;
}
#reserveSent .link-btn:hover {
    color:red;
    background: white;
}

/* 臨時ダイヤで運行中（背景重ねスタイル） */
.timetable_rinji {
	z-index:1;
	position:absolute;
	width:640px;
	height:535px;
    margin:-10px 15px 15px 15px;
    background-color:rgba(255,255,255,0.7);
    border:2px solid #000;
}
.timetable_rinji p {
    font-size:3em;
    font-weight:bold;
    width:9.5em;
    margin: 30% auto;    
} 
.timetable_rinji_none {
    display: none;
}

#cnglang {
	position:absolute;
	top:60px;
    left:450px;
    z-index: 10;
}


#google-lang {
	/*height: 50px;
	position:absolute;
	top:15px;
    left:200px;
    z-index: 10;*/
}
#google-lang ul {
	width:450px;
	height:auto;
	margin:0;
}

#google-lang ul li {
	list-style-type:none;
	float:left;
	margin:0 5px 0 0;
	padding:3px;
}
#google-lang ul li a {
	display:inline-block;
	width:auto;
	height:auto;
}
#google-lang ul:after {
    content: "";
    display: block;
    clear: both;
    height:0;
    overflow: hidden;
}

#Call_Center {
	position:absolute;
	top:16px;
    right:15px;
    z-index: 10;
}
#Call_Center table {
    margin:0;
    padding:0;
}
#Call_Center td {
    margin:0;
    padding:0 2px;
    line-height:1.4;
    color:#7f0e00;
    vertical-align: middle;
}
#Call_Center em {
    display: inline-block;
    min-width:50px;
    text-align:center;
    background:#7f0e00;
    color:#fff;
    font-size:.8em;
    font-style: normal;
    border-radius: 4px;
}
#Call_Center em.spc1em {
    /*letter-spacing: 1em;*/
}
#Call_Center tel {
    background:url("../material/icon_tel.png") left bottom no-repeat;
    padding-left:1.2em;
    font-size:1.15em;
    letter-spacing: 0;
    vertical-align: middle;
    font-family:"Arial Black", Gadget, "sans-serif";
}