/******************************/
/* ローディングアニメーション */
/******************************/
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 1;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 2;
}

/******************/
/* ナビゲーション */
/******************/
#navigator {
  background-color: #fff !important;
  position: fixed !important;
}

/*
ul.qhm-bs-nav {
    background: #fff;
}
ul.qhm-bs-nav li a {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    font-weight: bold;
}
ul.qhm-bs-nav li a:hover {
    text-shadow: #0000FF 0px 0px 20px;
    color: #EA4515;
}
*/

ul.qhm-bs-nav li a {
  padding: 12px 5px 5px;
  color: #566473;
  text-shadow: none;
  font-weight: 700;
}


ul.qhm-bs-nav li a::before,
ul.qhm-bs-nav li a::after {
  position: absolute;
  top: 90%;
  left: 0;
  width: 100%;
  height: 3px;
  background: #566473;
  content: '';
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: scale(0.85);
  -moz-transform: scale(0.85);
  transform: scale(0.85);
}

ul.qhm-bs-nav li::after {
  opacity: 0;
  -webkit-transition: top 1.0s, opacity 0.5s, -webkit-transform 1.0s;
  -moz-transition: top 1.0s, opacity 0.5s, -moz-transform 1.0s;
  transition: top 1.0s, opacity 0.5s, transform 1.0s;
}

ul.qhm-bs-nav li a:hover::before,
ul.qhm-bs-nav li a:hover::after,
ul.qhm-bs-nav li a:focus::before,
ul.qhm-bs-nav li a:focus::after {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

ul.qhm-bs-nav li a:hover::after,
ul.qhm-bs-nav li a:focus::after {
  top: 10%;
  opacity: 1;
}

/****************/
/* アイキャッチ */
/****************/
@-webkit-keyframes anim_1 {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes anim_1 {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes anim_2 {
    0%   { opacity: 0; }
    25%  { opacity: 0; }
    50%  { opacity: 0; }
    75%  { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes anim_2 {
    0%   { opacity: 0; }
    25%  { opacity: 0; }
    50%  { opacity: 0; }
    75%  { opacity: 1; }
    100% { opacity: 1; }
}

@-webkit-keyframes anim_3 {
    0%   { transform: scale(1,1); }
    100% { transform: scale(1.1,1.1); }
}
@keyframes anim_3 {
    0%   { transform: scale(1,1); }
    100% { transform: scale(1.1,1.1); }
}

/*
#qhm_section_1 {
  -ms-animation: anim_1 1s;
  -webkit-animation: anim_1 1s;
  animation: anim_1 1s;
}
*/

.qhm-eyecatch h1 {
  -ms-animation: anim_1 3s;
  -webkit-animation: anim_1 3s;
  animation: anim_1 3s;
}
	
.qhm-eyecatch p {
  -ms-animation: anim_2 3s;
  -webkit-animation: anim_2 3s;
  animation: anim_2 3s;
}

.container-fluid h1#content_2_0 {
  -ms-animation: anim_1 3s;
  -webkit-animation: anim_1 3s;
  animation: anim_1 3s;
}

#qhm_eyecatch {
  overflow: hidden;
}

.top-image,
.profile-image,
.business-image,
.recruit-image {
  -ms-animation: anim_3 30s infinite;
  -webkit-animation: anim_3 30s infinite;
  animation: anim_3 30s infinite;
}

/****************/
/* トップページ */
/****************/
#business div.row,
#profile div.row,
#recruit div.row {
  overflow: hidden;
  position: relative;
}

#business div.row::before,
#profile div.row::before,
#recruit div.row::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  content: '';
  width: 0;
  height: 0;
  background: rgba(255,255,255,.2);
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}
#business div.row:hover::before,
#profile div.row:hover::before,
#recruit div.row:hover::before {
  -webkit-animation: circle .75s;
  animation: circle .75s;
}
@-webkit-keyframes circle  {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}
@keyframes circle  {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}

div.dark-overlay,
div.dark-overlay,
div.dark-overlay {
  -webkit-transition : all .5s;
  transition : all .5s;
}

#business:hover div.dark-overlay,
#profile:hover div.dark-overlay,
#recruit:hover div.dark-overlay {
  background-color:rgba(0,0,0,0.8) !important;
}

.btn.btn-default.btn-ghost-w:hover {
  -webkit-transition : all .5s;
  transition : all .5s;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInLeft_1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300%, 0, 0);
    transform: translate3d(-300%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft_1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300%, 0, 0);
    transform: translate3d(-300%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInLeft_2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft_2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInLeft_3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft_3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

#top-message_1.fadeInLeft {
  -webkit-animation-fill-mode:both;
  -ms-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:1s;
  -ms-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  visibility: visible !important;
}

#business.fadeInLeft {
  -webkit-animation-fill-mode:both;
  -ms-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:1s;
  -ms-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-name: fadeInLeft_1;
  animation-name: fadeInLeft_1;
  visibility: visible !important;
}

#profile.fadeInLeft {
  -webkit-animation-fill-mode:both;
  -ms-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:1s;
  -ms-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-name: fadeInLeft_2;
  animation-name: fadeInLeft_2;
  visibility: visible !important;
}

#recruit.fadeInLeft {
  -webkit-animation-fill-mode:both;
  -ms-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-duration:1s;
  -ms-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-name: fadeInLeft_3;
  animation-name: fadeInLeft_3;
  visibility: visible !important;
}

/************/
/* 事業内容 */
/************/
/*
.col-sm-3 p img {
  -webkit-transition: 1s;
  transition: 1s;
}

.col-sm-3 p img:hover {
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
*/
/**************/
/* 採用ページ */
/**************/
/*
.col-sm-3 .img_margin_left img {
  display: block; /* ブロックレベル表示に */
  width: 300px;
  height: 230px;
  margin: 0 auto;
  background: white; /* 背景色を白 */
  padding: 10px 10px 30px; /*上 左右 下のパディング */
  -moz-box-shadow: 0 4px 10px #333; /* 影を落とす */
  -webkit-box-shadow: 0 4px 10px #333;
  box-shadow: 0 4px 10px #333;
  -webkit-transform: rotate(5deg); /* 回転 */
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
}

#qhm_section_3 div.col-sm-4 span.comment {
   padding: 30px;
   position: relative;
} 
  
#qhm_section_3 div.col-sm-4 span.comment p {
   position: relative;
   background: #fff;
   height: auto;
   width: auto;
   margin: 5px;
   padding: 20px;
   border-radius: 25px;
}

#qhm_section_3 div.col-sm-4 span.comment p:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #ffffff;
  border-width: 30px;
  margin-top: -30px;
}
*/

/**********/
/* ボタン */
/**********/

input.btn {
  border-radius: 5px;
  transition: all .3s;
}

/************/
/* フッター */
/************/
.haik-footer {
  background-color: #fff !important;
}

footer.haik-footer div.container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#footer-content {
  padding-left: 15px;
}

.footer-line {
  height: 1.5px;
  background: #bbb;
  background-image: -webkit-linear-gradient(left, #b2ffff, #007fff, #b2ffff);
  background-image: -moz-linear-gradient(left, #b2ffff, #007fff, #b2ffff);
  background-image: -ms-linear-gradient(left, #b2ffff, #007fff, #b2ffff);
  background-image: -o-linear-gradient(left, #b2ffff, #007fff, #b2ffff);
}