@charset "utf-8";
/* ローディング */
#splash{
	position: fixed;
	width: 100%;
	height: 100%;
	background: url("../images/loading.png");
    background-size: cover;
	z-index: 9999999;
	text-align:center;
}
#splash-logo{
    position: absolute;
    top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    width: 100%;
}
#splash-logo img{
    width: 90%;
    max-width: 700px;
    margin: 0 auto;
}
@media screen and (max-width: 1024px) {
    #splash{
        background-position-x: -200px;
    }
}
@media screen and (max-width: 450px) {
    #splash{
        position: fixed;
        width: 100%;
        height: 100%;
        background: url("../images/loading_sp.png");
        background-size: cover;
        z-index: 9999999;
        text-align:center;
    }
}
/*-- 文字が左から右へ --*/
/*
.slide-in {
	overflow: hidden;
    display: inline-block;
}
.slide-in_inner {
	display: inline-block;
}
/*左右のアニメーション*/
/*
.leftAnime{
    opacity: 0;
}
.slideAnimeLeftRight {
	animation-name: slideTextX100;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes slideTextX100 {
  from {
	transform: translateX(-100%);
        opacity: 0;
  }
  to {
	transform: translateX(0);
    opacity: 1;
  }
}
.slideAnimeRightLeft {
	animation-name: slideTextX-100;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);
    opacity: 0;
  }
  to {
	transform: translateX(0);
    opacity: 1;
  }
}
*/
/* 画面遷移アニメーション */
.splashbg1,
.splashbg2{
	display: none;
}
body.appear .splashbg1,
body.appear .splashbg2{
	display: block;
}
body.appear .splashbg1{
	animation-name:PageAnime;
	animation-duration:1.4s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    bottom:50%;
	left:0;
    transform: scaleY(1);
    background-color: #0f3921;
}
@keyframes PageAnime{
	0% {
		transform-origin:top;
		transform:scaleY(1);
	}

	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}
/*下に消えるエリア*/
body.appear .splashbg2{
    animation-name:PageAnime2;
	animation-duration:1.4s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 50%;
	left:0;
    transform: scaleY(1);
    background-color: #0f3921;
}
@keyframes PageAnime2{
	0% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}
/* 画面遷移の後現れるコンテンツ設定 */
#fixed-bg{
	opacity: 0;
}
/* bodyにappearクラスがついたら出現 */
body.appear #fixed-bg{
	animation-name:PageAnimeAppear;
	animation-duration: 0.8s;
	animation-delay: 0.2s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
    }
}
/* 画面遷移後 */
#wrapper{
	opacity: 0;
}
body.appear #wrapper{
	animation-name:PageAnimeAppear;
	animation-duration: 0.8s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
}
/* パスワードエラーのときの表示 */
body.password-error #splash,
body.password-error .splashbg1,
body.password-error .splashbg2 {
    display: none !important;
}
body.password-error #wrapper,
body.password-error #fixed-bg{
    opacity: 1 !important;
}
/*---フローティングボタン---*/
#fixed-btn{
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 580px;
    left: 50%;
    transform: translate(-50% ,100px);
    z-index: 9;
    opacity: 0;
}
#fixed-btn.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translate(-50% , 100px);
  }
  to {
    opacity: 1;
	transform: translate(-50% , 0);
  }
}
/*　下に下がる動き　*/
#fixed-btn.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translate(-50% , 0);
  }
  to {
  	opacity: 1;
	transform: translate(-50% , 100px);
  }
}
.btn-group{
    display: flex;
}
.btn-line,
.btn-mail,
.btn-members{
    flex: 1;
    height: 80px;
    text-align: center;
    line-height: 1.5;
    font-size: 110%;
}
.btn-line a,
.btn-mail a,
.btn-members a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    border: 1px solid #faf2ce;
    color: #faf2ce;
    transition: all .2s;
}
.btn-line a{
    background-color: #104823;
    transition: all .2s;
}
.btn-mail a{
    background-color: #197242;
    transition: all .2s;
}
.btn-members a{
    background-color: #27a96c;
    transition: all .2s;
}
.btn-line a:hover{
    background-color: #faf2ce;
    border: 1px solid #104823;
    color: #104823;
}
.btn-mail a:hover{
    background-color: #faf2ce;
    border: 1px solid #27a96c;
    color: #27a96c;
}
.btn-members a:hover{
    background-color: #faf2ce;
    border: 1px solid #197242;
    color: #197242;
}
/*---スクロールアニメーション---*/
.fadeInUpTrigger,
.fadeInDownTrigger,
.fadeInTrigger{
	opacity: 0;
}