@charset "UTF-8";

/*-----------------------------------------
copy
-----------------------------------------*/
.popout {
   overflow: hidden;
   display: block;
}
.popout span {
  position: relative;
}
.popout:nth-child(1) span {
  animation: popanime 1s ease-out 1100ms forwards;
}
.popout:nth-child(2) span {
  animation: popanime 1s ease-out 1500ms forwards;
}
@keyframes popanime {
  from {
    bottom: -30px;
  }
  to {
    bottom: 0px;
  }
}




/*-----------------------------------------
ズームアップ＆フェードで切り替わるスライダー
-----------------------------------------*/
@keyframes zoomUp {
0% {
  transform: scale(1);
}
100% {
  transform: scale(1.15);
}
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoomUp 10s linear 0s 1 normal both;  
}
/* imgタグだと下に隙間ができるのでblockに。 */
.slide-img img{
  display: block;
  width: 100%;
}
.swiper-wrapper {
    overflow: hidden;
}
.swiper-slide {
	position: relative;
}
.swiper-slide p {
	position: absolute;
	top: 140px;
	left: 2%;
	color: #fff;
	font-weight: bold;
	font-size: 30px;
}
.swiper-slide p img {
	width: 503px;
	margin-bottom: 40px;
}
@media only screen and (max-width: 768px){
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoomUp 10s linear 0s 1 normal both;  
}
/* imgタグだと下に隙間ができるのでblockに。 */
.slide-img img{
  display: block;
  width: 100%;
}
.swiper-wrapper {
    overflow: hidden;
}
.swiper-slide {
	position: relative;
}
.swiper-slide p {
	top: 90px;
	left: 5%;
	font-size: 15px;
}
.swiper-slide p img {
	width: 60%;
	margin-bottom: 30px;
}
}




/*-----------------------------------------
bxSlider
-----------------------------------------*/
/* NEWS */
.sec_news .bx-wrapper,
.sec_challenge .bx-wrapper {
  box-shadow: none;
  max-width: none!important;
  border: none;
  background: none;
}
.sec_news .bx-wrapper {
  margin-bottom: 0;
  width: 80%;
}
.sec_news .bx-wrapper .bx-pager {
  display: none;
}
.sec_news .bx-controls {
  position: relative;
}
.sec_news .bx-wrapper .bx-controls-direction a {
  margin-top: 0;
  width: 64px;
  height: 64px;
  z-index: auto;
}
.sec_news .bx-wrapper .bx-next {
  left: 70px;
}
.sec_news .bx-viewport {
  margin-bottom: 20px;
}
.sec_news #bxslider li {
  width: 300px!important;
  margin-right: 30px!important;
  font-size: 12px;
  line-height: 2;
}
.sec_news #bxslider li img {
  margin-bottom: 10px;
}
.sec_news #bxslider li .ttl {
  font-weight: bold;
}
.sec_news #bxslider li .date {
  color: #666;
  font-size: 10px;
}
.bx-wrapper .bx-prev {
    left: 0;
    background-image: url("../images/index/bx-prev.png");
    background-repeat: no-repeat;
    background-size: 64px 64px;
    background-position: center;
}
.bx-wrapper .bx-next {
    right: 0;
    background-image: url("../images/index/bx-next.png");
    background-repeat: no-repeat;
    background-size: 64px 64px;
    background-position: center;
}
.bx-wrapper a {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
    left: 0;
    background-image: url("../images/index/bx-prev_on.png");
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
    right: 0;
    background-image: url("../images/index/bx-next_on.png");
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: 0 0;
}

/* CHALLENGE */
.sec_challenge .bx-wrapper .bx-controls-direction a {
  display: none;
}
.sec_challenge .slider-wrapper {
  overflow: hidden;
}
.sec_challenge .slider {
  position: relative;
  left: 15vw; /* (100vw - SlideWidth) / 2 */
  overflow: visible !important;
}
.sec_challenge .slide {
  width: 70vw !important;
}
.sec_challenge .bx-wrapper {
  box-shadow: none;
  border: none;
  margin: 0;
}
.sec_challenge .bx-wrapper .bx-pager-item {
  width: 32%;
}
.sec_challenge .bx-wrapper .bx-pager.bx-default-pager a {
  background: #ccc;
  width: 100%;
  height: 2px;
  margin: 0;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0;
}
.sec_challenge .bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #000!important;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
  position: relative;
  bottom: 0;
  width: 100%;
}
.sec_challenge .slider-wrapper .slide {
  padding: 20px;
  border: 1px solid #666;
}
@media screen and (max-width: 768px) {
/* NEWS */
.sec_news .bx-wrapper,
.sec_challenge .bx-wrapper {
}
.sec_news .bx-wrapper {
  width: 90%;
  margin: 0 auto;
  position: relative;
}
.sec_news .bx-wrapper .bx-pager {
  display: none;
}
.sec_news .bx-controls {
  position: absolute;
  top: -55px;
  right: 67px;
  /* -webkit-transform : translateX(-100%); */
  /* transform : translateX(-100%); */
}
.sec_news .bx-wrapper .bx-controls-direction a {
  width: 32px;
  height: 32px;
}
.sec_news .bx-wrapper .bx-next {left: 35px;} 
.sec_news .bx-viewport {
  margin-bottom: 0;
}
.sec_news #bxslider li {
  width: 300px!important;
  margin-right: 30px!important;
  font-size: 12px;
  line-height: 2;
}
.sec_news #bxslider li img {
  margin-bottom: 10px;
}
.sec_news #bxslider li .ttl {
  font-weight: bold;
}
.sec_news #bxslider li .date {
  color: #666;
  font-size: 10px;
}
/* CHALLENGE */
.sec_challenge .bx-wrapper .bx-controls-direction a {
  display: none;
}
.sec_challenge .slider-wrapper {
  overflow: hidden;
}
.sec_challenge .slider {
  position: relative;
  left: 15vw; /* (100vw - SlideWidth) / 2 */
  overflow: visible !important;
}
.sec_challenge .slide {
  width: 70vw !important;
}
.sec_challenge .bx-wrapper {
  box-shadow: none;
  border: none;
  margin: 0;
}
.sec_challenge .bx-wrapper .bx-pager-item {
  width: 32%;
}
.sec_challenge .bx-wrapper .bx-pager.bx-default-pager a {
  background: #ccc;
  width: 100%;
  height: 2px;
  margin: 0;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0;
}
.sec_challenge .bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #000!important;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
  width: 90%;
  margin: 0 auto;
}
.sec_challenge .slider-wrapper .slide {
  padding: 20px;
  border: 1px solid #666;
}
.bx-wrapper .bx-prev {
    background-size: 32px 32px;
}
.bx-wrapper .bx-next {
    background-size: 32px 32px;
}
}





/*-----------------------------------------
NEWS
-----------------------------------------*/
.sec_news {
  margin: 20px 0 150px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  justify-content: space-between;
}
.sec_news_inn {
  width: 15%;
  margin-right: 3%;
  padding-left: 2%;
}
.sec_news_inn > p {
  /* font-size: 15px; */
  font-size: min(1vw,15px);
  /* font-weight: bold; */
  white-space: nowrap;
}
.sec_news_inn > p img {
  position: relative;
  top: -6px;
  margin-left: 15px;
}
@media screen and (max-width: 768px) {
.sec_news {
  margin: 20px 0 50px;
  display: block;
}
.sec_news_inn {
  width: 90%;
  margin: 0 auto 20px;
  padding-left: 0;
}
.sec_news_inn > p {
  font-size: 12px;
  font-weight: bold;
}
.sec_news_inn > p img {
  position: relative;
	top: -3px;
	margin-left: 15px;
}
}





.sec_message,
.sec_company,
.sec_service {
  background: #000;
  color: #fff;
}
/*-----------------------------------------
MESSAGE
-----------------------------------------*/
.sec_message {
  display:
  -webkit-box;
  display:
  -ms-flexbox;
  display:
  flex;
  position: relative;
  padding-bottom: 40px;
  /* overflow: hidden; */
}
.sec_message .img_area {
  width: 60%;
}
.sec_message .img_area img {
  width: 100%;
}
.sec_message .txt_area {
  width: 37%;
  margin: 50px 3% 0;
  display:
  -webkit-box;
  display:
  -ms-flexbox;
  display:
  flex;
  flex-direction: column;
  justify-content: space-between;
}
.sec_message .txt_area .heading {
  font-size: 20px;
}
.sec_message .logo {
  position: absolute;
  top: 50%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
  width: 100%;
  /* overflow: hidden; */
}
@media screen and (max-width: 768px) {
  .sec_message {
  flex-direction: column-reverse;
  padding-bottom: 40px;
  }
  .sec_message .img_area {
    width: 100%;
    margin-bottom: 40px;
    position: relative;
  }
  .sec_message .img_area img {
    width: 100%;
  }
  .sec_message p.txt {
    width: 100%;
    margin: 0 auto;
    width: 90%;
  }
  .sec_message .txt_area {
    width: 100%;
    margin: 50px auto 30px;
    flex-direction: column;
  }
  .sec_message .txt_area .heading {
    font-size: 15px;
    margin: 0 auto 40px;
    width: 90%;
  }
  .sec_message .logo {
    /* top: auto; */
    /* top: 75vw; */
  }
}
@media only screen and (max-width: 500px){
.sec_message .logo {
    /* top: 85vw; */
}
}
@media only screen and (max-width: 400px){
.sec_message .logo {
    /* top: 107vw; */
}
}

/* 右から左へ */
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* IE11対策 */
_:-ms-lang(x)::-ms-backdrop,
.logo {
  display: -ms-grid;
  overflow: hidden;
}
/*---------*/

.logo__wrap {
  display: flex;
  overflow: hidden;
}
.logo__list {
  display: flex;
  list-style: none;
}
.logo__list--left{
  animation :infinity-scroll-left 95s infinite linear 0.5s both;
}
.logo__item {
  width: calc(100vw / 3);
}
.logo__item > img{
   width: 100%;
}
@media only screen and (max-width: 768px){
.logo__item {
    width: calc(100vw / 1.2);
}
}





/*-----------------------------------------
COMPANY
-----------------------------------------*/
.sec_company {
  padding-bottom: 30px;
}
.sec_company ul {
  display:
  -webkit-box;
  display:
  -ms-flexbox;
  display:
  flex;
}
.sec_company li {
  width: calc(100%/3);
  /* height: 17vw; */
  /* max-height: 200px; */
  overflow: hidden;
  position: relative;
}
.sec_company .img img {
  transition: all 0.4s ease-in-out;
  width: 100%;
}
.sec_company .img img:hover {
  transform: scale(1.1);
}
@media screen and (max-width: 768px) {
.sec_company {
  padding-bottom: 20px;
}
  .sec_company ul {
    
display: block;
  }
  .sec_company li {
    width: 90%;
    /* height: 17vw; */
    max-height: 200px;
    margin: 0 auto 30px;
  }
  .sec_company .img img {
    transition: all 0.5s ease-in-out;
    width: 100%;
  }
  .sec_company .img img:hover {
    transform: scale(1.1);
  }
}




/*-----------------------------------------
SERVICE
-----------------------------------------*/
.sec_service {
  padding: 30px 2% 150px;
  margin-bottom: 30px;
  background: #000 url("../images/index/cha_ba01.png") no-repeat;
  background-size: cover;
}
.sec_service ul {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  justify-content: space-between;
}
.sec_service ul li {
  width: 31%;
}
.sec_service ul li:not(:last-child) {
  margin-right: 2%;
}
.sec_service ul li a {
  background: rgba(255, 255, 255, 0.1);
  display: block;
  width: 100%;
  border: 1px solid #fff;
  padding: 80px 0;
  text-align: center;
  transition: all 0.5s ease-in-out;
}
.sec_service ul li a:hover {
  background: rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
  .sec_service {
    padding: 30px 5% 25vw;
    margin-bottom: 45vw;
  }
  .sec_service ul {
  flex-direction: column-reverse;
  }
  .sec_service ul li {
    width: 100%;
    margin-bottom: 20px;
  }
  .sec_service ul li:not(:last-child) {
  }
  .sec_service ul li a {
    padding: 30px 0;
  }
  .sec_service ul li a:hover {
    background: rgba(0, 0, 0, 0.1);
  
  }
}


/*-----------------------------------------
CHALLENGE
-----------------------------------------*/
.sec_challenge {
  margin-bottom: 50px;
	position: relative;
}
.sec_challenge .logo {
  position: absolute;
  top: -140px;
  left: 2%;
  width: 48%;
  max-width: 854px;
}
@media screen and (max-width: 768px) {
  .sec_challenge {
    margin-bottom: 50px;
  }
.sec_challenge .logo {
  top: -60vw;
  left: 50%;
  -webkit-transform : translateX(-50%);
  transform : translateX(-50%);
  width: 90%;
}
}



/*-----------------------------------------
etc.
-----------------------------------------*/
.sec_etc ul {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}
.sec_etc ul li {
  width: 50%;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .sec_etc ul {
    
display: block;
  }
  .sec_etc ul li {
    width: 100%;
    margin-bottom: 40px;
  }
#top .sec_etc h3 span {
    display: block!important;
    margin-left: 0;
}
}



/*-----------------------------------------
inview
-----------------------------------------*/
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.delay-time {
	transition-delay:0.5s;
	/*animation-delay: 2.5s;*/
}


/*-----------------------------------------
ロゴアニメーション
-----------------------------------------*/
#op {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #007731;
  z-index: 150;
  pointer-events: none;
  /* display: none; */
}
#op-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 155;
  pointer-events: none;
  /* display: none; */
}
#op-logo span {
  position: absolute;
  top: 20px;
  left: 2vw;
  z-index: 155;
}
#op-logo img {
  width: calc(110px + 10vw);
  height: calc(34px + 9vw);
}
@media only screen and (max-width: 768px){
#op {
}
#op-logo {
}
#op-logo span {
  top: 8px;
  left: 5%;
}
#op-logo img {
  width: 70px;
  height: auto;
  /* max-width: 110px; */
}
}