@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP|Noto+Sans+JP:100,300,400,700,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Shippori+Mincho:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@700&display=swap");
/* //////////////////////////////////////


body


////////////////////////////////////// */
body {
  position: relative;
}

#ld_text {
  position: absolute;
  z-index: 99999999;
  width: 100vw;
  height: 100vh;
  font-family: "Shippori Mincho", serif;
  font-size: 0.8em;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 1.5em;
  color: #000;
  text-align: center;
  line-height: 100vh;
  animation: blink 0.3s ease-in-out infinite alternate;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#ld_bg {
  position: absolute;
  width: 100vw;
  height: 100vh;
  text-align: center;
  line-height: 100vh;
  z-index: 9999999;
}
#ld_bg:before, #ld_bg:after {
  content: " "; /*:before,:after要素。これを設定しないとカーテンが出ない*/
  position: fixed; /*下の要素の上にかぶせる*/
  display: block;
  width: 100%; /*横幅は画面全体を覆う*/
  height: 100%; /*上下カーテンの1つあたり高さ*/
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s; /*動きとイージング*/
  transition-delay: 0.3s; /*読み込み完了〜カーテン動き出すまでの時間*/
  background-color: #8DA3D2; /*カーテン色 なぜかこの位置じゃ無いと反映されない*/
}
#ld_bg span {
  display: block;
  z-index: 999;
}

/*///////////////////////////////////////////////

bodyタグにloadedクラスが付与された後の挙動

///////////////////////////////////////////////*/
#ld_bg:before {
  top: 0;
}

#ld_bg:after {
  bottom: 0;
}

.loaded #ld_bg:before {
  height: 0;
  transform: translateY(-1%);
}
.loaded #ld_bg:after {
  height: 0;
  transform: translateY(1%);
}