@charset "utf-8";

/* ファーストビューのスライドショー */
.first-view {
  width: 100%;
  height: 100vh;
  position: relative; /* h1の基準位置 */
}

.first-view h1{ /* キャッチコピー英字 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); /* 自身の幅と高さの半分移動 */
  text-align: center;
  font-size: 6rem;
  font-family: 'Mrs Saint Delafield', serif;
  opacity: 0.9;
  line-height: 1.3;
  text-shadow: 2px 2px 10px #998543;
  font-weight: normal;
}

@media (max-width: 834px) { /* タブレットの縦向きで切替 834*1194 */
  .first-view h1{
    top: 40%;
    font-size: 3.25rem;
  }

  .first-view h1 br{ /* 改行をなくす */
    display: none;
  }
}

/* 下からフェードアップ2秒 */
.fadeUp{ /* fadeUpクラスの要素を透明度0%にして、3rem分下に移動、2秒かけてアニメーション */
  opacity: 0;
  transform: translateY(3rem);
  transition: 2s;
}

.fadeUp.on{ /* .fadeUpかつ.onクラスがある要素の透明度と位置を元に戻す */
  opacity: 1;
  transform: translateY(0);
}

/* 下からフェードアップ1秒 */
.fadeUp-fast{ /* fadeUpクラスの要素を透明度0%にして、3rem分下に移動、1秒かけてアニメーション */
  opacity: 0;
  transform: translateY(3rem);
  transition: 1s;
}

.fadeUp-fast.on{ /* .fadeUpかつ.onクラスがある要素の透明度と位置を元に戻す */
  opacity: 1;
  transform: translateY(0);
}

/* 左へフェード */
.fadeLeft::before{ /* .fadeLeftかつ.onクラスがある要素の前の疑似要素を透明度0%にして、位置を自身の幅100%の右に隠す */
  opacity: 0;
  transform: translateX(100%);
  transition: 1s;
}

.fadeLeft.on::before{ /* .fadeLeftかつ.onクラスがある要素の前の疑似要素の透明度と位置を元に戻す */
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 834px) { /* タブレットの縦向きで切替 834*1194 */
  .fadeLeft::before{
    opacity: 0;
    transform: translateX(-100%);
    transition: 1s;
    }
    .fadeLeft.on::before{ /* .fadeLeftかつ.onクラスがある要素の前の疑似要素の透明度と位置を元に戻す */
      opacity: 1;
      transform: translateX(0);
    }
  }

/* 位置そのままでフェードイン */
.fadeIn{ /* fadeInクラスの要素を透明度0%にして、3秒かけてアニメーション */
  opacity: 0;
  transition: 3s;
}

.fadeIn.on{ /* .fadeInかつ.onクラスがある要素の透明度を元に戻す */
  opacity: 1;
}