@charset "UTF-8";

@import "/st/3/en/pc/include/css/header_bus.css";

/* =========================================================
 	Style: Base/layout Style(Header, Footer)
 -----------------------------------------------------------
 1-1.Reset
 1-2.Layout Box
 1-3.Header
 1-4.Footer
 1-5.Hyper Text Module
 1-6.Common class
 1-7.IE Hack
 1-8.Social button
 1-9.Icons
 1-10.Titles
========================================================= */


/* 1-1.Reset
--------------------------------------------------------- */


/* 1-2.Layout Box
--------------------------------------------------------- */
.head-en,
.foot-en {
	width: 100%;
}
	.head-en > div,
	.foot-en > div {
		width: 960px;
		margin: 0 auto;
		clear: both;
	}
	.foot-en > div {
		padding-top: 23px;
	}
	.head-en,
	.head-en > div {
		height: 94px;
	}

/* 1-3.Header
--------------------------------------------------------- */
.head-en {
	background: url(/st/share/pc/img/bg-header-line.png) repeat-x left top;
	line-height: 1;
	text-align: left;
	margin-bottom: 15px;
}
.head-en.mypage {
	text-align: left!important;
}
	.head-en > div {
		background: url(/st/share/pc/img/bg-header-bus.jpg) no-repeat 525px top;
		padding-top: 9px;
	}
	
	.head-en ul,
	.head-en li {
		float: left;
	}
	.lang ul,
	.lang ul li,
	.menu div li {
		float: none;
	}
		.head-en nav li {
			text-align: center;
			list-style: none;
		}
		.head-en nav div {
			text-align: left;
		}
		
		/* Old CSS対策 */
		.head-en p {
			margin-bottom: 0;
		}

/* ----- Willer Express Logo, Lead, My Page(txt) ----- */
/* Willer Express Logo */
.head-en h1,
.head-en h1 span {
	width: 152px;
	height: 37px;
}
/* My Page */
.head-en h2,
.head-en h2 span {
	width: 90px;
	height: 40px;
}
/* Lead Txt */
.head-en p,
.head-en p span {
	width: 233px;
	height: 37px;
}
.head-en h2 {
	margin-left: 20px;
}
.head-en p {
	margin-left: 30px;
}

.head-en h1,
.head-en h2,
.head-en p {
	position: relative;
	float: left;
	overflow: hidden;

}
	.head-en h1 span,
	.head-en h2 span,
	.head-en p span{
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		background: no-repeat left top;
	}
	.head-en h1 span {
		background-image: url(/st/share/pc/img/logo-willerx.png);
	}
	.head-en h2 span {
		background: url(/st/share/pc/img/tit-mypage.png) no-repeat 0 -40px;
	}
	.head-en p span {
		background-image: url(/st/3/en/pc/img/tit-en-lead.png);
	}


/* ----- Utility Nav ----- */
.utility {
	display: inline;
	float: right;
	padding-top: 6px;

	height: 30px;
}
.utility ul + ul {
	margin-left: 20px;
}


/* ----- SP + Global Nav ----- */
.sp2,
.gnav {
	margin-top: 10px;
}
.head-en.mypage .sp2,
.head-en.mypage .gnav {
	margin-top: 7px;
}
	.sp2 li,
	.gnav li {
		padding: 10px 0 0 24px;
	}
	/* ----- SP ----- */
	.sp2 {
		float: right;
		/* Mac版Chrome用 */
		display:table;
	}
		.sp2 li {
			text-indent: 25px;
			padding-left: 0;
			background: url(/st/share/pc/img/ico-cart.png) no-repeat left 8px;
		}

	/* ----- Global Nav ----- */
	.gnav {
		height: 39px;
		display: inline;
		float:left;
	}
	.gnav li {
		display: inline;
		border-right: 1px solid #d6d6d6;
		border-left: 1px solid #d6d6d6;
		padding-right: 24px;
		text-indent: 20px;
	}
	.gnav li + li {
		border-left: none;
	}
	/* Icon: HOME */
	.gnav li {
		background: url(/st/share/pc/img/ico-home-gray.png) no-repeat 20px center;
	}
	/* Icon: ▼ */
	.gnav li + li {
		background: url(/st/share/pc/img/ico-arrow-r-gray.png) no-repeat 22px center;
		text-indent: 10px;
	}
	
	.gnav a {
		width: auto;
		height: 23px;
		display: block;
		line-height:1.1em!important;/* for IE cut-text bug */
	}


		
/* ----- Dropdown Menu (Utility Nav + Sub Nav) ----- */
.guide,
.lang {
	position: relative;
	list-style: none;
}

/* ◎Utility Nav: Guide */

.guide {
	padding-bottom: 6px;
}
	.guide > li {
		padding: 6px 0 6px 13px;
		height: 19px;
	}
	.guide > li + li {
		margin-left: 12px;
	}

	/* FAQ */
	.guide .lnk-3 {
		background: url(/st/share/pc/img/ico-question.png) no-repeat left 20%;
	}
	/* Contact Us */
	.guide .lnk-4 {
		background: url(/st/share/pc/img/ico-arrow-r-gray.png) no-repeat 10px 30%;
		padding-left: 20px;
	}
	/* ▼アイコン */
	.guide .lnk-1:after,
	.guide .lnk-2:after {
		content: url(/st/share/pc/img/ico-arrow-d-gray.png);
		vertical-align: middle;
		margin-left: -3px;
	}

/* ◎Utility Nav: Lang */
.lang {
	background: #fafafa;
	color: #999;
	border: 1px solid #d6d6d6;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
	.lang > li {
		width: 75px;
		height: 18px;
		padding-top: 5px;
		text-align: center;
	}
	.lang > li + li {
		width: 70px;
		border-left: 1px solid #d6d6d6;
	}
	.lang div ul {
		padding: 5px;
	}
		.lang div li {
			padding: 5px;
			width: 80px;
			text-indent: 15px;
			text-align: left;
		}
			.lang div li a {
				display: block;
			}
		.lang div li {
			background: url(/st/share/pc/img/ico-arrow-r-pink.png) no-repeat 10px 50%;
		}
		.lang div li + li {
			border-top: 1px dotted #ccc;
		}

	
/* ----- Dropdown Menu用 Div ----- */
.lang li > div {
	width: 100px;
}

.lang li > div {
	position: absolute;
	left: 35px;
	top: 28px;
	display: none;
	background: #FFF;
	border: 1px solid #e94f6e;
	z-index: 1000;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

	/* Fukidashi Img */
	.lang li > span {
		position: absolute;
		left: 65px;
		top: 26px;
		display: none;
		background: transparent url(/st/share/pc/img/angle.png) no-repeat left top;
		width: 35px;
		height: 11px;
		border: none;
		z-index: 1001;
	}
	/* Fukidashi Img Position(.lang) */
		.lang li > span {
			left: 90px;
			top: 18px;
		}
		
		.lang li:hover > div,
		.lang li:hover > span {
			display: block;
		}
		
	
		
/* 1-4.Footer
--------------------------------------------------------- */
/* ----- Bus, Ferry Illust/ W Mark ----- */
.sct-foot {
	width: 960px;
	line-height: 0;
	margin: 10px auto 0;
	position: relative;
	text-align: center;
	clear: both;
}
	.sct-foot span {
		position: absolute;
		right: 17px;
		bottom: -41px;
		display: block;
		background: url(/st/share/pc/img/item-w-mark.png) no-repeat left bottom;
		width: 50px;
		height: 41px;
	}
	
/* ----- Footer ----- */
	.foot-en .w-group a {
		color: #666;
		text-decoration: none;
	}
	.foot-en .w-group a:hover {
		text-decoration: underline;
	}

.foot-en {
	background: #f5f5f5 url(/st/share/pc/img/bg-footer-line.png) repeat-x left top;
	padding-bottom: 30px;
	text-align: left;
}

	/* ----- Willer Group List ----- */
	.w-group {
		background: url(/st/share/pc/img/logo-w.png) no-repeat left top;
		padding: 0 0 0 66px;
		display: inline-block;
		height: 41px;
		font-size: 11px;
	}
		.w-group ul {
			padding-top: 2px;
		}
			.w-group li {
				float: left;
				padding-right: 1.1em;
				margin-bottom: 10px;
			}
			.w-group li + li {
				padding-left: 1.1em;
				border-left: 1px solid #666;
			}


/* 1-5.Hyper Text Module
--------------------------------------------------------- */
a {
	overflow: hidden;
	outline: none;
}
a:link,
a:visited {
	text-decoration: underline;
}
a:hover,
a:active {
	text-decoration: none;
}
.head-en a:link,
a:link {
	color: #333399;
}
.head-en a:visited,
a:visited {
	color: #800080;
}
	
.foot-en .w-group a {
	color: #666;
	text-decoration: none;
}
.foot-en .w-group a:hover {
	text-decoration: underline;
}


/*
header a:hover,
header a:active {
	text-decoration: none!important;
}
*/


/* 1-6.Common class
--------------------------------------------------------- */
hr.cl-both {
	clear: both;
	height: 0px;
	border: none;
	padding-top: 0;
	overflow: hidden;
	font-size: 0;
}
#to-top {
	position: fixed;
	width: 30px;
	height: 30px;
	background: url(/st/share/pc/img/ico-to-top.png) no-repeat right 50%;
	right: 20px;
	bottom: 20px;
}
	a#to-top {
		text-decoration: none;
		color: #fff;
		font-weight: normal;
		font-size: 12px;
		text-shadow: none;
		line-height: 140%;
	}


/* 1-7.IE Hack
--------------------------------------------------------- */
/* ----- ハックTest用 ----- */
.example { /background: orange; }/* IE6・IE7 */
.example2 { _background: green; }/* IE6 */

/* ----- IE7+IE6 ----- */
/* ----- Header ----- */
.guide li > div,
.menu li > div {
	/display: none;
	/visibility: hidden;
}
.gnav {
	/clear: both;
	/float: none;
	/display: inline-block;
}
.sp2 {
	/margin-top: -38px;
}


/* IE7のみ言語SELECT無 */
	.head-bus .utility,
	.head-ferry .utility,
	.head-tour .utility,
	.head-common .utility,
	.head-mypage .utility {
		/width: auto;
	}

/* IE8のみ　\9 */


/* ----- Footer ----- */
footer > div {
	/padding-top: 38px;
}

/* ----- Common Class ----- */
hr.cl-both {
	/visibility: hidden;
}


/* ----- IE6用 ----- */
body {
	_text-align: center;
	_zoom: 1;
}
header,
footer,
aside,
article {
	_text-align: left;
}

ol,
ul,
li {
	_zoom: normal;
}

hr.cl-both {
	_display: none;
}
/* ----- IE10用 ----- */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.head-en {
	}
}


/* 1-8 Social button En
--------------------------------------------------------- */
#social_btn {
	float: right;
	font-size: 11px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 325px;
}

ul#social_btn li#facebook_like {
	padding: 0 0 0 10px;
	width: 72px;
}

#social_btn li {
	float: right;
}
#social_btn li#twitter {
	margin-right: 22px;
	width: 90px;
	overflow:hidden;
}
#social_btn li#google_plusone {
	margin-right: 6px;
	width: 72px;
	overflow:hidden;
}

/* 1-9.Icons
--------------------------------------------------------- */
a.popup:after{
	content: url(/st/share/pc/img/ico-window.png);
	vertical-align: middle;
	margin: 0 2px;
}
.mark-arrow, .mark-disc, .mark-note {
    line-height: 1.4em;
}
h2.mark-arrow, h3.mark-arrow, h4.mark-arrow, h5.mark-arrow, p.mark-arrow, a.mark-arrow, span.mark-arrow, .mark-arrow li, .mark-arrow dd {
    background: url("/st/share/pc/img/ico-arrow-r-pink.png") no-repeat scroll 0.2em 0.45em rgba(0, 0, 0, 0);
    list-style: none outside none;
    padding-left: 15px;
}
.mark-arrow li + li, .mark-arrow dd, .mark-arrow dd + dt {
    margin-top: 0.5em;
}
a.mark-arrow {
    background-position: 0.2em 0.2em;
}
.mark-disc {
    margin: 1em 0;
}
.mark-disc li, .mark-disc dd {
    list-style: disc outside none;
    margin-left: 1.3em;
}
.mark-disc li + li, .mark-disc dd + dd {
    margin-top: 0.5em;
}
.mark-note {
    margin-left: 1em;
    text-indent: -1em;
}
/*
css version of absmiddle image vertical style
http://code2design.com/forums/another_way_to_do_absmiddle_with_css
*/
.absmid { 
	vertical-align: middle;
	margin-bottom: .25em;
}

/* 1-10.Titles
--------------------------------------------------------- */

/* ----- Title Lv.1 ～ Lv.5----- */
.tit-lv1,
.tit-lv2,
.tit-lv3,
.tit-lv4,
.tit-lv5 {
	line-height: 1.4em;
}
/* ----- Title Lv.1 ----- */
.tit-lv1 {/* height: +padding + border +box-shadow = 56px(1行時) */
	padding: 12px 7px 11px 16px;
	margin: 3px 3px 1.5em;
	color: #6c1044;
	font-size: 18px;
	font-weight: bold;
	background: #FCFAFA url(/st/share/pc/img/tit-lv1-angle.png) no-repeat 1px 1px;
	border: solid 1px #e0e0e0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 0 0 2px #eee, 0 0 0 3px #DEE3E9;
	-moz-box-shadow: 0 0 0 2px #eee, 0 0 0 3px #DEE3E9;
	-o-box-shadow: 0 0 0 2px #eee, 0 0 0 3px #DEE3E9;
	-ms-box-shadow: 0 0 0 2px #eee, 0 0 0 3px #DEE3E9;
	box-shadow: 0 0 0 2px #eee, 0 0 0 3px #DEE3E9;
}
	/* IE7/IE6用 */
	.tit-lv1 {
		/border: 4px solid #eee;
		/margin-left: 0;
		/margin-right: 0;
		/background-position: 5px 5px;
	}
	/* IE8用 */
	.tit-lv1 {
		border-width: 4px\9;
		border-style: solid\9;
		border-color: #eee\9;
		margin-top: 0\9;
		margin-left: 0\9;
		margin-right: 0\9;
	}
	/* IE9用 */
	.tit-lv1:not(:target) {
		border-width: 1px\9;
		border-style: solid\9;
		border-color: #e0e0e0\9;
		margin-top: 3px\9;
		margin-left: 3px\9;
		margin-right: 3px\9;
	}
	/* IE10用 */
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
		.tit-lv1 {
			border: solid 1px #e0e0e0;
			margin-left: 3px;
			margin-right: 3px;
		}
	}

	
/* ----- Title Lv.2 ----- */
.tit-lv2 {
	/* height: +padding +border =28px(1行時) */
	margin: 1.5em 0;
	padding: 4px 5px 7px 12px;
	border-bottom: 1px dotted #999;
	font-weight: bold;
	font-size: 15px;
	color: #6c1044;
	/*
	letter-spacing: 0.1em;
	*/
	background: url(/st/share/pc/img/tit-bar-pink.png) no-repeat left bottom;
}

/* ----- Title Lv.3～5 ----- */
.tit-lv3,
.tit-lv4,
.tit-lv5 {
	padding: 2px 6px 2px 16px;
	background: url(/st/share/pc/img/ico-square-pink.png) no-repeat left 6px;
	font-size: 13px;
	margin: 1.5em 0 0.5em;
	color: #6c1044;
}
.tit-lv3 {
	/* height: +padding =17px(1行時) */
	border-bottom: 1px dotted #999;
	height: auto;
}
.tit-lv4 {
	padding-bottom: 0;
}
.tit-lv5 {
	padding: 6px 6px 6px 24px;
	background-color: #f3f3f3;
	background-position: 8px 10px;
	font-weight: bold;
}