@charset "utf-8";
/* 機能関係のCSS */
/* 基本の動き */
.fadeIn{
animation-name: fadeInAnime;
animation-delay: 1s;
animation-duration: 1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeUp{
animation-name: fadeUpAnime;
animation-delay: 1s;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

.fadeLeft{
animation-name: fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

.fadeRight{
animation-name: fadeRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}


.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:5s;
	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: #666;
}
@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);
	}
}

.bgRLextend::before{
	animation-name:bgRLextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;
}
@keyframes bgRLextendAnime{
	0% {
		transform-origin:right;
		transform:scaleX(0);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}

.bgDUextend::before{
	animation-name:bgDUextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;
}
@keyframes bgDUextendAnime{
	0% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
	50% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:top;
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

.bgUDextend::before{
	animation-name:bgUDextendAnime;
	animation-duration:5s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;
}
@keyframes bgUDextendAnime{
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}

.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}




/* 左右から線が伸びて枠線になる 
.nav-list-top li{
  	position: relative;
  	margin: 0 5px;
}

.nav-list-top li::before,
.nav-list-top li::after{
  	content:"";
  	position: absolute;
  	width: 0;
  	height:2px;
  	background:#0091d1;
  	transition: all 0.2s linear;
  	transition-delay: 0.2s;
}

@media screen and (max-width:1300px) {
.nav-list-top li::before,
.nav-list-top li::after{
  	background:#fff;
    }
}

.nav-list-top li::before{
  right: 0;
  top: 0;
}
.nav-list-top li::after{
  left: 0;
  bottom: 0;
}

.nav-list-top li span{
  	display: block;
}

.nav-list-top li span::before,
.nav-list-top li span::after{
  	content:"";
  	position: absolute;
	
  	width:1px;
  	height:0;
  	background: #0091d1;
	
  	transition: all 0.2s linear;
}

.nav-list-top li span::before{
  	left: 0;
  	top: 0;
}
.nav-list-top li span::after{
  	right: 0;
  	bottom: 0;
}

.nav-list-top li:hover::before,
.nav-list-top li:hover::after{
  	width: 100%;
}

.nav-list-top li:hover span::before,
.nav-list-top li:hover span::after{
  	height: 100%;
}
*/

/* スクロール途中でヘッダーが消え、上にスクロールすると復活 */
/*　上に上がる動き　*/
#header.UpMove1{
	animation: UpAnime1 0.5s forwards;
}
@keyframes UpAnime1{
  from {
    opacity: 1;
	transform: translateY(0);
  }
  to {
    opacity: 0;
	transform: translateY(-50px);
  }
}

/*　下に下がる動き　*/
#header.DownMove1{
	animation: DownAnime1 0.5s forwards;
}
@keyframes DownAnime1{
  from {
  	opacity: 0;
	transform: translateY(-50px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}


/* プログレスバー＋数字カウントアップ＋画面が開く */
/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
    z-index: 999;
	transform: translate(-50%, -50%);
	color: #fff;
	width: 100%;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 2px;
}

/*割れる画面のアニメーション*/
.loader_cover {
    width: 100%;
    height: 50%;
    background: #0091d1;
    transition: all .2s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}
/*上の画面*/
.loader_cover-up {
    transform-origin: center top;
}

/*下の画面*/
.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}
/*クラス名がついたらY軸方向に0*/
.coveranime {
    transform: scaleY(0);
}



@media screen and (max-width:1300px) {
/*アクティブになったエリア*/
#main-nav.hum-active{
    position:fixed;
    z-index: 999;
	top: 0;
	width:100%;
    height: 100vh;
}

/*丸の拡大*/
.circle-back{
    position: fixed;
	z-index:3;

    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #0091d1;

	transform: scale(0);
	right:0%;
    top:-50px;
    transition: all .6s;
}

.circle-back.circle-active{
	transform: scale(50);
}

/*
#main-nav-list{
    display: none;
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
*/

#main-nav.hum-active #main-nav-list{
     display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#main-nav ul {
	opacity: 0;/*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*背景が出現後にナビゲーションを表示*/
#main-nav.hum-active ul {
    opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#main-nav.hum-active ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}


/*リストのレイアウト設定*/
#main-nav li{
	text-align: center; 
	list-style: none;
    margin: 0 0 10px 0;
}

#main-nav li a{
	color: #fff;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}
}

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


/* ページトップのためのCSS */
/*　上に上がる動き　*/
#page-top.UpMove2{
  animation: UpAnime2 0.5s forwards;
}
@keyframes UpAnime2{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#page-top.DownMove2{
  animation: DownAnime2 0.5s forwards;
}
@keyframes DownAnime2{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(100px);
  }
}



/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
  	overflow: hidden;
    /*ボタンの形状*/
  	text-decoration: none;
  	display: inline-block;
	background: #fff;
    padding: 5px 30px !important;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	border-radius: 15px;
}

/*ボタン内spanの形状*/
.btn span {
  	position: relative;
  	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  	color:#00913a;
}

.btn:hover span{
  	color:#fff;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
  	content: '';
  	  /*絶対配置で位置を指定*/
  	position: absolute;
  	top: 0;
  	left: 0;
  	z-index: 2;
  	  /*色や形状*/
  	background:#00913a;/*背景色*/
  	width: 100%;
  	height: 100%;
  	  /*アニメーション*/
  	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  	transform: scale(0, 1);
  	transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
  	transform-origin:left top;
  	transform:scale(1, 1);
}





/*スクロールダウン全体の場所*/
/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
  position: absolute;
  left:-15px;
  top: -15px;
    /*テキストの形状*/
  color: #000;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 1px;
  height: 30px;
  background: #000;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}


/*矢印が右に移動する あとで使うかな？
.dli-caret-circle-fill-right {
  	position: relative;
	bottom: 0;
	transition: 0.5s;
}
.dli-caret-circle-fill-right:hover{
    transform: translate(50px, 0);
}
*/

@media screen and (max-width:750px) {
.btn-arrow {
	padding: 0;
	margin: 0;
}
}


/*== くるっと回転（奥に） */
.member-main-con-img {
    /*背景の基点とするためrelativeを指定*/
    position: relative;
    width:100%;
    text-align: center;
    outline: none;
	
	background: #000;
}

/*ボタン内側の設定*/
.member-main-con-img img {
    display: block;
    position: absolute;
    width: 100%;
	border-radius: 10px;
    /* アニメーションの設定 数字が少なくなるほど早く回転 */
    transition: 0.5s;
}

/* 回転前 */
.rotateback img:nth-child(1) {
    transform: rotateY(0deg);/*はじめは回転なし*/
    transform-origin: center;/* 回転する起点 */
	
	z-index: 5;
}

/*hoverをした後の形状*/
.rotateback:hover img:nth-child(1) {
    transform: rotateY(180deg);/* X軸に90度回転 */
	
	z-index: 1;
}

/* 回転後 */
.rotateback img:nth-child(2) {
    transform: rotateY(-180deg);/*はじめはX軸に-90度回転*/
    transform-origin: center;/* 回転する起点 */
	
	z-index: 1;
}

/*hoverをした後の形状*/
.rotateback:hover img:nth-child(2) {
    transform: rotateY(0deg);/* X軸に0度回転 */
	
	z-index: 5;
}





/*==================================================
機能編 　9-1-5 スクロールをするとエリアの高さに合わせて線が伸びる
===================================*/

/*========= バー表示のためのCSS ===============*/

/*タイムライン全体の設定*/

.timeline li{
    /*線の起点とするためrelativeを設定*/
    position: relative;
	list-style: none;
	padding:0 0 20px 0;
}

.timeline dl{
	margin:0 0 20px 3em;
}


/*絶対配置で線を設定*/
.border-line {
    /*線の位置*/
	position: absolute;
	left:0.2em;
	top:0;
	width:2px;/*線の太さ*/
	height:0;/*はじめは高さを0に*/
	background: #999999;
}

/*タイムラインの見出し横の丸の位置と形状*/
.timeline li::after{
	content:'';
	position: absolute;
	top:0;
	left:0;
	width:10px;
	height: 10px;
	background:#999999;
	border-radius: 50%;
}

/*波のアニメーション*/
.wave{
	position:relative;
	height:300px;/*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
}
canvas{
	position: absolute;
	bottom: 0;
	left:0;
	width: 100%;
}
#waveCanvas01{
	transform: scaleY(-1);
	top:0;
}

/*流体のアニメーション*/
.fluid {
  width:120vh;/*横幅*/
  height: 60vh;/*縦幅*/
  background-color:rgba(0,145,58,0.2);/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
}
@media screen and (max-width:1000px) {
.fluid {
  width:100%;/*横幅*/
  height: 50vh;/*縦幅*/
}
}

@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 74% 26% 51% 49% / 66% 29% 71% 34%;
}
14% {
    border-radius: 51% 49% 36% 64% / 66% 29% 71% 34%;
}
28% {
    border-radius: 32% 68% 14% 86% / 44% 50% 50% 56%;
}
42% {
    border-radius: 37% 63% 29% 71% / 22% 65% 35% 78%;
}
56% {
    border-radius: 50% 50% 65% 35% / 65% 37% 63% 35%;
}
70% {
    border-radius: 32% 68% 56% 44% / 70% 57% 43% 30%;
}
84% {
    border-radius: 19% 81% 20% 80% / 64% 79% 21% 36%;
}
	  
}