@charset "utf-8";

/*==================================================
 プログレスバー＋数字カウントアップ
===================================*/

/* Loading背景画面設定　*/

#splash {
  /*fixedで全面に固定*/
  position: fixed;
  z-index: 999;

  width: 100%;
  height: 100%;

  text-align: center;

  color: #00b7b8;
  /*background: #eee;*/
  background: #00ffe7;
}

/* Loadingバー中央配置　*/
#splash_text {
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;

  width: 100%;

  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  color: #00b7b8;
}

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

/*==================================================
 クリックしたらナビが左から右に出現
===================================*/

#g-nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  top: 0;
  left: -120%;

  width: 100%;
  height: 100vh; /*ナビの高さ*/
  /*動き*/

  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;

  background: -webkit-gradient(
    linear,
    left bottom,
    right top,
    from(rgba(74, 198, 186, 1)),
    to(rgba(14, 141, 152, 1))
  );
  background: -o-linear-gradient(
    bottom left,
    rgba(74, 198, 186, 1),
    rgba(14, 141, 152, 1)
  );
  background: linear-gradient(
    to top right,
    rgba(74, 198, 186, 1),
    rgba(14, 141, 152, 1)
  ); /*背景色（グラデーション）*/
}

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

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;

  overflow: auto;

  width: 100%;
  height: 100vh; /*表示する高さ*/

  -webkit-overflow-scrolling: touch;
}

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

  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

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

#g-nav li {
  list-style: none;

  text-align: center;
}

#g-nav li a {
  font-weight: bold;

  display: block;

  padding: 10px;

  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /*color: #333;*/

  color: white;
  text-shadow: 0 0 5px white;
}

/*==================================================
 3本線が1本線に
===================================*/

.openbtn {
  position: fixed;
  z-index: 9999; /*ボタンを最前面に*/
  top: 0;
  left: 0;

  width: 70px;
  height: 100vh;

  cursor: pointer;

  border-right: 1px solid #333;
  background: #f0f0f0;
}

/*×に変化*/
.openbtn span {
  position: absolute;
  left: 18px;

  display: inline-block;

  width: 45%;
  height: 3px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;

  border-radius: 2px;
  background-color: #666;
}

.openbtn span:nth-of-type(1) {
  top: 45vh;
}

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

.openbtn span:nth-of-type(3) {
  top: 47vh;
}

/*activeクラスが付与されると1・3番目の要素が2番目の要素と同じ位置になり一本線に*/

.openbtn.active span:nth-of-type(1),
.openbtn.active span:nth-of-type(3) {
  top: 46vh;
}

@media screen and (max-width: 960px) {
  .openbtn {
    width: 60px;
    height: 60px;

    border: none;
  }

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

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

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

  .openbtn.active span:nth-of-type(1),
  .openbtn.active span:nth-of-type(3) {
    top: 28px;
  }
}

/*==================================================
 影がついて浮き上がる
===================================*/

/*ボタンの形状*/
.float3 {
  position: relative;
  top: 0;

  display: inline-block;

  padding: 8px 40px;
  /*アニメーションの設定*/

  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  text-decoration: none;

  color: #333;
  border: 1px solid #333;
  outline: none;
}

/*hoverをしたらボックスに影がつき、上に上がる*/
.float3:hover {
  top: -3px;

  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

/*==================================================
 線から塗に変化（左から右）
===================================*/

/* ボタン共通設定 */
.btn04 {
  /*線の基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/

  display: inline-block;
  /*はみ出す背景色を隠す*/
  overflow: hidden;

  margin: 0 10px 10px 10px;
  padding: 10px 30px;

  text-decoration: none;

  color: #333;
  border: 1px solid #ccc;
  outline: none;
}

/*hoverした際のボタンの形状*/
.btn04:hover {
  /*色の変化を遅らせる*/
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;

  color: #fff;
  border-color: transparent;
}

/*線の設定*/
.btn04 span {
  z-index: 2;

  display: block;
}

/*== 左から右 */

/*線の設定*/
.borderleft span::before,
.borderleft span::after {
  /*絶対配置で線の位置を決める*/
  position: absolute;

  width: 0;
  height: 1px;

  content: "";
  /*アニメーションの設定*/
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  /*線の形状*/

  background: #333;
}

/*左上線*/
.borderleft span::before {
  top: 0;
  left: 0;
}

/*左下線*/
.borderleft span::after {
  bottom: 0;
  left: 0;
}

/*hoverをすると線が伸びる*/
.borderleft:hover span::before,
.borderleft:hover span::after {
  width: 100%;
}

/*背景の設定*/
.borderleft::before {
  /*絶対配置で線の位置を決める*/
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;

  width: 0;
  /*背景の形状*/
  height: 100%;

  content: "";
  /*アニメーションの設定*/
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;

  background: #333;
}

/*hoverをすると背景が伸びる*/
.borderleft:hover::before {
  width: 100%;
  /*0.4秒遅れてアニメーション*/

  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

/*===========================================================*/
/* 線の上を別の線が伸びる*/
/*===========================================================*/

.btnlinestretches4 {
  /*線の基点とするためrelativeを指定*/
  position: relative;

  display: inline-block;

  padding: 10px 50px 10px 30px;

  text-decoration: none;
  /*リンクの形状*/

  color: #333;
  outline: none;
}

/*線の設定*/
.btnlinestretches4::before,
.btnlinestretches4::after {
  /*絶対配置で線の位置を決める*/
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 2px;

  content: "";
  /*アニメーションの指定*/
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  /*線の形状*/

  background: #333;
}

/*hover時に伸びる線の形状*/
.btnlinestretches4::after {
  width: 0;

  background: #00b7b8;
}

/*hover時に100%に伸びる*/
.btnlinestretches4:hover::after {
  width: 100%;
}

/*矢印の設定*/
.btnlinestretches4 span::after {
  /*絶対配置で矢印の位置を決める*/
  position: absolute;
  top: 1.3em;
  right: 20px;
  /*矢印の形状*/

  width: 5px;
  height: 5px;

  content: "";
  /*アニメーションの指定*/
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);

  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

/*hover時に矢印が移動*/
.btnlinestretches4:hover span::after {
  right: 15px;

  border-color: #00b7b8;
}

/*==================================================
/* 最低限おぼえておきたい動き*/
/*===================================*/

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

.fadeDown {
  -webkit-animation-name: fadeDownAnime;
  animation-name: fadeDownAnime;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;

  opacity: 0;

  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes fadeDownAnime {
  from {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);

    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);

    opacity: 1;
  }
}

@keyframes fadeDownAnime {
  from {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);

    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);

    opacity: 1;
  }
}

/* 4-7 にゅーん（滑らかに変形して出現） */
.smooth {
  -webkit-animation-name: smoothAnime;
  animation-name: smoothAnime;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;

  opacity: 0;

  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  　transform-origin: left;
}

@-webkit-keyframes smoothAnime {
  from {
    -webkit-transform: translate3d(0, 100%, 0) skewY(12deg);
    transform: translate3d(0, 100%, 0) skewY(12deg);

    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0) skewY(0);
    transform: translate3d(0, 0, 0) skewY(0);

    opacity: 1;
  }
}

@keyframes smoothAnime {
  from {
    -webkit-transform: translate3d(0, 100%, 0) skewY(12deg);
    transform: translate3d(0, 100%, 0) skewY(12deg);

    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0) skewY(0);
    transform: translate3d(0, 0, 0) skewY(0);

    opacity: 1;
  }
}

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

/*===========================================================*/
/*  画像が縮小 　*/
/*===========================================================*/

.zoomOut img {
  -webkit-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.zoomOut:hover img {
  /*hoverした時の変化*/
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1); /*拡大の値を変更したい場合はこの数値を変更*/
}

.zoomOut .mask {
  display: block;
  overflow: hidden;

  height: 11vw;
}

@media screen and (max-width: 1020px) {
  .zoomOut .mask {
    height: 25vw;
  }
}

@media screen and (max-width: 550px) {
  .zoomOut .mask {
    height: 45vw;
  }
}

/*===========================================================*/
/* 流体シェイプ*/
/*===========================================================*/

.fluid {
  width: 100%;
  height: 100%;

  -webkit-animation: fluidrotate 30s ease 0s infinite;
  animation: fluidrotate 30s ease 0s infinite;
  /*background: linear-gradient(45deg,rgba(74,198,186,1),rgba(14,141,152,1));/*背景色（グラデーション）*/

  background: -o-radial-gradient(
    10% 20%,
    circle farthest-corner,
    rgba(161, 255, 255, 1) 11.3%,
    rgba(6, 255, 255, 1) 41.2%,
    rgba(0, 216, 216, 1) 77.8%
  );
  background: radial-gradient(
    circle farthest-corner at 10% 20%,
    rgba(161, 255, 255, 1) 11.3%,
    rgba(6, 255, 255, 1) 41.2%,
    rgba(0, 216, 216, 1) 77.8%
  );
}

@-webkit-keyframes fluidrotate {
  0%,
  100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}

@keyframes fluidrotate {
  0%,
  100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}

/*===========================================================*/
/* 幾何学模様*/
/*===========================================================*/

#particles-js {
  position: fixed; /*描画固定*/
  z-index: -1; /*描画を一番下に*/

  width: 100%;
  height: 100%;
}

#wrapper {
  position: relative; /*描画を#particles-jsよりも上にするためposition:relative;を指定*/
  z-index: 1; /*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
}

/*===========================================================*/
/* 波打つ（1 つ 重なりあり）*/
/*===========================================================*/

#waveCanvas {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
}