body {
  font-family: "Noto Serif JP", serif;
}

/* カスタムユーティリティ */
.vertical-rl {
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin-left: auto;
  margin-right: auto;
}

.vertical-leading {
  line-height: 2.5rem !important;
}

.horizontal-leading {
  line-height: 3rem !important;
}

@media (min-width: 1024px) {
  .vertical-leading {
    line-height: 3rem !important;
  }
  .vertical-rl2 {
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 画像アニメーション */
.img-wrap {
  opacity: 0;
}

.img-animation {
  animation: img-opacity 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
  position: relative;
}

.img-animation::before {
  animation: img-animation 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-opacity {
  100% {
    opacity: 1;
  }
}

@keyframes img-animation {
  100% {
    transform: translateX(100%);
  }
}

/* グローバルメニューアニメーション */
.gMenu li {
  position: relative;
}
.gMenu li a::after {
  position: absolute;
  left: 0;
  content: "";
  width: 100%;
  height: 2px;
  background: #000000;
  bottom: -10px;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform 0.3s;
}

.gMenu li a:hover::after {
  transform: scale(1, 1);
}

/* ボタンアニメーション */
.btnAnim {
  background: #fff;
  color: #000;
  overflow: hidden;
  position: relative;
  transition-duration: 0.4s;
  z-index: 2;
}
.btnAnim::after {
  background: #000;
  border-radius: 50%;
  content: "";
  display: block;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 100%;
  height: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  transition: opacity 0.5s, transform 0s;
  transition-delay: 0s, 0.4s;
}

.btnAnim:hover {
  color: #fff;
}
.btnAnim:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  transition-delay: 0s;
  transition: opacity 0.8s, transform 0.6s ease-in-out;
}

/* ボタンアニメーション 逆バージョン */
.btnAnimReverse {
  background: #000;
  color: #fff;
  overflow: hidden;
  position: relative;
  transition-duration: 0.6s;
  z-index: 2;
}
.btnAnimReverse::after {
  background: #fff;
  border-radius: 50%;
  content: "";
  display: block;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 100%;
  height: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  transition: opacity 0.5s, transform 0s;
  transition-delay: 0s, 0.4s;
}

.btnAnimReverse:hover {
  color: #000;
  background: #fff;
  cursor: pointer;
}
.btnAnimReverse:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  transition-delay: 0s;
  transition: opacity 0.8s, transform 0.6s ease-in-out;
}

/* テキストぼかし */
.text-noBlur {
  opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.text-blur {
  -webkit-animation-name: textBlur;
  animation-name: textBlur;
  opacity: 1;
  transition: 0.8s;
}

@-webkit-keyframes textBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }

  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}

@keyframes textBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }

  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}