@charset "utf-8";
/* -----------------------------------------------
 index CSS
-------------------------------------------------- */
/* MV */
.mv {
  position: relative;
  width: 100%;
  z-index: 3;
}
.mvtxt {
  position: absolute;
  width: 35%;
  top: 40%;
  right: 5%;
  z-index: 10
}
.mvtxt img {
  width: 100%;
  margin-bottom: 20px;
  filter: drop-shadow(2px 2px 4px rgba(13, 171, 209, 1.00));
}
.ball {
  position: absolute;
  width: 35%;
  top: 43%;
  right: 4%;
  z-index: 10
}
.ball img {
  width: 25%;
}
.mvtxt2 {
  position: absolute;
  width: 45%;
  top: 60%;
  right: 5%;
  z-index: 10;
  color: white;
  text-align: right;
  line-height: 2;
  font-size: 15px;
  font-weight: 600
}
.cover-build {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1
}
.icon-track, .icon-bus, .icon-plane, .icon-loader, .icon-forklift {
  display: block;
  position: absolute;
}
.icon-track {
  top: 28%;
  left: 49%;
  width: 4%
}
.icon-bus {
  top: 32%;
  left: 20%;
  width: 4%
}
.icon-plane {
  top: 10%;
  left: 70%;
  width: 4%
}
.icon-loader {
  top: 46%;
  left: 18%;
  width: 4.3%;
}
.icon-forklift {
  top: 25%;
  left: 66%;
  width: 3.5%
}
.icon-track a:hover, .icon-bus a:hover, .icon-plane a:hover, .icon-loader a:hover, .icon-forklift a:hover {
  opacity: 1;
  transition: 1s all;
}
.icon-track a:hover .move4, .icon-plane a:hover .move3, .icon-loader a:hover .move1, .icon-forklift a:hover .move2 {
  animation-play-state: paused;
  margin-top: -5px
}
.icon-bus a:hover .bus {
  margin-top: -5px
}
.move1 {
  animation: move1 2s linear infinite alternate;
}
@keyframes move1 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(10px, -10px);
  }
}
.move2 {
  animation: move2 3s linear infinite alternate;
}
@keyframes move2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-30px, -30px);
  }
}
.move3 {
  animation: move3 18s linear infinite;
}
@keyframes move3 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(800px, 700px);
  }
}
.move4 {
  animation: move4 20s linear infinite;
}
@keyframes move4 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-800px, 480px);
  }
}
/*見出し*/
#index h2 {
  font-family: var(--mont);
  font-weight: 500;
  font-style: normal;
  line-height: 1.4;
  text-align: left;
  margin-bottom: 1em;
  font-size: 46px !important;
}
#index h2 span {
  font-family: var(--note);
  font-size: 16px;
  font-weight: 400;
  display: block;
  line-height: 1;
  letter-spacing: 2px
}
/*お知らせ（サムネイル付）*/
#news {
  position: relative;
  width: 100%;
  left: 0;
  right: 0;
  margin: -170px auto 100px;
  z-index: 100;
  display: flex;
  flex-wrap: wrap
}
.title {
  position: relative;
  width: 25%
}
#news .title .more-button.blue {
  position: absolute;
  top: 120px;
  left: -10px
}
.responsive {
  position: relative;
  top: 0;
  right: 0;
  width: 75%;
  overflow: hidden;
}
.responsive ul li {
  width: 32%;
  margin: 10px;
  overflow: hidden;
  -webkit-transition: .1s all ease;
  -o-transition: .1s all ease;
  transition: .1s all ease;
  position: relative;
  top: 0;
}
.responsive ul li:hover {
  /*  -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
*/ top: -5px;
}
.responsive ul li div {
  display: block;
  overflow: hidden;
  padding: 1.5em;
}
.responsive ul a {
  color: #000;
  text-decoration: none;
  font-size: 16px;
}
.responsive ul li a:hover {
  color: #40403F;
}
.responsive ul li span.date {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #939393;
  margin-bottom: .5em
}
.responsive ul li span.photo {
  display: block;
  text-align: center;
  z-index: 100;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}
.responsive ul li img {
  width: 100%;
  border-radius: 10px;
  transition: 0.3s;
}
.responsive ul li:hover img {
  transform: scale(1.15);
}
.responsive ul li span.date.new {
  background-image: url(../images/icon_new.svg);
  background-size: 43px 30px;
  background-repeat: no-repeat;
  background-position: left 8em top -3px;
}
.responsive ul li span.title {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 2;
}
/*---サムネイル写真のリサイズ---*/
.resize {
  object-fit: cover;
  width: 100%;
  height: 220px;
  object-position: 50% 0; /* 他のブラウザ用(＝通常の指定) */
  font-family: 'object-fit: cover; object-position: 50% 0;' /* IE・Edge対応 */
}
/*会社概要*/
#index-company {
  background-image: url("../images/index_bg1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center
}
#index-company p {
  text-align: center;
  line-height: 2.4
}
#index-company p.more-button {
  text-align: center;
  line-height: 2
}
.company-p01, .company-p02, .company-p03, .company-p04 {
  position: absolute;
  border-radius: 10px
}
.company-p01 {
  top: -5%;
  left: -20px;
  width: 25%;
}
.company-p02 {
  bottom: 10%;
  left: 13%;
  width: 15%;
  box-shadow: -10px 10px 0px 0px rgba(122, 177, 191, .3);
}
.company-p03 {
  top: 0;
  right: 5%;
  width: 15%;
  box-shadow: 10px -10px 0px 0px rgba(122, 177, 191, .2);
}
.company-p04 {
  bottom: 5%;
  right: -20px;
  width: 30%;
}
#future {
  background-image: url("../images/index_bg2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center
}
#future h3 {
  line-height: 1
}
#future h3 span {
  color: var(--blue);
  font-size: 60%;
  font-family: var(--mont);
  font-weight: 400
}
#future .future-icon {
  text-align: center;
  width: 90px;
  margin: 0 auto 30px auto
}
#future .future-icon img {
  height: 90px;
}

.overseas {
  position: relative;
  width: 100%;
  padding: 100px 0;
  top: 0;
  left: 0;
  z-index: 2;
  background-image: url("../images/index_bg3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  color: white !important;
  background-position: center center
}
.overseas::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0,54,114,1.00);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .5;
  z-index: -1;
}
.overseas { /*parallax*/
  z-index: 1;
  background-attachment: fixed;
  overflow: hidden;
}
.overseas h3 {
  color: white;
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
.overseas h3 span {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
  font-family: var(--mont);
  font-weight: 300;
  font-size: 60%;
  letter-spacing: 2px;
  margin-left: 1em
}
.overseas h3 span::before {
  border-top: 1px solid white; /* 横線の色 */
  content: "";
  height: 1px; /* 横線の高さ */
  width: 50px; /* 横線の長さ */
  margin-right: 1em
}
@media screen and (max-width: 768px) {
.overseas { /*parallax*/
    background-attachment: scroll;
  }
}






.box-red {
  position: relative;
  background-color: rgba(239, 0, 29, 1.00);
  border-radius: 30px;
  padding: 5% 5% 0;
  margin: 15% auto 10%;
}
#recruit .box-red h2 {
  position: absolute;
  top: -30%;
  font-size: 5em !important;
  font-weight: 400 !important;
  color: rgba(239, 0, 29, 1.00);
  z-index: 2
}
.box-red p {
  color: white
}
.box-red .col-lg-8 {
  position: absolute;
  display: flex;
  top: -100px;
  right: -50px;
  justify-content: space-between;
}
.box-red .col-lg-8 img {
  position: relative;
  width: 32%;
  height: auto;
  border-radius: 25px;
  margin-right: 1%
}
.rec-p02 {
  top: 20px
}
.sp-photo {
  display: none
}
/* -----------------------------------------------
1200px以下
-------------------------------------------------- */
@media screen and (max-width:1200px) {
  .container-fluid#recruit {
    width: 100%;
    padding: 0;
    margin-top: 0;
  }
  .box-red {
  position: relative;
  background-color: rgba(239, 0, 29, 1.00);
  border-radius: 0px!important;
  padding: 5% 5%;
  margin: 0;
}
  #recruit .box-red h2 {
    position: relative;
    top: 0%;
	color: #fff;
	margin-bottom: 0;
  }
  .box-red p {
    color: white
  }
  .box-red .col-lg-4 {
    width: 100%
  }
  .box-red .col-lg-8 {
    position: relative;
    display: flex;
    top: 0;
    right: -5%;
    width: 100%;
    margin: 0;
    padding: 0
  }
  .box-red .col-lg-8 img {
    position: relative;
    width: 33.33%;
    height: auto;
    border-radius: 0;
    margin-right: 0
  }
  .box-red .col-lg-8 img.rec-p01 {
    border-radius: 20px 0 0 20px;
  }
  .box-red .col-lg-8 img.rec-p03 {
    border-radius: 0;
  }
  .rec-p02 {
    top: 0;
  }
}
/* -----------------------------------------------
1024px以下
-------------------------------------------------- */
@media screen and (max-width:1024px) {
  .mvtxt {
    top: 50%;
  }
  .ball {
    top: 52%;
  }
  .mvtxt2 {
    display: none
  }
  /*お知らせ（サムネイル付）*/
  .title {
    width: 100%
  }
  #news .title .more-button.blue {
    position: absolute;
    top: 0;
    right: 1px;
    left: auto
  }
  #index h2 {
    font-size: 2.4em
  }
  #index h2 span {
    font-size: 12px
  }
  .responsive {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }
}
/* -----------------------------------------------
 991px
-------------------------------------------------- */
@media screen and (max-width:992px) {

}
/* -----------------------------------------------
 767px
-------------------------------------------------- */
@media screen and (max-width:768px) {
  #news {
    margin: -100px auto 60px;
    display: block;
  }
  .resize {
    height: 200px;
  }
  #recruit .box-red {
    padding-top: 8%;
    margin-bottom: 20px
  }
  #recruit .box-red h2 {
    top: -10%;
    font-size: 4em !important;
    font-weight: 400 !important;
  }
}
/* -----------------------------------------------
smartPhone
-------------------------------------------------- */
@media screen and (max-width: 576px) {
  /*お知らせ（サムネイル付）*/
  #news {
    position: relative;
    width: 100%;
    left: 0;
    right: 0;
    margin: -50px auto 100px;
    z-index: 100;
    display: flex;
    flex-wrap: wrap
  }
  #news .title .more-button.blue a {
    padding-left: 1em;
    padding-right: 3em
  }
  .responsive .resize {
    height: 240px;
  }
  #index h2 {
    font-size: 2em!important
  }
  #index h2 span {
    font-size: 10px!important
  }
  #index-company .sp-width {
    width: 85%;
  }
  #index-company p br {
    display: none;
    margin-left: -10px
  }
  .company-p01 {
    top: -5%;
    left: -10%;
    width: 25%;
  }
  .company-p02 {
    bottom: 10%;
    left: -3%;
    width: 18%;
    box-shadow: -10px 10px 0px 0px rgba(122, 177, 191, .3);
  }
  .company-p03 {
    top: 0;
    right: -5%;
    width: 20%;
    box-shadow: 10px -10px 0px 0px rgba(122, 177, 191, .2);
  }
  .company-p04 {
    bottom: 0;
    right: -15%;
    width: 30%;
  }
 #recruit .box-red {
	height: auto;
    padding-bottom: 10%;
	 margin-top: 0;
    margin-bottom: 20px
  }
  #recruit .box-red h2 {
    font-size: 3.2em !important;
    top: -7%;
  }
  /*  .box-red .col-lg-8 {
    display: block;
    top: 0;
    right: 0;
    width: 100%;
    text-align: center
  }
  .box-red .col-lg-8 img {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 25px;
    padding: 10px
  }
  .rec-p01 {
    position: relative;
    left: -20%
  }
  .rec-p02 {
    position: relative;
    top: auto;
    right: -20%
  }
  .rec-p03 {
    position: relative;
    left: -20%
  }
  .pc-photo {
    display: none
  }
  .sp-photo {
    display: block
  }*/
}