@charset "utf-8";

/*===========================================================*/
/*機能編  4-1-3　プログレスバー＋数字カウントアップ＋画面が開く*/
/*===========================================================*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 99999;
	text-align:center;
	color:#fff;}

/* Loading画像中央配置　*/
#splash_text {
	font-family: "Jost", sans-serif;
	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:#017490;
    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);}

/*フォームボタンの形状*/
.btn-click{
	font-family: "Jost", sans-serif;
	font-size: 1.2em;
    padding: 10px 50px;
    border-radius:30px;
    text-decoration: none;
    border:2px solid #fff;
    color: #fff;}
.btn-click:hover{
    /*ボタンの形状*/
    border-color:transparent;
    color: #000;
    /*背景の色と形状*/
    background: #fff;
    background-size: 200% auto;
    background-position: right center;}

.btn-map{
	margin-top: 50px;
	text-align: center;}    
.btn-form{
	text-align: center;}


/*===========================================================*/
/*機能編 6-1-3	ゆっくりズームアウトさせながら全画面で見せる*/
/*===========================================================*/
#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/}


/*==================================================
機能編　5-2-2 ボタン：2本線が×に
===================================*/

/*ボタン外側*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;}
	
/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 13px;
    height: 3px;
	background-color: #fff;}
.openbtn span:nth-of-type(1) {
	top:22px;	
  	width: 50%;}
.openbtn span:nth-of-type(2) {
	top:29px;
  	width:30%;}

/*activeクラスが付与されると線が回転して×に*/
.openbtn.active span:nth-of-type(1) {
    top: 20px;
    left: 16px;
    transform: translateY(6px) rotate(-45deg);
    width: 35%;}
.openbtn.active span:nth-of-type(2) {
    top: 32px;
    left: 16px;
    transform: translateY(-6px) rotate(45deg);
    width: 35%;}


	
/*==================================================
機能編　5-1-25 クリックしたらナビ背景コンテンツがぼかされる※IE11非対応
===================================*/

/*========= ぼかしのためのCSS ===============*/

.mainblur{filter: blur(8px);}

/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
    z-index: -1;
    opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
    top:0;
    width:100%;
    height: 100vh;/*ナビの高さ*/
    background:rgba(41, 172, 10, 0.8);/*背景を少し透過させる*/
    /*動き*/
    transition: all 0.3s;}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
    opacity: 1;
    z-index:999;}

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

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

#g-nav.panelactive ul {
    display: block;}

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

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

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






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

/*== 4-6　じわっ（ぼかしから出現） ==*/

.blur{
  animation-name: blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

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



/*===========================================================*/
/* 印象編　8-11　テキストが1文字づつ出現*/
/*===========================================================*/

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}

/*===========================================================*/
/* 印象編　6-1　スクロールすると1画面移動*/
/*===========================================================*/
.hide-area{/*モーダル表示をする場所をあらかじめ隠す*/
	display: none;}
.box{
	display:flex;
	justify-content: center;
	align-items: center;
	text-align: center;}
#box1{
    background:url("/img/bg_02.jpg") no-repeat center;
    background-size: cover;}
#box2{
    background:url("/img/bg_03.jpg") no-repeat center;
    background-size: cover;}
#box3{
	height:100%;
    background:url("/img/bg_04.jpg") no-repeat center;
    background-size: cover;}
#box4{
    background:url("/img/bg_05.jpg") no-repeat center;
    background-size: cover;}


/*========= ページネーションCSS ===============*/
    
    .pagination {
      position:fixed;
      right:15px;
      top: 50%;
        transform: translateY(-50%);
      font-size:1em;
      z-index: 10;
      list-style: none;
    }
    
    .pagination a {
      display:block;
      height:20px;
      margin-bottom:5px;
      color:#fff;
      position:relative;
      padding:4px;
    }
    
    .pagination a.active:after {
      box-shadow:inset 0 0 0 5px;
    }
    
    .pagination a .hover-text {
      position:absolute;
      right:10px;
      top:0;
      opacity:0;
      -webkit-transition: opacity 0.5s ease;
      transition: opacity 0.5s ease;
      padding-right: 15px;
    }
    
    .pagination a:hover .hover-text {
      opacity: 1;
    }
    
    .pagination a:after {
      -webkit-transition:box-shadow 0.5s ease;
      transition:box-shadow 0.5s ease;
      width:10px;
      height:10px;
      display: block;
      border:1px solid;
      border-radius:50%;
      content:'';
      position: absolute;
      margin:auto;
      top:0;
      right:3px;
      bottom:0;
    }
    
    @media screen and (max-width:768px) { 
      .pagination a .hover-text{
        display: none;
      }	
    }