@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

/*------ヘッダー-----*/
@media screen and (min-width:980px){
#index_topimg::before {
	/*background: linear-gradient(55deg, rgb(60 60 90), rgb(60 60 90),rgb(75 49 139 / 99%), rgb(60 60 90));*/
	background-image: url("../img/bg-p.png");
    content: "";
    height: 664px;
    left: 0px;
    content: "";
    position: absolute;
    width: 30vw;
    z-index: 0;
	}
	
#index_topimg2::before {
	background: linear-gradient(55deg, rgb(60 60 90), rgb(60 60 90),rgb(75 49 139 / 99%), rgb(60 60 90));
    content: "";
    height: 74px;
    left: 0px;
    content: "";
    position: absolute;
    width: 30vw;
    z-index: 0;
	}
}


@media screen and (max-width:980px){
#index_topimg::before {
	background: linear-gradient(55deg, rgb(60 60 90), rgb(60 60 90),rgb(75 49 139 / 99%), rgb(60 60 90));
    content: "";
    height: 6%;
    left: 0px;
    content: "";
    position: absolute;
    width: 100%;
    z-index: 0;
	}
}

/*------ヘッダー-----*/


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

.title{
	margin-top: 1em;
	}
	
.title p{
	margin:20px 10px;
	font-size:1.5rem;
	letter-spacing: 1px;
    font-size: 57px;
    font-weight: bold;
    line-height: 1.6em;
    color:#d33737;
	}
	
.text-split {
  overflow: hidden;
    font-size: 65px;
    font-weight: bold;
    line-height: 2em;
    color:#ffffff;
    letter-spacing: 0.01em;
	}
	
.text-split span {
  display: inline-block;
  min-width: 0.15em;
	}

.movie{
    width: 1240px;
	margin:auto;
	}
	
.js-video{
	border-radius:0px 50px 0px 0px;
    padding: 0px 0px 0px 30px;
    width: 100%;
    object-fit: cover;
    height: 582px;
    object-position: 0% 50%;
    width: 94vw;
    max-width: 100%;
	}
	
.half_top{
	margin-bottom: 4em;
    float: left;
    width: 97%;
	}
	
.indexmap{
	height:430px;
	margin-top: 20px;
	}
	
	
}


@media screen and (max-width:980px){
.title{
	float:left;
	margin-top: 0em;
	margin-left: -0.5em;
	}
	
.title p{
	font-size:8vw;
	margin: 5px;
    font-weight: bold;
    line-height: 1.6em;
	letter-spacing: 1px;
    color:#d33737;
	}

.text-split {
  overflow: hidden;
    font-size: 8vw;
    font-weight: bold;
    line-height: 1.5em;
    color:#fff;
	}
	
.js-video{
	border-radius:0px 50px 0px 0px;
    padding: 0px;
    width: 100%;
    margin-top: 55px;
    object-fit: cover;
    height: auto;
    object-position: 0% 50%;
	}
	
.half_top{
	margin-bottom: 4em;
    float: left;
    width: 100%;
	}
	
.indexmap{
	height:350px;
	}

}


/*==================================================
背景色が伸びて出現
===================================*/

/*全共通*/

.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
  }
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
	}
}

/*左から右*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00479d;/*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定*/

.bgLRextendTrigger{
    opacity: 0;
}
.bgappearTrigger{
    opacity: 0;
}



.block {
  flex-direction: column;
  justify-content: center;
  padding: 10px 0vw;
  font-size: 8vw;
  color: #fff;
}
.block:nth-of-type(5n+1) {
}
.block:nth-of-type(5n+2) {
  background-color: #2340B7;
}
.block:nth-of-type(5n+3) {
  background-color: #cf1b00;
}
.block:nth-of-type(5n+4) {
  background-color: #1a1a1a;
}
.block:nth-of-type(5n+5) {
  background-color: #EBEBF2;
}


.block--1 .text-split span {
  transform: translateY(100%);
}
.block--1 .is-active .text-split span {
  transform: translateY(0);
  transition: transform cubic-bezier(0.7, 0.2, 0.1, 1) 0.8s;
}
.block--1 .is-active .text-split span:nth-child(1) {
  transition-delay: 0s;
}
.block--1 .is-active .text-split span:nth-child(2) {
  transition-delay: 0.04s;
}
.block--1 .is-active .text-split span:nth-child(3) {
  transition-delay: 0.08s;
}
.block--1 .is-active .text-split span:nth-child(4) {
  transition-delay: 0.12s;
}
.block--1 .is-active .text-split span:nth-child(5) {
  transition-delay: 0.16s;
}
.block--1 .is-active .text-split span:nth-child(6) {
  transition-delay: 0.2s;
}
.block--1 .is-active .text-split span:nth-child(7) {
  transition-delay: 0.24s;
}
.block--1 .is-active .text-split span:nth-child(8) {
  transition-delay: 0.28s;
}
.block--1 .is-active .text-split span:nth-child(9) {
  transition-delay: 0.32s;
}
.block--1 .is-active .text-split span:nth-child(10) {
  transition-delay: 0.36s;
}
.block--1 .is-active .text-split span:nth-child(11) {
  transition-delay: 0.4s;
}
.block--1 .is-active .text-split span:nth-child(12) {
  transition-delay: 0.44s;
}
.block--1 .is-active .text-split span:nth-child(13) {
  transition-delay: 0.48s;
}


@media screen and (min-width:980px){
.achievemets{
	position: absolute;
	float: right;
    width: 150px;
    right: 80px;
    margin-top: -230px;
	}
}

@media screen and (max-width:980px){
.achievemets{
	position: absolute;
    float: right;
    width: 25%;
    max-width: 150px;
    right: 0.5em;
    margin-top: -26vw;
	}
}