@charset "UTF-8";

/* スマホのとき(全部共通) ---------------------------------*/

/* body ---------------------------*/
body {
  font-family:"メイリオ","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS　ゴシック","MS Gothic",sans-selif;
  font-size:14px;
  line-height:1.8em;
}


h1 {
    font-size:10px;
}

h2 {
  box-sizing:border-box;
  margin:0 0 15px 0;
  padding:5px 0 2px 25px;
  position: relative;
  width:100%;
  border:solid 1px #cdcdcd;
  font-size:14px;
  color:#333;
}

h2:before {
  content:" ";
  position: absolute;
  top:2px;
  left:2px;
  width:100%;
  height:100%;
  background:url("../image/h2_before.gif") 0 0 no-repeat;

}

h2:after {
  content:" ";
  position: absolute;
  width:100%;
  border-top:3px solid #202f55;
  margin-top:1px;
  top: 100%;
  left:0;
}


main h3 {
  clear:both;
  box-sizing:border-box;
  margin:0 0 5px 0;
  padding:0 0 0 20px;
  position: relative;
  width:100%;
  border-bottom:solid 1px #202f55;
  font-size:14px;
  color:#333;
}

main h3:before {
  content:" ";
  position: absolute;
  top:3px;
  left:0;
  width:100%;
  height:100%;
  background:url("../image/h3_before.gif") 0 0 no-repeat;

}

h3.news {
  margin-bottom:5px;
  padding:0 0 0px 5px;
  border-bottom:1px solid #dfdfdf;
  font-size:14px;
  font-weight:bold;
  color:#333;
}

h3.news:after {
  content:"-news-";
  margin-left:10px;
  font-size:10px;
  color:#003f8e;
  font-weight:bold;
}

h3.news span {
  margin-right:10px;
  float:right;
  font-size:10px;
}

h3.news span a {
  color:#f39800;
  position:relative;
}

h3.news span a:before {
  content:" ";
  display:block;
  position:absolute;
  top:20%;
  right:27px;
  width:0;
  height:0;
  border:5px solid transparent;
  border-left:5px solid #f39800;
}


h3.news span a:hover {
  color:#ffdc00;
}

h3.news span a:hover:before {
  border-left:5px solid #ffdc00;

}


/* ヘッダー -------------------------------*/
.head {
  margin-top:-8px;
}

#header img.logo {
  float:left;
}


#header p.head_address {
  display:none;
  margin-top:-10px;
  float:right;
  font-size:12px;
  line-height:1.2em;
}


/* グローバルメニュー -------------------------*/
nav ul.menu {
  clear:both;
  display:none;
  width:100%;
}


nav ul.menu li {
  display:block;
  width:100%;
  border-bottom:1px solid #dfdfdf;
}

 #toggle {
  float:right;
  margin-top:-40px;
  padding:8px 0 8px 0;
  position:relative;
  width:50px;
  background-color:#202f55;
  text-align:left;
}

 #toggle a {
  padding:2px 0 2px 40px;
  display:block;
  position:relative;
  color:#fff;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  text-indent:100%;
  overflow:hidden;
  white-space:nowrap;
}


 #toggle:before {
  content:"";
  position:absolute;
  top:50%;
  left:10px;
  width:20px;
  height:20px;
  margin-top:-10px;
  background-color:#fff;
}

 #toggle a:before, nav #toggle a:after {
  content:"";
  position:absolute;
  top:50%;
  left:10px;
  width:20px;
  height:4px;
  background-color:#202f55;
}

#toggle a:before {
  margin-top:-6px;
}

#toggle a:after {
  margin-top:2px;
}




/* リンク設定 -----------------------*/
nav ul.menu li a {
  padding-top:10px;
  position:relative;
  display:block;
  height:50px;
  text-decoration:none;
  color:#000;
  text-align:center;
}

nav ul.menu li a:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  right:2px;
  bottom:3px;
  border:5px solid transparent;
  border-right: 5px solid #202f55;
  border-bottom: 5px solid #202f55;
}

nav ul.menu li a span {
  margin-top:-10px;
  display:block;
  font-size:10px;
  color:#003f8e;
  font-weight:bold;
}

/* リンク オン時  ------------*/

nav ul.menu li a:hover {
  background-color:#202f55;
  color:#fff;
}

nav ul.menu li a:hover:after {
  color:#fff;
  border:none;
}

nav ul.menu li a:hover span {
  color:#fff;
}

nav ul.menu li a,
nav ul.menu li a:after,
nav ul.menu li a span {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}


/* メイン全体 --------------------------------*/

main section {
  clear:both;
  overflow:hidden;
  margin-bottom:10px;
}


main section p,main section img,main section dl {
   margin:0 10px 0 10px;
}




/* トップページ -------------------------*/
#index_img img {
  display:block;
  margin:0 auto;
  width:100%;
  height:auto;
  max-width:960px;
}


main section img.name {
  float:right;
}


main section ul.index_menu {
  padding:10px 0 0 0;
  width:100%;
}



main section ul.index_menu li a{
  padding:5% 0 5% 25%;
  display:block;
  position:relative;
  box-sizing:border-box;
  border-top:1px solid #dfdfdf;
  color:#111;
  font-size:16px;
  height:60px;
  text-decoration:none;
}

main section ul.index_menu li:last-child a{
  border-bottom:1px solid #dfdfdf;
}

main section ul.index_menu li a:before{
  content:"";
  position:absolute;
  top:10%;
  left:5%;
}

main section ul.index_menu li.about a:before{
  content:url("../image/menu_about_s.jpg");
}
main section ul.index_menu li.charter a:before{
  content:url("../image/menu_charter_s.jpg");
}
main section ul.index_menu li.wheel a:before{
  content:url("../image/menu_wheel_s.jpg");
}
main section ul.index_menu li.contact a:before{
  content:url("../image/menu_contact_s.jpg");
}
main section ul.index_menu li.chemical a:before{
  content:url("../image/menu_chemical_s.jpg");
}


/* 保有車両 ------------------------------*/

main section dl.wheel {
  margin-bottom:10px;
  padding:5px;
  border:1px solid #dfdfdf;
  float:left;
  max-width:250px;
}

main section dl.wheel dd img{
  margin:0;
  width:100%;
}



/* 会社概要 --------------------------------*/

main section table.company {
  width:100%;
}

main section table.company tr {
  border-bottom:1px dotted #dfdfdf;
}

main section table.company th {
  width:110px;
  vertical-align: top;
}

main section table.company td {
  margin-left:10px;
}

/* 採用情報 ----------------------------------*/

main section p.recruit {
  padding:2px;
  border:1px solid #ccc;
}


main section p.recruit span{
  display:block;
  padding:3px;
  background-color:#a7a7a7;
  color:#fff;
}



/* 東進って？ -------------------------------*/

main section table.staff {
  margin-bottom:50px;
  width:100%;
  height:100%;
}
main section table.staff tr {
  border-bottom:1px dotted #aaa;
}
main section table.staff td.img{
  padding:2px;
  width:100px;
}


main section dl.about_img {
  margin-bottom:10px;
  padding:5px;
  border:1px solid #dfdfdf;
  float:left;
  max-width:250px;
}

main section dl.about_img dd img{
  margin:0;
  width:100%;
}

/* チャーター便 -------------------------------*/

.charter {
  max-width:570px;
}

/* 化学品 -------------------------------*/
.chemical_imgs {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 10px;
}

.chemical_imgs li {
	flex-basis: 48%;
	margin-bottom: 10px;
}
.chemical_imgs li img {
	max-width: 100%;
	margin: 0;
}
/* スライダー -------------------------------*/
#index_img .inner{
	max-width: 960px;
	margin: 0 auto;
}
.bx-controls-direction {
	display: none;
}
.bx-wrapper {
    border: none;
    box-shadow: none;
    background-color: transparent;
	margin-left: auto;
	margin-right: auto;
}

/* 新着情報 -------------------------------*/

main dl.news {
  font-size:12px;
}

main dl.news dt {
  margin:0 0 0 10px;
  font-weight:bold;
}

main dl.news dd {
  margin:0 0 10px 10px;
  border-bottom:1px dotted #444;
} 


/* サイド ------------------------------------*/

aside dl.news {
  font-size:12px;
}

aside dl.news dt {
  margin:0 0 5px 10px;
  padding:1px 2px 1px 5px;
  width:80px;
  background-color:#202f55;
  color:#fff;
}

aside dl.news dd {
  margin:0 0 10px 10px;
  border-bottom:1px dotted #444;
} 

aside .banner_box {
  text-align:center;
}

aside img.banner {
  margin: 0 auto;
}



/* フッター ---------------------------------*/

#footerback footer p.cr {
  text-align:center;
  font-size:10px;
}

#footerback footer p.foot_address {
  margin-left:10px;
}






@media screen and (min-width:480px){  /*タブレット用 --*/ 

/* header ------------*/
#header p.head_address {
  display:inline;
}

/* menu ----------------------*/
 #toggle {
  display:none;
}

nav ul.menu {
  display:table;
  table-layout:flex;
  width:100%;
  max-width:960px;
  box-sizing:border-box;
}

nav ul.menu li {
  display:table-cell;
  width:16%;
  border-left:1px solid #dfdfdf;
}

nav ul.menu li.last{
  border-right:1px solid #dfdfdf;
}



/* index_menu -----*/

main section ul.index_menu {
  width:100%;
}

main section ul.index_menu li {
  margin-bottom:10px;
  padding:5px;
  box-sizing:border-box;
  float:left;
  width:48%;
  height:100px;
  border:1px solid #dfdfdf;
}

main section ul.index_menu li:nth-child(2n) {
  margin-left:4%;
}

main section ul.index_menu li a {
  display:block;
  position:relative;
  height:100%;
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-indent:100%;
}

ul.index_menu li.about a {
  background:url(../image/menu_about.jpg) no-repeat 0 0 ;
}
ul.index_menu li.charter a {
  background:url(../image/menu_charter.jpg) no-repeat 0 0;
}
ul.index_menu li.wheel a {
  background:url(../image/menu_wheel.jpg) no-repeat 0 0;
}
ul.index_menu li.contact a {
  background:url(../image/menu_contact.jpg) no-repeat 0 0;
}
ul.index_menu li.chemical a {
  background:url(../image/menu_chemical.jpg) no-repeat 0 0;
}

ul.index_menu li a:after {
  content:"";
  box-sizing:border-box;
  text-overflow:ellipsis;
  text-indent:0%;
  position:absolute;
  top:67%;
  left:0;
  right:0;
  padding:3px 3px 0 0 ;
  height:29px;
  width:100%;
  background-color:rgba(0,0,0,0.7);
  text-align:right;
  color:#fff;
  font-size:13px;
  

}

main section ul.index_menu li.about a:before{
  content:"";
}
main section ul.index_menu li.charter a:before{
  content:"";
}
main section ul.index_menu li.wheel a:before{
  content:"";
}
main section ul.index_menu li.contact a:before{
  content:"";
}


main section ul.index_menu li a:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
}
/* 化学品 -------------------------------*/
.chemical_imgs li {
	flex-basis: 32%;
	margin-bottom: 10px;
}

/* スライダー -------------------------------*/
.bx-controls-direction {
	display: block;
}


main section ul.index_menu li.about a:after {
  content:"東進物流てどんな会社？";
}
main section ul.index_menu li.charter a:after {
  content:"スペースチャーター便";
}
main section ul.index_menu li.wheel a:after {
  content:"保有車両";
}
main section ul.index_menu li.contact a:after {
  content:"荷主様・メーカー様のご依頼も大歓迎！";
}
main section ul.index_menu li.chemical a:after {
  content:"化学品";
}

/* サイド ------------------------------------*/
aside img.banner {
  margin: 5px 0 10px 10px;
}


aside .banner_box {
  float:left;
}



} /* タブレットここまで ------*/





@media screen and (min-width:768px) {  /*PC用 --*/


}


@media screen and (min-width:960px) {  /* 960px 以上のとき(PC) --*/

}