@charset "utf-8";


/* =====================================================================

	loding
	
======================================================================== */
	.loader-wrapper {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 10000;
		overflow: hidden;
		width: 100%;
		height: 100%;
		background: #fff;
		opacity: 1;
		-webkit-transition: all 2s ease-in-out .5s;
		transition: all 2s ease-in-out .5s;
		}
	.loader-wrapper::before {
		position: relative;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: #fff;
		content: "";
		}
	.loader-wrapper.loaded {
		z-index: -2;
		opacity: 0;
		}
	.loader-wrapper.loaded .loader-image img {
		-webkit-animation: preloader-image 2s ease-in-out forwards;
						animation: preloader-image 2s ease-in-out forwards;
		}
	.loader-wrapper .loader-image {
		/*position: fixed;
		top: 50%;
		margin-top: -42px;
		margin-top: calc(-.5 * calc(61px + calc(100vw / 1200 * 82 / 4)));
		width: 100%;
		height: 82px;
		height: calc(61px + calc(100vw / 1200 * 82 / 4));
		text-align: center;*/
    
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
		}
	.loader-wrapper .loader-image img {
		max-width: 100%;
		max-height: 100%;
		-webkit-animation: preloader-image-fadein 1s ease-in-out forwards;
						animation: preloader-image-fadein 1s ease-in-out forwards;
		}
@media (min-width: 768px) {
  .loader-wrapper .loader-image img {
    max-width: 350px;
    }
}

@-webkit-keyframes preloader-outer {
  from {
    opacity: 1;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    opacity: 1;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes preloader-outer {
  from {
    opacity: 1;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    opacity: 1;
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes preloader {
  0% {
    opacity: .3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: .3;
  }
}
@keyframes preloader {
  0% {
    opacity: .3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: .3;
  }
}
@-webkit-keyframes preloader-image {
  0% {
    -webkit-filter: none;
            filter: none;
  }
  30% {
    -webkit-filter: blur(20px);
            filter: blur(20px);
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
  }
}
@keyframes preloader-image {
  0% {
    -webkit-filter: none;
            filter: none;
  }
  30% {
    -webkit-filter: blur(20px);
            filter: blur(20px);
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
  }
}
@-webkit-keyframes preloader-image-fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes preloader-image-fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



/* =====================================================================

	Hero slider
	
======================================================================== */
.slide-bg-inner {
  width: 100%;
	height: 0;
	padding-top: 32.291666%; /* h/w*100 */
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  background-size: cover;
	}
	.slide-item--fa-software  {background-image: url("../img/home/slide_fa-software.jpg");}
	.slide-item--construction {background-image: url("../img/home/slide_construction.jpg");}
	.slide-item--factory 			{background-image: url("../img/home/slide_factory.jpg");}
	.slide-item--office			  {background-image: url("../img/home/slide_office.jpg");}
  .slide-item--giga-school  {background-image: url("../img/home/slide_giga.jpg");}
	.slide-item--itscafe			{background-image: url("../img/home/slide_itscafe.jpg");}
	.slide-item--recruit			{background-image: url("../img/home/slide_recruit.jpg");}
@media (max-width: 767px) {
.slide-bg-inner {
	padding-top: 125%; /* h/w*100 */
	}
	.slide-item--fa-software  {background-image: url("../img/home/sp_slide_fa-software.jpg");}
	.slide-item--construction {background-image: url("../img/home/sp_slide_construction.jpg");}
	.slide-item--factory 			{background-image: url("../img/home/sp_slide_factory.jpg");}
	.slide-item--office			  {background-image: url("../img/home/sp_slide_office.jpg");}
  .slide-item--giga-school  {background-image: url("../img/home/sp_slide_giga.jpg");}
	.slide-item--itscafe			{background-image: url("../img/home/sp_slide_itscafe.jpg");}
	.slide-item--recruit			{background-image: url("../img/home/sp_slide_recruit.jpg");}
}


.slick-item-content {
  position: absolute;
  top: 50%;left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 150;
  color: #fff;
	}

.slick-dotted.slick-slider {
  margin-bottom: 0;
	}

.slick-dots {
  position: static !important;
  top: 100%;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 25px;
  height: 8px;
	}

.card-list.slick-dotted .slick-dots {
  margin-top: 22px !important;
	}

.slick-dots li {
  margin: 0 4px;
  width: 8px;
  height: 8px;
	}

.slick-dots li button {
  padding: 0;
  width: 8px;
  height: 8px;
  background: #ccc;
	}

.slick-dots li button::before {
  content: none;
	}

.slick-dots li.slick-active button {
  background: #085FAB;
	}

.slick-prev,
.slick-next {
  z-index: 5;
  width: 60px;
  height: 60px;
  opacity: 1;
  -webkit-transition: all .3s;
  transition: all .3s;
	}

.slick-prev:before,
.slick-next:before {
  content: none;
	}

.slick-slider:hover .slick-prev, .slick-slider:hover .slick-next {
  opacity: 1;
	}

.slick-slider:hover .slick-prev:hover, .slick-slider:hover .slick-next:hover {
  opacity: .5;
	}

.slick-prev, .slick-prev:hover, .slick-prev:focus {
  left: 5px;
  background: no-repeat center center;
	background-image: url("../img/common/allow_prev.png");
  background-size: cover;
	}
.slick-next, .slick-next:hover, .slick-next:focus {
  right: 5px;
  background: no-repeat center center;
  background-image: url("../img/common/allow_next.png");
  background-size: cover;
	}

.slick-prev-gray, .slick-prev-gray:hover, .slick-prev-gray:focus {
	background-image: url("../img/common/allow_prev_gray.png");
	}
.slick-next-gray, .slick-next-gray:hover, .slick-next-gray:focus {
	background-image: url("../img/common/allow_next_gray.png");
	}

@media (min-width: 768px) {
  .slick-dots {
    margin-top: 30px !important;
 	 }
  .card-list.slick-dotted .slick-dots {
    margin-top: 32px !important;
  	}
}

#slider {
  opacity: 0;
	}

#slider.slick-initialized {
  opacity: 1;
  -webkit-transition: all .3s;
  transition: all .3s;
	}
	
.slide-item a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
  width: 100%;
  text-align: center;
	}

.slide-item a:hover {
  text-decoration: none;
  opacity: 1;
	}

.slide-item a::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: no-repeat center center;
  background-size: cover;
  content: "";
	}

.slide-item a::after {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  content: "";
	}

#thumbnail-list {
  display: none;
  margin: 30px -5px 0;
	}

#thumbnail-list .thumbnail-item {
  position: relative;
  margin: 0 5px;
	}

#thumbnail-list .thumbnail-item::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  content: "";
  -webkit-transition: all .3s;
  transition: all .3s;
	}

#thumbnail-list .thumbnail-item:hover::after, #thumbnail-list .thumbnail-item.thumbnail-current::after {
  background: transparent;
  -webkit-transition: all .3s;
  transition: all .3s;
	}

#thumbnail-list .thumbnail-item:hover {
  cursor: pointer;
	}

@media (min-width: 768px) {
  .slick-prev,
  .slick-next {
    width: 58px;
    height: 58px;
    opacity: 0;
  }
  .slick-prev, .slick-prev:hover, .slick-prev:focus {
    left: 20px;
  }
  .slick-next, .slick-next:hover, .slick-next:focus {
    right: 20px;
  }
  #thumbnail-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}



/* =====================================================================

	index-banner
	
======================================================================== */
	.index-banner {
		margin-top: 40px;
		margin-bottom: 40px;
		}
	.index-banner .slick-prev,
	.index-banner .slick-next {
		width: 40px;
		height: 40px;
		}
	.banner-item {
		margin: 0 5px;
		}
@media (min-width: 768px) {
	.index-banner {
		margin-left: 6%;
		margin-right: 6%;
		margin-bottom: 120px;
		}
	.banner-item {
		margin: 0 10px;
		}
  .index-banner .slick-prev,
  .index-banner .slick-next {
    opacity: 1;
 		}
  .index-banner .slick-prev, .index-banner .slick-prev:hover, .index-banner .slick-prev:focus {
    left: -42px;
  	}
  .index-banner .slick-next, .index-banner .slick-next:hover, .index-banner .slick-next:focus {
    right: -42px;
  	}
}



/* =====================================================================

	index-otherCotents (company / faq)
	
======================================================================== */
	.index-comnapy {
		color: #FFF;
		text-align: center;
		}
	.faq-box {
		background-color: #FFF;
		padding: 40px;
		}
	.faq-title {
		color: #0C2252;
		}
@media (max-width: 414px) {
	.index-comnapy .container {
		display: inline-block;
		text-align: left;
		}
}
@media (max-width: 767px) {
	.index-comnapy {
		background-image: url(../img/home/sp_bg_company.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
		}
	.company-title {
		text-align: center;
		font-size: 1.5rem;
		line-height: 1.5;
		}
	.company-text {
		padding-left: 7%;
		padding-right: 7%;
		}
	
	.index-faq {
		background-image: url(../img/home/sp_bg_faq.jpg);
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
		}
	.index-faq .container {
		padding-top: 40px;
		padding-bottom: 40px;
		}
	.fax-title span:nth-of-type(1) {
		font-size: 2rem;
		padding-right: 10px;
		vertical-align: top;
		}
	.index-faq .btn {
		width: 100%;
		}
}

@media (min-width: 768px) {
	.index-otherCotents {
		margin-top: 0;
		background-image: url(../img/home/bg_company.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		min-height: 1070px;
		}
	.index-comnapy {
		height: 600px;
		margin-bottom: 50px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
			 -ms-flex-align: center;
					align-items: center;
		}
	.index-comnapy .container {
		padding-right: 60px;
		}
	.company-title {
		font-size: 3.125rem;
		line-height: 1.4;
		}
	.company-text {
		display: inline-block;
		text-align: left;
		}
	
	.index-faq {
		height: 420px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
			 -ms-flex-align: center;
					align-items: center;
		}
	.faq-box {
		padding: 50px 120px;
		}
	.faq-title span:nth-of-type(1) {
		font-size: 3.125rem;
		padding-right: 20px;
		vertical-align: top;
		}
	.faq-title span:nth-of-type(2) {
		font-size: 1.625rem;
		}
}
@media (min-width: 992px) {
	.faq-box {
		padding: 80px 140px;
		}
}