@charset "utf-8";

/*===========================================================*/
/*画面遷移のためのCSS */
/*===========================================================*/
/*画面遷移アニメーション*/
body.appear .splashbg{
display: block;position:fixed;z-index: 999;
width: 100%;height: 100vh;top: 0;left: 0;
transform: scaleY(0);
animation-name:PageAnime;
animation-duration:0s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;}

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

/*画面遷移の後現れるコンテンツ設定*/
#wrapper{opacity: 0;}/*元　0*/

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

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

/*===========================================================*/
/* ページの指定の高さを超えたら右から　TOP が出現*/
/*===========================================================*/
/*リンクの形状*/
#page-top a{
	display: flex;justify-content:center;align-items:center;
	background:#eb6100;color: #fff;
	width: 60px;height: 50px;
	text-align: center;text-transform: uppercase;
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;}
#page-top a:hover{background: #777;}
/*リンクを右下に固定*/
#page-top {
	position: fixed;right: 0;bottom:0;
	z-index: 2;opacity: 0;transform: translateX(100px);}
/*　左の動き　*/
#page-top.LeftMove{animation: LeftAnime 0.5s forwards;}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*===========================================================*/
/* 左から右への動き*/
/*===========================================================*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-fill-mode:forwards;position: relative;overflow: hidden;
	opacity:0;
}
@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }
  to {
    opacity:1;
}
}
/*slide img の中の文字「遺伝子組み換え食品いらない！キャンペーン」に伸びるオレンジの線　*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;/*1sでOK*/
	animation-fill-mode:forwards;content: "";position: absolute;
  width: 100%;
  height: 120%;
  background-color: darkgreen;
}
@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);
	}
}

/* スマホ表示用。flipLeftTriggerを指定している親要素に指定しないとうまく動かない*/
#vision,.service-area{transform:  translate3d(0, 0, 0);}
/*===========================================================*/
/* スクロールすると下のエリアがヘッダーにかぶさる*/
/* ここではなく、front-page_main.css に入れればOK　のはず*/
/*===========================================================*/
/*#container{position: relative;z-index:1;background:#fff;}*/