@charset "UTF-8";
#information {
  *zoom: 1;
}
#information:after {
  content: "";
  display: table;
  clear: both;
}

.btn--gradation {
  color: #FFF;
  background: -webkit-gradient(linear, left top, left bottom, from(#78b3fb), to(#539cf7));
  background: linear-gradient(to bottom, rgba(120, 179, 251, 0.6), rgba(83, 156, 247, 0.6));
  background-color: #78b3fb;
  -moz-transition: background, 0.6s, liner;
  -o-transition: background, 0.6s, liner;
  -webkit-transition: background, 0.6s, liner;
  transition: background, 0.6s, liner;
  -moz-transition: background-color, 0.6s, liner;
  -o-transition: background-color, 0.6s, liner;
  -webkit-transition: background-color, 0.6s, liner;
  transition: background-color, 0.6s, liner;
}
.btn--gradation:hover {
  color: #FFF;
  background: -webkit-gradient(linear, left top, left bottom, from(#529bf7), to(#478ddf));
  background: linear-gradient(to bottom, rgba(82, 155, 247, 0.6), rgba(71, 141, 223, 0.6));
  background-color: #529bf7;
}

/* ！MAIN IMAGE				******************************************* */
/*
#topImg{
	height: $containerW*0.55357 + px;
	background: url(../image/home/img_top_main.jpg) center top no-repeat;
}
*/
/* 設定 */
#topImg {
  width: 100%;
  height: 620px;
  overflow: hidden;
}
#topImg .bx-wrapper {
  padding: 0;
  margin: 0;
}
/* bxslider標準テーマの白枠(5px)と left:-5px を消す。ヘッダー直下の白帯と横ずれの原因 */
#topImg .bx-wrapper .bx-viewport,
.bg_color_g01 .bx-wrapper .bx-viewport {
  border: 0;
  box-shadow: none;
  left: 0;
  background: transparent;
  transform: none;
}

.slide_all {
  width: 826px;
  margin: 0 auto;
  height: 620px;
  position: relative;
}

.slide_wrap {
  width: 2478px;
  position: absolute;
  left: 50%;
  margin-left: -1239px;
}

.slide_body {
  width: 100%;
}

.slide {
  width: 826px;
}
.slide img {
  width: 100%;
  vertical-align: bottom;
}

/* ！INFORMATION				******************************************* */
#information {
  padding: 1em 0;
}
#information h2 {
  padding-right: 1.5em;
  padding-left: 8.035%;
  background: url(../image/common/icn_rss.png) right 12px no-repeat;
  float: left;
  line-height: 2.8;
  margin-top: -4px;
}
#information ul {
  float: left;
  display: inline;
  margin-left: 5.357%;
  list-style-type: none;
}
#information ul li {
  line-height: 2.4;
}
#information ul li span {
  display: inline;
  margin-right: 2em;
  font-weight: bold;
}
#information ul li a {
  padding-left: 0;
  color: #282828;
  text-decoration: none;
  margin-left: -.65em;
}
#information ul li a:before {
  content: '>';
  padding-right: .2em;
  margin-left: -.65em;
  margin-right: .65em;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-transition: 0.3s, easeOutCubic;
  -o-transition: 0.3s, easeOutCubic;
  -webkit-transition: 0.3s, easeOutCubic;
  transition: 0.3s, easeOutCubic;
  color: #4E99FA;
  font-weight: normal;
}
#information ul li a:hover {
  text-decoration: none;
  margin-left: -.65em;
  -moz-transition: 0.3s, easeOutCubic;
  -o-transition: 0.3s, easeOutCubic;
  -webkit-transition: 0.3s, easeOutCubic;
  transition: 0.3s, easeOutCubic;
  color: #4E99FA;
}
#information ul li a:hover:before {
  content: '>';
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-transition: 0.3s, easeOutCubic;
  -o-transition: 0.3s, easeOutCubic;
  -webkit-transition: 0.3s, easeOutCubic;
  transition: 0.3s, easeOutCubic;
  font-weight: normal;
  margin-left: 0;
  margin-right: 0;
}
#information ul li a:hover {
  color: #4E99FA;
}

/* ！ECOPUL				******************************************* */
#ecopul {
  height: 325.20096px;
  background: #9ED3E0 url(../image/home/catch_ecopul.png) center center no-repeat;
  opacity: 1;
  -moz-transition: opacity, 0.3s, 0.3s;
  -o-transition: opacity, 0.3s, 0.3s;
  -webkit-transition: opacity, 0.3s, 0.3s;
  transition: opacity, 0.3s, 0.3s;
}
#ecopul:hover {
  opacity: .6;
}
#ecopul h2 {
  position: absolute;
  top: 55px;
  left: 15.178%;
}
#ecopul p {
  position: absolute;
  top: 176px;
  left: 5.803%;
}
#ecopul .img_tokusetsu {
  position: absolute;
  bottom: 35px;
  left: 16.964%;
}
#ecopul .img_tokusetsu a {
  margin-left: 0;
  -moz-transition: 0.3s, easeOutCubic;
  -o-transition: 0.3s, easeOutCubic;
  -webkit-transition: 0.3s, easeOutCubic;
  transition: 0.3s, easeOutCubic;
}
#ecopul .img_tokusetsu a:before {
  content: '';
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
#ecopul .img_tokusetsu a:hover {
  margin-left: 0;
  -moz-transition: 0.3s, easeOutCubic;
  -o-transition: 0.3s, easeOutCubic;
  -webkit-transition: 0.3s, easeOutCubic;
  transition: 0.3s, easeOutCubic;
}
#ecopul .img_tokusetsu a:hover:before {
  content: '';
}
#ecopul figure {
  position: absolute;
  top: 90px;
  right: 9.375%;
}


/* 業務スライド：画像内の縦書き文字が潰れないよう固定 */
.bg_color_g01 .bx-wrapper {
  max-width: 1120px;
  margin: 0 auto;
}
.bg_color_g01 .slider1 .slide {
  width: 155px !important;
}
.bg_color_g01 .slider1 .slide img {
  width: 155px !important;
  height: 155px !important;
  max-width: none;
}

/* 採用情報へ				******************************************* */

.recruit-cover {
    display: grid;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 360px;
    background-image: url("../image/home/bg_recruit.webp");
    background-size: cover;
    background-position: center;
    color: #fff;
}

.recruit-inr {
}

.recruit-innr h3 {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 19px;
    font-size: 1.9rem;
    line-height: 1.0em;
    font-weight: normal;
}

.recruit-innr h3:before {
    content: "ECOPORT KYUSYU RECRUIT";
    display: block;
    margin-bottom: 20px;
    font-size: 30px;
    font-size: 3.0rem;
    font-weight: bold;
    letter-spacing: 1.6pt;
}

.recruit-innr h3 + p {
    margin: 30px 0;
    text-align: center;
    font-size: 16px;
    font-size: 1.6rem;
    letter-spacing: 0.8pt;
}

.recruit-innr a {
    display: block;
    width: 200px;
    margin: 0 auto;
    background-color: #0ea4e6;
    border-radius: 18px;
    text-align: center;
    line-height: 36px;
    text-decoration: none;
    color: #fff;
    transition: 0.5s;
}

.recruit-innr a:hover {
    background-color: #60c1ce;
    color: #fff;
}