@charset "UTF-8";

.logo img:hover{
	 opacity: .3;
	 transition: .3s;
}

.menu li:hover{
	 opacity: .3;
}

.fadein {
        opacity: 0;
        /* transform : translate(0, 40px); */
        transition : .5s;
    }
    
.fadein.scrollin {
        opacity: 1;
	    /* transform: translate(0, 0); */
    }

/*== 矢印の線がループして伸縮 */

.btnlinestretches5{
    /*リンクの形状*/ 
	color:#333;
    padding: 15px 0;
}

/*線の設定*/
.btnlinestretches5::before {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    /*線の形状*/
    width: 100%;
    height: 1px;
    background: white;
}

/*線と矢印を繰り返しアニメーション*/
.btnlinestretches5::before {
    animation: arrowlong01 4s ease infinite;
}

@keyframes arrowlong01{
    0%{width:0;opacity:0}
    20%{width:0;opacity:1}
    80%{width:100%;opacity:1}
    100%{width:100%;opacity:0}
}

/* 文字が一文字ずつ出てくる */
.title {
    overflow: hidden;
  }
  
  .title span {
    display: block;
    transform: translate(0, 100%);
    transition: transform cubic-bezier(0.215, 0.61, 0.6, 1) 0.75s;
  }
  
  .title.-visible span {
    transform: translate(0, 0);
  }
  
  .title span:nth-child(2) {
    transition-delay: 0s;
  }

/* サブタイトルを表示 */

.fade {
    animation-name: fadeup;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    opacity: 0;
  }

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

  .fade-2 {
    animation-name: fadeup-2;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
    opacity: 0;
  }

@keyframes fadeup-2 {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /* スライドする要素 */
  .content {
    font-size:120px;
    color:white;
    -webkit-text-stroke: 1px #002B5C;
    margin:0 50px 0 0;
    opacity: .3;
    font-weight:900;
  }
  /* スライドレールの枠 */
  .wrap {
    overflow: hidden;
    display: flex;
    transform: translateY(70px);
  }
  /* content4つをまとめたスライドブロック */
  .slideshow {
    display: flex;
    -webkit-animation: loop-slide 30s infinite linear 1s both;
    animation: loop-slide 30s infinite linear 1s both;
    width:auto;flex-wrap: nowrap;
  }
  @-webkit-keyframes loop-slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes loop-slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

  footer .wrap{
    transform: translateY(0);
    margin:0 0 50px 0;
  }

  .t-wrap{
    transform: translateY(10px);
    margin:0 0 50px 0;
  }

  /* 文字アニメーション */
  h6.class{
    fill: none;
    stroke: #002B5C; /*線の色を指定する*/
    stroke-dasharray: 2000;/*線の間隔を指定する*/
    stroke-dashoffset: 0;/*線の位置を指定する(IEは効かない属性)*/
    stroke-width: 0.3;/*線の太さを指定する*/
    -webkit-animation: hello 2s ease-in forwards;
    animation: hello 2s ease-in forwards;
	opacity: 100;
}
 @-webkit-keyframes hello {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent; /*透過*/
}
 50% {
 fill:transparent; /*透過*/
}
 100% {
 stroke-dashoffset: 0;
 fill:#002B5C;
}
}
@keyframes hello {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent; /*透過*/
}
 50% {
 fill:transparent; /*透過*/
}
 100% {
 stroke-dashoffset: 0;
 fill:#002B5C;
}
}

/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100vh;
	background: white;
	z-index: 9999999;
	text-align:center;
}

/*========= 画面遷移のためのCSS ===============*/
/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	  z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	  left: 0;
    transform: scaleX(0);
    background-color: #002B5C;/*伸びる背景色の設定*/
	  animation-name:PageAnime;
	  animation-duration:1.2s;
	  animation-timing-function:ease-in-out;
	  animation-fill-mode:forwards;
}

@keyframes PageAnime{
	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);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

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