/* Base settings for REM usage (Responsive) */
html {
  font-size: 16px;
}

@media (max-width: 1200px) {
  html {
    font-size: 1.3311148087vw;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 4.1025641026vw;
  }
}

/* カスタムユーティリティ: 縦書き */
.writing-vertical-rl {
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
}

/* アニメーション共通設定 */
/* 下からフェードイン */
.fade-in-section {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 左上へ移動フェードイン */
.fade-in-left-top {
  opacity: 0;
  transform: translate(3rem, 3rem);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-left-top.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* 右上へ移動フェードイン */
.fade-in-right-top {
  opacity: 0;
  transform: translate(-3rem, 3rem);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-right-top.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* スケールアップ＆フェードイン (企業理念・Strength・News用) */
.fade-in-scale-up {
  opacity: 0;
  transform: translateY(3rem) scale(0.3);
  /* cubic-bezierで「滑っと」感を演出 */
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-scale-up.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 共通ヒーローセクション */
.page-hero {
  min-height: 60vh;
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(20, 184, 166, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.2) 0%, transparent 50%);
  pointer-events: none;
}

.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .sp-only {
    display: block;
  }
}