@charset "utf-8";
/*===========================================================*/
/*背景色が伸びる（中央から上下）*/
/*===========================================================*/


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

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    font-size: 1.2rem;
    letter-spacing: 0.2em;
}

#splash-logo img {
  height: 300px;
  width: 300px;
}

@media screen and (max-width:576px) {
  #splash-logo img {
    height: 100%;
    width: 100%;
  }
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg1,
.splashbg2{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
#body-green.appear .splashbg1,
#body-green.appear .splashbg2{
	display:block;
}

/*上に消えるエリア*/
#body-green.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:#35c290;/*伸びる背景色の設定*/
}

@keyframes PageAnime{
	0% {
		transform-origin:top;
		transform:scaleY(1);
	}

	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

/*下に消えるエリア*/
#body-green.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:#35C290;/*伸びる背景色の設定*/
}

@keyframes PageAnime2{
	0% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#appear-container{
	opacity: 0;/*はじめは透過0に*/
  position: relative;
  z-index: 1;
  overflow: hidden;
}

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

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

/*==================================================
印象編 4 最低限おぼえておきたい動き
===================================*/

/* 4-2 パタッ（下へ） */

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

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
 	opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
	opacity: 1;
  }
}

/* 4-1 ふわっ（下から） */

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

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

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


/* 4-1 ふわっ（左から）*/

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

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

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

/* 4-1 ふわっ（右から） */

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

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

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

/* スクロールをしたら出現する要素にはじめに透過0を指定 */
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*===========================================================*/
/*機能編  5-1-12 クリックしたらナビが下から上に出現 */
/*===========================================================*/
#g-nav{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  bottom:-120%;
  width:100%;
  height: 120%;/*ナビの高さ*/
  background:#fff;
  /*動き*/
  transition: all 0.6s;
  overflow: scroll;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
  bottom: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav #g-nav-list{
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 120vh;/*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  /* top:50%; */
  top:60%;
  left:50%;
  transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
list-style: none;
  text-align: center; 
}

#g-nav li a{
color: #333;
text-decoration: none;
padding:25px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 32px;
transition: color 0.4s;
}

@media screen and (max-width:768px) {
  #g-nav li a{
    padding: 18px;
  }
}

@media screen and (max-width:576px) {
  #g-nav li a {
    font-size: 18px;
  }
}

#g-nav li a:hover{
  opacity: 0.6;
  color: #35c290;
  transition: color 0.4s;
}

/*===========================================================*/
/*機能編  5-2-1 3本線が×に*/
/*===========================================================*/

.openbtn{
  display: none;
}

@media screen and (max-width:768px) {

  .openbtn{
    display: block;
    position:absolute;
    top:35px;
    right:15px;
    z-index: 9999;/*ボタンを最前面に*/
    cursor: pointer;
    width: 94px;
    height:94px;
    background:#35c290;
  }

  /*×に変化*/	
  .openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 23px;
    height: 3px;
    border-radius: 2px;
  background-color: #fff;
    width: 45%;
  }

  .openbtn span:nth-of-type(1) {
  top:33px;	
  }

  .openbtn span:nth-of-type(2) {
  top:46px;
  }

  .openbtn span:nth-of-type(3) {
  top:58px;
  }

  .openbtn.active span:nth-of-type(1) {
    top: 41px;
    left: 28px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
  }

  .openbtn.active span:nth-of-type(2) {
  opacity: 0;
  }

  .openbtn.active span:nth-of-type(3){
    top: 52px;
    left: 28px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
  }
  }

  @media screen and (max-width:768px) {
    .openbtn{
        width: 50px;
        height: 50px;
  }
  /*×に変化*/	
  .openbtn span{
    left: 13px;
  }

  .openbtn span:nth-of-type(1) {
  top:14px;	
  }

  .openbtn span:nth-of-type(2) {
  top:24px;
  }

  .openbtn span:nth-of-type(3) {
  top:34px;
  }

  .openbtn.active span:nth-of-type(1) {
    top: 19px;
    left: 17px;
  }

  .openbtn.active span:nth-of-type(3){
    top: 31px;
    left: 17px;
  }
  
}

/*===========================================================*/
/*印象編 8-10 テキストがタイピング風に出現*/
/*===========================================================*/

.TextTyping span {
	display: none;
}

.TextTyping::after {
  content: "|";
	animation: typinganime .8s ease infinite;
  font-weight: normal;
  padding: 0 0 0 10px;
  font-size: 70px;
}

@media screen and (max-width:768px) {
  .TextTyping::after {
    font-size: 40px;
  }
}

@media screen and (max-width:340px) {
  .TextTyping::after {
    font-size: 30px;
  }
}

@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}

/*== ボタン共通設定 */
.btn{
  /*アニメーションの起点とするためrelativeを指定*/
  position: relative;
  overflow: hidden;
  /*アニメーションの指定*/   
  transition: ease .2s;
}

/*== 動画の読み込み */
.sp-video {
  display: block;
}

.pc-video {
  display: none;
}

@media screen and (min-width: 576px) {
  .sp-video {
    display: none;
  }

  .pc-video {
    display: block;
  }
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }


/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}