@charset "utf-8";
/* CSS Document */
/* common ---------------------------------------- */
div#co {
    margin: -100px 0 0 0;
    padding: 100px 0 0 0;
}
#content{
	margin: 80px 0 0;
}
#content h2{
	font-size: 3.0rem;
	font-size: 30px;
	text-align: center;
}
#content h2 span{
	display: block;
	font-size: 1.4rem;
	font-size: 14px;
	padding: 0;
}
#content h2 hr{
	width: 32px;
    border-top: solid 3px #AB161A;
    margin: 8px auto 32px;
}
.h2P{
	text-align: center;
	line-height: 30px;
	margin: 0 0 24px;
}
/*
.mLBR{
	margin: 0 4% 80px;
}
*/
.W860{
	width: 860px;
	margin: auto;
}
.indent{
	text-indent: -1em;
	padding-left: 1em;
	display: block;
}
/* mainImg ---------------------------------------- */
#mainImg{
	margin: 80px 0 0;
	position: relative;
}
/*
#mainImg .maskImg {
	background: url(../img/maskimg.png);
	width: 100%;
	position: absolute;
	top: 0;
	padding: 24.55%;
}
#mainImg .meinText{
	width: 100%;
	color: #fff;
	font-size: 2.4rem;
	font-size: 24px;
	line-height: 48px;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
*/
/*
#mainImg{
	background: url(../img/mainimg.jpg) center right no-repeat;
	background-size: cover;
	text-align: center;
}
#mainImg .maskImg {
	 background: url(../img/maskimg.png);
	 width: 100%;
	 height: 100%;
	 padding: 300px 0;
}
#mainImg .meinText{
	color: #fff;
	font-size: 2.4rem;
	font-size: 24px;
	line-height: 48px;
	font-weight: bold;
}
*/

#mainImg .TopImg{
	background: url(../img/mainimg.jpg)no-repeat;
    background-size: cover;
    background-position: 50% 90%;
    height: 0;
    padding-top: 55%;
    position: relative;
}
#mainImg .TopImg:before{
    z-index: 0;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: rgba(250, 219, 218, 0.3);*/
}
#mainImg .meinText{
	color: #fff;
	font-size: 2.4rem;
	font-size: 24px;
	line-height: 48px;
	font-weight: bold;
	padding: 0 16px;
	position: absolute;
	top: 40%;
	left: 0;
	right:0;
	margin: auto;
	text-align: center;
	z-index: 100;
}
#mainImg  .TopImg h1 {
    font-family: 'Anton', sans-serif;
    font-size: 5vw;
    line-height: 100%;
    text-align: center;
	position: absolute;
    top: 60%;
    right: 10%;
    color: #fff;
}
#mainImg  .TopImg h1 span{
	display: block;
	font-size: 1.4vw;
	font-weight: bold;
}



.top .text{
	margin: 120px 0 0;
}
.top .text h2,.top .text p{
	text-align: center;
	line-height: 32px;
}


/* SERVICE ---------------------------------------- */
#service {
    padding: 60px 0;
    margin: -60px 4%;
}
.svP{
	text-align: center;
	line-height: 30px;
	margin: 0 0 60px;
}
.serviceImg{
	width: 100%;
	max-width: 1800px;
	margin: auto;
}
.serviceImg li{
	width: 30%;
	display: inline-block;
	vertical-align: top;
}
.imgLR{
	margin: 0 4%;
}
.serviceImg p{
	text-align: center;
	padding: 16px 0 40px;
}
/* VEHICLE ---------------------------------------- */
#vehicle {
    padding: 60px 0;
    margin: -60px 4%;
}
.busList{
	max-width: 1200px;
	margin: 0 auto 100px;
}
.busList img.bus {
	border: 1px solid #f9f9f9;
}
.busList h3{
	text-align: center;
	margin: 60px 0;
	font-size: 21px;
	font-weight: bold;
}
.busDetails{
	width: 50%;
	display: inline-block;
	vertical-align: top;
	padding: 0 16px 0 0;
}
.busDetails dt{
	float: left;
    clear: left;
    width: 80px;
    margin: 0 0 20px 0;
    font-weight: bold;
}
.busDetails dd{
	margin: 0 0 20px 100px;
    padding: 0 0 0 15px;
    border-left: 1px solid #cecece;
    line-height: 30px;
}
.seatingchart{
	display: inline-block;
	width: 49%;
	vertical-align: top;
	padding: 0 0 0 16px;
}
.lightboxList{
	margin: 40px 0;
}
.lightboxList li{
	width: 150px;
	height: 150px;
	margin: 10px;
	border: 1px solid #f9f9f9;
	float: left;
}
.authorization{
	width: 730px;
	margin: 0 auto 40px;
	border: solid 1px #03690F;
	padding: 16px;
	line-height: 40px;
}
.authorization span{
	color: #03690F;
}
/* contactArea ---------------------------------------- */ 
.contactArea{
	background: #AB161A;
	color: #fff;
	text-align: center; 
	padding: 100px 0;
	margin: 60px 0 80px;
}
.contactArea h3{
	font-size: 24px;
	margin: 0 0 40px;
}
.contactArea p{
	line-height: 40px;
}
.MailTel{
	margin: 60px 0 0; 
}
.MailTel a{
	display: block;
}
.contactArea .MailTel .Mail,
.contactArea .MailTel .Tel{
	display: inline-block;
	padding: 0 80px;
	font-size: 21px;
	letter-spacing: 1px;
	position: relative;
}
.contactArea .MailTel .Mail a:before,
.contactArea .MailTel .Tel a:before{
	position: absolute;
	left: 50px;
    top: 3px;	
}
.contactArea .MailTel .Mail a:before{
	content: url("../img/mail.svg");
}
.contactArea .MailTel .Tel a:before{
	content: url("../img/telwhite.svg");
 }
.contactArea .MailTel .Mail a,.contactArea .MailTel .Tel a{
	color: #fff;
	text-decoration: none;
}
/* flow ---------------------------------------- */ 
#flow {
    padding: 60px 0;
    margin: -60px 4%;
}
.floeList{
    margin: 0 auto 24px;    
}
.privacy-area{
    width: 820px;
	margin: 0 auto 120px;
}
.floeList h3{
    border-bottom: solid 2px #999;
    padding: 16px;
    margin: 0 0 24px;
    font-weight: bold;
}
.floeList b{
    font-size: 40px;
    font-style: italic;
    color: #AB161A;
    font-family: 'Varela Round', sans-serif;
}
.floeList h3 span{
	font-size: 1.8rem;	
    font-size: 18px;
    padding: 0 0 0 8px;
}
.floeList p{
	line-height: 30px;
}
.floeList span{
	font-size: 1.4rem;		
	font-size: 14px;
}
.flowPdf{
	margin: 16px 0;
}
.flowPdf a.pdf1{
	width: 240px;
	background: #AB161A;	
	color: #fff;
	margin: 0 16px 0 4px;
}
.flowPdf a.pdf2{
	width: 120px;
	border: solid 1px #AB161A;	
	color: #AB161A;
}
.flowPdf a.pdf1,.flowPdf a.pdf2{
	text-align: center;
	padding: 8px; 
	font-size: 1.2rem;
	font-size: 12px;
	font-weight: bold;
	display: inline-block;
	border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}
/* terminal ---------------------------------------- */ 
#terminal {
    padding: 60px 0;
    margin: -60px 4%;
}
.osaka{
    margin: 0 auto 24px;
}
.osaka h3{
    border-bottom: solid 2px #999;	
    padding: 16px;
    margin: 0 auto 24px;
    font-weight: bold;	
}
.osaka .access{
	width: 50%;
	float: left;
	padding: 0 0 0 14px;
}
.osaka .access li{
	line-height: 32px;
	margin: 0 0 8px;
}
.osaka .map{
	width: 50%;
	float:right;
	height: 300px;
}
/* contact ---------------------------------------- */ 
#contact {
    padding: 80px 0;
    margin: -80px 4%;
}
.contactBox a.tel{
	width: 200px;
	margin: 0 auto 24px;
	border: solid 1px #000; 
	text-align: center;
    padding: 12px 0 12px 18px;
    font-size: 1.8rem;
    font-size: 18px;
    font-weight: bold;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    position: relative;
}
.contactBox a.tel:before{
	content: url("../img/tel.svg");
	position: absolute;
	left: 18px;
	top: 14px;
}
/* footer ---------------------------------------- */ 
.footerNav{
	margin: 60px auto 16px;
	text-align: center;
	display: table;
}
.footerNav li{
  	display: table-cell;
	padding: 0 18px;
}
.footerNav li +li{
    border-left: 1px solid #000;
}
@media screen and (max-width:767px){
/* common ---------------------------------------- */  
	.h2P{
		text-align: left;
	}
	.SpBr{
		display: none;
	}
	.W860{
		width: 100%;
		margin: auto;
	}
/* mainImg ---------------------------------------- */  
	#mainImg{
		margin: 72px 0 0;
	}
/*
	#mainImg{
		height: 300px;
		margin: 60px 0 0;
	}
	#mainImg .maskImg {
		height: 300px;
		padding: 100px 0 0;
	}

	#mainImg .meinText{
		font-size: 1.8rem;
		font-size: 18px;
		line-height: 30px;
	}

	*/

	.top .text{
		margin: 60px 0 0;
		padding: 0 4%;
	}
	

/* SERVICE ---------------------------------------- */
	.serviceImg li{
		width: 100%;
		display: inherit;
	}
	.imgLR{
		margin: 0;
	}

	.svP{
		text-align: left;
	}
/* VEHICLE ---------------------------------------- */
	.busDetails{
		width: 100%;
		display: inherit;
		padding: 0 0 24px ;
	}
	.busList h3{
		margin: 40px 0;
	}	
	.seatingchart{
		display: inherit;
		width: 100%;
		padding: 0;
	}
	.lightboxList{
	    width: 340px;
	    margin: 40px auto;
	}
	.authorization{
		width: 100%;
		line-height: 30px;
	}
	.busDetails dt{
	    float:none;
	    width:auto;
	    display: block;
	    margin:0;
	    border-bottom:1px solid #cecece;
	 	padding: 0 0 4px;
	 }
	.busDetails dd{
	    margin:0 auto;
	    padding:10px 0 20px;
	    border-left:0;
	    display: block;
	 }
/* contactArea ---------------------------------------- */ 
	.contactArea{
		padding: 100px 4%;
	}
	.contactArea h3{
		font-size: 2.1rem;		
		font-size: 21px;
	}
	.contactArea p{
		text-align: left;
		line-height: 30px;
	}
	.MailTel{
		margin: 60px auto 0; 
		width: 160px;
	}
	.contactArea .MailTel .Mail{
		margin: 0 0 16px;
 	}
	.contactArea .MailTel .Mail,
	.contactArea .MailTel .Tel{
		display: inherit;
		padding: 0 ;
		font-size: 2.1rem;			
		font-size: 21px;
		letter-spacing: 1px;
		position: relative;
	}
	.contactArea .MailTel .Mail a:before,
	.contactArea .MailTel .Tel a:before{
		position: absolute;
		left: -30px;
	    top: 3px;	
	}
/* flow ---------------------------------------- */ 
	.flowPdf a.pdf1{
		margin: 0 0 16px 4px;
	}
	.flowPdf a.pdf2{
		margin: 0 0 0 4px;
	}
	.flowPdf a.pdf1,.flowPdf a.pdf2{
		display: inherit;
	}
/* terminal ---------------------------------------- */ 

	.osaka .access{
		padding: 0 0 24px 14px;
	}
	.osaka .access,.osaka .map{
		width: 100%;
		float: none;
	}
/* footer ---------------------------------------- */ 
	.footerNav{
		display: block;
		border-top: solid 1px #000;
	}
	.footerNav li{
		text-align: left;
	  	display: inherit;
		padding: 20px 8px;
		border-bottom: solid 1px #000;
		position: relative;
	}
	.footerNav li:after{
		content: url("../img/chevron-small-right.svg");
		position: absolute;
		right: 10px;
		top: 24px;
	}	
	.footerNav li +li{
	    border-left: none;
	}
}
@media screen and (max-width:375px){
	.top .text h2,.top .text p{
	    text-align: left;
	}
}
@media screen and (max-width:320px){
	.lightboxList li{
		width: 140px;
		height: 140px;
		margin: 3px;
	}
}