/* ============================================================
   BeEngineer Tokyo — 共通スタイル
   3ページ（index / teacher / student）で共有
   イメージカラー：緑 #3fb04d（ホバー #39a044）
   ============================================================ */

:root {
  --be-green: #3fb04d;
  --be-green-dark: #39a044;
  --be-ink: #111827;
  --be-mute: #6b7280;
  --be-line: #e5e7eb;
  --be-surface: #f9fafb;
}

/* scroll-behavior: smooth は ScrollTrigger の scrub / pin と競合し
   スクロールの遅延やもたつきの原因になるため無効にする。
   アンカーリンクの滑らかな移動は JS 側で個別に処理する。 */
html { scroll-behavior: auto; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #ffffff;
  color: var(--be-ink);
  -webkit-font-smoothing: antialiased;
}

/* 英字ラベル（Eyebrow）— 構造の目印として字間を広く */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* セクション見出しの共通スケール */
.h-section {
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ブランドの主アクセント下線 */
.accent-underline {
  background-image: linear-gradient(transparent 62%, rgba(63, 176, 77, 0.22) 62%);
}

/* ヘッダーのナビ下線アニメーション */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* リンク・ボタンのフォーカス可視化（アクセシビリティ floor） */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--be-green);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-link::after { transition: none; }
}

/* ============================================================
   トップページ ヒーロー装飾（元 index.html 由来）
   ============================================================ */

/* 背景で流れる写真トラック */
.marquee-track {
  display: flex;
  width: max-content;
}
@keyframes be-marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes be-marquee-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.animate-marquee-l {
  display: flex;
  width: max-content;
  animation: be-marquee-left 45s linear infinite;
}
.animate-marquee-r {
  display: flex;
  width: max-content;
  animation: be-marquee-right 40s linear infinite;
}
.animate-marquee-l:hover,
.animate-marquee-r:hover {
  animation-play-state: paused;
}

/* スクロール／ロードで下から現れるリビール */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* 連続要素のディレイ */
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .animate-marquee-l,
  .animate-marquee-r { animation: none; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}