@charset "utf-8";
.bg-container {
  height: 100%;
  background: rgba(8 , 83, 167, 1);
  overflow:hidden;
}

.bg-slideshow {
  height: calc(50vh - 22px);/* .bg-slideshow2 と合算で93px（固定部の高さ）. 25pxは上部固定に潜り込む50px分を分配計算*/
  width:8000px;
  background: url("/top/img/bg/bg_slide.jpg?20180423") repeat left top;
  background-size:auto 201%;
  animation: slide 80s linear infinite;
  z-index:0;
}
.bg-slideshow2 {
  height: calc(50vh - 71px);
  width:8000px;
  background: url("/top/img/bg/bg_slide.jpg?20180423") repeat  left bottom;
  background-size:auto 201%;
  animation: slide2 80s linear infinite;
  z-index:0;
}

.bg_overlay {
  position:absolute;
  width:100%;
  height: calc(100vh - 93px);
  background: url("/top/img/bg/bg_overlay.png") no-repeat  center center transparent;
  background-size:auto 100%;
  z-index:5;
}
.bg-slider_title{
  position:absolute;
  display:flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;

  width:100%;
  height: calc(100vh - 50px);
  font-weight: 500;
  z-index:10;
  margin:0 auto;
}
.bg-slider_title span {
  display:block;
  align-self: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  text-align:center;
}
.bg-slider_title span{
	font-size: calc(100vw / 18);/* 最長11文字＋余白1文字分×2*/
  line-height: calc(120vw / 18);
}

.bg-slider_title_br {
  display:none;
}

.hero-arrow {
  position:absolute;
  margin-top:-10vh;
  width:100%;
  text-align:center;
  z-index:10;
}


@keyframes slide  { 0%{ transform: translate3d(-4000px, 0, 0); } 100%{ transform: translate3d(0px, 0, 0);} }
@keyframes slide2 { 0%{ transform: translate3d(0, 0, 0); } 100%{ transform: translate3d(-4000px, 0, 0);} }

@keyframes slide_sp  { 0%{ transform: translate3d(-1600px, 0, 0); } 100%{ transform: translate3d(0px, 0, 0);} }
@keyframes slide_sp2 { 0%{ transform: translate3d(0, 0, 0); } 100%{ transform: translate3d(-1600px, 0, 0);} }

@media screen and (min-width: 1600px) {

  .bg-slideshow {
    width:8000px;
    background: url("/top/img/bg/bg_slide_x2.jpg?20180423") repeat left top;
    background-size:auto 201%;
    animation: slide 80s linear infinite;
  }
  .bg-slideshow2 {
    width:8000px;
    background: url("/top/img/bg/bg_slide_x2.jpg?20180423") repeat left bottom;
    background-size:auto 201%;
    animation: slide2 80s linear infinite;
  }

}

@media screen and (max-width: 768px) {
  .bg-container {
    height: calc( 100vh - 113px);
  }
  .bg-slideshow {
    height: calc(50vh - 32px);/* 2と合算で113. news を入れる場合は143*/
  }
  .bg-slideshow2 {
    height: calc(50vh - 81px);
  }
  .bg-slider_title{
  }
  .bg-slider_title span{
    font-size: calc(100vw / 13);/* 最長11文字＋余白1文字分×2*/
    line-height: calc(120vw / 13);
  }
  .bg-slider_title_br {
    display:block;
  }

  .bg-container_en .bg-slider_title span{
    font-size: calc(100vw / 14);/* 最長11文字＋余白1文字分×2*/
    padding:0 20px;
  }
}

@media screen and (max-width: 480px) {
  .bg-container {
    height: calc( 100vh - 193px);
  }
  .bg-slideshow {
    height: calc(50vh - 72px);/* 2と合算で193*/
    width:3200px;
    background: url("/top/img/bg/bg_slide_sp.jpg?20180423") repeat left top;
    background-size:auto 201%;
    animation: slide_sp 46s linear infinite;
  }
  .bg-slideshow2 {
    height: calc(50vh - 121px);
    width:3200px;
    background: url("/top/img/bg/bg_slide_sp.jpg?20180423") repeat left bottom;
    background-size:auto 201%;
    animation: slide_sp2 46s linear infinite;
  }
  .bg_overlay {
    position:absolute;
    width:100%;
    height: calc(100vh - 193px);
    background: url("/top/img/bg/bg_overlay_sp.png") no-repeat right center transparent;
    background-size:auto 100%;
    z-index:5;
  }
  .bg-slider_title{
    height: calc(100vh - 143px);
  }
  .bg-slider_title span{
    font-size: calc(100vw / 13);/* 最長11文字＋余白1文字分×2*/
    line-height: calc(120vw / 11);
  }

  .bg-container_en .bg-slider_title span{
    font-size: calc(100vw / 12);/* 最長11文字＋余白1文字分×2*/
  }

}