body {
  font-family: "Noto Sans JP", sans-serif;
  background-color: white;
}

.en {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.code-line {
  font-family: "Courier New", monospace;
  font-size: 14px;
  color: #d2d2d2;
}

.header-content {
  position: relative;
  z-index: 10;
}

.header-container {
  position: relative;
  background-color: #fff;
}

.bg-code {
  /* background-color: white; */
}

#codeBackground span {
  pointer-events: none;
  white-space: nowrap;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) scale(0.95);
    opacity: 0;
  }

  15% {
    transform: translateY(calc(-0.5 * var(--rise))) scale(1.08);
    opacity: 1;
  }

  100% {
    transform: translateY(calc(-1 * var(--rise))) scale(1);
    opacity: 0;
  }
}

.floating-word {
  position: absolute;
  bottom: 0;
  font-family: "Lexend Tera", sans-serif;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  animation-fill-mode: forwards;
}

.floating-item {
  position: absolute;
  top: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.floating-icon {
  display: block;
  /* filter: brightness(1.3) drop-shadow(0 0 2px #555); */
}

#codeContent {
  font-family: monospace;
  font-size: 0.9rem;
  /* 小さめにして密度アップ */
  line-height: 1.2;
  /* 行間も詰める */
  /* color: rgb(206, 205, 205); */
  user-select: none;
  /* white-space: pre-wrap; */
  word-break: break-word;
  overflow-wrap: break-word;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 各辺の線：共通スタイル */
.border-line {
  position: absolute;
  background-color: #66FFCC;
  opacity: 1;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(102, 255, 204, 0.6),
    0 0 12px rgba(102, 255, 204, 0.4),
    0 0 20px rgba(102, 255, 204, 0.2);
  transition: opacity 0.3s ease-in-out;
}

/* 上辺 */
.border-top {
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  animation: drawTop 10s infinite;
}

/* 右辺 */
.border-right {
  top: 0;
  right: 0;
  width: 2px;
  height: 0%;
  animation: drawRight 10s infinite;
}

/* 下辺 */
.border-bottom {
  bottom: 0;
  right: 0;
  height: 2px;
  width: 0%;
  animation: drawBottom 10s infinite;
}

/* 左辺 */
.border-left {
  bottom: 0;
  left: 0;
  width: 2px;
  height: 0%;
  animation: drawLeft 10s infinite;
}

/* アニメーション定義 */
@keyframes drawTop {
  0% {
    width: 0%;
    opacity: 1;
  }

  10% {
    width: 100%;
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes drawRight {
  10% {
    height: 0%;
    opacity: 1;
  }

  20% {
    height: 100%;
    opacity: 1;
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes drawBottom {
  20% {
    width: 0%;
    opacity: 1;
  }

  30% {
    width: 100%;
    opacity: 1;
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes drawLeft {
  30% {
    height: 0%;
    opacity: 1;
  }

  40% {
    height: 100%;
    opacity: 1;
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Tailwind CSS のグローバル CSS か、@layer utilities 内に記述 */
.dot-divider {
  background-image: repeating-linear-gradient(to right,
      #dedede 0px,
      #dedede 8px,
      transparent 8px,
      transparent 16px);
  background-repeat: repeat-x;
  background-size: 16px 8px;
}

/* blog 2023/4/22 画像アスペクト比を維持したまま、日付、カテゴリ、タイトルの位置をキープ。レスポンシブ対応*/
.top-swiper .swiper-pagination {
  padding-top: 10px;
  position: relative;
}

/* blog 2023/4/22 */
/* グローバルCSSまたはモジュールに追加 */
@keyframes cowUp {
  0% {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }

  80% {
    transform: translate(-50%, -80px) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -100px) scale(0.2);
    opacity: 0;
  }
}

.animate-cow {
  animation: cowUp 1.8s ease-in-out forwards;
}

@keyframes ufoFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4px);
  }
}

.ufo-hover-animate {
  animation: ufoFloat 2s ease-in-out infinite;
}

@keyframes cowRise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(-60px) scale(0.2);
    opacity: 0;
  }
}

.animate-cow {
  animation: cowRise 1.8s ease-in-out forwards;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

html {
  scroll-behavior: smooth;
}

:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}