@charset "utf-8";
/* CSS Document */

* {
margin: 0;
padding:0;
line-height:1.8;
}

body{
color:#333;
font-size:13px;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
text-align:center;
border-top:4px solid #0052a3;
position:relative;
}

img{vertical-align:bottom;}

a{color: #445FAB;text-decoration:underline;}
a:visited{color:#445FAB;text-decoration:underline;}
a:hover{color: #039; text-decoration:underline;}


/* Color Stock 
---------------------------------------------------------------------------- */

.blue{color:#06c;}
.red{color:#F00;}
.orange{color:#F60;}
.brown{color:#960;}
.pink{color:#e47fcd;}
.green{color:#1fad70;}
.violet{color:#8e779f;}

/* etc
---------------------------------------------------------------------------- */

div {  
zoom: 1;/*for IE 5.5-7*/  
}  
div:after {/*for modern browser*/  
content: ".";  
clear: both;  
display: block;  
line-height: 0;  
height: 0;  
visibility: hidden;  
}  

.clearfix:after {
content:".";
height:0;
clear:both;
display: block;
visibility:hidden;
}

* html>body .clearfix {
display: inline-block; 
width: 100%;
}

* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}	

*:first-child+html .clearfix{/*for IE7*/
height:1%;
}

a img {border:none;}

br{letter-spacing: 0px;}
.clr{clear:both;}
.fs12{font-size:12px}
.fs11{font-size:11px}
.fs10{font-size:10px}

.mt5  {margin: 5px 0 0 0;}
.mt10 {margin: 10px 0 0 0;}
.mt20 {margin: 20px 0 0 0;}	
.ml5  {margin: 0 0 0 5px;}
.ml10 {margin: 0 0 0 10px;}	
.ml20 {margin: 0 0 0 20px;}		
.ml30 {margin: 0 0 0 30px;}		
.mb5  {margin-bottom: 5px;}	
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mtb5 {margin:5px 0;}	
.mtb10 {margin:10px 0;}
.mtb20 {margin:20px 0;}
.hidden {display:none;}


/*********************************************
共通
*********************************************/
html,body{ width: 100%; color:#036eb8!important; font-size:14px;}

#header_wrap {width: 100%; height: 80px; background: #fff url(img/common/header_bg.png) 50% 0 no-repeat; margin: 10px auto 0; background-size: contain; max-width: 1050px;}
	#header {max-width: 1050px; text-align: left; margin: 0 auto 0 auto; position: relative;}
		#header h1 {position: absolute; top: 10px; left: 0; width: 330px; height: 38px;}
		ul#headlink  {position:absolute; right:240px; top:22px; width:220px; height:20px; background: url(img/common/headlink.gif) no-repeat 0 0;}
			ul#headlink li {height:20px;list-style:none;float:left;}
			ul#headlink li a:link, ul#headlink li a:visited {width:110px; height: 20px; display:block; text-indent:-9999px; text-decoration:none; background: url(img/common/headlink.gif) no-repeat 0 0;}

ul#headlink li#btn_sm a:hover,ul#headlink li#btn_sm a .on{background-position:0px -20px;}

ul#headlink li#btn_inq a:link,ul#headlink li#btn_inq a:visited{background-position:-110px 0;}
ul#headlink li#btn_inq a:hover { background-position:-110px -20px;}



#page-top { position: fixed; bottom: 40px; right: 20px;font-size: 77%; z-index: 10;}
#page-top a { display: block; background-color:rgba(18,41,56, 0.7); color:#fff; text-decoration:none; font-weight:bold; font-size:11px; width:60px; height:60px; text-align:center; line-height:22px; border-radius:30px; padding-top:30px; box-sizing:border-box;}
#page-top a:before { content:'\25B2'; position:absolute; top:10px; left:0; width:100%; text-align:center; font-size:20px; }
#page-top a:hover { text-decoration: none;}

#container{ max-width:1050px; margin:auto;}

.main { position:relative; width:100%;}
.copy { position:absolute; width:473px; margin:auto; left:0; right:0; top:36%;}

.mt30 { margin-top:30px;}
.mt60 { margin-top:60px;}
.mb15 { margin-bottom:15px;}
.mb30 { margin-bottom:30px;}
.mb50 { margin-bottom:50px;}

.ls-1{letter-spacing:-1px;}

.fs20{ font-size:20px;}
.fs25{ font-size:25px;}

.fwn{ font-weight:normal;}

.ac { text-align:center!important;}

/*menu*/
.menu_list { font-size:1.4em; text-align:center; line-height:1.2;box-sizing:border-box; }
.menu_list > a {color:#004098; display:block; text-decoration:none; }
.menu_list > a:hover {background-color:#036eb8;color:#ffffff;}
.jp { line-height: 1;margin: 0 0 10px 0;font-weight:bold; letter-spacing: -1px;}
.en { font-family:Arial, Helvetica, sans-serif; font-size:0.7em; font-weight:normal; margin:0;}


#about .about,
#branch .branch,
#message .message,
#family .family,
#recruitment .recruitment{background-color:#036eb8;}

#about .about a,
#branch .branch a,
#message .message a,
#family .family a,
#recruitment .recruitment a{color:#ffffff;}

#about .about a:hover,
#branch .branch a:hover,
#message .message a:hover,
#family .family a:hover,
#recruitment .recruitment a:hover{color:#ffffff;}




/*footer*/
.footer { width:100%;  background-color:#036eb8; padding:30px 0; color:#ffffff;}
#copy{ margin:0;    text-align: center;}


/**トップページ
***********************************/
.swiper-container h2{position: absolute; z-index: 10; top:300px; left: 0; right: 0; margin: auto; max-width: 659px; max-height: 157px;}
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
		overflow: hidden;
    }
	#Info{ position:absolute; bottom:60px; max-width:95%; left:0; right:0; margin:auto; color:#FFFFFF;}
		#Info > div:last-child{ margin-right:0;}
		  #Info table{width: 100%; height: 80%; vertical-align: middle;}
			  #Info th.branchName{ width:30%; border-right:1px solid; font-size:16px; line-height:1.3; text-align:center;}
			  #Info td{ font-size:13px; text-align:left; padding: 0 5%; letter-spacing:-1px;}


/*下層メニュー*/
.sub_menu{ font-size:14px; font-weight:bold;}
.sub_menu li{ display:inline; float:left; }
.sub_menu a{color:#036eb8;filter:alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4; text-decoration:none; display:block;}
.sub_current a,
.sub_menu a:hover{color:#036eb8;filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;}

.sub_menu_icon{ background-color:#f8f6e7; width:100%;box-shadow:0px 5px 50px 5px rgba(0, 0, 0, 0.3); padding:23px 0 30px;}
.sub_menu_icon ul{ width:810px; margin:auto;}
.sub_menu_icon li{ display:inline; float:left; margin-right:50px; text-align:center;}
.sub_menu_icon a{ text-decoration:none; line-height:1;}
.sub_menu_icon a:hover{filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; color:#ff0000;}


/*下層タイトル*/
.title { background:url(img/branch/title_bg.jpg) repeat-x; width:100%;height:59px;}
h2 { color:#036eb8;line-height:59px; margin:0 auto; text-align:left;}

/*下層コンテンツボックス*/
.contents{width:900px;  text-align:left;}

/**会社を知る
***********************************/
/*代表メッセージ*/
.sign { font-size:1.3em; font-weight:bold; letter-spacing:1px;}

/*乗務員さんへ*/
#blueObi{ background-color:#036eb8; color:#FFFFFF; text-align:center; padding:0.1em 1em;font-size: 24px; font-weight: 600;margin: 35px auto;}

#ojtArea dl{border:5px solid #bae3f9; box-sizing:border-box;}
#ojtArea dl:last-child{border:none;}
	#ojtArea dl dt{font-size: 16px;border-bottom: 1px solid #bae3f9; padding-bottom: 4px; margin-right: 50px;}
	#ojtArea dl dt:before{font-size: 28px; font-weight: 600; background-color: #bae3f9; padding: 10px 17px; margin-right: 16px;}
		#ojtArea dl:nth-child(1) dt:before{content: "1";}
		#ojtArea dl:nth-child(2) dt:before{content: "2";}
		#ojtArea dl:nth-child(3) dt:before{content: "3";}
		#ojtArea dl:nth-child(4) dt:before{content: "4";}
		#ojtArea dl:nth-child(5) dt:before{content: "5";}
	#ojtArea dl dd{ padding:10px 20px;}
	#ojtArea dl:last-child dd{padding:0;}
		#ojtArea dl:last-child dd img{width:100%; height:auto; }
		#ojtArea ul{ list-style:none; margin:0 0 15px;}
		#ojtArea ol{ margin:0 0 15px 19px;}


/**ドライバー紹介
***********************************/
#staffList{width: 90%; margin: 80px auto 0;}
	#staffList a{float:left; display:block; text-decoration:none;}
	#staffList a:last-child{margin-right:0; }
			#staffList p{line-height: 1; font-weight:600;width: 100%; height: 100%; text-align: center;}
				#staffList span{font-weight:normal; font-size:80%;}

/*社員紹介ページ*/
	#borderTitle h3{ font-weight:normal; border-top:1px solid;border-bottom:1px solid; line-height:1.5; padding:18px 0;}
		.circle {float:right;}
			.circle p{font-size:18px;line-height: 1; font-weight:600; text-align: center;}
				.circle span{font-weight:normal;}

.article{ margin:50px auto; text-align:justify; text-justify:inter-ideograph;}
	.article h3{margin-bottom:20px;}
	.article .imgRight{ margin-left:30px; float:right;}
	.article .imgLeft{ margin-right:30px; float:left;}
	.article p{ margin-bottom:20px;}



/**営業所情報・採用情報
***********************************/
.bodyCopy{ font-size:24px; font-weight:600;}
#areaMap{ margin:30px auto 100px;    text-align: center;}

.textArea p { margin-bottom:1em;}
.textArea span{ display:inline-block;vertical-align: top;}
.ls-2 { letter-spacing:-2px;}
.contactBtn{ margin:30px auto 0;}
.contactBtn a{width: 100%; background-color: #036eb8; padding: 15px 0; color: #ffffff; display: block; text-align: center; font-size: 18px; text-decoration: none; border:1px solid #ffffff; box-sizing:border-box;line-height:19px;}
.contactBtn a:after{content: ""; background: url(img/common/arrow4.png) no-repeat; width: 12px; height: 13px; display: inline-block; vertical-align: baseline; background-size: contain; margin-left:1em;}
.contactBtn a:hover{ background-color: #ffffff; color: #036eb8; border:1px solid #036eb8;}


/**ご家族の皆様へ
***********************************/
#insuranceArea dt{ font-size:16px;}
#insuranceArea dd{ margin-bottom:16px;letter-spacing: -1px;}

#keepingArea > div{border:5px solid #bae3f9;padding:15px 15px 15px 0;}
#keepingArea > div:last-child{float:none; width:97%; margin:0; clear:both;}
	
	#keepingArea dt{ font-size:16px; border-bottom:1px solid;  padding-left:15px;}
	#keepingArea dd{ padding:15px 15px 0;}
.rightText th,.rightText td{ border-bottom:1px solid; border-collapse:collapse;}


/**エントリー
***********************************/
#form-tbl{ margin: 50px auto 0;}
	#form-tbl table{ border-collapse:collapse; table-layout:fixed;width: 100%;}
		#form-tbl th{ background-color:#bae3f9; vertical-align: top; text-align:left;}
		#form-tbl th,#form-tbl td{ padding:0.5em 1em; border:1px solid;word-break:keep-all;    box-sizing: border-box;}
		#form-tbl input[type="text"],
		#form-tbl textarea{ width:100%; padding:0.5em 0; line-height:1;}
		p.btn { margin:30px auto 0;}
			p.btn input.w100 { width: 100%;}
			p.btn input.w50 { width: 47.5%; display:inline-block; padding:0.5em 1%; box-sizing:content-box;}
			p.btn input { background: #ffffff; border: 1px solid; color: #036eb8; width: 100%; padding: 0.5em; font-size: 20px; font-weight: 600; letter-spacing: 5px; cursor:pointer;}

/*********************************************
768px以上
*********************************************/
@media only screen and (min-width: 769px) {
.sp_view{ display:none;}
/*menu*/
.nav { width:100%; margin:30px auto;}
.menu_list {border-right:1px solid #004098;  float:left; width:16.6%;}
.menu_list > a {padding:1.5em 0;}
.menu_list:first-child {border-left:1px solid #004098;}
.entryB {border-right:none;}
.entryB a{ background-color:#00a0e9; border:1px solid #00a0e9; color:#FFFFFF;width: 90%; margin: 0 0 0 auto;}
.entryB a:hover{ background-color:#ffffff; background-color:#e94900;border:1px solid #e94900;}

/*footer*/
.footer a { color:#ffffff; text-decoration:none;}
.footer a:hover {text-decoration: underline;}
.footer_menu {max-width:1050px; margin:0 auto 30px;}
.footer_menu_list { float:left; width:16.6%; text-align:left; padding-left:2em; box-sizing:border-box;}
.footer_menu_list dt { font-weight:bold; margin:0 0 1.5em 0; font-size:1.1em;}
.footer_menu_list dt span { display:block;}
.footer_menu_list dd {margin:0 0 0.5em 0; font-size:0.9em;}

		#Info > div{ width:238px; height:90px; float:left; margin-right:6px; background: url(img/top/top1-menu.png) no-repeat;background-size: contain;}
		  #Info table{margin: 4% auto 0;}

/*下層メニュー*/
.sub_menu{width: 100%; margin:0 auto 30px;padding: 0;}
.sub_menu li{margin-right:2em;}
.sub_menu li a:after{content: ""; background: url(img/common/arrow2.png) no-repeat; width: 15px; height: 15px; display: inline-block; vertical-align: middle; background-size: contain;}

/*下層タイトル*/
h2 {max-width:1050px;}

/*下層コンテンツボックス*/
.contents{ margin:50px auto 100px;}


/**会社を知る
***********************************/
/*代表メッセージ*/
.imgRight{ float:right;}

/*乗務員さんへ*/
#ojtArea dl{ width:31%; float:left; margin:0 3% 3% 0;}
#ojtArea dl:nth-child(3n){margin-right:0%;}

/*使用車種の紹介*/
.textArea2 { margin-left:530px;}


/**ドライバー紹介
***********************************/
#staffList{width: 90%; }
	#staffList a{margin-right:2%; width:32%;}
		#staffList div{border: 1px solid; border-radius: 60px; display: table; width: 90px; height: 90px; margin:30px auto; padding: 10px;}
			#staffList p{display: table-cell; vertical-align: middle; font-size:18px;}
				

/*社員紹介 スタッフ*/
	.article h3{ font-size:24px;}
	#borderTitle h3{ margin:30px 0; font-size:30px;float:left; width:70%;}
		.circle {border: 1px solid; border-radius: 60px; display: table; width: 90px; height: 90px; margin:30px auto; padding: 10px;}
			.circle p{display: table-cell; vertical-align: middle; width: 100%; height: 100%; }
				.circle span{font-size:80%;}


/**ご家族の皆様へ
***********************************/
#keepingArea > div{float: left; width: 46%; margin: 0 2% 2% 0; }
#keepingArea > div:nth-child(2n){margin-right: 0;}
	#keepingArea div > img,#keepingArea dd > img{ margin-left:1em;}
	#keepingArea dl{ float:left; width:56%;}
#keepingArea > div:nth-child(6n) dl{ width:95%;}

#keepingArea dl.leftText {float:left; width:48%; box-sizing:border-box; text-align:justify; text-justify:inter-ideograph;}
.rightText {float:right; width:48%; box-sizing:border-box;}


/**営業所情報・採用情報
***********************************/
.branchBox{width: 900px; margin:30px auto 100px;text-align: left;}
.imgLeft{ float:left;}
.textArea { margin-left:430px;}
.textArea span.subject{ width:120px;}


/**エントリー
***********************************/
		#form-tbl th{width:18%;}

}
/*********************************************
768px以下
*********************************************/
@media only screen and (max-width: 768px) {
img { max-width:100%; width:auto; height:auto;}
.pc_view{ display:none;}
/*header*/
#header_wrap {width: 100%;height: auto;background: none;box-sizing: border-box;padding: 1em;}
#header {width: 100%;}
#headlink{ display:none;}
#header h1 {   position: relative; top:0; left:0; height:auto;width: 220px;}
/*nav*/
.nav { display:none;}
.menu
{ width:25px; height:27px; top:8px; right:1em; position: absolute; cursor:pointer;border: 1px solid #004098; border-radius: 8px; padding: 0 8px 8px;}
.menu1
{ width:25px; height:3px; background-color:#004098; position:absolute; top:8px; } 
.menu2
{ width:25px; height:3px; background-color:#004098; position:absolute; top:16px; } 
.menu3
{ width:25px; height:3px; background-color:#004098; position:absolute; top:24px; } 
.menu1,.menu2,.menu3
{ transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out; /* opera */
  -moz-transition: all 0.5s ease-out; /* firefox */
  -webkit-transition: all 0.5s ease-out; /* chrome, safari */
  -ms-transition: all 0.5s ease-out; /* ie */ }
.menuclick1
{ top:16px;
  -moz-transform: rotate(405deg);
  -webkit-transform: rotate(405deg);
  -o-transform: rotate(405deg);
  -ms-transform: rotate(405deg);
  transform: rotate(405deg); }
.menuclick2
{ opacity:0;}
.menuclick3
{ top:16px;
  -moz-transform: rotate(-405deg);
  -webkit-transform: rotate(-405deg);
  -o-transform: rotate(-405deg);
  -ms-transform: rotate(-405deg);
  transform: rotate(-405deg); }
.menu_list { font-size:1.2em; border-bottom:1px solid #004098;}
.menu_list > a { padding:1em 0;}
.jp {margin: 0;fletter-spacing: 0px;}

.top { border-top: 1px solid;}

/**トップページ
***********************************/
.swiper-slide img{ max-width: inherit; width:auto; height:90vh;}
.swiper-container h2 { width:85vw; top: 4%;}
#Info {bottom: 50px; }
#Info > div {float: none;  margin: 3% auto; width:90%;height: auto; background-color: rgba(3, 110, 184, 0.64); border: 1px solid #fff; box-sizing: border-box;}
#Info > div:last-child{ margin:auto;}
#Info table{margin: 4% auto;}

/*container*/
#container {width:100%;}
.copy { position:absolute; width:50%;top:36%;}

/*footer*/
.footer {padding:10px 0;}

/*下層メニュー*/
.sub_menu{ margin-left:5%;}
.sub_menu li{ width:45%;margin-bottom:5%;}
.sub_menu li:nth-child(even){ margin-left:5%;}
.sub_menu li:nth-child(odd){ border-right:1px solid;}

.sub_menu_icon ul{ width:90%; margin:auto;}
.sub_menu_icon li{margin-right:5%; width:20%;}

/*下層タイトル*/
h2 { margin-left:5%;}

/*下層コンテンツボックス*/
.contents{width:90%; margin:30px auto; }
h3{line-height: 1.8;}
.text { line-height:2.2;}


/**会社を知る
***********************************/
/*代表メッセージ*/
.sign { font-size:1.3em; font-weight:bold; letter-spacing:1px;}
.imgRight{ display:block; margin:auto; padding-bottom:30px;}

/*乗務員さんへ*/
#ojtArea dl{ width:100%; margin:0 0 3% 0;}


/**ドライバー紹介
***********************************/
#staffList{width: 100%;}
	#staffList a{margin-right:5%; width:30%;}

/*社員紹介 スタッフ*/
	.article h3{ font-size:20px;}
	#borderTitle h3{ font-size:24px;margin:30px 0 0;}


/**ご家族の皆様へ
***********************************/
#keepingArea > div{float: none; width: 97%; margin: 0 0 2% 0;box-sizing: border-box;}

.rightText { padding: 15px 15px 0;}

/**営業所情報・採用情報
***********************************/
.branchBox{width: 90%; margin:30px auto 100px;text-align: left;}
.textArea span.subject { width: 100%; }
.imgLeft{ display:block; margin:auto; padding-bottom:30px;}



/**エントリー
***********************************/
		#form-tbl th,#form-tbl td{width:100%; display:block;}


}

/*********************************************
768px以下415px以上
*********************************************/
@media only screen and (max-width: 768px) and (min-width:415px) {
/**トップページ
***********************************/
.swiper-container h2 { top: 7%;}
.swiper-slide img{ max-width:100%; width:auto; height:auto;}
#Info {bottom:30px; }


/**会社を知る
***********************************/
/*乗務員さんへ*/
#ojtArea dl{ width:48%; margin:0 4% 3% 0; float:left;}
#ojtArea dl:nth-child(2n){ margin-right:0;}

/**ご家族の皆様へ
***********************************/
#keepingArea > div{float: left; width: 49%; margin: 0 2% 2% 0;}
#keepingArea > div:nth-child(2n){margin-right: 0;}
	#keepingArea div > img,#keepingArea dd > img{ margin:1em auto;}

.leftText {float:left; width:48%; box-sizing:border-box; text-align:justify; text-justify:inter-ideograph;}
.rightText {float:right; width:48%; box-sizing:border-box;}

/**ドライバー紹介
***********************************/
/*社員紹介 スタッフ*/
	.article h3{ font-size:24px;}
	.article .imgRight,
	.article .imgLeft{max-width:50%;}

	#borderTitle h3{font-size:30px;float:left; width:70%;}
		.circle {border: 1px solid; border-radius: 60px; display: table; width: 90px; height: 90px; margin:30px auto; padding: 10px;}
			.circle p{display: table-cell; vertical-align: middle; width: 100%; height: 100%; }
				.circle span{font-size:80%;}

}